ad4ac9173b
PHI 179 was refused: "Machine lines total R5265 but the invoice subtotal is R13730". Three separate faults, each of which only this invoice exposed. 1. The parser read ONE line per machine. A machine hired over more than one period is printed as one heading followed by a repeating block per charge, and PHI 179 is a single CT01 crane truck billed on 4, 16 and 18 Sep at R5 265 + R3 200 + R5 265. The parser only ever looked at the first block, so two thirds of the invoice went missing and the arithmetic check — which did its job — rejected it. extractLines() now walks y-banded rows and emits one line per money row, all carrying the machine's code. A machine billed once still yields exactly one line, which is what PHI 168/169 do. The banding matters: pdfjs splits one printed row across two y positions (the TOTAL sits ~2pt above the rest), so the fixed +-12pt window the old code used was never a row, it was a coincidence. 2. siteFromDescription required the description to START with "Hire Plant" or "Plant Hire". PHI 179 reads "Crane Truck Hire Sep 2026 Cosmo" — it leads with the machine type — so the regex returned "" and the invoice linked to no site at all. The month/year pair is the part every description shares, so that is the anchor now. 3. Even read correctly the site is "Cosmo", where every other invoice says "Cosmo City". Sites are DERIVED from the invoice wording, so saving the abbreviation would create a second "Cosmo" and split this customer across two rows on /sites. resolveSiteName() folds a shorter whole-word prefix onto a site already in the register, one direction only, so a genuinely new site is still recorded as new. Also: a problem invoice stored its PDF with no way to open it. The inbox reported the failure but not the document behind it, and /api/invoices/:id/ document only serves imported invoices — the one case you most want to inspect. New GET /api/invoices/intake/:id/document, plus a PDF link on each inbox row. Verified: PHI 179 reconciles in full (R13 730 + R2 059.50 VAT = R15 789.50, three lines, each balancing). PHI 168 and PHI 169 still reproduce their hand extraction field for field, including line count. 40 tests, typecheck clean.
445 lines
No EOL
17 KiB
TypeScript
445 lines
No EOL
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
FileUp, Loader2, AlertTriangle, RotateCw, Inbox, Trash2, X, UploadCloud, FileText,
|
|
} from "lucide-react";
|
|
import { Toast } from "@/components/Toast";
|
|
import { ZAR2 } from "@/lib/utils";
|
|
|
|
// "Add Invoice" — opens a standalone dialog. The file is chosen or dropped into the
|
|
// modal and nothing is uploaded until OK is pressed, so a mis-drop can be cleared
|
|
// without leaving a stray record in the inbox.
|
|
export function AddInvoiceButton() {
|
|
const [open, setOpen] = useState(false);
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [dragging, setDragging] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<null | { title: string; body: string }>(null);
|
|
// The dialog closes on success, which would otherwise leave no feedback at all — so
|
|
// a toast confirms it landed. Anything still needing attention is named in it AND
|
|
// badged on the invoice row.
|
|
const [toast, setToast] = useState<null | { message: string; detail: string; tone: "success" | "notice" }>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const router = useRouter();
|
|
|
|
const reset = useCallback(() => {
|
|
setFile(null);
|
|
setError(null);
|
|
setDragging(false);
|
|
}, []);
|
|
|
|
const close = useCallback(() => {
|
|
if (busy) return;
|
|
setOpen(false);
|
|
reset();
|
|
}, [busy, reset]);
|
|
|
|
// Escape closes, and the page behind the dialog must not scroll under it.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") close();
|
|
};
|
|
document.addEventListener("keydown", onKey);
|
|
const prev = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
document.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = prev;
|
|
};
|
|
}, [open, close]);
|
|
|
|
const accept = (f: File | undefined) => {
|
|
if (!f) return;
|
|
if (f.type !== "application/pdf" && !f.name.toLowerCase().endsWith(".pdf")) {
|
|
setError({ title: "Not a PDF", body: `${f.name} — only PDF invoices are accepted.` });
|
|
setFile(null);
|
|
return;
|
|
}
|
|
if (f.size > 20 * 1024 * 1024) {
|
|
setError({
|
|
title: "Too large",
|
|
body: `${(f.size / 1048576).toFixed(1)} MB — the limit is 20 MB.`,
|
|
});
|
|
setFile(null);
|
|
return;
|
|
}
|
|
setError(null);
|
|
setFile(f);
|
|
};
|
|
|
|
const upload = async () => {
|
|
if (!file) return;
|
|
setBusy(true);
|
|
setError(null);
|
|
const fd = new FormData();
|
|
fd.append("file", file);
|
|
try {
|
|
const res = await fetch("/api/invoices/intake", { method: "POST", body: fd });
|
|
const data = await res.json().catch(() => ({ ok: false, error: "Unexpected response" }));
|
|
if (data.ok) {
|
|
// Success closes the dialog and confirms with a toast, so the click is never
|
|
// silent. A FAILURE stays open, because the reason is the whole point.
|
|
const unassigned = (data.unassigned ?? []) as string[];
|
|
setToast({
|
|
tone: "success",
|
|
message: `${data.invoice_no} imported`,
|
|
detail:
|
|
`${data.lines} line${data.lines > 1 ? "s" : ""} · ${ZAR2(data.total_incl)} · ` +
|
|
`${data.booked} booked` +
|
|
(unassigned.length
|
|
? ` — needs a plant item: ${unassigned.join(", ")}`
|
|
: data.fullyBooked
|
|
? " · all lines matched"
|
|
: ""),
|
|
});
|
|
reset();
|
|
setOpen(false);
|
|
router.refresh();
|
|
return;
|
|
} else if (data.status === "duplicate") {
|
|
// Already in the register. Nothing was added and nothing is wrong, so this closes
|
|
// the dialog and reports it — it is not a problem invoice and does not go to the
|
|
// retry inbox. The detail names the copy you already have so it is obvious which
|
|
// one this matched.
|
|
const e = data.existing ?? {};
|
|
setToast({
|
|
tone: "notice",
|
|
message: `${data.invoice_no} is already imported`,
|
|
detail:
|
|
`${e.site ?? "—"} · ${e.lines ?? 0} line${e.lines === 1 ? "" : "s"} · ` +
|
|
`${ZAR2(e.total_incl ?? 0)} — nothing was added.`,
|
|
});
|
|
reset();
|
|
setOpen(false);
|
|
router.refresh();
|
|
return;
|
|
} else {
|
|
setError({
|
|
title: data.status === "failed" ? "Saved to the problem inbox" : "Could not import",
|
|
body: data.error ?? "Unknown error",
|
|
});
|
|
router.refresh();
|
|
}
|
|
} catch {
|
|
setError({ title: "Could not reach the server", body: "Check the app is running." });
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setToast(null);
|
|
setOpen(true);
|
|
}}
|
|
className="inline-flex items-center gap-2 min-h-[44px] px-4 rounded-xl bg-gradient-to-br from-[#00798C] to-[#003D5B] text-white text-sm font-semibold shadow-lg shadow-teal-500/20 hover:opacity-90 transition"
|
|
>
|
|
<FileUp className="w-4 h-4" />
|
|
Add Invoice
|
|
</button>
|
|
|
|
{toast && (
|
|
<Toast
|
|
message={toast.message}
|
|
detail={toast.detail}
|
|
tone={toast.tone}
|
|
onDismiss={() => setToast(null)}
|
|
/>
|
|
)}
|
|
|
|
{open && (
|
|
<div className="fixed inset-0 z-[1250] flex items-end sm:items-center justify-center p-0 sm:p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={close}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Add invoice"
|
|
className="relative w-full sm:max-w-lg bg-white dark:bg-surface rounded-t-2xl sm:rounded-2xl shadow-2xl border border-gray-100 dark:border-white/10 max-h-[90vh] overflow-y-auto"
|
|
>
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-border">
|
|
<h2 className="text-base font-semibold text-[#003D5B] dark:text-white">Add invoice</h2>
|
|
<button
|
|
type="button"
|
|
onClick={close}
|
|
disabled={busy}
|
|
aria-label="Close"
|
|
className="grid place-items-center w-11 h-11 -mr-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-white/5 transition disabled:opacity-50"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Choose or drop an invoice PDF"
|
|
onClick={() => !busy && inputRef.current?.click()}
|
|
onKeyDown={(e) => {
|
|
if ((e.key === "Enter" || e.key === " ") && !busy) {
|
|
e.preventDefault();
|
|
inputRef.current?.click();
|
|
}
|
|
}}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
setDragging(true);
|
|
}}
|
|
onDragLeave={() => setDragging(false)}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
setDragging(false);
|
|
accept(e.dataTransfer.files?.[0]);
|
|
}}
|
|
className={`flex flex-col items-center justify-center gap-2 text-center px-4 py-8 rounded-xl border-2 border-dashed cursor-pointer transition ${
|
|
dragging
|
|
? "border-[#00798C] bg-[#00798C]/10"
|
|
: "border-gray-200 dark:border-white/10 hover:border-[#00798C]/50 hover:bg-gray-50 dark:hover:bg-white/[0.02]"
|
|
} ${busy ? "opacity-60 pointer-events-none" : ""}`}
|
|
>
|
|
<UploadCloud className="w-7 h-7 text-[#00798C]" />
|
|
<div className="text-sm font-medium text-[#003D5B] dark:text-white">
|
|
Drop the invoice PDF here
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
or tap to browse your files
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept="application/pdf,.pdf"
|
|
className="sr-only"
|
|
onChange={(e) => {
|
|
accept(e.target.files?.[0]);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
|
|
{file && (
|
|
<div className="mt-3 flex items-center gap-3 px-3 py-2.5 rounded-xl bg-[#00798C]/10">
|
|
<FileText className="w-4 h-4 text-[#00798C] shrink-0" />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-medium text-[#003D5B] dark:text-white truncate">
|
|
{file.name}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{(file.size / 1024).toFixed(0)} KB · ready to upload
|
|
</div>
|
|
</div>
|
|
{!busy && (
|
|
<button
|
|
type="button"
|
|
onClick={reset}
|
|
aria-label="Remove the selected file"
|
|
className="grid place-items-center w-11 h-11 -mr-1 rounded-lg text-gray-500 hover:bg-white/60 dark:hover:bg-white/10 transition"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="mt-3 flex items-start gap-2.5 px-3 py-2.5 rounded-xl text-sm bg-[#D1495B]/10 text-[#D1495B]">
|
|
<AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
|
|
<div className="min-w-0">
|
|
<div className="font-semibold">{error.title}</div>
|
|
<div className="mt-0.5 break-words">{error.body}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
|
|
Figures are read from the invoice and checked before anything is saved. If it
|
|
does not reconcile it is kept in the problem inbox instead of imported.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-gray-100 dark:border-border bg-gray-50/60 dark:bg-white/[0.04] rounded-b-2xl">
|
|
<button
|
|
type="button"
|
|
onClick={close}
|
|
disabled={busy}
|
|
className="inline-flex items-center justify-center min-h-[44px] px-4 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 transition disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={upload}
|
|
disabled={!file || busy}
|
|
className="inline-flex items-center gap-2 min-h-[44px] px-4 rounded-lg text-sm font-semibold text-white bg-gradient-to-br from-[#00798C] to-[#003D5B] hover:opacity-90 transition disabled:opacity-40 disabled:pointer-events-none"
|
|
>
|
|
{busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <FileUp className="w-4 h-4" />}
|
|
{busy ? "Importing…" : "OK — Import"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
type IntakeItem = {
|
|
id: string;
|
|
file_name: string;
|
|
file_size: number;
|
|
invoice_no: string;
|
|
status: "imported" | "failed";
|
|
error: string;
|
|
created: string;
|
|
};
|
|
|
|
// The problem-invoice inbox. Anything that could not be parsed or imported lands here
|
|
// with the reason, so it can be inspected and retried instead of disappearing.
|
|
export function ProblemInbox() {
|
|
const [items, setItems] = useState<IntakeItem[] | null>(null);
|
|
const [retrying, setRetrying] = useState<string | null>(null);
|
|
const [msg, setMsg] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
|
|
const load = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/invoices/intake?status=failed", { cache: "no-store" });
|
|
const data = await res.json().catch(() => ({ ok: false, items: [] }));
|
|
setItems(data.ok ? data.items : []);
|
|
} catch {
|
|
setItems([]);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, [load]);
|
|
|
|
const retry = async (id: string) => {
|
|
setRetrying(id);
|
|
setMsg(null);
|
|
try {
|
|
const res = await fetch(`/api/invoices/intake/${id}/retry`, { method: "POST" });
|
|
const data = await res.json().catch(() => ({ ok: false }));
|
|
setMsg(
|
|
data.ok
|
|
? `${data.invoice_no} imported on retry.`
|
|
: `Still failing: ${data.error ?? "unknown reason"}`,
|
|
);
|
|
await load();
|
|
router.refresh();
|
|
} catch {
|
|
setMsg("Could not reach the server");
|
|
} finally {
|
|
setRetrying(null);
|
|
}
|
|
};
|
|
|
|
const discard = async (id: string) => {
|
|
setRetrying(id);
|
|
try {
|
|
await fetch(`/api/invoices/intake/${id}`, { method: "DELETE" });
|
|
await load();
|
|
} catch {
|
|
setMsg("Could not reach the server");
|
|
} finally {
|
|
setRetrying(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-surface border border-gray-100 dark:border-border rounded-2xl shadow-sm overflow-hidden mb-6">
|
|
<div className="flex items-center gap-2.5 px-5 py-4 border-b border-gray-100 dark:border-border">
|
|
<Inbox className="w-4 h-4 text-[#D1495B] shrink-0" />
|
|
<h2 className="text-sm font-semibold text-[#003D5B] dark:text-white">Problem invoices</h2>
|
|
<span className="text-xs px-2 py-0.5 rounded-md bg-[#D1495B]/10 text-[#D1495B] font-semibold">
|
|
{items?.length ?? 0}
|
|
</span>
|
|
</div>
|
|
|
|
{msg && (
|
|
<div className="px-5 py-2.5 bg-[#EDAE49]/10 text-[#8a6420] dark:text-[#EDAE49] text-sm">{msg}</div>
|
|
)}
|
|
|
|
{items === null ? (
|
|
<p className="px-5 py-6 text-sm text-gray-500 dark:text-gray-400">Checking…</p>
|
|
) : items.length === 0 ? (
|
|
<p className="px-5 py-6 text-sm text-gray-500 dark:text-gray-400">
|
|
Nothing in the inbox — every PDF offered so far imported cleanly.
|
|
</p>
|
|
) : (
|
|
<ul className="divide-y divide-gray-100 dark:border-border">
|
|
{items.map((it) => (
|
|
<li key={it.id} className="px-5 py-4">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-mono text-sm font-semibold text-[#003D5B] dark:text-white">
|
|
{it.file_name}
|
|
</span>
|
|
{it.invoice_no && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-gray-300">
|
|
reads as {it.invoice_no}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-[#D1495B] mt-1.5 break-words">{it.error}</p>
|
|
<p className="text-xs text-gray-400 dark:text-text-soft mt-1">
|
|
{(it.file_size / 1024).toFixed(0)} KB
|
|
{it.created ? ` · ${new Date(it.created).toLocaleString("en-ZA")}` : ""}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<a
|
|
href={`/api/invoices/intake/${it.id}/document`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={`Open ${it.file_name} in a new tab`}
|
|
className="inline-flex items-center gap-1.5 min-h-[44px] px-3 rounded-lg text-sm font-medium text-[#003D5B] dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 transition"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
PDF
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={() => retry(it.id)}
|
|
disabled={retrying === it.id}
|
|
className="inline-flex items-center gap-1.5 min-h-[44px] px-3 rounded-lg text-sm font-medium text-[#003D5B] dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 transition disabled:opacity-50"
|
|
>
|
|
{retrying === it.id ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<RotateCw className="w-4 h-4" />
|
|
)}
|
|
Retry
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => discard(it.id)}
|
|
disabled={retrying === it.id}
|
|
aria-label={`Discard ${it.file_name}`}
|
|
className="inline-flex items-center justify-center w-11 h-11 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-white/5 transition disabled:opacity-50"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
} |