invoices page

2 files changed, 19 insertions, 5 deletions

diff --git a/src/routes/(app)/invoices/+page.server.ts b/src/routes/(app)/invoices/+page.server.ts
index 081d6a5b..eb822802 100644
--- a/src/routes/(app)/invoices/+page.server.ts
+++ b/src/routes/(app)/invoices/+page.server.ts
@@ -2,6 +2,5 @@ import { auth, get } from "$lib/utils";
 
 export async function load({ cookies }) {
 	const invoices = await get("/invoices", auth(cookies));
-  console.log(invoices.length)
 	return { invoices };
 }
diff --git a/src/routes/(app)/invoices/+page.svelte b/src/routes/(app)/invoices/+page.svelte
index ffbc550e..8de240c2 100644
--- a/src/routes/(app)/invoices/+page.svelte
+++ b/src/routes/(app)/invoices/+page.svelte
@@ -1,9 +1,24 @@
 <script>
   let { data } = $props();
   let { invoices } = $derived(data);
+  let show = $state({});
+  let display = (id) => (show[id] = true);
 </script>
 
-{invoices.length}
-{#each invoices as i}
-  {JSON.stringify(i)}
-{/each}
+<div class="container w-full mx-auto text-lg px-2 space-y-2">
+  <div class="mx-auto flex justify-center w-full gap-1">
+    <div class="grid grid-cols-12 w-full text-center text-lg break-all gap-2">
+      {#each invoices as i}
+        <div class="col-span-2 whitespace-nowrap">{i.type}</div>
+        {#if show[i.id]}
+          <div class="col-span-8">{i.hash}</div>
+        {:else}
+          <div class="cursor-pointer grow col-span-8" onclick={() => display(i.id)}>
+            {i.hash.substr(0, 12)}
+          </div>
+        {/if}
+        <div class="col-span-2 whitespace-nowrap">{i.received} / {i.amount}</div>
+      {/each}
+    </div>
+  </div>
+</div>