\n <div className=\"chart\">{[0, 0, 0, 0, 0].map((v, i) => <div className=\"bar\" key={i}><b>—</b><span><i style={{ height: v + \"%\" }} /><em style={{ height: v + \"%\" }} /></span><small>{[\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\"][i]}</small></div>)}</div>\n </article>\n <JobCostForecast actualCost={props.rows.reduce((s, r) => s + r.totalCost, 0)} settings={props.forecast} setSettings={props.setForecast} />\n </section>\n\n <CostCodeTable rows={props.rows} production={props.production} setProduction={props.setProduction} consolidated={props.consolidateCodes} setConsolidated={props.setConsolidateCodes} />\n </>\n );\n}\n\n// ---------- Jobs Manager ----------\nfunction JobsManager({ user, jobs, activeJob, onCreate, onUpdate, onDeleteConfirm }: {\n user: User; jobs: Job[]; activeJob: Job | null; onCreate: (name: string) => void;\n onUpdate: (fields: Record<string, string>) => void; onDeleteConfirm: () => void;\n}) {\n const [name, setName] = useState(\"\");\n const [editing, setEditing] = useState<Job | null>(null);\n const [form, setForm] = useState<Record<string, string>>({});\n const fields: [string, string][] = [\n [\"name\", \"Job name\"], [\"job_number\", \"Job #\"], [\"status\", \"Status\"], [\"superintendent\", \"Superintendent\"],\n [\"project_manager\", \"Project manager\"], [\"foreman\", \"Foreman\"], [\"location\", \"Location\"],\n [\"jurisdiction\", \"Jurisdiction\"], [\"general_contractor\", \"General contractor\"],\n [\"prevailing_wage\", \"Prevailing wage\"], [\"permit_number\", \"Permit #\"], [\"schedule_group\", \"Schedule group\"],\n ];\n useEffect(() => { if (editing) { const f: Record<string, string> = {}; for (const [k] of fields) f[k] = String((editing as any)[k] ?? \"\"); setForm(f); } }, [editing]);\n // While the Edit modal is open: lock the background page and close on Escape.\n useEffect(() => {\n if (!editing) return;\n const prev = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n const onKey = (e: KeyboardEvent) => { if (e.key === \"Escape\") setEditing(null); };\n window.addEventListener(\"keydown\", onKey);\n return () => { document.body.style.overflow = prev; window.removeEventListener(\"keydown\", onKey); };\n }, [editing]);\n\n return (\n <section className=\"panel jobs-panel\">\n <div className=\"view-head\"><div><p>JOBS & SETTINGS</p><h3>Manage utility-schedule jobs</h3></div><span className=\"source-pill\">{jobs.length} JOB{jobs.length === 1 ? \"\" : \"S\"}</span></div>\n\n <div className=\"create-job-inline\"><input placeholder=\"New job name\" value={name} onChange={(e) => setName(e.target.value)} /><button className=\"gold\" onClick={() => { if (name.trim()) { onCreate(name.trim()); setName(\"\"); } }}>＋ Create job</button></div>\n\n <div className=\"job-list\">\n {jobs.length === 0 && <div className=\"empty-state compact\"><b>No jobs yet</b><span>Create a job to begin. Tables are intentionally empty in this staging phase.</span></div>}\n {jobs.map((j) => (\n <div className={`job-list-row ${j.id === activeJob?.id ? \"active\" : \"\"}`} key={j.id}>\n <span><b>{j.name}</b><small>{j.job_number ? `${j.job_number} · ` : \"\"}{j.source === \"monday\" ? \"Monday.com\" : \"Manual\"} · created manually</small></span>\n <span className=\"job-list-actions\">\n <button onClick={() => setEditing(j)}>Edit</button>\n {user.role === \"admin\" && <button className=\"danger-ghost\" onClick={onDeleteConfirm}>Delete</button>}\n </span>\n </div>\n ))}\n </div>\n {editing && (\n <div className=\"backdrop\" onMouseDown={() => setEditing(null)}>\n <form className=\"create-job-form wide-form\" onSubmit={(e) => { e.preventDefault(); onUpdate(form); setEditing(null); }} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>EDIT PROJECT</p><h2>{editing.name}</h2></div><button type=\"button\" onClick={() => setEditing(null)}>×</button></div>\n <div className=\"form-grid\">\n {fields.map(([k, label]) => (\n <label className={k === \"name\" ? \"wide\" : \"\"} key={k}>{label.toUpperCase()}<input value={form[k] ?? \"\"} onChange={(e) => setForm({ ...form, [k]: e.target.value })} /></label>\n ))}\n </div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setEditing(null)}>Cancel</button><button className=\"gold\">Save job</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Daily production ----------\nfunction DailyProduction({ entries, rates, onAddEntry, onAdd }: { entries: Entry[]; rates: LaborRates; onAddEntry: (e: Entry) => void; onAdd: () => void }) {\n const [open, setOpen] = useState(false);\n const [form, setForm] = useState({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: \"001 2013 Ram Truck 3500 ST\", equipmentHours: \"\" });\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n useEffect(() => { api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {}); }, []);\n const selected = equipmentRates.find((x) => x.label === form.equipment) ?? equipmentRates[0];\n const equipmentCost = (selected?.rate ?? 0) * Number(form.equipmentHours);\n const laborCost = Number(form.laborHours) * rates.labor + Number(form.operatorHours) * rates.operator + Number(form.foremanHours) * rates.foreman;\n function save(e: React.FormEvent) {\n e.preventDefault();\n onAddEntry({ id: Date.now(), activity: form.activity, unit: form.unit, qty: +form.qty || 0, hours: Number(form.laborHours) + Number(form.operatorHours) + Number(form.foremanHours), labor: laborCost, equipment: equipmentCost });\n setForm({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: equipmentRates[0]?.label ?? \"\", equipmentHours: \"\" });\n setOpen(false);\n }\n return (\n <section className=\"panel daily-view\">\n <div className=\"view-head\"><div><p>FIELD ENTRIES</p><h3>Production and cost log</h3></div><button className=\"gold\" onClick={() => setOpen(true)}>＋ New entry</button></div>\n <div className=\"daily-row daily-head\"><span>ACTIVITY</span><span>QUANTITY</span><span>HOURS</span><span>LABOR</span><span>EQUIPMENT</span><span>TOTAL</span></div>\n {entries.length ? entries.map((e) => (\n <div className=\"daily-row\" key={e.id}><span><b>{e.activity}</b></span><span>{e.qty ? `${e.qty.toLocaleString()} ${e.unit}` : \"Imported total\"}</span><span>{e.hours.toFixed(2)}</span><span>{money(e.labor, 2)}</span><span>{money(e.equipment, 2)}</span><span><b>{money(e.labor + e.equipment, 2)}</b></span></div>\n )) : <div className=\"empty-state\"><b>No production entries yet</b><span>Add a field entry or upload the job’s Excel time sheet.</span></div>}\n\n {open && (\n <div className=\"backdrop\" onMouseDown={() => setOpen(false)}>\n <form onSubmit={save} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DAILY FIELD ENTRY</p><h2>Add production & cost</h2></div><button type=\"button\" onClick={() => setOpen(false)}>×</button></div>\n <div className=\"form-grid\">\n <label className=\"wide\">ACTIVITY<input value={form.activity} onChange={(e) => setForm({ ...form, activity: e.target.value })} /></label>\n <label>QUANTITY<input type=\"number\" value={form.qty} onChange={(e) => setForm({ ...form, qty: e.target.value })} /></label>\n <label>UNIT<select value={form.unit} onChange={(e) => setForm({ ...form, unit: e.target.value })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select></label>\n <label>LABOR HOURS · {money(rates.labor, 2)}/HR<input type=\"number\" step=\".25\" value={form.laborHours} onChange={(e) => setForm({ ...form, laborHours: e.target.value })} /></label>\n <label>OPERATOR HOURS · {money(rates.operator, 2)}/HR<input type=\"number\" step=\".25\" value={form.operatorHours} onChange={(e) => setForm({ ...form, operatorHours: e.target.value })} /></label>\n <label>FOREMAN HOURS · {money(rates.foreman, 2)}/HR<input type=\"number\" step=\".25\" value={form.foremanHours} onChange={(e) => setForm({ ...form, foremanHours: e.target.value })} /></label>\n <label className=\"wide\">EQUIPMENT<select value={form.equipment} onChange={(e) => setForm({ ...form, equipment: e.target.value })}>{equipmentRates.map((x) => <option key={x.label}>{x.label}</option>)}</select></label>\n <label>EQUIPMENT HOURS<input type=\"number\" step=\".25\" value={form.equipmentHours} onChange={(e) => setForm({ ...form, equipmentHours: e.target.value })} /></label>\n <label>HOURLY RATE<input value={money(selected?.rate ?? 0, 2) + \" / hr\"} readOnly /></label>\n </div>\n <div className=\"equipment-calc\"><span><small>EQUIPMENT COST</small><b>{money(equipmentCost, 2)}</b></span><em>{form.equipmentHours || 0} hrs × {money(selected?.rate ?? 0, 2)}/hr</em></div>\n <div className=\"calculated\"><span>CALCULATED TOTAL COST / UNIT</span><b>{money((laborCost + equipmentCost) / Math.max(1, +form.qty), 2)} / {form.unit}</b></div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setOpen(false)}>Cancel</button><button className=\"gold\">Save daily production</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Labor rates ----------\nfunction LaborRateSettings({ job, rates, setRates, status, onSave }: { job: Job | null; rates: LaborRates; setRates: (v: LaborRates) => void; status: string; onSave: (e: React.FormEvent) => void }) {\n return (\n <section className=\"labor-settings\">\n <article className=\"panel rate-settings-card\">\n <div className=\"settings-head\"><div><p>JOB-SPECIFIC LABOR RATES</p><h3>Hourly rate schedule</h3></div><span className=\"save-status\">● {status || \"Ready\"}</span></div>\n <label className=\"settings-job\">JOB<input readOnly value={job?.name ?? \"Select a job\"} /></label>\n <form onSubmit={onSave}>\n <div className=\"rate-input-grid\">\n <RateInput label=\"Labor\" value={rates.labor} onChange={(v) => setRates({ ...rates, labor: v })} />\n <RateInput label=\"Operator\" value={rates.operator} onChange={(v) => setRates({ ...rates, operator: v })} />\n <RateInput label=\"Foreman\" value={rates.foreman} onChange={(v) => setRates({ ...rates, foreman: v })} />\n </div>\n <div className=\"rate-actions\"><span>These rates apply only to <b>{job?.name ?? \"this job\"}</b> and update new production entries immediately.</span><button type=\"button\" onClick={() => setRates(DEFAULT_RATES)}>Use standard rates</button><button className=\"gold\">Save job rates</button></div>\n </form>\n </article>\n <article className=\"panel prevailing-card\"><i>PW</i><div><p>PREVAILING WAGE READY</p><h3>Different job, different rates.</h3><span>Choose a job above, enter its required wage rates, and save. Your standard-rate jobs remain unchanged.</span></div></article>\n </section>\n );\n}\nfunction RateInput({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {\n return <label><span>{label}<small>HOURLY RATE</small></span><div><i>$</i><input type=\"number\" min=\"0\" max=\"500\" step=\".01\" value={value} onChange={(e) => onChange(Number(e.target.value))} /><em>/ hr</em></div></label>;\n}\n\n// ---------- Equipment ----------\nfunction OperationsUsageView({ usage, days, phases, showPhases, setShowPhases }: { usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhases: boolean; setShowPhases: (v: boolean) => void }) {\n const hasData = usage.length > 0 || days.length > 0;\n return <>\n <section className=\"phase-controls\"><div><p>JOB UTILIZATION VIEW</p><b>{showPhases ? \"Equipment and crew by phase code\" : \"Equipment and crew totals\"}</b></div><button disabled={!hasData} onClick={() => setShowPhases(!showPhases)}>{showPhases ? \"← Show job totals\" : \"View by phase code →\"}</button></section>\n {showPhases ? <PhaseCodeUsagePanel phases={phases} /> : <section className=\"operations-grid\"><EquipmentUsagePanel usage={usage} /><CrewSizePanel days={days} /></section>}\n </>;\n}\nfunction EquipmentUsagePanel({ usage }: { usage: EquipmentUsage[] }) {\n const top = usage.slice(0, 5); const max = top[0]?.hours || 1;\n return <article className=\"panel usage-panel\"><div className=\"view-head\"><div><p>TIMESHEET EQUIPMENT</p><h3>Most-used equipment</h3></div>{usage.length > 0 && <span className=\"source-pill\">RANKED BY HOURS</span>}</div>\n {top.length ? <div className=\"usage-list\">{top.map((item, i) => <div className=\"usage-row\" key={item.name}><i>{i + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / max * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"empty-state compact\"><b>No equipment usage yet</b><span>Upload the job’s labor and equipment Excel file to rank equipment by hours.</span></div>}\n </article>;\n}\nfunction CrewSizePanel({ days }: { days: CrewDay[] }) {\n const average = days.length ? days.reduce((sum, d) => sum + d.size, 0) / days.length : 0;\n const peak = days.reduce((m, d) => Math.max(m, d.size), 0);\n const recent = days.slice(-5).reverse();\n return <article className=\"panel crew-panel\"><div className=\"view-head\"><div><p>TIMESHEET CREW</p><h3>Crew size by workday</h3></div>{days.length > 0 && <span className=\"source-pill\">UNIQUE EMPLOYEES</span>}</div>\n {days.length ? <><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{days.length}</b></span></div><div className=\"crew-days\">{recent.map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></> : <div className=\"empty-state compact\"><b>No crew data yet</b><span>Crew size will calculate from unique employee IDs for each workday.</span></div>}\n </article>;\n}\nfunction PhaseCodeUsagePanel({ phases }: { phases: PhaseUsage[] }) {\n const [expanded, setExpanded] = useState(\"\");\n return <section className=\"panel phase-usage\"><div className=\"view-head\"><div><p>PHASE CODE UTILIZATION</p><h3>Equipment and crew by phase</h3></div><span className=\"source-pill\">CLICK A PHASE TO EXPAND</span></div>\n {phases.length ? <div className=\"phase-table\"><div className=\"phase-row phase-head\"><span>PHASE CODE</span><span>MOST-USED EQUIPMENT</span><span>EQUIPMENT HOURS</span><span>AVG. CREW</span><span>PEAK CREW</span><span>WORKDAYS</span></div>\n {phases.map((phase) => { const average = phase.days.length ? phase.days.reduce((s, d) => s + d.size, 0) / phase.days.length : 0; const peak = phase.days.reduce((m, d) => Math.max(m, d.size), 0); const top = phase.equipment[0]; const isOpen = expanded === phase.phaseCode; const maxHours = top?.hours || 1;\n return <div className={`phase-group${isOpen ? \" open\" : \"\"}`} key={phase.phaseCode}><button type=\"button\" className=\"phase-row phase-click\" aria-expanded={isOpen} onClick={() => setExpanded(isOpen ? \"\" : phase.phaseCode)}><span className=\"phase-name\"><i>{isOpen ? \"−\" : \"+\"}</i><b>{phase.phaseCode}</b></span><span>{top ? <><b>{top.name}</b><small>{phase.equipment.length} equipment {phase.equipment.length === 1 ? \"unit\" : \"units\"} used</small></> : <em>No equipment assigned</em>}</span><span><b>{phase.equipment.reduce((s, i) => s + i.hours, 0).toFixed(1)}</b><small>hours</small></span><span><b>{average.toFixed(1)}</b><small>people</small></span><span><b>{peak}</b><small>people</small></span><span><b>{phase.days.length}</b><small>days</small></span></button>\n {isOpen && <div className=\"phase-detail\"><div className=\"phase-equipment-detail\"><div className=\"detail-title\"><p>ALL EQUIPMENT USED</p><b>{phase.equipment.length} units ranked by hours</b></div>{phase.equipment.length ? <div className=\"usage-list\">{phase.equipment.map((item, index) => <div className=\"usage-row\" key={item.name}><i>{index + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} matched cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / maxHours * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"detail-empty\">No equipment assigned to this phase.</div>}</div><div className=\"phase-crew-detail\"><div className=\"detail-title\"><p>CREW BY WORKDAY</p><b>Unique employees per day</b></div><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{phase.days.length}</b></span></div><div className=\"crew-days detail-days\">{phase.days.slice().reverse().map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></div></div>}\n </div>; })}\n </div> : <div className=\"empty-state compact\"><b>No phase-code usage yet</b><span>Upload a BusyBusy time sheet to build the phase-code breakdown.</span></div>}\n </section>;\n}\nfunction EquipmentMovesPanel({ moves }: { moves: EquipmentMove[] }) {\n const totalHours = moves.reduce((s, m) => s + m.hours, 0);\n const totalCost = moves.reduce((s, m) => s + m.cost, 0);\n const review = moves.filter((m) => m.needsReview).length;\n return <section className=\"panel equipment-moves\"><div className=\"view-head\"><div><p>MOBILIZATION PHASE CODE · 1101</p><h3>Equipment moves</h3></div>{moves.length > 0 && <span className=\"source-pill\">{moves.length} {moves.length === 1 ? \"MOVE\" : \"MOVES\"}</span>}</div>\n {moves.length ? <><div className=\"move-summary\"><span><small>EQUIPMENT MOVES</small><b>{moves.length}</b></span><span><small>MOVE HOURS</small><b>{totalHours.toFixed(1)}</b></span><span><small>TOTAL MOVE COST</small><b>{money(totalCost, 2)}</b></span><span className={review ? \"review\" : \"\"}><small>NEEDS REVIEW</small><b>{review}</b></span></div>\n <div className=\"move-table\"><div className=\"move-row move-head\"><span>DATE</span><span>EQUIPMENT MOVED</span><span>HAULING EQUIPMENT / DRIVER</span><span>HOURS</span><span>COST</span></div>\n {moves.map((move) => <div className=\"move-row\" key={move.id}><span>{move.date ? new Date(move.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" }) : \"Date unavailable\"}</span><span><b>{move.movedEquipment}</b><small>{move.description}</small></span><span><b>{move.haulingEquipment}</b><small>{move.driver}</small></span><span><b>{move.hours.toFixed(1)}</b><small>hours</small></span><span><b>{money(move.cost, 2)}</b><small>{money(move.laborCost, 2)} labor + {move.haulingCost > 0 ? `${money(move.haulingCost, 2)} truck` : \"truck rate missing\"}</small>{move.needsReview && <em>Review match</em>}</span></div>)}\n </div></> : <div className=\"empty-state compact\"><b>No equipment moves found yet</b><span>Upload a BusyBusy time sheet. Mobilization entries that name the transported machine in the description will appear here.</span></div>}\n </section>;\n}\nfunction RateBook({ search, setSearch, rates }: { search: string; setSearch: (v: string) => void; rates: EquipmentRate[] }) {\n return <section className=\"panel rate-book\"><div className=\"rate-tools\"><div><p>IMPORTED EQUIPMENT RATES</p><h3>{rates.length} equipment records</h3></div><input placeholder=\"Search unit, make, or model…\" value={search} onChange={(e) => setSearch(e.target.value)} /></div>\n <div className=\"rate-header\"><span>EQUIPMENT ID & DESCRIPTION</span><span>HOURLY RATE</span></div>\n <div className=\"rate-list\">{rates.map((x) => <div className=\"rate-row\" key={x.label}><span><i>⚙</i><b>{x.label}</b></span><strong>{money(x.rate, 2)}<small>/ hr</small></strong></div>)}</div>\n </section>;\n}\n\n// ---------- Cost code + unit cost ----------\nfunction fourDigitCode(value: string) { return value.match(/^\\s*(\\d{4})/)?.[1] ?? value.split(\" - \")[0]; }\nfunction consolidatedRows(rows: CostRow[]) {\n const grouped = new Map<string, CostRow>();\n for (const row of rows) {\n const code = fourDigitCode(row.costCode); const prior = grouped.get(code);\n if (!prior) { grouped.set(code, { ...row, costCode: `${code} - Consolidated` }); continue; }\n prior.laborHours += row.laborHours; prior.operatorHours += row.operatorHours; prior.foremanHours += row.foremanHours;\n prior.equipmentHours += row.equipmentHours; prior.laborCost += row.laborCost; prior.equipmentCost += row.equipmentCost; prior.totalCost += row.totalCost;\n }\n return [...grouped.values()].sort((a, b) => a.costCode.localeCompare(b.costCode));\n}\nfunction CostCodeTable({ rows, production, setProduction, consolidated, setConsolidated }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidated: boolean; setConsolidated: (v: boolean) => void;\n}) {\n const displayedRows = consolidated ? consolidatedRows(rows) : rows;\n const totalLabor = rows.reduce((a, r) => a + r.laborCost, 0);\n const totalEquipment = rows.reduce((a, r) => a + r.equipmentCost, 0);\n return <section className=\"panel cost-code-panel\">\n <div className=\"cost-code-title\"><div><p>BUSYBUSY ACTUAL COSTS</p><h3>{consolidated ? \"Cost consolidated by 4-digit code\" : \"Cost by code + manual production\"}</h3><button type=\"button\" className={consolidated ? \"consolidate-button active\" : \"consolidate-button\"} onClick={() => setConsolidated(!consolidated)}>{consolidated ? \"✓ Consolidated · Show detail\" : \"Consolidate by 4-digit code\"}</button></div><div><span><small>LABOR</small><b>{money(totalLabor, 2)}</b></span><span><small>EQUIPMENT</small><b>{money(totalEquipment, 2)}</b></span><span className=\"total\"><small>TOTAL ACTUAL COST</small><b>{money(totalLabor + totalEquipment, 2)}</b></span></div></div>\n <div className=\"cost-code-scroll\"><div className=\"cost-code-row cost-code-head\"><span>COST CODE</span><span>LABOR COST</span><span>EQUIPMENT COST</span><span>TOTAL COST</span><span>PRODUCTION</span><span>ACTUAL / TARGET</span></div>\n {displayedRows.length === 0 && <div className=\"empty-state compact\"><b>No actual costs yet</b><span>Upload a BusyBusy Excel time sheet to populate cost codes.</span></div>}\n {displayedRows.map((r) => { const code = consolidated ? fourDigitCode(r.costCode) : r.costCode; const exact = production[code]; const matched = Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; const children = consolidated ? Object.entries(production).filter(([key, value]) => fourDigitCode(key) === code && Number(value.qty) > 0).map(([, value]) => value) : []; const units = [...new Set(children.map((value) => value.unit))]; const rolled = children.length && units.length === 1 ? { qty: String(children.reduce((s, v) => s + Number(v.qty), 0)), unit: units[0], note: \"Rolled up from detailed production\" } : undefined; const p = exact ?? rolled ?? matched ?? { qty: \"\", unit: \"LF\" }; const qty = Number(p.qty); const cpU = qty ? r.totalCost / qty : 0;\n return <div className=\"cost-code-row\" key={r.costCode}><span><b>{r.costCode}</b><small>{r.laborHours + r.operatorHours + r.foremanHours} labor hrs · {r.equipmentHours} equipment hrs{consolidated ? \" · grouped by first 4 digits\" : \"\"}</small></span><span>{money(r.laborCost, 2)}</span><span>{money(r.equipmentCost, 2)}</span><span><b>{money(r.totalCost, 2)}</b></span><span className=\"production-input\"><input type=\"number\" min=\"0\" step=\".01\" placeholder=\"Enter qty\" value={p.qty} onChange={(e) => setProduction({ ...production, [code]: { ...p, qty: e.target.value } })} /><select value={p.unit} onChange={(e) => setProduction({ ...production, [code]: { ...p, unit: e.target.value } })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select>{p.note && <small className=\"scope-note\">{p.note}</small>}</span><span className={qty ? \"unit-cost\" : \"pending-unit\"}>{qty ? <><b>{money(cpU, 2)} <small>/ {p.unit}</small></b>{p.targetCost && <small>Target {money(p.targetCost, 2)} / {p.unit}</small>}</> : <em>Awaiting production</em>}</span></div>;\n })}\n </div>\n </section>;\n}\nfunction UnitCostView({ rows, production, setProduction, consolidateCodes, setConsolidateCodes }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void; consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n}) {\n const measured = rows.filter((r) => { const p = production[r.costCode] ?? Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; return Number(p?.qty) > 0; });\n return <><section className=\"unit-summary\"><article><p>MEASURED COST CODES</p><h2>{measured.length}</h2><span>with installed production</span></article><article><p>AWAITING QUANTITY</p><h2>{rows.length - measured.length}</h2><span>cost codes need LF or EA</span></article><article><p>VISTA TARGETS</p><h2>{Object.values(production).filter((p) => p.targetCost).length}</h2><span>target unit costs loaded</span></article></section>\n <CostCodeTable rows={rows} production={production} setProduction={setProduction} consolidated={consolidateCodes} setConsolidated={setConsolidateCodes} />\n </>;\n}\n\n// ---------- Forecast / reports ----------\nfunction JobCostForecast({ actualCost, settings, setSettings }: { actualCost: number; settings: Forecast; setSettings: (v: Forecast) => void }) {\n const budget = Number(settings.budget), completion = Math.min(100, Math.max(0, Number(settings.completion)));\n const ready = budget > 0 && completion > 0;\n const budgetUsed = budget > 0 ? actualCost / budget * 100 : 0;\n const projected = ready ? actualCost / (completion / 100) : 0;\n const variance = ready ? budget - projected : 0;\n const variancePercent = ready ? Math.abs(variance) / budget * 100 : 0;\n const state = !ready ? \"setup\" : variance >= 0 ? \"on-track\" : variancePercent <= 5 ? \"watch\" : \"over\";\n const label = state === \"setup\" ? \"ADD BUDGET + PROGRESS\" : state === \"on-track\" ? \"ON TRACK\" : state === \"watch\" ? \"WATCH\" : \"PROJECTED OVER BUDGET\";\n return <article className={`panel forecast-card ${state}`}><div className=\"forecast-head\"><div><p>JOB COST FORECAST</p><h3>Budget health + projected finish</h3></div><span>{label}</span></div>\n <div className=\"forecast-inputs\"><label><small>COST BUDGET</small><div><i>$</i><input type=\"number\" min=\"0\" step=\"100\" placeholder=\"Enter budget\" value={settings.budget} onChange={(e) => setSettings({ ...settings, budget: e.target.value })} /></div></label><label><small>ESTIMATED JOB COMPLETION</small><div><input type=\"number\" min=\"0\" max=\"100\" step=\"1\" placeholder=\"0\" value={settings.completion} onChange={(e) => setSettings({ ...settings, completion: e.target.value })} /><i>%</i></div></label></div>\n <div className=\"forecast-bars\"><div><span><small>JOB COMPLETION</small><b>{completion.toFixed(0)}%</b></span><i><em style={{ width: `${completion}%` }} /></i></div><div><span><small>BUDGET SPENT</small><b>{budget > 0 ? `${budgetUsed.toFixed(0)}%` : \"—\"}</b></span><i><em className={budgetUsed > 100 ? \"over\" : undefined} style={{ width: `${Math.min(100, budgetUsed)}%` }} /></i></div></div>\n {ready ? <div className=\"forecast-result\"><span><small>ACTUAL COST TO DATE</small><b>{money(actualCost, 2)}</b></span><span><small>PROJECTED FINAL COST</small><b>{money(projected, 2)}</b></span><span className={variance >= 0 ? \"positive\" : \"negative\"}><small>PROJECTED VARIANCE</small><b>{variance >= 0 ? `${money(variance, 2)} under` : `${money(Math.abs(variance), 2)} over`}</b><em>{variancePercent.toFixed(1)}% of budget</em></span></div> : <div className=\"forecast-empty\"><b>Enter the job’s cost budget and estimated completion.</b><span>The forecast will compare how much work is complete against how much budget has been spent.</span></div>}\n </article>;\n}\nfunction ReportsView({ job, totals, total, rows, production }: { job: Job | null; totals: { hours: number; labor: number; equipment: number }; total: number; rows: CostRow[]; production: Record<string, ProductionValue> }) {\n const ranked = rows.filter((r) => r.totalCost > 0).slice().sort((a, b) => b.totalCost - a.totalCost).slice(0, 5);\n return <section className=\"report-view\">\n <article className=\"panel report-cover\"><p>EXECUTIVE PRODUCTION REPORT</p><h2>{job?.name ?? \"No job selected\"}</h2><span>Current imported labor, equipment, and installed-unit cost summary</span>\n <div className=\"report-kpis\"><div><small>TOTAL COST</small><b>{money(total, 2)}</b></div><div><small>LABOR HOURS</small><b>{totals.hours.toFixed(1)}</b></div><div><small>LABOR COST</small><b>{money(totals.labor, 2)}</b></div><div><small>EQUIPMENT COST</small><b>{money(totals.equipment, 2)}</b></div></div>\n </article>\n <article className=\"panel report-rank\"><div className=\"view-head\"><div><p>TOP COST CODES</p><h3>Largest actual costs</h3></div></div>\n {ranked.map((r, i) => { const p = production[r.costCode]; const qty = Number(p?.qty); return <div className=\"rank-row\" key={r.costCode}><i>{i + 1}</i><span><b>{r.costCode}</b><small>{qty ? `${money(r.totalCost / qty, 2)} / ${p.unit}` : \"Production quantity not entered\"}</small></span><strong>{money(r.totalCost, 2)}</strong></div>; })}\n {ranked.length === 0 && <div className=\"empty-state compact\"><b>No cost data yet</b><span>Upload a BusyBusy time sheet to populate the report.</span></div>}\n <div className=\"report-print\"><button className=\"gold\" onClick={() => window.print()}>⇩ Print / save PDF</button></div>\n </article>\n </section>;\n}\n\nfunction Title({ title, onClick }: { title: string; onClick: () => void }) {\n return <div className=\"title\"><div><h3>{title}</h3></div><button type=\"button\" onClick={onClick}>View details →</button></div>;\n}\nfunction Kpi({ icon, label, value, note, accent = false }: { icon: string; label: string; value: string; note: string; accent?: boolean }) {\n return <article className={accent ? \"accent\" : \"\"}><i>{icon}</i><p>{label}</p><h2>{value}</h2><span>{note}</span></article>;\n}\n\n// ---------- Migration checklist ----------\nfunction MigrationChecklist({ user }: { user: User }) {\n const items: { label: string; done: boolean; detail: string }[] = [\n { label: \"Database migrations\", done: true, detail: \"users, sessions, approved emails, jobs, job labor rates, job data, Monday snapshots, uploaded-file metadata.\" },\n { label: \"Email login + secure sessions\", done: true, detail: \"HTTP-only, Secure, SameSite session cookies; PBKDF2-hashed passwords.\" },\n { label: \"Approved-email allowlist + roles\", done: true, detail: \"admin / user roles enforced on all data APIs.\" },\n { label: \"First-run admin setup\", done: true, detail: \"Owner configures the initial admin before any data loads.\" },\n { label: \"Job creation, selection, editing, deletion\", done: true, detail: \"Admin-managed job CRUD persisted to scoped SQLite.\" },\n { label: \"Per-job labor / operator / foreman rates\", done: true, detail: \"Saved per job with standard defaults.\" },\n { label: \"Vista TXT target import\", done: true, detail: \"Browser-side parsing; targets saved in the job's production map.\" },\n { label: \"BusyBusy Excel labor & equipment import\", done: true, detail: \"SheetJS in the browser; original file stored to scoped Blob Storage.\" },\n { label: \"Cost-code consolidation by first 4 digits\", done: true, detail: \"1201.2 + 1201.3 → 1201; toggle shown in the cost-code table.\" },\n { label: \"Equipment usage, crew size, phase-code views\", done: true, detail: \"Most-used equipment, crew-by-day, expandable phase-code breakdown.\" },\n { label: \"Equipment-move tracking (phase 1101)\", done: true, detail: \"Driver labor + hauling truck cost, no charge for the transported machine.\" },\n { label: \"Manual production + cost-per-unit\", done: true, detail: \"Enter quantities per cost code; actual/target unit-cost compare.\" },\n { label: \"Reports & print/PDF view\", done: true, detail: \"Executive report cover + top cost codes; print stylesheet.\" },\n { label: \"Permanent job-based storage\", done: true, detail: \"Job data in scoped SQLite; original files in scoped Blob Storage, associated by job.\" },\n { label: \"Monday.com\" , done: false, detail: \"Disconnected in Phase 2. Set MONDAY_TOKEN for the Utility Schedule import in a later phase.\" },\n ];\n const doneCount = items.filter((i) => i.done).length;\n return <section className=\"panel migration-panel\">\n <div className=\"view-head\"><div><p>MIGRATION CHECKLIST</p><h3>Val Town staging — {doneCount}/{items.length} complete</h3></div><span className=\"source-pill\">AUTHENTICATED · {user.role.toUpperCase()}</span></div>\n <div className=\"migration-list\">{items.map((item) => <div className={`migration-row ${item.done ? \"done\" : \"\"}`} key={item.label}><i>{item.done ? \"✓\" : \"○\"}</i><span><b>{item.label}</b><small>{item.detail}</small></span></div>)}</div>\n <div className=\"migration-note\"><b>Remaining for Phase 3:</b> set <code>MONDAY_TOKEN</code> on this val and wire the Monday.com Utility Schedule import. Full equipment-rate tail re-import may be needed for production matching.</div>\n </section>;\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// ---------- Types ----------\ntype User = { id: number; email: string; role: \"admin\" | \"user\" };\ntype Job = {\n id: number; name: string; source: string | null; job_number: string | null;\n status: string | null; superintendent: string | null; project_manager: string | null;\n estimator: string | null; location: string | null; jurisdiction: string | null;\n general_contractor: string | null; foreman: string | null; prevailing_wage: string | null;\n permit_number: string | null; schedule_group: string | null; monday_url: string | null;\n};\ntype LaborRates = { labor: number; operator: number; foreman: number };\ntype Entry = { id: number; activity: string; unit: string; qty: number; hours: number; labor: number; equipment: number };\ntype ProductionValue = { qty: string; unit: string; note?: string; targetCost?: number };\ntype CostRow = { costCode: string; laborHours: number; operatorHours: number; foremanHours: number; equipmentHours: number; laborCost: number; equipmentCost: number; totalCost: number };\ntype EquipmentUsage = { name: string; hours: number; cost: number; entries: number };\ntype CrewDay = { date: string; size: number; hours: number };\ntype PhaseUsage = { phaseCode: string; equipment: EquipmentUsage[]; days: CrewDay[] };\ntype EquipmentMove = { id: string; date: string; phaseCode: string; movedEquipment: string; haulingEquipment: string; driver: string; description: string; hours: number; laborCost: number; haulingCost: number; cost: number; needsReview: boolean };\ntype Forecast = { budget: string; completion: string };\ntype SavedJobData = {\n entries: Entry[]; production: Record<string, ProductionValue>; actualRows: CostRow[];\n equipmentUsage: EquipmentUsage[]; crewDays: CrewDay[]; phaseUsage: PhaseUsage[];\n equipmentMoves: EquipmentMove[]; forecast: Forecast;\n};\ntype EquipmentRate = { label: string; rate: number };\ntype Bootstrap = { state: \"setup\" } | { state: \"login\" } | { state: \"authed\"; user: User };\ntype Section = \"overview\" | \"daily\" | \"labor\" | \"equipment\" | \"unit-cost\" | \"reports\" | \"migration\" | \"jobs\";\n\nconst DEFAULT_RATES: LaborRates = { labor: 45, operator: 55, foreman: 65 };\nconst EMPTY_FORECAST: Forecast = { budget: \"\", completion: \"\" };\nconst EMPTY_DATA: SavedJobData = {\n entries: [], production: {}, actualRows: [], equipmentUsage: [], crewDays: [],\n phaseUsage: [], equipmentMoves: [], forecast: { ...EMPTY_FORECAST },\n};\nconst UNITS = [\"LF\", \"EA\", \"CY\", \"SF\", \"TON\", \"LS\"];\nconst money = (n: number, d = 0) =>\n n.toLocaleString(\"en-US\", { style: \"currency\", currency: \"USD\", minimumFractionDigits: d, maximumFractionDigits: d });\n\nconst NAV: [Section, string, string][] = [\n [\"overview\", \"▦\", \"Overview\"],\n [\"daily\", \"▥\", \"Daily Production\"],\n [\"labor\", \"◫\", \"Labor & Rates\"],\n [\"equipment\", \"⚙\", \"Equipment\"],\n [\"unit-cost\", \"◎\", \"Cost per Unit\"],\n [\"reports\", \"↗\", \"Reports\"],\n [\"migration\", \"✓\", \"Migration\"],\n];\n\nasync function api(path: string, init?: RequestInit): Promise<any> {\n const res = await fetch(path, init ?? { headers: { \"content-type\": \"application/json\" } });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error ?? \"Request failed\");\n return data;\n}\n\nexport function App() {\n const [bootstrap, setBootstrap] = useState<Bootstrap | null>(null);\n useEffect(() => {\n api(\"/api/bootstrap\").then((d) => setBootstrap(d)).catch(() => setBootstrap({ state: \"login\" }));\n }, []);\n if (!bootstrap) {\n return <div className=\"auth-shell\"><div className=\"auth-card\"><div className=\"brand-mark\">ND<span>X</span></div><p className=\"auth-loading\">Loading command center…</p></div></div>;\n }\n if (bootstrap.state === \"setup\") return <Setup onDone={() => setBootstrap({ state: \"login\" })} />;\n if (bootstrap.state === \"login\") return <Login onAuthed={(u) => setBootstrap({ state: \"authed\", user: u })} />;\n return <Dashboard user={bootstrap.user} />;\n}\n\nfunction Setup({ onDone }: { onDone: () => void }) {\n const [email, setEmail] = useState(\"\"); const [password, setPassword] = useState(\"\");\n const [confirm, setConfirm] = useState(\"\"); const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\");\n if (password.length < 8) return setStatus(\"Password must be at least 8 characters.\");\n if (password !== confirm) return setStatus(\"Passwords do not match.\");\n setBusy(true);\n try { await api(\"/api/setup\", { method: \"POST\", body: JSON.stringify({ email, password }) }); setStatus(\"Admin created. Sign in below.\"); onDone(); }\n catch (err) { setStatus(err instanceof Error ? err.message : \"Setup failed\"); } finally { setBusy(false); }\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">FIRST-RUN SETUP</p><h1>Configure the command center</h1>\n <p className=\"auth-sub\">Set up the initial administrator. Their email is added to the approved allowlist with the <b>admin</b> role. No real job data is loaded yet.</p>\n <label>ADMIN EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" /></label>\n <label>PASSWORD<input type=\"password\" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"At least 8 characters\" /></label>\n <label>CONFIRM PASSWORD<input type=\"password\" required value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder=\"Repeat password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy}>{busy ? \"Creating admin…\" : \"Create admin & continue\"}</button>\n </form></div>\n );\n}\n\nfunction Login({ onAuthed }: { onAuthed: (u: User) => void }) {\n const [view, setView] = useState<\"login\" | \"forgot\">(\"login\");\n const [email, setEmail] = useState(\"\"); const [password, setPassword] = useState(\"\");\n const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\"); setBusy(true);\n try { const d = await api(\"/api/login\", { method: \"POST\", body: JSON.stringify({ email, password }) }); onAuthed(d.user); }\n catch (err) { setStatus(err instanceof Error ? err.message : \"Login failed\"); } finally { setBusy(false); }\n }\n if (view === \"forgot\") {\n return <ForgotPassword onBack={() => setView(\"login\")} initialEmail={email} />;\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">PRODUCTION COMMAND CENTER</p><h1>Sign in</h1>\n <p className=\"auth-sub\">Access is restricted to approved emails. Your session is secured with an HTTP-only cookie.</p>\n <label>EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" /></label>\n <label>PASSWORD<input type=\"password\" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"Your password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy}>{busy ? \"Signing in…\" : \"Sign in\"}</button>\n <p className=\"auth-forgot\"><button type=\"button\" className=\"linklike\" onClick={() => setView(\"forgot\")}>Forgot password?</button></p>\n </form></div>\n );\n}\n\nfunction ForgotPassword({ onBack, initialEmail }: { onBack: () => void; initialEmail: string }) {\n const [email, setEmail] = useState(initialEmail);\n const [code, setCode] = useState(\"\");\n const [password, setPassword] = useState(\"\"); const [confirm, setConfirm] = useState(\"\");\n const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\"); setBusy(true);\n try {\n await api(\"/api/recover\", { method: \"POST\", body: JSON.stringify({ email, code, password, confirm }) });\n setCode(\"\"); setPassword(\"\"); setConfirm(\"\"); setDone(true);\n } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to reset the password\"); }\n finally { setBusy(false); }\n }\n if (done) {\n return (\n <div className=\"auth-shell\"><div className=\"auth-card\">\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">PASSWORD RESET</p><h1>Password updated</h1>\n <p className=\"auth-sub\">Your administrator password was reset and every open session was signed out. You can now sign in with your new password.</p>\n <button className=\"gold\" onClick={onBack}>Back to sign in</button>\n </div></div>\n );\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">ADMINISTRATOR RECOVERY</p><h1>Reset your password</h1>\n <p className=\"auth-sub\">Enter your administrator email and the recovery code shared with you, then choose a new password. All signed-in sessions will be ended.</p>\n <label>ADMINISTRATOR EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" autoComplete=\"username\" /></label>\n <label>RECOVERY CODE<input type=\"password\" required value={code} onChange={(e) => setCode(e.target.value)} placeholder=\"Enter the recovery code\" autoComplete=\"off\" /></label>\n <label>NEW PASSWORD<input type=\"password\" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"At least 8 characters\" autoComplete=\"new-password\" /></label>\n <label>CONFIRM NEW PASSWORD<input type=\"password\" required value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder=\"Repeat new password\" autoComplete=\"new-password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy || password.length < 8 || password !== confirm}>{busy ? \"Resetting…\" : \"Reset password\"}</button>\n <p className=\"auth-forgot\"><button type=\"button\" className=\"linklike\" onClick={onBack} disabled={busy}>Back to sign in</button></p>\n </form></div>\n );\n}\n\n// ---------- Dashboard ----------\nfunction Dashboard({ user }: { user: User }) {\n const [section, setSection] = useState<Section>(\"overview\");\n const [jobs, setJobs] = useState<Job[]>([]);\n const [jobId, setJobId] = useState<number | null>(null);\n const [rates, setRates] = useState<LaborRates>(DEFAULT_RATES);\n const [draftRates, setDraftRates] = useState<LaborRates>(DEFAULT_RATES);\n const [rateStatus, setRateStatus] = useState(\"\");\n const [data, setData] = useState<SavedJobData>(EMPTY_DATA);\n const [loadedId, setLoadedId] = useState(\"\");\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n const [rateSearch, setRateSearch] = useState(\"\");\n const [consolidateCodes, setConsolidateCodes] = useState(false);\n const [showPhaseCodes, setShowPhaseCodes] = useState(false);\n const [mondayConnected, setMondayConnected] = useState(false);\n const [mondayStatus, setMondayStatus] = useState(\"\");\n const [importStatus, setImportStatus] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const [editOpen, setEditOpen] = useState(false);\n const [deleteOpen, setDeleteOpen] = useState(false);\n const targetFile = useRef<HTMLInputElement>(null);\n const timeFile = useRef<HTMLInputElement>(null);\n\n const activeJob = jobs.find((j) => j.id === jobId) ?? null;\n\n // Load jobs + equipment rates + monday status\n useEffect(() => {\n api(\"/api/jobs\").then((d) => { setJobs(d.jobs ?? []); if (d.jobs?.length && jobId === null) setJobId(d.jobs[0].id); }).catch(() => {});\n api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {});\n api(\"/api/monday-connection\").then((d) => { setMondayConnected(Boolean(d.connected)); setMondayStatus(d.message ?? \"Monday.com not connected\"); }).catch(() => setMondayStatus(\"Connection unavailable\"));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Load rates for the active job\n useEffect(() => {\n if (!activeJob?.id) { setRates(DEFAULT_RATES); setDraftRates(DEFAULT_RATES); setRateStatus(\"\"); return; }\n let active = true;\n api(`/api/jobs/${activeJob.id}/rates`).then((d) => {\n if (!active) return;\n const next = d.rates ?? DEFAULT_RATES;\n setRates(next); setDraftRates(next); setRateStatus(d.isDefault ? \"Using standard rates\" : \"Saved job rates loaded\");\n }).catch(() => active && setRateStatus(\"Using standard rates\"));\n return () => { active = false; };\n }, [activeJob?.id]);\n\n // Load saved job data when the active job changes\n useEffect(() => {\n const id = activeJob?.id;\n if (!id) { setLoadedId(\"\"); setData(EMPTY_DATA); return; }\n let active = true;\n api(`/api/jobs/${id}/data`).then((r) => {\n if (!active) return;\n const d = r.data as SavedJobData;\n setData({\n entries: d?.entries ?? [], production: d?.production ?? {}, actualRows: d?.actualRows ?? [],\n equipmentUsage: d?.equipmentUsage ?? [], crewDays: d?.crewDays ?? [], phaseUsage: d?.phaseUsage ?? [],\n equipmentMoves: d?.equipmentMoves ?? [], forecast: d?.forecast ?? { ...EMPTY_FORECAST },\n });\n setLoadedId(String(id)); setImportStatus(d ? \"Saved job data loaded\" : \"New job — ready for uploads\");\n }).catch(() => { if (active) { setData(EMPTY_DATA); setLoadedId(String(id)); setImportStatus(\"Unable to load saved job data\"); } });\n return () => { active = false; };\n }, [activeJob?.id]);\n\n // Autosave job data (debounced)\n useEffect(() => {\n if (!activeJob?.id || loadedId !== String(activeJob.id)) return;\n const timer = window.setTimeout(() => {\n api(`/api/jobs/${activeJob.id}/data`, { method: \"PUT\", body: JSON.stringify({ data }) })\n .then(() => {}) .catch(() => {});\n }, 700);\n return () => window.clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeJob?.id, loadedId, JSON.stringify(data)]);\n\n async function saveLaborRates(e: React.FormEvent) {\n e.preventDefault(); if (!activeJob?.id) return; setRateStatus(\"Saving…\");\n try {\n const d = await api(`/api/jobs/${activeJob.id}/rates`, { method: \"PUT\", body: JSON.stringify(draftRates) });\n setRates(d.rates); setDraftRates(d.rates); setRateStatus(`Saved for ${activeJob.name}`);\n } catch (err) { setRateStatus(err instanceof Error ? err.message : \"Unable to save\"); }\n }\n\n async function createJob(name: string) {\n setStatus(\"\"); try { const d = await api(\"/api/jobs\", { method: \"POST\", body: JSON.stringify({ name }) }); setJobs((v) => [...v, d.job]); setJobId(d.job.id); setStatus(`Job \"${name}\" created.`); } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to create job\"); }\n }\n async function updateJob(id: number, fields: Record<string, string>): Promise<boolean> {\n setStatus(\"\");\n try {\n const d = await api(`/api/jobs/${id}`, { method: \"PUT\", body: JSON.stringify(fields) });\n setJobs((v) => v.map((j) => (j.id === d.job.id ? d.job : j)));\n setStatus(`\"${d.job.name}\" saved.`);\n return true;\n } catch (err) {\n setStatus(err instanceof Error ? err.message : \"Unable to save job\");\n return false;\n }\n }\n async function deleteActiveJob() {\n if (!activeJob?.id) return; setStatus(\"\");\n try { await api(`/api/jobs/${activeJob.id}`, { method: \"DELETE\" }); setJobs((v) => v.filter((j) => j.id !== activeJob.id)); setJobId((x) => x === activeJob.id ? null : x); setDeleteOpen(false); setStatus(\"Job deleted.\"); } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to delete job\"); }\n }\n\n // Import handlers\n async function saveOriginalFile(file: File, kind: \"vista-target\" | \"timesheet\") {\n if (!activeJob?.id) throw new Error(\"Select a job before uploading\");\n const body = new FormData(); body.append(\"kind\", kind); body.append(\"file\", file);\n const r = await fetch(`/api/jobs/${activeJob.id}/files`, { method: \"POST\", body });\n if (!r.ok) { const j = await r.json().catch(() => ({})); throw new Error(j.error ?? \"Unable to save original file\"); }\n }\n\n async function importTargets(file: File) {\n const text = await file.text();\n const lines = text.split(/\\r?\\n/).map((x) => x.trim()).filter(Boolean);\n const next: Record<string, ProductionValue> = {};\n const items = new Map<string, { qty: string; unit: string; targetCost: number; name: string }>();\n for (const line of lines) {\n const c = csv(line);\n if (c[0] === \"1\" && c[4]) items.set(c[4], { qty: c[6], unit: c[7], targetCost: Number(c[8]), name: c[5] });\n if (c[0] === \"2\" && items.has(c[2])) {\n const item = items.get(c[2])!;\n next[`${c[3]}.${c[2]} - ${item.name}`] = { qty: item.qty, unit: item.unit, note: \"Imported from Vista estimate\", targetCost: item.targetCost };\n }\n }\n if (!Object.keys(next).length) {\n for (const line of lines) {\n const code = line.match(/\\b\\d{3,5}(?:\\.\\d+)+\\b/)?.[0];\n const unit = line.match(/\\b(LF|EA|CY|SF|TON|LS)\\b/i)?.[0]?.toUpperCase();\n if (code && unit) next[code] = { qty: \"\", unit, note: \"Imported from Vista estimate\" };\n }\n }\n setData((d) => ({ ...d, production: { ...d.production, ...next } }));\n try { await saveOriginalFile(file, \"vista-target\"); setImportStatus(`${Object.keys(next).length} target items imported · original file saved`); }\n catch (err) { setImportStatus(`${Object.keys(next).length} target items imported · ${err instanceof Error ? err.message : \"file not saved\"}`); }\n }\n\n async function importTimeSheet(file: File) {\n const XLSX = await loadXLSX();\n const workbook = XLSX.read(await file.arrayBuffer());\n const rows = XLSX.utils.sheet_to_json<Record<string, unknown>>(workbook.Sheets[workbook.SheetNames[0]], { defval: \"\", raw: true });\n const grouped = new Map<string, CostRow>();\n const equipmentByName = new Map<string, EquipmentUsage>();\n const crewByDay = new Map<string, { workers: Set<string>; hours: number }>();\n const phases = new Map<string, { equipment: Map<string, EquipmentUsage>; crew: Map<string, { workers: Set<string>; hours: number }> }>();\n const toHours = (v: unknown) => typeof v === \"number\" ? (v <= 1 ? v * 24 : v) : String(v).split(\":\").reduce((a, x, i) => a + Number(x) / (i ? 60 : 1), 0);\n const toDate = (v: unknown) => typeof v === \"number\" ? new Date(Math.round((v - 25569) * 86400000)).toISOString().slice(0, 10) : (String(v).match(/^\\d{4}-\\d{2}-\\d{2}/)?.[0] ?? \"\");\n const moves: EquipmentMove[] = [];\n let pricedEquipmentEntries = 0, unmatchedEquipmentEntries = 0;\n const erates = equipmentRates;\n for (const row of rows) {\n const rawCode = String(row[\"Cost Code\"] || \"Uncoded\");\n const match = rawCode.match(/(\\d{3,5})(?:\\.\\s*(\\d+))?/);\n const key = match ? `${match[1]}${match[2] ? `.` + match[2] : \"\"} - ${rawCode.replace(/^.*? - /, \"\")}` : \"Uncoded\";\n const h = toHours(row[\"Total\"]); if (!h) continue;\n const equip = String(row[\"Equipment\"] || \"\").replace(/\\s+/g, \" \").trim();\n const equipmentId = equip.match(/^(\\d{3,4})\\b/)?.[1];\n const matchedEquipment = erates.find((x) => x.label.match(/^(\\d{3,4})\\b/)?.[1] === equipmentId);\n const foreman = /foreman/i.test(rawCode);\n const labor = /^00\\b|laborer/i.test(equip);\n const operator = !foreman && !labor;\n const date = toDate(row[\"Start\"] || row[\"Time Off Date\"]);\n const worker = String(row[\"Employee ID\"] || `${row[\"First Name\"] || \"\"} ${row[\"Last Name\"] || \"\"}`).trim();\n const driver = `${row[\"First Name\"] || \"\"} ${row[\"Last Name\"] || \"\"}`.replace(/\\s+/g, \" \").trim() || worker;\n if (/^\\s*1101\\b/i.test(rawCode) || /mobilization/i.test(rawCode)) {\n const description = String(row[\"Description\"] || \"\").replace(/\\s+/g, \" \").trim();\n const describedIds = description.match(/\\b\\d{3,4}\\b/g) ?? [];\n const movedRate = describedIds.map((id) => erates.find((rate) => rate.label.match(/^\\d{3,4}\\b/)?.[0] === id && id !== equipmentId)).find(Boolean);\n const machineWords = /\\b(backhoe|excavator|loader|skid\\s*steer|dozer|roller|trencher|forklift|grader|crane|compactor|equipment|machine)\\b/i;\n if (movedRate || machineWords.test(description)) {\n const laborRate = foreman ? rates.foreman : labor ? rates.labor : rates.operator;\n const laborMoveCost = h * laborRate;\n const haulingCost = h * (matchedEquipment?.rate ?? 0);\n moves.push({ id: `${date}-${worker}-${moves.length}`, date, phaseCode: key, movedEquipment: movedRate?.label ?? (description || \"Equipment not identified\"), haulingEquipment: equip || \"Hauling unit not assigned\", driver, description, hours: h, laborCost: laborMoveCost, haulingCost, cost: laborMoveCost + haulingCost, needsReview: !movedRate || !matchedEquipment });\n }\n }\n if (date && worker) { const day = crewByDay.get(date) ?? { workers: new Set<string>(), hours: 0 }; day.workers.add(worker); day.hours += h; crewByDay.set(date, day); }\n if (equip && !labor) { const prior = equipmentByName.get(equip) ?? { name: equip, hours: 0, cost: 0, entries: 0 }; prior.hours += h; prior.cost += h * (matchedEquipment?.rate ?? 0); prior.entries++; equipmentByName.set(equip, prior); }\n const phase = phases.get(key) ?? { equipment: new Map<string, EquipmentUsage>(), crew: new Map<string, { workers: Set<string>; hours: number }>() };\n if (date && worker) { const day = phase.crew.get(date) ?? { workers: new Set<string>(), hours: 0 }; day.workers.add(worker); day.hours += h; phase.crew.set(date, day); }\n if (equip && !labor) { const prior = phase.equipment.get(equip) ?? { name: equip, hours: 0, cost: 0, entries: 0 }; prior.hours += h; prior.cost += h * (matchedEquipment?.rate ?? 0); prior.entries++; phase.equipment.set(equip, prior); }\n phases.set(key, phase);\n const current = grouped.get(key) ?? { costCode: key, laborHours: 0, operatorHours: 0, foremanHours: 0, equipmentHours: 0, laborCost: 0, equipmentCost: 0, totalCost: 0 };\n if (foreman) { current.foremanHours += h; current.laborCost += h * rates.foreman; }\n else if (labor) { current.laborHours += h; current.laborCost += h * rates.labor; }\n else { current.operatorHours += h; current.laborCost += h * rates.operator; }\n if (matchedEquipment) { current.equipmentHours += h; current.equipmentCost += h * matchedEquipment.rate; if (matchedEquipment.rate > 0) pricedEquipmentEntries++; }\n else if (operator && equip) unmatchedEquipmentEntries++;\n current.totalCost = current.laborCost + current.equipmentCost;\n grouped.set(key, current);\n }\n const imported = [...grouped.values()].sort((a, b) => b.totalCost - a.totalCost);\n const equipmentUsage = [...equipmentByName.values()].sort((a, b) => b.hours - a.hours);\n const crewDays = [...crewByDay.entries()].map(([date, value]) => ({ date, size: value.workers.size, hours: value.hours })).sort((a, b) => a.date.localeCompare(b.date));\n const phaseUsage = [...phases.entries()].map(([phaseCode, value]) => ({ phaseCode, equipment: [...value.equipment.values()].sort((a, b) => b.hours - a.hours), days: [...value.crew.entries()].map(([date, day]) => ({ date, size: day.workers.size, hours: day.hours })).sort((a, b) => a.date.localeCompare(b.date)) })).sort((a, b) => a.phaseCode.localeCompare(b.phaseCode));\n const equipmentMoves = moves.sort((a, b) => a.date.localeCompare(b.date));\n setData((d) => ({\n ...d,\n actualRows: imported,\n equipmentUsage,\n crewDays,\n phaseUsage,\n equipmentMoves,\n entries: [{ id: Date.now(), activity: `${file.name} import`, unit: \"TOTAL\", qty: 0, hours: imported.reduce((a, r) => a + r.laborHours + r.operatorHours + r.foremanHours, 0), labor: imported.reduce((a, r) => a + r.laborCost, 0), equipment: imported.reduce((a, r) => a + r.equipmentCost, 0) }],\n }));\n try { await saveOriginalFile(file, \"timesheet\"); setImportStatus(`${rows.length} time entries · ${pricedEquipmentEntries} equipment entries priced · original file saved${unmatchedEquipmentEntries ? ` · ${unmatchedEquipmentEntries} unmatched` : \"\"}`); }\n catch (err) { setImportStatus(`${rows.length} time entries imported · ${err instanceof Error ? err.message : \"file not saved\"}`); }\n }\n\n const totals = useMemo(() => data.entries.reduce((a, e) => ({ hours: a.hours + e.hours, labor: a.labor + e.labor, equipment: a.equipment + e.equipment }), { hours: 0, labor: 0, equipment: 0 }), [data.entries]);\n const total = totals.labor + totals.equipment;\n const actualCostTotal = data.actualRows.reduce((sum, r) => sum + r.totalCost, 0) || total;\n const c900 = data.actualRows.find((r) => r.costCode.startsWith(\"1201.6\")) ?? data.actualRows[0] ?? { costCode: \"\", totalCost: 0, laborCost: 0, equipmentCost: 0, laborHours: 0, operatorHours: 0, foremanHours: 0, equipmentHours: 0 };\n const lfQty = Number(data.production[c900.costCode]?.qty || 0);\n const cpu = lfQty > 0 ? c900.totalCost / lfQty : 0;\n const filteredRates = equipmentRates.filter((x) => x.label.toLowerCase().includes(rateSearch.toLowerCase()));\n\n const sectionCopy: Record<Section, [string, string]> = {\n overview: [\"Good morning, Whitney.\", \"Here’s how your crews are performing today.\"],\n daily: [\"Daily production\", \"Review field entries and add today’s installed quantities.\"],\n labor: [\"Labor rate settings\", \"Set standard or prevailing-wage rates for each job.\"],\n equipment: [\"Equipment rate book\", \"Hourly operating rates used for production costing.\"],\n \"unit-cost\": [\"Cost per unit\", \"Compare actual cost against Vista targets by cost code.\"],\n reports: [\"Executive reports\", \"A concise production and cost summary for leadership.\"],\n migration: [\"Migration checklist\", \"Steps to bring the live Command Center into this Val Town version.\"],\n jobs: [\"Jobs & settings\", \"Create, edit, and manage utility-schedule jobs.\"],\n };\n\n async function logout() { await fetch(\"/api/logout\", { method: \"POST\" }); window.location.reload(); }\n\n return (\n <div className=\"shell\">\n <aside>\n <div className=\"brand\"><i>ND<span>X</span></i><span><b>NDX Command Center</b><small>PRODUCTION CONTROL</small></span></div>\n <nav>\n {NAV.map(([id, icon, label]) => (\n <button key={id} className={section === id ? \"active\" : \"\"} onClick={() => setSection(id)}><span>{icon}</span>{label}</button>\n ))}\n </nav>\n <div className=\"job\">\n <small>ACTIVE JOB</small>\n <b>{activeJob?.name ?? \"No job created\"}</b>\n <em>{activeJob?.source === \"monday\" ? \"● Utility Schedule\" : activeJob ? \"● Ready\" : \"Start clean\"}</em>\n </div>\n <div className=\"user\"><i>{user.email.slice(0, 2).toUpperCase()}</i><span><b>{user.email}</b><small>{user.role === \"admin\" ? \"Administrator\" : \"User\"}</small></span></div>\n </aside>\n\n <main>\n <header>\n <div><p>PRODUCTION COMMAND CENTER</p><h1>{sectionCopy[section][0]}</h1><span>{sectionCopy[section][1]}</span></div>\n <div className=\"header-actions\">\n {jobs.length > 0 && (\n <label className=\"top-job-picker\">\n <small>ACTIVE JOB · UTILITY SCHEDULE</small>\n <select value={jobId ?? \"\"} onChange={(e) => setJobId(Number(e.target.value))}>\n {jobs.map((j) => <option key={j.id} value={j.id}>{j.job_number ? `${j.job_number} · ` : \"\"}{j.name}</option>)}\n </select>\n </label>\n )}\n {user.role === \"admin\" && <button onClick={() => setSection(\"jobs\")}>＋ Manage jobs</button>}\n <button className=\"logout\" onClick={logout}>Sign out</button>\n </div>\n </header>\n\n {status && <div className=\"status-line\">● {status}</div>}\n\n <section className=\"monday-strip not-connected\">\n <div><p>MONDAY.COM</p><b>{mondayConnected ? \"Connected\" : \"Monday.com not connected\"}</b><span>{mondayStatus}</span></div>\n <button disabled onClick={() => {}}>↻ Refresh unavailable</button>\n </section>\n\n {section === \"overview\" && (\n <Overview\n job={activeJob} total={total} totals={totals} cpu={cpu} lfQty={lfQty}\n rows={data.actualRows} production={data.production} setProduction={(p) => setData((d) => ({ ...d, production: p }))}\n consolidateCodes={consolidateCodes} setConsolidateCodes={setConsolidateCodes}\n usage={data.equipmentUsage} days={data.crewDays} phases={data.phaseUsage}\n showPhaseCodes={showPhaseCodes} setShowPhaseCodes={setShowPhaseCodes} moves={data.equipmentMoves}\n forecast={data.forecast} setForecast={(f) => setData((d) => ({ ...d, forecast: f }))}\n importStatus={importStatus} mondayStatus={mondayStatus} onOpenImport={() => setSection(\"overview\")}\n targetFileRef={targetFile} timeFileRef={timeFile} onImportTargets={importTargets} onImportTimeSheet={importTimeSheet}\n onOpenAdd={() => setSection(\"daily\")}\n />\n )}\n {section === \"daily\" && <DailyProduction entries={data.entries} rates={rates} onAdd={() => { }} onAddEntry={(entry) => setData((d) => ({ ...d, entries: [...d.entries, entry] }))} />}\n {section === \"labor\" && <LaborRateSettings job={activeJob} rates={draftRates} setRates={setDraftRates} status={rateStatus} onSave={saveLaborRates} />}\n {section === \"equipment\" && (\n <>\n <EquipmentMovesPanel moves={data.equipmentMoves} />\n <OperationsUsageView usage={data.equipmentUsage} days={data.crewDays} phases={data.phaseUsage} showPhases={showPhaseCodes} setShowPhases={setShowPhaseCodes} />\n <RateBook search={rateSearch} setSearch={setRateSearch} rates={filteredRates} />\n </>\n )}\n {section === \"unit-cost\" && (\n <UnitCostView rows={data.actualRows} production={data.production} setProduction={(p) => setData((d) => ({ ...d, production: p }))} consolidateCodes={consolidateCodes} setConsolidateCodes={setConsolidateCodes} />\n )}\n {section === \"reports\" && <ReportsView job={activeJob} totals={totals} total={total} rows={data.actualRows} production={data.production} />}\n {section === \"migration\" && <MigrationChecklist user={user} />}\n {section === \"jobs\" && (\n <JobsManager user={user} jobs={jobs} activeJob={activeJob} onCreate={createJob} onUpdate={updateJob} onDeleteConfirm={() => setDeleteOpen(true)} />\n )}\n </main>\n\n {deleteOpen && activeJob && (\n <div className=\"backdrop\" onMouseDown={() => setDeleteOpen(false)}>\n <form className=\"create-job-form\" onSubmit={(e) => { e.preventDefault(); deleteActiveJob(); }} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DELETE PROJECT</p><h2>Delete \"{activeJob.name}\"?</h2></div><button type=\"button\" onClick={() => setDeleteOpen(false)}>×</button></div>\n <p className=\"job-help\">This permanently removes the job, its saved data, and uploaded files. This cannot be undone.</p>\n <div className=\"actions\"><button type=\"button\" onClick={() => setDeleteOpen(false)}>Cancel</button><button className=\"danger\">Delete job</button></div>\n </form>\n </div>\n )}\n </div>\n );\n}\n\n// ---------- csv + xlsx loader ----------\nfunction csv(line: string): string[] {\n const out: string[] = []; const re = /(?:^|,)(\"(?:[^\"]|\"\")*\"|[^,]*)/g; let m;\n while ((m = re.exec(line))) out.push(m[1].replace(/^\"|\"$/g, \"\").replaceAll('\"\"', '\"'));\n return out;\n}\nasync function loadXLSX(): Promise<any> {\n return await import(\"https://esm.sh/xlsx@0.18.5\");\n}\n\n// ---------- Overview ----------\nfunction Overview(props: {\n job: Job | null; total: number; totals: { hours: number; labor: number; equipment: number }; cpu: number; lfQty: number;\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhaseCodes: boolean; setShowPhases: (v: boolean) => void; moves: EquipmentMove[];\n forecast: Forecast; setForecast: (v: Forecast) => void; importStatus: string; mondayStatus: string; onOpenImport: () => void;\n targetFileRef: React.RefObject<HTMLInputElement>; timeFileRef: React.RefObject<HTMLInputElement>;\n onImportTargets: (f: File) => void; onImportTimeSheet: (f: File) => void; onOpenAdd: () => void;\n}) {\n return (\n <>\n <section className=\"import-strip\">\n <div><p>JOB DATA IMPORTS</p><b>{props.job ? `Load targets and actual hours for ${props.job.name}` : \"Create a job to begin importing\"}</b></div>\n <button disabled={!props.job} onClick={() => props.targetFileRef.current?.click()}>↑ Upload Vista target TXT</button>\n <button className=\"gold\" disabled={!props.job} onClick={() => props.timeFileRef.current?.click()}>↑ Upload labor & equipment Excel</button>\n <input ref={props.targetFileRef} hidden type=\"file\" accept=\".txt,text/plain\" onChange={(e) => e.target.files?.[0] && props.onImportTargets(e.target.files[0])} />\n <input ref={props.timeFileRef} hidden type=\"file\" accept=\".xlsx,.xls\" onChange={(e) => e.target.files?.[0] && props.onImportTimeSheet(e.target.files[0])} />\n </section>\n\n <section className=\"filters\">\n <label>DATA SOURCE<select><option>Manual entries</option></select></label>\n <span>● {props.importStatus || props.mondayStatus || \"Utility Schedule mapped\"}</span>\n </section>\n\n <section className=\"kpis\">\n <Kpi icon=\"$\" label=\"TOTAL COST · IMPORTED\" value={money(props.total)} note={props.totals.hours || \"No time sheet imported\"} />\n <Kpi icon=\"◷\" label=\"LABOR COST\" value={money(props.totals.labor)} note={props.totals.hours + \" labor hours\"} />\n <Kpi icon=\"⚙\" label=\"EQUIPMENT COST\" value={money(props.totals.equipment)} note={(props.total > 0 ? Math.round(props.totals.equipment / props.total * 100) : 0) + \"% of total cost\"} />\n {props.cpu > 0 && <Kpi icon=\"◎\" label='ACTUAL COST / LF · 8\" C900' value={money(props.cpu, 2)} note={props.lfQty + \" LF installed\"} accent />}\n </section>\n\n <OperationsUsageView usage={props.usage} days={props.days} phases={props.phases} showPhases={props.showPhaseCodes} setShowPhases={props.setShowPhases} />\n <EquipmentMovesPanel moves={props.moves} />\n\n <section className=\"split\">\n <article className=\"panel\"><Title title=\"Cost follows installed quantity\" onClick={props.onOpenAdd} />\n <div className=\"chart\">{[0, 0, 0, 0, 0].map((v, i) => <div className=\"bar\" key={i}><b>—</b><span><i style={{ height: v + \"%\" }} /><em style={{ height: v + \"%\" }} /></span><small>{[\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\"][i]}</small></div>)}</div>\n </article>\n <JobCostForecast actualCost={props.rows.reduce((s, r) => s + r.totalCost, 0)} settings={props.forecast} setSettings={props.setForecast} />\n </section>\n\n <CostCodeTable rows={props.rows} production={props.production} setProduction={props.setProduction} consolidated={props.consolidateCodes} setConsolidated={props.setConsolidateCodes} />\n </>\n );\n}\n\n// ---------- Jobs Manager ----------\n// The \"Edit\" action swaps to a full-page inline editor (no overlay, backdrop,\n// body scroll lock, or nested scrolling container). The browser's regular page\n// scrollbar scrolls through every field.\nfunction JobsManager({ user, jobs, activeJob, onCreate, onUpdate, onDeleteConfirm }: {\n user: User; jobs: Job[]; activeJob: Job | null; onCreate: (name: string) => void;\n onUpdate: (id: number, fields: Record<string, string>) => Promise<boolean>; onDeleteConfirm: () => void;\n}) {\n const [name, setName] = useState(\"\");\n const [editing, setEditing] = useState<Job | null>(null);\n const [form, setForm] = useState<Record<string, string>>({});\n const [saving, setSaving] = useState(false);\n const fields: [string, string][] = [\n [\"name\", \"Job name\"], [\"job_number\", \"Job #\"], [\"status\", \"Status\"], [\"superintendent\", \"Superintendent\"],\n [\"project_manager\", \"Project manager\"], [\"foreman\", \"Foreman\"], [\"location\", \"Location\"],\n [\"jurisdiction\", \"Jurisdiction\"], [\"general_contractor\", \"General contractor\"],\n [\"prevailing_wage\", \"Prevailing wage\"], [\"permit_number\", \"Permit #\"], [\"schedule_group\", \"Schedule group\"],\n ];\n\n useEffect(() => {\n if (!editing) return;\n const f: Record<string, string> = {};\n for (const [k] of fields) f[k] = String((editing as any)[k] ?? \"\");\n setForm(f);\n setSaving(false);\n }, [editing]);\n\n async function handleSave(e: React.FormEvent) {\n e.preventDefault();\n if (!editing) return;\n setSaving(true);\n try {\n const ok = await onUpdate(editing.id, form);\n if (ok) setEditing(null); // back to the job list; the status line confirms\n } finally {\n setSaving(false);\n }\n }\n\n if (editing) {\n return (\n <section className=\"panel jobs-panel job-editor\">\n <div className=\"view-head\">\n <div><p>EDIT PROJECT</p><h3>Edit — {editing.name}</h3></div>\n </div>\n <form className=\"job-editor-form\" onSubmit={handleSave}>\n <div className=\"job-editor-toolbar top\">\n <span className=\"job-editor-meta\">Editing <b>{editing.name}</b> — changes apply to this job only.</span>\n <button type=\"button\" onClick={() => setEditing(null)} disabled={saving}>Cancel</button>\n <button className=\"gold\" type=\"submit\" disabled={saving}>{saving ? \"Saving…\" : \"Save Changes\"}</button>\n </div>\n <div className=\"form-grid job-editor-grid\">\n {fields.map(([k, label]) => (\n <label className={k === \"name\" ? \"wide\" : \"\"} key={k}>\n {label.toUpperCase()}\n <input value={form[k] ?? \"\"} onChange={(e) => setForm({ ...form, [k]: e.target.value })} />\n </label>\n ))}\n </div>\n <div className=\"job-editor-toolbar bottom\">\n <span className=\"job-editor-meta\"> </span>\n <button type=\"button\" onClick={() => setEditing(null)} disabled={saving}>Cancel</button>\n <button className=\"gold\" type=\"submit\" disabled={saving}>{saving ? \"Saving…\" : \"Save Changes\"}</button>\n </div>\n </form>\n </section>\n );\n }\n\n return (\n <section className=\"panel jobs-panel\">\n <div className=\"view-head\"><div><p>JOBS & SETTINGS</p><h3>Manage utility-schedule jobs</h3></div><span className=\"source-pill\">{jobs.length} JOB{jobs.length === 1 ? \"\" : \"S\"}</span></div>\n\n <div className=\"create-job-inline\"><input placeholder=\"New job name\" value={name} onChange={(e) => setName(e.target.value)} /><button className=\"gold\" onClick={() => { if (name.trim()) { onCreate(name.trim()); setName(\"\"); } }}>＋ Create job</button></div>\n\n <div className=\"job-list\">\n {jobs.length === 0 && <div className=\"empty-state compact\"><b>No jobs yet</b><span>Create a job to begin. Tables are intentionally empty in this staging phase.</span></div>}\n {jobs.map((j) => (\n <div className={`job-list-row ${j.id === activeJob?.id ? \"active\" : \"\"}`} key={j.id}>\n <span><b>{j.name}</b><small>{j.job_number ? `${j.job_number} · ` : \"\"}{j.source === \"monday\" ? \"Monday.com\" : \"Manual\"} · created manually</small></span>\n <span className=\"job-list-actions\">\n <button onClick={() => setEditing(j)}>Edit</button>\n {user.role === \"admin\" && <button className=\"danger-ghost\" onClick={onDeleteConfirm}>Delete</button>}\n </span>\n </div>\n ))}\n </div>\n </section>\n );\n}\n\n// ---------- Daily production ----------\nfunction DailyProduction({ entries, rates, onAddEntry, onAdd }: { entries: Entry[]; rates: LaborRates; onAddEntry: (e: Entry) => void; onAdd: () => void }) {\n const [open, setOpen] = useState(false);\n const [form, setForm] = useState({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: \"001 2013 Ram Truck 3500 ST\", equipmentHours: \"\" });\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n useEffect(() => { api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {}); }, []);\n const selected = equipmentRates.find((x) => x.label === form.equipment) ?? equipmentRates[0];\n const equipmentCost = (selected?.rate ?? 0) * Number(form.equipmentHours);\n const laborCost = Number(form.laborHours) * rates.labor + Number(form.operatorHours) * rates.operator + Number(form.foremanHours) * rates.foreman;\n function save(e: React.FormEvent) {\n e.preventDefault();\n onAddEntry({ id: Date.now(), activity: form.activity, unit: form.unit, qty: +form.qty || 0, hours: Number(form.laborHours) + Number(form.operatorHours) + Number(form.foremanHours), labor: laborCost, equipment: equipmentCost });\n setForm({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: equipmentRates[0]?.label ?? \"\", equipmentHours: \"\" });\n setOpen(false);\n }\n return (\n <section className=\"panel daily-view\">\n <div className=\"view-head\"><div><p>FIELD ENTRIES</p><h3>Production and cost log</h3></div><button className=\"gold\" onClick={() => setOpen(true)}>＋ New entry</button></div>\n <div className=\"daily-row daily-head\"><span>ACTIVITY</span><span>QUANTITY</span><span>HOURS</span><span>LABOR</span><span>EQUIPMENT</span><span>TOTAL</span></div>\n {entries.length ? entries.map((e) => (\n <div className=\"daily-row\" key={e.id}><span><b>{e.activity}</b></span><span>{e.qty ? `${e.qty.toLocaleString()} ${e.unit}` : \"Imported total\"}</span><span>{e.hours.toFixed(2)}</span><span>{money(e.labor, 2)}</span><span>{money(e.equipment, 2)}</span><span><b>{money(e.labor + e.equipment, 2)}</b></span></div>\n )) : <div className=\"empty-state\"><b>No production entries yet</b><span>Add a field entry or upload the job’s Excel time sheet.</span></div>}\n\n {open && (\n <div className=\"backdrop\" onMouseDown={() => setOpen(false)}>\n <form onSubmit={save} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DAILY FIELD ENTRY</p><h2>Add production & cost</h2></div><button type=\"button\" onClick={() => setOpen(false)}>×</button></div>\n <div className=\"form-grid\">\n <label className=\"wide\">ACTIVITY<input value={form.activity} onChange={(e) => setForm({ ...form, activity: e.target.value })} /></label>\n <label>QUANTITY<input type=\"number\" value={form.qty} onChange={(e) => setForm({ ...form, qty: e.target.value })} /></label>\n <label>UNIT<select value={form.unit} onChange={(e) => setForm({ ...form, unit: e.target.value })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select></label>\n <label>LABOR HOURS · {money(rates.labor, 2)}/HR<input type=\"number\" step=\".25\" value={form.laborHours} onChange={(e) => setForm({ ...form, laborHours: e.target.value })} /></label>\n <label>OPERATOR HOURS · {money(rates.operator, 2)}/HR<input type=\"number\" step=\".25\" value={form.operatorHours} onChange={(e) => setForm({ ...form, operatorHours: e.target.value })} /></label>\n <label>FOREMAN HOURS · {money(rates.foreman, 2)}/HR<input type=\"number\" step=\".25\" value={form.foremanHours} onChange={(e) => setForm({ ...form, foremanHours: e.target.value })} /></label>\n <label className=\"wide\">EQUIPMENT<select value={form.equipment} onChange={(e) => setForm({ ...form, equipment: e.target.value })}>{equipmentRates.map((x) => <option key={x.label}>{x.label}</option>)}</select></label>\n <label>EQUIPMENT HOURS<input type=\"number\" step=\".25\" value={form.equipmentHours} onChange={(e) => setForm({ ...form, equipmentHours: e.target.value })} /></label>\n <label>HOURLY RATE<input value={money(selected?.rate ?? 0, 2) + \" / hr\"} readOnly /></label>\n </div>\n <div className=\"equipment-calc\"><span><small>EQUIPMENT COST</small><b>{money(equipmentCost, 2)}</b></span><em>{form.equipmentHours || 0} hrs × {money(selected?.rate ?? 0, 2)}/hr</em></div>\n <div className=\"calculated\"><span>CALCULATED TOTAL COST / UNIT</span><b>{money((laborCost + equipmentCost) / Math.max(1, +form.qty), 2)} / {form.unit}</b></div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setOpen(false)}>Cancel</button><button className=\"gold\">Save daily production</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Labor rates ----------\nfunction LaborRateSettings({ job, rates, setRates, status, onSave }: { job: Job | null; rates: LaborRates; setRates: (v: LaborRates) => void; status: string; onSave: (e: React.FormEvent) => void }) {\n return (\n <section className=\"labor-settings\">\n <article className=\"panel rate-settings-card\">\n <div className=\"settings-head\"><div><p>JOB-SPECIFIC LABOR RATES</p><h3>Hourly rate schedule</h3></div><span className=\"save-status\">● {status || \"Ready\"}</span></div>\n <label className=\"settings-job\">JOB<input readOnly value={job?.name ?? \"Select a job\"} /></label>\n <form onSubmit={onSave}>\n <div className=\"rate-input-grid\">\n <RateInput label=\"Labor\" value={rates.labor} onChange={(v) => setRates({ ...rates, labor: v })} />\n <RateInput label=\"Operator\" value={rates.operator} onChange={(v) => setRates({ ...rates, operator: v })} />\n <RateInput label=\"Foreman\" value={rates.foreman} onChange={(v) => setRates({ ...rates, foreman: v })} />\n </div>\n <div className=\"rate-actions\"><span>These rates apply only to <b>{job?.name ?? \"this job\"}</b> and update new production entries immediately.</span><button type=\"button\" onClick={() => setRates(DEFAULT_RATES)}>Use standard rates</button><button className=\"gold\">Save job rates</button></div>\n </form>\n </article>\n <article className=\"panel prevailing-card\"><i>PW</i><div><p>PREVAILING WAGE READY</p><h3>Different job, different rates.</h3><span>Choose a job above, enter its required wage rates, and save. Your standard-rate jobs remain unchanged.</span></div></article>\n </section>\n );\n}\nfunction RateInput({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {\n return <label><span>{label}<small>HOURLY RATE</small></span><div><i>$</i><input type=\"number\" min=\"0\" max=\"500\" step=\".01\" value={value} onChange={(e) => onChange(Number(e.target.value))} /><em>/ hr</em></div></label>;\n}\n\n// ---------- Equipment ----------\nfunction OperationsUsageView({ usage, days, phases, showPhases, setShowPhases }: { usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhases: boolean; setShowPhases: (v: boolean) => void }) {\n const hasData = usage.length > 0 || days.length > 0;\n return <>\n <section className=\"phase-controls\"><div><p>JOB UTILIZATION VIEW</p><b>{showPhases ? \"Equipment and crew by phase code\" : \"Equipment and crew totals\"}</b></div><button disabled={!hasData} onClick={() => setShowPhases(!showPhases)}>{showPhases ? \"← Show job totals\" : \"View by phase code →\"}</button></section>\n {showPhases ? <PhaseCodeUsagePanel phases={phases} /> : <section className=\"operations-grid\"><EquipmentUsagePanel usage={usage} /><CrewSizePanel days={days} /></section>}\n </>;\n}\nfunction EquipmentUsagePanel({ usage }: { usage: EquipmentUsage[] }) {\n const top = usage.slice(0, 5); const max = top[0]?.hours || 1;\n return <article className=\"panel usage-panel\"><div className=\"view-head\"><div><p>TIMESHEET EQUIPMENT</p><h3>Most-used equipment</h3></div>{usage.length > 0 && <span className=\"source-pill\">RANKED BY HOURS</span>}</div>\n {top.length ? <div className=\"usage-list\">{top.map((item, i) => <div className=\"usage-row\" key={item.name}><i>{i + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / max * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"empty-state compact\"><b>No equipment usage yet</b><span>Upload the job’s labor and equipment Excel file to rank equipment by hours.</span></div>}\n </article>;\n}\nfunction CrewSizePanel({ days }: { days: CrewDay[] }) {\n const average = days.length ? days.reduce((sum, d) => sum + d.size, 0) / days.length : 0;\n const peak = days.reduce((m, d) => Math.max(m, d.size), 0);\n const recent = days.slice(-5).reverse();\n return <article className=\"panel crew-panel\"><div className=\"view-head\"><div><p>TIMESHEET CREW</p><h3>Crew size by workday</h3></div>{days.length > 0 && <span className=\"source-pill\">UNIQUE EMPLOYEES</span>}</div>\n {days.length ? <><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{days.length}</b></span></div><div className=\"crew-days\">{recent.map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></> : <div className=\"empty-state compact\"><b>No crew data yet</b><span>Crew size will calculate from unique employee IDs for each workday.</span></div>}\n </article>;\n}\nfunction PhaseCodeUsagePanel({ phases }: { phases: PhaseUsage[] }) {\n const [expanded, setExpanded] = useState(\"\");\n return <section className=\"panel phase-usage\"><div className=\"view-head\"><div><p>PHASE CODE UTILIZATION</p><h3>Equipment and crew by phase</h3></div><span className=\"source-pill\">CLICK A PHASE TO EXPAND</span></div>\n {phases.length ? <div className=\"phase-table\"><div className=\"phase-row phase-head\"><span>PHASE CODE</span><span>MOST-USED EQUIPMENT</span><span>EQUIPMENT HOURS</span><span>AVG. CREW</span><span>PEAK CREW</span><span>WORKDAYS</span></div>\n {phases.map((phase) => { const average = phase.days.length ? phase.days.reduce((s, d) => s + d.size, 0) / phase.days.length : 0; const peak = phase.days.reduce((m, d) => Math.max(m, d.size), 0); const top = phase.equipment[0]; const isOpen = expanded === phase.phaseCode; const maxHours = top?.hours || 1;\n return <div className={`phase-group${isOpen ? \" open\" : \"\"}`} key={phase.phaseCode}><button type=\"button\" className=\"phase-row phase-click\" aria-expanded={isOpen} onClick={() => setExpanded(isOpen ? \"\" : phase.phaseCode)}><span className=\"phase-name\"><i>{isOpen ? \"−\" : \"+\"}</i><b>{phase.phaseCode}</b></span><span>{top ? <><b>{top.name}</b><small>{phase.equipment.length} equipment {phase.equipment.length === 1 ? \"unit\" : \"units\"} used</small></> : <em>No equipment assigned</em>}</span><span><b>{phase.equipment.reduce((s, i) => s + i.hours, 0).toFixed(1)}</b><small>hours</small></span><span><b>{average.toFixed(1)}</b><small>people</small></span><span><b>{peak}</b><small>people</small></span><span><b>{phase.days.length}</b><small>days</small></span></button>\n {isOpen && <div className=\"phase-detail\"><div className=\"phase-equipment-detail\"><div className=\"detail-title\"><p>ALL EQUIPMENT USED</p><b>{phase.equipment.length} units ranked by hours</b></div>{phase.equipment.length ? <div className=\"usage-list\">{phase.equipment.map((item, index) => <div className=\"usage-row\" key={item.name}><i>{index + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} matched cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / maxHours * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"detail-empty\">No equipment assigned to this phase.</div>}</div><div className=\"phase-crew-detail\"><div className=\"detail-title\"><p>CREW BY WORKDAY</p><b>Unique employees per day</b></div><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{phase.days.length}</b></span></div><div className=\"crew-days detail-days\">{phase.days.slice().reverse().map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></div></div>}\n </div>; })}\n </div> : <div className=\"empty-state compact\"><b>No phase-code usage yet</b><span>Upload a BusyBusy time sheet to build the phase-code breakdown.</span></div>}\n </section>;\n}\nfunction EquipmentMovesPanel({ moves }: { moves: EquipmentMove[] }) {\n const totalHours = moves.reduce((s, m) => s + m.hours, 0);\n const totalCost = moves.reduce((s, m) => s + m.cost, 0);\n const review = moves.filter((m) => m.needsReview).length;\n return <section className=\"panel equipment-moves\"><div className=\"view-head\"><div><p>MOBILIZATION PHASE CODE · 1101</p><h3>Equipment moves</h3></div>{moves.length > 0 && <span className=\"source-pill\">{moves.length} {moves.length === 1 ? \"MOVE\" : \"MOVES\"}</span>}</div>\n {moves.length ? <><div className=\"move-summary\"><span><small>EQUIPMENT MOVES</small><b>{moves.length}</b></span><span><small>MOVE HOURS</small><b>{totalHours.toFixed(1)}</b></span><span><small>TOTAL MOVE COST</small><b>{money(totalCost, 2)}</b></span><span className={review ? \"review\" : \"\"}><small>NEEDS REVIEW</small><b>{review}</b></span></div>\n <div className=\"move-table\"><div className=\"move-row move-head\"><span>DATE</span><span>EQUIPMENT MOVED</span><span>HAULING EQUIPMENT / DRIVER</span><span>HOURS</span><span>COST</span></div>\n {moves.map((move) => <div className=\"move-row\" key={move.id}><span>{move.date ? new Date(move.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" }) : \"Date unavailable\"}</span><span><b>{move.movedEquipment}</b><small>{move.description}</small></span><span><b>{move.haulingEquipment}</b><small>{move.driver}</small></span><span><b>{move.hours.toFixed(1)}</b><small>hours</small></span><span><b>{money(move.cost, 2)}</b><small>{money(move.laborCost, 2)} labor + {move.haulingCost > 0 ? `${money(move.haulingCost, 2)} truck` : \"truck rate missing\"}</small>{move.needsReview && <em>Review match</em>}</span></div>)}\n </div></> : <div className=\"empty-state compact\"><b>No equipment moves found yet</b><span>Upload a BusyBusy time sheet. Mobilization entries that name the transported machine in the description will appear here.</span></div>}\n </section>;\n}\nfunction RateBook({ search, setSearch, rates }: { search: string; setSearch: (v: string) => void; rates: EquipmentRate[] }) {\n return <section className=\"panel rate-book\"><div className=\"rate-tools\"><div><p>IMPORTED EQUIPMENT RATES</p><h3>{rates.length} equipment records</h3></div><input placeholder=\"Search unit, make, or model…\" value={search} onChange={(e) => setSearch(e.target.value)} /></div>\n <div className=\"rate-header\"><span>EQUIPMENT ID & DESCRIPTION</span><span>HOURLY RATE</span></div>\n <div className=\"rate-list\">{rates.map((x) => <div className=\"rate-row\" key={x.label}><span><i>⚙</i><b>{x.label}</b></span><strong>{money(x.rate, 2)}<small>/ hr</small></strong></div>)}</div>\n </section>;\n}\n\n// ---------- Cost code + unit cost ----------\nfunction fourDigitCode(value: string) { return value.match(/^\\s*(\\d{4})/)?.[1] ?? value.split(\" - \")[0]; }\nfunction consolidatedRows(rows: CostRow[]) {\n const grouped = new Map<string, CostRow>();\n for (const row of rows) {\n const code = fourDigitCode(row.costCode); const prior = grouped.get(code);\n if (!prior) { grouped.set(code, { ...row, costCode: `${code} - Consolidated` }); continue; }\n prior.laborHours += row.laborHours; prior.operatorHours += row.operatorHours; prior.foremanHours += row.foremanHours;\n prior.equipmentHours += row.equipmentHours; prior.laborCost += row.laborCost; prior.equipmentCost += row.equipmentCost; prior.totalCost += row.totalCost;\n }\n return [...grouped.values()].sort((a, b) => a.costCode.localeCompare(b.costCode));\n}\nfunction CostCodeTable({ rows, production, setProduction, consolidated, setConsolidated }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidated: boolean; setConsolidated: (v: boolean) => void;\n}) {\n const displayedRows = consolidated ? consolidatedRows(rows) : rows;\n const totalLabor = rows.reduce((a, r) => a + r.laborCost, 0);\n const totalEquipment = rows.reduce((a, r) => a + r.equipmentCost, 0);\n return <section className=\"panel cost-code-panel\">\n <div className=\"cost-code-title\"><div><p>BUSYBUSY ACTUAL COSTS</p><h3>{consolidated ? \"Cost consolidated by 4-digit code\" : \"Cost by code + manual production\"}</h3><button type=\"button\" className={consolidated ? \"consolidate-button active\" : \"consolidate-button\"} onClick={() => setConsolidated(!consolidated)}>{consolidated ? \"✓ Consolidated · Show detail\" : \"Consolidate by 4-digit code\"}</button></div><div><span><small>LABOR</small><b>{money(totalLabor, 2)}</b></span><span><small>EQUIPMENT</small><b>{money(totalEquipment, 2)}</b></span><span className=\"total\"><small>TOTAL ACTUAL COST</small><b>{money(totalLabor + totalEquipment, 2)}</b></span></div></div>\n <div className=\"cost-code-scroll\"><div className=\"cost-code-row cost-code-head\"><span>COST CODE</span><span>LABOR COST</span><span>EQUIPMENT COST</span><span>TOTAL COST</span><span>PRODUCTION</span><span>ACTUAL / TARGET</span></div>\n {displayedRows.length === 0 && <div className=\"empty-state compact\"><b>No actual costs yet</b><span>Upload a BusyBusy Excel time sheet to populate cost codes.</span></div>}\n {displayedRows.map((r) => { const code = consolidated ? fourDigitCode(r.costCode) : r.costCode; const exact = production[code]; const matched = Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; const children = consolidated ? Object.entries(production).filter(([key, value]) => fourDigitCode(key) === code && Number(value.qty) > 0).map(([, value]) => value) : []; const units = [...new Set(children.map((value) => value.unit))]; const rolled = children.length && units.length === 1 ? { qty: String(children.reduce((s, v) => s + Number(v.qty), 0)), unit: units[0], note: \"Rolled up from detailed production\" } : undefined; const p = exact ?? rolled ?? matched ?? { qty: \"\", unit: \"LF\" }; const qty = Number(p.qty); const cpU = qty ? r.totalCost / qty : 0;\n return <div className=\"cost-code-row\" key={r.costCode}><span><b>{r.costCode}</b><small>{r.laborHours + r.operatorHours + r.foremanHours} labor hrs · {r.equipmentHours} equipment hrs{consolidated ? \" · grouped by first 4 digits\" : \"\"}</small></span><span>{money(r.laborCost, 2)}</span><span>{money(r.equipmentCost, 2)}</span><span><b>{money(r.totalCost, 2)}</b></span><span className=\"production-input\"><input type=\"number\" min=\"0\" step=\".01\" placeholder=\"Enter qty\" value={p.qty} onChange={(e) => setProduction({ ...production, [code]: { ...p, qty: e.target.value } })} /><select value={p.unit} onChange={(e) => setProduction({ ...production, [code]: { ...p, unit: e.target.value } })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select>{p.note && <small className=\"scope-note\">{p.note}</small>}</span><span className={qty ? \"unit-cost\" : \"pending-unit\"}>{qty ? <><b>{money(cpU, 2)} <small>/ {p.unit}</small></b>{p.targetCost && <small>Target {money(p.targetCost, 2)} / {p.unit}</small>}</> : <em>Awaiting production</em>}</span></div>;\n })}\n </div>\n </section>;\n}\nfunction UnitCostView({ rows, production, setProduction, consolidateCodes, setConsolidateCodes }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void; consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n}) {\n const measured = rows.filter((r) => { const p = production[r.costCode] ?? Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; return Number(p?.qty) > 0; });\n return <><section className=\"unit-summary\"><article><p>MEASURED COST CODES</p><h2>{measured.length}</h2><span>with installed production</span></article><article><p>AWAITING QUANTITY</p><h2>{rows.length - measured.length}</h2><span>cost codes need LF or EA</span></article><article><p>VISTA TARGETS</p><h2>{Object.values(production).filter((p) => p.targetCost).length}</h2><span>target unit costs loaded</span></article></section>\n <CostCodeTable rows={rows} production={production} setProduction={setProduction} consolidated={consolidateCodes} setConsolidated={setConsolidateCodes} />\n </>;\n}\n\n// ---------- Forecast / reports ----------\nfunction JobCostForecast({ actualCost, settings, setSettings }: { actualCost: number; settings: Forecast; setSettings: (v: Forecast) => void }) {\n const budget = Number(settings.budget), completion = Math.min(100, Math.max(0, Number(settings.completion)));\n const ready = budget > 0 && completion > 0;\n const budgetUsed = budget > 0 ? actualCost / budget * 100 : 0;\n const projected = ready ? actualCost / (completion / 100) : 0;\n const variance = ready ? budget - projected : 0;\n const variancePercent = ready ? Math.abs(variance) / budget * 100 : 0;\n const state = !ready ? \"setup\" : variance >= 0 ? \"on-track\" : variancePercent <= 5 ? \"watch\" : \"over\";\n const label = state === \"setup\" ? \"ADD BUDGET + PROGRESS\" : state === \"on-track\" ? \"ON TRACK\" : state === \"watch\" ? \"WATCH\" : \"PROJECTED OVER BUDGET\";\n return <article className={`panel forecast-card ${state}`}><div className=\"forecast-head\"><div><p>JOB COST FORECAST</p><h3>Budget health + projected finish</h3></div><span>{label}</span></div>\n <div className=\"forecast-inputs\"><label><small>COST BUDGET</small><div><i>$</i><input type=\"number\" min=\"0\" step=\"100\" placeholder=\"Enter budget\" value={settings.budget} onChange={(e) => setSettings({ ...settings, budget: e.target.value })} /></div></label><label><small>ESTIMATED JOB COMPLETION</small><div><input type=\"number\" min=\"0\" max=\"100\" step=\"1\" placeholder=\"0\" value={settings.completion} onChange={(e) => setSettings({ ...settings, completion: e.target.value })} /><i>%</i></div></label></div>\n <div className=\"forecast-bars\"><div><span><small>JOB COMPLETION</small><b>{completion.toFixed(0)}%</b></span><i><em style={{ width: `${completion}%` }} /></i></div><div><span><small>BUDGET SPENT</small><b>{budget > 0 ? `${budgetUsed.toFixed(0)}%` : \"—\"}</b></span><i><em className={budgetUsed > 100 ? \"over\" : undefined} style={{ width: `${Math.min(100, budgetUsed)}%` }} /></i></div></div>\n {ready ? <div className=\"forecast-result\"><span><small>ACTUAL COST TO DATE</small><b>{money(actualCost, 2)}</b></span><span><small>PROJECTED FINAL COST</small><b>{money(projected, 2)}</b></span><span className={variance >= 0 ? \"positive\" : \"negative\"}><small>PROJECTED VARIANCE</small><b>{variance >= 0 ? `${money(variance, 2)} under` : `${money(Math.abs(variance), 2)} over`}</b><em>{variancePercent.toFixed(1)}% of budget</em></span></div> : <div className=\"forecast-empty\"><b>Enter the job’s cost budget and estimated completion.</b><span>The forecast will compare how much work is complete against how much budget has been spent.</span></div>}\n </article>;\n}\nfunction ReportsView({ job, totals, total, rows, production }: { job: Job | null; totals: { hours: number; labor: number; equipment: number }; total: number; rows: CostRow[]; production: Record<string, ProductionValue> }) {\n const ranked = rows.filter((r) => r.totalCost > 0).slice().sort((a, b) => b.totalCost - a.totalCost).slice(0, 5);\n return <section className=\"report-view\">\n <article className=\"panel report-cover\"><p>EXECUTIVE PRODUCTION REPORT</p><h2>{job?.name ?? \"No job selected\"}</h2><span>Current imported labor, equipment, and installed-unit cost summary</span>\n <div className=\"report-kpis\"><div><small>TOTAL COST</small><b>{money(total, 2)}</b></div><div><small>LABOR HOURS</small><b>{totals.hours.toFixed(1)}</b></div><div><small>LABOR COST</small><b>{money(totals.labor, 2)}</b></div><div><small>EQUIPMENT COST</small><b>{money(totals.equipment, 2)}</b></div></div>\n </article>\n <article className=\"panel report-rank\"><div className=\"view-head\"><div><p>TOP COST CODES</p><h3>Largest actual costs</h3></div></div>\n {ranked.map((r, i) => { const p = production[r.costCode]; const qty = Number(p?.qty); return <div className=\"rank-row\" key={r.costCode}><i>{i + 1}</i><span><b>{r.costCode}</b><small>{qty ? `${money(r.totalCost / qty, 2)} / ${p.unit}` : \"Production quantity not entered\"}</small></span><strong>{money(r.totalCost, 2)}</strong></div>; })}\n {ranked.length === 0 && <div className=\"empty-state compact\"><b>No cost data yet</b><span>Upload a BusyBusy time sheet to populate the report.</span></div>}\n <div className=\"report-print\"><button className=\"gold\" onClick={() => window.print()}>⇩ Print / save PDF</button></div>\n </article>\n </section>;\n}\n\nfunction Title({ title, onClick }: { title: string; onClick: () => void }) {\n return <div className=\"title\"><div><h3>{title}</h3></div><button type=\"button\" onClick={onClick}>View details →</button></div>;\n}\nfunction Kpi({ icon, label, value, note, accent = false }: { icon: string; label: string; value: string; note: string; accent?: boolean }) {\n return <article className={accent ? \"accent\" : \"\"}><i>{icon}</i><p>{label}</p><h2>{value}</h2><span>{note}</span></article>;\n}\n\n// ---------- Migration checklist ----------\nfunction MigrationChecklist({ user }: { user: User }) {\n const items: { label: string; done: boolean; detail: string }[] = [\n { label: \"Database migrations\", done: true, detail: \"users, sessions, approved emails, jobs, job labor rates, job data, Monday snapshots, uploaded-file metadata.\" },\n { label: \"Email login + secure sessions\", done: true, detail: \"HTTP-only, Secure, SameSite session cookies; PBKDF2-hashed passwords.\" },\n { label: \"Approved-email allowlist + roles\", done: true, detail: \"admin / user roles enforced on all data APIs.\" },\n { label: \"First-run admin setup\", done: true, detail: \"Owner configures the initial admin before any data loads.\" },\n { label: \"Job creation, selection, editing, deletion\", done: true, detail: \"Admin-managed job CRUD persisted to scoped SQLite.\" },\n { label: \"Per-job labor / operator / foreman rates\", done: true, detail: \"Saved per job with standard defaults.\" },\n { label: \"Vista TXT target import\", done: true, detail: \"Browser-side parsing; targets saved in the job's production map.\" },\n { label: \"BusyBusy Excel labor & equipment import\", done: true, detail: \"SheetJS in the browser; original file stored to scoped Blob Storage.\" },\n { label: \"Cost-code consolidation by first 4 digits\", done: true, detail: \"1201.2 + 1201.3 → 1201; toggle shown in the cost-code table.\" },\n { label: \"Equipment usage, crew size, phase-code views\", done: true, detail: \"Most-used equipment, crew-by-day, expandable phase-code breakdown.\" },\n { label: \"Equipment-move tracking (phase 1101)\", done: true, detail: \"Driver labor + hauling truck cost, no charge for the transported machine.\" },\n { label: \"Manual production + cost-per-unit\", done: true, detail: \"Enter quantities per cost code; actual/target unit-cost compare.\" },\n { label: \"Reports & print/PDF view\", done: true, detail: \"Executive report cover + top cost codes; print stylesheet.\" },\n { label: \"Permanent job-based storage\", done: true, detail: \"Job data in scoped SQLite; original files in scoped Blob Storage, associated by job.\" },\n { label: \"Monday.com\" , done: false, detail: \"Disconnected in Phase 2. Set MONDAY_TOKEN for the Utility Schedule import in a later phase.\" },\n ];\n const doneCount = items.filter((i) => i.done).length;\n return <section className=\"panel migration-panel\">\n <div className=\"view-head\"><div><p>MIGRATION CHECKLIST</p><h3>Val Town staging — {doneCount}/{items.length} complete</h3></div><span className=\"source-pill\">AUTHENTICATED · {user.role.toUpperCase()}</span></div>\n <div className=\"migration-list\">{items.map((item) => <div className={`migration-row ${item.done ? \"done\" : \"\"}`} key={item.label}><i>{item.done ? \"✓\" : \"○\"}</i><span><b>{item.label}</b><small>{item.detail}</small></span></div>)}</div>\n <div className=\"migration-note\"><b>Remaining for Phase 3:</b> set <code>MONDAY_TOKEN</code> on this val and wire the Monday.com Utility Schedule import. Full equipment-rate tail re-import may be needed for production matching.</div>\n </section>;\n}\n","createdAt",["D",1788491387790],"branchVersion","branchId","be1fb918-ad42-444d-9d39-35276cd47cc6","id","9c7d0c21-6fce-451a-b6a0-ca5de197aeab","production-command-center",["D",1788450878892],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","NDX internal job production, labor, equipment, and cost dash","imageUrl","fe3e8c07-bae6-44d7-85dc-b222854b68d6","pinnedFileId","179f165a-a7d4-11f1-92c0-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a06443-646e-71a4-ad2c-20559176a0b0","tursoName","9c7d0c216fce451ab6a0ca5de197aeab","tursoHostname","9c7d0c216fce451ab6a0ca5de197aeab-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789514495229],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":109},"org",{"_107":106,"_108":109,"_110":109,"_19":62,"_111":112,"_113":31},"branch",{"_13":96,"_38":97,"_50":49,"_98":51,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":52,"_105":106},"isOwned",63,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wnewton","handle","displayName","","avatar","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":278,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":279,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":280,"_91":281,"_93":282,"_95":31},"tree",[213,218,219,220,221,222,223,224],"files",[213,214,215,216,217,218,219,220,221,222,223,224],"counts",{"_203":70,"_204":148,"_205":70,"_206":207,"_208":209},"contents",[136,137,138,139,140,141,142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":197,"_38":198,"_36":199,"_147":-5,"_48":49,"_47":200,"_149":66,"_45":201,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_33":202},{"_50":190,"_38":191,"_36":192,"_147":-5,"_48":49,"_47":193,"_149":66,"_45":194,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_33":196},{"_50":183,"_38":184,"_36":185,"_147":-5,"_48":49,"_47":186,"_149":31,"_45":187,"_13":157,"_40":26,"_42":188,"_30":31,"_151":-5,"_33":189},{"_50":176,"_38":177,"_36":178,"_147":-5,"_48":49,"_47":179,"_149":66,"_45":180,"_13":70,"_40":41,"_42":181,"_30":31,"_151":-5,"_33":182},{"_50":169,"_38":170,"_36":171,"_147":-5,"_48":49,"_47":172,"_149":31,"_45":173,"_13":157,"_40":41,"_42":174,"_30":31,"_151":-5,"_33":175},{"_50":162,"_38":163,"_36":164,"_147":-5,"_48":49,"_47":165,"_149":66,"_45":166,"_13":70,"_40":41,"_42":167,"_30":31,"_151":-5,"_33":168},{"_50":153,"_38":154,"_36":64,"_147":-5,"_48":49,"_47":155,"_149":31,"_45":156,"_13":157,"_40":158,"_42":159,"_30":31,"_151":160,"_33":161},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":150,"_13":70,"_40":41,"_42":109,"_30":31,"_151":-5,"_33":152},"0ba39e2b-78ae-4125-8280-9482a4fdad83","main.ts","c4e2e564-a7af-11f1-b820-1607ee4eb77e","parentId",1,"latest",["D",1788450878935],"label",[145],"b0929364-9fce-4d00-a9ff-3677320ef228","index.ts",24,["D",1788488919300],2,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport type { Context, Next } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { ready } from \"./db.ts\";\nimport {\n hashPassword,\n verifyPassword,\n createSession,\n sessionCookieHeader,\n clearCookieHeader,\n getSessionUser,\n requireAuth,\n requireAdmin,\n} from \"./auth.ts\";\nimport type { User } from \"./auth.ts\";\nimport { equipmentRates } from \"./equipmentRates.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nawait ready;\n\nconst app = new Hono();\n\nfunction getU(c: Context): User {\n return c.get<User>(\"user\");\n}\n\nconst authed = (c: Context, next: Next) => requireAuth(c, next);\nconst admin = (c: Context, next: Next) => requireAdmin(c, next);\n\nconst DEFAULT_RATES = { labor: 45, operator: 55, foreman: 65 };\nconst MAX_FILE_BYTES = 25 * 1024 * 1024; // 25 MB\n\nconst ALLOWED_EXT: Record<string, \"vista-target\" | \"timesheet\"> = {\n \".txt\": \"vista-target\",\n \".text\": \"vista-target\",\n \".xlsx\": \"timesheet\",\n \".xls\": \"timesheet\",\n};\n\nfunction jobSelect(fields: string[]): string {\n return fields.map((f) => `j.${f}`).join(\", \");\n}\n\n// ---- Frontend ----\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---- Auth + bootstrap (Phase 1, unchanged) ----\napp.get(\"/api/bootstrap\", async (c) => {\n const rows = await sqlite.execute(`SELECT COUNT(*) AS n FROM users`);\n const userCount = Number((rows.rows[0] as { n: number }).n);\n if (userCount === 0) return c.json({ state: \"setup\" });\n const user = await getSessionUser(c.req.raw);\n if (user) return c.json({ state: \"authed\", user });\n return c.json({ state: \"login\" });\n});\n\napp.post(\"/api/setup\", async (c) => {\n const rows = await sqlite.execute(`SELECT COUNT(*) AS n FROM users`);\n if (Number((rows.rows[0] as { n: number }).n) > 0) {\n return c.json({ error: \"Setup already complete. Sign in instead.\" }, 400);\n }\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {\n return c.json({ error: \"A valid email is required.\" }, 400);\n }\n if (password.length < 8) {\n return c.json({ error: \"Password must be at least 8 characters.\" }, 400);\n }\n const { salt, hash } = await hashPassword(password);\n await sqlite.batch([\n { sql: `INSERT INTO approved_emails (email, role) VALUES (?, 'admin')`, args: [email] },\n { sql: `INSERT INTO users (email, role, password_salt, password_hash) VALUES (?, 'admin', ?, ?)`, args: [email, salt, hash] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/login\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n const rows = await sqlite.execute(\n `SELECT id, email, role, password_salt, password_hash FROM users WHERE lower(email) = ?`,\n [email],\n );\n if (rows.rows.length === 0) return c.json({ error: \"Invalid email or password.\" }, 401);\n const row = rows.rows[0] as {\n id: number; email: string; role: string; password_salt: string | null; password_hash: string | null;\n };\n if (!row.password_salt || !row.password_hash) return c.json({ error: \"This user has no password set.\" }, 401);\n const ok = await verifyPassword(password, row.password_salt, row.password_hash);\n if (!ok) return c.json({ error: \"Invalid email or password.\" }, 401);\n const { token, expiresAt } = await createSession(Number(row.id));\n c.header(\"Set-Cookie\", sessionCookieHeader(token, expiresAt));\n return c.json({ user: { id: Number(row.id), email: row.email, role: row.role } });\n});\n\napp.post(\"/api/logout\", async (c) => {\n c.header(\"Set-Cookie\", clearCookieHeader);\n return c.json({ ok: true });\n});\n\n/**\n * Administrator password recovery.\n *\n * Security rules:\n * - The recovery code is read ONLY from the ADMIN_RECOVERY_CODE env var;\n * it is never hardcoded, displayed, or logged.\n * - Requires the existing administrator email + the recovery code + the new\n * password entered twice.\n * - The new password is hashed with the same PBKDF2 system as normal sign-in.\n * - On success, all existing sessions for that administrator are invalidated\n * so any open session must sign in again.\n */\napp.post(\"/api/recover\", async (c) => {\n const expectedCode = Deno.env.get(\"ADMIN_RECOVERY_CODE\");\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const code = String(body.code ?? \"\");\n const password = String(body.password ?? \"\");\n const confirm = String(body.confirm ?? \"\");\n\n if (!expectedCode) {\n return c.json({ error: \"Password recovery is not configured. Contact the administrator.\" }, 500);\n }\n\n // Generic failures — never reveal whether the email or the code was wrong.\n const fail = () => c.json({ error: \"Unable to reset the password. Check your email and recovery code, then try again.\" }, 401);\n\n if (!email || password.length < 8 || password !== confirm) {\n return c.json({ error: \"Enter your administrator email, a new password of at least 8 characters, and confirm it.\" }, 400);\n }\n\n // Timing-safe comparison of the recovery code.\n const a = new Uint8Array(new TextEncoder().encode(code));\n const b = new Uint8Array(new TextEncoder().encode(expectedCode));\n let diff = a.length === b.length ? 0 : 1;\n const len = Math.max(a.length, b.length);\n for (let i = 0; i < len; i++) {\n const av = i < a.length ? a[i] : 0;\n const bv = i < b.length ? b[i] : 0;\n diff |= av ^ bv;\n }\n if (diff !== 0) return fail();\n\n const rows = await sqlite.execute(\n `SELECT id FROM users WHERE lower(email) = ? AND role = 'admin'`,\n [email],\n );\n if (rows.rows.length === 0) return fail();\n const userId = Number((rows.rows[0] as { id: number }).id);\n\n const { salt, hash } = await hashPassword(password);\n await sqlite.batch([\n {\n sql: `UPDATE users SET password_salt = ?, password_hash = ? WHERE id = ?`,\n args: [salt, hash, userId],\n },\n // Invalidate every session for this administrator.\n { sql: `DELETE FROM sessions WHERE user_id = ?`, args: [userId] },\n ]);\n\n return c.json({ ok: true });\n});\n\n// ---- Jobs CRUD ----\n\nasync function getJobRow(id: number) {\n const rows = await sqlite.execute(\n `SELECT id, name, source, job_number, status, superintendent, project_manager,\n estimator, location, jurisdiction, general_contractor, foreman,\n prevailing_wage, permit_number, schedule_group, monday_url\n FROM jobs WHERE id = ?`,\n [id],\n );\n return rows.rows[0] ?? null;\n}\n\napp.get(\"/api/jobs\", authed, async (c) => {\n const rows = await sqlite.execute(\n `SELECT id, name, source, job_number, status, superintendent, project_manager,\n estimator, location, jurisdiction, general_contractor, foreman,\n prevailing_wage, permit_number, schedule_group, monday_url, created_at\n FROM jobs ORDER BY name`,\n );\n return c.json({ jobs: rows.rows });\n});\n\napp.post(\"/api/jobs\", authed, admin, async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const name = String(body.name ?? \"\").trim();\n if (!name) return c.json({ error: \"Job name is required.\" }, 400);\n const me = getU(c);\n const result = await sqlite.execute(\n `INSERT INTO jobs (name, source, created_by) VALUES (?, 'manual', ?)`,\n [name, me.id],\n );\n const id = Number(result.lastInsertRowid);\n await sqlite.execute(\n `INSERT OR IGNORE INTO job_labor_rates (job_id, labor, operator, foreman, updated_at)\n VALUES (?, ?, ?, ?, datetime('now'))`,\n [id, DEFAULT_RATES.labor, DEFAULT_RATES.operator, DEFAULT_RATES.foreman],\n );\n const row = await getJobRow(id);\n return c.json({ job: row }, 201);\n});\n\napp.put(\"/api/jobs/:id\", authed, admin, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const allowed = [\"name\", \"job_number\", \"status\", \"superintendent\", \"project_manager\", \"estimator\",\n \"location\", \"jurisdiction\", \"general_contractor\", \"foreman\", \"prevailing_wage\", \"permit_number\",\n \"schedule_group\", \"monday_url\"];\n for (const key of allowed) {\n if (body[key] !== undefined) {\n await sqlite.execute(`UPDATE jobs SET ${key} = ? WHERE id = ?`, [String(body[key]), id]);\n }\n }\n const row = await getJobRow(id);\n if (!row) return c.json({ error: \"Job not found.\" }, 404);\n return c.json({ job: row });\n});\n\napp.delete(\"/api/jobs/:id\", authed, admin, async (c) => {\n const id = Number(c.req.param(\"id\"));\n // Delete blobs first, then the cascading rows.\n const files = await sqlite.execute(`SELECT blob_key FROM job_files WHERE job_id = ?`, [id]);\n for (const f of files.rows) {\n try { await blob.delete(f.blob_key as string); } catch { /* ignore */ }\n }\n await sqlite.execute(`DELETE FROM job_files WHERE job_id = ?`, [id]);\n await sqlite.execute(`DELETE FROM jobs WHERE id = ?`, [id]);\n return c.json({ ok: true });\n});\n\n// ---- Per-job labor rates ----\n\napp.get(\"/api/jobs/:id/rates\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(\n `SELECT labor, operator, foreman FROM job_labor_rates WHERE job_id = ?`,\n [id],\n );\n if (rows.rows.length === 0) return c.json({ rates: { ...DEFAULT_RATES }, isDefault: true });\n return c.json({ rates: rows.rows[0], isDefault: false });\n});\n\napp.put(\"/api/jobs/:id/rates\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const labor = Number(body.labor ?? DEFAULT_RATES.labor);\n const operator = Number(body.operator ?? DEFAULT_RATES.operator);\n const foreman = Number(body.foreman ?? DEFAULT_RATES.foreman);\n await sqlite.execute(\n `INSERT INTO job_labor_rates (job_id, labor, operator, foreman, updated_at)\n VALUES (?, ?, ?, ?, datetime('now'))\n ON CONFLICT(job_id) DO UPDATE SET labor = excluded.labor, operator = excluded.operator,\n foreman = excluded.foreman, updated_at = datetime('now')`,\n [id, labor, operator, foreman],\n );\n return c.json({ rates: { labor, operator, foreman }, isDefault: false });\n});\n\n// ---- Job data (autosave) ----\n\nconst emptyJobData = {\n entries: [],\n production: {},\n actualRows: [],\n equipmentUsage: [],\n crewDays: [],\n phaseUsage: [],\n equipmentMoves: [],\n forecast: { budget: \"\", completion: \"\" },\n};\n\napp.get(\"/api/jobs/:id/data\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(`SELECT data FROM job_data WHERE job_id = ?`, [id]);\n if (rows.rows.length === 0) return c.json({ data: emptyJobData });\n try {\n return c.json({ data: JSON.parse(rows.rows[0].data as string) });\n } catch {\n return c.json({ data: emptyJobData });\n }\n});\n\napp.put(\"/api/jobs/:id/data\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const data = body.data ?? {};\n await sqlite.execute(\n `INSERT INTO job_data (job_id, data, updated_at) VALUES (?, ?, datetime('now'))\n ON CONFLICT(job_id) DO UPDATE SET data = excluded.data, updated_at = datetime('now')`,\n [id, JSON.stringify(data)],\n );\n return c.json({ ok: true });\n});\n\n// ---- File uploads (Vista target TXT / BusyBusy Excel) ----\n\nasync function storeFileParts(formData: FormData, jobId: number, user: User) {\n const saved: { filename: string; kind: string; size: number }[] = [];\n const errors: string[] = [];\n\n for (const [key, value] of formData.entries()) {\n if (!(value instanceof File)) continue;\n const file = value as File;\n const name = file.name ?? key;\n const ext = name.slice(name.lastIndexOf(\".\")).toLowerCase();\n const kind = ALLOWED_EXT[ext];\n if (!kind) {\n errors.push(`\"${name}\" is not an accepted file type. Use .txt for Vista targets or .xlsx/.xls for BusyBusy time sheets.`);\n continue;\n }\n if (file.size > MAX_FILE_BYTES) {\n errors.push(`\"${name}\" exceeds the 25 MB upload limit.`);\n continue;\n }\n const nonce = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n const blobKey = `jobs/${jobId}/${kind}/${nonce}-${name}`;\n const bytes = new Uint8Array(await file.arrayBuffer());\n await blob.set(blobKey, bytes);\n await sqlite.execute(\n `INSERT INTO job_files (job_id, kind, filename, content_type, size, blob_key, uploaded_by, uploaded_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, datetime('now'))`,\n [jobId, kind, name, file.type || \"application/octet-stream\", file.size, blobKey, user.id],\n );\n saved.push({ filename: name, kind, size: file.size });\n }\n return { saved, errors };\n}\n\napp.post(\"/api/jobs/:id/files\", authed, async (c) => {\n const jobId = Number(c.req.param(\"id\"));\n const me = getU(c);\n const formData = await c.req.formData().catch(() => null);\n if (!formData) return c.json({ error: \"Invalid upload.\" }, 400);\n const { saved, errors } = await storeFileParts(formData, jobId, me);\n if (saved.length === 0) {\n return c.json({ error: errors.join(\" \") || \"No files uploaded.\" }, 400);\n }\n return c.json({ ok: true, saved, warnings: errors });\n});\n\napp.get(\"/api/jobs/:id/files\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(\n `SELECT id, kind, filename, content_type, size, uploaded_at FROM job_files WHERE job_id = ? ORDER BY uploaded_at DESC`,\n [id],\n );\n return c.json({ files: rows.rows });\n});\n\n// ---- Equipment rates ----\napp.get(\"/api/equipment-rates\", authed, async (c) => {\n return c.json({ rates: equipmentRates, count: equipmentRates.length });\n});\n\n// ---- Monday.com (disconnected in Phase 2) ----\napp.get(\"/api/monday-connection\", authed, async (c) => {\n return c.json({ connected: false, message: \"Monday.com not connected\" });\n});\n\napp.post(\"/api/monday-refresh\", authed, async (c) => {\n return c.json({ error: \"Monday.com is not connected yet. The Utility Schedule import will be enabled in a later phase.\" }, 400);\n});\n\n// ---- Migration status ----\napp.get(\"/api/migration-status\", authed, async (c) => {\n const users = (await sqlite.execute(`SELECT COUNT(*) AS n FROM users`)).rows[0] as { n: number };\n const jobs = (await sqlite.execute(`SELECT COUNT(*) AS n FROM jobs`)).rows[0] as { n: number };\n const mondayToken = Deno.env.get(\"MONDAY_TOKEN\");\n return c.json({\n users: Number(users.n),\n jobs: Number(jobs.n),\n mondayTokenConfigured: Boolean(mondayToken),\n mondayConnected: false,\n });\n});\n\n// Admin: manage approved users.\napp.get(\"/api/admin/users\", authed, admin, async (c) => {\n const approved = await sqlite.execute(\n `SELECT id, email, role, created_at FROM approved_emails ORDER BY email`,\n );\n return c.json({ approved: approved.rows });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","ndx-command-center",[154],"e0a3d028-1a1e-42fb-930b-28f93ae6d0ca","equipmentRates.ts","b7729c34-a7d3-11f1-8201-1607ee4eb77e",4,["D",1788466317861],"export type EquipmentRate = { label: string; rate: number };\n\n/**\n * Hourly operating rates imported from Rates by Equipment.pdf (08/14/26).\n *\n * NOTE: The migration source captured most of this list but was truncated at\n * entry \"5103\". The remaining plate-compactor / small-tool entries should be\n * reconciled from the original PDF before production use. This staging copy\n * carries the entries present in the source.\n */\nexport const equipmentRates: EquipmentRate[] = [\n { label: \"001 2013 Ram Truck 3500 ST\", rate: 100.00 },\n { label: \"002 2014 A Double Cab SR/SRS\", rate: 100.00 },\n { label: \"003 2003 F250 Super Duty\", rate: 100.00 },\n { label: \"004 2016 Ram 2500 Laramie\", rate: 100.00 },\n { label: \"005 2017 Ram 3500 Laramie\", rate: 100.00 },\n { label: \"006 2008 F250 Super Duty\", rate: 100.00 },\n { label: \"007 2021 Ram 3500 Laramie\", rate: 100.00 },\n { label: \"008 2015 F350 Super Duty\", rate: 100.00 },\n { label: \"009 2022 F150 Supercrew\", rate: 100.00 },\n { label: \"010 2022 F150 Supercrew\", rate: 100.00 },\n { label: \"011 2022 F350 Super Duty\", rate: 100.00 },\n { label: \"012 2019 Silverado C2500 Heavy Duty\", rate: 100.00 },\n { label: \"013 2013 Silverado C3500\", rate: 100.00 },\n { label: \"014 2015 F450 Super Duty\", rate: 100.00 },\n { label: \"015 2016 F350 Super Duty\", rate: 100.00 },\n { label: \"016 2015 F450 Super Duty\", rate: 100.00 },\n { label: \"018 2021 F350 Super Duty\", rate: 100.00 },\n { label: \"019 2021 F350 Super Duty\", rate: 100.00 },\n { label: \"020 2011 Ram 2500\", rate: 100.00 },\n { label: \"021 2022 F450 Super Duty\", rate: 100.00 },\n { label: \"022 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"023 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"024 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"025 2022 F350 Super Duty\", rate: 100.00 },\n { label: \"026 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"027 2025 F-150 STX\", rate: 100.00 },\n { label: \"028 2026 F-150 Crew Cab\", rate: 100.00 },\n { label: \"029 2026 Ford F150\", rate: 100.00 },\n { label: \"203 Case 580N Backhoe\", rate: 70.03 },\n { label: \"204 Case 580SN T4 Backhoe\", rate: 70.03 },\n { label: \"205 Case 580 SN T4 Backhoe\", rate: 70.03 },\n { label: \"206 Case 580SN T4B Backhoe\", rate: 70.03 },\n { label: \"207 JD 320 P-Tier Backhoe\", rate: 70.03 },\n { label: \"208 Case 570N-EP Backhoe\", rate: 70.03 },\n { label: \"301 CAT 322 BL Trackhoe W/ Hammer\", rate: 103.49 },\n { label: \"303 Case CX36B Excavator\", rate: 44.57 },\n { label: \"305 KOM PC 78US-8 Mini Excavator\", rate: 57.89 },\n { label: \"306 KOM PC210LC-11 Excavator\", rate: 103.49 },\n { label: \"307 CAT 303.5 E2 Mini Ex\", rate: 44.57 },\n { label: \"308 CAT 308-07 T Midi Excavator\", rate: 57.89 },\n { label: \"309 CAT 320-07 Excavator\", rate: 103.49 },\n { label: \"310 CAT 308-07 Mini Excavator\", rate: 57.89 },\n { label: \"311 CAT 303.5-07 Mini Excavator\", rate: 44.57 },\n { label: \"312 CAT 308-07 Midi Ex\", rate: 57.89 },\n { label: \"313 CAT 303.5-07 Mini Ex\", rate: 44.57 },\n { label: \"314 CAT 349FL Excavator\", rate: 210.00 },\n { label: \"315 CAT320GC Excavator\", rate: 103.49 },\n { label: \"316 KOM PC78US-11 Excavator\", rate: 57.89 },\n { label: \"317 CAT 303.5-07OR Mini Ex\", rate: 44.57 },\n { label: \"318 CAT 308-07CR Midi Excavator\", rate: 57.89 },\n { label: \"4001 2022 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4002 2022 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4003 2021 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4005 2021 Peterbilt 579 4x2 Water Truck\", rate: 48.67 },\n { label: \"4006 2012 Kenworth T370 Water Truck\", rate: 61.48 },\n { label: \"4007 2012 Kenworth T370 Water Truck\", rate: 61.48 },\n { label: \"4008 1999 Sterling Water Truck\", rate: 48.67 },\n { label: \"4009 2006 Peterbilt 378 Convention Water Truck\", rate: 61.48 },\n { label: \"4010 1997 Water Truck (2000G)\", rate: 48.67 },\n { label: \"4011 2004 Water Pull 615 (6000G)\", rate: 157.80 },\n { label: \"4012 2019 Freightliner Water Truck (2000G)\", rate: 61.48 },\n { label: \"4013 2023 Freightliner Water Truck (2000G)\", rate: 48.67 },\n { label: \"4014 2023 Water Wagon 613CII\", rate: 157.80 },\n { label: \"4015 1993 International Water Truck\", rate: 61.48 },\n { label: \"4016 1992 Peterbilt Water Truck\", rate: 61.48 },\n { label: \"4017 1996 Peterbilt Water Truck\", rate: 61.48 },\n { label: \"4018 1998 Water Truck\", rate: 48.67 },\n { label: \"402 CAT 966F Loader\", rate: 172.14 },\n { label: \"404 CAT 938K Loader\", rate: 85.05 },\n { label: \"405 KOM WA320 Loader\", rate: 85.05 },\n { label: \"406 KOM WA380 Loader\", rate: 123.98 },\n { label: \"407 CAT 950M Loader\", rate: 123.98 },\n { label: \"408 CAT 950M Loader (New)\", rate: 123.98 },\n { label: \"409 CAT 950M Loader\", rate: 123.98 },\n { label: \"410 CAT 950M Loader\", rate: 123.98 },\n { label: \"4100 2021 Peterbilt 337 Fuel Truck\", rate: 0.00 },\n { label: \"4101 2026 Peterbilt 537 Fuel Truck\", rate: 0.00 },\n { label: \"4102 2021 Peterbilt 348 8x4 Dump Truck\", rate: 157.99 },\n { label: \"4103 1995 International Dump Truck\", rate: 157.99 },\n { label: \"4104 2022 Peterbilt 579 Dump Truck\", rate: 157.99 },\n { label: \"4105 2021 Peterbilt 579 4x2 Dump Truck\", rate: 157.99 },\n { label: \"4106 Peterbilt 389\", rate: 157.99 },\n { label: \"4107 International ProStar 6x4 Day Cab Truck\", rate: 157.99 },\n { label: \"4108 Peterbilt 378 Convention\", rate: 157.99 },\n { label: \"411 KOM WA320-8 Loader\", rate: 85.05 },\n { label: \"412 CAT 950-14 Loader\", rate: 123.98 },\n { label: \"413 JD 644 P-Tier Loader\", rate: 123.98 },\n { label: \"414 CAT 950M Loader\", rate: 123.98 },\n { label: \"504 Case SR175 Skidsteer\", rate: 44.57 },\n { label: \"507 Case SR210 Skidsteer (New)\", rate: 44.57 },\n { label: \"508 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"509 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"510 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"5100 Plate Compactors\", rate: 0.00 },\n { label: \"5101 Multiquip Plate Wacker\", rate: 0.00 },\n { label: \"5102 Sakai Wacker Rammer\", rate: 0.00 },\n // The source file truncated here. The remaining entries (from ~5103 onward,\n // small tools / saws / trailers / generators) should be re-imported from\n // \"Rates by Equipment.pdf\" before production use.\n];\n",[163],"e8626441-c730-4955-b23b-b61caa4a44b8","db.ts","9d68b710-a7d3-11f1-bea0-1607ee4eb77e",18,["D",1788472738104],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n/**\n * Database migrations for the Production Command Center.\n *\n * The migration has its own DB tables for users, sessions, approved emails,\n * jobs, job labor rates, job data, Monday snapshots, and uploaded-file metadata.\n * All statements use CREATE TABLE IF NOT EXISTS / ALTER guard so the setup is\n * idempotent across restarts.\n */\n\nconst migrations: { name: string; sql: string[] }[] = [\n {\n name: \"0001_initial_auth_and_jobs\",\n sql: [\n `CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n role TEXT NOT NULL DEFAULT 'user' CHECK (role IN ('admin','user')),\n password_salt TEXT,\n password_hash TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,\n token_hash TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n expires_at TEXT NOT NULL\n )`,\n `CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id)`,\n `CREATE TABLE IF NOT EXISTS approved_emails (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n role TEXT NOT NULL DEFAULT 'user' CHECK (role IN ('admin','user')),\n created_by INTEGER REFERENCES users(id),\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS jobs (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n source TEXT,\n job_number TEXT,\n status TEXT,\n superintendent TEXT,\n project_manager TEXT,\n estimator TEXT,\n location TEXT,\n jurisdiction TEXT,\n general_contractor TEXT,\n foreman TEXT,\n prevailing_wage TEXT,\n permit_number TEXT,\n schedule_group TEXT,\n monday_url TEXT,\n created_by INTEGER REFERENCES users(id),\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS job_labor_rates (\n job_id INTEGER PRIMARY KEY REFERENCES jobs(id) ON DELETE CASCADE,\n labor REAL,\n operator REAL,\n foreman REAL,\n updated_at TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS job_data (\n job_id INTEGER PRIMARY KEY REFERENCES jobs(id) ON DELETE CASCADE,\n data TEXT,\n updated_at TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS monday_snapshots (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n fetched_at TEXT NOT NULL DEFAULT (datetime('now')),\n jobs_json TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS job_files (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n job_id INTEGER REFERENCES jobs(id) ON DELETE CASCADE,\n kind TEXT NOT NULL,\n filename TEXT NOT NULL,\n content_type TEXT,\n size INTEGER,\n blob_key TEXT NOT NULL,\n uploaded_by INTEGER REFERENCES users(id),\n uploaded_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS settings (\n key TEXT PRIMARY KEY,\n value TEXT\n )`,\n ],\n },\n {\n name: \"0002_jobs_created_by\",\n sql: [\n // 0001 ran before created_by was added to the jobs CREATE TABLE, so add it\n // via ALTER TABLE now. Idempotent across restarts via try/catch.\n `ALTER TABLE jobs ADD COLUMN created_by INTEGER REFERENCES users(id)`,\n ],\n },\n];\n\nconst applied = new Set<string>();\n\nexport async function migrate(): Promise<void> {\n // Track applied migrations.\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS _migrations (\n name TEXT PRIMARY KEY,\n applied_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n );\n\n for (const migration of migrations) {\n const row = await sqlite.execute(\n `SELECT name FROM _migrations WHERE name = ?`,\n [migration.name],\n );\n if (row.rows.length > 0) {\n applied.add(migration.name);\n continue;\n }\n await sqlite.batch(\n migration.sql.map((sql) => ({ sql })),\n );\n await sqlite.execute(\n `INSERT INTO _migrations (name) VALUES (?)`,\n [migration.name],\n );\n applied.add(migration.name);\n }\n}\n\n/** Runs migrations once at import time (idempotent). */\nexport const ready = migrate();\n",[170],"345b0511-440e-4372-8675-5a014e9ef1c1","auth.ts","ace8cfc2-a7d3-11f1-8230-1607ee4eb77e",3,["D",1788466300593],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Context, Next } from \"npm:hono\";\n\nexport interface User {\n id: number;\n email: string;\n role: \"admin\" | \"user\";\n}\n\nexport const SESSION_COOKIE = \"pcc_session\";\nconst SESSION_DAYS = 30;\n\nconst encoder = new TextEncoder();\n\nfunction bufToHex(buf: ArrayBuffer): string {\n return [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nfunction hexToBuf(hex: string): Uint8Array {\n const out = new Uint8Array(hex.length / 2);\n for (let i = 0; i < out.length; i++) out[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);\n return out;\n}\n\nasync function randomHex(bytes: number): Promise<string> {\n const buf = crypto.getRandomValues(new Uint8Array(bytes));\n return bufToHex(buf.buffer);\n}\n\n/** PBKDF2-SHA256 password hashing with a per-user random salt. */\nexport async function hashPassword(password: string): Promise<{ salt: string; hash: string }> {\n const salt = await randomHex(16);\n const keyMaterial = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n \"PBKDF2\",\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt: hexToBuf(salt), iterations: 120_000, hash: \"SHA-256\" },\n keyMaterial,\n 256,\n );\n return { salt, hash: bufToHex(bits) };\n}\n\nexport async function verifyPassword(password: string, salt: string, hash: string): Promise<boolean> {\n try {\n const keyMaterial = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n \"PBKDF2\",\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt: hexToBuf(salt), iterations: 120_000, hash: \"SHA-256\" },\n keyMaterial,\n 256,\n );\n return bufToHex(bits) === hash;\n } catch {\n return false;\n }\n}\n\n/** Create a session for a user; returns the raw token to set as the cookie. */\nexport async function createSession(userId: number): Promise<{ token: string; expiresAt: string }> {\n const id = await randomHex(16);\n const token = await randomHex(32);\n const tokenHash = bufToHex((await crypto.subtle.digest(\"SHA-256\", encoder.encode(token))).buffer);\n const expiresAt = new Date(Date.now() + SESSION_DAYS * 24 * 60 * 60 * 1000).toISOString();\n await sqlite.execute(\n `INSERT INTO sessions (id, user_id, token_hash, expires_at) VALUES (?, ?, ?, ?)`,\n [id, userId, tokenHash, expiresAt],\n );\n return { token, expiresAt };\n}\n\nexport function sessionCookieHeader(token: string, expiresAt: string): string {\n return `${SESSION_COOKIE}=${token}; HttpOnly; Secure; SameSite=Lax; Path=/; Expires=${new Date(expiresAt).toUTCString()}`;\n}\n\nexport const clearCookieHeader = `${SESSION_COOKIE}=; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=0`;\n\n/** Resolve the current user from the request's cookie, or null. */\nexport async function getSessionUser(req: Request): Promise<User | null> {\n const cookie = req.headers.get(\"cookie\") ?? \"\";\n const match = cookie.split(\";\").map((s) => s.trim()).find((c) => c.startsWith(`${SESSION_COOKIE}=`));\n if (!match) return null;\n const token = match.slice(SESSION_COOKIE.length + 1);\n if (!token) return null;\n const tokenHash = bufToHex((await crypto.subtle.digest(\"SHA-256\", encoder.encode(token))).buffer);\n const rows = await sqlite.execute(\n `SELECT s.expires_at AS exp, u.id AS id, u.email AS email, u.role AS role\n FROM sessions s JOIN users u ON u.id = s.user_id\n WHERE s.token_hash = ?`,\n [tokenHash],\n );\n if (rows.rows.length === 0) return null;\n const row = rows.rows[0] as { exp: string; id: number; email: string; role: string };\n if (new Date(row.exp).getTime() < Date.now()) return null;\n return { id: Number(row.id), email: row.email, role: row.role as \"admin\" | \"user\" };\n}\n\n/** Hono middleware: require a logged-in user, else 401 JSON (for /api/*). */\nexport async function requireAuth(c: Context, next: Next) {\n const user = await getSessionUser(c.req.raw);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n c.set(\"user\", user);\n await next();\n}\n\n/** Hono middleware: require admin role. */\nexport async function requireAdmin(c: Context, next: Next) {\n const user = c.get<User>(\"user\");\n if (!user || user.role !== \"admin\") {\n return c.json({ error: \"Forbidden\" }, 403);\n }\n await next();\n}\n",[177],"1946f530-54c0-4ff0-b6da-9f835cf97bc6","README.md","27d70b36-a7d4-11f1-942c-1607ee4eb77e",33,["D",1788489041300],"# Production Command Center — Val Town migration\n\nA Val Town-native rebuild of the NDX Production Command Center. Cloudflare\nNext.js/Vinext has been replaced with **Hono** (routes) + a client-side **React**\nfrontend. **Cloudflare D1** → this val's scoped SQLite. **Cloudflare R2** → this\nval's scoped Blob Storage.\n\n> **Phase status: Phase 2 — non-Monday dashboard features complete.**\n> Auth, roles, the full dashboard (jobs, rates, Vista/BusyBusy imports, cost\n> consolidation, equipment/crew/phase views, equipment moves, reports), and\n> permanent job storage are implemented and tested. Monday.com remains\n> disconnected. No production job data is loaded.\n\n## Try it\n\n- [Launch the app](url:index.ts)\n- [View source](url:/source)\n- [Add `MONDAY_TOKEN`](https://www.val.town/x/wnewton/production-command-center/environment-variables?key=MONDAY_TOKEN)\n\nSign in with the existing administrator account. Every dashboard page and data\nAPI requires authentication.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[\"index.ts (Hono server)\"]\n Hono -->|serves| Root[\"frontend/root.tsx (HTML shell)\"]\n Root -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"frontend/App.tsx (auth + dashboard)\"]\n App -->|\"fetch /api/*\"| Hono\n Hono -->|SQLite| DB[\"project-scoped SQLite (std/sqlite/main.ts)\"]\n Hono -->|Blob| Blob[\"scoped Blob Storage (original uploads)\"]\n Hono -->|secrets| Env[\"Deno.env MONDAY_TOKEN (server-only)\"]\n```\n\n## Files\n\n```\nindex.ts ← Hono HTTP entrypoint (auth + jobs + data + files + rates)\ndb.ts ← SQLite migrations (users, sessions, jobs, rates, data, Monday, files)\nauth.ts ← PBKDF2 hashing, HTTP-only session cookies, role middleware\nequipmentRates.ts ← Equipment rate book (source of hourly operating rates)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint\n App.tsx ← Auth + jobs, rates, imports, cost/equipment/report views\n styles.css ← NDX black/white/red interface\n```\n\n## Auth model\n\n- **Email + password** login (PBKDF2-SHA256 hashed, per-user salt).\n- **HTTP-only, Secure, SameSite=Lax** session cookie (`pcc_session`), token hashed in DB, 30-day expiry.\n- **Approved-email allowlist** (`approved_emails`) with `admin` / `user` roles. Admins manage jobs; both may view/enter data.\n- Every data API requires auth (`requireAuth`); job create/edit/delete also requires `requireAdmin`.\n\n## Administrator password recovery\n\nA \"Forgot password?\" link on the sign-in screen opens a recovery form. To reset an\nadministrator password you need the administrator email, the recovery code, and a\nnew password entered twice.\n\n- The recovery code is read **only** from the `ADMIN_RECOVERY_CODE` environment\n variable — it is never hardcoded, displayed, or logged.\n- The new password is hashed with the same PBKDF2 system used for sign-in.\n- On success all of that administrator's sessions are invalidated (signed out).\n- The email + code combination is validated with a timing-safe comparison and\n failures return a generic message (no user-enumeration).\n- No default password or hardcoded secret is used.\n\n👉 Add `ADMIN_RECOVERY_CODE` here: https://www.val.town/x/wnewton/production-command-center/environment-variables?key=ADMIN_RECOVERY_CODE\n\n## Phase 2 — implemented & tested\n\n- **Jobs** — create, select (top bar), edit, delete (cascades data, rates, files, blobs).\n- **Per-job labor / operator / foreman rates** — saved per job with standard defaults.\n- **Vista TXT target import** — browser-side CSV parsing, targets stored in the job's production map, original saved to Blob.\n- **BusyBusy Excel import** — SheetJS in the browser; actual costs per cost code, equipment usage, crew size, phase-code breakdown, equipment moves. Original saved to Blob.\n- **Cost-code consolidation** — first-4-digit grouping (1201.2 + 1201.3 → 1201), toggle in the cost-code table.\n- **Equipment usage / crew size / phase-code views** — most-used equipment, crew-by-workday, expandable per-phase detail.\n- **Equipment moves (phase 1101)** — equipment moved, move hours, driver labor cost, hauling truck cost, total; no charge for the transported machine.\n- **Manual production + cost per unit** — enter quantities per cost code; actual vs. Vista target unit cost.\n- **Reports + print/PDF** — executive report cover, top cost codes, print stylesheet.\n- **Permanent storage** — job data in SQLite, original uploads in Blob Storage keyed by job.\n\n**Monday.com: disconnected.** The Utility Schedule import is deferred to Phase 3.\n\n## Remaining (Phase 3)\n\n- Set `MONDAY_TOKEN` environment variable.\n- Wire the Monday.com Utility Schedule board import (map jobs, exclude the `Completed.` group, add the refresh button, use the `monday_snapshots` table).\n- Optionally re-import the tail of the equipment-rate PDF (the migration source was truncated at entry `5103`, so `equipmentRates.ts` carries 96 records; some small-tool entries may be missing).\n\n## Secrets\n\nNo added env vars are required for Phase 2 — the val injects its own API token. The single secret needed for Phase 3 is `MONDAY_TOKEN`.\n\n👉 Add `MONDAY_TOKEN` here: https://www.val.town/x/wnewton/production-command-center/environment-variables?key=MONDAY_TOKEN\n\n## Safety\n\n- Monday.com token (when added) stays server-side only.\n- All reads/writes/uploads are authenticated; uploaded file type + size validated.\n- Parameterized SQL throughout.\n- The live hosted Command Center is untouched.\n",[184],"b4ddd245-b24d-43c0-84da-9e5509f17f07","scripts","3602a262-390e-4ee8-b50a-14fa58db107b",17,["D",1788472667790],"directory",[191],"d282a7b4-665c-4fa4-96fc-c126b9fb15e5","frontend","ba293578-a7d3-11f1-8201-1607ee4eb77e",5,["D",1788466322820],[198],"pulls","branches","forks","envVars",{"_210":179,"_212":70},"connections",{"_210":70,"_211":70},"count","unfilledCount","emptyCount",{"_50":197,"_38":198,"_36":199,"_147":-5,"_48":49,"_47":200,"_149":66,"_45":275,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_226":276,"_33":277},{"_50":271,"_38":39,"_36":37,"_147":199,"_48":49,"_47":14,"_149":31,"_45":272,"_13":258,"_40":41,"_42":44,"_30":31,"_151":-5,"_226":273,"_33":274},{"_50":263,"_38":264,"_36":265,"_147":199,"_48":49,"_47":266,"_149":66,"_45":267,"_13":70,"_40":41,"_42":268,"_30":31,"_151":-5,"_226":269,"_33":270},{"_50":255,"_38":256,"_36":257,"_147":199,"_48":49,"_47":258,"_149":66,"_45":259,"_13":70,"_40":41,"_42":260,"_30":31,"_151":-5,"_226":261,"_33":262},{"_50":247,"_38":248,"_36":249,"_147":199,"_48":49,"_47":250,"_149":31,"_45":251,"_13":179,"_40":26,"_42":252,"_30":31,"_151":-5,"_226":253,"_33":254},{"_50":190,"_38":191,"_36":192,"_147":-5,"_48":49,"_47":193,"_149":66,"_45":244,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_226":245,"_33":246},{"_50":183,"_38":184,"_36":185,"_147":-5,"_48":49,"_47":186,"_149":31,"_45":241,"_13":157,"_40":26,"_42":188,"_30":31,"_151":-5,"_226":242,"_33":243},{"_50":176,"_38":177,"_36":178,"_147":-5,"_48":49,"_47":179,"_149":66,"_45":238,"_13":70,"_40":41,"_42":181,"_30":31,"_151":-5,"_226":239,"_33":240},{"_50":169,"_38":170,"_36":171,"_147":-5,"_48":49,"_47":172,"_149":31,"_45":235,"_13":157,"_40":41,"_42":174,"_30":31,"_151":-5,"_226":236,"_33":237},{"_50":162,"_38":163,"_36":164,"_147":-5,"_48":49,"_47":165,"_149":66,"_45":232,"_13":70,"_40":41,"_42":167,"_30":31,"_151":-5,"_226":233,"_33":234},{"_50":153,"_38":154,"_36":64,"_147":-5,"_48":49,"_47":155,"_149":31,"_45":229,"_13":157,"_40":158,"_42":159,"_30":31,"_151":160,"_226":230,"_33":231},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":225,"_13":70,"_40":41,"_42":109,"_30":31,"_151":-5,"_226":227,"_33":228},["D",1788450878935],"children",[],[145],["D",1788488919300],[],[154],["D",1788466317861],[],[163],["D",1788472738104],[],[170],["D",1788466300593],[],[177],["D",1788489041300],[],[184],["D",1788472667790],[],[191],"7c5f6095-1ea6-438c-8ce2-b4c0dac7d356","styles.css","ff077a2e-a7d3-11f1-92c0-1607ee4eb77e",34,["D",1788490751989],"/* Production Command Center — NDX black/white/red interface */\n:root{--navy:#090909;--red:#d71920;--ink:#111;--muted:#707070;--line:#dedede;--paper:#f3f3f3;--shadow:0 10px 30px rgba(0,0,0,.075)}\n*{box-sizing:border-box}\nhtml{background:var(--paper)}\nbody{margin:0;background:radial-gradient(circle at 92% 4%,rgba(196,18,48,.07),transparent 25%),radial-gradient(circle at 42% 96%,rgba(0,0,0,.035),transparent 32%),var(--paper);color:var(--ink);font-family:\"Manrope\",Arial,sans-serif;-webkit-font-smoothing:antialiased}\nbutton{border:1px solid #d7dfe2;background:#fff;border-radius:6px;padding:10px 14px;margin-left:7px;font-size:10px;font-weight:800;color:#455660;cursor:pointer}\n.gold{background:var(--red);border-color:var(--red);color:#fff}\n.shell{min-height:100vh;display:block}\n.shell aside{position:fixed;inset:0 auto 0 0;z-index:30;width:258px;padding:24px 16px 20px;background:linear-gradient(165deg,#141414 0%,#090909 58%,#000 100%);box-shadow:12px 0 40px rgba(0,0,0,.14)}\n.shell aside:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 0,rgba(196,18,48,.3),transparent 28%),radial-gradient(circle at 100% 92%,rgba(196,18,48,.12),transparent 34%)}\n.brand,nav,.job,.user{position:relative;z-index:1}\n.brand{display:flex;gap:13px;align-items:center;padding:2px 7px 24px;border-bottom:1px solid rgba(255,255,255,.11)}\n.brand>i{width:50px;height:50px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:linear-gradient(145deg,#d81d3d,#aa0e28);box-shadow:0 10px 24px rgba(196,18,48,.3);display:grid;place-items:center;font:800 17px \"Manrope\";letter-spacing:-.08em;color:#fff;font-style:normal}\n.brand>i span{font-size:13px}\n.brand b{font-size:14px;letter-spacing:-.02em;color:#fff}\n.brand small{margin-top:5px;color:#a9a9a9;font:500 8px \"DM Mono\";letter-spacing:.11em}\n.brand span,.user span{display:flex;flex-direction:column}\n.shell nav{display:flex;flex-direction:column;gap:5px;margin-top:22px}\n.shell nav button{position:relative;display:flex;align-items:center;gap:12px;min-height:47px;padding:0 12px;border:0;border-radius:12px;color:#b7b7b7;background:transparent;font-size:11px;font-weight:600;transition:170ms ease;margin-left:0;width:100%;text-align:left}\n.shell nav button:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}\n.shell nav button>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#9c9c9c;background:rgba(255,255,255,.055);font-size:13px}\n.shell nav button.active{color:#fff;background:rgba(255,255,255,.1);box-shadow:0 8px 22px rgba(0,0,0,.1)}\n.shell nav button.active:before{content:\"\";position:absolute;left:0;width:3px;height:22px;border-radius:0 4px 4px 0;background:#e31b3d}\n.shell nav button.active>span{color:#fff;background:rgba(196,18,48,.72)}\n.job{margin-top:auto;border:0;border-top:1px solid rgba(255,255,255,.11);border-radius:0;padding:19px 10px 0!important;background:transparent!important;display:flex;flex-direction:column;gap:7px}\n.job small{color:#b8b8b8;font:500 8px \"DM Mono\";letter-spacing:.07em}\n.job b{font-size:11px;color:#fff}\n.job em{color:#ddd;font:500 9px \"DM Mono\";font-style:normal}\n.user{border-top:0;margin-top:18px;padding:0 10px;display:flex;gap:9px;align-items:center}\n.user>i{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#d91b3b,#b40e2a);display:grid;place-items:center;color:#fff;font-style:normal;font-size:10px;font-weight:bold}\n.user b{font-size:10px;color:#fff}\n.user small{font-size:8px;color:#a9a9a9}\n.shell main{width:calc(100% - 258px);max-width:none;min-height:100vh;margin-left:258px;padding:0 34px 66px}\n.shell main>header{position:sticky;top:0;z-index:20;min-height:92px;margin:0 -34px 30px;padding:17px 34px;align-items:center;display:flex;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(220,220,220,.92);box-shadow:0 8px 30px rgba(0,0,0,.04);backdrop-filter:blur(22px) saturate(1.2)}\nheader p{font-size:8px;letter-spacing:1.7px;font-weight:800;color:#8a979e;margin:0 0 7px}\nheader h1{font:700 clamp(25px,2.3vw,35px) \"Manrope\";line-height:1;letter-spacing:-.05em;margin:0 0 6px}\nheader span{font-size:11px;color:var(--muted)}\n.header-actions{display:flex;align-items:center;gap:10px}\nheader button{min-height:42px;margin:0;border-radius:11px;padding:0 17px;font-size:10px;transition:170ms ease}\nheader button:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.14)}\nheader .gold{background:linear-gradient(145deg,#d91b3b,#b40e2a)!important;box-shadow:0 5px 14px rgba(196,18,48,.22)}\nheader .logout{background:#fff;color:#111;border-color:#dedede}\n.top-job-picker{display:grid;gap:3px;min-width:235px;padding:7px 12px;border:1px solid #dbe3de;border-radius:11px;background:rgba(255,255,255,.82)}\n.top-job-picker small{color:#707070;font:500 8px \"DM Mono\";letter-spacing:.1em}\n.top-job-picker select{border:0;outline:0;background:transparent;color:#111;font-size:11px;font-weight:600}\n.status-line{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:11px 15px;margin-bottom:15px;font-size:10px;font-weight:700;color:#b51218}\n.panel,.kpis article{background:rgba(255,255,255,.92);border:1px solid rgba(220,220,220,.95);border-radius:17px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}\n.panel{padding:21px;margin-bottom:18px;overflow:hidden}\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:15px 0}\n.kpis article{min-height:145px;padding:21px 22px;border-top:3px solid #111;transition:180ms ease}\n.kpis article>i{display:grid;place-items:center;width:27px;height:27px;background:#f7e7e7;color:var(--red);border-radius:6px;font-style:normal;font-weight:bold}\n.kpis article p{margin-top:15px;font-size:8px;letter-spacing:1.5px;font-weight:800;color:#8a979e}\n.kpis h2{font:500 28px \"DM Mono\";margin:0 0 6px}\n.kpis span{font-size:8px;color:#84929a}\n.kpis .accent{border-top:3px solid var(--red)}\n.import-strip{display:flex;align-items:center;gap:9px;background:linear-gradient(145deg,#1a1a1a,#050505);color:#fff;border-left:5px solid var(--red);border-radius:22px;padding:13px 15px;margin-top:15px;box-shadow:0 18px 44px rgba(0,0,0,.18)}\n.import-strip>div{margin-right:auto}\n.import-strip p{color:#e1484d;margin-bottom:4px;font-size:8px;font-weight:800;letter-spacing:1.7px}\n.import-strip b{font-size:11px}\n.import-strip button{min-height:42px;border-radius:11px;border-color:#444;background:#222;color:#fff}\n.empty-state{padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#7b868c;text-align:center}\n.empty-state b{font:700 18px Georgia;color:#111}\n.empty-state span{font-size:10px;max-width:520px;line-height:1.5}\n.view-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e7e8;padding-bottom:16px}\n.view-head p{margin-bottom:4px;color:var(--red);font-size:8px;font-weight:800;letter-spacing:1.5px}\n.view-head h3{font:700 20px \"Manrope\";margin:0}\n.source-pill{padding:6px 9px;border-radius:20px;background:#f6e7ea;color:#b5122c;font:600 7px \"DM Mono\";letter-spacing:.08em}\n/* Migration checklist */\n.migration-panel{padding:22px!important}\n.migration-list{display:flex;flex-direction:column;margin-top:8px}\n.migration-row{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 6px;border-top:1px solid #ececec}\n.migration-row>i{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;font-style:normal;background:#eee;color:#999;font:600 12px \"DM Mono\"}\n.migration-row.done>i{background:#111;color:#fff}\n.migration-row>span{display:flex;flex-direction:column;gap:3px}\n.migration-row b{font-size:11px}\n.migration-row small{font-size:9px;color:#7a7a7a;line-height:1.4}\n.migration-note{margin-top:16px;padding:13px 15px;border-left:4px solid var(--red);background:#f8eeee;border-radius:10px;font-size:10px;line-height:1.5;color:#7a5a5c}\n.migration-note code{background:#fff;border:1px solid #e2ccce;padding:2px 6px;border-radius:5px;color:#b51218}\n/* Auth screens */\n.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px}\n.auth-card{width:min(440px,100%);background:rgba(255,255,255,.95);border:1px solid rgba(220,220,220,.95);border-radius:20px;box-shadow:var(--shadow);padding:34px;display:flex;flex-direction:column}\n.brand-mark{width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#d81d3d,#aa0e28);box-shadow:0 10px 24px rgba(196,18,48,.3);display:grid;place-items:center;font:800 20px \"Manrope\";letter-spacing:-.08em;color:#fff}\n.brand-mark span{font-size:15px}\n.auth-kicker{margin-top:24px;color:var(--red);font-size:9px;font-weight:800;letter-spacing:2px}\n.auth-card h1{font:700 26px \"Manrope\";letter-spacing:-.02em;margin:6px 0 8px}\n.auth-sub{font-size:11px;line-height:1.55;color:#707070;margin:0 0 18px}\n.auth-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:8px;font-weight:800;letter-spacing:1px;color:#777}\n.auth-card input{border:1px solid #d8dfe2;border-radius:10px;padding:12px 13px;font-size:12px}\n.auth-card .gold{min-height:46px;border-radius:11px;margin:6px 0 0;font-size:12px}\n.auth-status{font-size:11px;color:#b51218;background:#f8eeee;border-radius:8px;padding:9px 11px;margin:0 0 10px}\n.auth-loading{color:#777;font-size:11px;margin-top:20px}\n.backdrop{position:fixed;inset:0;background:rgba(8,8,8,.74);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:20px;z-index:100;backdrop-filter:blur(5px)}\n.backdrop form{width:min(550px,100%);display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden;margin:auto;background:#fff;padding:23px;border-radius:17px;box-shadow:0 30px 90px rgba(0,0,0,.32)}\n/* Modal shell: pin the header and the Save/Cancel actions; only the field body scrolls */\n.backdrop form>.form-head{flex:0 0 auto}\n.backdrop form>.actions{flex:0 0 auto}\n.backdrop form>.form-grid{flex:1 1 auto;min-height:0;overflow-y:auto}\n.form-head{display:flex;justify-content:space-between;margin:-23px -23px 20px;padding:19px 24px;color:#fff;background:#111;border-radius:17px 17px 0 0}\n.form-head p{color:#e15469}\n.form-head h2{font:700 23px \"Manrope\";margin:0}\n.form-head button{border:0;font-size:22px;color:#fff;background:transparent}\n.create-job-form>label{display:flex;flex-direction:column;gap:7px;margin-top:20px;font-size:8px;font-weight:bold;letter-spacing:1px;color:#777}\n.create-job-form>label input{border:1px solid #d8e0e3;border-radius:6px;padding:12px;font-size:12px}\n.job-help{font-size:9px;line-height:1.5;margin-top:12px;color:#888}\n.actions{display:flex;justify-content:flex-end;margin-top:17px}\n@media(max-width:1100px){.shell aside{width:82px}.shell main{width:calc(100% - 82px);margin-left:82px}.brand span,.job,.user span{display:none}.brand>i{width:48px}.shell nav button{font-size:0;padding:0 10px}.top-job-picker{min-width:180px}}\n@media(max-width:760px){.shell aside{position:static;width:100%;height:68px;min-height:0;padding:9px 14px}.shell aside nav,.job,.user{display:none}.brand{border:0;padding:0}.shell main{width:100%;margin:0;padding:0 15px 45px}.shell main>header{position:static;margin:0 -15px 20px;padding:16px}.kpis{grid-template-columns:1fr 1fr}}\n/* Print */\n@media print{aside,.header-actions,.import-strip,.logout{display:none!important}.shell main{margin:0;width:100%;padding:0}.panel{box-shadow:none;border:1px solid #ddd}}\n\n/* ===== Phase 2 components ===== */\n/* Monday status strip */\n.monday-strip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:5px solid #999;border-radius:14px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow)}\n.monday-strip>div{display:flex;flex-direction:column;gap:3px;margin-right:auto}\n.monday-strip p{color:#8a979e;margin:0;font-size:8px;font-weight:800;letter-spacing:1.5px}\n.monday-strip b{font-size:12px}\n.monday-strip span{font-size:10px;color:#7a848a}\n.monday-strip.not-connected{border-left-color:#b0b0b0}\n.monday-strip.not-connected b{color:#8a8a8a}\n.monday-strip button{min-height:36px;border-radius:10px;background:#f0f0f0;color:#999;cursor:not-allowed}\n/* Filters */\n.filters{height:56px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:28px;margin-top:14px;box-shadow:var(--shadow)}\n.filters label{font-size:7px;font-weight:bold;color:#87959d;display:flex;flex-direction:column;gap:5px}\n.filters select{border:0;background:#fff;font-size:10px;font-weight:bold}\n.filters>span{margin-left:auto;font-size:9px;color:#b51218}\n/* Jobs manager */\n.jobs-panel{padding:22px!important}\n.create-job-inline{display:flex;gap:10px;margin:16px 0}\n.create-job-inline input{flex:1;border:1px solid #d8e0e3;border-radius:10px;padding:12px;font-size:12px}\n.create-job-inline button{margin:0}\n.job-list{display:flex;flex-direction:column}\n.job-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 14px;border-top:1px solid #ececec}\n.job-list-row.active{background:#f8f2f2;border-left:3px solid var(--red)}\n.job-list-row>span:first-child{display:flex;flex-direction:column;gap:4px}\n.job-list-row b{font-size:12px}\n.job-list-row small{font-size:9px;color:#7a848a}\n.job-list-actions{display:flex;gap:6px}\n.job-list-actions button{margin:0;min-height:32px;border-radius:8px}\n.danger-ghost{color:#b51218;border-color:#e2ccce;background:#fff}\n.danger{background:#b51218;border-color:#b51218;color:#fff}\n.wide-form{width:min(640px,100%)!important}\n/* Labor rates */\n.labor-settings{display:grid;grid-template-columns:1.5fr .7fr;gap:14px}\n.rate-settings-card{padding:24px!important}\n.settings-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e4e7e8;padding-bottom:17px}\n.settings-head h3,.prevailing-card h3{font:700 21px \"Manrope\";margin:0}\n.save-status{font-size:9px;color:#d71920;background:#f8e8e8;padding:6px 9px;border-radius:14px}\n.settings-job{display:flex;flex-direction:column;gap:6px;margin:19px 0;font-size:8px;letter-spacing:1px;font-weight:bold;color:#777}\n.settings-job input{width:100%;border:1px solid #d8dfe2;border-radius:7px;padding:12px;background:#f5f5f5;font-size:11px;font-weight:bold}\n.rate-input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\n.rate-input-grid>label{border:1px solid #dedede;border-radius:8px;padding:15px}\n.rate-input-grid>label>span{display:flex;justify-content:space-between;font-size:11px;font-weight:bold}\n.rate-input-grid small{font-size:7px;color:#888}\n.rate-input-grid label>div{display:flex;align-items:center;margin-top:12px}\n.rate-input-grid i{font:700 20px Georgia;color:#d71920;font-style:normal}\n.rate-input-grid input{width:100%;border:0;border-bottom:2px solid #111;padding:5px;font:700 25px Georgia;outline:none}\n.rate-input-grid em{font-size:9px;color:#777;font-style:normal;white-space:nowrap}\n.rate-actions{display:flex;align-items:center;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid #e4e7e8}\n.rate-actions>span{margin-right:auto;max-width:45%;font-size:9px;line-height:1.5;color:#76848b}\n.prevailing-card{background:#111!important;color:#fff!important;display:flex;gap:16px;align-items:flex-start}\n.prevailing-card>i{width:42px;height:42px;border:1px solid #d71920;color:#fff;background:#d71920;display:grid;place-items:center;border-radius:7px;font-style:normal;font-weight:bold}\n.prevailing-card p{color:#e33b40}\n.prevailing-card span{font-size:10px;line-height:1.6;color:#bfc3c5;display:block;margin-top:12px}\n/* Daily */\n.daily-view{padding:22px!important}\n.daily-row{display:grid;grid-template-columns:2fr .8fr .7fr .9fr .9fr .9fr;align-items:center;min-height:58px;border-bottom:1px solid #eceff0;font-size:9px}\n.daily-head{min-height:34px;font-size:7px;font-weight:bold;letter-spacing:.7px;color:#7b868c}\n.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0}\n.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:7px;font-weight:bold;color:#7d8b93}\n.form-grid .wide{grid-column:1/-1}\n.form-grid input,.form-grid select{border:1px solid #d8e0e3;border-radius:6px;padding:10px}\n.equipment-calc{border:1px solid #dedede;border-radius:7px;padding:11px 13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;background:#fafafa}\n.equipment-calc span{display:flex;flex-direction:column}\n.equipment-calc small{font-size:7px;letter-spacing:1px;color:#777}\n.equipment-calc b{font:700 19px Georgia;margin-top:3px}\n.equipment-calc em{font-style:normal;font-size:9px;color:#777}\n.calculated{background:#f8eeee;border-left:4px solid var(--red);padding:12px;display:flex;justify-content:space-between;border-radius:11px}\n.calculated span{font-size:7px}\n.calculated b{font:700 16px Georgia;color:#b51218}\n/* Operations usage */\n.operations-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px;margin-bottom:15px}\n.operations-grid>.panel{margin:0}\n.usage-list{margin-top:14px}\n.usage-row{display:grid;grid-template-columns:28px 1fr auto;gap:11px;align-items:center;padding:11px 0;border-top:1px solid #ececec}\n.usage-row>i{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#111;color:#fff;font:600 9px \"DM Mono\";font-style:normal}\n.usage-row>span{min-width:0;display:flex;flex-direction:column;gap:4px}\n.usage-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}\n.usage-row small{color:#7a7a7a;font-size:8px}\n.usage-row em{display:block;width:100%;height:4px;border-radius:4px;background:#ececec}\n.usage-row em u{display:block;height:100%;border-radius:4px;background:#c41230;text-decoration:none}\n.usage-row>strong{min-width:62px;text-align:right;font:600 16px \"DM Mono\"}\n.usage-row>strong small{font-size:8px}\n.crew-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}\n.crew-summary>span{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:11px;background:#111;color:#fff}\n.crew-summary small{font:500 7px \"DM Mono\";color:#aaa;letter-spacing:.08em}\n.crew-summary b{font:600 23px \"DM Mono\"}\n.crew-days>div{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-top:1px solid #ececec}\n.crew-days span{display:flex;flex-direction:column;gap:3px}\n.crew-days b{font-size:10px}\n.crew-days small{font-size:8px;color:#7a7a7a}\n.crew-days strong{font:600 15px \"DM Mono\"}\n.crew-days strong small{font:500 8px \"Manrope\"}\n.empty-state.compact{min-height:150px}\n/* Phase controls + phase usage */\n.phase-controls{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin:0 0 12px;padding:11px 14px;border:1px solid #dedede;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.05)}\n.phase-controls p{margin-bottom:4px}\n.phase-controls b{font-size:11px}\n.phase-controls button{min-height:38px;border-color:#111;background:#111;color:#fff}\n.phase-controls button:disabled{opacity:.35;cursor:not-allowed}\n.phase-usage{padding:0!important;margin-bottom:15px!important}\n.phase-usage>.view-head{padding:20px 20px 14px}\n.phase-table{overflow:auto}\n.phase-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(220px,1.5fr) 120px 90px 90px 85px;align-items:center;min-width:900px;min-height:62px;padding:0 20px;border-top:1px solid #ececec}\n.phase-row>span{display:flex;flex-direction:column;gap:4px;padding-right:12px;font-size:10px;text-align:left}\n.phase-row small{color:#7a7a7a;font-size:8px}\n.phase-row em{color:#888;font-size:9px;font-style:normal}\n.phase-row>span:nth-child(n+3) b{font:600 14px \"DM Mono\"}\n.phase-head{min-height:34px;background:#111;color:#fff;border:0}\n.phase-head>span{font:600 7px \"DM Mono\";letter-spacing:.08em}\n.phase-group:nth-child(odd)>.phase-click{background:#fafafa}\n.phase-click{width:100%;margin:0;border:0;border-top:1px solid #ececec;border-radius:0;background:#fff;color:#111}\n.phase-click:hover{background:#f5f5f5}\n.phase-group.open>.phase-click{background:#f8eaed;box-shadow:inset 4px 0 #c41230}\n.phase-name{flex-direction:row!important;align-items:center;gap:10px!important}\n.phase-name i{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:7px;background:#111;color:#fff;font:500 15px \"DM Mono\";font-style:normal}\n.phase-detail{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;min-width:900px;padding:20px 28px 25px 54px;border-top:1px solid #e2c9ce;border-bottom:1px solid #dedede;background:linear-gradient(135deg,#fff 0%,#faf7f8 100%);box-shadow:inset 4px 0 #c41230}\n.detail-title{padding-bottom:10px;border-bottom:1px solid #e5e5e5}\n.detail-title p{margin-bottom:4px;color:#c41230}\n.detail-title>b{font-size:11px}\n.phase-detail .usage-list{margin-top:3px}\n.phase-detail .crew-summary{margin-top:12px}\n.detail-days{max-height:250px;overflow:auto;padding-right:6px}\n.detail-empty{padding:28px 0;color:#777;font-size:10px}\n/* Equipment moves */\n.equipment-moves{padding:0!important}\n.equipment-moves>.view-head{padding:20px 21px 14px}\n.move-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 21px 18px}\n.move-summary>span{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:11px;background:#111;color:#fff}\n.move-summary small{color:#aaa;font:500 7px \"DM Mono\";letter-spacing:.08em}\n.move-summary b{font:600 18px \"DM Mono\"}\n.move-summary .review{background:#fff0d3;color:#946000}\n.move-summary .review small{color:#946000}\n.move-table{overflow:auto}\n.move-row{display:grid;grid-template-columns:115px minmax(210px,1.2fr) minmax(230px,1.4fr) 85px minmax(180px,1fr);align-items:center;min-width:900px;min-height:67px;padding:0 21px;border-top:1px solid #ececec}\n.move-row>span{display:flex;flex-direction:column;gap:4px;padding-right:12px;font-size:10px}\n.move-row b{font-size:10px}\n.move-row small{color:#777;font-size:8px}\n.move-row>span:nth-child(4)>b,.move-row>span:nth-child(5)>b{font:600 14px \"DM Mono\"}\n.move-row em{align-self:flex-start;margin-top:2px;padding:3px 6px;border-radius:10px;background:#fff0d3;color:#946000;font:600 7px \"DM Mono\";font-style:normal}\n.move-head{min-height:34px;background:#111;color:#fff}\n.move-head>span{font:600 7px \"DM Mono\";letter-spacing:.08em}\n.move-row:nth-child(odd):not(.move-head){background:#fafafa}\n/* Rate book */\n.rate-book{padding:0!important;overflow:hidden}\n.rate-tools{display:flex;align-items:center;justify-content:space-between;padding:19px}\n.rate-tools h3{font:700 20px \"Manrope\";margin:0}\n.rate-tools input{width:min(320px,45%);border:1px solid #d8dfe2;border-radius:7px;padding:11px 13px;font-size:11px}\n.rate-header,.rate-row{display:grid;grid-template-columns:1fr 150px;align-items:center}\n.rate-header{padding:10px 19px;background:#111;color:#fff;font-size:7px;letter-spacing:1.2px;font-weight:bold}\n.rate-list{max-height:640px;overflow:auto}\n.rate-row{min-height:48px;padding:0 19px;border-bottom:1px solid #eceff0}\n.rate-row>span{display:flex;align-items:center;gap:10px;font-size:10px}\n.rate-row>span i{width:25px;height:25px;border-radius:5px;background:#f8e7e7;color:#d71920;display:grid;place-items:center;font-style:normal}\n.rate-row strong{font:700 14px Georgia;color:#111}\n.rate-row strong small{font:normal 8px Arial;color:#7b858b;margin-left:3px}\n/* Cost code table */\n.cost-code-panel{padding:0!important;overflow:hidden}\n.cost-code-title{display:flex;justify-content:space-between;align-items:center;padding:18px}\n.cost-code-title h3{font:700 18px \"Manrope\";margin:0}\n.cost-code-title>div:last-child{display:flex;gap:20px}\n.cost-code-title>div:last-child span{display:flex;flex-direction:column}\n.cost-code-title small{font-size:7px;color:#838d92;letter-spacing:.7px}\n.cost-code-title b{font:700 15px Georgia;margin-top:3px}\n.cost-code-title .total{border-left:2px solid #d71920;padding-left:18px}\n.cost-code-scroll{max-height:630px;overflow:auto}\n.cost-code-row{display:grid;grid-template-columns:2.2fr .8fr .9fr .9fr 1.25fr 1fr;align-items:center;gap:10px;min-height:60px;padding:8px 18px;border-top:1px solid #eceff0;font-size:9px}\n.cost-code-head{min-height:32px;background:#111;color:#fff;font-size:7px;letter-spacing:.8px;font-weight:bold}\n.cost-code-row>span:first-child{display:flex;flex-direction:column;gap:4px}\n.cost-code-row>span:first-child small{color:#7e8a91}\n.production-input{display:flex!important;flex-direction:row!important;gap:5px;flex-wrap:wrap}\n.production-input input{width:75px;border:1px solid #d7dfe2;border-radius:5px;padding:7px;font-size:9px}\n.production-input select{border:1px solid #d7dfe2;border-radius:5px;background:#fff;padding:7px;font-size:9px}\n.production-input .scope-note{width:100%;font-size:7px;color:#8b969c;margin-top:1px}\n.unit-cost{display:flex;flex-direction:column;color:#b51218}\n.unit-cost b{font:700 14px Georgia}\n.pending-unit em{font-style:normal;color:#929ca1}\n.cost-code-row:nth-child(even):not(.cost-code-head){background:#fafafa}\n.consolidate-button{min-height:34px;margin:12px 0 0;padding:0 12px;border-color:#111;border-radius:9px;background:#fff;color:#111}\n.consolidate-button.active{border-color:#c41230;background:#c41230;color:#fff}\n/* Unit cost summary */\n.unit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:13px}\n.unit-summary article{background:#111;color:#fff;border-top:3px solid #d71920;border-radius:8px;padding:18px}\n.unit-summary h2{font:700 28px Georgia;margin:0 0 5px}\n.unit-summary span{font-size:9px;color:#aaa}\n/* Split + chart + forecast */\n.split{display:grid;grid-template-columns:1.2fr 1fr;gap:13px;margin-bottom:13px}\n.title{display:flex;justify-content:space-between}\n.title h3{font:700 17px \"Manrope\";margin:0}\n.title button{border:0;padding:0;color:#d71920;background:transparent}\n.chart{height:190px;border-bottom:1px solid #dfe5e7;margin-top:14px;display:flex;justify-content:space-around;align-items:flex-end;background:repeating-linear-gradient(to bottom,#fff 0,#fff 45px,#edf1f2 46px)}\n.bar{width:16%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}\n.bar>b{font-size:7px}\n.bar>span{height:135px;display:flex;align-items:flex-end;gap:3px}\n.bar>span i,.bar>span em{display:block;width:12px;border-radius:2px 2px 0 0}\n.bar>span i{background:#d71920}\n.bar>span em{background:#78a0ad}\n.bar>small{font-size:7px;color:#8d999f;margin:7px 0 -20px}\n.forecast-card{padding:21px 22px!important}\n.forecast-card.on-track{border-top:4px solid #18824b}\n.forecast-card.watch{border-top:4px solid #d68a00}\n.forecast-card.over{border-top:4px solid #c41230}\n.forecast-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}\n.forecast-head h3{margin:0;font-size:17px}\n.forecast-head>span{padding:6px 9px;border-radius:20px;background:#ededed;color:#555;font:600 7px \"DM Mono\";letter-spacing:.06em;white-space:nowrap}\n.forecast-card.on-track .forecast-head>span{background:#e4f3eb;color:#126c3e}\n.forecast-card.watch .forecast-head>span{background:#fff0d3;color:#946000}\n.forecast-card.over .forecast-head>span{background:#f8e2e6;color:#a40f29}\n.forecast-inputs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}\n.forecast-inputs label{padding:10px 11px;border:1px solid #dedede;border-radius:11px;background:#fafafa}\n.forecast-inputs small,.forecast-result small,.forecast-bars small{display:block;color:#777;font:500 7px \"DM Mono\";letter-spacing:.06em}\n.forecast-inputs label>div{display:flex;align-items:center;margin-top:5px}\n.forecast-inputs i{color:#777;font:500 12px \"DM Mono\";font-style:normal}\n.forecast-inputs input{width:100%;border:0;outline:0;background:transparent;font:600 15px \"DM Mono\"}\n.forecast-bars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}\n.forecast-bars>div>span{display:flex;align-items:center;justify-content:space-between}\n.forecast-bars b{font:600 11px \"DM Mono\"}\n.forecast-bars>div>i{display:block;height:6px;margin-top:6px;border-radius:8px;background:#e8e8e8}\n.forecast-bars em{display:block;height:100%;border-radius:8px;background:#111}\n.forecast-bars em.over{background:#c41230}\n.forecast-result{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #e5e5e5}\n.forecast-result>span{display:flex;flex-direction:column;gap:4px}\n.forecast-result b{font:600 12px \"DM Mono\"}\n.forecast-result em{font-size:7px;color:#777;font-style:normal}\n.forecast-result .positive b{color:#126c3e}\n.forecast-result .negative b{color:#b10f2a}\n.forecast-empty{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px;border-radius:11px;background:#f3f3f3}\n.forecast-empty b{font-size:9px}\n.forecast-empty span{font-size:8px;line-height:1.45;color:#777}\n/* Reports */\n.report-view{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}\n.report-cover{background:#111!important;color:#fff!important;border-left:5px solid #d71920!important;padding:28px!important}\n.report-cover h2{font:700 31px Georgia;margin:0 0 8px}\n.report-cover>span{font-size:10px;color:#aaa}\n.report-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}\n.report-kpis>div{border:1px solid #373737;border-radius:7px;padding:16px;display:flex;flex-direction:column;gap:6px}\n.report-kpis small{font-size:7px;color:#aaa;letter-spacing:1px}\n.report-kpis b{font:700 20px Georgia}\n.report-rank{padding:22px!important}\n.rank-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #eceff0}\n.rank-row i{width:24px;height:24px;background:#d71920;color:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:bold}\n.rank-row span{display:flex;flex-direction:column;gap:4px}\n.rank-row b{font-size:9px}\n.rank-row small{font-size:8px;color:#88949a}\n.rank-row strong{font:700 13px Georgia}\n.report-print{margin-top:18px;display:flex;justify-content:flex-end}\n.report-print button{margin:0}\n@media(max-width:900px){.report-view{grid-template-columns:1fr}.unit-summary{grid-template-columns:1fr}.labor-settings{grid-template-columns:1fr}.rate-input-grid{grid-template-columns:1fr}.operations-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.cost-code-panel{overflow:auto}.cost-code-scroll{min-width:900px}.cost-code-title{min-width:900px}}\n@media(max-width:700px){.phase-detail{grid-template-columns:1fr}.rate-tools input{width:60%}.rate-header,.rate-row{grid-template-columns:1fr 95px}}\n@media print{aside,.header-actions,.import-strip,.logout,.monday-strip,.phase-controls,.report-print{display:none!important}.shell main{margin:0;width:100%;padding:0}.report-view{grid-template-columns:1fr 1fr}.panel{box-shadow:none;border:1px solid #ddd}}\n/* Forgot password link on the login / recovery cards */\n.auth-forgot{margin:14px 0 0;text-align:center}\n.auth-forgot .linklike{background:none;border:0;margin:0;padding:0;color:#b51218;font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline}\n.auth-forgot .linklike:hover{color:#8f0e15}\n.auth-forgot .linklike:disabled{color:#aaa;cursor:not-allowed;text-decoration:none}\n",[],[198,248],"de051783-ca3e-431f-9e6c-dbdc3e98605a","root.tsx","bcd5b7d8-a7d3-11f1-893b-1607ee4eb77e",6,["D",1788466327307],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>NDX Command Center

\n <div className=\"chart\">{[0, 0, 0, 0, 0].map((v, i) => <div className=\"bar\" key={i}><b>—</b><span><i style={{ height: v + \"%\" }} /><em style={{ height: v + \"%\" }} /></span><small>{[\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\"][i]}</small></div>)}</div>\n </article>\n <JobCostForecast actualCost={props.rows.reduce((s, r) => s + r.totalCost, 0)} settings={props.forecast} setSettings={props.setForecast} />\n </section>\n\n <CostCodeTable rows={props.rows} production={props.production} setProduction={props.setProduction} consolidated={props.consolidateCodes} setConsolidated={props.setConsolidateCodes} />\n </>\n );\n}\n\n// ---------- Jobs Manager ----------\nfunction JobsManager({ user, jobs, activeJob, onCreate, onUpdate, onDeleteConfirm }: {\n user: User; jobs: Job[]; activeJob: Job | null; onCreate: (name: string) => void;\n onUpdate: (fields: Record<string, string>) => void; onDeleteConfirm: () => void;\n}) {\n const [name, setName] = useState(\"\");\n const [editing, setEditing] = useState<Job | null>(null);\n const [form, setForm] = useState<Record<string, string>>({});\n const fields: [string, string][] = [\n [\"name\", \"Job name\"], [\"job_number\", \"Job #\"], [\"status\", \"Status\"], [\"superintendent\", \"Superintendent\"],\n [\"project_manager\", \"Project manager\"], [\"foreman\", \"Foreman\"], [\"location\", \"Location\"],\n [\"jurisdiction\", \"Jurisdiction\"], [\"general_contractor\", \"General contractor\"],\n [\"prevailing_wage\", \"Prevailing wage\"], [\"permit_number\", \"Permit #\"], [\"schedule_group\", \"Schedule group\"],\n ];\n useEffect(() => { if (editing) { const f: Record<string, string> = {}; for (const [k] of fields) f[k] = String((editing as any)[k] ?? \"\"); setForm(f); } }, [editing]);\n // While the Edit modal is open: lock the background page and close on Escape.\n useEffect(() => {\n if (!editing) return;\n const prev = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n const onKey = (e: KeyboardEvent) => { if (e.key === \"Escape\") setEditing(null); };\n window.addEventListener(\"keydown\", onKey);\n return () => { document.body.style.overflow = prev; window.removeEventListener(\"keydown\", onKey); };\n }, [editing]);\n\n return (\n <section className=\"panel jobs-panel\">\n <div className=\"view-head\"><div><p>JOBS & SETTINGS</p><h3>Manage utility-schedule jobs</h3></div><span className=\"source-pill\">{jobs.length} JOB{jobs.length === 1 ? \"\" : \"S\"}</span></div>\n\n <div className=\"create-job-inline\"><input placeholder=\"New job name\" value={name} onChange={(e) => setName(e.target.value)} /><button className=\"gold\" onClick={() => { if (name.trim()) { onCreate(name.trim()); setName(\"\"); } }}>＋ Create job</button></div>\n\n <div className=\"job-list\">\n {jobs.length === 0 && <div className=\"empty-state compact\"><b>No jobs yet</b><span>Create a job to begin. Tables are intentionally empty in this staging phase.</span></div>}\n {jobs.map((j) => (\n <div className={`job-list-row ${j.id === activeJob?.id ? \"active\" : \"\"}`} key={j.id}>\n <span><b>{j.name}</b><small>{j.job_number ? `${j.job_number} · ` : \"\"}{j.source === \"monday\" ? \"Monday.com\" : \"Manual\"} · created manually</small></span>\n <span className=\"job-list-actions\">\n <button onClick={() => setEditing(j)}>Edit</button>\n {user.role === \"admin\" && <button className=\"danger-ghost\" onClick={onDeleteConfirm}>Delete</button>}\n </span>\n </div>\n ))}\n </div>\n {editing && (\n <div className=\"backdrop\" onMouseDown={() => setEditing(null)}>\n <form className=\"create-job-form wide-form\" onSubmit={(e) => { e.preventDefault(); onUpdate(form); setEditing(null); }} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>EDIT PROJECT</p><h2>{editing.name}</h2></div><button type=\"button\" onClick={() => setEditing(null)}>×</button></div>\n <div className=\"form-grid\">\n {fields.map(([k, label]) => (\n <label className={k === \"name\" ? \"wide\" : \"\"} key={k}>{label.toUpperCase()}<input value={form[k] ?? \"\"} onChange={(e) => setForm({ ...form, [k]: e.target.value })} /></label>\n ))}\n </div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setEditing(null)}>Cancel</button><button className=\"gold\">Save job</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Daily production ----------\nfunction DailyProduction({ entries, rates, onAddEntry, onAdd }: { entries: Entry[]; rates: LaborRates; onAddEntry: (e: Entry) => void; onAdd: () => void }) {\n const [open, setOpen] = useState(false);\n const [form, setForm] = useState({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: \"001 2013 Ram Truck 3500 ST\", equipmentHours: \"\" });\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n useEffect(() => { api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {}); }, []);\n const selected = equipmentRates.find((x) => x.label === form.equipment) ?? equipmentRates[0];\n const equipmentCost = (selected?.rate ?? 0) * Number(form.equipmentHours);\n const laborCost = Number(form.laborHours) * rates.labor + Number(form.operatorHours) * rates.operator + Number(form.foremanHours) * rates.foreman;\n function save(e: React.FormEvent) {\n e.preventDefault();\n onAddEntry({ id: Date.now(), activity: form.activity, unit: form.unit, qty: +form.qty || 0, hours: Number(form.laborHours) + Number(form.operatorHours) + Number(form.foremanHours), labor: laborCost, equipment: equipmentCost });\n setForm({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: equipmentRates[0]?.label ?? \"\", equipmentHours: \"\" });\n setOpen(false);\n }\n return (\n <section className=\"panel daily-view\">\n <div className=\"view-head\"><div><p>FIELD ENTRIES</p><h3>Production and cost log</h3></div><button className=\"gold\" onClick={() => setOpen(true)}>＋ New entry</button></div>\n <div className=\"daily-row daily-head\"><span>ACTIVITY</span><span>QUANTITY</span><span>HOURS</span><span>LABOR</span><span>EQUIPMENT</span><span>TOTAL</span></div>\n {entries.length ? entries.map((e) => (\n <div className=\"daily-row\" key={e.id}><span><b>{e.activity}</b></span><span>{e.qty ? `${e.qty.toLocaleString()} ${e.unit}` : \"Imported total\"}</span><span>{e.hours.toFixed(2)}</span><span>{money(e.labor, 2)}</span><span>{money(e.equipment, 2)}</span><span><b>{money(e.labor + e.equipment, 2)}</b></span></div>\n )) : <div className=\"empty-state\"><b>No production entries yet</b><span>Add a field entry or upload the job’s Excel time sheet.</span></div>}\n\n {open && (\n <div className=\"backdrop\" onMouseDown={() => setOpen(false)}>\n <form onSubmit={save} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DAILY FIELD ENTRY</p><h2>Add production & cost</h2></div><button type=\"button\" onClick={() => setOpen(false)}>×</button></div>\n <div className=\"form-grid\">\n <label className=\"wide\">ACTIVITY<input value={form.activity} onChange={(e) => setForm({ ...form, activity: e.target.value })} /></label>\n <label>QUANTITY<input type=\"number\" value={form.qty} onChange={(e) => setForm({ ...form, qty: e.target.value })} /></label>\n <label>UNIT<select value={form.unit} onChange={(e) => setForm({ ...form, unit: e.target.value })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select></label>\n <label>LABOR HOURS · {money(rates.labor, 2)}/HR<input type=\"number\" step=\".25\" value={form.laborHours} onChange={(e) => setForm({ ...form, laborHours: e.target.value })} /></label>\n <label>OPERATOR HOURS · {money(rates.operator, 2)}/HR<input type=\"number\" step=\".25\" value={form.operatorHours} onChange={(e) => setForm({ ...form, operatorHours: e.target.value })} /></label>\n <label>FOREMAN HOURS · {money(rates.foreman, 2)}/HR<input type=\"number\" step=\".25\" value={form.foremanHours} onChange={(e) => setForm({ ...form, foremanHours: e.target.value })} /></label>\n <label className=\"wide\">EQUIPMENT<select value={form.equipment} onChange={(e) => setForm({ ...form, equipment: e.target.value })}>{equipmentRates.map((x) => <option key={x.label}>{x.label}</option>)}</select></label>\n <label>EQUIPMENT HOURS<input type=\"number\" step=\".25\" value={form.equipmentHours} onChange={(e) => setForm({ ...form, equipmentHours: e.target.value })} /></label>\n <label>HOURLY RATE<input value={money(selected?.rate ?? 0, 2) + \" / hr\"} readOnly /></label>\n </div>\n <div className=\"equipment-calc\"><span><small>EQUIPMENT COST</small><b>{money(equipmentCost, 2)}</b></span><em>{form.equipmentHours || 0} hrs × {money(selected?.rate ?? 0, 2)}/hr</em></div>\n <div className=\"calculated\"><span>CALCULATED TOTAL COST / UNIT</span><b>{money((laborCost + equipmentCost) / Math.max(1, +form.qty), 2)} / {form.unit}</b></div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setOpen(false)}>Cancel</button><button className=\"gold\">Save daily production</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Labor rates ----------\nfunction LaborRateSettings({ job, rates, setRates, status, onSave }: { job: Job | null; rates: LaborRates; setRates: (v: LaborRates) => void; status: string; onSave: (e: React.FormEvent) => void }) {\n return (\n <section className=\"labor-settings\">\n <article className=\"panel rate-settings-card\">\n <div className=\"settings-head\"><div><p>JOB-SPECIFIC LABOR RATES</p><h3>Hourly rate schedule</h3></div><span className=\"save-status\">● {status || \"Ready\"}</span></div>\n <label className=\"settings-job\">JOB<input readOnly value={job?.name ?? \"Select a job\"} /></label>\n <form onSubmit={onSave}>\n <div className=\"rate-input-grid\">\n <RateInput label=\"Labor\" value={rates.labor} onChange={(v) => setRates({ ...rates, labor: v })} />\n <RateInput label=\"Operator\" value={rates.operator} onChange={(v) => setRates({ ...rates, operator: v })} />\n <RateInput label=\"Foreman\" value={rates.foreman} onChange={(v) => setRates({ ...rates, foreman: v })} />\n </div>\n <div className=\"rate-actions\"><span>These rates apply only to <b>{job?.name ?? \"this job\"}</b> and update new production entries immediately.</span><button type=\"button\" onClick={() => setRates(DEFAULT_RATES)}>Use standard rates</button><button className=\"gold\">Save job rates</button></div>\n </form>\n </article>\n <article className=\"panel prevailing-card\"><i>PW</i><div><p>PREVAILING WAGE READY</p><h3>Different job, different rates.</h3><span>Choose a job above, enter its required wage rates, and save. Your standard-rate jobs remain unchanged.</span></div></article>\n </section>\n );\n}\nfunction RateInput({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {\n return <label><span>{label}<small>HOURLY RATE</small></span><div><i>$</i><input type=\"number\" min=\"0\" max=\"500\" step=\".01\" value={value} onChange={(e) => onChange(Number(e.target.value))} /><em>/ hr</em></div></label>;\n}\n\n// ---------- Equipment ----------\nfunction OperationsUsageView({ usage, days, phases, showPhases, setShowPhases }: { usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhases: boolean; setShowPhases: (v: boolean) => void }) {\n const hasData = usage.length > 0 || days.length > 0;\n return <>\n <section className=\"phase-controls\"><div><p>JOB UTILIZATION VIEW</p><b>{showPhases ? \"Equipment and crew by phase code\" : \"Equipment and crew totals\"}</b></div><button disabled={!hasData} onClick={() => setShowPhases(!showPhases)}>{showPhases ? \"← Show job totals\" : \"View by phase code →\"}</button></section>\n {showPhases ? <PhaseCodeUsagePanel phases={phases} /> : <section className=\"operations-grid\"><EquipmentUsagePanel usage={usage} /><CrewSizePanel days={days} /></section>}\n </>;\n}\nfunction EquipmentUsagePanel({ usage }: { usage: EquipmentUsage[] }) {\n const top = usage.slice(0, 5); const max = top[0]?.hours || 1;\n return <article className=\"panel usage-panel\"><div className=\"view-head\"><div><p>TIMESHEET EQUIPMENT</p><h3>Most-used equipment</h3></div>{usage.length > 0 && <span className=\"source-pill\">RANKED BY HOURS</span>}</div>\n {top.length ? <div className=\"usage-list\">{top.map((item, i) => <div className=\"usage-row\" key={item.name}><i>{i + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / max * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"empty-state compact\"><b>No equipment usage yet</b><span>Upload the job’s labor and equipment Excel file to rank equipment by hours.</span></div>}\n </article>;\n}\nfunction CrewSizePanel({ days }: { days: CrewDay[] }) {\n const average = days.length ? days.reduce((sum, d) => sum + d.size, 0) / days.length : 0;\n const peak = days.reduce((m, d) => Math.max(m, d.size), 0);\n const recent = days.slice(-5).reverse();\n return <article className=\"panel crew-panel\"><div className=\"view-head\"><div><p>TIMESHEET CREW</p><h3>Crew size by workday</h3></div>{days.length > 0 && <span className=\"source-pill\">UNIQUE EMPLOYEES</span>}</div>\n {days.length ? <><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{days.length}</b></span></div><div className=\"crew-days\">{recent.map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></> : <div className=\"empty-state compact\"><b>No crew data yet</b><span>Crew size will calculate from unique employee IDs for each workday.</span></div>}\n </article>;\n}\nfunction PhaseCodeUsagePanel({ phases }: { phases: PhaseUsage[] }) {\n const [expanded, setExpanded] = useState(\"\");\n return <section className=\"panel phase-usage\"><div className=\"view-head\"><div><p>PHASE CODE UTILIZATION</p><h3>Equipment and crew by phase</h3></div><span className=\"source-pill\">CLICK A PHASE TO EXPAND</span></div>\n {phases.length ? <div className=\"phase-table\"><div className=\"phase-row phase-head\"><span>PHASE CODE</span><span>MOST-USED EQUIPMENT</span><span>EQUIPMENT HOURS</span><span>AVG. CREW</span><span>PEAK CREW</span><span>WORKDAYS</span></div>\n {phases.map((phase) => { const average = phase.days.length ? phase.days.reduce((s, d) => s + d.size, 0) / phase.days.length : 0; const peak = phase.days.reduce((m, d) => Math.max(m, d.size), 0); const top = phase.equipment[0]; const isOpen = expanded === phase.phaseCode; const maxHours = top?.hours || 1;\n return <div className={`phase-group${isOpen ? \" open\" : \"\"}`} key={phase.phaseCode}><button type=\"button\" className=\"phase-row phase-click\" aria-expanded={isOpen} onClick={() => setExpanded(isOpen ? \"\" : phase.phaseCode)}><span className=\"phase-name\"><i>{isOpen ? \"−\" : \"+\"}</i><b>{phase.phaseCode}</b></span><span>{top ? <><b>{top.name}</b><small>{phase.equipment.length} equipment {phase.equipment.length === 1 ? \"unit\" : \"units\"} used</small></> : <em>No equipment assigned</em>}</span><span><b>{phase.equipment.reduce((s, i) => s + i.hours, 0).toFixed(1)}</b><small>hours</small></span><span><b>{average.toFixed(1)}</b><small>people</small></span><span><b>{peak}</b><small>people</small></span><span><b>{phase.days.length}</b><small>days</small></span></button>\n {isOpen && <div className=\"phase-detail\"><div className=\"phase-equipment-detail\"><div className=\"detail-title\"><p>ALL EQUIPMENT USED</p><b>{phase.equipment.length} units ranked by hours</b></div>{phase.equipment.length ? <div className=\"usage-list\">{phase.equipment.map((item, index) => <div className=\"usage-row\" key={item.name}><i>{index + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} matched cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / maxHours * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"detail-empty\">No equipment assigned to this phase.</div>}</div><div className=\"phase-crew-detail\"><div className=\"detail-title\"><p>CREW BY WORKDAY</p><b>Unique employees per day</b></div><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{phase.days.length}</b></span></div><div className=\"crew-days detail-days\">{phase.days.slice().reverse().map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></div></div>}\n </div>; })}\n </div> : <div className=\"empty-state compact\"><b>No phase-code usage yet</b><span>Upload a BusyBusy time sheet to build the phase-code breakdown.</span></div>}\n </section>;\n}\nfunction EquipmentMovesPanel({ moves }: { moves: EquipmentMove[] }) {\n const totalHours = moves.reduce((s, m) => s + m.hours, 0);\n const totalCost = moves.reduce((s, m) => s + m.cost, 0);\n const review = moves.filter((m) => m.needsReview).length;\n return <section className=\"panel equipment-moves\"><div className=\"view-head\"><div><p>MOBILIZATION PHASE CODE · 1101</p><h3>Equipment moves</h3></div>{moves.length > 0 && <span className=\"source-pill\">{moves.length} {moves.length === 1 ? \"MOVE\" : \"MOVES\"}</span>}</div>\n {moves.length ? <><div className=\"move-summary\"><span><small>EQUIPMENT MOVES</small><b>{moves.length}</b></span><span><small>MOVE HOURS</small><b>{totalHours.toFixed(1)}</b></span><span><small>TOTAL MOVE COST</small><b>{money(totalCost, 2)}</b></span><span className={review ? \"review\" : \"\"}><small>NEEDS REVIEW</small><b>{review}</b></span></div>\n <div className=\"move-table\"><div className=\"move-row move-head\"><span>DATE</span><span>EQUIPMENT MOVED</span><span>HAULING EQUIPMENT / DRIVER</span><span>HOURS</span><span>COST</span></div>\n {moves.map((move) => <div className=\"move-row\" key={move.id}><span>{move.date ? new Date(move.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" }) : \"Date unavailable\"}</span><span><b>{move.movedEquipment}</b><small>{move.description}</small></span><span><b>{move.haulingEquipment}</b><small>{move.driver}</small></span><span><b>{move.hours.toFixed(1)}</b><small>hours</small></span><span><b>{money(move.cost, 2)}</b><small>{money(move.laborCost, 2)} labor + {move.haulingCost > 0 ? `${money(move.haulingCost, 2)} truck` : \"truck rate missing\"}</small>{move.needsReview && <em>Review match</em>}</span></div>)}\n </div></> : <div className=\"empty-state compact\"><b>No equipment moves found yet</b><span>Upload a BusyBusy time sheet. Mobilization entries that name the transported machine in the description will appear here.</span></div>}\n </section>;\n}\nfunction RateBook({ search, setSearch, rates }: { search: string; setSearch: (v: string) => void; rates: EquipmentRate[] }) {\n return <section className=\"panel rate-book\"><div className=\"rate-tools\"><div><p>IMPORTED EQUIPMENT RATES</p><h3>{rates.length} equipment records</h3></div><input placeholder=\"Search unit, make, or model…\" value={search} onChange={(e) => setSearch(e.target.value)} /></div>\n <div className=\"rate-header\"><span>EQUIPMENT ID & DESCRIPTION</span><span>HOURLY RATE</span></div>\n <div className=\"rate-list\">{rates.map((x) => <div className=\"rate-row\" key={x.label}><span><i>⚙</i><b>{x.label}</b></span><strong>{money(x.rate, 2)}<small>/ hr</small></strong></div>)}</div>\n </section>;\n}\n\n// ---------- Cost code + unit cost ----------\nfunction fourDigitCode(value: string) { return value.match(/^\\s*(\\d{4})/)?.[1] ?? value.split(\" - \")[0]; }\nfunction consolidatedRows(rows: CostRow[]) {\n const grouped = new Map<string, CostRow>();\n for (const row of rows) {\n const code = fourDigitCode(row.costCode); const prior = grouped.get(code);\n if (!prior) { grouped.set(code, { ...row, costCode: `${code} - Consolidated` }); continue; }\n prior.laborHours += row.laborHours; prior.operatorHours += row.operatorHours; prior.foremanHours += row.foremanHours;\n prior.equipmentHours += row.equipmentHours; prior.laborCost += row.laborCost; prior.equipmentCost += row.equipmentCost; prior.totalCost += row.totalCost;\n }\n return [...grouped.values()].sort((a, b) => a.costCode.localeCompare(b.costCode));\n}\nfunction CostCodeTable({ rows, production, setProduction, consolidated, setConsolidated }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidated: boolean; setConsolidated: (v: boolean) => void;\n}) {\n const displayedRows = consolidated ? consolidatedRows(rows) : rows;\n const totalLabor = rows.reduce((a, r) => a + r.laborCost, 0);\n const totalEquipment = rows.reduce((a, r) => a + r.equipmentCost, 0);\n return <section className=\"panel cost-code-panel\">\n <div className=\"cost-code-title\"><div><p>BUSYBUSY ACTUAL COSTS</p><h3>{consolidated ? \"Cost consolidated by 4-digit code\" : \"Cost by code + manual production\"}</h3><button type=\"button\" className={consolidated ? \"consolidate-button active\" : \"consolidate-button\"} onClick={() => setConsolidated(!consolidated)}>{consolidated ? \"✓ Consolidated · Show detail\" : \"Consolidate by 4-digit code\"}</button></div><div><span><small>LABOR</small><b>{money(totalLabor, 2)}</b></span><span><small>EQUIPMENT</small><b>{money(totalEquipment, 2)}</b></span><span className=\"total\"><small>TOTAL ACTUAL COST</small><b>{money(totalLabor + totalEquipment, 2)}</b></span></div></div>\n <div className=\"cost-code-scroll\"><div className=\"cost-code-row cost-code-head\"><span>COST CODE</span><span>LABOR COST</span><span>EQUIPMENT COST</span><span>TOTAL COST</span><span>PRODUCTION</span><span>ACTUAL / TARGET</span></div>\n {displayedRows.length === 0 && <div className=\"empty-state compact\"><b>No actual costs yet</b><span>Upload a BusyBusy Excel time sheet to populate cost codes.</span></div>}\n {displayedRows.map((r) => { const code = consolidated ? fourDigitCode(r.costCode) : r.costCode; const exact = production[code]; const matched = Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; const children = consolidated ? Object.entries(production).filter(([key, value]) => fourDigitCode(key) === code && Number(value.qty) > 0).map(([, value]) => value) : []; const units = [...new Set(children.map((value) => value.unit))]; const rolled = children.length && units.length === 1 ? { qty: String(children.reduce((s, v) => s + Number(v.qty), 0)), unit: units[0], note: \"Rolled up from detailed production\" } : undefined; const p = exact ?? rolled ?? matched ?? { qty: \"\", unit: \"LF\" }; const qty = Number(p.qty); const cpU = qty ? r.totalCost / qty : 0;\n return <div className=\"cost-code-row\" key={r.costCode}><span><b>{r.costCode}</b><small>{r.laborHours + r.operatorHours + r.foremanHours} labor hrs · {r.equipmentHours} equipment hrs{consolidated ? \" · grouped by first 4 digits\" : \"\"}</small></span><span>{money(r.laborCost, 2)}</span><span>{money(r.equipmentCost, 2)}</span><span><b>{money(r.totalCost, 2)}</b></span><span className=\"production-input\"><input type=\"number\" min=\"0\" step=\".01\" placeholder=\"Enter qty\" value={p.qty} onChange={(e) => setProduction({ ...production, [code]: { ...p, qty: e.target.value } })} /><select value={p.unit} onChange={(e) => setProduction({ ...production, [code]: { ...p, unit: e.target.value } })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select>{p.note && <small className=\"scope-note\">{p.note}</small>}</span><span className={qty ? \"unit-cost\" : \"pending-unit\"}>{qty ? <><b>{money(cpU, 2)} <small>/ {p.unit}</small></b>{p.targetCost && <small>Target {money(p.targetCost, 2)} / {p.unit}</small>}</> : <em>Awaiting production</em>}</span></div>;\n })}\n </div>\n </section>;\n}\nfunction UnitCostView({ rows, production, setProduction, consolidateCodes, setConsolidateCodes }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void; consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n}) {\n const measured = rows.filter((r) => { const p = production[r.costCode] ?? Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; return Number(p?.qty) > 0; });\n return <><section className=\"unit-summary\"><article><p>MEASURED COST CODES</p><h2>{measured.length}</h2><span>with installed production</span></article><article><p>AWAITING QUANTITY</p><h2>{rows.length - measured.length}</h2><span>cost codes need LF or EA</span></article><article><p>VISTA TARGETS</p><h2>{Object.values(production).filter((p) => p.targetCost).length}</h2><span>target unit costs loaded</span></article></section>\n <CostCodeTable rows={rows} production={production} setProduction={setProduction} consolidated={consolidateCodes} setConsolidated={setConsolidateCodes} />\n </>;\n}\n\n// ---------- Forecast / reports ----------\nfunction JobCostForecast({ actualCost, settings, setSettings }: { actualCost: number; settings: Forecast; setSettings: (v: Forecast) => void }) {\n const budget = Number(settings.budget), completion = Math.min(100, Math.max(0, Number(settings.completion)));\n const ready = budget > 0 && completion > 0;\n const budgetUsed = budget > 0 ? actualCost / budget * 100 : 0;\n const projected = ready ? actualCost / (completion / 100) : 0;\n const variance = ready ? budget - projected : 0;\n const variancePercent = ready ? Math.abs(variance) / budget * 100 : 0;\n const state = !ready ? \"setup\" : variance >= 0 ? \"on-track\" : variancePercent <= 5 ? \"watch\" : \"over\";\n const label = state === \"setup\" ? \"ADD BUDGET + PROGRESS\" : state === \"on-track\" ? \"ON TRACK\" : state === \"watch\" ? \"WATCH\" : \"PROJECTED OVER BUDGET\";\n return <article className={`panel forecast-card ${state}`}><div className=\"forecast-head\"><div><p>JOB COST FORECAST</p><h3>Budget health + projected finish</h3></div><span>{label}</span></div>\n <div className=\"forecast-inputs\"><label><small>COST BUDGET</small><div><i>$</i><input type=\"number\" min=\"0\" step=\"100\" placeholder=\"Enter budget\" value={settings.budget} onChange={(e) => setSettings({ ...settings, budget: e.target.value })} /></div></label><label><small>ESTIMATED JOB COMPLETION</small><div><input type=\"number\" min=\"0\" max=\"100\" step=\"1\" placeholder=\"0\" value={settings.completion} onChange={(e) => setSettings({ ...settings, completion: e.target.value })} /><i>%</i></div></label></div>\n <div className=\"forecast-bars\"><div><span><small>JOB COMPLETION</small><b>{completion.toFixed(0)}%</b></span><i><em style={{ width: `${completion}%` }} /></i></div><div><span><small>BUDGET SPENT</small><b>{budget > 0 ? `${budgetUsed.toFixed(0)}%` : \"—\"}</b></span><i><em className={budgetUsed > 100 ? \"over\" : undefined} style={{ width: `${Math.min(100, budgetUsed)}%` }} /></i></div></div>\n {ready ? <div className=\"forecast-result\"><span><small>ACTUAL COST TO DATE</small><b>{money(actualCost, 2)}</b></span><span><small>PROJECTED FINAL COST</small><b>{money(projected, 2)}</b></span><span className={variance >= 0 ? \"positive\" : \"negative\"}><small>PROJECTED VARIANCE</small><b>{variance >= 0 ? `${money(variance, 2)} under` : `${money(Math.abs(variance), 2)} over`}</b><em>{variancePercent.toFixed(1)}% of budget</em></span></div> : <div className=\"forecast-empty\"><b>Enter the job’s cost budget and estimated completion.</b><span>The forecast will compare how much work is complete against how much budget has been spent.</span></div>}\n </article>;\n}\nfunction ReportsView({ job, totals, total, rows, production }: { job: Job | null; totals: { hours: number; labor: number; equipment: number }; total: number; rows: CostRow[]; production: Record<string, ProductionValue> }) {\n const ranked = rows.filter((r) => r.totalCost > 0).slice().sort((a, b) => b.totalCost - a.totalCost).slice(0, 5);\n return <section className=\"report-view\">\n <article className=\"panel report-cover\"><p>EXECUTIVE PRODUCTION REPORT</p><h2>{job?.name ?? \"No job selected\"}</h2><span>Current imported labor, equipment, and installed-unit cost summary</span>\n <div className=\"report-kpis\"><div><small>TOTAL COST</small><b>{money(total, 2)}</b></div><div><small>LABOR HOURS</small><b>{totals.hours.toFixed(1)}</b></div><div><small>LABOR COST</small><b>{money(totals.labor, 2)}</b></div><div><small>EQUIPMENT COST</small><b>{money(totals.equipment, 2)}</b></div></div>\n </article>\n <article className=\"panel report-rank\"><div className=\"view-head\"><div><p>TOP COST CODES</p><h3>Largest actual costs</h3></div></div>\n {ranked.map((r, i) => { const p = production[r.costCode]; const qty = Number(p?.qty); return <div className=\"rank-row\" key={r.costCode}><i>{i + 1}</i><span><b>{r.costCode}</b><small>{qty ? `${money(r.totalCost / qty, 2)} / ${p.unit}` : \"Production quantity not entered\"}</small></span><strong>{money(r.totalCost, 2)}</strong></div>; })}\n {ranked.length === 0 && <div className=\"empty-state compact\"><b>No cost data yet</b><span>Upload a BusyBusy time sheet to populate the report.</span></div>}\n <div className=\"report-print\"><button className=\"gold\" onClick={() => window.print()}>⇩ Print / save PDF</button></div>\n </article>\n </section>;\n}\n\nfunction Title({ title, onClick }: { title: string; onClick: () => void }) {\n return <div className=\"title\"><div><h3>{title}</h3></div><button type=\"button\" onClick={onClick}>View details →</button></div>;\n}\nfunction Kpi({ icon, label, value, note, accent = false }: { icon: string; label: string; value: string; note: string; accent?: boolean }) {\n return <article className={accent ? \"accent\" : \"\"}><i>{icon}</i><p>{label}</p><h2>{value}</h2><span>{note}</span></article>;\n}\n\n// ---------- Migration checklist ----------\nfunction MigrationChecklist({ user }: { user: User }) {\n const items: { label: string; done: boolean; detail: string }[] = [\n { label: \"Database migrations\", done: true, detail: \"users, sessions, approved emails, jobs, job labor rates, job data, Monday snapshots, uploaded-file metadata.\" },\n { label: \"Email login + secure sessions\", done: true, detail: \"HTTP-only, Secure, SameSite session cookies; PBKDF2-hashed passwords.\" },\n { label: \"Approved-email allowlist + roles\", done: true, detail: \"admin / user roles enforced on all data APIs.\" },\n { label: \"First-run admin setup\", done: true, detail: \"Owner configures the initial admin before any data loads.\" },\n { label: \"Job creation, selection, editing, deletion\", done: true, detail: \"Admin-managed job CRUD persisted to scoped SQLite.\" },\n { label: \"Per-job labor / operator / foreman rates\", done: true, detail: \"Saved per job with standard defaults.\" },\n { label: \"Vista TXT target import\", done: true, detail: \"Browser-side parsing; targets saved in the job's production map.\" },\n { label: \"BusyBusy Excel labor & equipment import\", done: true, detail: \"SheetJS in the browser; original file stored to scoped Blob Storage.\" },\n { label: \"Cost-code consolidation by first 4 digits\", done: true, detail: \"1201.2 + 1201.3 → 1201; toggle shown in the cost-code table.\" },\n { label: \"Equipment usage, crew size, phase-code views\", done: true, detail: \"Most-used equipment, crew-by-day, expandable phase-code breakdown.\" },\n { label: \"Equipment-move tracking (phase 1101)\", done: true, detail: \"Driver labor + hauling truck cost, no charge for the transported machine.\" },\n { label: \"Manual production + cost-per-unit\", done: true, detail: \"Enter quantities per cost code; actual/target unit-cost compare.\" },\n { label: \"Reports & print/PDF view\", done: true, detail: \"Executive report cover + top cost codes; print stylesheet.\" },\n { label: \"Permanent job-based storage\", done: true, detail: \"Job data in scoped SQLite; original files in scoped Blob Storage, associated by job.\" },\n { label: \"Monday.com\" , done: false, detail: \"Disconnected in Phase 2. Set MONDAY_TOKEN for the Utility Schedule import in a later phase.\" },\n ];\n const doneCount = items.filter((i) => i.done).length;\n return <section className=\"panel migration-panel\">\n <div className=\"view-head\"><div><p>MIGRATION CHECKLIST</p><h3>Val Town staging — {doneCount}/{items.length} complete</h3></div><span className=\"source-pill\">AUTHENTICATED · {user.role.toUpperCase()}</span></div>\n <div className=\"migration-list\">{items.map((item) => <div className={`migration-row ${item.done ? \"done\" : \"\"}`} key={item.label}><i>{item.done ? \"✓\" : \"○\"}</i><span><b>{item.label}</b><small>{item.detail}</small></span></div>)}</div>\n <div className=\"migration-note\"><b>Remaining for Phase 3:</b> set <code>MONDAY_TOKEN</code> on this val and wire the Monday.com Utility Schedule import. Full equipment-rate tail re-import may be needed for production matching.</div>\n </section>;\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// ---------- Types ----------\ntype User = { id: number; email: string; role: \"admin\" | \"user\" };\ntype Job = {\n id: number; name: string; source: string | null; job_number: string | null;\n status: string | null; superintendent: string | null; project_manager: string | null;\n estimator: string | null; location: string | null; jurisdiction: string | null;\n general_contractor: string | null; foreman: string | null; prevailing_wage: string | null;\n permit_number: string | null; schedule_group: string | null; monday_url: string | null;\n};\ntype LaborRates = { labor: number; operator: number; foreman: number };\ntype Entry = { id: number; activity: string; unit: string; qty: number; hours: number; labor: number; equipment: number };\ntype ProductionValue = { qty: string; unit: string; note?: string; targetCost?: number };\ntype CostRow = { costCode: string; laborHours: number; operatorHours: number; foremanHours: number; equipmentHours: number; laborCost: number; equipmentCost: number; totalCost: number };\ntype EquipmentUsage = { name: string; hours: number; cost: number; entries: number };\ntype CrewDay = { date: string; size: number; hours: number };\ntype PhaseUsage = { phaseCode: string; equipment: EquipmentUsage[]; days: CrewDay[] };\ntype EquipmentMove = { id: string; date: string; phaseCode: string; movedEquipment: string; haulingEquipment: string; driver: string; description: string; hours: number; laborCost: number; haulingCost: number; cost: number; needsReview: boolean };\ntype Forecast = { budget: string; completion: string };\ntype SavedJobData = {\n entries: Entry[]; production: Record<string, ProductionValue>; actualRows: CostRow[];\n equipmentUsage: EquipmentUsage[]; crewDays: CrewDay[]; phaseUsage: PhaseUsage[];\n equipmentMoves: EquipmentMove[]; forecast: Forecast;\n};\ntype EquipmentRate = { label: string; rate: number };\ntype Bootstrap = { state: \"setup\" } | { state: \"login\" } | { state: \"authed\"; user: User };\ntype Section = \"overview\" | \"daily\" | \"labor\" | \"equipment\" | \"unit-cost\" | \"reports\" | \"migration\" | \"jobs\";\n\nconst DEFAULT_RATES: LaborRates = { labor: 45, operator: 55, foreman: 65 };\nconst EMPTY_FORECAST: Forecast = { budget: \"\", completion: \"\" };\nconst EMPTY_DATA: SavedJobData = {\n entries: [], production: {}, actualRows: [], equipmentUsage: [], crewDays: [],\n phaseUsage: [], equipmentMoves: [], forecast: { ...EMPTY_FORECAST },\n};\nconst UNITS = [\"LF\", \"EA\", \"CY\", \"SF\", \"TON\", \"LS\"];\nconst money = (n: number, d = 0) =>\n n.toLocaleString(\"en-US\", { style: \"currency\", currency: \"USD\", minimumFractionDigits: d, maximumFractionDigits: d });\n\nconst NAV: [Section, string, string][] = [\n [\"overview\", \"▦\", \"Overview\"],\n [\"daily\", \"▥\", \"Daily Production\"],\n [\"labor\", \"◫\", \"Labor & Rates\"],\n [\"equipment\", \"⚙\", \"Equipment\"],\n [\"unit-cost\", \"◎\", \"Cost per Unit\"],\n [\"reports\", \"↗\", \"Reports\"],\n [\"migration\", \"✓\", \"Migration\"],\n];\n\nasync function api(path: string, init?: RequestInit): Promise<any> {\n const res = await fetch(path, init ?? { headers: { \"content-type\": \"application/json\" } });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error ?? \"Request failed\");\n return data;\n}\n\nexport function App() {\n const [bootstrap, setBootstrap] = useState<Bootstrap | null>(null);\n useEffect(() => {\n api(\"/api/bootstrap\").then((d) => setBootstrap(d)).catch(() => setBootstrap({ state: \"login\" }));\n }, []);\n if (!bootstrap) {\n return <div className=\"auth-shell\"><div className=\"auth-card\"><div className=\"brand-mark\">ND<span>X</span></div><p className=\"auth-loading\">Loading command center…</p></div></div>;\n }\n if (bootstrap.state === \"setup\") return <Setup onDone={() => setBootstrap({ state: \"login\" })} />;\n if (bootstrap.state === \"login\") return <Login onAuthed={(u) => setBootstrap({ state: \"authed\", user: u })} />;\n return <Dashboard user={bootstrap.user} />;\n}\n\nfunction Setup({ onDone }: { onDone: () => void }) {\n const [email, setEmail] = useState(\"\"); const [password, setPassword] = useState(\"\");\n const [confirm, setConfirm] = useState(\"\"); const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\");\n if (password.length < 8) return setStatus(\"Password must be at least 8 characters.\");\n if (password !== confirm) return setStatus(\"Passwords do not match.\");\n setBusy(true);\n try { await api(\"/api/setup\", { method: \"POST\", body: JSON.stringify({ email, password }) }); setStatus(\"Admin created. Sign in below.\"); onDone(); }\n catch (err) { setStatus(err instanceof Error ? err.message : \"Setup failed\"); } finally { setBusy(false); }\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">FIRST-RUN SETUP</p><h1>Configure the command center</h1>\n <p className=\"auth-sub\">Set up the initial administrator. Their email is added to the approved allowlist with the <b>admin</b> role. No real job data is loaded yet.</p>\n <label>ADMIN EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" /></label>\n <label>PASSWORD<input type=\"password\" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"At least 8 characters\" /></label>\n <label>CONFIRM PASSWORD<input type=\"password\" required value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder=\"Repeat password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy}>{busy ? \"Creating admin…\" : \"Create admin & continue\"}</button>\n </form></div>\n );\n}\n\nfunction Login({ onAuthed }: { onAuthed: (u: User) => void }) {\n const [view, setView] = useState<\"login\" | \"forgot\">(\"login\");\n const [email, setEmail] = useState(\"\"); const [password, setPassword] = useState(\"\");\n const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\"); setBusy(true);\n try { const d = await api(\"/api/login\", { method: \"POST\", body: JSON.stringify({ email, password }) }); onAuthed(d.user); }\n catch (err) { setStatus(err instanceof Error ? err.message : \"Login failed\"); } finally { setBusy(false); }\n }\n if (view === \"forgot\") {\n return <ForgotPassword onBack={() => setView(\"login\")} initialEmail={email} />;\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">PRODUCTION COMMAND CENTER</p><h1>Sign in</h1>\n <p className=\"auth-sub\">Access is restricted to approved emails. Your session is secured with an HTTP-only cookie.</p>\n <label>EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" /></label>\n <label>PASSWORD<input type=\"password\" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"Your password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy}>{busy ? \"Signing in…\" : \"Sign in\"}</button>\n <p className=\"auth-forgot\"><button type=\"button\" className=\"linklike\" onClick={() => setView(\"forgot\")}>Forgot password?</button></p>\n </form></div>\n );\n}\n\nfunction ForgotPassword({ onBack, initialEmail }: { onBack: () => void; initialEmail: string }) {\n const [email, setEmail] = useState(initialEmail);\n const [code, setCode] = useState(\"\");\n const [password, setPassword] = useState(\"\"); const [confirm, setConfirm] = useState(\"\");\n const [status, setStatus] = useState(\"\"); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false);\n async function submit(e: React.FormEvent) {\n e.preventDefault(); setStatus(\"\"); setBusy(true);\n try {\n await api(\"/api/recover\", { method: \"POST\", body: JSON.stringify({ email, code, password, confirm }) });\n setCode(\"\"); setPassword(\"\"); setConfirm(\"\"); setDone(true);\n } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to reset the password\"); }\n finally { setBusy(false); }\n }\n if (done) {\n return (\n <div className=\"auth-shell\"><div className=\"auth-card\">\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">PASSWORD RESET</p><h1>Password updated</h1>\n <p className=\"auth-sub\">Your administrator password was reset and every open session was signed out. You can now sign in with your new password.</p>\n <button className=\"gold\" onClick={onBack}>Back to sign in</button>\n </div></div>\n );\n }\n return (\n <div className=\"auth-shell\"><form className=\"auth-card\" onSubmit={submit}>\n <div className=\"brand-mark\">ND<span>X</span></div>\n <p className=\"auth-kicker\">ADMINISTRATOR RECOVERY</p><h1>Reset your password</h1>\n <p className=\"auth-sub\">Enter your administrator email and the recovery code shared with you, then choose a new password. All signed-in sessions will be ended.</p>\n <label>ADMINISTRATOR EMAIL<input type=\"email\" required autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"you@ndxllc.com\" autoComplete=\"username\" /></label>\n <label>RECOVERY CODE<input type=\"password\" required value={code} onChange={(e) => setCode(e.target.value)} placeholder=\"Enter the recovery code\" autoComplete=\"off\" /></label>\n <label>NEW PASSWORD<input type=\"password\" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"At least 8 characters\" autoComplete=\"new-password\" /></label>\n <label>CONFIRM NEW PASSWORD<input type=\"password\" required value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder=\"Repeat new password\" autoComplete=\"new-password\" /></label>\n {status && <p className=\"auth-status\">{status}</p>}\n <button className=\"gold\" disabled={busy || password.length < 8 || password !== confirm}>{busy ? \"Resetting…\" : \"Reset password\"}</button>\n <p className=\"auth-forgot\"><button type=\"button\" className=\"linklike\" onClick={onBack} disabled={busy}>Back to sign in</button></p>\n </form></div>\n );\n}\n\n// ---------- Dashboard ----------\nfunction Dashboard({ user }: { user: User }) {\n const [section, setSection] = useState<Section>(\"overview\");\n const [jobs, setJobs] = useState<Job[]>([]);\n const [jobId, setJobId] = useState<number | null>(null);\n const [rates, setRates] = useState<LaborRates>(DEFAULT_RATES);\n const [draftRates, setDraftRates] = useState<LaborRates>(DEFAULT_RATES);\n const [rateStatus, setRateStatus] = useState(\"\");\n const [data, setData] = useState<SavedJobData>(EMPTY_DATA);\n const [loadedId, setLoadedId] = useState(\"\");\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n const [rateSearch, setRateSearch] = useState(\"\");\n const [consolidateCodes, setConsolidateCodes] = useState(false);\n const [showPhaseCodes, setShowPhaseCodes] = useState(false);\n const [mondayConnected, setMondayConnected] = useState(false);\n const [mondayStatus, setMondayStatus] = useState(\"\");\n const [importStatus, setImportStatus] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const [editOpen, setEditOpen] = useState(false);\n const [deleteOpen, setDeleteOpen] = useState(false);\n const targetFile = useRef<HTMLInputElement>(null);\n const timeFile = useRef<HTMLInputElement>(null);\n\n const activeJob = jobs.find((j) => j.id === jobId) ?? null;\n\n // Load jobs + equipment rates + monday status\n useEffect(() => {\n api(\"/api/jobs\").then((d) => { setJobs(d.jobs ?? []); if (d.jobs?.length && jobId === null) setJobId(d.jobs[0].id); }).catch(() => {});\n api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {});\n api(\"/api/monday-connection\").then((d) => { setMondayConnected(Boolean(d.connected)); setMondayStatus(d.message ?? \"Monday.com not connected\"); }).catch(() => setMondayStatus(\"Connection unavailable\"));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Load rates for the active job\n useEffect(() => {\n if (!activeJob?.id) { setRates(DEFAULT_RATES); setDraftRates(DEFAULT_RATES); setRateStatus(\"\"); return; }\n let active = true;\n api(`/api/jobs/${activeJob.id}/rates`).then((d) => {\n if (!active) return;\n const next = d.rates ?? DEFAULT_RATES;\n setRates(next); setDraftRates(next); setRateStatus(d.isDefault ? \"Using standard rates\" : \"Saved job rates loaded\");\n }).catch(() => active && setRateStatus(\"Using standard rates\"));\n return () => { active = false; };\n }, [activeJob?.id]);\n\n // Load saved job data when the active job changes\n useEffect(() => {\n const id = activeJob?.id;\n if (!id) { setLoadedId(\"\"); setData(EMPTY_DATA); return; }\n let active = true;\n api(`/api/jobs/${id}/data`).then((r) => {\n if (!active) return;\n const d = r.data as SavedJobData;\n setData({\n entries: d?.entries ?? [], production: d?.production ?? {}, actualRows: d?.actualRows ?? [],\n equipmentUsage: d?.equipmentUsage ?? [], crewDays: d?.crewDays ?? [], phaseUsage: d?.phaseUsage ?? [],\n equipmentMoves: d?.equipmentMoves ?? [], forecast: d?.forecast ?? { ...EMPTY_FORECAST },\n });\n setLoadedId(String(id)); setImportStatus(d ? \"Saved job data loaded\" : \"New job — ready for uploads\");\n }).catch(() => { if (active) { setData(EMPTY_DATA); setLoadedId(String(id)); setImportStatus(\"Unable to load saved job data\"); } });\n return () => { active = false; };\n }, [activeJob?.id]);\n\n // Autosave job data (debounced)\n useEffect(() => {\n if (!activeJob?.id || loadedId !== String(activeJob.id)) return;\n const timer = window.setTimeout(() => {\n api(`/api/jobs/${activeJob.id}/data`, { method: \"PUT\", body: JSON.stringify({ data }) })\n .then(() => {}) .catch(() => {});\n }, 700);\n return () => window.clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeJob?.id, loadedId, JSON.stringify(data)]);\n\n async function saveLaborRates(e: React.FormEvent) {\n e.preventDefault(); if (!activeJob?.id) return; setRateStatus(\"Saving…\");\n try {\n const d = await api(`/api/jobs/${activeJob.id}/rates`, { method: \"PUT\", body: JSON.stringify(draftRates) });\n setRates(d.rates); setDraftRates(d.rates); setRateStatus(`Saved for ${activeJob.name}`);\n } catch (err) { setRateStatus(err instanceof Error ? err.message : \"Unable to save\"); }\n }\n\n async function createJob(name: string) {\n setStatus(\"\"); try { const d = await api(\"/api/jobs\", { method: \"POST\", body: JSON.stringify({ name }) }); setJobs((v) => [...v, d.job]); setJobId(d.job.id); setStatus(`Job \"${name}\" created.`); } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to create job\"); }\n }\n async function updateJob(id: number, fields: Record<string, string>): Promise<boolean> {\n setStatus(\"\");\n try {\n const d = await api(`/api/jobs/${id}`, { method: \"PUT\", body: JSON.stringify(fields) });\n setJobs((v) => v.map((j) => (j.id === d.job.id ? d.job : j)));\n setStatus(`\"${d.job.name}\" saved.`);\n return true;\n } catch (err) {\n setStatus(err instanceof Error ? err.message : \"Unable to save job\");\n return false;\n }\n }\n async function deleteActiveJob() {\n if (!activeJob?.id) return; setStatus(\"\");\n try { await api(`/api/jobs/${activeJob.id}`, { method: \"DELETE\" }); setJobs((v) => v.filter((j) => j.id !== activeJob.id)); setJobId((x) => x === activeJob.id ? null : x); setDeleteOpen(false); setStatus(\"Job deleted.\"); } catch (err) { setStatus(err instanceof Error ? err.message : \"Unable to delete job\"); }\n }\n\n // Import handlers\n async function saveOriginalFile(file: File, kind: \"vista-target\" | \"timesheet\") {\n if (!activeJob?.id) throw new Error(\"Select a job before uploading\");\n const body = new FormData(); body.append(\"kind\", kind); body.append(\"file\", file);\n const r = await fetch(`/api/jobs/${activeJob.id}/files`, { method: \"POST\", body });\n if (!r.ok) { const j = await r.json().catch(() => ({})); throw new Error(j.error ?? \"Unable to save original file\"); }\n }\n\n async function importTargets(file: File) {\n const text = await file.text();\n const lines = text.split(/\\r?\\n/).map((x) => x.trim()).filter(Boolean);\n const next: Record<string, ProductionValue> = {};\n const items = new Map<string, { qty: string; unit: string; targetCost: number; name: string }>();\n for (const line of lines) {\n const c = csv(line);\n if (c[0] === \"1\" && c[4]) items.set(c[4], { qty: c[6], unit: c[7], targetCost: Number(c[8]), name: c[5] });\n if (c[0] === \"2\" && items.has(c[2])) {\n const item = items.get(c[2])!;\n next[`${c[3]}.${c[2]} - ${item.name}`] = { qty: item.qty, unit: item.unit, note: \"Imported from Vista estimate\", targetCost: item.targetCost };\n }\n }\n if (!Object.keys(next).length) {\n for (const line of lines) {\n const code = line.match(/\\b\\d{3,5}(?:\\.\\d+)+\\b/)?.[0];\n const unit = line.match(/\\b(LF|EA|CY|SF|TON|LS)\\b/i)?.[0]?.toUpperCase();\n if (code && unit) next[code] = { qty: \"\", unit, note: \"Imported from Vista estimate\" };\n }\n }\n setData((d) => ({ ...d, production: { ...d.production, ...next } }));\n try { await saveOriginalFile(file, \"vista-target\"); setImportStatus(`${Object.keys(next).length} target items imported · original file saved`); }\n catch (err) { setImportStatus(`${Object.keys(next).length} target items imported · ${err instanceof Error ? err.message : \"file not saved\"}`); }\n }\n\n async function importTimeSheet(file: File) {\n const XLSX = await loadXLSX();\n const workbook = XLSX.read(await file.arrayBuffer());\n const rows = XLSX.utils.sheet_to_json<Record<string, unknown>>(workbook.Sheets[workbook.SheetNames[0]], { defval: \"\", raw: true });\n const grouped = new Map<string, CostRow>();\n const equipmentByName = new Map<string, EquipmentUsage>();\n const crewByDay = new Map<string, { workers: Set<string>; hours: number }>();\n const phases = new Map<string, { equipment: Map<string, EquipmentUsage>; crew: Map<string, { workers: Set<string>; hours: number }> }>();\n const toHours = (v: unknown) => typeof v === \"number\" ? (v <= 1 ? v * 24 : v) : String(v).split(\":\").reduce((a, x, i) => a + Number(x) / (i ? 60 : 1), 0);\n const toDate = (v: unknown) => typeof v === \"number\" ? new Date(Math.round((v - 25569) * 86400000)).toISOString().slice(0, 10) : (String(v).match(/^\\d{4}-\\d{2}-\\d{2}/)?.[0] ?? \"\");\n const moves: EquipmentMove[] = [];\n let pricedEquipmentEntries = 0, unmatchedEquipmentEntries = 0;\n const erates = equipmentRates;\n for (const row of rows) {\n const rawCode = String(row[\"Cost Code\"] || \"Uncoded\");\n const match = rawCode.match(/(\\d{3,5})(?:\\.\\s*(\\d+))?/);\n const key = match ? `${match[1]}${match[2] ? `.` + match[2] : \"\"} - ${rawCode.replace(/^.*? - /, \"\")}` : \"Uncoded\";\n const h = toHours(row[\"Total\"]); if (!h) continue;\n const equip = String(row[\"Equipment\"] || \"\").replace(/\\s+/g, \" \").trim();\n const equipmentId = equip.match(/^(\\d{3,4})\\b/)?.[1];\n const matchedEquipment = erates.find((x) => x.label.match(/^(\\d{3,4})\\b/)?.[1] === equipmentId);\n const foreman = /foreman/i.test(rawCode);\n const labor = /^00\\b|laborer/i.test(equip);\n const operator = !foreman && !labor;\n const date = toDate(row[\"Start\"] || row[\"Time Off Date\"]);\n const worker = String(row[\"Employee ID\"] || `${row[\"First Name\"] || \"\"} ${row[\"Last Name\"] || \"\"}`).trim();\n const driver = `${row[\"First Name\"] || \"\"} ${row[\"Last Name\"] || \"\"}`.replace(/\\s+/g, \" \").trim() || worker;\n if (/^\\s*1101\\b/i.test(rawCode) || /mobilization/i.test(rawCode)) {\n const description = String(row[\"Description\"] || \"\").replace(/\\s+/g, \" \").trim();\n const describedIds = description.match(/\\b\\d{3,4}\\b/g) ?? [];\n const movedRate = describedIds.map((id) => erates.find((rate) => rate.label.match(/^\\d{3,4}\\b/)?.[0] === id && id !== equipmentId)).find(Boolean);\n const machineWords = /\\b(backhoe|excavator|loader|skid\\s*steer|dozer|roller|trencher|forklift|grader|crane|compactor|equipment|machine)\\b/i;\n if (movedRate || machineWords.test(description)) {\n const laborRate = foreman ? rates.foreman : labor ? rates.labor : rates.operator;\n const laborMoveCost = h * laborRate;\n const haulingCost = h * (matchedEquipment?.rate ?? 0);\n moves.push({ id: `${date}-${worker}-${moves.length}`, date, phaseCode: key, movedEquipment: movedRate?.label ?? (description || \"Equipment not identified\"), haulingEquipment: equip || \"Hauling unit not assigned\", driver, description, hours: h, laborCost: laborMoveCost, haulingCost, cost: laborMoveCost + haulingCost, needsReview: !movedRate || !matchedEquipment });\n }\n }\n if (date && worker) { const day = crewByDay.get(date) ?? { workers: new Set<string>(), hours: 0 }; day.workers.add(worker); day.hours += h; crewByDay.set(date, day); }\n if (equip && !labor) { const prior = equipmentByName.get(equip) ?? { name: equip, hours: 0, cost: 0, entries: 0 }; prior.hours += h; prior.cost += h * (matchedEquipment?.rate ?? 0); prior.entries++; equipmentByName.set(equip, prior); }\n const phase = phases.get(key) ?? { equipment: new Map<string, EquipmentUsage>(), crew: new Map<string, { workers: Set<string>; hours: number }>() };\n if (date && worker) { const day = phase.crew.get(date) ?? { workers: new Set<string>(), hours: 0 }; day.workers.add(worker); day.hours += h; phase.crew.set(date, day); }\n if (equip && !labor) { const prior = phase.equipment.get(equip) ?? { name: equip, hours: 0, cost: 0, entries: 0 }; prior.hours += h; prior.cost += h * (matchedEquipment?.rate ?? 0); prior.entries++; phase.equipment.set(equip, prior); }\n phases.set(key, phase);\n const current = grouped.get(key) ?? { costCode: key, laborHours: 0, operatorHours: 0, foremanHours: 0, equipmentHours: 0, laborCost: 0, equipmentCost: 0, totalCost: 0 };\n if (foreman) { current.foremanHours += h; current.laborCost += h * rates.foreman; }\n else if (labor) { current.laborHours += h; current.laborCost += h * rates.labor; }\n else { current.operatorHours += h; current.laborCost += h * rates.operator; }\n if (matchedEquipment) { current.equipmentHours += h; current.equipmentCost += h * matchedEquipment.rate; if (matchedEquipment.rate > 0) pricedEquipmentEntries++; }\n else if (operator && equip) unmatchedEquipmentEntries++;\n current.totalCost = current.laborCost + current.equipmentCost;\n grouped.set(key, current);\n }\n const imported = [...grouped.values()].sort((a, b) => b.totalCost - a.totalCost);\n const equipmentUsage = [...equipmentByName.values()].sort((a, b) => b.hours - a.hours);\n const crewDays = [...crewByDay.entries()].map(([date, value]) => ({ date, size: value.workers.size, hours: value.hours })).sort((a, b) => a.date.localeCompare(b.date));\n const phaseUsage = [...phases.entries()].map(([phaseCode, value]) => ({ phaseCode, equipment: [...value.equipment.values()].sort((a, b) => b.hours - a.hours), days: [...value.crew.entries()].map(([date, day]) => ({ date, size: day.workers.size, hours: day.hours })).sort((a, b) => a.date.localeCompare(b.date)) })).sort((a, b) => a.phaseCode.localeCompare(b.phaseCode));\n const equipmentMoves = moves.sort((a, b) => a.date.localeCompare(b.date));\n setData((d) => ({\n ...d,\n actualRows: imported,\n equipmentUsage,\n crewDays,\n phaseUsage,\n equipmentMoves,\n entries: [{ id: Date.now(), activity: `${file.name} import`, unit: \"TOTAL\", qty: 0, hours: imported.reduce((a, r) => a + r.laborHours + r.operatorHours + r.foremanHours, 0), labor: imported.reduce((a, r) => a + r.laborCost, 0), equipment: imported.reduce((a, r) => a + r.equipmentCost, 0) }],\n }));\n try { await saveOriginalFile(file, \"timesheet\"); setImportStatus(`${rows.length} time entries · ${pricedEquipmentEntries} equipment entries priced · original file saved${unmatchedEquipmentEntries ? ` · ${unmatchedEquipmentEntries} unmatched` : \"\"}`); }\n catch (err) { setImportStatus(`${rows.length} time entries imported · ${err instanceof Error ? err.message : \"file not saved\"}`); }\n }\n\n const totals = useMemo(() => data.entries.reduce((a, e) => ({ hours: a.hours + e.hours, labor: a.labor + e.labor, equipment: a.equipment + e.equipment }), { hours: 0, labor: 0, equipment: 0 }), [data.entries]);\n const total = totals.labor + totals.equipment;\n const actualCostTotal = data.actualRows.reduce((sum, r) => sum + r.totalCost, 0) || total;\n const c900 = data.actualRows.find((r) => r.costCode.startsWith(\"1201.6\")) ?? data.actualRows[0] ?? { costCode: \"\", totalCost: 0, laborCost: 0, equipmentCost: 0, laborHours: 0, operatorHours: 0, foremanHours: 0, equipmentHours: 0 };\n const lfQty = Number(data.production[c900.costCode]?.qty || 0);\n const cpu = lfQty > 0 ? c900.totalCost / lfQty : 0;\n const filteredRates = equipmentRates.filter((x) => x.label.toLowerCase().includes(rateSearch.toLowerCase()));\n\n const sectionCopy: Record<Section, [string, string]> = {\n overview: [\"Good morning, Whitney.\", \"Here’s how your crews are performing today.\"],\n daily: [\"Daily production\", \"Review field entries and add today’s installed quantities.\"],\n labor: [\"Labor rate settings\", \"Set standard or prevailing-wage rates for each job.\"],\n equipment: [\"Equipment rate book\", \"Hourly operating rates used for production costing.\"],\n \"unit-cost\": [\"Cost per unit\", \"Compare actual cost against Vista targets by cost code.\"],\n reports: [\"Executive reports\", \"A concise production and cost summary for leadership.\"],\n migration: [\"Migration checklist\", \"Steps to bring the live Command Center into this Val Town version.\"],\n jobs: [\"Jobs & settings\", \"Create, edit, and manage utility-schedule jobs.\"],\n };\n\n async function logout() { await fetch(\"/api/logout\", { method: \"POST\" }); window.location.reload(); }\n\n return (\n <div className=\"shell\">\n <aside>\n <div className=\"brand\"><i>ND<span>X</span></i><span><b>NDX Command Center</b><small>PRODUCTION CONTROL</small></span></div>\n <nav>\n {NAV.map(([id, icon, label]) => (\n <button key={id} className={section === id ? \"active\" : \"\"} onClick={() => setSection(id)}><span>{icon}</span>{label}</button>\n ))}\n </nav>\n <div className=\"job\">\n <small>ACTIVE JOB</small>\n <b>{activeJob?.name ?? \"No job created\"}</b>\n <em>{activeJob?.source === \"monday\" ? \"● Utility Schedule\" : activeJob ? \"● Ready\" : \"Start clean\"}</em>\n </div>\n <div className=\"user\"><i>{user.email.slice(0, 2).toUpperCase()}</i><span><b>{user.email}</b><small>{user.role === \"admin\" ? \"Administrator\" : \"User\"}</small></span></div>\n </aside>\n\n <main>\n <header>\n <div><p>PRODUCTION COMMAND CENTER</p><h1>{sectionCopy[section][0]}</h1><span>{sectionCopy[section][1]}</span></div>\n <div className=\"header-actions\">\n {jobs.length > 0 && (\n <label className=\"top-job-picker\">\n <small>ACTIVE JOB · UTILITY SCHEDULE</small>\n <select value={jobId ?? \"\"} onChange={(e) => setJobId(Number(e.target.value))}>\n {jobs.map((j) => <option key={j.id} value={j.id}>{j.job_number ? `${j.job_number} · ` : \"\"}{j.name}</option>)}\n </select>\n </label>\n )}\n {user.role === \"admin\" && <button onClick={() => setSection(\"jobs\")}>＋ Manage jobs</button>}\n <button className=\"logout\" onClick={logout}>Sign out</button>\n </div>\n </header>\n\n {status && <div className=\"status-line\">● {status}</div>}\n\n <section className=\"monday-strip not-connected\">\n <div><p>MONDAY.COM</p><b>{mondayConnected ? \"Connected\" : \"Monday.com not connected\"}</b><span>{mondayStatus}</span></div>\n <button disabled onClick={() => {}}>↻ Refresh unavailable</button>\n </section>\n\n {section === \"overview\" && (\n <Overview\n job={activeJob} total={total} totals={totals} cpu={cpu} lfQty={lfQty}\n rows={data.actualRows} production={data.production} setProduction={(p) => setData((d) => ({ ...d, production: p }))}\n consolidateCodes={consolidateCodes} setConsolidateCodes={setConsolidateCodes}\n usage={data.equipmentUsage} days={data.crewDays} phases={data.phaseUsage}\n showPhaseCodes={showPhaseCodes} setShowPhaseCodes={setShowPhaseCodes} moves={data.equipmentMoves}\n forecast={data.forecast} setForecast={(f) => setData((d) => ({ ...d, forecast: f }))}\n importStatus={importStatus} mondayStatus={mondayStatus} onOpenImport={() => setSection(\"overview\")}\n targetFileRef={targetFile} timeFileRef={timeFile} onImportTargets={importTargets} onImportTimeSheet={importTimeSheet}\n onOpenAdd={() => setSection(\"daily\")}\n />\n )}\n {section === \"daily\" && <DailyProduction entries={data.entries} rates={rates} onAdd={() => { }} onAddEntry={(entry) => setData((d) => ({ ...d, entries: [...d.entries, entry] }))} />}\n {section === \"labor\" && <LaborRateSettings job={activeJob} rates={draftRates} setRates={setDraftRates} status={rateStatus} onSave={saveLaborRates} />}\n {section === \"equipment\" && (\n <>\n <EquipmentMovesPanel moves={data.equipmentMoves} />\n <OperationsUsageView usage={data.equipmentUsage} days={data.crewDays} phases={data.phaseUsage} showPhases={showPhaseCodes} setShowPhases={setShowPhaseCodes} />\n <RateBook search={rateSearch} setSearch={setRateSearch} rates={filteredRates} />\n </>\n )}\n {section === \"unit-cost\" && (\n <UnitCostView rows={data.actualRows} production={data.production} setProduction={(p) => setData((d) => ({ ...d, production: p }))} consolidateCodes={consolidateCodes} setConsolidateCodes={setConsolidateCodes} />\n )}\n {section === \"reports\" && <ReportsView job={activeJob} totals={totals} total={total} rows={data.actualRows} production={data.production} />}\n {section === \"migration\" && <MigrationChecklist user={user} />}\n {section === \"jobs\" && (\n <JobsManager user={user} jobs={jobs} activeJob={activeJob} onCreate={createJob} onUpdate={updateJob} onDeleteConfirm={() => setDeleteOpen(true)} />\n )}\n </main>\n\n {deleteOpen && activeJob && (\n <div className=\"backdrop\" onMouseDown={() => setDeleteOpen(false)}>\n <form className=\"create-job-form\" onSubmit={(e) => { e.preventDefault(); deleteActiveJob(); }} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DELETE PROJECT</p><h2>Delete \"{activeJob.name}\"?</h2></div><button type=\"button\" onClick={() => setDeleteOpen(false)}>×</button></div>\n <p className=\"job-help\">This permanently removes the job, its saved data, and uploaded files. This cannot be undone.</p>\n <div className=\"actions\"><button type=\"button\" onClick={() => setDeleteOpen(false)}>Cancel</button><button className=\"danger\">Delete job</button></div>\n </form>\n </div>\n )}\n </div>\n );\n}\n\n// ---------- csv + xlsx loader ----------\nfunction csv(line: string): string[] {\n const out: string[] = []; const re = /(?:^|,)(\"(?:[^\"]|\"\")*\"|[^,]*)/g; let m;\n while ((m = re.exec(line))) out.push(m[1].replace(/^\"|\"$/g, \"\").replaceAll('\"\"', '\"'));\n return out;\n}\nasync function loadXLSX(): Promise<any> {\n return await import(\"https://esm.sh/xlsx@0.18.5\");\n}\n\n// ---------- Overview ----------\nfunction Overview(props: {\n job: Job | null; total: number; totals: { hours: number; labor: number; equipment: number }; cpu: number; lfQty: number;\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhaseCodes: boolean; setShowPhases: (v: boolean) => void; moves: EquipmentMove[];\n forecast: Forecast; setForecast: (v: Forecast) => void; importStatus: string; mondayStatus: string; onOpenImport: () => void;\n targetFileRef: React.RefObject<HTMLInputElement>; timeFileRef: React.RefObject<HTMLInputElement>;\n onImportTargets: (f: File) => void; onImportTimeSheet: (f: File) => void; onOpenAdd: () => void;\n}) {\n return (\n <>\n <section className=\"import-strip\">\n <div><p>JOB DATA IMPORTS</p><b>{props.job ? `Load targets and actual hours for ${props.job.name}` : \"Create a job to begin importing\"}</b></div>\n <button disabled={!props.job} onClick={() => props.targetFileRef.current?.click()}>↑ Upload Vista target TXT</button>\n <button className=\"gold\" disabled={!props.job} onClick={() => props.timeFileRef.current?.click()}>↑ Upload labor & equipment Excel</button>\n <input ref={props.targetFileRef} hidden type=\"file\" accept=\".txt,text/plain\" onChange={(e) => e.target.files?.[0] && props.onImportTargets(e.target.files[0])} />\n <input ref={props.timeFileRef} hidden type=\"file\" accept=\".xlsx,.xls\" onChange={(e) => e.target.files?.[0] && props.onImportTimeSheet(e.target.files[0])} />\n </section>\n\n <section className=\"filters\">\n <label>DATA SOURCE<select><option>Manual entries</option></select></label>\n <span>● {props.importStatus || props.mondayStatus || \"Utility Schedule mapped\"}</span>\n </section>\n\n <section className=\"kpis\">\n <Kpi icon=\"$\" label=\"TOTAL COST · IMPORTED\" value={money(props.total)} note={props.totals.hours || \"No time sheet imported\"} />\n <Kpi icon=\"◷\" label=\"LABOR COST\" value={money(props.totals.labor)} note={props.totals.hours + \" labor hours\"} />\n <Kpi icon=\"⚙\" label=\"EQUIPMENT COST\" value={money(props.totals.equipment)} note={(props.total > 0 ? Math.round(props.totals.equipment / props.total * 100) : 0) + \"% of total cost\"} />\n {props.cpu > 0 && <Kpi icon=\"◎\" label='ACTUAL COST / LF · 8\" C900' value={money(props.cpu, 2)} note={props.lfQty + \" LF installed\"} accent />}\n </section>\n\n <OperationsUsageView usage={props.usage} days={props.days} phases={props.phases} showPhases={props.showPhaseCodes} setShowPhases={props.setShowPhases} />\n <EquipmentMovesPanel moves={props.moves} />\n\n <section className=\"split\">\n <article className=\"panel\"><Title title=\"Cost follows installed quantity\" onClick={props.onOpenAdd} />\n <div className=\"chart\">{[0, 0, 0, 0, 0].map((v, i) => <div className=\"bar\" key={i}><b>—</b><span><i style={{ height: v + \"%\" }} /><em style={{ height: v + \"%\" }} /></span><small>{[\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\"][i]}</small></div>)}</div>\n </article>\n <JobCostForecast actualCost={props.rows.reduce((s, r) => s + r.totalCost, 0)} settings={props.forecast} setSettings={props.setForecast} />\n </section>\n\n <CostCodeTable rows={props.rows} production={props.production} setProduction={props.setProduction} consolidated={props.consolidateCodes} setConsolidated={props.setConsolidateCodes} />\n </>\n );\n}\n\n// ---------- Jobs Manager ----------\n// The \"Edit\" action swaps to a full-page inline editor (no overlay, backdrop,\n// body scroll lock, or nested scrolling container). The browser's regular page\n// scrollbar scrolls through every field.\nfunction JobsManager({ user, jobs, activeJob, onCreate, onUpdate, onDeleteConfirm }: {\n user: User; jobs: Job[]; activeJob: Job | null; onCreate: (name: string) => void;\n onUpdate: (id: number, fields: Record<string, string>) => Promise<boolean>; onDeleteConfirm: () => void;\n}) {\n const [name, setName] = useState(\"\");\n const [editing, setEditing] = useState<Job | null>(null);\n const [form, setForm] = useState<Record<string, string>>({});\n const [saving, setSaving] = useState(false);\n const fields: [string, string][] = [\n [\"name\", \"Job name\"], [\"job_number\", \"Job #\"], [\"status\", \"Status\"], [\"superintendent\", \"Superintendent\"],\n [\"project_manager\", \"Project manager\"], [\"foreman\", \"Foreman\"], [\"location\", \"Location\"],\n [\"jurisdiction\", \"Jurisdiction\"], [\"general_contractor\", \"General contractor\"],\n [\"prevailing_wage\", \"Prevailing wage\"], [\"permit_number\", \"Permit #\"], [\"schedule_group\", \"Schedule group\"],\n ];\n\n useEffect(() => {\n if (!editing) return;\n const f: Record<string, string> = {};\n for (const [k] of fields) f[k] = String((editing as any)[k] ?? \"\");\n setForm(f);\n setSaving(false);\n }, [editing]);\n\n async function handleSave(e: React.FormEvent) {\n e.preventDefault();\n if (!editing) return;\n setSaving(true);\n try {\n const ok = await onUpdate(editing.id, form);\n if (ok) setEditing(null); // back to the job list; the status line confirms\n } finally {\n setSaving(false);\n }\n }\n\n if (editing) {\n return (\n <section className=\"panel jobs-panel job-editor\">\n <div className=\"view-head\">\n <div><p>EDIT PROJECT</p><h3>Edit — {editing.name}</h3></div>\n </div>\n <form className=\"job-editor-form\" onSubmit={handleSave}>\n <div className=\"job-editor-toolbar top\">\n <span className=\"job-editor-meta\">Editing <b>{editing.name}</b> — changes apply to this job only.</span>\n <button type=\"button\" onClick={() => setEditing(null)} disabled={saving}>Cancel</button>\n <button className=\"gold\" type=\"submit\" disabled={saving}>{saving ? \"Saving…\" : \"Save Changes\"}</button>\n </div>\n <div className=\"form-grid job-editor-grid\">\n {fields.map(([k, label]) => (\n <label className={k === \"name\" ? \"wide\" : \"\"} key={k}>\n {label.toUpperCase()}\n <input value={form[k] ?? \"\"} onChange={(e) => setForm({ ...form, [k]: e.target.value })} />\n </label>\n ))}\n </div>\n <div className=\"job-editor-toolbar bottom\">\n <span className=\"job-editor-meta\"> </span>\n <button type=\"button\" onClick={() => setEditing(null)} disabled={saving}>Cancel</button>\n <button className=\"gold\" type=\"submit\" disabled={saving}>{saving ? \"Saving…\" : \"Save Changes\"}</button>\n </div>\n </form>\n </section>\n );\n }\n\n return (\n <section className=\"panel jobs-panel\">\n <div className=\"view-head\"><div><p>JOBS & SETTINGS</p><h3>Manage utility-schedule jobs</h3></div><span className=\"source-pill\">{jobs.length} JOB{jobs.length === 1 ? \"\" : \"S\"}</span></div>\n\n <div className=\"create-job-inline\"><input placeholder=\"New job name\" value={name} onChange={(e) => setName(e.target.value)} /><button className=\"gold\" onClick={() => { if (name.trim()) { onCreate(name.trim()); setName(\"\"); } }}>＋ Create job</button></div>\n\n <div className=\"job-list\">\n {jobs.length === 0 && <div className=\"empty-state compact\"><b>No jobs yet</b><span>Create a job to begin. Tables are intentionally empty in this staging phase.</span></div>}\n {jobs.map((j) => (\n <div className={`job-list-row ${j.id === activeJob?.id ? \"active\" : \"\"}`} key={j.id}>\n <span><b>{j.name}</b><small>{j.job_number ? `${j.job_number} · ` : \"\"}{j.source === \"monday\" ? \"Monday.com\" : \"Manual\"} · created manually</small></span>\n <span className=\"job-list-actions\">\n <button onClick={() => setEditing(j)}>Edit</button>\n {user.role === \"admin\" && <button className=\"danger-ghost\" onClick={onDeleteConfirm}>Delete</button>}\n </span>\n </div>\n ))}\n </div>\n </section>\n );\n}\n\n// ---------- Daily production ----------\nfunction DailyProduction({ entries, rates, onAddEntry, onAdd }: { entries: Entry[]; rates: LaborRates; onAddEntry: (e: Entry) => void; onAdd: () => void }) {\n const [open, setOpen] = useState(false);\n const [form, setForm] = useState({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: \"001 2013 Ram Truck 3500 ST\", equipmentHours: \"\" });\n const [equipmentRates, setEquipmentRates] = useState<EquipmentRate[]>([]);\n useEffect(() => { api(\"/api/equipment-rates\").then((d) => setEquipmentRates(d.rates ?? [])).catch(() => {}); }, []);\n const selected = equipmentRates.find((x) => x.label === form.equipment) ?? equipmentRates[0];\n const equipmentCost = (selected?.rate ?? 0) * Number(form.equipmentHours);\n const laborCost = Number(form.laborHours) * rates.labor + Number(form.operatorHours) * rates.operator + Number(form.foremanHours) * rates.foreman;\n function save(e: React.FormEvent) {\n e.preventDefault();\n onAddEntry({ id: Date.now(), activity: form.activity, unit: form.unit, qty: +form.qty || 0, hours: Number(form.laborHours) + Number(form.operatorHours) + Number(form.foremanHours), labor: laborCost, equipment: equipmentCost });\n setForm({ activity: \"\", unit: \"LF\", qty: \"\", laborHours: \"\", operatorHours: \"\", foremanHours: \"\", equipment: equipmentRates[0]?.label ?? \"\", equipmentHours: \"\" });\n setOpen(false);\n }\n return (\n <section className=\"panel daily-view\">\n <div className=\"view-head\"><div><p>FIELD ENTRIES</p><h3>Production and cost log</h3></div><button className=\"gold\" onClick={() => setOpen(true)}>＋ New entry</button></div>\n <div className=\"daily-row daily-head\"><span>ACTIVITY</span><span>QUANTITY</span><span>HOURS</span><span>LABOR</span><span>EQUIPMENT</span><span>TOTAL</span></div>\n {entries.length ? entries.map((e) => (\n <div className=\"daily-row\" key={e.id}><span><b>{e.activity}</b></span><span>{e.qty ? `${e.qty.toLocaleString()} ${e.unit}` : \"Imported total\"}</span><span>{e.hours.toFixed(2)}</span><span>{money(e.labor, 2)}</span><span>{money(e.equipment, 2)}</span><span><b>{money(e.labor + e.equipment, 2)}</b></span></div>\n )) : <div className=\"empty-state\"><b>No production entries yet</b><span>Add a field entry or upload the job’s Excel time sheet.</span></div>}\n\n {open && (\n <div className=\"backdrop\" onMouseDown={() => setOpen(false)}>\n <form onSubmit={save} onMouseDown={(e) => e.stopPropagation()}>\n <div className=\"form-head\"><div><p>DAILY FIELD ENTRY</p><h2>Add production & cost</h2></div><button type=\"button\" onClick={() => setOpen(false)}>×</button></div>\n <div className=\"form-grid\">\n <label className=\"wide\">ACTIVITY<input value={form.activity} onChange={(e) => setForm({ ...form, activity: e.target.value })} /></label>\n <label>QUANTITY<input type=\"number\" value={form.qty} onChange={(e) => setForm({ ...form, qty: e.target.value })} /></label>\n <label>UNIT<select value={form.unit} onChange={(e) => setForm({ ...form, unit: e.target.value })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select></label>\n <label>LABOR HOURS · {money(rates.labor, 2)}/HR<input type=\"number\" step=\".25\" value={form.laborHours} onChange={(e) => setForm({ ...form, laborHours: e.target.value })} /></label>\n <label>OPERATOR HOURS · {money(rates.operator, 2)}/HR<input type=\"number\" step=\".25\" value={form.operatorHours} onChange={(e) => setForm({ ...form, operatorHours: e.target.value })} /></label>\n <label>FOREMAN HOURS · {money(rates.foreman, 2)}/HR<input type=\"number\" step=\".25\" value={form.foremanHours} onChange={(e) => setForm({ ...form, foremanHours: e.target.value })} /></label>\n <label className=\"wide\">EQUIPMENT<select value={form.equipment} onChange={(e) => setForm({ ...form, equipment: e.target.value })}>{equipmentRates.map((x) => <option key={x.label}>{x.label}</option>)}</select></label>\n <label>EQUIPMENT HOURS<input type=\"number\" step=\".25\" value={form.equipmentHours} onChange={(e) => setForm({ ...form, equipmentHours: e.target.value })} /></label>\n <label>HOURLY RATE<input value={money(selected?.rate ?? 0, 2) + \" / hr\"} readOnly /></label>\n </div>\n <div className=\"equipment-calc\"><span><small>EQUIPMENT COST</small><b>{money(equipmentCost, 2)}</b></span><em>{form.equipmentHours || 0} hrs × {money(selected?.rate ?? 0, 2)}/hr</em></div>\n <div className=\"calculated\"><span>CALCULATED TOTAL COST / UNIT</span><b>{money((laborCost + equipmentCost) / Math.max(1, +form.qty), 2)} / {form.unit}</b></div>\n <div className=\"actions\"><button type=\"button\" onClick={() => setOpen(false)}>Cancel</button><button className=\"gold\">Save daily production</button></div>\n </form>\n </div>\n )}\n </section>\n );\n}\n\n// ---------- Labor rates ----------\nfunction LaborRateSettings({ job, rates, setRates, status, onSave }: { job: Job | null; rates: LaborRates; setRates: (v: LaborRates) => void; status: string; onSave: (e: React.FormEvent) => void }) {\n return (\n <section className=\"labor-settings\">\n <article className=\"panel rate-settings-card\">\n <div className=\"settings-head\"><div><p>JOB-SPECIFIC LABOR RATES</p><h3>Hourly rate schedule</h3></div><span className=\"save-status\">● {status || \"Ready\"}</span></div>\n <label className=\"settings-job\">JOB<input readOnly value={job?.name ?? \"Select a job\"} /></label>\n <form onSubmit={onSave}>\n <div className=\"rate-input-grid\">\n <RateInput label=\"Labor\" value={rates.labor} onChange={(v) => setRates({ ...rates, labor: v })} />\n <RateInput label=\"Operator\" value={rates.operator} onChange={(v) => setRates({ ...rates, operator: v })} />\n <RateInput label=\"Foreman\" value={rates.foreman} onChange={(v) => setRates({ ...rates, foreman: v })} />\n </div>\n <div className=\"rate-actions\"><span>These rates apply only to <b>{job?.name ?? \"this job\"}</b> and update new production entries immediately.</span><button type=\"button\" onClick={() => setRates(DEFAULT_RATES)}>Use standard rates</button><button className=\"gold\">Save job rates</button></div>\n </form>\n </article>\n <article className=\"panel prevailing-card\"><i>PW</i><div><p>PREVAILING WAGE READY</p><h3>Different job, different rates.</h3><span>Choose a job above, enter its required wage rates, and save. Your standard-rate jobs remain unchanged.</span></div></article>\n </section>\n );\n}\nfunction RateInput({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {\n return <label><span>{label}<small>HOURLY RATE</small></span><div><i>$</i><input type=\"number\" min=\"0\" max=\"500\" step=\".01\" value={value} onChange={(e) => onChange(Number(e.target.value))} /><em>/ hr</em></div></label>;\n}\n\n// ---------- Equipment ----------\nfunction OperationsUsageView({ usage, days, phases, showPhases, setShowPhases }: { usage: EquipmentUsage[]; days: CrewDay[]; phases: PhaseUsage[]; showPhases: boolean; setShowPhases: (v: boolean) => void }) {\n const hasData = usage.length > 0 || days.length > 0;\n return <>\n <section className=\"phase-controls\"><div><p>JOB UTILIZATION VIEW</p><b>{showPhases ? \"Equipment and crew by phase code\" : \"Equipment and crew totals\"}</b></div><button disabled={!hasData} onClick={() => setShowPhases(!showPhases)}>{showPhases ? \"← Show job totals\" : \"View by phase code →\"}</button></section>\n {showPhases ? <PhaseCodeUsagePanel phases={phases} /> : <section className=\"operations-grid\"><EquipmentUsagePanel usage={usage} /><CrewSizePanel days={days} /></section>}\n </>;\n}\nfunction EquipmentUsagePanel({ usage }: { usage: EquipmentUsage[] }) {\n const top = usage.slice(0, 5); const max = top[0]?.hours || 1;\n return <article className=\"panel usage-panel\"><div className=\"view-head\"><div><p>TIMESHEET EQUIPMENT</p><h3>Most-used equipment</h3></div>{usage.length > 0 && <span className=\"source-pill\">RANKED BY HOURS</span>}</div>\n {top.length ? <div className=\"usage-list\">{top.map((item, i) => <div className=\"usage-row\" key={item.name}><i>{i + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / max * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"empty-state compact\"><b>No equipment usage yet</b><span>Upload the job’s labor and equipment Excel file to rank equipment by hours.</span></div>}\n </article>;\n}\nfunction CrewSizePanel({ days }: { days: CrewDay[] }) {\n const average = days.length ? days.reduce((sum, d) => sum + d.size, 0) / days.length : 0;\n const peak = days.reduce((m, d) => Math.max(m, d.size), 0);\n const recent = days.slice(-5).reverse();\n return <article className=\"panel crew-panel\"><div className=\"view-head\"><div><p>TIMESHEET CREW</p><h3>Crew size by workday</h3></div>{days.length > 0 && <span className=\"source-pill\">UNIQUE EMPLOYEES</span>}</div>\n {days.length ? <><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{days.length}</b></span></div><div className=\"crew-days\">{recent.map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></> : <div className=\"empty-state compact\"><b>No crew data yet</b><span>Crew size will calculate from unique employee IDs for each workday.</span></div>}\n </article>;\n}\nfunction PhaseCodeUsagePanel({ phases }: { phases: PhaseUsage[] }) {\n const [expanded, setExpanded] = useState(\"\");\n return <section className=\"panel phase-usage\"><div className=\"view-head\"><div><p>PHASE CODE UTILIZATION</p><h3>Equipment and crew by phase</h3></div><span className=\"source-pill\">CLICK A PHASE TO EXPAND</span></div>\n {phases.length ? <div className=\"phase-table\"><div className=\"phase-row phase-head\"><span>PHASE CODE</span><span>MOST-USED EQUIPMENT</span><span>EQUIPMENT HOURS</span><span>AVG. CREW</span><span>PEAK CREW</span><span>WORKDAYS</span></div>\n {phases.map((phase) => { const average = phase.days.length ? phase.days.reduce((s, d) => s + d.size, 0) / phase.days.length : 0; const peak = phase.days.reduce((m, d) => Math.max(m, d.size), 0); const top = phase.equipment[0]; const isOpen = expanded === phase.phaseCode; const maxHours = top?.hours || 1;\n return <div className={`phase-group${isOpen ? \" open\" : \"\"}`} key={phase.phaseCode}><button type=\"button\" className=\"phase-row phase-click\" aria-expanded={isOpen} onClick={() => setExpanded(isOpen ? \"\" : phase.phaseCode)}><span className=\"phase-name\"><i>{isOpen ? \"−\" : \"+\"}</i><b>{phase.phaseCode}</b></span><span>{top ? <><b>{top.name}</b><small>{phase.equipment.length} equipment {phase.equipment.length === 1 ? \"unit\" : \"units\"} used</small></> : <em>No equipment assigned</em>}</span><span><b>{phase.equipment.reduce((s, i) => s + i.hours, 0).toFixed(1)}</b><small>hours</small></span><span><b>{average.toFixed(1)}</b><small>people</small></span><span><b>{peak}</b><small>people</small></span><span><b>{phase.days.length}</b><small>days</small></span></button>\n {isOpen && <div className=\"phase-detail\"><div className=\"phase-equipment-detail\"><div className=\"detail-title\"><p>ALL EQUIPMENT USED</p><b>{phase.equipment.length} units ranked by hours</b></div>{phase.equipment.length ? <div className=\"usage-list\">{phase.equipment.map((item, index) => <div className=\"usage-row\" key={item.name}><i>{index + 1}</i><span><b>{item.name}</b><small>{item.entries} time {item.entries === 1 ? \"entry\" : \"entries\"}{item.cost > 0 ? ` · ${money(item.cost, 2)} matched cost` : \" · rate not matched\"}</small><em><u style={{ width: `${Math.max(6, item.hours / maxHours * 100)}%` }} /></em></span><strong>{item.hours.toFixed(1)}<small> hrs</small></strong></div>)}</div> : <div className=\"detail-empty\">No equipment assigned to this phase.</div>}</div><div className=\"phase-crew-detail\"><div className=\"detail-title\"><p>CREW BY WORKDAY</p><b>Unique employees per day</b></div><div className=\"crew-summary\"><span><small>AVERAGE CREW</small><b>{average.toFixed(1)}</b></span><span><small>PEAK CREW</small><b>{peak}</b></span><span><small>WORKDAYS</small><b>{phase.days.length}</b></span></div><div className=\"crew-days detail-days\">{phase.days.slice().reverse().map((day) => <div key={day.date}><span><b>{new Date(day.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" })}</b><small>{day.hours.toFixed(1)} total labor hrs</small></span><strong>{day.size}<small> people</small></strong></div>)}</div></div></div>}\n </div>; })}\n </div> : <div className=\"empty-state compact\"><b>No phase-code usage yet</b><span>Upload a BusyBusy time sheet to build the phase-code breakdown.</span></div>}\n </section>;\n}\nfunction EquipmentMovesPanel({ moves }: { moves: EquipmentMove[] }) {\n const totalHours = moves.reduce((s, m) => s + m.hours, 0);\n const totalCost = moves.reduce((s, m) => s + m.cost, 0);\n const review = moves.filter((m) => m.needsReview).length;\n return <section className=\"panel equipment-moves\"><div className=\"view-head\"><div><p>MOBILIZATION PHASE CODE · 1101</p><h3>Equipment moves</h3></div>{moves.length > 0 && <span className=\"source-pill\">{moves.length} {moves.length === 1 ? \"MOVE\" : \"MOVES\"}</span>}</div>\n {moves.length ? <><div className=\"move-summary\"><span><small>EQUIPMENT MOVES</small><b>{moves.length}</b></span><span><small>MOVE HOURS</small><b>{totalHours.toFixed(1)}</b></span><span><small>TOTAL MOVE COST</small><b>{money(totalCost, 2)}</b></span><span className={review ? \"review\" : \"\"}><small>NEEDS REVIEW</small><b>{review}</b></span></div>\n <div className=\"move-table\"><div className=\"move-row move-head\"><span>DATE</span><span>EQUIPMENT MOVED</span><span>HAULING EQUIPMENT / DRIVER</span><span>HOURS</span><span>COST</span></div>\n {moves.map((move) => <div className=\"move-row\" key={move.id}><span>{move.date ? new Date(move.date + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" }) : \"Date unavailable\"}</span><span><b>{move.movedEquipment}</b><small>{move.description}</small></span><span><b>{move.haulingEquipment}</b><small>{move.driver}</small></span><span><b>{move.hours.toFixed(1)}</b><small>hours</small></span><span><b>{money(move.cost, 2)}</b><small>{money(move.laborCost, 2)} labor + {move.haulingCost > 0 ? `${money(move.haulingCost, 2)} truck` : \"truck rate missing\"}</small>{move.needsReview && <em>Review match</em>}</span></div>)}\n </div></> : <div className=\"empty-state compact\"><b>No equipment moves found yet</b><span>Upload a BusyBusy time sheet. Mobilization entries that name the transported machine in the description will appear here.</span></div>}\n </section>;\n}\nfunction RateBook({ search, setSearch, rates }: { search: string; setSearch: (v: string) => void; rates: EquipmentRate[] }) {\n return <section className=\"panel rate-book\"><div className=\"rate-tools\"><div><p>IMPORTED EQUIPMENT RATES</p><h3>{rates.length} equipment records</h3></div><input placeholder=\"Search unit, make, or model…\" value={search} onChange={(e) => setSearch(e.target.value)} /></div>\n <div className=\"rate-header\"><span>EQUIPMENT ID & DESCRIPTION</span><span>HOURLY RATE</span></div>\n <div className=\"rate-list\">{rates.map((x) => <div className=\"rate-row\" key={x.label}><span><i>⚙</i><b>{x.label}</b></span><strong>{money(x.rate, 2)}<small>/ hr</small></strong></div>)}</div>\n </section>;\n}\n\n// ---------- Cost code + unit cost ----------\nfunction fourDigitCode(value: string) { return value.match(/^\\s*(\\d{4})/)?.[1] ?? value.split(\" - \")[0]; }\nfunction consolidatedRows(rows: CostRow[]) {\n const grouped = new Map<string, CostRow>();\n for (const row of rows) {\n const code = fourDigitCode(row.costCode); const prior = grouped.get(code);\n if (!prior) { grouped.set(code, { ...row, costCode: `${code} - Consolidated` }); continue; }\n prior.laborHours += row.laborHours; prior.operatorHours += row.operatorHours; prior.foremanHours += row.foremanHours;\n prior.equipmentHours += row.equipmentHours; prior.laborCost += row.laborCost; prior.equipmentCost += row.equipmentCost; prior.totalCost += row.totalCost;\n }\n return [...grouped.values()].sort((a, b) => a.costCode.localeCompare(b.costCode));\n}\nfunction CostCodeTable({ rows, production, setProduction, consolidated, setConsolidated }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void;\n consolidated: boolean; setConsolidated: (v: boolean) => void;\n}) {\n const displayedRows = consolidated ? consolidatedRows(rows) : rows;\n const totalLabor = rows.reduce((a, r) => a + r.laborCost, 0);\n const totalEquipment = rows.reduce((a, r) => a + r.equipmentCost, 0);\n return <section className=\"panel cost-code-panel\">\n <div className=\"cost-code-title\"><div><p>BUSYBUSY ACTUAL COSTS</p><h3>{consolidated ? \"Cost consolidated by 4-digit code\" : \"Cost by code + manual production\"}</h3><button type=\"button\" className={consolidated ? \"consolidate-button active\" : \"consolidate-button\"} onClick={() => setConsolidated(!consolidated)}>{consolidated ? \"✓ Consolidated · Show detail\" : \"Consolidate by 4-digit code\"}</button></div><div><span><small>LABOR</small><b>{money(totalLabor, 2)}</b></span><span><small>EQUIPMENT</small><b>{money(totalEquipment, 2)}</b></span><span className=\"total\"><small>TOTAL ACTUAL COST</small><b>{money(totalLabor + totalEquipment, 2)}</b></span></div></div>\n <div className=\"cost-code-scroll\"><div className=\"cost-code-row cost-code-head\"><span>COST CODE</span><span>LABOR COST</span><span>EQUIPMENT COST</span><span>TOTAL COST</span><span>PRODUCTION</span><span>ACTUAL / TARGET</span></div>\n {displayedRows.length === 0 && <div className=\"empty-state compact\"><b>No actual costs yet</b><span>Upload a BusyBusy Excel time sheet to populate cost codes.</span></div>}\n {displayedRows.map((r) => { const code = consolidated ? fourDigitCode(r.costCode) : r.costCode; const exact = production[code]; const matched = Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; const children = consolidated ? Object.entries(production).filter(([key, value]) => fourDigitCode(key) === code && Number(value.qty) > 0).map(([, value]) => value) : []; const units = [...new Set(children.map((value) => value.unit))]; const rolled = children.length && units.length === 1 ? { qty: String(children.reduce((s, v) => s + Number(v.qty), 0)), unit: units[0], note: \"Rolled up from detailed production\" } : undefined; const p = exact ?? rolled ?? matched ?? { qty: \"\", unit: \"LF\" }; const qty = Number(p.qty); const cpU = qty ? r.totalCost / qty : 0;\n return <div className=\"cost-code-row\" key={r.costCode}><span><b>{r.costCode}</b><small>{r.laborHours + r.operatorHours + r.foremanHours} labor hrs · {r.equipmentHours} equipment hrs{consolidated ? \" · grouped by first 4 digits\" : \"\"}</small></span><span>{money(r.laborCost, 2)}</span><span>{money(r.equipmentCost, 2)}</span><span><b>{money(r.totalCost, 2)}</b></span><span className=\"production-input\"><input type=\"number\" min=\"0\" step=\".01\" placeholder=\"Enter qty\" value={p.qty} onChange={(e) => setProduction({ ...production, [code]: { ...p, qty: e.target.value } })} /><select value={p.unit} onChange={(e) => setProduction({ ...production, [code]: { ...p, unit: e.target.value } })}>{UNITS.map((u) => <option key={u}>{u}</option>)}</select>{p.note && <small className=\"scope-note\">{p.note}</small>}</span><span className={qty ? \"unit-cost\" : \"pending-unit\"}>{qty ? <><b>{money(cpU, 2)} <small>/ {p.unit}</small></b>{p.targetCost && <small>Target {money(p.targetCost, 2)} / {p.unit}</small>}</> : <em>Awaiting production</em>}</span></div>;\n })}\n </div>\n </section>;\n}\nfunction UnitCostView({ rows, production, setProduction, consolidateCodes, setConsolidateCodes }: {\n rows: CostRow[]; production: Record<string, ProductionValue>; setProduction: (v: Record<string, ProductionValue>) => void; consolidateCodes: boolean; setConsolidateCodes: (v: boolean) => void;\n}) {\n const measured = rows.filter((r) => { const p = production[r.costCode] ?? Object.entries(production).find(([k]) => k.startsWith(r.costCode.split(\" - \")[0] + \" - \"))?.[1]; return Number(p?.qty) > 0; });\n return <><section className=\"unit-summary\"><article><p>MEASURED COST CODES</p><h2>{measured.length}</h2><span>with installed production</span></article><article><p>AWAITING QUANTITY</p><h2>{rows.length - measured.length}</h2><span>cost codes need LF or EA</span></article><article><p>VISTA TARGETS</p><h2>{Object.values(production).filter((p) => p.targetCost).length}</h2><span>target unit costs loaded</span></article></section>\n <CostCodeTable rows={rows} production={production} setProduction={setProduction} consolidated={consolidateCodes} setConsolidated={setConsolidateCodes} />\n </>;\n}\n\n// ---------- Forecast / reports ----------\nfunction JobCostForecast({ actualCost, settings, setSettings }: { actualCost: number; settings: Forecast; setSettings: (v: Forecast) => void }) {\n const budget = Number(settings.budget), completion = Math.min(100, Math.max(0, Number(settings.completion)));\n const ready = budget > 0 && completion > 0;\n const budgetUsed = budget > 0 ? actualCost / budget * 100 : 0;\n const projected = ready ? actualCost / (completion / 100) : 0;\n const variance = ready ? budget - projected : 0;\n const variancePercent = ready ? Math.abs(variance) / budget * 100 : 0;\n const state = !ready ? \"setup\" : variance >= 0 ? \"on-track\" : variancePercent <= 5 ? \"watch\" : \"over\";\n const label = state === \"setup\" ? \"ADD BUDGET + PROGRESS\" : state === \"on-track\" ? \"ON TRACK\" : state === \"watch\" ? \"WATCH\" : \"PROJECTED OVER BUDGET\";\n return <article className={`panel forecast-card ${state}`}><div className=\"forecast-head\"><div><p>JOB COST FORECAST</p><h3>Budget health + projected finish</h3></div><span>{label}</span></div>\n <div className=\"forecast-inputs\"><label><small>COST BUDGET</small><div><i>$</i><input type=\"number\" min=\"0\" step=\"100\" placeholder=\"Enter budget\" value={settings.budget} onChange={(e) => setSettings({ ...settings, budget: e.target.value })} /></div></label><label><small>ESTIMATED JOB COMPLETION</small><div><input type=\"number\" min=\"0\" max=\"100\" step=\"1\" placeholder=\"0\" value={settings.completion} onChange={(e) => setSettings({ ...settings, completion: e.target.value })} /><i>%</i></div></label></div>\n <div className=\"forecast-bars\"><div><span><small>JOB COMPLETION</small><b>{completion.toFixed(0)}%</b></span><i><em style={{ width: `${completion}%` }} /></i></div><div><span><small>BUDGET SPENT</small><b>{budget > 0 ? `${budgetUsed.toFixed(0)}%` : \"—\"}</b></span><i><em className={budgetUsed > 100 ? \"over\" : undefined} style={{ width: `${Math.min(100, budgetUsed)}%` }} /></i></div></div>\n {ready ? <div className=\"forecast-result\"><span><small>ACTUAL COST TO DATE</small><b>{money(actualCost, 2)}</b></span><span><small>PROJECTED FINAL COST</small><b>{money(projected, 2)}</b></span><span className={variance >= 0 ? \"positive\" : \"negative\"}><small>PROJECTED VARIANCE</small><b>{variance >= 0 ? `${money(variance, 2)} under` : `${money(Math.abs(variance), 2)} over`}</b><em>{variancePercent.toFixed(1)}% of budget</em></span></div> : <div className=\"forecast-empty\"><b>Enter the job’s cost budget and estimated completion.</b><span>The forecast will compare how much work is complete against how much budget has been spent.</span></div>}\n </article>;\n}\nfunction ReportsView({ job, totals, total, rows, production }: { job: Job | null; totals: { hours: number; labor: number; equipment: number }; total: number; rows: CostRow[]; production: Record<string, ProductionValue> }) {\n const ranked = rows.filter((r) => r.totalCost > 0).slice().sort((a, b) => b.totalCost - a.totalCost).slice(0, 5);\n return <section className=\"report-view\">\n <article className=\"panel report-cover\"><p>EXECUTIVE PRODUCTION REPORT</p><h2>{job?.name ?? \"No job selected\"}</h2><span>Current imported labor, equipment, and installed-unit cost summary</span>\n <div className=\"report-kpis\"><div><small>TOTAL COST</small><b>{money(total, 2)}</b></div><div><small>LABOR HOURS</small><b>{totals.hours.toFixed(1)}</b></div><div><small>LABOR COST</small><b>{money(totals.labor, 2)}</b></div><div><small>EQUIPMENT COST</small><b>{money(totals.equipment, 2)}</b></div></div>\n </article>\n <article className=\"panel report-rank\"><div className=\"view-head\"><div><p>TOP COST CODES</p><h3>Largest actual costs</h3></div></div>\n {ranked.map((r, i) => { const p = production[r.costCode]; const qty = Number(p?.qty); return <div className=\"rank-row\" key={r.costCode}><i>{i + 1}</i><span><b>{r.costCode}</b><small>{qty ? `${money(r.totalCost / qty, 2)} / ${p.unit}` : \"Production quantity not entered\"}</small></span><strong>{money(r.totalCost, 2)}</strong></div>; })}\n {ranked.length === 0 && <div className=\"empty-state compact\"><b>No cost data yet</b><span>Upload a BusyBusy time sheet to populate the report.</span></div>}\n <div className=\"report-print\"><button className=\"gold\" onClick={() => window.print()}>⇩ Print / save PDF</button></div>\n </article>\n </section>;\n}\n\nfunction Title({ title, onClick }: { title: string; onClick: () => void }) {\n return <div className=\"title\"><div><h3>{title}</h3></div><button type=\"button\" onClick={onClick}>View details →</button></div>;\n}\nfunction Kpi({ icon, label, value, note, accent = false }: { icon: string; label: string; value: string; note: string; accent?: boolean }) {\n return <article className={accent ? \"accent\" : \"\"}><i>{icon}</i><p>{label}</p><h2>{value}</h2><span>{note}</span></article>;\n}\n\n// ---------- Migration checklist ----------\nfunction MigrationChecklist({ user }: { user: User }) {\n const items: { label: string; done: boolean; detail: string }[] = [\n { label: \"Database migrations\", done: true, detail: \"users, sessions, approved emails, jobs, job labor rates, job data, Monday snapshots, uploaded-file metadata.\" },\n { label: \"Email login + secure sessions\", done: true, detail: \"HTTP-only, Secure, SameSite session cookies; PBKDF2-hashed passwords.\" },\n { label: \"Approved-email allowlist + roles\", done: true, detail: \"admin / user roles enforced on all data APIs.\" },\n { label: \"First-run admin setup\", done: true, detail: \"Owner configures the initial admin before any data loads.\" },\n { label: \"Job creation, selection, editing, deletion\", done: true, detail: \"Admin-managed job CRUD persisted to scoped SQLite.\" },\n { label: \"Per-job labor / operator / foreman rates\", done: true, detail: \"Saved per job with standard defaults.\" },\n { label: \"Vista TXT target import\", done: true, detail: \"Browser-side parsing; targets saved in the job's production map.\" },\n { label: \"BusyBusy Excel labor & equipment import\", done: true, detail: \"SheetJS in the browser; original file stored to scoped Blob Storage.\" },\n { label: \"Cost-code consolidation by first 4 digits\", done: true, detail: \"1201.2 + 1201.3 → 1201; toggle shown in the cost-code table.\" },\n { label: \"Equipment usage, crew size, phase-code views\", done: true, detail: \"Most-used equipment, crew-by-day, expandable phase-code breakdown.\" },\n { label: \"Equipment-move tracking (phase 1101)\", done: true, detail: \"Driver labor + hauling truck cost, no charge for the transported machine.\" },\n { label: \"Manual production + cost-per-unit\", done: true, detail: \"Enter quantities per cost code; actual/target unit-cost compare.\" },\n { label: \"Reports & print/PDF view\", done: true, detail: \"Executive report cover + top cost codes; print stylesheet.\" },\n { label: \"Permanent job-based storage\", done: true, detail: \"Job data in scoped SQLite; original files in scoped Blob Storage, associated by job.\" },\n { label: \"Monday.com\" , done: false, detail: \"Disconnected in Phase 2. Set MONDAY_TOKEN for the Utility Schedule import in a later phase.\" },\n ];\n const doneCount = items.filter((i) => i.done).length;\n return <section className=\"panel migration-panel\">\n <div className=\"view-head\"><div><p>MIGRATION CHECKLIST</p><h3>Val Town staging — {doneCount}/{items.length} complete</h3></div><span className=\"source-pill\">AUTHENTICATED · {user.role.toUpperCase()}</span></div>\n <div className=\"migration-list\">{items.map((item) => <div className={`migration-row ${item.done ? \"done\" : \"\"}`} key={item.label}><i>{item.done ? \"✓\" : \"○\"}</i><span><b>{item.label}</b><small>{item.detail}</small></span></div>)}</div>\n <div className=\"migration-note\"><b>Remaining for Phase 3:</b> set <code>MONDAY_TOKEN</code> on this val and wire the Monday.com Utility Schedule import. Full equipment-rate tail re-import may be needed for production matching.</div>\n </section>;\n}\n","createdAt",["D",1788491387790],"branchVersion","branchId","be1fb918-ad42-444d-9d39-35276cd47cc6","id","9c7d0c21-6fce-451a-b6a0-ca5de197aeab","production-command-center",["D",1788450878892],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","NDX internal job production, labor, equipment, and cost dash","imageUrl","fe3e8c07-bae6-44d7-85dc-b222854b68d6","pinnedFileId","179f165a-a7d4-11f1-92c0-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a06443-646e-71a4-ad2c-20559176a0b0","tursoName","9c7d0c216fce451ab6a0ca5de197aeab","tursoHostname","9c7d0c216fce451ab6a0ca5de197aeab-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789514495229],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":109},"org",{"_107":106,"_108":109,"_110":109,"_19":62,"_111":112,"_113":31},"branch",{"_13":96,"_38":97,"_50":49,"_98":51,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":52,"_105":106},"isOwned",63,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wnewton","handle","displayName","","avatar","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":278,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":279,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":280,"_91":281,"_93":282,"_95":31},"tree",[213,218,219,220,221,222,223,224],"files",[213,214,215,216,217,218,219,220,221,222,223,224],"counts",{"_203":70,"_204":148,"_205":70,"_206":207,"_208":209},"contents",[136,137,138,139,140,141,142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":197,"_38":198,"_36":199,"_147":-5,"_48":49,"_47":200,"_149":66,"_45":201,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_33":202},{"_50":190,"_38":191,"_36":192,"_147":-5,"_48":49,"_47":193,"_149":66,"_45":194,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_33":196},{"_50":183,"_38":184,"_36":185,"_147":-5,"_48":49,"_47":186,"_149":31,"_45":187,"_13":157,"_40":26,"_42":188,"_30":31,"_151":-5,"_33":189},{"_50":176,"_38":177,"_36":178,"_147":-5,"_48":49,"_47":179,"_149":66,"_45":180,"_13":70,"_40":41,"_42":181,"_30":31,"_151":-5,"_33":182},{"_50":169,"_38":170,"_36":171,"_147":-5,"_48":49,"_47":172,"_149":31,"_45":173,"_13":157,"_40":41,"_42":174,"_30":31,"_151":-5,"_33":175},{"_50":162,"_38":163,"_36":164,"_147":-5,"_48":49,"_47":165,"_149":66,"_45":166,"_13":70,"_40":41,"_42":167,"_30":31,"_151":-5,"_33":168},{"_50":153,"_38":154,"_36":64,"_147":-5,"_48":49,"_47":155,"_149":31,"_45":156,"_13":157,"_40":158,"_42":159,"_30":31,"_151":160,"_33":161},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":150,"_13":70,"_40":41,"_42":109,"_30":31,"_151":-5,"_33":152},"0ba39e2b-78ae-4125-8280-9482a4fdad83","main.ts","c4e2e564-a7af-11f1-b820-1607ee4eb77e","parentId",1,"latest",["D",1788450878935],"label",[145],"b0929364-9fce-4d00-a9ff-3677320ef228","index.ts",24,["D",1788488919300],2,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport type { Context, Next } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { ready } from \"./db.ts\";\nimport {\n hashPassword,\n verifyPassword,\n createSession,\n sessionCookieHeader,\n clearCookieHeader,\n getSessionUser,\n requireAuth,\n requireAdmin,\n} from \"./auth.ts\";\nimport type { User } from \"./auth.ts\";\nimport { equipmentRates } from \"./equipmentRates.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nawait ready;\n\nconst app = new Hono();\n\nfunction getU(c: Context): User {\n return c.get<User>(\"user\");\n}\n\nconst authed = (c: Context, next: Next) => requireAuth(c, next);\nconst admin = (c: Context, next: Next) => requireAdmin(c, next);\n\nconst DEFAULT_RATES = { labor: 45, operator: 55, foreman: 65 };\nconst MAX_FILE_BYTES = 25 * 1024 * 1024; // 25 MB\n\nconst ALLOWED_EXT: Record<string, \"vista-target\" | \"timesheet\"> = {\n \".txt\": \"vista-target\",\n \".text\": \"vista-target\",\n \".xlsx\": \"timesheet\",\n \".xls\": \"timesheet\",\n};\n\nfunction jobSelect(fields: string[]): string {\n return fields.map((f) => `j.${f}`).join(\", \");\n}\n\n// ---- Frontend ----\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---- Auth + bootstrap (Phase 1, unchanged) ----\napp.get(\"/api/bootstrap\", async (c) => {\n const rows = await sqlite.execute(`SELECT COUNT(*) AS n FROM users`);\n const userCount = Number((rows.rows[0] as { n: number }).n);\n if (userCount === 0) return c.json({ state: \"setup\" });\n const user = await getSessionUser(c.req.raw);\n if (user) return c.json({ state: \"authed\", user });\n return c.json({ state: \"login\" });\n});\n\napp.post(\"/api/setup\", async (c) => {\n const rows = await sqlite.execute(`SELECT COUNT(*) AS n FROM users`);\n if (Number((rows.rows[0] as { n: number }).n) > 0) {\n return c.json({ error: \"Setup already complete. Sign in instead.\" }, 400);\n }\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {\n return c.json({ error: \"A valid email is required.\" }, 400);\n }\n if (password.length < 8) {\n return c.json({ error: \"Password must be at least 8 characters.\" }, 400);\n }\n const { salt, hash } = await hashPassword(password);\n await sqlite.batch([\n { sql: `INSERT INTO approved_emails (email, role) VALUES (?, 'admin')`, args: [email] },\n { sql: `INSERT INTO users (email, role, password_salt, password_hash) VALUES (?, 'admin', ?, ?)`, args: [email, salt, hash] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/login\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n const rows = await sqlite.execute(\n `SELECT id, email, role, password_salt, password_hash FROM users WHERE lower(email) = ?`,\n [email],\n );\n if (rows.rows.length === 0) return c.json({ error: \"Invalid email or password.\" }, 401);\n const row = rows.rows[0] as {\n id: number; email: string; role: string; password_salt: string | null; password_hash: string | null;\n };\n if (!row.password_salt || !row.password_hash) return c.json({ error: \"This user has no password set.\" }, 401);\n const ok = await verifyPassword(password, row.password_salt, row.password_hash);\n if (!ok) return c.json({ error: \"Invalid email or password.\" }, 401);\n const { token, expiresAt } = await createSession(Number(row.id));\n c.header(\"Set-Cookie\", sessionCookieHeader(token, expiresAt));\n return c.json({ user: { id: Number(row.id), email: row.email, role: row.role } });\n});\n\napp.post(\"/api/logout\", async (c) => {\n c.header(\"Set-Cookie\", clearCookieHeader);\n return c.json({ ok: true });\n});\n\n/**\n * Administrator password recovery.\n *\n * Security rules:\n * - The recovery code is read ONLY from the ADMIN_RECOVERY_CODE env var;\n * it is never hardcoded, displayed, or logged.\n * - Requires the existing administrator email + the recovery code + the new\n * password entered twice.\n * - The new password is hashed with the same PBKDF2 system as normal sign-in.\n * - On success, all existing sessions for that administrator are invalidated\n * so any open session must sign in again.\n */\napp.post(\"/api/recover\", async (c) => {\n const expectedCode = Deno.env.get(\"ADMIN_RECOVERY_CODE\");\n const body = await c.req.json().catch(() => ({}));\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const code = String(body.code ?? \"\");\n const password = String(body.password ?? \"\");\n const confirm = String(body.confirm ?? \"\");\n\n if (!expectedCode) {\n return c.json({ error: \"Password recovery is not configured. Contact the administrator.\" }, 500);\n }\n\n // Generic failures — never reveal whether the email or the code was wrong.\n const fail = () => c.json({ error: \"Unable to reset the password. Check your email and recovery code, then try again.\" }, 401);\n\n if (!email || password.length < 8 || password !== confirm) {\n return c.json({ error: \"Enter your administrator email, a new password of at least 8 characters, and confirm it.\" }, 400);\n }\n\n // Timing-safe comparison of the recovery code.\n const a = new Uint8Array(new TextEncoder().encode(code));\n const b = new Uint8Array(new TextEncoder().encode(expectedCode));\n let diff = a.length === b.length ? 0 : 1;\n const len = Math.max(a.length, b.length);\n for (let i = 0; i < len; i++) {\n const av = i < a.length ? a[i] : 0;\n const bv = i < b.length ? b[i] : 0;\n diff |= av ^ bv;\n }\n if (diff !== 0) return fail();\n\n const rows = await sqlite.execute(\n `SELECT id FROM users WHERE lower(email) = ? AND role = 'admin'`,\n [email],\n );\n if (rows.rows.length === 0) return fail();\n const userId = Number((rows.rows[0] as { id: number }).id);\n\n const { salt, hash } = await hashPassword(password);\n await sqlite.batch([\n {\n sql: `UPDATE users SET password_salt = ?, password_hash = ? WHERE id = ?`,\n args: [salt, hash, userId],\n },\n // Invalidate every session for this administrator.\n { sql: `DELETE FROM sessions WHERE user_id = ?`, args: [userId] },\n ]);\n\n return c.json({ ok: true });\n});\n\n// ---- Jobs CRUD ----\n\nasync function getJobRow(id: number) {\n const rows = await sqlite.execute(\n `SELECT id, name, source, job_number, status, superintendent, project_manager,\n estimator, location, jurisdiction, general_contractor, foreman,\n prevailing_wage, permit_number, schedule_group, monday_url\n FROM jobs WHERE id = ?`,\n [id],\n );\n return rows.rows[0] ?? null;\n}\n\napp.get(\"/api/jobs\", authed, async (c) => {\n const rows = await sqlite.execute(\n `SELECT id, name, source, job_number, status, superintendent, project_manager,\n estimator, location, jurisdiction, general_contractor, foreman,\n prevailing_wage, permit_number, schedule_group, monday_url, created_at\n FROM jobs ORDER BY name`,\n );\n return c.json({ jobs: rows.rows });\n});\n\napp.post(\"/api/jobs\", authed, admin, async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const name = String(body.name ?? \"\").trim();\n if (!name) return c.json({ error: \"Job name is required.\" }, 400);\n const me = getU(c);\n const result = await sqlite.execute(\n `INSERT INTO jobs (name, source, created_by) VALUES (?, 'manual', ?)`,\n [name, me.id],\n );\n const id = Number(result.lastInsertRowid);\n await sqlite.execute(\n `INSERT OR IGNORE INTO job_labor_rates (job_id, labor, operator, foreman, updated_at)\n VALUES (?, ?, ?, ?, datetime('now'))`,\n [id, DEFAULT_RATES.labor, DEFAULT_RATES.operator, DEFAULT_RATES.foreman],\n );\n const row = await getJobRow(id);\n return c.json({ job: row }, 201);\n});\n\napp.put(\"/api/jobs/:id\", authed, admin, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const allowed = [\"name\", \"job_number\", \"status\", \"superintendent\", \"project_manager\", \"estimator\",\n \"location\", \"jurisdiction\", \"general_contractor\", \"foreman\", \"prevailing_wage\", \"permit_number\",\n \"schedule_group\", \"monday_url\"];\n for (const key of allowed) {\n if (body[key] !== undefined) {\n await sqlite.execute(`UPDATE jobs SET ${key} = ? WHERE id = ?`, [String(body[key]), id]);\n }\n }\n const row = await getJobRow(id);\n if (!row) return c.json({ error: \"Job not found.\" }, 404);\n return c.json({ job: row });\n});\n\napp.delete(\"/api/jobs/:id\", authed, admin, async (c) => {\n const id = Number(c.req.param(\"id\"));\n // Delete blobs first, then the cascading rows.\n const files = await sqlite.execute(`SELECT blob_key FROM job_files WHERE job_id = ?`, [id]);\n for (const f of files.rows) {\n try { await blob.delete(f.blob_key as string); } catch { /* ignore */ }\n }\n await sqlite.execute(`DELETE FROM job_files WHERE job_id = ?`, [id]);\n await sqlite.execute(`DELETE FROM jobs WHERE id = ?`, [id]);\n return c.json({ ok: true });\n});\n\n// ---- Per-job labor rates ----\n\napp.get(\"/api/jobs/:id/rates\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(\n `SELECT labor, operator, foreman FROM job_labor_rates WHERE job_id = ?`,\n [id],\n );\n if (rows.rows.length === 0) return c.json({ rates: { ...DEFAULT_RATES }, isDefault: true });\n return c.json({ rates: rows.rows[0], isDefault: false });\n});\n\napp.put(\"/api/jobs/:id/rates\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const labor = Number(body.labor ?? DEFAULT_RATES.labor);\n const operator = Number(body.operator ?? DEFAULT_RATES.operator);\n const foreman = Number(body.foreman ?? DEFAULT_RATES.foreman);\n await sqlite.execute(\n `INSERT INTO job_labor_rates (job_id, labor, operator, foreman, updated_at)\n VALUES (?, ?, ?, ?, datetime('now'))\n ON CONFLICT(job_id) DO UPDATE SET labor = excluded.labor, operator = excluded.operator,\n foreman = excluded.foreman, updated_at = datetime('now')`,\n [id, labor, operator, foreman],\n );\n return c.json({ rates: { labor, operator, foreman }, isDefault: false });\n});\n\n// ---- Job data (autosave) ----\n\nconst emptyJobData = {\n entries: [],\n production: {},\n actualRows: [],\n equipmentUsage: [],\n crewDays: [],\n phaseUsage: [],\n equipmentMoves: [],\n forecast: { budget: \"\", completion: \"\" },\n};\n\napp.get(\"/api/jobs/:id/data\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(`SELECT data FROM job_data WHERE job_id = ?`, [id]);\n if (rows.rows.length === 0) return c.json({ data: emptyJobData });\n try {\n return c.json({ data: JSON.parse(rows.rows[0].data as string) });\n } catch {\n return c.json({ data: emptyJobData });\n }\n});\n\napp.put(\"/api/jobs/:id/data\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json().catch(() => ({}));\n const data = body.data ?? {};\n await sqlite.execute(\n `INSERT INTO job_data (job_id, data, updated_at) VALUES (?, ?, datetime('now'))\n ON CONFLICT(job_id) DO UPDATE SET data = excluded.data, updated_at = datetime('now')`,\n [id, JSON.stringify(data)],\n );\n return c.json({ ok: true });\n});\n\n// ---- File uploads (Vista target TXT / BusyBusy Excel) ----\n\nasync function storeFileParts(formData: FormData, jobId: number, user: User) {\n const saved: { filename: string; kind: string; size: number }[] = [];\n const errors: string[] = [];\n\n for (const [key, value] of formData.entries()) {\n if (!(value instanceof File)) continue;\n const file = value as File;\n const name = file.name ?? key;\n const ext = name.slice(name.lastIndexOf(\".\")).toLowerCase();\n const kind = ALLOWED_EXT[ext];\n if (!kind) {\n errors.push(`\"${name}\" is not an accepted file type. Use .txt for Vista targets or .xlsx/.xls for BusyBusy time sheets.`);\n continue;\n }\n if (file.size > MAX_FILE_BYTES) {\n errors.push(`\"${name}\" exceeds the 25 MB upload limit.`);\n continue;\n }\n const nonce = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n const blobKey = `jobs/${jobId}/${kind}/${nonce}-${name}`;\n const bytes = new Uint8Array(await file.arrayBuffer());\n await blob.set(blobKey, bytes);\n await sqlite.execute(\n `INSERT INTO job_files (job_id, kind, filename, content_type, size, blob_key, uploaded_by, uploaded_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, datetime('now'))`,\n [jobId, kind, name, file.type || \"application/octet-stream\", file.size, blobKey, user.id],\n );\n saved.push({ filename: name, kind, size: file.size });\n }\n return { saved, errors };\n}\n\napp.post(\"/api/jobs/:id/files\", authed, async (c) => {\n const jobId = Number(c.req.param(\"id\"));\n const me = getU(c);\n const formData = await c.req.formData().catch(() => null);\n if (!formData) return c.json({ error: \"Invalid upload.\" }, 400);\n const { saved, errors } = await storeFileParts(formData, jobId, me);\n if (saved.length === 0) {\n return c.json({ error: errors.join(\" \") || \"No files uploaded.\" }, 400);\n }\n return c.json({ ok: true, saved, warnings: errors });\n});\n\napp.get(\"/api/jobs/:id/files\", authed, async (c) => {\n const id = Number(c.req.param(\"id\"));\n const rows = await sqlite.execute(\n `SELECT id, kind, filename, content_type, size, uploaded_at FROM job_files WHERE job_id = ? ORDER BY uploaded_at DESC`,\n [id],\n );\n return c.json({ files: rows.rows });\n});\n\n// ---- Equipment rates ----\napp.get(\"/api/equipment-rates\", authed, async (c) => {\n return c.json({ rates: equipmentRates, count: equipmentRates.length });\n});\n\n// ---- Monday.com (disconnected in Phase 2) ----\napp.get(\"/api/monday-connection\", authed, async (c) => {\n return c.json({ connected: false, message: \"Monday.com not connected\" });\n});\n\napp.post(\"/api/monday-refresh\", authed, async (c) => {\n return c.json({ error: \"Monday.com is not connected yet. The Utility Schedule import will be enabled in a later phase.\" }, 400);\n});\n\n// ---- Migration status ----\napp.get(\"/api/migration-status\", authed, async (c) => {\n const users = (await sqlite.execute(`SELECT COUNT(*) AS n FROM users`)).rows[0] as { n: number };\n const jobs = (await sqlite.execute(`SELECT COUNT(*) AS n FROM jobs`)).rows[0] as { n: number };\n const mondayToken = Deno.env.get(\"MONDAY_TOKEN\");\n return c.json({\n users: Number(users.n),\n jobs: Number(jobs.n),\n mondayTokenConfigured: Boolean(mondayToken),\n mondayConnected: false,\n });\n});\n\n// Admin: manage approved users.\napp.get(\"/api/admin/users\", authed, admin, async (c) => {\n const approved = await sqlite.execute(\n `SELECT id, email, role, created_at FROM approved_emails ORDER BY email`,\n );\n return c.json({ approved: approved.rows });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","ndx-command-center",[154],"e0a3d028-1a1e-42fb-930b-28f93ae6d0ca","equipmentRates.ts","b7729c34-a7d3-11f1-8201-1607ee4eb77e",4,["D",1788466317861],"export type EquipmentRate = { label: string; rate: number };\n\n/**\n * Hourly operating rates imported from Rates by Equipment.pdf (08/14/26).\n *\n * NOTE: The migration source captured most of this list but was truncated at\n * entry \"5103\". The remaining plate-compactor / small-tool entries should be\n * reconciled from the original PDF before production use. This staging copy\n * carries the entries present in the source.\n */\nexport const equipmentRates: EquipmentRate[] = [\n { label: \"001 2013 Ram Truck 3500 ST\", rate: 100.00 },\n { label: \"002 2014 A Double Cab SR/SRS\", rate: 100.00 },\n { label: \"003 2003 F250 Super Duty\", rate: 100.00 },\n { label: \"004 2016 Ram 2500 Laramie\", rate: 100.00 },\n { label: \"005 2017 Ram 3500 Laramie\", rate: 100.00 },\n { label: \"006 2008 F250 Super Duty\", rate: 100.00 },\n { label: \"007 2021 Ram 3500 Laramie\", rate: 100.00 },\n { label: \"008 2015 F350 Super Duty\", rate: 100.00 },\n { label: \"009 2022 F150 Supercrew\", rate: 100.00 },\n { label: \"010 2022 F150 Supercrew\", rate: 100.00 },\n { label: \"011 2022 F350 Super Duty\", rate: 100.00 },\n { label: \"012 2019 Silverado C2500 Heavy Duty\", rate: 100.00 },\n { label: \"013 2013 Silverado C3500\", rate: 100.00 },\n { label: \"014 2015 F450 Super Duty\", rate: 100.00 },\n { label: \"015 2016 F350 Super Duty\", rate: 100.00 },\n { label: \"016 2015 F450 Super Duty\", rate: 100.00 },\n { label: \"018 2021 F350 Super Duty\", rate: 100.00 },\n { label: \"019 2021 F350 Super Duty\", rate: 100.00 },\n { label: \"020 2011 Ram 2500\", rate: 100.00 },\n { label: \"021 2022 F450 Super Duty\", rate: 100.00 },\n { label: \"022 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"023 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"024 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"025 2022 F350 Super Duty\", rate: 100.00 },\n { label: \"026 2023 F150 Supercrew\", rate: 100.00 },\n { label: \"027 2025 F-150 STX\", rate: 100.00 },\n { label: \"028 2026 F-150 Crew Cab\", rate: 100.00 },\n { label: \"029 2026 Ford F150\", rate: 100.00 },\n { label: \"203 Case 580N Backhoe\", rate: 70.03 },\n { label: \"204 Case 580SN T4 Backhoe\", rate: 70.03 },\n { label: \"205 Case 580 SN T4 Backhoe\", rate: 70.03 },\n { label: \"206 Case 580SN T4B Backhoe\", rate: 70.03 },\n { label: \"207 JD 320 P-Tier Backhoe\", rate: 70.03 },\n { label: \"208 Case 570N-EP Backhoe\", rate: 70.03 },\n { label: \"301 CAT 322 BL Trackhoe W/ Hammer\", rate: 103.49 },\n { label: \"303 Case CX36B Excavator\", rate: 44.57 },\n { label: \"305 KOM PC 78US-8 Mini Excavator\", rate: 57.89 },\n { label: \"306 KOM PC210LC-11 Excavator\", rate: 103.49 },\n { label: \"307 CAT 303.5 E2 Mini Ex\", rate: 44.57 },\n { label: \"308 CAT 308-07 T Midi Excavator\", rate: 57.89 },\n { label: \"309 CAT 320-07 Excavator\", rate: 103.49 },\n { label: \"310 CAT 308-07 Mini Excavator\", rate: 57.89 },\n { label: \"311 CAT 303.5-07 Mini Excavator\", rate: 44.57 },\n { label: \"312 CAT 308-07 Midi Ex\", rate: 57.89 },\n { label: \"313 CAT 303.5-07 Mini Ex\", rate: 44.57 },\n { label: \"314 CAT 349FL Excavator\", rate: 210.00 },\n { label: \"315 CAT320GC Excavator\", rate: 103.49 },\n { label: \"316 KOM PC78US-11 Excavator\", rate: 57.89 },\n { label: \"317 CAT 303.5-07OR Mini Ex\", rate: 44.57 },\n { label: \"318 CAT 308-07CR Midi Excavator\", rate: 57.89 },\n { label: \"4001 2022 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4002 2022 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4003 2021 Peterbilt 579 Water Truck\", rate: 48.67 },\n { label: \"4005 2021 Peterbilt 579 4x2 Water Truck\", rate: 48.67 },\n { label: \"4006 2012 Kenworth T370 Water Truck\", rate: 61.48 },\n { label: \"4007 2012 Kenworth T370 Water Truck\", rate: 61.48 },\n { label: \"4008 1999 Sterling Water Truck\", rate: 48.67 },\n { label: \"4009 2006 Peterbilt 378 Convention Water Truck\", rate: 61.48 },\n { label: \"4010 1997 Water Truck (2000G)\", rate: 48.67 },\n { label: \"4011 2004 Water Pull 615 (6000G)\", rate: 157.80 },\n { label: \"4012 2019 Freightliner Water Truck (2000G)\", rate: 61.48 },\n { label: \"4013 2023 Freightliner Water Truck (2000G)\", rate: 48.67 },\n { label: \"4014 2023 Water Wagon 613CII\", rate: 157.80 },\n { label: \"4015 1993 International Water Truck\", rate: 61.48 },\n { label: \"4016 1992 Peterbilt Water Truck\", rate: 61.48 },\n { label: \"4017 1996 Peterbilt Water Truck\", rate: 61.48 },\n { label: \"4018 1998 Water Truck\", rate: 48.67 },\n { label: \"402 CAT 966F Loader\", rate: 172.14 },\n { label: \"404 CAT 938K Loader\", rate: 85.05 },\n { label: \"405 KOM WA320 Loader\", rate: 85.05 },\n { label: \"406 KOM WA380 Loader\", rate: 123.98 },\n { label: \"407 CAT 950M Loader\", rate: 123.98 },\n { label: \"408 CAT 950M Loader (New)\", rate: 123.98 },\n { label: \"409 CAT 950M Loader\", rate: 123.98 },\n { label: \"410 CAT 950M Loader\", rate: 123.98 },\n { label: \"4100 2021 Peterbilt 337 Fuel Truck\", rate: 0.00 },\n { label: \"4101 2026 Peterbilt 537 Fuel Truck\", rate: 0.00 },\n { label: \"4102 2021 Peterbilt 348 8x4 Dump Truck\", rate: 157.99 },\n { label: \"4103 1995 International Dump Truck\", rate: 157.99 },\n { label: \"4104 2022 Peterbilt 579 Dump Truck\", rate: 157.99 },\n { label: \"4105 2021 Peterbilt 579 4x2 Dump Truck\", rate: 157.99 },\n { label: \"4106 Peterbilt 389\", rate: 157.99 },\n { label: \"4107 International ProStar 6x4 Day Cab Truck\", rate: 157.99 },\n { label: \"4108 Peterbilt 378 Convention\", rate: 157.99 },\n { label: \"411 KOM WA320-8 Loader\", rate: 85.05 },\n { label: \"412 CAT 950-14 Loader\", rate: 123.98 },\n { label: \"413 JD 644 P-Tier Loader\", rate: 123.98 },\n { label: \"414 CAT 950M Loader\", rate: 123.98 },\n { label: \"504 Case SR175 Skidsteer\", rate: 44.57 },\n { label: \"507 Case SR210 Skidsteer (New)\", rate: 44.57 },\n { label: \"508 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"509 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"510 Case SR210B T4 Skidsteer\", rate: 44.57 },\n { label: \"5100 Plate Compactors\", rate: 0.00 },\n { label: \"5101 Multiquip Plate Wacker\", rate: 0.00 },\n { label: \"5102 Sakai Wacker Rammer\", rate: 0.00 },\n // The source file truncated here. The remaining entries (from ~5103 onward,\n // small tools / saws / trailers / generators) should be re-imported from\n // \"Rates by Equipment.pdf\" before production use.\n];\n",[163],"e8626441-c730-4955-b23b-b61caa4a44b8","db.ts","9d68b710-a7d3-11f1-bea0-1607ee4eb77e",18,["D",1788472738104],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n/**\n * Database migrations for the Production Command Center.\n *\n * The migration has its own DB tables for users, sessions, approved emails,\n * jobs, job labor rates, job data, Monday snapshots, and uploaded-file metadata.\n * All statements use CREATE TABLE IF NOT EXISTS / ALTER guard so the setup is\n * idempotent across restarts.\n */\n\nconst migrations: { name: string; sql: string[] }[] = [\n {\n name: \"0001_initial_auth_and_jobs\",\n sql: [\n `CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n role TEXT NOT NULL DEFAULT 'user' CHECK (role IN ('admin','user')),\n password_salt TEXT,\n password_hash TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,\n token_hash TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n expires_at TEXT NOT NULL\n )`,\n `CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id)`,\n `CREATE TABLE IF NOT EXISTS approved_emails (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n role TEXT NOT NULL DEFAULT 'user' CHECK (role IN ('admin','user')),\n created_by INTEGER REFERENCES users(id),\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS jobs (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n source TEXT,\n job_number TEXT,\n status TEXT,\n superintendent TEXT,\n project_manager TEXT,\n estimator TEXT,\n location TEXT,\n jurisdiction TEXT,\n general_contractor TEXT,\n foreman TEXT,\n prevailing_wage TEXT,\n permit_number TEXT,\n schedule_group TEXT,\n monday_url TEXT,\n created_by INTEGER REFERENCES users(id),\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS job_labor_rates (\n job_id INTEGER PRIMARY KEY REFERENCES jobs(id) ON DELETE CASCADE,\n labor REAL,\n operator REAL,\n foreman REAL,\n updated_at TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS job_data (\n job_id INTEGER PRIMARY KEY REFERENCES jobs(id) ON DELETE CASCADE,\n data TEXT,\n updated_at TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS monday_snapshots (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n fetched_at TEXT NOT NULL DEFAULT (datetime('now')),\n jobs_json TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS job_files (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n job_id INTEGER REFERENCES jobs(id) ON DELETE CASCADE,\n kind TEXT NOT NULL,\n filename TEXT NOT NULL,\n content_type TEXT,\n size INTEGER,\n blob_key TEXT NOT NULL,\n uploaded_by INTEGER REFERENCES users(id),\n uploaded_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS settings (\n key TEXT PRIMARY KEY,\n value TEXT\n )`,\n ],\n },\n {\n name: \"0002_jobs_created_by\",\n sql: [\n // 0001 ran before created_by was added to the jobs CREATE TABLE, so add it\n // via ALTER TABLE now. Idempotent across restarts via try/catch.\n `ALTER TABLE jobs ADD COLUMN created_by INTEGER REFERENCES users(id)`,\n ],\n },\n];\n\nconst applied = new Set<string>();\n\nexport async function migrate(): Promise<void> {\n // Track applied migrations.\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS _migrations (\n name TEXT PRIMARY KEY,\n applied_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n );\n\n for (const migration of migrations) {\n const row = await sqlite.execute(\n `SELECT name FROM _migrations WHERE name = ?`,\n [migration.name],\n );\n if (row.rows.length > 0) {\n applied.add(migration.name);\n continue;\n }\n await sqlite.batch(\n migration.sql.map((sql) => ({ sql })),\n );\n await sqlite.execute(\n `INSERT INTO _migrations (name) VALUES (?)`,\n [migration.name],\n );\n applied.add(migration.name);\n }\n}\n\n/** Runs migrations once at import time (idempotent). */\nexport const ready = migrate();\n",[170],"345b0511-440e-4372-8675-5a014e9ef1c1","auth.ts","ace8cfc2-a7d3-11f1-8230-1607ee4eb77e",3,["D",1788466300593],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Context, Next } from \"npm:hono\";\n\nexport interface User {\n id: number;\n email: string;\n role: \"admin\" | \"user\";\n}\n\nexport const SESSION_COOKIE = \"pcc_session\";\nconst SESSION_DAYS = 30;\n\nconst encoder = new TextEncoder();\n\nfunction bufToHex(buf: ArrayBuffer): string {\n return [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nfunction hexToBuf(hex: string): Uint8Array {\n const out = new Uint8Array(hex.length / 2);\n for (let i = 0; i < out.length; i++) out[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);\n return out;\n}\n\nasync function randomHex(bytes: number): Promise<string> {\n const buf = crypto.getRandomValues(new Uint8Array(bytes));\n return bufToHex(buf.buffer);\n}\n\n/** PBKDF2-SHA256 password hashing with a per-user random salt. */\nexport async function hashPassword(password: string): Promise<{ salt: string; hash: string }> {\n const salt = await randomHex(16);\n const keyMaterial = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n \"PBKDF2\",\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt: hexToBuf(salt), iterations: 120_000, hash: \"SHA-256\" },\n keyMaterial,\n 256,\n );\n return { salt, hash: bufToHex(bits) };\n}\n\nexport async function verifyPassword(password: string, salt: string, hash: string): Promise<boolean> {\n try {\n const keyMaterial = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n \"PBKDF2\",\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt: hexToBuf(salt), iterations: 120_000, hash: \"SHA-256\" },\n keyMaterial,\n 256,\n );\n return bufToHex(bits) === hash;\n } catch {\n return false;\n }\n}\n\n/** Create a session for a user; returns the raw token to set as the cookie. */\nexport async function createSession(userId: number): Promise<{ token: string; expiresAt: string }> {\n const id = await randomHex(16);\n const token = await randomHex(32);\n const tokenHash = bufToHex((await crypto.subtle.digest(\"SHA-256\", encoder.encode(token))).buffer);\n const expiresAt = new Date(Date.now() + SESSION_DAYS * 24 * 60 * 60 * 1000).toISOString();\n await sqlite.execute(\n `INSERT INTO sessions (id, user_id, token_hash, expires_at) VALUES (?, ?, ?, ?)`,\n [id, userId, tokenHash, expiresAt],\n );\n return { token, expiresAt };\n}\n\nexport function sessionCookieHeader(token: string, expiresAt: string): string {\n return `${SESSION_COOKIE}=${token}; HttpOnly; Secure; SameSite=Lax; Path=/; Expires=${new Date(expiresAt).toUTCString()}`;\n}\n\nexport const clearCookieHeader = `${SESSION_COOKIE}=; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=0`;\n\n/** Resolve the current user from the request's cookie, or null. */\nexport async function getSessionUser(req: Request): Promise<User | null> {\n const cookie = req.headers.get(\"cookie\") ?? \"\";\n const match = cookie.split(\";\").map((s) => s.trim()).find((c) => c.startsWith(`${SESSION_COOKIE}=`));\n if (!match) return null;\n const token = match.slice(SESSION_COOKIE.length + 1);\n if (!token) return null;\n const tokenHash = bufToHex((await crypto.subtle.digest(\"SHA-256\", encoder.encode(token))).buffer);\n const rows = await sqlite.execute(\n `SELECT s.expires_at AS exp, u.id AS id, u.email AS email, u.role AS role\n FROM sessions s JOIN users u ON u.id = s.user_id\n WHERE s.token_hash = ?`,\n [tokenHash],\n );\n if (rows.rows.length === 0) return null;\n const row = rows.rows[0] as { exp: string; id: number; email: string; role: string };\n if (new Date(row.exp).getTime() < Date.now()) return null;\n return { id: Number(row.id), email: row.email, role: row.role as \"admin\" | \"user\" };\n}\n\n/** Hono middleware: require a logged-in user, else 401 JSON (for /api/*). */\nexport async function requireAuth(c: Context, next: Next) {\n const user = await getSessionUser(c.req.raw);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n c.set(\"user\", user);\n await next();\n}\n\n/** Hono middleware: require admin role. */\nexport async function requireAdmin(c: Context, next: Next) {\n const user = c.get<User>(\"user\");\n if (!user || user.role !== \"admin\") {\n return c.json({ error: \"Forbidden\" }, 403);\n }\n await next();\n}\n",[177],"1946f530-54c0-4ff0-b6da-9f835cf97bc6","README.md","27d70b36-a7d4-11f1-942c-1607ee4eb77e",33,["D",1788489041300],"# Production Command Center — Val Town migration\n\nA Val Town-native rebuild of the NDX Production Command Center. Cloudflare\nNext.js/Vinext has been replaced with **Hono** (routes) + a client-side **React**\nfrontend. **Cloudflare D1** → this val's scoped SQLite. **Cloudflare R2** → this\nval's scoped Blob Storage.\n\n> **Phase status: Phase 2 — non-Monday dashboard features complete.**\n> Auth, roles, the full dashboard (jobs, rates, Vista/BusyBusy imports, cost\n> consolidation, equipment/crew/phase views, equipment moves, reports), and\n> permanent job storage are implemented and tested. Monday.com remains\n> disconnected. No production job data is loaded.\n\n## Try it\n\n- [Launch the app](url:index.ts)\n- [View source](url:/source)\n- [Add `MONDAY_TOKEN`](https://www.val.town/x/wnewton/production-command-center/environment-variables?key=MONDAY_TOKEN)\n\nSign in with the existing administrator account. Every dashboard page and data\nAPI requires authentication.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[\"index.ts (Hono server)\"]\n Hono -->|serves| Root[\"frontend/root.tsx (HTML shell)\"]\n Root -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"frontend/App.tsx (auth + dashboard)\"]\n App -->|\"fetch /api/*\"| Hono\n Hono -->|SQLite| DB[\"project-scoped SQLite (std/sqlite/main.ts)\"]\n Hono -->|Blob| Blob[\"scoped Blob Storage (original uploads)\"]\n Hono -->|secrets| Env[\"Deno.env MONDAY_TOKEN (server-only)\"]\n```\n\n## Files\n\n```\nindex.ts ← Hono HTTP entrypoint (auth + jobs + data + files + rates)\ndb.ts ← SQLite migrations (users, sessions, jobs, rates, data, Monday, files)\nauth.ts ← PBKDF2 hashing, HTTP-only session cookies, role middleware\nequipmentRates.ts ← Equipment rate book (source of hourly operating rates)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint\n App.tsx ← Auth + jobs, rates, imports, cost/equipment/report views\n styles.css ← NDX black/white/red interface\n```\n\n## Auth model\n\n- **Email + password** login (PBKDF2-SHA256 hashed, per-user salt).\n- **HTTP-only, Secure, SameSite=Lax** session cookie (`pcc_session`), token hashed in DB, 30-day expiry.\n- **Approved-email allowlist** (`approved_emails`) with `admin` / `user` roles. Admins manage jobs; both may view/enter data.\n- Every data API requires auth (`requireAuth`); job create/edit/delete also requires `requireAdmin`.\n\n## Administrator password recovery\n\nA \"Forgot password?\" link on the sign-in screen opens a recovery form. To reset an\nadministrator password you need the administrator email, the recovery code, and a\nnew password entered twice.\n\n- The recovery code is read **only** from the `ADMIN_RECOVERY_CODE` environment\n variable — it is never hardcoded, displayed, or logged.\n- The new password is hashed with the same PBKDF2 system used for sign-in.\n- On success all of that administrator's sessions are invalidated (signed out).\n- The email + code combination is validated with a timing-safe comparison and\n failures return a generic message (no user-enumeration).\n- No default password or hardcoded secret is used.\n\n👉 Add `ADMIN_RECOVERY_CODE` here: https://www.val.town/x/wnewton/production-command-center/environment-variables?key=ADMIN_RECOVERY_CODE\n\n## Phase 2 — implemented & tested\n\n- **Jobs** — create, select (top bar), edit, delete (cascades data, rates, files, blobs).\n- **Per-job labor / operator / foreman rates** — saved per job with standard defaults.\n- **Vista TXT target import** — browser-side CSV parsing, targets stored in the job's production map, original saved to Blob.\n- **BusyBusy Excel import** — SheetJS in the browser; actual costs per cost code, equipment usage, crew size, phase-code breakdown, equipment moves. Original saved to Blob.\n- **Cost-code consolidation** — first-4-digit grouping (1201.2 + 1201.3 → 1201), toggle in the cost-code table.\n- **Equipment usage / crew size / phase-code views** — most-used equipment, crew-by-workday, expandable per-phase detail.\n- **Equipment moves (phase 1101)** — equipment moved, move hours, driver labor cost, hauling truck cost, total; no charge for the transported machine.\n- **Manual production + cost per unit** — enter quantities per cost code; actual vs. Vista target unit cost.\n- **Reports + print/PDF** — executive report cover, top cost codes, print stylesheet.\n- **Permanent storage** — job data in SQLite, original uploads in Blob Storage keyed by job.\n\n**Monday.com: disconnected.** The Utility Schedule import is deferred to Phase 3.\n\n## Remaining (Phase 3)\n\n- Set `MONDAY_TOKEN` environment variable.\n- Wire the Monday.com Utility Schedule board import (map jobs, exclude the `Completed.` group, add the refresh button, use the `monday_snapshots` table).\n- Optionally re-import the tail of the equipment-rate PDF (the migration source was truncated at entry `5103`, so `equipmentRates.ts` carries 96 records; some small-tool entries may be missing).\n\n## Secrets\n\nNo added env vars are required for Phase 2 — the val injects its own API token. The single secret needed for Phase 3 is `MONDAY_TOKEN`.\n\n👉 Add `MONDAY_TOKEN` here: https://www.val.town/x/wnewton/production-command-center/environment-variables?key=MONDAY_TOKEN\n\n## Safety\n\n- Monday.com token (when added) stays server-side only.\n- All reads/writes/uploads are authenticated; uploaded file type + size validated.\n- Parameterized SQL throughout.\n- The live hosted Command Center is untouched.\n",[184],"b4ddd245-b24d-43c0-84da-9e5509f17f07","scripts","3602a262-390e-4ee8-b50a-14fa58db107b",17,["D",1788472667790],"directory",[191],"d282a7b4-665c-4fa4-96fc-c126b9fb15e5","frontend","ba293578-a7d3-11f1-8201-1607ee4eb77e",5,["D",1788466322820],[198],"pulls","branches","forks","envVars",{"_210":179,"_212":70},"connections",{"_210":70,"_211":70},"count","unfilledCount","emptyCount",{"_50":197,"_38":198,"_36":199,"_147":-5,"_48":49,"_47":200,"_149":66,"_45":275,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_226":276,"_33":277},{"_50":271,"_38":39,"_36":37,"_147":199,"_48":49,"_47":14,"_149":31,"_45":272,"_13":258,"_40":41,"_42":44,"_30":31,"_151":-5,"_226":273,"_33":274},{"_50":263,"_38":264,"_36":265,"_147":199,"_48":49,"_47":266,"_149":66,"_45":267,"_13":70,"_40":41,"_42":268,"_30":31,"_151":-5,"_226":269,"_33":270},{"_50":255,"_38":256,"_36":257,"_147":199,"_48":49,"_47":258,"_149":66,"_45":259,"_13":70,"_40":41,"_42":260,"_30":31,"_151":-5,"_226":261,"_33":262},{"_50":247,"_38":248,"_36":249,"_147":199,"_48":49,"_47":250,"_149":31,"_45":251,"_13":179,"_40":26,"_42":252,"_30":31,"_151":-5,"_226":253,"_33":254},{"_50":190,"_38":191,"_36":192,"_147":-5,"_48":49,"_47":193,"_149":66,"_45":244,"_13":70,"_40":195,"_42":-5,"_30":31,"_151":-5,"_226":245,"_33":246},{"_50":183,"_38":184,"_36":185,"_147":-5,"_48":49,"_47":186,"_149":31,"_45":241,"_13":157,"_40":26,"_42":188,"_30":31,"_151":-5,"_226":242,"_33":243},{"_50":176,"_38":177,"_36":178,"_147":-5,"_48":49,"_47":179,"_149":66,"_45":238,"_13":70,"_40":41,"_42":181,"_30":31,"_151":-5,"_226":239,"_33":240},{"_50":169,"_38":170,"_36":171,"_147":-5,"_48":49,"_47":172,"_149":31,"_45":235,"_13":157,"_40":41,"_42":174,"_30":31,"_151":-5,"_226":236,"_33":237},{"_50":162,"_38":163,"_36":164,"_147":-5,"_48":49,"_47":165,"_149":66,"_45":232,"_13":70,"_40":41,"_42":167,"_30":31,"_151":-5,"_226":233,"_33":234},{"_50":153,"_38":154,"_36":64,"_147":-5,"_48":49,"_47":155,"_149":31,"_45":229,"_13":157,"_40":158,"_42":159,"_30":31,"_151":160,"_226":230,"_33":231},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":225,"_13":70,"_40":41,"_42":109,"_30":31,"_151":-5,"_226":227,"_33":228},["D",1788450878935],"children",[],[145],["D",1788488919300],[],[154],["D",1788466317861],[],[163],["D",1788472738104],[],[170],["D",1788466300593],[],[177],["D",1788489041300],[],[184],["D",1788472667790],[],[191],"7c5f6095-1ea6-438c-8ce2-b4c0dac7d356","styles.css","ff077a2e-a7d3-11f1-92c0-1607ee4eb77e",34,["D",1788490751989],"/* Production Command Center — NDX black/white/red interface */\n:root{--navy:#090909;--red:#d71920;--ink:#111;--muted:#707070;--line:#dedede;--paper:#f3f3f3;--shadow:0 10px 30px rgba(0,0,0,.075)}\n*{box-sizing:border-box}\nhtml{background:var(--paper)}\nbody{margin:0;background:radial-gradient(circle at 92% 4%,rgba(196,18,48,.07),transparent 25%),radial-gradient(circle at 42% 96%,rgba(0,0,0,.035),transparent 32%),var(--paper);color:var(--ink);font-family:\"Manrope\",Arial,sans-serif;-webkit-font-smoothing:antialiased}\nbutton{border:1px solid #d7dfe2;background:#fff;border-radius:6px;padding:10px 14px;margin-left:7px;font-size:10px;font-weight:800;color:#455660;cursor:pointer}\n.gold{background:var(--red);border-color:var(--red);color:#fff}\n.shell{min-height:100vh;display:block}\n.shell aside{position:fixed;inset:0 auto 0 0;z-index:30;width:258px;padding:24px 16px 20px;background:linear-gradient(165deg,#141414 0%,#090909 58%,#000 100%);box-shadow:12px 0 40px rgba(0,0,0,.14)}\n.shell aside:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 0,rgba(196,18,48,.3),transparent 28%),radial-gradient(circle at 100% 92%,rgba(196,18,48,.12),transparent 34%)}\n.brand,nav,.job,.user{position:relative;z-index:1}\n.brand{display:flex;gap:13px;align-items:center;padding:2px 7px 24px;border-bottom:1px solid rgba(255,255,255,.11)}\n.brand>i{width:50px;height:50px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:linear-gradient(145deg,#d81d3d,#aa0e28);box-shadow:0 10px 24px rgba(196,18,48,.3);display:grid;place-items:center;font:800 17px \"Manrope\";letter-spacing:-.08em;color:#fff;font-style:normal}\n.brand>i span{font-size:13px}\n.brand b{font-size:14px;letter-spacing:-.02em;color:#fff}\n.brand small{margin-top:5px;color:#a9a9a9;font:500 8px \"DM Mono\";letter-spacing:.11em}\n.brand span,.user span{display:flex;flex-direction:column}\n.shell nav{display:flex;flex-direction:column;gap:5px;margin-top:22px}\n.shell nav button{position:relative;display:flex;align-items:center;gap:12px;min-height:47px;padding:0 12px;border:0;border-radius:12px;color:#b7b7b7;background:transparent;font-size:11px;font-weight:600;transition:170ms ease;margin-left:0;width:100%;text-align:left}\n.shell nav button:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}\n.shell nav button>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#9c9c9c;background:rgba(255,255,255,.055);font-size:13px}\n.shell nav button.active{color:#fff;background:rgba(255,255,255,.1);box-shadow:0 8px 22px rgba(0,0,0,.1)}\n.shell nav button.active:before{content:\"\";position:absolute;left:0;width:3px;height:22px;border-radius:0 4px 4px 0;background:#e31b3d}\n.shell nav button.active>span{color:#fff;background:rgba(196,18,48,.72)}\n.job{margin-top:auto;border:0;border-top:1px solid rgba(255,255,255,.11);border-radius:0;padding:19px 10px 0!important;background:transparent!important;display:flex;flex-direction:column;gap:7px}\n.job small{color:#b8b8b8;font:500 8px \"DM Mono\";letter-spacing:.07em}\n.job b{font-size:11px;color:#fff}\n.job em{color:#ddd;font:500 9px \"DM Mono\";font-style:normal}\n.user{border-top:0;margin-top:18px;padding:0 10px;display:flex;gap:9px;align-items:center}\n.user>i{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#d91b3b,#b40e2a);display:grid;place-items:center;color:#fff;font-style:normal;font-size:10px;font-weight:bold}\n.user b{font-size:10px;color:#fff}\n.user small{font-size:8px;color:#a9a9a9}\n.shell main{width:calc(100% - 258px);max-width:none;min-height:100vh;margin-left:258px;padding:0 34px 66px}\n.shell main>header{position:sticky;top:0;z-index:20;min-height:92px;margin:0 -34px 30px;padding:17px 34px;align-items:center;display:flex;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(220,220,220,.92);box-shadow:0 8px 30px rgba(0,0,0,.04);backdrop-filter:blur(22px) saturate(1.2)}\nheader p{font-size:8px;letter-spacing:1.7px;font-weight:800;color:#8a979e;margin:0 0 7px}\nheader h1{font:700 clamp(25px,2.3vw,35px) \"Manrope\";line-height:1;letter-spacing:-.05em;margin:0 0 6px}\nheader span{font-size:11px;color:var(--muted)}\n.header-actions{display:flex;align-items:center;gap:10px}\nheader button{min-height:42px;margin:0;border-radius:11px;padding:0 17px;font-size:10px;transition:170ms ease}\nheader button:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.14)}\nheader .gold{background:linear-gradient(145deg,#d91b3b,#b40e2a)!important;box-shadow:0 5px 14px rgba(196,18,48,.22)}\nheader .logout{background:#fff;color:#111;border-color:#dedede}\n.top-job-picker{display:grid;gap:3px;min-width:235px;padding:7px 12px;border:1px solid #dbe3de;border-radius:11px;background:rgba(255,255,255,.82)}\n.top-job-picker small{color:#707070;font:500 8px \"DM Mono\";letter-spacing:.1em}\n.top-job-picker select{border:0;outline:0;background:transparent;color:#111;font-size:11px;font-weight:600}\n.status-line{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:11px 15px;margin-bottom:15px;font-size:10px;font-weight:700;color:#b51218}\n.panel,.kpis article{background:rgba(255,255,255,.92);border:1px solid rgba(220,220,220,.95);border-radius:17px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}\n.panel{padding:21px;margin-bottom:18px;overflow:hidden}\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:15px 0}\n.kpis article{min-height:145px;padding:21px 22px;border-top:3px solid #111;transition:180ms ease}\n.kpis article>i{display:grid;place-items:center;width:27px;height:27px;background:#f7e7e7;color:var(--red);border-radius:6px;font-style:normal;font-weight:bold}\n.kpis article p{margin-top:15px;font-size:8px;letter-spacing:1.5px;font-weight:800;color:#8a979e}\n.kpis h2{font:500 28px \"DM Mono\";margin:0 0 6px}\n.kpis span{font-size:8px;color:#84929a}\n.kpis .accent{border-top:3px solid var(--red)}\n.import-strip{display:flex;align-items:center;gap:9px;background:linear-gradient(145deg,#1a1a1a,#050505);color:#fff;border-left:5px solid var(--red);border-radius:22px;padding:13px 15px;margin-top:15px;box-shadow:0 18px 44px rgba(0,0,0,.18)}\n.import-strip>div{margin-right:auto}\n.import-strip p{color:#e1484d;margin-bottom:4px;font-size:8px;font-weight:800;letter-spacing:1.7px}\n.import-strip b{font-size:11px}\n.import-strip button{min-height:42px;border-radius:11px;border-color:#444;background:#222;color:#fff}\n.empty-state{padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#7b868c;text-align:center}\n.empty-state b{font:700 18px Georgia;color:#111}\n.empty-state span{font-size:10px;max-width:520px;line-height:1.5}\n.view-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e7e8;padding-bottom:16px}\n.view-head p{margin-bottom:4px;color:var(--red);font-size:8px;font-weight:800;letter-spacing:1.5px}\n.view-head h3{font:700 20px \"Manrope\";margin:0}\n.source-pill{padding:6px 9px;border-radius:20px;background:#f6e7ea;color:#b5122c;font:600 7px \"DM Mono\";letter-spacing:.08em}\n/* Migration checklist */\n.migration-panel{padding:22px!important}\n.migration-list{display:flex;flex-direction:column;margin-top:8px}\n.migration-row{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 6px;border-top:1px solid #ececec}\n.migration-row>i{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;font-style:normal;background:#eee;color:#999;font:600 12px \"DM Mono\"}\n.migration-row.done>i{background:#111;color:#fff}\n.migration-row>span{display:flex;flex-direction:column;gap:3px}\n.migration-row b{font-size:11px}\n.migration-row small{font-size:9px;color:#7a7a7a;line-height:1.4}\n.migration-note{margin-top:16px;padding:13px 15px;border-left:4px solid var(--red);background:#f8eeee;border-radius:10px;font-size:10px;line-height:1.5;color:#7a5a5c}\n.migration-note code{background:#fff;border:1px solid #e2ccce;padding:2px 6px;border-radius:5px;color:#b51218}\n/* Auth screens */\n.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px}\n.auth-card{width:min(440px,100%);background:rgba(255,255,255,.95);border:1px solid rgba(220,220,220,.95);border-radius:20px;box-shadow:var(--shadow);padding:34px;display:flex;flex-direction:column}\n.brand-mark{width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#d81d3d,#aa0e28);box-shadow:0 10px 24px rgba(196,18,48,.3);display:grid;place-items:center;font:800 20px \"Manrope\";letter-spacing:-.08em;color:#fff}\n.brand-mark span{font-size:15px}\n.auth-kicker{margin-top:24px;color:var(--red);font-size:9px;font-weight:800;letter-spacing:2px}\n.auth-card h1{font:700 26px \"Manrope\";letter-spacing:-.02em;margin:6px 0 8px}\n.auth-sub{font-size:11px;line-height:1.55;color:#707070;margin:0 0 18px}\n.auth-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:8px;font-weight:800;letter-spacing:1px;color:#777}\n.auth-card input{border:1px solid #d8dfe2;border-radius:10px;padding:12px 13px;font-size:12px}\n.auth-card .gold{min-height:46px;border-radius:11px;margin:6px 0 0;font-size:12px}\n.auth-status{font-size:11px;color:#b51218;background:#f8eeee;border-radius:8px;padding:9px 11px;margin:0 0 10px}\n.auth-loading{color:#777;font-size:11px;margin-top:20px}\n.backdrop{position:fixed;inset:0;background:rgba(8,8,8,.74);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:20px;z-index:100;backdrop-filter:blur(5px)}\n.backdrop form{width:min(550px,100%);display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden;margin:auto;background:#fff;padding:23px;border-radius:17px;box-shadow:0 30px 90px rgba(0,0,0,.32)}\n/* Modal shell: pin the header and the Save/Cancel actions; only the field body scrolls */\n.backdrop form>.form-head{flex:0 0 auto}\n.backdrop form>.actions{flex:0 0 auto}\n.backdrop form>.form-grid{flex:1 1 auto;min-height:0;overflow-y:auto}\n.form-head{display:flex;justify-content:space-between;margin:-23px -23px 20px;padding:19px 24px;color:#fff;background:#111;border-radius:17px 17px 0 0}\n.form-head p{color:#e15469}\n.form-head h2{font:700 23px \"Manrope\";margin:0}\n.form-head button{border:0;font-size:22px;color:#fff;background:transparent}\n.create-job-form>label{display:flex;flex-direction:column;gap:7px;margin-top:20px;font-size:8px;font-weight:bold;letter-spacing:1px;color:#777}\n.create-job-form>label input{border:1px solid #d8e0e3;border-radius:6px;padding:12px;font-size:12px}\n.job-help{font-size:9px;line-height:1.5;margin-top:12px;color:#888}\n.actions{display:flex;justify-content:flex-end;margin-top:17px}\n@media(max-width:1100px){.shell aside{width:82px}.shell main{width:calc(100% - 82px);margin-left:82px}.brand span,.job,.user span{display:none}.brand>i{width:48px}.shell nav button{font-size:0;padding:0 10px}.top-job-picker{min-width:180px}}\n@media(max-width:760px){.shell aside{position:static;width:100%;height:68px;min-height:0;padding:9px 14px}.shell aside nav,.job,.user{display:none}.brand{border:0;padding:0}.shell main{width:100%;margin:0;padding:0 15px 45px}.shell main>header{position:static;margin:0 -15px 20px;padding:16px}.kpis{grid-template-columns:1fr 1fr}}\n/* Print */\n@media print{aside,.header-actions,.import-strip,.logout{display:none!important}.shell main{margin:0;width:100%;padding:0}.panel{box-shadow:none;border:1px solid #ddd}}\n\n/* ===== Phase 2 components ===== */\n/* Monday status strip */\n.monday-strip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:5px solid #999;border-radius:14px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow)}\n.monday-strip>div{display:flex;flex-direction:column;gap:3px;margin-right:auto}\n.monday-strip p{color:#8a979e;margin:0;font-size:8px;font-weight:800;letter-spacing:1.5px}\n.monday-strip b{font-size:12px}\n.monday-strip span{font-size:10px;color:#7a848a}\n.monday-strip.not-connected{border-left-color:#b0b0b0}\n.monday-strip.not-connected b{color:#8a8a8a}\n.monday-strip button{min-height:36px;border-radius:10px;background:#f0f0f0;color:#999;cursor:not-allowed}\n/* Filters */\n.filters{height:56px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:28px;margin-top:14px;box-shadow:var(--shadow)}\n.filters label{font-size:7px;font-weight:bold;color:#87959d;display:flex;flex-direction:column;gap:5px}\n.filters select{border:0;background:#fff;font-size:10px;font-weight:bold}\n.filters>span{margin-left:auto;font-size:9px;color:#b51218}\n/* Jobs manager */\n.jobs-panel{padding:22px!important}\n.create-job-inline{display:flex;gap:10px;margin:16px 0}\n.create-job-inline input{flex:1;border:1px solid #d8e0e3;border-radius:10px;padding:12px;font-size:12px}\n.create-job-inline button{margin:0}\n.job-list{display:flex;flex-direction:column}\n.job-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 14px;border-top:1px solid #ececec}\n.job-list-row.active{background:#f8f2f2;border-left:3px solid var(--red)}\n.job-list-row>span:first-child{display:flex;flex-direction:column;gap:4px}\n.job-list-row b{font-size:12px}\n.job-list-row small{font-size:9px;color:#7a848a}\n.job-list-actions{display:flex;gap:6px}\n.job-list-actions button{margin:0;min-height:32px;border-radius:8px}\n.danger-ghost{color:#b51218;border-color:#e2ccce;background:#fff}\n.danger{background:#b51218;border-color:#b51218;color:#fff}\n.wide-form{width:min(640px,100%)!important}\n/* Labor rates */\n.labor-settings{display:grid;grid-template-columns:1.5fr .7fr;gap:14px}\n.rate-settings-card{padding:24px!important}\n.settings-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e4e7e8;padding-bottom:17px}\n.settings-head h3,.prevailing-card h3{font:700 21px \"Manrope\";margin:0}\n.save-status{font-size:9px;color:#d71920;background:#f8e8e8;padding:6px 9px;border-radius:14px}\n.settings-job{display:flex;flex-direction:column;gap:6px;margin:19px 0;font-size:8px;letter-spacing:1px;font-weight:bold;color:#777}\n.settings-job input{width:100%;border:1px solid #d8dfe2;border-radius:7px;padding:12px;background:#f5f5f5;font-size:11px;font-weight:bold}\n.rate-input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\n.rate-input-grid>label{border:1px solid #dedede;border-radius:8px;padding:15px}\n.rate-input-grid>label>span{display:flex;justify-content:space-between;font-size:11px;font-weight:bold}\n.rate-input-grid small{font-size:7px;color:#888}\n.rate-input-grid label>div{display:flex;align-items:center;margin-top:12px}\n.rate-input-grid i{font:700 20px Georgia;color:#d71920;font-style:normal}\n.rate-input-grid input{width:100%;border:0;border-bottom:2px solid #111;padding:5px;font:700 25px Georgia;outline:none}\n.rate-input-grid em{font-size:9px;color:#777;font-style:normal;white-space:nowrap}\n.rate-actions{display:flex;align-items:center;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid #e4e7e8}\n.rate-actions>span{margin-right:auto;max-width:45%;font-size:9px;line-height:1.5;color:#76848b}\n.prevailing-card{background:#111!important;color:#fff!important;display:flex;gap:16px;align-items:flex-start}\n.prevailing-card>i{width:42px;height:42px;border:1px solid #d71920;color:#fff;background:#d71920;display:grid;place-items:center;border-radius:7px;font-style:normal;font-weight:bold}\n.prevailing-card p{color:#e33b40}\n.prevailing-card span{font-size:10px;line-height:1.6;color:#bfc3c5;display:block;margin-top:12px}\n/* Daily */\n.daily-view{padding:22px!important}\n.daily-row{display:grid;grid-template-columns:2fr .8fr .7fr .9fr .9fr .9fr;align-items:center;min-height:58px;border-bottom:1px solid #eceff0;font-size:9px}\n.daily-head{min-height:34px;font-size:7px;font-weight:bold;letter-spacing:.7px;color:#7b868c}\n.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0}\n.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:7px;font-weight:bold;color:#7d8b93}\n.form-grid .wide{grid-column:1/-1}\n.form-grid input,.form-grid select{border:1px solid #d8e0e3;border-radius:6px;padding:10px}\n.equipment-calc{border:1px solid #dedede;border-radius:7px;padding:11px 13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;background:#fafafa}\n.equipment-calc span{display:flex;flex-direction:column}\n.equipment-calc small{font-size:7px;letter-spacing:1px;color:#777}\n.equipment-calc b{font:700 19px Georgia;margin-top:3px}\n.equipment-calc em{font-style:normal;font-size:9px;color:#777}\n.calculated{background:#f8eeee;border-left:4px solid var(--red);padding:12px;display:flex;justify-content:space-between;border-radius:11px}\n.calculated span{font-size:7px}\n.calculated b{font:700 16px Georgia;color:#b51218}\n/* Operations usage */\n.operations-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px;margin-bottom:15px}\n.operations-grid>.panel{margin:0}\n.usage-list{margin-top:14px}\n.usage-row{display:grid;grid-template-columns:28px 1fr auto;gap:11px;align-items:center;padding:11px 0;border-top:1px solid #ececec}\n.usage-row>i{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#111;color:#fff;font:600 9px \"DM Mono\";font-style:normal}\n.usage-row>span{min-width:0;display:flex;flex-direction:column;gap:4px}\n.usage-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}\n.usage-row small{color:#7a7a7a;font-size:8px}\n.usage-row em{display:block;width:100%;height:4px;border-radius:4px;background:#ececec}\n.usage-row em u{display:block;height:100%;border-radius:4px;background:#c41230;text-decoration:none}\n.usage-row>strong{min-width:62px;text-align:right;font:600 16px \"DM Mono\"}\n.usage-row>strong small{font-size:8px}\n.crew-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}\n.crew-summary>span{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:11px;background:#111;color:#fff}\n.crew-summary small{font:500 7px \"DM Mono\";color:#aaa;letter-spacing:.08em}\n.crew-summary b{font:600 23px \"DM Mono\"}\n.crew-days>div{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-top:1px solid #ececec}\n.crew-days span{display:flex;flex-direction:column;gap:3px}\n.crew-days b{font-size:10px}\n.crew-days small{font-size:8px;color:#7a7a7a}\n.crew-days strong{font:600 15px \"DM Mono\"}\n.crew-days strong small{font:500 8px \"Manrope\"}\n.empty-state.compact{min-height:150px}\n/* Phase controls + phase usage */\n.phase-controls{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin:0 0 12px;padding:11px 14px;border:1px solid #dedede;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.05)}\n.phase-controls p{margin-bottom:4px}\n.phase-controls b{font-size:11px}\n.phase-controls button{min-height:38px;border-color:#111;background:#111;color:#fff}\n.phase-controls button:disabled{opacity:.35;cursor:not-allowed}\n.phase-usage{padding:0!important;margin-bottom:15px!important}\n.phase-usage>.view-head{padding:20px 20px 14px}\n.phase-table{overflow:auto}\n.phase-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(220px,1.5fr) 120px 90px 90px 85px;align-items:center;min-width:900px;min-height:62px;padding:0 20px;border-top:1px solid #ececec}\n.phase-row>span{display:flex;flex-direction:column;gap:4px;padding-right:12px;font-size:10px;text-align:left}\n.phase-row small{color:#7a7a7a;font-size:8px}\n.phase-row em{color:#888;font-size:9px;font-style:normal}\n.phase-row>span:nth-child(n+3) b{font:600 14px \"DM Mono\"}\n.phase-head{min-height:34px;background:#111;color:#fff;border:0}\n.phase-head>span{font:600 7px \"DM Mono\";letter-spacing:.08em}\n.phase-group:nth-child(odd)>.phase-click{background:#fafafa}\n.phase-click{width:100%;margin:0;border:0;border-top:1px solid #ececec;border-radius:0;background:#fff;color:#111}\n.phase-click:hover{background:#f5f5f5}\n.phase-group.open>.phase-click{background:#f8eaed;box-shadow:inset 4px 0 #c41230}\n.phase-name{flex-direction:row!important;align-items:center;gap:10px!important}\n.phase-name i{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:7px;background:#111;color:#fff;font:500 15px \"DM Mono\";font-style:normal}\n.phase-detail{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;min-width:900px;padding:20px 28px 25px 54px;border-top:1px solid #e2c9ce;border-bottom:1px solid #dedede;background:linear-gradient(135deg,#fff 0%,#faf7f8 100%);box-shadow:inset 4px 0 #c41230}\n.detail-title{padding-bottom:10px;border-bottom:1px solid #e5e5e5}\n.detail-title p{margin-bottom:4px;color:#c41230}\n.detail-title>b{font-size:11px}\n.phase-detail .usage-list{margin-top:3px}\n.phase-detail .crew-summary{margin-top:12px}\n.detail-days{max-height:250px;overflow:auto;padding-right:6px}\n.detail-empty{padding:28px 0;color:#777;font-size:10px}\n/* Equipment moves */\n.equipment-moves{padding:0!important}\n.equipment-moves>.view-head{padding:20px 21px 14px}\n.move-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 21px 18px}\n.move-summary>span{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:11px;background:#111;color:#fff}\n.move-summary small{color:#aaa;font:500 7px \"DM Mono\";letter-spacing:.08em}\n.move-summary b{font:600 18px \"DM Mono\"}\n.move-summary .review{background:#fff0d3;color:#946000}\n.move-summary .review small{color:#946000}\n.move-table{overflow:auto}\n.move-row{display:grid;grid-template-columns:115px minmax(210px,1.2fr) minmax(230px,1.4fr) 85px minmax(180px,1fr);align-items:center;min-width:900px;min-height:67px;padding:0 21px;border-top:1px solid #ececec}\n.move-row>span{display:flex;flex-direction:column;gap:4px;padding-right:12px;font-size:10px}\n.move-row b{font-size:10px}\n.move-row small{color:#777;font-size:8px}\n.move-row>span:nth-child(4)>b,.move-row>span:nth-child(5)>b{font:600 14px \"DM Mono\"}\n.move-row em{align-self:flex-start;margin-top:2px;padding:3px 6px;border-radius:10px;background:#fff0d3;color:#946000;font:600 7px \"DM Mono\";font-style:normal}\n.move-head{min-height:34px;background:#111;color:#fff}\n.move-head>span{font:600 7px \"DM Mono\";letter-spacing:.08em}\n.move-row:nth-child(odd):not(.move-head){background:#fafafa}\n/* Rate book */\n.rate-book{padding:0!important;overflow:hidden}\n.rate-tools{display:flex;align-items:center;justify-content:space-between;padding:19px}\n.rate-tools h3{font:700 20px \"Manrope\";margin:0}\n.rate-tools input{width:min(320px,45%);border:1px solid #d8dfe2;border-radius:7px;padding:11px 13px;font-size:11px}\n.rate-header,.rate-row{display:grid;grid-template-columns:1fr 150px;align-items:center}\n.rate-header{padding:10px 19px;background:#111;color:#fff;font-size:7px;letter-spacing:1.2px;font-weight:bold}\n.rate-list{max-height:640px;overflow:auto}\n.rate-row{min-height:48px;padding:0 19px;border-bottom:1px solid #eceff0}\n.rate-row>span{display:flex;align-items:center;gap:10px;font-size:10px}\n.rate-row>span i{width:25px;height:25px;border-radius:5px;background:#f8e7e7;color:#d71920;display:grid;place-items:center;font-style:normal}\n.rate-row strong{font:700 14px Georgia;color:#111}\n.rate-row strong small{font:normal 8px Arial;color:#7b858b;margin-left:3px}\n/* Cost code table */\n.cost-code-panel{padding:0!important;overflow:hidden}\n.cost-code-title{display:flex;justify-content:space-between;align-items:center;padding:18px}\n.cost-code-title h3{font:700 18px \"Manrope\";margin:0}\n.cost-code-title>div:last-child{display:flex;gap:20px}\n.cost-code-title>div:last-child span{display:flex;flex-direction:column}\n.cost-code-title small{font-size:7px;color:#838d92;letter-spacing:.7px}\n.cost-code-title b{font:700 15px Georgia;margin-top:3px}\n.cost-code-title .total{border-left:2px solid #d71920;padding-left:18px}\n.cost-code-scroll{max-height:630px;overflow:auto}\n.cost-code-row{display:grid;grid-template-columns:2.2fr .8fr .9fr .9fr 1.25fr 1fr;align-items:center;gap:10px;min-height:60px;padding:8px 18px;border-top:1px solid #eceff0;font-size:9px}\n.cost-code-head{min-height:32px;background:#111;color:#fff;font-size:7px;letter-spacing:.8px;font-weight:bold}\n.cost-code-row>span:first-child{display:flex;flex-direction:column;gap:4px}\n.cost-code-row>span:first-child small{color:#7e8a91}\n.production-input{display:flex!important;flex-direction:row!important;gap:5px;flex-wrap:wrap}\n.production-input input{width:75px;border:1px solid #d7dfe2;border-radius:5px;padding:7px;font-size:9px}\n.production-input select{border:1px solid #d7dfe2;border-radius:5px;background:#fff;padding:7px;font-size:9px}\n.production-input .scope-note{width:100%;font-size:7px;color:#8b969c;margin-top:1px}\n.unit-cost{display:flex;flex-direction:column;color:#b51218}\n.unit-cost b{font:700 14px Georgia}\n.pending-unit em{font-style:normal;color:#929ca1}\n.cost-code-row:nth-child(even):not(.cost-code-head){background:#fafafa}\n.consolidate-button{min-height:34px;margin:12px 0 0;padding:0 12px;border-color:#111;border-radius:9px;background:#fff;color:#111}\n.consolidate-button.active{border-color:#c41230;background:#c41230;color:#fff}\n/* Unit cost summary */\n.unit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:13px}\n.unit-summary article{background:#111;color:#fff;border-top:3px solid #d71920;border-radius:8px;padding:18px}\n.unit-summary h2{font:700 28px Georgia;margin:0 0 5px}\n.unit-summary span{font-size:9px;color:#aaa}\n/* Split + chart + forecast */\n.split{display:grid;grid-template-columns:1.2fr 1fr;gap:13px;margin-bottom:13px}\n.title{display:flex;justify-content:space-between}\n.title h3{font:700 17px \"Manrope\";margin:0}\n.title button{border:0;padding:0;color:#d71920;background:transparent}\n.chart{height:190px;border-bottom:1px solid #dfe5e7;margin-top:14px;display:flex;justify-content:space-around;align-items:flex-end;background:repeating-linear-gradient(to bottom,#fff 0,#fff 45px,#edf1f2 46px)}\n.bar{width:16%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}\n.bar>b{font-size:7px}\n.bar>span{height:135px;display:flex;align-items:flex-end;gap:3px}\n.bar>span i,.bar>span em{display:block;width:12px;border-radius:2px 2px 0 0}\n.bar>span i{background:#d71920}\n.bar>span em{background:#78a0ad}\n.bar>small{font-size:7px;color:#8d999f;margin:7px 0 -20px}\n.forecast-card{padding:21px 22px!important}\n.forecast-card.on-track{border-top:4px solid #18824b}\n.forecast-card.watch{border-top:4px solid #d68a00}\n.forecast-card.over{border-top:4px solid #c41230}\n.forecast-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}\n.forecast-head h3{margin:0;font-size:17px}\n.forecast-head>span{padding:6px 9px;border-radius:20px;background:#ededed;color:#555;font:600 7px \"DM Mono\";letter-spacing:.06em;white-space:nowrap}\n.forecast-card.on-track .forecast-head>span{background:#e4f3eb;color:#126c3e}\n.forecast-card.watch .forecast-head>span{background:#fff0d3;color:#946000}\n.forecast-card.over .forecast-head>span{background:#f8e2e6;color:#a40f29}\n.forecast-inputs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}\n.forecast-inputs label{padding:10px 11px;border:1px solid #dedede;border-radius:11px;background:#fafafa}\n.forecast-inputs small,.forecast-result small,.forecast-bars small{display:block;color:#777;font:500 7px \"DM Mono\";letter-spacing:.06em}\n.forecast-inputs label>div{display:flex;align-items:center;margin-top:5px}\n.forecast-inputs i{color:#777;font:500 12px \"DM Mono\";font-style:normal}\n.forecast-inputs input{width:100%;border:0;outline:0;background:transparent;font:600 15px \"DM Mono\"}\n.forecast-bars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}\n.forecast-bars>div>span{display:flex;align-items:center;justify-content:space-between}\n.forecast-bars b{font:600 11px \"DM Mono\"}\n.forecast-bars>div>i{display:block;height:6px;margin-top:6px;border-radius:8px;background:#e8e8e8}\n.forecast-bars em{display:block;height:100%;border-radius:8px;background:#111}\n.forecast-bars em.over{background:#c41230}\n.forecast-result{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #e5e5e5}\n.forecast-result>span{display:flex;flex-direction:column;gap:4px}\n.forecast-result b{font:600 12px \"DM Mono\"}\n.forecast-result em{font-size:7px;color:#777;font-style:normal}\n.forecast-result .positive b{color:#126c3e}\n.forecast-result .negative b{color:#b10f2a}\n.forecast-empty{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px;border-radius:11px;background:#f3f3f3}\n.forecast-empty b{font-size:9px}\n.forecast-empty span{font-size:8px;line-height:1.45;color:#777}\n/* Reports */\n.report-view{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}\n.report-cover{background:#111!important;color:#fff!important;border-left:5px solid #d71920!important;padding:28px!important}\n.report-cover h2{font:700 31px Georgia;margin:0 0 8px}\n.report-cover>span{font-size:10px;color:#aaa}\n.report-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}\n.report-kpis>div{border:1px solid #373737;border-radius:7px;padding:16px;display:flex;flex-direction:column;gap:6px}\n.report-kpis small{font-size:7px;color:#aaa;letter-spacing:1px}\n.report-kpis b{font:700 20px Georgia}\n.report-rank{padding:22px!important}\n.rank-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #eceff0}\n.rank-row i{width:24px;height:24px;background:#d71920;color:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:bold}\n.rank-row span{display:flex;flex-direction:column;gap:4px}\n.rank-row b{font-size:9px}\n.rank-row small{font-size:8px;color:#88949a}\n.rank-row strong{font:700 13px Georgia}\n.report-print{margin-top:18px;display:flex;justify-content:flex-end}\n.report-print button{margin:0}\n@media(max-width:900px){.report-view{grid-template-columns:1fr}.unit-summary{grid-template-columns:1fr}.labor-settings{grid-template-columns:1fr}.rate-input-grid{grid-template-columns:1fr}.operations-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.cost-code-panel{overflow:auto}.cost-code-scroll{min-width:900px}.cost-code-title{min-width:900px}}\n@media(max-width:700px){.phase-detail{grid-template-columns:1fr}.rate-tools input{width:60%}.rate-header,.rate-row{grid-template-columns:1fr 95px}}\n@media print{aside,.header-actions,.import-strip,.logout,.monday-strip,.phase-controls,.report-print{display:none!important}.shell main{margin:0;width:100%;padding:0}.report-view{grid-template-columns:1fr 1fr}.panel{box-shadow:none;border:1px solid #ddd}}\n/* Forgot password link on the login / recovery cards */\n.auth-forgot{margin:14px 0 0;text-align:center}\n.auth-forgot .linklike{background:none;border:0;margin:0;padding:0;color:#b51218;font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline}\n.auth-forgot .linklike:hover{color:#8f0e15}\n.auth-forgot .linklike:disabled{color:#aaa;cursor:not-allowed;text-decoration:none}\n",[],[198,248],"de051783-ca3e-431f-9e6c-dbdc3e98605a","root.tsx","bcd5b7d8-a7d3-11f1-893b-1607ee4eb77e",6,["D",1788466327307],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>NDX Command Center — Production Control\n \n \n \n \n \n \n \n

Diff · v37