/* Payroll — run-payroll workflow built on the real two-draw model. Draw 1 (50%) pays on deposit/sale; Draw 2 (50%) pays on completion. Select the draws to include this cycle → see each rep's paycheck → run payroll (marks them paid). Pulls from the past-90-day sales. */ const PR = window.Ds1Threshold_e046d3; function Payroll({ viewer }) { const api = window.OneDayPayroll; const me = viewer || { role: "owner", repName: null }; const isRep = me.role === "rep"; const canRun = !isRep; // owner & manager can approve/run; reps are read-only const mineOnly = (arr) => isRep ? arr.filter((x) => x.rep === me.repName) : arr; const [, force] = React.useReducer((x) => x + 1, 0); const [picked, setPicked] = React.useState(() => new Set()); const [tab, setTab] = React.useState("run"); // run | sales | import const [importResult, setImportResult] = React.useState(null); const [importErr, setImportErr] = React.useState(""); const [salesSort, setSalesSort] = React.useState({ key: "saleMs", dir: "desc" }); const fileRef = React.useRef(null); const salesRef = React.useRef(null); const periods = api.listPeriods(); const [periodId, setPeriodId] = React.useState(""); // default: all open periods (everything due) const period = periods.find((p) => p.id === periodId); const [completedOnly, setCompletedOnly] = React.useState(() => localStorage.getItem("od_completed_only") === "1"); const toggleCompletedOnly = () => { const v = !completedOnly; setCompletedOnly(v); localStorage.setItem("od_completed_only", v ? "1" : "0"); }; const draws = mineOnly(api.payableDraws(periodId)).filter((d) => !completedOnly || d.installed); const [drawSort, setDrawSort] = React.useState({ key: "recdate", dir: "asc" }); // by pay date const allSales = api.load(); const sales = mineOnly(allSales); // Totals: global for owner/manager; scoped to the rep's own jobs otherwise. const t = isRep ? (function () { const r2 = api.round2; const own = sales.filter((x) => !x.exempt); return { paid: r2(own.reduce((s, x) => s + (x.draw1Paid ? x.draw1 : 0) + (x.draw2Paid ? x.draw2 : 0), 0)), depositDue: r2(own.filter((x) => !x.draw1Paid).reduce((s, x) => s + x.draw1, 0)), completionDue: r2(own.filter((x) => x.installed && !x.draw2Paid).reduce((s, x) => s + x.draw2, 0)), heldUninstalled: r2(own.filter((x) => !x.installed && !x.draw2Paid).reduce((s, x) => s + x.draw2, 0)), }; })() : api.totals(); const pickedList = draws.filter((d) => picked.has(d.saleId + ":" + d.kind)); // Per-rep commission rollup across the whole dataset (owner/manager view). const byRep = (function () { const m = {}; allSales.forEach((x) => { const k = x.rep || "—"; const r = m[k] || (m[k] = { rep: k, earned: 0, paid: 0, due: 0, total: 0, exempt: 0 }); r.total += 1; if (x.exempt) { r.exempt += 1; return; } r.earned += x.commission; r.paid += (x.draw1Paid ? x.draw1 : 0) + (x.draw2Paid ? x.draw2 : 0); r.due += (x.draw1Paid ? 0 : x.draw1) + (x.installed && !x.draw2Paid ? x.draw2 : 0); }); return Object.values(m).map((r) => ({ ...r, earned: api.round2(r.earned), paid: api.round2(r.paid), due: api.round2(r.due), allExempt: r.exempt === r.total && r.total > 0 })).sort((a, b) => b.earned - a.earned); })(); const isPicked = (d) => picked.has(d.saleId + ":" + d.kind); const toggle = (d) => setPicked((prev) => { const n = new Set(prev); const k = d.saleId + ":" + d.kind; n.has(k) ? n.delete(k) : n.add(k); return n; }); const pickAll = () => setPicked(new Set(draws.map((d) => d.saleId + ":" + d.kind))); const clearAll = () => setPicked(new Set()); // Per-rep paycheck from the picked draws. const reps = [...new Set(draws.map((d) => d.rep))]; const checks = reps.map((rep) => { const mine = pickedList.filter((d) => d.rep === rep); return { rep, deposit: mine.filter((d) => d.kind === "deposit").reduce((s, d) => s + d.amount, 0), completion: mine.filter((d) => d.kind === "completion").reduce((s, d) => s + d.amount, 0), count: mine.length }; }).filter((c) => c.count > 0); const cycleTotal = pickedList.reduce((s, d) => s + d.amount, 0); const runPayroll = () => { api.markPaid(pickedList); setPicked(new Set()); force(); }; const toggleInstall = (id, v) => { api.markInstalled(id, v); force(); }; const toggleExempt = (id, v) => { api.setExempt(id, v); setPicked(new Set()); force(); }; const toggleExemptRep = (rep, v) => { api.setExemptByRep(rep, v); setPicked(new Set()); force(); }; const onSalesFile = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = (e) => { try { api.importSales(String(e.target.result || "")); setPicked(new Set()); setImportErr(""); setImportResult(null); force(); } catch (err) { setImportErr("Could not read that sales CSV. " + (err.message || "")); } }; reader.readAsText(file); }; const onCsvFile = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = (e) => { try { const rows = api.parseCompletions(String(e.target.result || "")); if (!rows.length) { setImportErr("No completed jobs found in that file."); setImportResult(null); return; } const res = api.applyCompletions(rows); setImportResult(res); setImportErr(""); force(); } catch (err) { setImportErr("Could not read that CSV. " + (err.message || "")); setImportResult(null); } }; reader.readAsText(file); }; const initials = (name) => name.split(" ").map((p) => p[0]).slice(0, 2).join(""); return (

Payroll & Commissions

50% on deposit · 50% on completion · from the last 90 days of sales

Export Paychecks
{/* KPI heroes */}
{/* Tabs */}
{[["run", "Run Payroll"], ["sales", "All Sales (90 days)"], ["history", "Pay Periods"], ["import", "Import Completions"]].map(([k, label]) => ( ))}
{tab === "run" ? (
Pay Period
{period ? period.label : "All open periods"}
{ setPeriodId(e.target.value); clearAll(); }} options={[{ value: "", label: "All open periods (" + mineOnly(api.payableDraws("")).length + " due)" }].concat(periods.map((p) => ({ value: p.id, label: p.label + " (" + mineOnly(api.payableDraws(p.id)).length + " due)" })))} />
{canRun && ( 0 && pickedList.length === draws.length ? "deep" : "outline"} onClick={() => (pickedList.length === draws.length ? clearAll() : pickAll())} disabled={draws.length === 0}> 0 ? "CircleCheck" : "ListChecks"} size={16} />{pickedList.length === draws.length && draws.length > 0 ? "Whole period selected" : "Select whole period"} )}
{canRun && byRep.length > 0 && (
Commissions by Rep · all time
{["Rep", "Earned", "Paid", "Due"].map((h, i) => {h})}
{byRep.map((r) => (
{r.rep.split(" ").map((p) => p[0]).slice(0, 2).join("")}
{r.rep}
{fmt(r.earned)}
{fmt(r.paid)}
0 ? "var(--status-pending-fg)" : "var(--text-muted)", fontVariantNumeric: "tabular-nums" }}>{fmt(r.due)}
))} )}
{/* Payable draws */}
{isRep ? "Your draws due in " : "Due in "}{period ? period.label : "all open periods"} · {draws.length}
{ const [key, dir] = e.target.value.split(":"); setDrawSort({ key, dir }); }} options={[{ value: "recdate:asc", label: "Sort: Pay date ↑" }, { value: "recdate:desc", label: "Sort: Pay date ↓" }, { value: "kind:asc", label: "Sort: Deposits first" }, { value: "kind:desc", label: "Sort: Completions first" }, { value: "customer:asc", label: "Sort: Customer A–Z" }, { value: "rep:asc", label: "Sort: Rep A–Z" }, { value: "amount:desc", label: "Sort: Amount ↓" }, { value: "amount:asc", label: "Sort: Amount ↑" }]} />
{canRun && } {canRun && }
{draws.length === 0 &&
Nothing to pay — every draw is settled. 🎉
} {(() => { return sortList(draws, drawSort.key, drawSort.dir, { customer:(d)=>d.customer, rep:(d)=>d.rep, amount:(d)=>d.amount, kind:(d)=>(d.kind==="deposit"?0:1), recdate:(d)=>(d.recPayMs||0) }[drawSort.key]).map((d) => { const on = isPicked(d); return (
canRun && toggle(d)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)", cursor: canRun ? "pointer" : "default", background: on ? "var(--color-primary-soft)" : "transparent" }}> {canRun && {on && }}
{d.customer}
{d.rep} · {d.saleId} · Sold {d.dateSold || "—"}{d.completedDate ? " · Completed " + d.completedDate : ""} · {fmt(d.value)}
{d.kind === "deposit" ? "Deposit" : "Completion"} {d.kind === "completion" && (
1st Payment
{fmtD(d.depositAmount)}{d.depositPaid && d.depositPaidDate ? " · " + d.depositPaidDate : d.depositPaid ? " · paid" : " · unpaid"}
)}
{d.recPayDate ? "Rec. Pay" : " "}
{d.recPayDate || "payable now"}
{fmtD(d.amount)}
 ); }); })()} {/* Paycheck summary (owner/manager) — or read-only totals (rep) */}
{canRun ? (

{pickedList.length} draw{pickedList.length === 1 ? "" : "s"} · {checks.length} rep{checks.length === 1 ? "" : "s"}

 ) : ( s + d.amount, 0))} label="Your Commission Due" tone="forest" align="left" />

