eewing
76 lines
2.7 KiB
Svelte
76 lines
2.7 KiB
Svelte
<script lang="ts">
|
||
import { Button } from "$lib/components/ui/button";
|
||
import { Card, CardContent } from "$lib/components/ui/card";
|
||
import { Input } from "$lib/components/ui/input";
|
||
|
||
let { data }: { data: { receipts: { id: string }[] } } = $props();
|
||
let searchQuery = $state("");
|
||
|
||
const receipts = $derived(data?.receipts ?? []);
|
||
const filteredReceipts = $derived(
|
||
(() => {
|
||
const q = searchQuery.trim().toLowerCase();
|
||
if (!q) return receipts;
|
||
return receipts.filter((r) => r.id.toLowerCase().includes(q));
|
||
})()
|
||
);
|
||
</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 min-w-0">
|
||
<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 truncate sm:text-2xl">Receipts</h1>
|
||
</div>
|
||
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-2">
|
||
<div class="w-full sm:w-64 sm:min-w-0">
|
||
<Input
|
||
type="search"
|
||
placeholder="Search receipts…"
|
||
bind:value={searchQuery}
|
||
class="h-11 w-full sm:h-9"
|
||
/>
|
||
</div>
|
||
<span class="text-muted-foreground text-sm shrink-0">
|
||
{filteredReceipts.length}{filteredReceipts.length !== receipts.length ? ` of ${receipts.length}` : ""} receipts
|
||
</span>
|
||
<a href="/receipts/new" class="block shrink-0">
|
||
<Button class="w-full sm:w-auto min-h-11">New receipt</Button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{#if filteredReceipts.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">
|
||
{receipts.length === 0 ? "No receipts yet." : "No receipts match your search."}
|
||
</p>
|
||
<p class="text-muted-foreground text-center text-xs">
|
||
{receipts.length === 0 ? "Create a receipt to get started." : "Try a different search."}
|
||
</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 filteredReceipts 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>
|