Enhance routing in SvelteKit project by adding new receipt-related routes, updating existing route parameters, and improving layout handling. Refactor components to streamline UI interactions and remove unused imports for better performance.

2026-02-18 10:51:09 -06:00
parent a82c89674a
commit 809c784209
31 changed files with 253 additions and 104 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+
+  let { data }: { data: { receipts: { id: string }[] } } = $props();
+  const receipts = $derived(data?.receipts ?? []);
+</script>
+
+<svelte:head>
+  <title>Receipts – Stackq</title>
+</svelte:head>
+
+<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div class="flex items-center gap-3">
+      <a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
+      <h1 class="text-xl font-semibold sm:text-2xl">Receipts</h1>
+    </div>
+    <a href="/receipts/new" class="block shrink-0">
+      <Button class="w-full sm:w-auto">New receipt</Button>
+    </a>
+  </div>
+
+  {#if receipts.length === 0}
+    <Card>
+      <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
+        <p class="text-muted-foreground text-center text-sm">No receipts yet.</p>
+        <p class="text-muted-foreground text-center text-xs">Create a receipt to get started.</p>
+        <a href="/receipts/new">
+          <Button variant="outline">New receipt</Button>
+        </a>
+        <a href="/">
+          <Button variant="ghost">Back to home</Button>
+        </a>
+      </CardContent>
+    </Card>
+  {:else}
+    <div class="flex flex-col gap-2">
+      {#each receipts as receipt (receipt.id)}
+        <Card>
+          <CardContent class="p-4">
+            <a href="/receipts/{receipt.id}" class="font-medium hover:underline">Receipt {receipt.id}</a>
+          </CardContent>
+        </Card>
+      {/each}
+    </div>
+  {/if}
+</main>