{draws.length} draw{draws.length === 1 ? "" : "s"} pending · {fmt(t.paid)} paid to date

 )} {canRun && ( Paychecks {checks.length === 0 &&

Select draws to build this cycle's paychecks.

}
{checks.map((c) => (
{initials(c.rep)}
{c.rep}
{c.deposit > 0 ? fmt(c.deposit) + " deposit" : ""}{c.deposit > 0 && c.completion > 0 ? " · " : ""}{c.completion > 0 ? fmt(c.completion) + " completion" : ""}
{fmtD(c.deposit + c.completion)}
))}
)} {canRun && ( {pickedList.length === 0 ? "Select draws to run" : "Run Payroll · " + fmtD(cycleTotal)} )} {!canRun && (
You're viewing your own commissions. Payroll is run by an owner or manager.
)}
) : tab === "sales" ? ( /* All sales — mark installed to release completion draws */
Draws · Paid Date
{(() => { const monthLbl = (ms) => { const d = new Date(ms); return d.toLocaleString("en-US", { month: "long", year: "numeric", timeZone: "UTC" }); }; const monthTot = {}; sales.forEach((x) => { if (x.saleMs == null) return; const k = monthLbl(x.saleMs); const t = monthTot[k] || (monthTot[k] = { sale: 0, comm: 0, n: 0 }); t.sale += x.value || 0; t.comm += x.exempt ? 0 : (x.commission || 0); t.n += 1; }); let lastMonth = null; return sortList(sales, salesSort.key, salesSort.dir, { customer:(s)=>s.customer, rep:(s)=>s.rep, saleMs:(s)=>s.saleMs, value:(s)=>s.value, commission:(s)=>s.exempt?-1:s.commission, installed:(s)=>s.installed?1:0, exempt:(s)=>s.exempt?1:0 }[salesSort.key]).map((s) => { const d1 = s.draw1PaidMs != null ? api.fmtDate(s.draw1PaidMs) : null; const d2 = s.draw2PaidMs != null ? api.fmtDate(s.draw2PaidMs) : null; const m = salesSort.key === "saleMs" && s.saleMs != null ? monthLbl(s.saleMs) : null; const showMonth = m != null && m !== lastMonth; lastMonth = m != null ? m : lastMonth; return ( {showMonth && (
{m} {monthTot[m] ? monthTot[m].n + " sales" : ""} {monthTot[m] ? fmt(monthTot[m].sale) : ""} {monthTot[m] ? fmt(monthTot[m].comm) : ""}
)}
{s.customer}
{s.id}
{s.rep}
{s.dateSold}
{fmt(s.value)}
{s.exempt ? "—" : fmt(s.commission)}
{s.exempt ? Commission-exempt : ( D1 {s.draw1Paid ? "✓ " + (d1 || "paid") : "unpaid"} D2 {s.draw2Paid ? "✓ " + (d2 || "paid") : (s.installed ? "due" : "held")} )}
toggleInstall(s.id, v)} disabled={s.exempt || !canRun} />
toggleExempt(s.id, v)} disabled={!canRun} />
); }); })()} ) : tab === "history" ? ( /* Pay Periods — what was paid, when */ (function () { const hist = api.paidHistory().map((g) => ({ ...g, draws: mineOnly(g.draws), total: api.round2(mineOnly(g.draws).reduce((s, d) => s + d.amount, 0)) })).filter((g) => g.draws.length); if (!hist.length) return

No payroll has been run yet. Paid draws will appear here grouped by pay period.

; return (
{hist.map((g) => (
{g.period.label} {g.draws.length} paid
{fmtD(g.total)} {canRun && ( )}
{g.draws.slice().sort((a, b) => a.rep.localeCompare(b.rep) || b.amount - a.amount).map((d, i) => (
{d.customer}
{d.rep} · {d.saleId}
{d.kind === "deposit" ? "Deposit" : "Completion"}
Paid {d.paidDate}
{d.kind === "completion" && d.completedDate ? "Completed " + d.completedDate : ""}
{fmtD(d.amount)}
))} ))}
); })() ) : ( /* Import completed-jobs CSV */
Import Sales List
{ e.preventDefault(); }} onDrop={(e) => { e.preventDefault(); onSalesFile(e.dataTransfer.files && e.dataTransfer.files[0]); }} onClick={() => salesRef.current && salesRef.current.click()} style={{ border: "2px dashed var(--border-default)", borderRadius: "var(--radius-xl)", background: "var(--surface-sunken)", padding: "32px 20px", textAlign: "center", cursor: "pointer" }}>
Drop your sales-list CSV
or click to choose a file
onSalesFile(e.target.files && e.target.files[0])} />

