9e6235af92
The upload panel expanded inline above the table, which pushed the list down the page every time it opened. It is now a standalone modal: backdrop, Escape to close, body scroll locked, sheet on small screens and a centred dialog from sm up. The file is chosen or dropped into the modal and nothing is sent until OK — a mis-drop can be cleared without leaving a stray record in the inbox. Cancel, a busy state and inline size/type errors round it out. The status column carried two extra lines on every single row — a multi-site note and a "booked R X · R Y VAT" figure — which is repetition: the figures are already in the Revenue/VAT/Total columns, and the note restated something the client ruled on. Both are gone, leaving just the booked/unbooked badge, which is the only thing that needs acting on. The per-row booking figures stay available in the expanded detail. The plumbing those two lines used — the multi-site cross-invoice lookup and the per-row booked/VAT totals — is now unused and removed with them. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
241 lines
No EOL
10 KiB
TypeScript
241 lines
No EOL
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronRight, AlertTriangle, CheckCircle2, MapPin, FileText } from "lucide-react";
|
|
import type { Asset, BookedLine, Invoice } from "@/lib/data";
|
|
import { BOOK_INCLUSIVE_VAT, BOOKED_LONG_LABEL } from "@/lib/invoice-booking";
|
|
import { ZAR, ZAR2 } from "@/lib/utils";
|
|
import { bookedAmount } from "@/lib/invoice-booking";
|
|
import { InvoiceSummary } from "@/components/InvoiceTable";
|
|
|
|
// One row per invoice. Clicking a row expands the full line-item detail underneath it,
|
|
// so the common case (scan for problems) is a single table read and the detail is opt-in.
|
|
//
|
|
// Anything wrong with an invoice — an unbooked line, no document attached — is surfaced
|
|
// on its own row, because a problem buried inside a collapsed detail is a problem you miss.
|
|
export function InvoiceList({
|
|
invoices,
|
|
linesByInvoice,
|
|
assets,
|
|
}: {
|
|
invoices: Invoice[];
|
|
linesByInvoice: Record<string, BookedLine[]>;
|
|
assets: Asset[];
|
|
}) {
|
|
const [open, setOpen] = useState<string | null>(null);
|
|
|
|
const allLines = Object.values(linesByInvoice).flat();
|
|
const bookedLines = allLines.filter((l) => l.isBooked);
|
|
const sum = (ls: BookedLine[], k: "amount_excl" | "vat") => ls.reduce((s, l) => s + (l[k] || 0), 0);
|
|
const bookedExVat = sum(bookedLines, "amount_excl");
|
|
const bookedVat = sum(bookedLines, "vat");
|
|
|
|
const totals = invoices.reduce(
|
|
(acc, i) => ({
|
|
exVat: acc.exVat + (i.total_excl || 0),
|
|
vat: acc.vat + (i.vat || 0),
|
|
incl: acc.incl + (i.total_incl || 0),
|
|
}),
|
|
{ exVat: 0, vat: 0, incl: 0 },
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-5 flex flex-wrap items-stretch gap-3">
|
|
<Stat label="Invoices" value={String(invoices.length)} tone="teal" />
|
|
{/* What actually got booked against the machines, per the shared policy. */}
|
|
<div className="px-5 py-3 rounded-2xl bg-[#00798C]/10 border border-[#00798C]/15">
|
|
<div className="text-xs text-[#00798C]">{BOOKED_LONG_LABEL}</div>
|
|
<div className="text-2xl font-semibold tabular-nums text-[#003D5B] dark:text-white">
|
|
{ZAR2(bookedAmount(bookedExVat, bookedVat))}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
|
|
{BOOK_INCLUSIVE_VAT
|
|
? `${ZAR2(bookedExVat)} ex VAT + ${ZAR2(bookedVat)} VAT`
|
|
: `${ZAR2(bookedVat)} VAT not counted as income`}
|
|
</div>
|
|
</div>
|
|
{/* What the debtors are actually invoiced. */}
|
|
<Stat label="Billed (incl VAT)" value={ZAR2(totals.incl)} tone="brand" />
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-[#131a21] rounded-2xl border border-gray-100 dark:border-white/5 shadow-sm overflow-hidden">
|
|
{/* Rule 1 + 4: scrolls inside its own container; page never scrolls sideways. */}
|
|
<div className="overflow-x-auto" style={{ WebkitOverflowScrolling: "touch" }}>
|
|
<table className="w-full text-sm min-w-[820px]">
|
|
<thead>
|
|
<tr className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/[0.02]">
|
|
<th className="text-left py-3 px-4 font-medium sticky left-0 z-10 bg-gray-50/95 dark:bg-[#1a222b]/95 backdrop-blur">
|
|
Invoice
|
|
</th>
|
|
<th className="text-left py-3 px-3 font-medium whitespace-nowrap">Site</th>
|
|
<th className="text-left py-3 px-3 font-medium whitespace-nowrap">Period</th>
|
|
<th className="text-right py-3 px-3 font-medium whitespace-nowrap">Lines</th>
|
|
<th className="text-right py-3 px-3 font-medium whitespace-nowrap">Revenue ex VAT</th>
|
|
<th className="text-right py-3 px-3 font-medium whitespace-nowrap">VAT</th>
|
|
<th className="text-right py-3 px-3 font-medium whitespace-nowrap">Total incl VAT</th>
|
|
<th className="text-left py-3 px-4 font-medium whitespace-nowrap">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invoices.map((inv) => {
|
|
const lines = linesByInvoice[inv.id] ?? [];
|
|
const booked = lines.filter((l) => l.isBooked);
|
|
const unbooked = lines.filter((l) => !l.isBooked);
|
|
// Only an unbooked line is a problem. A machine used at two sites in a
|
|
// month is expected, so it must not tint the row or badge it as an error.
|
|
const hasProblem = unbooked.length > 0;
|
|
const isOpen = open === inv.id;
|
|
const sum = (ls: BookedLine[], k: "amount_excl" | "vat") =>
|
|
ls.reduce((s, l) => s + (l[k] || 0), 0);
|
|
const bookedExVat = sum(booked, "amount_excl");
|
|
const bookedVat = sum(booked, "vat");
|
|
|
|
return (
|
|
<InvoiceRow
|
|
key={inv.id}
|
|
invoice={inv}
|
|
lineCount={lines.length}
|
|
unbooked={unbooked.length}
|
|
hasProblem={hasProblem}
|
|
isOpen={isOpen}
|
|
onToggle={() => setOpen(isOpen ? null : inv.id)}
|
|
expanded={
|
|
isOpen ? (
|
|
<div className="p-3 sm:p-4 bg-gray-50/60 dark:bg-white/[0.02]">
|
|
<InvoiceSummary invoice={inv} lines={lines} assets={assets} embedded />
|
|
</div>
|
|
) : null
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function InvoiceRow({
|
|
invoice, lineCount, unbooked,
|
|
hasProblem, isOpen, onToggle, expanded,
|
|
}: {
|
|
invoice: Invoice;
|
|
lineCount: number;
|
|
unbooked: number;
|
|
hasProblem: boolean;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
expanded: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<>
|
|
<tr
|
|
className={`border-b border-gray-50 dark:border-white/5 transition ${
|
|
hasProblem ? "bg-[#D1495B]/[0.04]" : "hover:bg-gray-50/60 dark:hover:bg-white/[0.02]"
|
|
}`}
|
|
>
|
|
{/* Sticky first column so the invoice identity survives horizontal scroll. */}
|
|
<td
|
|
className={`py-2 px-4 sticky left-0 z-10 ${
|
|
hasProblem ? "bg-[#D1495B]/[0.04] dark:bg-[#1a1319]" : "bg-white dark:bg-[#131a21]"
|
|
}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
aria-expanded={isOpen}
|
|
className="flex items-center gap-2 min-h-[44px] w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#30638E] rounded-lg"
|
|
>
|
|
<ChevronRight
|
|
className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
|
|
/>
|
|
<span className="font-mono text-xs font-semibold text-[#00798C] whitespace-nowrap">
|
|
{invoice.invoice_no}
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<td className="py-2 px-3 whitespace-nowrap">
|
|
{invoice.site ? (
|
|
<span className="inline-flex items-center gap-1.5 text-sm text-[#003D5B] dark:text-white">
|
|
<MapPin className="w-3.5 h-3.5 text-[#EDAE49] shrink-0" />
|
|
{invoice.site}
|
|
</span>
|
|
) : (
|
|
<span className="text-sm text-gray-400 dark:text-gray-500">—</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2 px-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap tabular-nums">
|
|
{invoice.period_from.slice(0, 10)} → {invoice.period_to.slice(0, 10)}
|
|
</td>
|
|
<td className="py-2 px-3 text-right tabular-nums text-gray-700 dark:text-gray-300">{lineCount}</td>
|
|
<td className="py-2 px-3 text-right tabular-nums font-medium text-[#003D5B] dark:text-white whitespace-nowrap">
|
|
{ZAR2(invoice.total_excl)}
|
|
</td>
|
|
<td className="py-2 px-3 text-right tabular-nums text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
|
{ZAR2(invoice.vat)}
|
|
</td>
|
|
<td className="py-2 px-3 text-right tabular-nums font-semibold text-[#003D5B] dark:text-white whitespace-nowrap">
|
|
{ZAR2(invoice.total_incl)}
|
|
</td>
|
|
<td className="py-2 px-4 whitespace-nowrap">
|
|
{hasProblem ? (
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-[#D1495B]/10 text-[#D1495B] text-xs font-semibold">
|
|
<AlertTriangle className="w-3.5 h-3.5 shrink-0" />
|
|
{unbooked} unbooked
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-[#00798C]/10 text-[#00798C] text-xs font-semibold">
|
|
<CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
|
|
All booked
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
|
|
{isOpen && (
|
|
<tr>
|
|
{/* Span the full table so the detail panel is not clipped by the sticky column. */}
|
|
<td colSpan={8} className="p-0 border-b border-gray-100 dark:border-white/5">
|
|
{expanded}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value, tone }: { label: string; value: string; tone: "teal" | "brand" }) {
|
|
if (tone === "brand") {
|
|
return (
|
|
<div className="bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-5 py-3 text-white shadow-lg shadow-teal-500/20">
|
|
<div className="text-xs text-white/80">{label}</div>
|
|
<div className="text-2xl font-semibold tabular-nums">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="px-5 py-3 rounded-2xl bg-[#00798C]/10 border border-[#00798C]/15">
|
|
<div className="text-xs text-[#00798C]">{label}</div>
|
|
<div className="text-2xl font-semibold tabular-nums text-[#003D5B] dark:text-white">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Kept so an empty folder still renders a usable page.
|
|
export function EmptyInvoices() {
|
|
return (
|
|
<div className="bg-white dark:bg-[#131a21] border border-gray-100 dark:border-white/5 rounded-2xl shadow-sm p-10 text-center">
|
|
<FileText className="w-8 h-8 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
|
|
<p className="text-gray-500 dark:text-gray-400">No invoices yet.</p>
|
|
<p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
|
|
Add a <code className="font-mono text-[#00798C]">data/source/invoice-*.json</code> then run{" "}
|
|
<code className="font-mono text-[#00798C]">npm run seed</code>.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { ZAR }; |