/* screen-clients.jsx — Clients list + detail → window.QScreens.{Clients, ClientDetail} */ (function () { const { useState } = React; const Q = window.Q, LIB = window.LIB, Icons = window.Icons; const { Icon } = Icons; const { AppBar, Card, Money, Kicker, Button, StatusPill, Avatar, EmptyState, IconButton, Badge, Sheet, Field, Input, Textarea, Segmented } = Q; const t = window.t; /* Project status → existing pill palette (matches screen-projects.jsx). */ const PILL = { active: "sent", wrap: "partial", done: "paid", onhold: "draft" }; /* A project rate's unit: hourly when the whole team bills hourly, else day (matches screen-projects.jsx; the rate itself has no stored unit). */ function rateUnit(p) { const team = (p && p.team) || []; return team.length && team.every(m => (m.unit || "day") === "hour") ? "hour" : "day"; } function rateLabel(p, rate, currency) { const fmt = window.fmtMoney(rate, currency, { cents: false }); return rateUnit(p) === "hour" ? fmt + "/" + t("unit.hour") : t("cl.proj.rate", { rate: fmt }); } function lastInvoice(db, clientId) { const list = db.INVOICES.filter(i => i.clientId === clientId && i.kind !== "quote" && i.kind !== "credit").sort((a, b) => new Date(b.issued) - new Date(a.issued)); return list[0] || null; } /* Days past due on this client's MOST overdue invoice, or 0 if nothing is overdue — turns the Clients list into a "who do I chase first" queue. */ function maxDaysLate(db, clientId, today) { let max = 0; for (const inv of db.INVOICES) { if (inv.clientId !== clientId || inv.kind !== "invoice") continue; if (LIB.effectiveStatus(inv, today) !== "overdue") continue; const late = -LIB.daysBetween(today, inv.due); if (late > max) max = late; } return max; } /* ── List ────────────────────────────────────────────────────── */ const SORTS = [ { id: "amount", key: "sort.amount" }, { id: "name", key: "sort.name" }, { id: "last", key: "cl.sort.last" }, ]; function Clients({ api }) { const { db, today } = api; const [query, setQuery] = useState(""); const [sort, setSort] = useState("amount"); const [addOpen, setAddOpen] = useState(false); const cycleSort = () => setSort(s => SORTS[(SORTS.findIndex(x => x.id === s) + 1) % SORTS.length].id); const ClientPicker = window.QEditor && window.QEditor.ClientPicker; let list = db.CLIENTS.slice(); if (query.trim()) { const q = query.toLowerCase(); list = list.filter(c => c.name.toLowerCase().includes(q) || (c.email || "").toLowerCase().includes(q) || (c.contact || "").toLowerCase().includes(q) || (c.sector || "").toLowerCase().includes(q)); } list = list.sort((a, b) => { if (sort === "name") return a.name.localeCompare(b.name); if (sort === "last") { const la = lastInvoice(db, a.id), lb = lastInvoice(db, b.id); return new Date((lb && lb.issued) || 0) - new Date((la && la.issued) || 0) || a.name.localeCompare(b.name); } return LIB.clientBalance(db, b.id, today) - LIB.clientBalance(db, a.id, today) || a.name.localeCompare(b.name); }); /* Home-currency total only; foreign-currency balances are kept per currency (same pattern as LIB.summary) so we never add USD into a EUR figure. */ const home = db.COMPANY.currency; let totalOut = 0; const fx = {}; for (const x of db.CLIENTS) { const b = LIB.clientBalance(db, x.id, today); const cur = x.currency || home; if (cur === home) totalOut += b; else if (b !== 0) fx[cur] = (fx[cur] || 0) + b; } return (
setAddOpen(true)} />} />
{/* The screen's one money moment: total outstanding across accounts. */} {db.CLIENTS.length > 0 && (
{Object.entries(fx).map(([cur, amt]) => ( + {window.fmtMoney(amt, cur, { cents: false })} ))} {t("cl.totalout", { count: db.CLIENTS.length })}
)} {/* Search + sort row, same pattern as the Invoices list. */}
{list.length === 0 ? ( setAddOpen(true)}>{t("cl.new")}} /> ) : (
{list.map((c, i) => { const bal = LIB.clientBalance(db, c.id, today); const last = lastInvoice(db, c.id); const late = bal > 0 ? maxDaysLate(db, c.id, today) : 0; return ( api.go("client", { id: c.id })} last={i === list.length - 1} actions={[{ icon: "plus", label: t("cl.newinvoice"), tone: "neutral", onPress: () => api.openManual({ clientId: c.id }) }]}>
{c.name}
{/* Money moment: an overdue account shouts "chase me" in terracotta with how late it is; otherwise the neutral last-invoice context line. */} {late > 0 ?
{t("due.overdue", { d: late })}
:
{last ? t("cl.lastinvoice", { date: window.fmtDate(last.issued, "short") }) : t("cl.never")}
}
{/* True signed balance: credits can push an account negative; the row must agree with the header rollup and the detail screen (sign from fmtMoney, e.g. -€420 — same convention as the billing-history rows; non-positive muted like the detail). An owed balance carries the screen's money signal: overdue → terracotta + terracotta edge (chase now); merely outstanding → gold edge; zero/credit muted. */}
{bal > 0 ? 0 ? "var(--color-accent)" : undefined} /> : }
); })}
)}
{ClientPicker && setAddOpen(false)} onPick={(id) => { setAddOpen(false); api.go("client", { id }); }} currency={db.COMPANY.currency} mode="manage" />}
); } /* ── Edit client sheet (same field set as the new-client form) ── */ function EditClientSheet({ client, onClose, onSave }) { const [form, setForm] = useState({ name: client.name || "", contact: client.contact || "", email: client.email || "", phone: client.phone || "", address: client.address || "", vat: client.vat || "", reg: client.reg || "" }); const setF = patch => setForm(f => ({ ...f, ...patch })); return ( onSave({ ...form, name: form.name.trim() })}>{t("man.client.update")}}>
setF({ name: e.target.value })} placeholder={t("man.client.name.ph")} /> setF({ contact: e.target.value })} /> setF({ email: e.target.value })} type="email" /> setF({ phone: e.target.value })} mono />