// ─────────────────────────────────────────────────────────────── // Busco Ops — Financial + HR & Procurement screens · v2 // ─────────────────────────────────────────────────────────────── // ── FINANCIAL ──────────────────────────────────────────────── function FinancialScreen({ unlocked, setUnlocked, onToast }) { if (!unlocked) return { setUnlocked(true); onToast("Owner access granted"); }} />; return setUnlocked(false)} onToast={onToast} />; } function PinGate({ onUnlock }) { const [pin, setPin] = useState(["", "", "", ""]); const [attempts, setAttempts] = useState(0); const [shake, setShake] = useState(false); const [verifying, setVerifying] = useState(false); const refs = [useRef(), useRef(), useRef(), useRef()]; useEffect(() => { refs[0].current && refs[0].current.focus(); }, []); const setDigit = (i, v) => { if (!/^[0-9]?$/.test(v)) return; if (verifying) return; const next = [...pin]; next[i] = v; setPin(next); if (v && i < 3) refs[i + 1].current.focus(); if (next.every(x => x !== "")) check(next.join("")); }; const onKey = (i, e) => { if (e.key === "Backspace" && !pin[i] && i > 0) refs[i - 1].current.focus(); }; const check = async (val) => { if (verifying) return; setVerifying(true); const ok = await window.buscoVerifyPin(val); setVerifying(false); if (ok) { onUnlock(); return; } setShake(true); setTimeout(() => setShake(false), 400); setAttempts(a => a + 1); setPin(["", "", "", ""]); setTimeout(() => refs[0].current && refs[0].current.focus(), 50); }; const locked = attempts >= 5; return (
{window.t("Owner access required")}
The Financial module is restricted. Enter your 4-digit owner PIN to continue.
{pin.map((d, i) => ( setDigit(i, e.target.value)} onKeyDown={e => onKey(i, e)} maxLength={1} inputMode="numeric" /> ))}
{locked ? (
Too many failed attempts. Locked for 5 minutes.
) : attempts > 0 ? (
Incorrect PIN. {5 - attempts} attempt{5 - attempts !== 1 ? "s" : ""} remaining.
) : (
{window.t("Enter your 4-digit owner PIN")}
)}
PIN is hashed server-side · resets each session
); } function FinancialDashboard({ onLock, onToast }) { const [tab, setTab] = useState("Overview"); const [cur, setCurState] = useState(() => buscoPref.get("busco-fin-currency", "all")); // all | SAR | BHD const setCur = (c) => { setCurState(c); buscoPref.set("busco-fin-currency", c); }; const fin = cur === "all" ? FINANCIALS : FINANCIALS.filter((f) => f.currency === cur); // Totals grouped by currency — never summed across SAR and BHD. const totalsByCur = {}; for (const f of fin) { const k = f.currency || "SAR"; (totalsByCur[k] || (totalsByCur[k] = { rev: 0, cost: 0, profit: 0 })); totalsByCur[k].rev += f.totalRev; totalsByCur[k].cost += f.courierCost; totalsByCur[k].profit += f.netProfit; } const curList = Object.keys(totalsByCur); const moneyLines = (field) => curList.length === 0 ? — : {curList.map((k) => 1 ? 18 : undefined, lineHeight: 1.3 }}>{fmtMoney(totalsByCur[k][field], k)})}; return (
{["Overview", "Clients P&L", "Invoices", "Courier Costs", "Cashflow"].map(t2 => ( ))}
setCur(v === "All" ? "all" : v)} />
{tab === "Overview" && (

{window.t("Revenue · Cost · Profit by client")}

{new Date().toLocaleDateString("en-US", { month: "long", year: "numeric" })} · {cur === "all" ? (curList.join(" + ") || "—") : cur}
Revenue Cost Profit
(v / 1000) + "k"} /> fmtMoney(v, p && p.payload && p.payload.currency)} />
)} {tab === "Clients P&L" && (

{window.t("Clients P&L")} · {new Date().toLocaleDateString("en-US", { month: "long", year: "numeric" })}

({ rows: fin.map((f) => ({ Client: f.name, Currency: f.currency, "PPD Revenue": f.ppdRev, "COD Revenue": f.codRev, "Total Revenue": f.totalRev, "Courier Cost": f.courierCost, "Net Profit": f.netProfit, "Margin %": Math.round(f.margin), "Invoice Date": f.invoiceDate, "Due Date": f.dueDate, })), filename: `busco-clients-pl-${new Date().toISOString().slice(0, 10)}`, })} />
{fin.map(c => ( ))} {curList.length > 0 && {curList.map((k) => ( ))} }
{window.t("Client")} {window.t("Cur")} {window.t("PPD Rev")} {window.t("COD Rev")} {window.t("Total Rev")} {window.t("Cost")} {window.t("Net Profit")} {window.t("Margin")} {window.t("Invoice")} {window.t("Due")}
{c.name} {c.currency} {fmtMoneyNum(c.ppdRev, c.currency)} {fmtMoneyNum(c.codRev, c.currency)} {fmtMoneyNum(c.totalRev, c.currency)} {fmtMoneyNum(c.courierCost, c.currency)} 0 ? "var(--good-700)" : "var(--crit-700)" }}>{fmtMoneyNum(c.netProfit, c.currency)} {c.margin.toFixed(1)}% {fmtDate(c.invoiceDate)} {fmtDate(c.dueDate)} {c.overdue && Overdue}
{window.t("Total")} {k} {fmtMoneyNum(totalsByCur[k].rev, k)} {fmtMoneyNum(totalsByCur[k].cost, k)} = 0 ? "var(--good-700)" : "var(--crit-700)" }}>{fmtMoneyNum(totalsByCur[k].profit, k)} {totalsByCur[k].rev > 0 ? (totalsByCur[k].profit / totalsByCur[k].rev * 100).toFixed(1) + "%" : "—"}
)} {tab === "Invoices" && } {tab === "Courier Costs" && } {tab === "Cashflow" && }
); } // (Client rate editing now lives only on the Clients page — edit a client there.) function CashflowView({ cur = "all" }) { const finRows = cur === "all" ? FINANCIALS : FINANCIALS.filter((f) => f.currency === cur); const payRows = cur === "all" ? COURIER_PAY : COURIER_PAY.filter((p) => p.currency === cur); const inflows = finRows.map(c => ({ name: c.name, amount: c.totalRev, date: c.dueDate, overdue: c.overdue, currency: c.currency })); const outflows = payRows; // Totals grouped by currency — money in/out/net never mix SAR and BHD. const byCur = {}; for (const x of inflows) { const k = x.currency || "SAR"; (byCur[k] || (byCur[k] = { in: 0, out: 0 })).in += x.amount; } for (const p of outflows) { const k = p.currency || "SAR"; (byCur[k] || (byCur[k] = { in: 0, out: 0 })).out += p.amount; } const curs = Object.keys(byCur); const totalLines = (kind) => curs.length === 0 ? (kind === "in" ? "+0" : "−0") : curs.map((k) =>
{kind === "in" ? "+" : "−"}{fmtMoney(byCur[k][kind], k)}
); return (

{window.t("Money in · client invoices")}

{inflows.length} invoices pending
{totalLines("in")}
{inflows.map((x, i) => (
{x.name}
Due {fmtDate(x.date)} {x.overdue && Overdue}
+{fmtMoney(x.amount, x.currency)}
))}

{window.t("Money out · courier payments")}

{outflows.length} couriers
{totalLines("out")}
{outflows.map((p, i) => (
{p.name}
{p.type === "salary" ? "Salaried" : "Freelancer"} · {fmtDate(p.dueDate)}
−{fmtMoney(p.amount, p.currency)}
))}
{window.t("Net cashflow")} · {new Date().toLocaleDateString("en-US", { month: "long", year: "numeric" })}
{window.t("Money in − money out")}
{(curs.length ? curs : ["SAR"]).map((k) => { const net = (byCur[k] ? byCur[k].in - byCur[k].out : 0); return (
= 0 ? "var(--good-700)" : "var(--crit-700)", letterSpacing: "-0.02em" }}> {net >= 0 ? "+" : "−"}{fmtMoneyNum(Math.abs(net), k)} {k}
); })}
); } // ── HR & PROCUREMENT ───────────────────────────────────────── function HRScreen({ onToast }) { const requests = window.HR_REQUESTS || []; const [selectedRef, setSelectedRef] = useState(null); const selected = requests.find(r => r.ref === selectedRef); const advance = async (ref) => { try { await window.buscoAdvanceHrStatus(ref); onToast("Status advanced"); } catch (e) { onToast(e?.message || "Failed to advance status", "danger"); } }; const createRequest = async (req) => { try { const saved = await window.buscoSaveHrRequest(req); onToast(`Submitted ${saved.ref}`); } catch (e) { onToast(e?.message || "Failed to submit request", "danger"); } }; return (
{window.t("Leftover module — not actively used.")}{" "} {window.t("HR & Procurement was an early idea that never became part of the daily workflow. It's hidden from the nav on purpose (only reachable via the console) and isn't maintained — treat anything here as experimental.")}

