PRODUCTION COMMAND CENTER

{sectionCopy[section][0]}

{sectionCopy[section][1]}

\n {activeJob && (\n \n ACTIVE JOB · UTILITY SCHEDULE\n \n \n )}\n {user.role === \"admin\" && }\n \n

\n\n {status &&

● {status}

}\n\n

MONDAY.COM

\n {mondayConnected ? \"Connected · Utility Schedule\" : \"Monday.com not connected\"}\n {mondayStatus}\n {mondayLastRefresh && Last refresh: {new Date(mondayLastRefresh).toLocaleString()}}\n {mondayRefreshNote && ↻ {mondayRefreshNote}}\n

\n {user.role === \"admin\" && }\n

\n\n {section === \"overview\" && (\n 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\" && { }} onAddEntry={(entry) => setData((d) => ({ ...d, entries: [...d.entries, entry] }))} />}\n {section === \"labor\" && }\n {section === \"equipment\" && (\n <>\n \n \n \n \n )}\n {section === \"unit-cost\" && (\n setData((d) => ({ ...d, production: p }))} consolidateCodes={consolidateCodes} setConsolidateCodes={setConsolidateCodes} />\n )}\n {section === \"reports\" && }\n {section === \"migration\" && }\n {section === \"jobs\" && (\n setDeleteOpen(true)} />\n )}\n

\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 connection\", done: true, detail: \"Integrated & reachable (board discovery, column mapping, Completed filter, item-id upsert, snapshots, Refresh button).\" },\n { label: \"Monday.com live sync\", done: false, detail: \"Awaiting a valid MONDAY_TOKEN — the currently configured token is rejected by Monday (401), so no jobs have been imported yet.\" },\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 Monday.com:</b> replace <code>MONDAY_TOKEN</code> with a valid token, then click <b>Refresh</b> to import the Utility Schedule. The full equipment-rate tail re-import may also be needed for production matching.</div>\n </section>;\n}\n","deleted",false,"label",[47,24],"frontend","9c7d0c21-6fce-451a-b6a0-ca5de197aeab",["D",1788450878892],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","NDX internal job production, labor, equipment, and cost dash","imageUrl","userId","fe3e8c07-bae6-44d7-85dc-b222854b68d6","pinnedFileId","179f165a-a7d4-11f1-92c0-1607ee4eb77e","pinPreview","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",{"_9":10,"_107":102},"org",{"_9":10,"_101":102,"_103":102,"_58":59,"_104":105,"_106":44},"branch",{"_37":32,"_11":92,"_22":30,"_93":48,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":12,"_100":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_141":142,"_143":144,"_145":146,"_147":44,"_148":44,"_149":44,"_150":34,"_151":-5,"_152":-7,"_153":-7,"_154":66,"_155":44,"_156":44,"_157":-5,"_158":44,"_159":44,"_160":44,"_161":-5},"ENV",{"_112":113,"_114":115,"_116":92,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Configure the command center

Sign in

Password updated

Reset your password

{sectionCopy[section][0]}

Delete \"{activeJob.name}\"?