// booking-page.jsx — standalone full booking detail (opened in a new tab from the queue) const { useState: useStateBP, useEffect: useEffectBP } = React; const CSR_LS_BP = "fedexCsr_v2"; function bpLoad() { try { return JSON.parse(localStorage.getItem(CSR_LS_BP)) || {}; } catch (e) { return {}; } } function bpSaveBooking(updated) { try { const st = bpLoad(); const bookings = (st.bookings || []).map(b => b.tracking === updated.tracking ? updated : b); localStorage.setItem(CSR_LS_BP, JSON.stringify({ ...st, bookings })); } catch (e) {} } function bpParam(k) { try { const h = (window.location.hash || "").replace(/^#/, ""); return new URLSearchParams(h).get(k) || new URLSearchParams(window.location.search).get(k) || ""; } catch (e) { return ""; } } function bpTrackUrl(code, driverName) { return "Fedex Track.html#t=" + encodeURIComponent(code || "") + (driverName ? "&driver=" + encodeURIComponent(driverName) : ""); } function findBooking(code) { const c = (code || "").trim().toUpperCase(); const st = bpLoad(); const fromLs = (st.bookings || []).find(b => (b.tracking || "").toUpperCase() === c); if (fromLs) return fromLs; return null; } function BookingPage() { const code = bpParam("t"); const [booking, setBooking] = useStateBP(() => findBooking(code)); const [editing, setEditing] = useStateBP(false); function describePatch(patch) { if (patch.status === "Cancelled") return "Booking cancelled"; if (patch.awb !== undefined) return "Airway bill updated"; if (patch.serviceAgentId) return "Service agent allocated"; if (patch.serviceAgentId === null) return "Service agent unassigned"; if (patch.agentStatus === "received") return "Agent confirmed booking information"; if (patch.agentStatus === "delivered") return "Agent marked booking delivered"; if (patch.status) return "Status changed to " + patch.status; if (patch.notes !== undefined || patch.callLog !== undefined) return "Notes / call log updated"; return "Booking updated"; } function update(patch) { setBooking(prev => { const detail = describePatch(patch); let audit = [...(prev.audit || [])]; const last = audit[audit.length - 1]; const now = new Date().toISOString(); if (last && last.detail === detail && (new Date(now) - new Date(last.at)) < 120000) { audit[audit.length - 1] = { ...last, at: now }; // collapse rapid repeats (e.g. typing an AWB) } else { audit.push({ at: now, by: "CE console", action: patch.status === "Cancelled" ? "cancelled" : "edited", detail }); } const next = { ...prev, ...patch, audit }; bpSaveBooking(next); return next; }); } if (!booking) { return (

Booking not found