{window.t("Hiring pipeline")} {requests.filter(r => r.status !== "deployed").length} {window.t("active")}

{window.t("Click a card for detail")}
{selected && ( setSelectedRef(null)} onAdvance={() => advance(selected.ref)} onToast={onToast} /> )}
{[ { key: "open", label: window.t("Open") }, { key: "cvs_received", label: window.t("CVs Received") }, { key: "interviewing", label: window.t("Interviewing") }, { key: "training", label: window.t("Training") }, { key: "deployed", label: window.t("Deployed") }, ].map(col => { const items = requests.filter(r => r.status === col.key); return (
{col.label} {items.length}
{items.length === 0 ? (
—
) : items.map(r => (
setSelectedRef(r.ref)} >
{r.ref} {r.priority === "urgent" && {window.t("Urgent")}}
{r.client}
{r.city} · {r.warehouses.join(", ")}
×{r.count} needed {r.package}
{(r.cvs > 0 || r.interviewed > 0 || r.training > 0) && (
{r.cvs > 0 && CVs {r.cvs}} {r.interviewed > 0 && Int {r.interviewed}} {r.training > 0 && Trn {r.training}}
)}
))}
); })}
); } function NewRequirementForm({ onCreate }) { const [clientId, setClientId] = useState("c1"); const [city, setCity] = useState("Riyadh"); const [whSel, setWhSel] = useState([]); const [count, setCount] = useState(4); const [model, setModel] = useState("freelancer"); const [pkg, setPkg] = useState(PACKAGES.freelancer[1].name); const [priority, setPriority] = useState("normal"); const [target, setTarget] = useState("2026-06-15"); const [notes, setNotes] = useState(""); const client = CLIENTS.find(c => c.id === clientId); const cities = client ? client.cities : []; const warehouses = (cities.find(c => c.name === city) || {}).warehouses || []; const pkgList = PACKAGES[model]; const pkgInfo = pkgList.find(p => p.name === pkg) || pkgList[0]; const toggleWh = (w) => setWhSel(s => s.includes(w) ? s.filter(x => x !== w) : [...s, w]); const submit = () => { if (!client) return; const req = { ref: "REQ-" + String(8 + Math.floor(Math.random() * 90)).padStart(3, "0"), status: "open", client: client.name, city, warehouses: whSel.length ? whSel : warehouses.slice(0, 1), count, model, package: pkgInfo.name, rate: pkgInfo.rate, priority, cvs: 0, interviewed: 0, training: 0, target, notes, }; onCreate(req); }; return (

{window.t("New requirement")}

Submit a hiring request — auto-generates REQ-XXX reference
c.name)} value={client?.name} onChange={(n) => { const c = CLIENTS.find(x => x.name === n); setClientId(c.id); setCity(c.cities[0].name); setWhSel([]); }} />
c.name)} value={city} onChange={(n) => { setCity(n); setWhSel([]); }} />
{count}
{["normal", "urgent", "planned"].map(p => ( ))}
setTarget(e.target.value)} />
{pkgList.map(p => ( ))}