// form.jsx — entry form pieces const FUEL_TYPES = [ { id: "natgas", label: "Natural gas", color: "#3B82C4" }, { id: "electric", label: "Electric", color: "#D9A23B" }, { id: "oil", label: "Oil", color: "#7A4F2A" }, { id: "propane", label: "Propane", color: "#C24E2E" }, { id: "wood", label: "Wood", color: "#5E6F4F" }, { id: "kerosene", label: "Kerosene", color: "#9C6BB0" }, { id: "other", label: "Other", color: "#8A958F" }, ]; const CALENDARS = [ { id: "wx", label: "WX Field Schedule", color: "#2F6F5C" }, { id: "intake", label: "Customer Intake", color: "#3B82C4" }, { id: "audit", label: "Energy Audits", color: "#D9A23B" }, { id: "personal", label: "My calendar", color: "#9C6BB0" }, ]; const EVENT_COLORS = [ { id: "sage", val: "#2F6F5C" }, { id: "blue", val: "#3B82C4" }, { id: "amber", val: "#D9A23B" }, { id: "coral", val: "#C24E2E" }, { id: "plum", val: "#9C6BB0" }, { id: "olive", val: "#5E6F4F" }, { id: "graphite",val: "#4A5752" }, ]; const REMINDER_PRESETS = [10, 30, 60, 1440]; // minutes /* ---------- icons ---------- */ const Icon = { cal: (p) => ( ), clock: (p) => ( ), hourglass: (p) => ( ), pin: (p) => ( ), bell: (p) => ( ), paperclip: (p) => ( ), user: (p) => ( ), alert: (p) => ( ), plus: (p) => ( ), x: (p) => ( ), doc: (p) => ( ), upload: (p) => ( ), check: (p) => ( ), spark: (p) => ( ), }; /* ---------- helpers ---------- */ function fmtPhone(v) { const d = (v || "").replace(/\D/g, "").slice(0, 10); if (d.length <= 3) return d; if (d.length <= 6) return `(${d.slice(0,3)}) ${d.slice(3)}`; return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`; } function fmtAmount(v) { const n = (v || "").replace(/[^\d.]/g, ""); const [int, dec] = n.split("."); const grouped = (int || "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); if (dec === undefined) return grouped; return grouped + "." + dec.slice(0, 2); } function fmtDateLong(d) { if (!d) return "—"; const date = new Date(d); return date.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }); } function fmtTime(t) { if (!t) return "—"; const [h, m] = t.split(":").map(Number); const ampm = h >= 12 ? "PM" : "AM"; const hh = ((h + 11) % 12) + 1; return `${hh}:${String(m).padStart(2,"0")} ${ampm}`; } function durationLabel(mins) { if (mins < 60) return `${mins} min`; const h = Math.floor(mins / 60), m = mins % 60; return m ? `${h}h ${m}m` : `${h}h`; } function endTime(start, mins) { if (!start) return ""; const [h, m] = start.split(":").map(Number); const total = h * 60 + m + mins; const eh = Math.floor(total / 60) % 24; const em = total % 60; return `${String(eh).padStart(2,"0")}:${String(em).padStart(2,"0")}`; } /* ---------- field components ---------- */ function Field({ label, hint, required, children, htmlFor }) { return (
{children}
); } function ChipGroup({ value, onChange, options, multi }) { const arr = Array.isArray(value) ? value : (value ? [value] : []); const toggle = (id) => { if (multi) { onChange(arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]); } else { onChange(id); } }; return (
{options.map(o => ( ))}
); } function Segmented({ value, onChange, options }) { return (
{options.map(o => ( ))}
); } function Swatches({ value, onChange, options }) { return (
{options.map(o => ( ))}
); } /* ---------- big form ---------- */ function EntryForm({ data, set, onSubmit, layout, requireContract }) { const [dragOver, setDragOver] = React.useState(false); const fileRef = React.useRef(null); const addFiles = (list) => { const arr = Array.from(list || []).map(f => ({ name: f.name, size: f.size, id: Math.random().toString(36).slice(2), })); set("files", [...(data.files || []), ...arr]); }; const valid = data.name.trim().length > 0 && data.zip.trim().length >= 5 && data.date && data.time && (!requireContract || data.amount.length > 0); return (
{ e.preventDefault(); if (valid) onSubmit(); }}> {/* ── Customer ───────────────────────────── */}
Customer i.
set("name", e.target.value)} />
set("phone", fmtPhone(e.target.value))} inputMode="tel" /> set("email", e.target.value)} />
set("address", e.target.value)} /> set("town", e.target.value)} /> { const z = e.target.value.replace(/[^\d-]/g, "").slice(0, 10); set("zip", z); const key = z.padStart(5, "0").slice(0, 5); const hit = (window.ZIP_DATA || {})[key]; if (hit && z.length >= 5) { set("town", hit.city || ""); if (hit.gas) set("gasUtility", hit.gas); if (hit.electric) set("electricUtility", hit.electric); } }} inputMode="numeric" />
{/* ── Job details ────────────────────────── */}
Job details ii.
set("fuel", v)} />
$ set("amount", fmtAmount(e.target.value))} inputMode="decimal" /> USD
{data.roadblock === "none" ? : data.roadblock === "cleared" ? : }
{data.roadblock === "none" && (<>No road blocksSite is ready for crew)} {data.roadblock === "cleared" && (<>ClearedBarriers identified & resolved)} {data.roadblock === "not-cleared" && (<>Not clearedBarriers must be resolved before crew arrives)}
set("roadblock", v)} options={[ { id: "none", label: "None" }, { id: "cleared", label: "Cleared" }, { id: "not-cleared", label: "Not cleared" }, ]} />
{data.roadblock !== "none" && (
{[ { id: "recessed", label: "Recessed lighting" }, { id: "knob-tube", label: "Knob & tube wiring" }, { id: "mold", label: "Mold" }, { id: "vermiculite", label: "Vermiculite" }, { id: "structural", label: "Structural" }, ].map(b => { const state = (data.barriers || {})[b.id] || { present: false, signed: null }; const updateBarrier = (patch) => set("barriers", { ...(data.barriers || {}), [b.id]: { ...state, ...patch } }); return (
{b.label} {state.present && (
Barrier form signed & on record?
)}
); })}
)}
{/* ── Schedule ───────────────────────────── */}
Schedule WX work iii.
set("date", e.target.value)} />
set("time", e.target.value)} />
{data.emailReminder ? ( <>Email 24 hours beforeSent to {data.email || "the customer email on file"} ) : ( <>No email reminderCustomer will not receive an automated reminder )}
{/* ── Notes & attachments ────────────────── */}
Notes & files iv.