// Billing Tab — financial control center for project billing // Sections: summary KPIs, model indicator, Schedule of Values workspace, // readiness panel, change-order impact, invoice history, AI assist, filters. const BILLING_PERIODS = [ "Apr 1 – Apr 30, 2026 (Current)", "Mar 1 – Mar 31, 2026", "Feb 1 – Feb 28, 2026", "Jan 1 – Jan 31, 2026", "Dec 1 – Dec 31, 2025", ]; const BILLING_MODELS = ["Progress Billing", "Milestone Billing", "Time & Materials", "Fixed Fee", "Hybrid"]; // Schedule of Values rows. Loosely tracks the SCOPES, but billing-flavored. // previouslyBilled + currentDraft = total billed-this-cycle once invoiced. const SOV_INITIAL = [ { id: "01.100", scope: "Site Prep & Earthwork", desc: "Clearing, grading, erosion control", contract: 492_000, pct: 100, prevBilled: 492_000, current: 0, retainage: 0.05, ready: true }, { id: "02.100", scope: "Pile Driving & Foundation", desc: "Driven piles + pull-out testing", contract: 1_268_000, pct: 100, prevBilled: 1_204_600, current: 63_400, retainage: 0.05, ready: true }, { id: "03.100", scope: "Racking — Uprights & Torque Tubes", desc: "Field-installed racking system", contract: 1_840_000, pct: 78, prevBilled: 1_104_000, current: 331_200, retainage: 0.05, ready: true }, { id: "04.100", scope: "Module Installation", desc: "PV module mounting + wire mgmt", contract: 980_000, pct: 42, prevBilled: 245_000, current: 166_600, retainage: 0.05, ready: true }, { id: "05.100", scope: "DC Electrical & Combiners", desc: "Source-circuit harnesses + combiners", contract: 620_000, pct: 28, prevBilled: 124_000, current: 49_600, retainage: 0.05, ready: false, blockReason: "Awaiting megger test results — uploaded but unsigned" }, { id: "06.100", scope: "AC Electrical & Inverters", desc: "Inverter pads, AC collection, MV", contract: 540_000, pct: 12, prevBilled: 0, current: 64_800, retainage: 0.05, ready: true }, { id: "07.100", scope: "Commissioning & Startup", desc: "PCS, SCADA, owner training", contract: 280_000, pct: 0, prevBilled: 0, current: 0, retainage: 0.05, ready: false, blockReason: "Phase not started" }, // CO additions { id: "CO-013", scope: "CO-013 — Predrill 480 piles (refusal)", desc: "Approved field-condition CO", isCO: true, contract: 92_800, pct: 100, prevBilled: 46_400, current: 46_400, retainage: 0.05, ready: true }, { id: "CO-009", scope: "CO-009 — SWPPP extension", desc: "Approved code/permit CO", isCO: true, contract: 12_400, pct: 100, prevBilled: 12_400, current: 0, retainage: 0.05, ready: true }, ]; const INVOICES = [ { num: "INV-2026-008", date: "04/30/2026", period: "Apr 1 – Apr 30", amount: 0, status: "Draft", cos: ["CO-013"], note: "Draft — current cycle" }, { num: "INV-2026-007", date: "03/31/2026", period: "Mar 1 – Mar 31", amount: 542_800, status: "Sent", cos: ["CO-013"], note: "Submitted to Solis Energy" }, { num: "INV-2026-006", date: "02/28/2026", period: "Feb 1 – Feb 28", amount: 612_400, status: "Paid", cos: [], note: "Paid 03/18/2026" }, { num: "INV-2026-005", date: "01/31/2026", period: "Jan 1 – Jan 31", amount: 488_200, status: "Paid", cos: ["CO-009"], note: "Paid 02/12/2026" }, { num: "INV-2026-004", date: "12/31/2025", period: "Dec 1 – Dec 31", amount: 720_600, status: "Paid", cos: [], note: "Paid 01/14/2026" }, { num: "INV-2026-003", date: "11/30/2025", period: "Nov 1 – Nov 30", amount: 360_000, status: "Paid", cos: [], note: "Paid 12/16/2025" }, ]; const INVOICE_TONES = { Draft: { tone: "neutral", icon: "pen", label: "Draft" }, Sent: { tone: "info", icon: "send", label: "Sent" }, "Pending Approval": { tone: "warning", icon: "clock", label: "Pending" }, Paid: { tone: "success", icon: "check", label: "Paid" }, Overdue: { tone: "danger", icon: "alertCircle", label: "Overdue" }, }; const PENDING_COS = [ { id: "CO-014", title: "Add 240 modules — east tracker row extension", value: 184_500, status: "Pending Approval" }, { id: "CO-011", title: "Schedule acceleration — second torque-tube crew", value: 68_400, status: "Internal Review" }, { id: "CO-012", title: "Substitute galvanized racking", value: 0, status: "Sent" }, ]; // ============================================================================= // MAIN // ============================================================================= const BillingTab = ({ p }) => { const [sov, setSov] = React.useState(SOV_INITIAL); const [period, setPeriod] = React.useState(BILLING_PERIODS[0]); const [scopeFilter, setScopeFilter] = React.useState("All"); const [billableOnly, setBillableOnly] = React.useState(false); const [invoiceState, setInvoiceState] = React.useState("draft"); // empty | draft | ready | complete // Totals const totalContract = sov.reduce((s, r) => s + r.contract, 0); const earnedRevenue = sov.reduce((s, r) => s + r.contract * (r.pct / 100), 0); const billedToDate = sov.reduce((s, r) => s + r.prevBilled, 0); const currentDraft = sov.reduce((s, r) => s + r.current, 0); const retainageHeld = sov.reduce((s, r) => s + (r.prevBilled + r.current) * r.retainage, 0); const remaining = totalContract - billedToDate - currentDraft; const approvedCOs = sov.filter(r => r.isCO).reduce((s, r) => s + r.contract, 0); const pendingCOValue = PENDING_COS.reduce((s, c) => s + c.value, 0); const filtered = sov.filter(r => { if (scopeFilter !== "All" && r.scope !== scopeFilter) return false; if (billableOnly && r.current === 0) return false; return true; }); const updatePct = (id, newPct) => { setSov(prev => prev.map(r => { if (r.id !== id) return r; const earned = r.contract * (newPct / 100); const newCurrent = Math.max(0, earned - r.prevBilled); return { ...r, pct: newPct, current: newCurrent }; })); }; return (
{/* AI suggestion hero — replaces side panel */} r.scope)]} billableOnly={billableOnly} onBillableOnly={setBillableOnly} state={invoiceState} onState={setInvoiceState} /> {invoiceState === "empty" ? ( ) : invoiceState === "complete" ? ( ) : ( <> )}
); }; // ============================================================================= // AI SUGGESTION HERO // ============================================================================= const BillingAISuggestion = ({ currentDraft, earned, billed }) => (
Billing Assist Updated 4m ago
{fmtMoneyFull(currentDraft)} is ready to be invoiced based on current progress.
Earned through Apr 30 is {fmtMoneyFull(earned)}; with {fmtMoneyFull(billed)} previously billed, the suggested current draw matches scope progress within ±2%.
); // ============================================================================= // READINESS PANEL — sticky right rail, lives inline with SoV // ============================================================================= const BillingReadinessPanel = ({ rows }) => { const checks = [ { id: "progress", label: "Progress updated through Apr 30", state: "ok", detail: "All scopes refreshed today" }, { id: "cos", label: "Approved change orders applied", state: "ok", detail: "CO-013, CO-009 included" }, { id: "docs", label: "Required documents uploaded", state: "warn", detail: "Megger test report uploaded but unsigned", action: "Request signature" }, { id: "compliance", label: "Compliance & lien waivers", state: "ok", detail: "All lower-tier waivers current" }, { id: "retainage", label: "Retainage schedule applied", state: "ok", detail: "5% across all scopes" }, { id: "submittal", label: "Owner AIA G702/G703 packet", state: "ok", detail: "Format verified" }, ]; const okCount = checks.filter(c => c.state === "ok").length; const warnCount = checks.filter(c => c.state !== "ok").length; const overallTone = warnCount === 0 ? "success" : "warning"; return (
{/* Readiness checklist */}
Billing Readiness
{okCount}/{checks.length}
{checks.map(c => )}
{/* Inline alerts */}
AI Alerts 3 to review
); }; // ============================================================================= // SUMMARY // ============================================================================= const BillingSummary = ({ contract, billed, remaining, current, retainage, approvedCOs, pendingCOs }) => { const billedPct = (billed / contract) * 100; const draftPct = (current / contract) * 100; return (
Billing Summary
{fmtMoneyFull(billed)} billed of {fmtMoneyFull(contract)} ({billedPct.toFixed(1)}%)
{fmtMoneyFull(current)} in current draft
{/* Stacked progress bar: Billed (purple) | Draft (purple-50) | Remaining (gray) */}
Billed {fmtMoney(billed)} Draft {fmtMoney(current)} Remaining {fmtMoney(remaining)}
{/* KPI strip */}
); }; const SummaryStat = ({ label, value, sub, tone, last }) => { const fg = tone ? TONES[tone].fg : "rgb(26,27,37)"; return (
{label}
{value}
{sub}
); }; // ============================================================================= // MODEL INDICATOR // ============================================================================= const BillingModelBar = ({ model, breakdown, period, onPeriod }) => (
Billing Model {model}
{model === "Hybrid" ? `${breakdown.join(" + ")}` : "AIA G702/G703 Schedule of Values format"}
Cycle: Monthly Customer: Solis Energy Net 30
); // ============================================================================= // FILTERS // ============================================================================= const FiltersBar = ({ period, onPeriod, scopeFilter, onScope, scopes, billableOnly, onBillableOnly, state, onState }) => (
onBillableOnly(!billableOnly)}> Billable items only
{/* State demo (designer convenience) */}
{[ { id: "draft", label: "Draft" }, { id: "ready", label: "Ready" }, { id: "empty", label: "Empty" }, { id: "complete", label: "Complete" }, ].map(o => ( ))}
); const SelectField = ({ icon, value, options, onChange, width = 200 }) => (
{icon && }
); const ToggleChip = ({ active, onClick, children }) => ( ); // ============================================================================= // SCHEDULE OF VALUES // ============================================================================= const BillingWorkspace = ({ rows, onPctChange, currentDraft, earnedRevenue, billedToDate }) => { const cols = "minmax(240px, 1.4fr) minmax(160px, 1fr) 110px 110px 130px 130px 130px 130px"; return (
Schedule of Values
AIA G703 — edit % complete to recalculate current billing
{/* Header */}
Scope / Line Item Description Contract % Complete Earned Previously Billed Current Billing Remaining
{/* Rows */}
{rows.map((r, i) => ( ))}
{/* Footer totals */}
Totals
{fmtMoneyFull(rows.reduce((s, r) => s + r.contract, 0))}
—
{fmtMoneyFull(rows.reduce((s, r) => s + r.contract * r.pct / 100, 0))}
{fmtMoneyFull(rows.reduce((s, r) => s + r.prevBilled, 0))}
{fmtMoneyFull(rows.reduce((s, r) => s + r.current, 0))}
{fmtMoneyFull(rows.reduce((s, r) => s + r.contract - r.prevBilled - r.current, 0))}
); }; const SovHead = ({ children, align = "left" }) => (
{children}
); const SovRow = ({ row, cols, last, onPctChange }) => { const earned = row.contract * (row.pct / 100); const remaining = row.contract - row.prevBilled - row.current; const overBilled = (row.prevBilled + row.current) > earned + 1; const underBilled = earned - (row.prevBilled + row.current) > row.contract * 0.05; return (
e.currentTarget.style.background = "rgb(252,252,254)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} > {/* Scope */}
{row.isCO && CO}
{row.scope}
{row.id}
{!row.ready && ( )}
{row.desc}
{fmtMoneyFull(row.contract)}
{/* Editable % */}
onPctChange(row.id, v)} />
{fmtMoneyFull(earned)}
{fmtMoneyFull(row.prevBilled)}
{/* Current billing — highlight when nonzero */}
0 ? "2px 8px" : 0, borderRadius: 6, background: row.current > 0 ? "rgb(232,233,246)" : "transparent", color: row.current > 0 ? "rgb(83,74,255)" : "rgb(163,172,186)", fontWeight: row.current > 0 ? 600 : 400 }}> {row.current > 0 ? fmtMoneyFull(row.current) : "—"} {(overBilled || underBilled) && row.current > 0 && (
{overBilled ? "Over earned" : "Under earned"}
)}
{remaining === 0 ? "—" : fmtMoneyFull(remaining)}
); }; const PctEditor = ({ value, onChange }) => { const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(String(value)); React.useEffect(() => setDraft(String(value)), [value]); const commit = () => { const n = Math.max(0, Math.min(100, parseFloat(draft) || 0)); onChange(n); setEditing(false); }; return editing ? ( setDraft(e.target.value)} onBlur={commit} onKeyDown={e => { if (e.key === "Enter") commit(); if (e.key === "Escape") { setDraft(String(value)); setEditing(false); } }} style={{ width: 64, height: 26, padding: "0 8px", borderRadius: 6, border: "1px solid rgb(83,74,255)", fontSize: 13, fontFamily: "inherit", textAlign: "right", outline: "none", background: "#fff", boxShadow: "0 0 0 3px rgba(83,74,255,.12)" }} /> ) : ( ); }; // ============================================================================= // ACTIONS // ============================================================================= const BillingActionsBar = ({ currentDraft, ready }) => (
{ready ? "Ready to invoice" : "Draft in progress"}
{ready ? `${fmtMoneyFull(currentDraft)} will be invoiced for the current period` : `${fmtMoneyFull(currentDraft)} drafted — resolve readiness checks before generating invoice`}
); // ============================================================================= // CHANGE ORDER IMPACT // ============================================================================= const ChangeOrderImpact = ({ approvedCOs, pendingCOs }) => (
Change Order Impact {fmtMoney(approvedCOs)} approved {fmtMoney(pendingCOs.reduce((s,c) => s + c.value, 0))} pending
{/* Approved */}
Included in billing (Approved)
{/* Pending */}
Excluded — awaiting approval
{pendingCOs.map(co => ( ))}
); const COImpactRow = ({ id, title, value, status, pending }) => (
{id} {title}
{value > 0 ? fmtMoneyFull(value) : "Cost-only"} {pending ? ( ) : ( {status} )}
); // ============================================================================= // INVOICE HISTORY // ============================================================================= const InvoiceHistoryTable = ({ invoices }) => { const cols = "140px 110px 200px 130px 120px 140px 1fr 100px"; return (
Invoice History {invoices.length}
Invoice #
Date
Period
Amount
Status
Related COs
Note
Actions
{invoices.map((inv, i) => { const t = INVOICE_TONES[inv.status]; return (
e.currentTarget.style.background = "rgb(252,252,254)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} >
{inv.num}
{inv.date}
{inv.period}
{inv.amount === 0 ? — : fmtMoneyFull(inv.amount)}
{t.label}
{inv.cos.length === 0 ? — : inv.cos.map(co => {co})}
{inv.note}
); })}
); }; // ============================================================================= // READINESS CHECK + ALERT CARD + QUICK ACTION (used by BillingReadinessPanel) // ============================================================================= const ReadinessCheck = ({ label, state, detail, action }) => { const tone = state === "ok" ? "success" : state === "warn" ? "warning" : "danger"; const icon = state === "ok" ? "check" : state === "warn" ? "alertCircle" : "alert"; return (
{label}
{detail}
{action && ( )}
); }; const AlertCard = ({ tone, icon, title, body, cta }) => (
{title}
{body}
{cta && ( )}
); const QuickAction = ({ icon, label }) => ( ); // ============================================================================= // EMPTY / COMPLETE STATES // ============================================================================= const EmptyBillingState = () => (
No billing activity yet
Once progress is logged on the first scope, your Schedule of Values will populate here. You can also start a manual draft.
); const CompleteBillingState = ({ contract, billed }) => (
Project fully billed
{fmtMoneyFull(billed)} of {fmtMoneyFull(contract)} contract value invoiced. Final retainage release pending closeout.
); window.BillingTab = BillingTab;