// Change Orders Tab — list + detail drawer with AI assist // Status flow: Draft → Internal Review → Sent → Pending Approval → Approved | Rejected | Canceled const CO_STATUS = { Draft: { tone: "neutral", next: "Submit for Review" }, "Internal Review": { tone: "info", next: "Send to Customer" }, Sent: { tone: "purple", next: "Mark Pending Approval" }, "Pending Approval": { tone: "warning", next: "Mark as Approved" }, Approved: { tone: "success", next: "Apply to Project" }, Rejected: { tone: "danger", next: null }, Canceled: { tone: "neutral", next: null }, }; const CUSTOMER_APPROVAL = { "Not Sent": { tone: "neutral", icon: "circle" }, "Awaiting": { tone: "warning", icon: "clock" }, "Approved": { tone: "success", icon: "check" }, "Rejected": { tone: "danger", icon: "cross" }, "N/A": { tone: "neutral", icon: "circle" }, }; const REASONS = ["Owner Change", "Design Change", "Field Condition", "Schedule Acceleration", "Material Substitution", "Code/Permit", "Errors & Omissions"]; const CHANGE_ORDERS = [ { id: "CO-014", title: "Add 240 modules — east tracker row extension", scope: "SOW-04 Module Installation", scopeId: "SOW-04", status: "Pending Approval", customerApproval: "Awaiting", revenue: 184_500, cost: 142_300, schedule: 6, owner: { initials: "EC", name: "Emma Connor", color: "#22863A" }, updated: "2h ago", created: "04/24/2026", reason: "Owner Change", description: "Owner requested expansion of array on east edge to capture additional 96 kW. Includes 240 PV modules, additional racking, source-circuit harnesses, and DC combiner reconfiguration.", tasks: 6, docs: 4, billable: true, riskFlags: ["high-cost", "margin"], }, { id: "CO-013", title: "Predrill 480 piles in north section refusal zone", scope: "SOW-02 Pile Driving", scopeId: "SOW-02", status: "Approved", customerApproval: "Approved", revenue: 92_800, cost: 78_400, schedule: 4, owner: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, updated: "Yesterday", created: "04/02/2026", reason: "Field Condition", description: "Geotech encountered refusal in north section. Predrilling required for 480 piles with 6\" carbide bit. Includes equipment rental and crew time.", tasks: 3, docs: 6, billable: true, approvedDate: "04/15/2026", approvedBy: "Brad Sterling — Solis Energy", }, { id: "CO-012", title: "Substitute galvanized racking — supply chain delay", scope: "SOW-03 Racking", scopeId: "SOW-03", status: "Sent", customerApproval: "Awaiting", revenue: 0, cost: 24_600, schedule: 0, owner: { initials: "JL", name: "Jordan Lin", color: "#FF9143" }, updated: "3d ago", created: "04/18/2026", reason: "Material Substitution", description: "Original racking lead time slipped 14 weeks. Approved equivalent galvanized alternative from Unirac. Cost-only CO; revenue unchanged.", tasks: 2, docs: 3, billable: false, riskFlags: ["margin"], }, { id: "CO-011", title: "Schedule acceleration — add second crew to torque tubes", scope: "SOW-03 Racking", scopeId: "SOW-03", status: "Internal Review", customerApproval: "Not Sent", revenue: 68_400, cost: 71_200, schedule: -10, owner: { initials: "EC", name: "Emma Connor", color: "#22863A" }, updated: "Today", created: "04/28/2026", reason: "Schedule Acceleration", description: "Owner requested 10-day pull-in on substantial completion. Adding second torque-tube crew with overtime authorization through May 30.", tasks: 4, docs: 2, billable: true, riskFlags: ["margin"], }, { id: "CO-010", title: "Add SCADA integration to Owner DAS", scope: "SOW-06 Commissioning", scopeId: "SOW-06", status: "Draft", customerApproval: "Not Sent", revenue: 38_200, cost: 26_900, schedule: 2, owner: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, updated: "5d ago", created: "04/22/2026", reason: "Design Change", description: "Owner data acquisition system requires Modbus integration with tracker controllers. Includes additional cabling, gateway, and commissioning support.", tasks: 2, docs: 1, billable: true, }, { id: "CO-009", title: "Erosion control extension — 60 day SWPPP", scope: "SOW-01 Site Prep", scopeId: "SOW-01", status: "Approved", customerApproval: "Approved", revenue: 12_400, cost: 9_800, schedule: 0, owner: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, updated: "1w ago", created: "03/18/2026", reason: "Code/Permit", description: "County requested SWPPP extension to cover full pile-driving phase. Includes additional silt fencing and weekly inspections.", tasks: 1, docs: 2, billable: true, approvedDate: "03/24/2026", approvedBy: "Brad Sterling — Solis Energy", }, { id: "CO-008", title: "Replace damaged transformer pad — vandalism", scope: "SOW-05 Electrical", scopeId: "SOW-05", status: "Rejected", customerApproval: "Rejected", revenue: 14_800, cost: 14_800, schedule: 3, owner: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, updated: "2w ago", created: "03/02/2026", reason: "Field Condition", description: "Transformer pad damaged during off-hours. Owner directed insurance claim path; pursuing reimbursement through carrier instead.", tasks: 0, docs: 3, billable: false, }, { id: "CO-007", title: "Permit fee adjustment — county rate change", scope: "SOW-01 Site Prep", scopeId: "SOW-01", status: "Canceled", customerApproval: "N/A", revenue: 0, cost: 4_200, schedule: 0, owner: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, updated: "3w ago", created: "02/12/2026", reason: "Code/Permit", description: "County rolled back proposed fee increase before billing. CO no longer required.", tasks: 0, docs: 1, billable: false, }, ]; const ACTIVITY = [ { co: "CO-014", who: "EC", when: "2h ago", action: "Submitted to customer for approval", icon: "send", tone: "info" }, { co: "CO-014", who: "EC", when: "Yesterday", action: "Internal review completed", icon: "check", tone: "success" }, { co: "CO-014", who: "AI", when: "Yesterday", action: "Generated draft from owner email thread", icon: "sparkles", tone: "purple" }, { co: "CO-014", who: "EC", when: "04/24", action: "Created draft", icon: "plus", tone: "neutral" }, ]; const ChangeOrdersTab = ({ p }) => { const [search, setSearch] = React.useState(""); const [statusFilter, setStatusFilter] = React.useState("All"); const [scopeFilter, setScopeFilter] = React.useState("All"); const [ownerFilter, setOwnerFilter] = React.useState("All"); const [pendingOnly, setPendingOnly] = React.useState(false); const [selectedId, setSelectedId] = React.useState("CO-014"); const filtered = CHANGE_ORDERS.filter(co => { if (statusFilter !== "All" && co.status !== statusFilter) return false; if (scopeFilter !== "All" && co.scopeId !== scopeFilter) return false; if (ownerFilter !== "All" && co.owner.name !== ownerFilter) return false; if (pendingOnly && !["Pending Approval", "Sent", "Internal Review"].includes(co.status)) return false; if (search && !(`${co.id} ${co.title}`.toLowerCase()).includes(search.toLowerCase())) return false; return true; }); const selected = CHANGE_ORDERS.find(c => c.id === selectedId) || filtered[0]; // KPIs const total = CHANGE_ORDERS.reduce((s, co) => s + co.revenue, 0); const approved = CHANGE_ORDERS.filter(c => c.status === "Approved"); const approvedVal = approved.reduce((s, c) => s + c.revenue, 0); const pending = CHANGE_ORDERS.filter(c => ["Pending Approval", "Sent", "Internal Review"].includes(c.status)); const pendingVal = pending.reduce((s, c) => s + c.revenue, 0); const rejected = CHANGE_ORDERS.filter(c => c.status === "Rejected" || c.status === "Canceled"); const draftCount = CHANGE_ORDERS.filter(c => c.status === "Draft").length; const totalRev = CHANGE_ORDERS.reduce((s, c) => s + c.revenue, 0); const totalCost = CHANGE_ORDERS.reduce((s, c) => s + c.cost, 0); const marginImpact = totalRev - totalCost; const owners = ["All", ...Array.from(new Set(CHANGE_ORDERS.map(c => c.owner.name)))]; const scopes = ["All", ...Array.from(new Set(CHANGE_ORDERS.map(c => c.scopeId)))]; return (
{/* KPI strip */}
= 0 ? "+" : "−"}${fmtMoney(Math.abs(marginImpact))}`} sub={`${((marginImpact/totalRev)*100).toFixed(1)}% blended`} accent={marginImpact >= 0 ? "rgb(34,134,58)" : "rgb(192,47,50)"} />
{/* Toolbar */}
setSearch(e.target.value)} placeholder="Search CO #, title, scope…" style={{ width: "100%", boxSizing: "border-box", paddingLeft: 30, paddingRight: 10, height: 30, borderRadius: 9999, border: "1px solid rgb(213,219,225)", fontSize: 13, fontFamily: "inherit", outline: "none", background: "#fff" }} />
{/* Split: list + detail */}
{/* List */}
{filtered.length} Change Order{filtered.length === 1 ? "" : "s"} Sort: Recent
{filtered.map((co, i) => { const isSel = co.id === selectedId; return (
setSelectedId(co.id)} style={{ padding: "12px 14px", cursor: "pointer", borderBottom: i < filtered.length - 1 ? "1px solid rgb(239,240,242)" : "none", background: isSel ? "rgba(232,233,246,.5)" : "#fff", borderLeft: isSel ? "3px solid rgb(83,74,255)" : "3px solid transparent", paddingLeft: isSel ? 11 : 14, fontSize: 13, transition: "background 120ms", display: "flex", flexDirection: "column", gap: 8, }} onMouseEnter={e => { if (!isSel) e.currentTarget.style.background = "rgb(248,248,251)"; }} onMouseLeave={e => { if (!isSel) e.currentTarget.style.background = "#fff"; }}> {/* Top: CO # + Status + meta */}
{co.id} {co.status}
{co.updated}
{/* Title */}
{co.title}
{/* Bottom: scope + impact strip */}
{co.scope}
0 ? "rgb(34,134,58)" : co.revenue < 0 ? "rgb(192,47,50)" : "rgb(106,115,131)" }}> {co.revenue > 0 ? "+" : co.revenue < 0 ? "−" : ""}{fmtMoney(Math.abs(co.revenue))} −{fmtMoney(co.cost)} {co.schedule !== 0 && ( <> 0 ? "rgb(192,47,50)" : "rgb(34,134,58)", fontWeight: 500 }}> {co.schedule > 0 ? `+${co.schedule}d` : `${co.schedule}d`} )}
{/* Customer approval pill */} {co.customerApproval !== "N/A" && co.customerApproval !== "Not Sent" && (
)}
); })} {filtered.length === 0 && (
No change orders match these filters.
)} {/* Detail drawer */} {selected && }
); }; const COKPI = ({ label, value, sub, accent, accentBg, urgent, icon }) => (
{urgent &&
}
{label} {icon && }
{value}
{sub}
); const FilterPill2Click = ({ label, value, options, onChange, icon }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(); React.useEffect(() => { const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, []); const active = value !== "All"; return (
{open && (
{options.map(opt => (
{ onChange(opt); setOpen(false); }} style={{ padding: "7px 10px", borderRadius: 6, fontSize: 13, cursor: "pointer", color: opt === value ? "rgb(83,74,255)" : "rgb(26,27,37)", background: opt === value ? "rgb(232,233,246)" : "transparent", display: "flex", alignItems: "center", justifyContent: "space-between" }} onMouseEnter={e => { if (opt !== value) e.currentTarget.style.background = "rgb(248,248,251)"; }} onMouseLeave={e => { if (opt !== value) e.currentTarget.style.background = "transparent"; }}> {opt} {opt === value && }
))}
)}
); }; const CustomerApprovalBadge = ({ status }) => { const cfg = CUSTOMER_APPROVAL[status]; if (!cfg) return null; const t = TONES[cfg.tone]; return ( Customer: {status} ); }; const ImpactValue = ({ value, label, muted }) => { const positive = value > 0; const negative = value < 0; return ( {label} {value > 0 ? "+" : value < 0 ? "−" : ""}{fmtMoney(Math.abs(value))} ); }; const COSideDrawer = ({ co }) => { const margin = co.revenue - co.cost; const marginPct = co.revenue > 0 ? (margin / co.revenue) * 100 : 0; const cfg = CO_STATUS[co.status]; const isHighCost = co.cost > 100_000; const isMarginRisk = marginPct < 15 && co.revenue > 0; const isScheduleRisk = co.schedule >= 5; return (
{/* Header card */}
{co.id} {co.status}

{co.title}

{co.owner.name} Created {co.created} Updated {co.updated}
{/* Action bar — next-best-action highlighted */}
{cfg.next && } {co.status === "Draft" && } {(co.status === "Approved") && } {!["Approved", "Rejected", "Canceled"].includes(co.status) && }
{/* AI Insight Card */} {(isHighCost || isMarginRisk || isScheduleRisk) && (
AI Summary
This change order adds {fmtMoney(co.revenue)} in revenue against {fmtMoney(co.cost)} in cost — a {marginPct.toFixed(1)}% margin{co.schedule !== 0 && <> with a {co.schedule > 0 ? `${co.schedule}-day` : `${Math.abs(co.schedule)}-day`} {co.schedule > 0 ? "schedule extension" : "acceleration"}}.
{isHighCost && } {isMarginRisk && } {isScheduleRisk && }
)} {/* Financial Impact */}
Financial Impact
0} /> 0} divider /> 0} negative={margin < 0} sub={`${marginPct.toFixed(1)}%`} divider />
{/* Description + Reason */}
Description {co.reason}
{co.description}
 {/* Scope & Schedule */}
Scope & Schedule Impact
Linked Scope
{co.scope}
{co.tasks} task{co.tasks === 1 ? "" : "s"} affected
0 ? "rgba(252,226,226,.4)" : co.schedule < 0 ? "rgba(208,243,217,.4)" : "rgb(248,248,251)", borderRadius: 8 }}>
Schedule Impact
0 ? "rgb(192,47,50)" : co.schedule < 0 ? "rgb(34,134,58)" : "rgb(106,115,131)"} /> 0 ? "rgb(192,47,50)" : co.schedule < 0 ? "rgb(34,134,58)" : "rgb(26,27,37)" }}> {co.schedule === 0 ? "No schedule impact" : co.schedule > 0 ? `+${co.schedule} days` : `${co.schedule} days`}
{co.schedule > 0 ? "Pushes completion later" : co.schedule < 0 ? "Accelerates completion" : "On baseline schedule"}
{/* Approval */}
Approval
 {/* Related items */}
Related Items
 {/* Activity */}
Activity
{ACTIVITY.filter(a => a.co === co.id).map((a, i, arr) => (
{i < arr.length - 1 &&
}
{a.action}
{a.who} · {a.when}
))} {ACTIVITY.filter(a => a.co === co.id).length === 0 && (
No activity yet.
)}
); }; const FinancialCell = ({ label, value, sign, positive, negative, sub, divider }) => (
{label}
{sign && (positive ? "+" : negative ? "−" : "")}{fmtMoney(Math.abs(value))}
{sub &&
{sub}
}
); const AIAlert = ({ tone, icon, text }) => (
{text}
); const ApprovalSlot = ({ label, status, who, when }) => { const cfg = CUSTOMER_APPROVAL[status] || { tone: "neutral", icon: "circle" }; const tone = status === "Approved" ? "success" : status === "Rejected" ? "danger" : status === "Awaiting" || status === "Pending" ? "warning" : "neutral"; const t = TONES[tone]; return (
{label}
{status}
{who}
{when}
); }; const RelatedTile = ({ icon, label, count, subtitle }) => ( ); window.ChangeOrdersTab = ChangeOrdersTab; window.FilterPill2Click = FilterPill2Click;