Reads the sales export (PO ID · Sales Rep · Customer · Value · Date Sold) and rebuilds the dataset — commission at {Math.round(0.097 * 1000) / 10}%, split into deposit + completion draws. {api.hasUploadedSales() ? "Currently using your uploaded list." : "Currently using the built-in list."}

{api.hasUploadedSales() && } Import Completed Jobs
{ e.preventDefault(); }} onDrop={(e) => { e.preventDefault(); onCsvFile(e.dataTransfer.files && e.dataTransfer.files[0]); }} onClick={() => fileRef.current && fileRef.current.click()} style={{ border: "2px dashed var(--border-default)", borderRadius: "var(--radius-xl)", background: "var(--surface-sunken)", padding: "32px 20px", textAlign: "center", cursor: "pointer" }}>
Drop your completed-jobs CSV
or click to choose a file
onCsvFile(e.target.files && e.target.files[0])} />
{importErr &&

{importErr}

}

Reads the standard export (Name · P.O. · Status · Action Due). Rows marked Install Complete are matched to sales by P.O. then customer name; each match releases the job's completion draw, dated to the day it was completed — so it pays in that day's pay period.

{importResult && (
{["Job", "Completed", "Pays In"].map((h, i) => {h})}
{importResult.matched.map((m, i) => (
{m.name}
{m.saleId}
{m.dateLabel}
{m.period.label}
))} {importResult.matched.length === 0 &&
No rows matched a sale in the system. Check that P.O. or customer names line up.
} {importResult.unmatched.length > 0 && ( Unmatched ({importResult.unmatched.length})
{importResult.unmatched.map((u) => u.name).join(" · ")}
 )}
)}
)}

Commission = sale × {Math.round(0.097 * 1000) / 10}% (default rate), split 50% on deposit and 50% on completion. Mark a job Installed to release its completion draw, then include it in a payroll run. Changes are saved on this device.

); } window.Payroll = Payroll;