// OPT-GATE-06 · Truck details — capture & verify each truck on the gate pass // One gate pass (GPN) can cover several trucks. Every truck shows its full // details and its own photo capture set, and gets its own "Continue to verify" // button. Trucks whose details were not entered at booking can be added manually. const CaptureDriverScreen = ({ t, go }) => { const { Btn, Banner, Stepper, PhotoTile, Pill, Modal } = window.Op; const Ic = window.Icons, FD = window.OD; const state = t.captureDriver; // empty | partial | filled | storageLow const order = FD.ORDER; // Seed each truck's photo set from the tweak state (entered trucks only). const seedShots = () => state === "filled" ? [true, true, true] : state === "partial" ? [true, false, false] : state === "storageLow" ? [true, true, false] : [false, false, false]; const [trucks, setTrucks] = useState(() => order.trucks.map(tk => ({ ...tk, shots: tk.entered ? seedShots() : [false, false, false] }))); useEffect(() => { setTrucks(order.trucks.map(tk => ({ ...tk, shots: tk.entered ? seedShots() : [false, false, false] }))); }, [state]); const [editId, setEditId] = useState(null); // truck whose details are being added/edited const blank = { plate: "", driver: "", phone: "", trailer: "", load: 0 }; const [form, setForm] = useState(blank); const fset = (patch) => setForm(f => ({ ...f, ...patch })); const formValid = form.plate.trim().length >= 4 && form.driver.trim().length >= 2 && form.phone.trim().length >= 7; const openEdit = (tk) => { setEditId(tk.id); setForm({ plate: tk.plate, driver: tk.driver, phone: tk.phone, trailer: tk.trailer, load: tk.load }); }; const saveDetails = () => { if (!formValid) return; setTrucks(list => list.map(x => x.id === editId ? { ...x, ...form, entered: true } : x)); setEditId(null); }; const toggleShot = (id, i) => setTrucks(list => list.map(x => x.id === id ? { ...x, shots: x.shots.map((v, j) => j === i ? !v : v) } : x)); const tileDefs = [ { label: "Driver photo (face)", hint: "Rear or front camera", tag: "driver.jpg", req: true }, { label: "ID / license photo", hint: "Recommended", tag: "id.jpg", req: false }, { label: "Truck front (plate visible)", hint: "Plate must be readable", tag: "truck.jpg", req: true }, ]; const truckReady = (tk) => tk.entered && tk.shots[0] && tk.shots[2]; return (
{/* Gate pass summary — all trucks below belong to this one pass */}
{[["Gate pass", order.gpn, true], ["Linked order", order.id, true], ["Supplier", order.who, false], ["Trucks on pass", trucks.length + " trucks", false]].map(([k, v, mono], i) => (
{k}
{v}
))}
{state === "storageLow" &&
} {/* One card per truck — reference layout: details + capture + own action */}
{trucks.map((tk, idx) => (
{/* Truck header */}
Truck {idx + 1}{tk.entered && · {tk.plate}}
{tk.load > 0 &&
Est. load {tk.load.toLocaleString("en-US")} kg
}
{truckReady(tk) ? Ready to verify : !tk.entered ? Needs details : Capture photos} {tk.entered && openEdit(tk)}>Edit}
{/* Details — or a manual-add prompt if never entered */} {tk.entered ? (
{[["Truck plate", tk.plate, true], ["Driver", tk.driver, false], ["Driver phone", tk.phone, true], ["Trailer plate", tk.trailer || "—", true]].map(([k, v, mono], i) => (
{k}
{v}
))}
) : (
openEdit(tk)}>Add truck details
)} {/* Capture set (reference layout) — only once details exist */} {tk.entered && (
Capture photos
{tileDefs.map((tile, i) => (
toggleShot(tk.id, i)}/>
{tk.shots[i] ? "Captured · tap to re-take" : tile.req ? "Required" : "Optional"}
))}
)} {/* Per-truck action */}
{truckReady(tk) ? "Driver and truck photos captured." : !tk.entered ? "Add details, then capture photos." : "Capture the driver and truck-front photos to continue."}
go("verify")}>Continue to verify
))}
Photos store locally first and sync when online · EXIF stripped except timestamp · ~200 KB each.
go("manualEntry")}>Back
{trucks.filter(truckReady).length} of {trucks.length} trucks ready
{/* Manual add / edit truck details */} setEditId(null)} title={trucks.find(x => x.id === editId)?.entered ? "Edit truck details" : "Add truck details"} desc="Checked against the truck at the gate before it's let in." actions={<> setEditId(null)}>CancelSave details}>
Truck plate *
fset({ plate: e.target.value.toUpperCase() })}/>
Driver name *
fset({ driver: e.target.value })}/>
Driver phone *
fset({ phone: e.target.value })}/>
Trailer / second plate
fset({ trailer: e.target.value.toUpperCase() })}/>
Estimated load (kg)
fset({ load: Number(e.target.value.replace(/\D/g, "")) || 0 })}/>
); }; window.OptPages = Object.assign(window.OptPages || {}, { captureDriver: { chrome: "flow", title: "Truck details", sub: "Capture & verify each truck", back: "scanMatch", render: (ctx) => }, });