We couldn't find booking {code || "—"}. Open it again from the bookings queue.

); } const b = booking; const type = window.FX.BOOKING_TYPES.find(x => x.id === b.typeId); const size = window.FX.VEHICLES.find(x => x.id === b.vehicleId); const svc = window.FX.SERVICES.find(x => x.id === b.serviceId); const driver = b.driver || window.FX.DRIVERS.find(d => d.id === b.driverId); const cancelled = b.status === "Cancelled"; const inTransit = b.status === "In transit"; const isNF = window.FX.isNextFlight(b); const nfInfo = isNF ? window.FX.nextFlightInfo(b) : null; const chargesTotal = (b.charges || []).reduce((s, c) => s + c.amount * (c.qty || 1), 0); const statusTone = cancelled ? "danger" : inTransit ? "brand" : b.status === "Delivered" ? "neutral" : "success"; const statusCol = cancelled ? "var(--danger)" : inTransit ? "var(--brand)" : b.status === "Delivered" ? "var(--fg-mute)" : "var(--success)"; return (
{/* header */}
Queue {b.tracking} {type && {type.name}} {b.status}
{!cancelled && } {window.FX.money(b.total, b.currency || "AUD")}
{isNF &&
}
{/* LEFT */}
{isNF && nfInfo && (() => { const legs = b.legs || {}; const setLeg = (which, patch) => { const next = { ...legs, [which]: { ...(legs[which] || {}), ...patch } }; const upd = { legs: next }; if (which === "delivery" && patch.status === "done") { upd.status = "Delivered"; upd.progress = 1; } update(upd); }; return (
); })()} {!isNF && (
Tracking link
track.fedex.com.au/t/{b.tracking.replace(/^FX-/, "")}
{!cancelled && }
)} {/* route */} {!isNF && (
)} {/* call history & notes */} {/* audit history */}
{/* RIGHT */}
{/* customer */}
{b.customerName}
{b.customerRef}{b.ref1 ? " · Ref " + b.ref1 : ""}
 {/* driver */} {!isNF && ( {driver ? (
{driver.initials}
{driver.name}
{driver.vehicle} · {driver.rego}
) :
Not yet assigned.
} )} {/* details + charges */} {b.notes && typeof b.notes === "string" && } {/* charges */} {/* type instructions */} {type && (
Instructions · {type.short}
    {type.instructions.map((ins, i) =>
  • {ins}
    • )}
)}
{editing && setEditing(false)} onSave={(patch) => { update(patch); setEditing(false); }} />}
); } /* ---------- Audit history: created / edited / cancelled trail ---------- */ function AuditHistory({ booking }) { const entries = (booking.audit && booking.audit.length) ? booking.audit : [{ at: booking.placedAt || new Date().toISOString(), by: booking.caller && booking.caller.name ? "CE console · caller: " + booking.caller.name : "System", action: "created", detail: "Booking created" }]; const iconFor = a => a === "created" ? "plus" : a === "cancelled" ? "x" : "pencil"; const colFor = a => a === "created" ? "var(--brand)" : a === "cancelled" ? "var(--danger)" : "var(--accent-700)"; const fmt = iso => { try { const d = new Date(iso); return d.toLocaleDateString("en-AU", { day: "numeric", month: "short" }) + " · " + d.toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit" }); } catch (e) { return iso; } }; return (
{entries.slice().reverse().map((e, i, arr) => (
{i < arr.length - 1 && }
{e.detail} {fmt(e.at)}
{e.by}
))}
); } /* ---------- Next Flight allocation: per-leg (pickup / delivery); driver via Locate2u or a service provider ---------- */ const legChoiceStyle = { display: "flex", alignItems: "center", gap: 10, textAlign: "left", padding: "12px 13px", borderRadius: "var(--r-md)", border: "1.5px solid var(--border)", background: "var(--surface)", cursor: "pointer" }; const legLinkBtn = { flex: "none", background: "none", border: "1px solid var(--border)", borderRadius: 8, padding: "6px 11px", fontSize: 12, fontWeight: 600, color: "var(--fg-body)", cursor: "pointer" }; const legChip = { display: "inline-flex", alignItems: "center", gap: 6, background: "var(--brand-soft)", color: "var(--brand)", borderRadius: 999, padding: "4px 10px", fontSize: 11.5, fontWeight: 500 }; function LegAllocation({ booking, which, port, place, recommendState, driver, nf, leg, onSetLeg, cancelled }) { const store = bpLoad(); const allAgents = store.serviceAgents || window.FX.SERVICE_AGENTS; const activeAgents = allAgents.filter(a => a.active); const [pick, setPick] = useStateBP(""); const mode = leg.mode || null; const agent = leg.agentId ? allAgents.find(a => a.id === leg.agentId) : null; const isDelivery = which === "delivery"; const accent = isDelivery ? "var(--accent)" : "var(--brand)"; const stamp = () => new Date().toLocaleString("en-AU", { hour: "2-digit", minute: "2-digit", day: "numeric", month: "short" }); const roadFrom = isDelivery ? port.code : (place.suburb || "Pickup"); const roadTo = isDelivery ? (place.suburb || "Delivery") : port.code; const legSub = isDelivery ? (port.city + " Airport → final delivery") : ("Pickup → " + port.city + " Airport"); const inArea = a => (a.serviceAreas || (a.state ? [a.state] : [])).includes(recommendState); const opts = [...activeAgents].sort((a, b) => (inArea(b) ? 1 : 0) - (inArea(a) ? 1 : 0)) .map(a => ({ value: a.id, label: `${a.name} — ${a.city} (${(a.serviceAreas || [a.state]).join("/")})${inArea(a) ? " · recommended" : ""}` })); const setLeg = patch => onSetLeg(which, patch); const chooseDriver = () => setLeg({ mode: "driver", dispatchedAt: stamp(), agentId: null, status: null }); const chooseAgent = () => setLeg({ mode: "agent" }); const reset = () => setLeg({ mode: null, agentId: null, status: null, notifiedAt: null, acceptedAt: null, pickedUpAt: null, deliveredAt: null, dispatchedAt: null }); const allocate = () => { const a = activeAgents.find(x => x.id === pick); if (!a) return; setLeg({ mode: "agent", agentId: a.id, status: "notified", notifiedAt: stamp() }); setPick(""); }; const ORDER = ["notified", "accepted", "pickedup", "done"]; const stepIdx = leg.status ? ORDER.indexOf(leg.status) + 1 : 0; const stepLabels = ["Notified", "Accepted", "Collected", isDelivery ? "Delivered" : "At airport"]; const stepTimes = [leg.notifiedAt, leg.acceptedAt, leg.pickedUpAt, leg.deliveredAt]; const l2uLink = "locate2u.com/dispatch/" + booking.tracking.replace(/^FX-/, ""); const trackUrl = "Fedex Track.html#t=" + encodeURIComponent(booking.tracking) + "&nf=1&leg=" + which + (driver ? "&driver=" + encodeURIComponent(driver.name) : ""); const statusBadge = () => { if (mode === "driver") return Locate2u driver; if (mode === "agent" && agent) { const lbl = { notified: "Notified", accepted: "Accepted", pickedup: "Collected", done: stepLabels[3] }[leg.status] || "Notified"; return {lbl}; } return Unallocated; }; return (
{isDelivery ? "Delivery leg" : "Pickup leg"} · {roadFrom} → {roadTo}
{legSub}
{statusBadge()}
{!mode && (
)} {mode === "driver" && (
{driver ? driver.initials : "L2U"}
{driver ? driver.name : "Awaiting Locate2u driver"}
{driver ? driver.rego : "—"}
{!cancelled && }
Driver allocation & dispatch is handled in Locate2u. Dispatched {leg.dispatchedAt || "now"}.
)} {mode === "agent" && !agent && (
Service provider{recommendState ? " · recommended in " + recommendState : ""}
setQ(e.target.value)} placeholder="Search AWB, flight or port…" style={{ ...window.inputStyle, paddingLeft: 36 }} />
{filtered.length} active airway bill{filtered.length === 1 ? "" : "s"} — pick one to add this consignment to that flight.
{filtered.map(rec => { const isCurrent = rec.awb === currentAwb; const sameRoute = rec.dep.code === window.FX.nextFlightInfo(booking).dep.code && rec.arr.code === window.FX.nextFlightInfo(booking).arr.code; return (
{rec.awb} {sameRoute ? Same route : Different route} {!isCurrent ? : Current}
{flightLine(rec)}
{rec.consignments.length} consignment{rec.consignments.length === 1 ? "" : "s"} on this flight
{rec.consignments.map(c => (
{c.tracking} {c.customerName} · {c.from} → {c.to} {c.items}× · {c.weightKg}kg
))}
); })} {filtered.length === 0 &&
No active airway bills{q.trim() ? " match your search" : ""}. Add a new one on the next tab.
}
) : (
Enter the flight number — we'll look it up in the schedule and confirm the route and departure time. The airway bill number comes from the airline's booking system and must be entered.
setFlightNo(v.toUpperCase())} placeholder="e.g. QF445" mono /> {flightNo.trim() && (resolved ? (
Flight found — {resolved.flight.airline_name}
{flightLine(resolved)}
) : (
No flight matches {flightNo} in the schedule. Check the number, or search Flights for the right one.
))} Airway bill number *} hint="The AWB issued by the airline's booking system for this flight."> setNewAwb(v)} placeholder="e.g. 081-12345675" mono />
{resolved && !newAwb.trim() && Enter the airline's airway bill number to continue.}
)} ); } /* ---------- edit booking ---------- */ function EditBookingModal({ booking, onClose, onSave }) { const isNF = window.FX.isNextFlight(booking); const nf = isNF ? window.FX.nextFlightInfo(booking) : null; const [typeId, setTypeId] = useStateBP(booking.typeId); const [vehicleId, setVehicleId] = useStateBP(booking.vehicleId); const [serviceId, setServiceId] = useStateBP(booking.serviceId); const [date, setDate] = useStateBP(booking.date || window.FX.todayISO()); const [time, setTime] = useStateBP(booking.time || ""); const [isReturn, setIsReturn] = useStateBP(!!booking.isReturn); const [notes, setNotes] = useStateBP(typeof booking.notes === "string" ? booking.notes : ""); const [pickup, setPickup] = useStateBP(booking.pickup || window.FX.emptyAddr()); const [dropoff, setDropoff] = useStateBP(booking.dropoff || window.FX.emptyAddr()); const [originPort, setOriginPort] = useStateBP(booking.originPort || (nf ? nf.dep.code : "")); const [destPort, setDestPort] = useStateBP(booking.destPort || (nf ? nf.arr.code : "")); const portOpts = window.FX.AIRPORT_CODES.map(c => ({ value: c, label: c + " · " + window.FX.AIRPORT_BY_CODE[c].city + " (" + window.FX.AIRPORT_BY_CODE[c].state + ")" })); function save() { const patch = { typeId, vehicleId, serviceId, date, time, isReturn, notes, pickup, dropoff }; const mid = (booking.stops && booking.stops.length > 2) ? booking.stops.slice(1, -1) : []; patch.stops = [pickup, ...mid, dropoff]; if (isNF) { patch.originPort = originPort; patch.destPort = destPort; } onSave(patch); } return (
{/* Addresses & contacts */}
Pickup — address & contact
Delivery — address & contact
{isNF && (
Flight routing {originPort} → {destPort}
Overrides the port derived from the suburbs — the flight, ETA and recommended service agents update to match.
)} {/* Service & timing */} ({ value: v.id, label: v.name + " · " + v.weight }))} />