;
const tot = LIB.totals(inv);
if (gen) {
return (
{t("prev.generating")}
);
}
return (
api.back()}
right={ openManualEdit(api, inv)} />} />
{fresh && (
/* sequence: the paper (q-paper-in, .45s) settles first, THEN this
"ready" chip scales in — so the document lands and is acknowledged,
rather than both firing at frame 0 and competing for the eye. */
)}
{/* A4 document, scaled (q-paper-* hooks: entrance styling owned by
index.html). q-paper-stack must sit on the paper wrapper itself:
on the full-width column its white backing sheets span edge to
edge and read as broken overlapping panes. */}
)}
{/* milestone stepper: sent / viewed / paid, derived from audit (never sage).
No pill backgrounds — reached steps carry the tone check, unreached
steps stay hollow, so "Paid" can never read as the current status. */}
{inv.kind === "invoice" && inv.status !== "draft" && (
{(() => {
/* a paid / partial / non-draft invoice was necessarily SENT —
and a paid one was necessarily VIEWED — even when the demo
record carries no audit trail. Derive the reached state from
status so "Paid" can never light up while "Sent" reads hollow. */
const wasSent = auditHas("sent") || eff === "paid" || eff === "partial" || inv.status === "paid" || inv.status === "partial" || inv.status === "sent";
const wasPaid = eff === "paid" || auditHas("paid") || inv.status === "paid";
const wasViewed = auditHas("viewed") || wasPaid;
return [
{ label: t("st.sent"), on: wasSent, tone: "var(--color-info)" },
{ label: t("det.t.viewed"), on: wasViewed, tone: "var(--color-info)" },
{ label: t("st.paid"), on: wasPaid, tone: "var(--color-success)" },
];
})().map((s, i) => (
{i > 0 && }
{s.on
?
: }
{s.label}
))}
) : inv.status === "draft" ? (
/* DRAFT: never sent → the ONE primary is Send. A draft cannot be
paid (money-integrity: no markPaid / Record on something the
client has never received). Edit + duplicate stay secondary. */
) : (
/* SENT / PARTIAL / OVERDUE: the primary CTA follows the get-paid
funnel, not "mark paid". Overdue → chase (Send reminder);
sent/partial → Record payment. Mark-as-paid is demoted to an
outline so it can never be the loudest action on a live debt. */
)}
{/* e-invoicing readiness (FacturX) — semantic state colors only */}
{einv && Array.isArray(einv.checks) && (
{t("einv.title")}
{t(einv.ready ? "einv.ready" : "einv.notready")}
{einv.checks.map(c => (
{t("einv.check." + c.id)}
))}
)}
{/* payment methods (credits never show a pay path) */}
{!isCredit && }
{/* timeline (audit trail when the invoice carries one) — newest 4 shown,
older events behind a local expander (timeline is newest-last) */}
{/* overdue rows tint the amount terracotta so the money — not just the
pill — signals the debt at a glance; everything else stays gold */}
{dup ? {t("det.duplicate")} : }
{!dup && inv.recurrence && {t("rec.badge")}}
{!dup && inv.recurrenceOf && inv.status === "draft" && {t("rec.auto.badge")}}
);
}
const SORTS = [
{ id: "recent", key: "sort.recent" },
{ id: "amount", key: "sort.amount" },
{ id: "client", key: "sort.client" },
];
const VALID_FILTERS = ["all", "draft", "sent", "paid", "overdue", "quotes", "credits"];
function Invoices({ api }) {
const { db, today } = api;
const dup = api.dup;
/* seed the status filter from the route param so the Home digest CTA
(goTab('invoices', undefined, {filter:'overdue'})) lands pre-filtered
instead of dumping the user into the full unfiltered book. Guarded to
a known filter id; ignored in the duplicate-picker flow. */
const rawParamFilter = api.route && api.route.params && api.route.params.filter;
const paramFilter = (!dup && rawParamFilter && VALID_FILTERS.includes(rawParamFilter)) ? rawParamFilter : null;
const [filter, setFilter] = useState(paramFilter || "all");
const [query, setQuery] = useState("");
const [sort, setSort] = useState("recent");
const [expanded, setExpanded] = useState(false);
/* if the digest CTA re-fires while the list is already mounted (same tab,
no remount), the seed above won't re-run — sync the filter to the param
whenever it changes to a fresh value. */
useEffect(() => { if (paramFilter) setFilter(paramFilter); }, [paramFilter]);
useEffect(() => { setExpanded(false); }, [filter, query]);
const cycleSort = () => setSort(s => SORTS[(SORTS.findIndex(x => x.id === s) + 1) % SORTS.length].id);
const counts = { all: 0, draft: 0, sent: 0, paid: 0, overdue: 0, quotes: 0, credits: 0 };
db.INVOICES.forEach(i => {
if (i.kind === "quote") { counts.quotes++; return; }
counts.all++;
if (i.kind === "credit") {
counts.credits++;
if (i.status === "draft") counts.draft++;
return;
}
const eff = LIB.effectiveStatus(i, today);
if (i.status === "draft") counts.draft++;
else if (eff === "paid") counts.paid++;
else if (eff === "overdue") counts.overdue++;
else counts.sent++;
});
let list = db.INVOICES.filter(i => {
if (filter === "quotes") return i.kind === "quote";
if (filter === "credits") return i.kind === "credit";
if (i.kind === "quote") return false;
if (filter === "all") return true;
if (filter === "draft") return i.status === "draft";
if (i.kind === "credit") return false;
const eff = LIB.effectiveStatus(i, today);
if (filter === "paid") return eff === "paid";
if (filter === "overdue") return eff === "overdue";
if (filter === "sent") return eff === "sent" || eff === "partial";
return true;
});
if (query.trim()) {
const q = query.toLowerCase();
list = list.filter(i => {
const c = LIB.getClient(db, i.clientId);
const name = (c && c.name) || i.newClientName || "";
const proj = c && c.projects && i.projectId ? (c.projects.find(p => p.id === i.projectId) || {}).name : "";
return i.id.toLowerCase().includes(q) || name.toLowerCase().includes(q) || (proj && proj.toLowerCase().includes(q));
});
}
list = list.slice().sort((a, b) => {
if (sort === "amount") return LIB.totals(b).total - LIB.totals(a).total;
if (sort === "client") {
const an = (LIB.getClient(db, a.clientId) || {}).name || a.newClientName || ""; const bn = (LIB.getClient(db, b.clientId) || {}).name || b.newClientName || "";
return an.localeCompare(bn) || new Date(b.issued) - new Date(a.issued);
}
return new Date(b.issued) - new Date(a.issued);
});
const upcoming = (!dup && filter === "all" && !query.trim()) ? LIB.upcomingRuns(db, today) : [];
const doDuplicate = (inv) => {
const d = window.QEditor.draftFromInvoice(inv);
delete d.editId; delete d.due; d.kind = "invoice"; d.status = "draft"; d.paid = 0;
d.issued = today; d.terms = Math.max(0, LIB.daysBetween(inv.issued, inv.due));
/* duplicates stay linkless: strip every link/state field */
delete d.recurrence; delete d.recurrenceOf; delete d.chase; delete d.quoteId; delete d.depositOf;
delete d.depositPct; delete d.creditFor; delete d.creditedBy; delete d.payments; delete d.paidOn;
api.endReuse();
api.openManual(d);
Q.toast(t("toast.duplicating", { id: inv.id }), "copy");
};
return (
api.endReuse()}>{t("g.cancel")}
:
{/* export affordance: the list's current filter (status chip +
search) is mapped into the Export seed shape so the screen
opens pre-filtered. The status chips map to the selection
engine's dimensions — effective-status for live invoices
(sent carries partial, matching the list), kind for the
quotes/credits tabs. A search query has no seed dimension,
so it falls back to hand-picking the shown ids. The icon
carries the narrowed row count (chip); unfiltered → {} (whole
book, the Export screen owns the count). */}
{(() => {
const searching = !!query.trim();
const FILTER_SEED = {
overdue: { status: ["overdue"] },
sent: { status: ["sent", "partial"] },
paid: { status: ["paid"] },
draft: { status: ["draft"] },
quotes: { types: ["quote"] },
credits: { types: ["credit"] },
};
const filtered = filter !== "all" || searching;
/* a search narrows by free text (no seed dimension) → pin the
shown ids; otherwise seed the status/type filter so the user
can still adjust it on the Export screen. */
const seed = searching ? { ids: list.map(i => i.id) } : (FILTER_SEED[filter] || {});
const n = filtered ? list.length : 0;
return (
api.openExport(seed)} />
{n > 0 && (
{n > 99 ? "99+" : n}
)}
);
})()}
} />
{dup && (
{t("create.dup.sub")}
)}
{/* Search + sort share a row; the filter chips get the full width
below, so a chip can never clip against (or hide under) the
sort pill — the founder flagged that twice. */}
{/* 32px visual pills, 40px hit areas: transparent 40px wrappers extend the hit box,
negative vertical margins keep the row's layout height at 32 (zero visual shift).
The right-edge fade + trailing padding make the horizontal scroll read as
intentional instead of a clipped chip. */}