880 lines
42 KiB
TypeScript
880 lines
42 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, useTransition, useMemo } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import {
|
||
Upload, FileText, ChevronDown, ChevronRight, Loader2, TriangleAlert,
|
||
Check, ShoppingCart, X, Plus, Trash2, Search, Receipt, ChevronLeft, Pencil,
|
||
} from "lucide-react";
|
||
import { ZAR, ZAR2 } from "@/lib/utils";
|
||
import { invoiceStatusOf, STATUS_STYLE } from "@/lib/purchase-invoice-status";
|
||
|
||
const ACCENT = "#30638E";
|
||
|
||
export type PurchaseLineView = {
|
||
id: string;
|
||
line_no: number;
|
||
material_code: string;
|
||
cost_code: string;
|
||
description: string;
|
||
qty: number | null;
|
||
rate: number | null;
|
||
amount_excl: number;
|
||
vat: number | null;
|
||
total_incl: number | null;
|
||
assetCode: string;
|
||
assetName: string;
|
||
};
|
||
|
||
export type PurchaseView = {
|
||
id: string;
|
||
po_no: string;
|
||
supplier: string;
|
||
supplier_code: string;
|
||
po_date: string;
|
||
required_by: string;
|
||
req_no: string;
|
||
currency: string;
|
||
subtotal: number;
|
||
vat: number;
|
||
total: number;
|
||
source_file: string;
|
||
invoices: PurchaseInvoiceView[];
|
||
lines: PurchaseLineView[];
|
||
};
|
||
|
||
export type PurchaseInvoiceView = {
|
||
id: string;
|
||
invoice_no: string;
|
||
invoice_date: string;
|
||
amount_incl: number | null;
|
||
note: string;
|
||
hasPdf: boolean;
|
||
};
|
||
|
||
export function PurchaseIntake({ purchases: allPurchases }: { purchases: PurchaseView[] }) {
|
||
const router = useRouter();
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
const [pending, startTransition] = useTransition();
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [notice, setNotice] = useState<string | null>(null);
|
||
const [open, setOpen] = useState<string | null>(null);
|
||
const [invoiceModal, setInvoiceModal] = useState(false);
|
||
const [range, setRange] = useState<"all" | "week" | "month">("all");
|
||
// 0 = the current week/month, -1 = the one before, …
|
||
const [offset, setOffset] = useState(0);
|
||
const [groupBySupplier, setGroupBySupplier] = useState(true);
|
||
const [dragging, setDragging] = useState(false);
|
||
// Deleting and correcting are hidden until this is switched on, and it resets on reload.
|
||
const [editMode, setEditMode] = useState(false);
|
||
// Drop a PO anywhere on the page. Not while the invoice window is open: that has its own
|
||
// drop area, and an invoice PDF must never be read as a purchase order.
|
||
const dropProps = {
|
||
onDragOver: (e: React.DragEvent) => {
|
||
if (invoiceModal || busy || !e.dataTransfer.types.includes("Files")) return;
|
||
e.preventDefault();
|
||
setDragging(true);
|
||
},
|
||
onDragLeave: (e: React.DragEvent) => {
|
||
if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false);
|
||
},
|
||
onDrop: (e: React.DragEvent) => {
|
||
if (invoiceModal || busy) return;
|
||
e.preventDefault();
|
||
setDragging(false);
|
||
upload(e.dataTransfer.files);
|
||
},
|
||
};
|
||
|
||
const win = useMemo(() => (range === "all" ? null : rangeWindow(range, offset)), [range, offset]);
|
||
// A PO with no readable date cannot be placed in a week or month, so a range hides it —
|
||
// and says so, rather than letting it quietly vanish.
|
||
const purchases = useMemo(
|
||
() => (win ? allPurchases.filter((p) => /^\d{4}-\d{2}-\d{2}/.test(p.po_date) && p.po_date.slice(0, 10) >= win.from && p.po_date.slice(0, 10) <= win.to) : allPurchases),
|
||
[allPurchases, win],
|
||
);
|
||
const undated = win ? allPurchases.filter((p) => !/^\d{4}-\d{2}-\d{2}/.test(p.po_date)).length : 0;
|
||
const groups = useMemo(() => {
|
||
if (!groupBySupplier) return [{ key: "", name: "", items: purchases }];
|
||
const m = new Map<string, PurchaseView[]>();
|
||
for (const p of purchases) m.set(p.supplier || "No supplier", [...(m.get(p.supplier || "No supplier") ?? []), p]);
|
||
return [...m.entries()]
|
||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||
.map(([name, items]) => ({ key: name, name, items }));
|
||
}, [purchases, groupBySupplier]);
|
||
|
||
async function upload(files: FileList | null) {
|
||
if (!files || !files.length) return;
|
||
setBusy(true);
|
||
setError(null);
|
||
setNotice(null);
|
||
try {
|
||
for (const f of Array.from(files)) {
|
||
const fd = new FormData();
|
||
fd.append("file", f);
|
||
const res = await fetch("/api/purchases/intake", { method: "POST", body: fd });
|
||
const body = await res.json();
|
||
if (!body.ok) {
|
||
setError(`${f.name}: ${body.error}`);
|
||
break;
|
||
}
|
||
// A line that found no machine is money that exists but is not yet on one.
|
||
// Named, not buried — that is the whole point of reading the cost code.
|
||
setNotice(
|
||
body.unallocated?.length
|
||
? `${body.purchase.po_no}: ${body.lines} line(s) imported, but no machine matched ${body.unallocated.join(", ")} — left unallocated.`
|
||
: `${body.purchase.po_no}: ${body.lines} line(s) imported and allocated.`,
|
||
);
|
||
}
|
||
startTransition(() => router.refresh());
|
||
} catch {
|
||
setError("Upload failed — check your connection");
|
||
} finally {
|
||
setBusy(false);
|
||
if (inputRef.current) inputRef.current.value = "";
|
||
}
|
||
}
|
||
|
||
const totalSpend = purchases.reduce((s, p) => s + p.total, 0);
|
||
const unallocatedLines = purchases.reduce(
|
||
(s, p) => s + p.lines.filter((l) => !l.assetCode).length,
|
||
0,
|
||
);
|
||
|
||
return (
|
||
<div {...dropProps} className={`relative rounded-2xl transition ${dragging ? "ring-2 ring-dashed ring-[#30638E] ring-offset-4 bg-[#30638E]/5" : ""}`}>
|
||
{dragging && (
|
||
<div className="pointer-events-none absolute inset-0 z-10 grid place-items-center">
|
||
<div className="rounded-xl bg-[#30638E] text-white text-sm font-medium px-5 py-3 shadow-lg inline-flex items-center gap-2">
|
||
<Upload className="w-4 h-4" /> Drop purchase order PDFs to upload
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
|
||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 flex-wrap">
|
||
<span className="px-2.5 py-1 rounded-md font-medium" style={{ background: `${ACCENT}1a`, color: ACCENT }}>
|
||
{purchases.length} purchase order{purchases.length !== 1 && "s"}
|
||
</span>
|
||
<span className="px-2.5 py-1 rounded-md bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400 font-medium">
|
||
{ZAR(totalSpend)} total
|
||
</span>
|
||
{unallocatedLines > 0 && (
|
||
<span className="px-2.5 py-1 rounded-md bg-[#EDAE49]/10 text-[#EDAE49] font-medium">
|
||
{unallocatedLines} line{unallocatedLines !== 1 && "s"} with no machine
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setInvoiceModal(true)}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium inline-flex items-center gap-2 text-white"
|
||
style={{ background: BRAND_ORANGE }}
|
||
>
|
||
<Receipt className="w-4 h-4" /> Upload invoice
|
||
</button>
|
||
<input
|
||
ref={inputRef}
|
||
type="file"
|
||
accept="application/pdf,.pdf"
|
||
multiple
|
||
// The input stays sr-only and the LABEL is the 44px control. It is still
|
||
// focusable, so `peer-focus-visible` puts the focus ring on the label —
|
||
// otherwise a keyboard user tabs onto an invisible 1px target.
|
||
className="sr-only peer"
|
||
id="po-upload"
|
||
onChange={(e) => upload(e.target.files)}
|
||
/>
|
||
<label
|
||
htmlFor="po-upload"
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium inline-flex items-center gap-2 text-white cursor-pointer peer-focus-visible:ring-2 peer-focus-visible:ring-[#30638E] peer-focus-visible:ring-offset-2"
|
||
style={{ background: ACCENT }}
|
||
>
|
||
{busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
|
||
{busy ? "Reading…" : "Upload purchase orders"}
|
||
</label>
|
||
</div>
|
||
{invoiceModal && <InvoiceUploadModal purchases={allPurchases} onClose={() => setInvoiceModal(false)} />}
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="mb-4 flex items-start gap-2 rounded-2xl border border-[#D1495B]/30 bg-[#D1495B]/[0.06] p-4">
|
||
<TriangleAlert className="w-4 h-4 mt-0.5 shrink-0 text-[#D1495B] dark:text-[#D94F60]" />
|
||
<div className="text-xs text-gray-600 dark:text-gray-400">
|
||
<span className="font-semibold text-[#003D5B] dark:text-white">Could not import</span>
|
||
<div className="mt-1">{error}</div>
|
||
</div>
|
||
<button onClick={() => setError(null)} aria-label="Dismiss"
|
||
className="ml-auto min-h-[44px] min-w-[44px] grid place-items-center rounded-lg hover:bg-white dark:hover:bg-white/5">
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
{notice && (
|
||
<div className="mb-4 flex items-start gap-2 rounded-2xl border border-[#00798C]/30 bg-[#00798C]/[0.06] p-4 text-xs text-gray-600 dark:text-gray-400">
|
||
<Check className="w-4 h-4 mt-0.5 shrink-0 text-[#00798C]" />
|
||
<span>{notice}</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex flex-col sm:flex-row sm:flex-wrap sm:items-center gap-3 mb-4">
|
||
<div className="flex items-center gap-1 p-0.5 rounded-lg bg-white dark:bg-white/5 border border-gray-200 dark:border-border self-start">
|
||
{([["all", "All"], ["week", "Week"], ["month", "Month"]] as const).map(([id, label]) => (
|
||
<button key={id} onClick={() => { setRange(id); setOffset(0); }} aria-pressed={range === id}
|
||
className={`min-h-[44px] px-3 rounded-md text-xs font-medium transition ${
|
||
range === id ? "bg-[#003D5B] text-white dark:bg-[#00798C]" : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5"
|
||
}`}>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{win && (
|
||
<div className="flex items-center gap-1">
|
||
<button onClick={() => setOffset(offset - 1)} aria-label="Previous"
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg hover:bg-gray-100 dark:hover:bg-white/5"><ChevronLeft className="w-4 h-4" /></button>
|
||
<span className="text-xs font-medium text-[#003D5B] dark:text-white min-w-[150px] text-center">{win.label}</span>
|
||
<button onClick={() => setOffset(offset + 1)} aria-label="Next" disabled={offset >= 0}
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 disabled:opacity-30"><ChevronRight className="w-4 h-4" /></button>
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => setEditMode(!editMode)}
|
||
aria-pressed={editMode}
|
||
className={`min-h-[44px] px-3 rounded-lg text-xs font-medium inline-flex items-center gap-1.5 border transition sm:ml-auto ${
|
||
editMode ? "bg-[#EDAE49] border-[#EDAE49] text-white" : "border-gray-200 dark:border-border text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5"
|
||
}`}
|
||
>
|
||
<Pencil className="w-4 h-4" /> {editMode ? "Editing — delete enabled" : "Edit mode"}
|
||
</button>
|
||
<label className="inline-flex items-center gap-2 min-h-[44px] text-xs text-gray-600 dark:text-gray-300 cursor-pointer">
|
||
<input type="checkbox" checked={groupBySupplier} onChange={(e) => setGroupBySupplier(e.target.checked)} className="w-4 h-4" />
|
||
Group by supplier
|
||
</label>
|
||
</div>
|
||
{undated > 0 && (
|
||
<div className="mb-3 text-xs text-[#8a6420] dark:text-[#EDAE49]">
|
||
{undated} purchase order{undated !== 1 && "s"} with no readable date {undated !== 1 ? "are" : "is"} hidden while a range is chosen.
|
||
</div>
|
||
)}
|
||
|
||
{allPurchases.length > 0 && purchases.length === 0 ? (
|
||
<section className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-border p-10 shadow-sm text-center text-sm text-gray-500 dark:text-gray-400">
|
||
No purchase orders dated in this {range}.
|
||
</section>
|
||
) : purchases.length === 0 ? (
|
||
<section className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-border p-12 shadow-sm text-center">
|
||
<ShoppingCart className="w-8 h-8 mx-auto mb-3 text-gray-300" />
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">No purchase orders yet.</div>
|
||
<div className="text-xs text-gray-400 dark:text-text-soft mt-1">
|
||
Upload a PO PDF above, or drag it onto this page. Each line is allocated to a machine by its cost code.
|
||
</div>
|
||
</section>
|
||
) : (
|
||
<div className="space-y-5">
|
||
{groups.map((g) => (
|
||
<div key={g.key || "all"}>
|
||
{groupBySupplier && (
|
||
<div className="flex items-baseline justify-between gap-3 mb-2 px-1">
|
||
<h3 className="text-sm font-semibold text-[#003D5B] dark:text-white truncate">{g.name}</h3>
|
||
<span className="text-xs text-gray-500 dark:text-gray-400 shrink-0 tabular-nums">
|
||
{g.items.length} PO{g.items.length !== 1 && "s"} · {ZAR2(g.items.reduce((t, x) => t + x.total, 0))}
|
||
</span>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{g.items.map((p) => {
|
||
const isOpen = open === p.id;
|
||
const unalloc = p.lines.filter((l) => !l.assetCode).length;
|
||
const inv = invoiceStatus(p);
|
||
const sty = STATUS_STYLE[inv.status];
|
||
return (
|
||
<div key={p.id} className="relative bg-white dark:bg-surface border border-gray-100 dark:border-border rounded-xl overflow-hidden shadow-sm">
|
||
<span
|
||
className="absolute left-0 inset-y-0 w-1.5"
|
||
style={{ background: sty.color }}
|
||
title={sty.label}
|
||
role="img"
|
||
aria-label={sty.label}
|
||
/>
|
||
<button
|
||
onClick={() => setOpen(isOpen ? null : p.id)}
|
||
aria-expanded={isOpen}
|
||
className="w-full flex items-center gap-3 sm:gap-4 p-4 text-left min-h-[44px]"
|
||
>
|
||
<FileText className="w-4 h-4 shrink-0" style={{ color: ACCENT }} />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="font-mono text-xs px-2 py-1 rounded-md bg-[#00798C]/10 text-[#00798C] font-semibold">
|
||
{p.po_no}
|
||
</span>
|
||
<span className="text-sm font-medium text-[#003D5B] dark:text-white truncate">{p.supplier}</span>
|
||
{unalloc > 0 && (
|
||
<TriangleAlert className="w-3.5 h-3.5 text-[#EDAE49]" aria-label="Some lines have no machine" />
|
||
)}
|
||
</div>
|
||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||
{p.po_date || "no date"} · {p.lines.length} line{p.lines.length !== 1 && "s"} ·{" "}
|
||
{p.lines.filter((l) => l.assetCode).length} allocated ·{" "}
|
||
<span style={{ color: sty.color }} className="font-medium">
|
||
{inv.status === "over" ? `invoiced ${ZAR2(inv.invoiced - p.total)} OVER the PO — check the amount` : inv.status === "complete" ? "fully invoiced — can be closed" : inv.status === "partial" ? `${ZAR2(inv.invoiced)} of ${ZAR2(p.total)} invoiced` : "no invoice yet"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-right shrink-0">
|
||
<div className="text-[12px] text-gray-400 uppercase tracking-wider">Total</div>
|
||
<div className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white">
|
||
{ZAR(p.total)}
|
||
</div>
|
||
</div>
|
||
{isOpen ? <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" /> : <ChevronRight className="w-4 h-4 text-gray-400 shrink-0" />}
|
||
</button>
|
||
|
||
{isOpen && (
|
||
<div className="border-t border-gray-100 dark:border-border px-4 py-4 bg-gray-50/50 dark:bg-white/[0.04]">
|
||
<dl className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-2 text-xs mb-4">
|
||
<Meta label="Supplier" value={p.supplier} />
|
||
<Meta label="Supplier code" value={p.supplier_code || "—"} />
|
||
<Meta label="PO date" value={p.po_date || "—"} />
|
||
<Meta label="Required by" value={p.required_by || "—"} />
|
||
<Meta label="Requisition" value={p.req_no || "—"} />
|
||
<Meta label="Currency" value={p.currency || "—"} />
|
||
<Meta label="Sub-total" value={ZAR2(p.subtotal)} />
|
||
<Meta label="VAT" value={ZAR2(p.vat)} />
|
||
</dl>
|
||
|
||
<SupplierInvoices purchase={p} editMode={editMode} />
|
||
|
||
<div className="overflow-x-auto rounded-lg border border-gray-100 dark:border-border bg-white dark:bg-surface">
|
||
<table className="w-full text-xs">
|
||
<thead>
|
||
<tr className="text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-surface-muted">
|
||
<th className="text-left py-2 px-3 font-medium">#</th>
|
||
<th className="text-left py-2 px-3 font-medium">Description</th>
|
||
<th className="text-left py-2 px-3 font-medium">Cost code</th>
|
||
<th className="text-left py-2 px-3 font-medium">Machine</th>
|
||
<th className="text-right py-2 px-3 font-medium">Amount</th>
|
||
<th className="text-right py-2 px-3 font-medium">Incl VAT</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{p.lines.map((l) => (
|
||
<tr key={l.id} className="border-t border-gray-100 dark:border-border">
|
||
<td className="py-2 px-3 text-gray-400">{l.line_no}</td>
|
||
<td className="py-2 px-3 text-[#003D5B] dark:text-gray-300">
|
||
{l.description || <span className="italic text-gray-400">no description</span>}
|
||
</td>
|
||
<td className="py-2 px-3 font-mono text-gray-500 dark:text-gray-400">{l.cost_code || "—"}</td>
|
||
<td className="py-2 px-3">
|
||
{l.assetCode ? (
|
||
<span className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
|
||
<span className="font-mono text-[12px] px-1.5 py-0.5 rounded bg-[#00798C]/10 text-[#00798C]">
|
||
{l.assetCode}
|
||
</span>
|
||
<span className="truncate">{l.assetName}</span>
|
||
</span>
|
||
) : (
|
||
<span className="text-[12px] text-[#EDAE49] italic">no matching machine</span>
|
||
)}
|
||
</td>
|
||
<td className="py-2 px-3 text-right tabular-nums text-gray-600 dark:text-gray-400">
|
||
{ZAR2(l.amount_excl)}
|
||
</td>
|
||
<td className="py-2 px-3 text-right tabular-nums font-semibold text-[#003D5B] dark:text-white">
|
||
{l.total_incl == null ? "—" : ZAR2(l.total_incl)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Meta({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div>
|
||
<dt className="text-gray-400 uppercase tracking-wider text-[12px]">{label}</dt>
|
||
<dd className="text-gray-700 dark:text-gray-300 mt-0.5 break-words">{value}</dd>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const inputCls =
|
||
"min-h-[44px] w-full rounded-lg border border-gray-200 dark:border-border bg-white dark:bg-surface px-3 text-sm text-[#003D5B] dark:text-white";
|
||
|
||
/**
|
||
* Supplier invoices received against one PO. A PO can have several. Typed in by a person
|
||
* with the PDF attached; the "invoiced" figure sums only the amounts actually entered, and
|
||
* an invoice with no amount is listed but never counted as R0.
|
||
*/
|
||
function SupplierInvoices({ purchase: p, editMode }: { purchase: PurchaseView; editMode: boolean }) {
|
||
const router = useRouter();
|
||
const [adding, setAdding] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [amt, setAmt] = useState("");
|
||
const [editId, setEditId] = useState<string | null>(null);
|
||
const [editAmt, setEditAmt] = useState("");
|
||
const [editReason, setEditReason] = useState("");
|
||
|
||
const invoiced = p.invoices.reduce((s, i) => s + (i.amount_incl ?? 0), 0);
|
||
const unpriced = p.invoices.filter((i) => i.amount_incl == null).length;
|
||
const outstanding = p.total - invoiced;
|
||
|
||
async function add(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
const form = e.currentTarget;
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const res = await fetch(`/api/purchases/${p.id}/invoices`, { method: "POST", body: new FormData(form) });
|
||
const body = await res.json();
|
||
if (!body.ok) {
|
||
setError(body.error);
|
||
return;
|
||
}
|
||
if (body.over > 0) setError(`Saved — but this takes the invoices ${ZAR2(body.over)} OVER the PO total. Check the amount.`);
|
||
else if (body.warning) setError(body.warning);
|
||
form.reset();
|
||
setAmt("");
|
||
setAdding(false);
|
||
router.refresh();
|
||
} catch {
|
||
setError("Could not save — check your connection");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
function startEdit(i: PurchaseInvoiceView) {
|
||
setEditId(i.id);
|
||
setEditAmt(i.amount_incl == null ? "" : String(i.amount_incl));
|
||
setEditReason("");
|
||
setError(null);
|
||
}
|
||
|
||
async function saveEdit(i: PurchaseInvoiceView) {
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const res = await fetch(`/api/purchases/${p.id}/invoices/${i.id}`, {
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ amount_incl: editAmt, reason: editReason }),
|
||
});
|
||
const body = await res.json();
|
||
if (!body.ok) { setError(body.error); return; }
|
||
setEditId(null);
|
||
router.refresh();
|
||
} catch {
|
||
setError("Could not save — check your connection");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function remove(i: PurchaseInvoiceView) {
|
||
if (!confirm(`Remove invoice ${i.invoice_no} from ${p.po_no}?`)) return;
|
||
const res = await fetch(`/api/purchases/${p.id}/invoices/${i.id}`, { method: "DELETE" });
|
||
const body = await res.json().catch(() => ({ ok: false, error: "Could not remove" }));
|
||
if (!body.ok) setError(body.error);
|
||
else router.refresh();
|
||
}
|
||
|
||
return (
|
||
<div className="mb-4 rounded-lg border border-gray-100 dark:border-border bg-white dark:bg-surface p-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2 mb-2">
|
||
<div className="text-xs font-semibold text-[#003D5B] dark:text-white">
|
||
Supplier invoices
|
||
{p.invoices.length > 0 && (
|
||
<span className="ml-2 font-normal text-gray-500 dark:text-gray-400">
|
||
{ZAR2(invoiced)} invoiced · {ZAR2(Math.abs(outstanding))} of PO {outstanding < 0 ? "over" : "not yet invoiced"}
|
||
{unpriced > 0 && ` · ${unpriced} with no amount`}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{!adding && (
|
||
<button
|
||
onClick={() => setAdding(true)}
|
||
className="min-h-[44px] px-3 rounded-lg text-xs font-medium text-white inline-flex items-center gap-1.5"
|
||
style={{ background: ACCENT }}
|
||
>
|
||
<Plus className="w-4 h-4" /> Add invoice
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{p.invoices.length === 0 && !adding && (
|
||
<div className="text-xs text-gray-400">No invoices attached to this PO yet.</div>
|
||
)}
|
||
|
||
{p.invoices.length > 0 && (
|
||
<ul className="divide-y divide-gray-100 dark:divide-border">
|
||
{p.invoices.map((i) => editId === i.id ? (
|
||
<li key={i.id} className="py-2 space-y-2">
|
||
<div className="text-xs font-semibold text-[#003D5B] dark:text-white">Correct invoice {i.invoice_no}</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Amount incl VAT (PO is {ZAR2(p.total)})
|
||
<input value={editAmt} onChange={(e) => setEditAmt(e.target.value)} inputMode="decimal" className={inputCls} autoFocus />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400 sm:col-span-2">
|
||
Reason for the change (kept in the log)
|
||
<input value={editReason} onChange={(e) => setEditReason(e.target.value)} placeholder="e.g. decimal point missed when captured" className={inputCls} />
|
||
</label>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={() => saveEdit(i)} disabled={busy || editReason.trim().length < 3}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-white inline-flex items-center gap-2 disabled:opacity-50" style={{ background: ACCENT }}>
|
||
{busy && <Loader2 className="w-4 h-4 animate-spin" />} Save correction
|
||
</button>
|
||
<button onClick={() => setEditId(null)} className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-white/5">Cancel</button>
|
||
</div>
|
||
</li>
|
||
) : (
|
||
<li key={i.id} className="flex items-center gap-3 py-1">
|
||
<div className="flex-1 min-w-0 text-xs">
|
||
<span className="font-mono font-semibold text-[#003D5B] dark:text-white">{i.invoice_no}</span>
|
||
<span className="text-gray-500 dark:text-gray-400">
|
||
{" "}· {i.invoice_date || "no date"}
|
||
{i.note && ` · ${i.note}`}
|
||
</span>
|
||
</div>
|
||
<div
|
||
onDoubleClick={() => editMode && startEdit(i)}
|
||
title={editMode ? "Double-click to correct this amount" : "Switch on Edit mode to correct this amount"}
|
||
className="text-xs tabular-nums font-semibold text-[#003D5B] dark:text-white shrink-0 cursor-text select-none"
|
||
>
|
||
{i.amount_incl == null ? <span className="font-normal italic text-gray-400">no amount</span> : ZAR2(i.amount_incl)}
|
||
</div>
|
||
{editMode && (
|
||
<button
|
||
onClick={() => startEdit(i)}
|
||
aria-label={`Correct the amount of ${i.invoice_no}`}
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg text-gray-400 hover:text-[#30638E] hover:bg-gray-50 dark:hover:bg-white/5"
|
||
>
|
||
<Pencil className="w-4 h-4" />
|
||
</button>
|
||
)}
|
||
{i.hasPdf ? (
|
||
<a
|
||
href={`/api/purchases/${p.id}/invoices/${i.id}/document`}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
aria-label={`Open PDF for ${i.invoice_no}`}
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg text-[#30638E] hover:bg-gray-50 dark:hover:bg-white/5"
|
||
>
|
||
<FileText className="w-4 h-4" />
|
||
</a>
|
||
) : (
|
||
<span className="min-w-[44px] text-center text-[12px] text-gray-400">no PDF</span>
|
||
)}
|
||
{editMode && (
|
||
<button
|
||
onClick={() => remove(i)}
|
||
aria-label={`Remove invoice ${i.invoice_no}`}
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg text-gray-400 hover:text-[#D1495B] hover:bg-gray-50 dark:hover:bg-white/5"
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
</button>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
|
||
{error && <div className="mt-2 text-xs text-[#D1495B] dark:text-[#D94F60]">{error}</div>}
|
||
|
||
{adding && (
|
||
<form onSubmit={add} className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Invoice number *
|
||
<input name="invoice_no" required className={inputCls} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Invoice date
|
||
<input name="invoice_date" type="date" className={inputCls} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Amount incl VAT
|
||
<input name="amount_incl" value={amt} onChange={(e) => setAmt(e.target.value)} inputMode="decimal" placeholder="0.00" className={inputCls} />
|
||
<OverWarning po={p} typed={amt} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Note
|
||
<input name="note" placeholder="e.g. part delivery" className={inputCls} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400 sm:col-span-2">
|
||
Invoice PDF
|
||
<input name="file" type="file" accept="application/pdf,.pdf" className={`${inputCls} py-2`} />
|
||
</label>
|
||
<div className="sm:col-span-2 flex gap-2">
|
||
<button
|
||
type="submit"
|
||
disabled={busy}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-white inline-flex items-center gap-2 disabled:opacity-60"
|
||
style={{ background: ACCENT }}
|
||
>
|
||
{busy && <Loader2 className="w-4 h-4 animate-spin" />} Save invoice
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setAdding(false); setError(null); }}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-white/5"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
function invoiceStatus(p: PurchaseView) {
|
||
return invoiceStatusOf(p.total, p.invoices.map((i) => i.amount_incl));
|
||
}
|
||
|
||
const BRAND_ORANGE = "#EDAE49";
|
||
|
||
/**
|
||
* Global "Upload invoice": find the PO by number, supplier, amount or line description,
|
||
* then give the invoice number, date, amount and PDF (drag and drop or browse).
|
||
*/
|
||
function InvoiceUploadModal({ purchases, onClose }: { purchases: PurchaseView[]; onClose: () => void }) {
|
||
const router = useRouter();
|
||
const fileRef = useRef<HTMLInputElement>(null);
|
||
const [query, setQuery] = useState("");
|
||
const [poId, setPoId] = useState("");
|
||
const [file, setFile] = useState<File | null>(null);
|
||
const [amt, setAmt] = useState("");
|
||
const [drag, setDrag] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const q = query.trim().toLowerCase().replace(/[\s,]/g, "");
|
||
const matches = purchases
|
||
.filter((p) => {
|
||
if (!q) return true;
|
||
const hay = [
|
||
p.po_no, p.supplier, p.supplier_code,
|
||
p.total.toFixed(2), String(Math.round(p.total)),
|
||
...p.lines.map((l) => `${l.description} ${l.cost_code}`),
|
||
].join(" ").toLowerCase().replace(/[\s,]/g, "");
|
||
return hay.includes(q);
|
||
})
|
||
.slice(0, 8);
|
||
const po = purchases.find((p) => p.id === poId) || null;
|
||
const st = po ? invoiceStatus(po) : null;
|
||
|
||
function pick(f: File | undefined) {
|
||
if (!f) return;
|
||
if (!f.name.toLowerCase().endsWith(".pdf")) {
|
||
setError("Invoices must be PDF files");
|
||
return;
|
||
}
|
||
setError(null);
|
||
setFile(f);
|
||
}
|
||
|
||
async function submit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
if (!po) {
|
||
setError("Choose the purchase order first");
|
||
return;
|
||
}
|
||
const fd = new FormData(e.currentTarget);
|
||
if (file) fd.set("file", file);
|
||
else fd.delete("file");
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const res = await fetch(`/api/purchases/${po.id}/invoices`, { method: "POST", body: fd });
|
||
const body = await res.json();
|
||
if (!body.ok) {
|
||
setError(body.error);
|
||
return;
|
||
}
|
||
router.refresh();
|
||
onClose();
|
||
} catch {
|
||
setError("Could not save — check your connection");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 bg-black/40 grid place-items-center p-4 overflow-y-auto" onClick={onClose}>
|
||
<form
|
||
onSubmit={submit}
|
||
onClick={(e) => e.stopPropagation()}
|
||
role="dialog"
|
||
aria-label="Upload invoice"
|
||
className="w-full max-w-lg bg-white dark:bg-surface rounded-2xl p-5 shadow-xl space-y-3"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-base font-semibold text-[#003D5B] dark:text-white">Upload invoice</h2>
|
||
<button type="button" onClick={onClose} aria-label="Close"
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center rounded-lg hover:bg-gray-50 dark:hover:bg-white/5">
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400" htmlFor="inv-search">
|
||
Find the purchase order — number, supplier, amount or description
|
||
</label>
|
||
<div className="relative">
|
||
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||
<input id="inv-search" value={query} onChange={(e) => { setQuery(e.target.value); setPoId(""); }}
|
||
placeholder="e.g. MEGPPO49676, tyres, 12500" autoComplete="off"
|
||
className={`${inputCls} pl-9`} />
|
||
</div>
|
||
{!po && (
|
||
<ul className="mt-1 max-h-56 overflow-y-auto rounded-lg border border-gray-100 dark:border-border divide-y divide-gray-100 dark:divide-border">
|
||
{matches.length === 0 && <li className="p-3 text-xs text-gray-400">No purchase order matches.</li>}
|
||
{matches.map((p) => (
|
||
<li key={p.id}>
|
||
<button type="button" onClick={() => setPoId(p.id)}
|
||
className="w-full min-h-[44px] flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-white/5">
|
||
<span className="w-1 self-stretch rounded" style={{ background: STATUS_STYLE[invoiceStatus(p).status].color }} />
|
||
<span className="flex-1 min-w-0 text-xs">
|
||
<span className="font-mono font-semibold text-[#003D5B] dark:text-white">{p.po_no}</span>
|
||
<span className="text-gray-500 dark:text-gray-400"> · {p.supplier}</span>
|
||
<span className="block truncate text-gray-400">{p.lines[0]?.description}</span>
|
||
</span>
|
||
<span className="text-xs tabular-nums font-semibold shrink-0">{ZAR2(p.total)}</span>
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
{po && st && (
|
||
<div className="mt-1 flex items-center gap-2 rounded-lg bg-gray-50 dark:bg-white/5 p-2 text-xs">
|
||
<span className="w-1 self-stretch rounded" style={{ background: STATUS_STYLE[st.status].color }} />
|
||
<span className="flex-1 min-w-0">
|
||
<span className="font-mono font-semibold text-[#003D5B] dark:text-white">{po.po_no}</span>
|
||
<span className="text-gray-500 dark:text-gray-400"> · {po.supplier}</span>
|
||
</span>
|
||
<button type="button" onClick={() => setPoId("")}
|
||
className="min-h-[44px] px-2 text-[#30638E] font-medium">Change</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Invoice number *
|
||
<input name="invoice_no" required className={inputCls} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400">
|
||
Invoice date
|
||
<input name="invoice_date" type="date" className={inputCls} />
|
||
</label>
|
||
<label className="text-[12px] text-gray-500 dark:text-gray-400 sm:col-span-2">
|
||
Amount incl VAT
|
||
<input name="amount_incl" value={amt} onChange={(e) => setAmt(e.target.value)} inputMode="decimal" placeholder="0.00" className={inputCls} />
|
||
{po && <OverWarning po={po} typed={amt} />}
|
||
{po && st && (
|
||
<span className="block mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||
PO value <span className="font-semibold text-[#003D5B] dark:text-white tabular-nums">{ZAR2(po.total)}</span>
|
||
{" · "}already invoiced {ZAR2(st.invoiced)}
|
||
{" · "}left <span className="font-semibold tabular-nums">{ZAR2(Math.max(po.total - st.invoiced, 0))}</span>
|
||
</span>
|
||
)}
|
||
</label>
|
||
</div>
|
||
|
||
<div
|
||
onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
|
||
onDragLeave={() => setDrag(false)}
|
||
onDrop={(e) => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files[0]); }}
|
||
className={`rounded-xl border-2 border-dashed p-4 text-center text-xs transition-colors ${
|
||
drag ? "border-[#EDAE49] bg-[#EDAE49]/10" : "border-gray-200 dark:border-border"
|
||
}`}
|
||
>
|
||
<input ref={fileRef} type="file" accept="application/pdf,.pdf" className="sr-only"
|
||
onChange={(e) => pick(e.target.files?.[0])} />
|
||
{file ? (
|
||
<div className="flex items-center justify-center gap-2 text-[#003D5B] dark:text-white">
|
||
<FileText className="w-4 h-4" /> {file.name}
|
||
<button type="button" onClick={() => setFile(null)} aria-label="Remove file"
|
||
className="min-h-[44px] min-w-[44px] grid place-items-center"><X className="w-4 h-4" /></button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<Upload className="w-5 h-5 mx-auto mb-1 text-gray-400" />
|
||
<div className="text-gray-500 dark:text-gray-400">Drag the invoice PDF here, or</div>
|
||
<button type="button" onClick={() => fileRef.current?.click()}
|
||
className="mt-1 min-h-[44px] px-4 rounded-lg text-xs font-medium text-white"
|
||
style={{ background: BRAND_ORANGE }}>
|
||
Choose file
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{error && <div className="text-xs text-[#D1495B] dark:text-[#D94F60]">{error}</div>}
|
||
|
||
<div className="flex gap-2 justify-end">
|
||
<button type="button" onClick={onClose}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-white/5">
|
||
Cancel
|
||
</button>
|
||
<button type="submit" disabled={busy || !po}
|
||
className="min-h-[44px] px-4 rounded-lg text-xs font-medium text-white inline-flex items-center gap-2 disabled:opacity-50"
|
||
style={{ background: BRAND_ORANGE }}>
|
||
{busy && <Loader2 className="w-4 h-4 animate-spin" />} Save invoice
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
const isoDay = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||
const fmtDay = (d: Date) => d.toLocaleDateString("en-ZA", { day: "numeric", month: "short" });
|
||
|
||
/** The week (Monday–Sunday) or calendar month `offset` periods from the current one. */
|
||
function rangeWindow(range: "week" | "month", offset: number): { from: string; to: string; label: string } {
|
||
const now = new Date();
|
||
if (range === "month") {
|
||
const first = new Date(now.getFullYear(), now.getMonth() + offset, 1);
|
||
const last = new Date(first.getFullYear(), first.getMonth() + 1, 0);
|
||
return { from: isoDay(first), to: isoDay(last), label: first.toLocaleDateString("en-ZA", { month: "long", year: "numeric" }) };
|
||
}
|
||
const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7) + offset * 7);
|
||
const sunday = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + 6);
|
||
return { from: isoDay(monday), to: isoDay(sunday), label: `${fmtDay(monday)} – ${fmtDay(sunday)}` };
|
||
}
|
||
|
||
|
||
/** Live check while typing an invoice amount: anything that takes the PO over its total is flagged before it is saved. */
|
||
function OverWarning({ po, typed }: { po: PurchaseView; typed: string }) {
|
||
const n = Number(typed.trim().replace(/\s/g, "").replace(",", "."));
|
||
if (!typed.trim() || !Number.isFinite(n)) return null;
|
||
const over = po.invoices.reduce((t, i) => t + (i.amount_incl ?? 0), 0) + n - po.total;
|
||
if (over <= 1) return null;
|
||
return (
|
||
<span className="mt-1 flex items-start gap-1.5 text-xs font-medium text-[#8B5CF6]">
|
||
<TriangleAlert className="w-3.5 h-3.5 mt-0.5 shrink-0" />
|
||
This is {ZAR2(over)} MORE than the PO ({ZAR2(po.total)}). Check for a typo before saving.
|
||
</span>
|
||
);
|
||
}
|