Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
ef7bc8adc2
commit
970a94c7d5
@@ -0,0 +1,148 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ProtectedLayout } from "@/components/protected-layout";
|
||||
import { PageContainer, PageHeader } from "@/components/app-shell";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { Receipt, Search } from "lucide-react";
|
||||
import { formatCurrency, formatDate, statusBadgeClass } from "@/lib/format";
|
||||
|
||||
export const Route = createFileRoute("/invoices/")({
|
||||
component: () => (
|
||||
<ProtectedLayout>
|
||||
<InvoicesIndex />
|
||||
</ProtectedLayout>
|
||||
),
|
||||
});
|
||||
|
||||
function InvoicesIndex() {
|
||||
const [invoices, setInvoices] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [q, setQ] = useState("");
|
||||
const [status, setStatus] = useState<string>("all");
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const { data } = await supabase
|
||||
.from("invoices")
|
||||
.select("*, client:clients(id, name), case:cases(id, case_number, title)")
|
||||
.order("created_at", { ascending: false });
|
||||
setInvoices(data ?? []);
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return invoices.filter((i) => {
|
||||
if (status !== "all" && i.status !== status) return false;
|
||||
if (!q) return true;
|
||||
const s = q.toLowerCase();
|
||||
return (
|
||||
i.invoice_number?.toLowerCase().includes(s) ||
|
||||
i.client?.name?.toLowerCase().includes(s) ||
|
||||
i.case?.case_number?.toLowerCase().includes(s)
|
||||
);
|
||||
});
|
||||
}, [invoices, q, status]);
|
||||
|
||||
const totals = useMemo(() => {
|
||||
const outstanding = filtered.reduce((s, i) => s + (Number(i.total) - Number(i.amount_paid)), 0);
|
||||
const paid = filtered.reduce((s, i) => s + Number(i.amount_paid), 0);
|
||||
return { outstanding, paid, count: filtered.length };
|
||||
}, [filtered]);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<PageHeader title="Invoices" description="All client invoices across the firm" />
|
||||
|
||||
<div className="grid sm:grid-cols-3 gap-3 mb-5">
|
||||
<Stat label="Invoices" value={totals.count.toString()} />
|
||||
<Stat label="Outstanding A/R" value={formatCurrency(totals.outstanding)} />
|
||||
<Stat label="Collected" value={formatCurrency(totals.paid)} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input className="pl-9" placeholder="Search by invoice #, client, case…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
</div>
|
||||
<Select value={status} onValueChange={setStatus}>
|
||||
<SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All statuses</SelectItem>
|
||||
<SelectItem value="draft">Draft</SelectItem>
|
||||
<SelectItem value="sent">Sent</SelectItem>
|
||||
<SelectItem value="paid">Paid</SelectItem>
|
||||
<SelectItem value="overdue">Overdue</SelectItem>
|
||||
<SelectItem value="void">Void</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card className="border-border/60 overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 font-medium">Invoice #</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Client</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Issued</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Due</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Status</th>
|
||||
<th className="text-right px-4 py-3 font-medium">Total</th>
|
||||
<th className="text-right px-4 py-3 font-medium">Balance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr><td colSpan={7} className="text-center py-12 text-muted-foreground">Loading…</td></tr>}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<tr><td colSpan={7} className="text-center py-12 text-muted-foreground">
|
||||
<Receipt className="h-8 w-8 mx-auto mb-2 opacity-40" />
|
||||
No invoices yet. Generate one from a Client or Case page.
|
||||
</td></tr>
|
||||
)}
|
||||
{filtered.map((i) => {
|
||||
const balance = Number(i.total) - Number(i.amount_paid);
|
||||
return (
|
||||
<tr key={i.id} className="border-t hover:bg-muted/30">
|
||||
<td className="px-4 py-3">
|
||||
<Link to="/invoices/$invoiceId" params={{ invoiceId: i.id }} className="font-medium hover:text-primary">
|
||||
{i.invoice_number}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{i.client ? (
|
||||
<Link to="/clients/$clientId" params={{ clientId: i.client.id }} className="hover:text-primary">
|
||||
{i.client.name}
|
||||
</Link>
|
||||
) : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{formatDate(i.issue_date)}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{formatDate(i.due_date)}</td>
|
||||
<td className="px-4 py-3"><Badge variant="outline" className={statusBadgeClass(i.status)}>{i.status}</Badge></td>
|
||||
<td className="px-4 py-3 text-right tabular-nums">{formatCurrency(i.total)}</td>
|
||||
<td className="px-4 py-3 text-right tabular-nums font-medium">{formatCurrency(balance)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Card className="border-border/60">
|
||||
<CardContent className="p-4">
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground">{label}</div>
|
||||
<div className="font-serif text-2xl mt-1">{value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user