// csr-queue.jsx — bookings summary: filters (status / type / state), cancel, update, resend tracking link const { useState: useStateQ, useEffect: useEffectQ } = React; // SLA window (hours after ready time) by service tier function slaHours(b) { if (b.typeId === "nextflight") return 8; if (b.serviceId === "direct") return 1.5; if (b.serviceId === "premium") return 3; return 6; } function dueInfo(b, now) { let due; if (b.dueAt) { due = new Date(b.dueAt); } else { if (!b.date || !b.time || !/^\d{2}:\d{2}$/.test(b.time)) return null; due = new Date(b.date + "T" + b.time + ":00"); if (isNaN(due)) return null; due.setMinutes(due.getMinutes() + Math.round(slaHours(b) * 60)); } if (isNaN(due)) return null; const clock = due.toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit" }); const msLeft = due.getTime() - now; const tone = msLeft < 0 ? "danger" : msLeft < 60 * 60000 ? "warn" : "success"; return { due, clock, msLeft, tone }; } function fmtLeft(ms) { const late = ms < 0; let m = Math.round(Math.abs(ms) / 60000); const d = Math.floor(m / 1440); m -= d * 1440; const h = Math.floor(m / 60); const mm = m % 60; const core = d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${mm}m` : `${mm}m`; return late ? core + " late" : core + " left"; } function importantCustomer(b) { const c = window.FX.CUSTOMERS.find(x => x.ref === b.customerRef || x.id === b.customerId); return (c && c.priority) || b.typeId === "failsafe-critical"; } function BookingsQueue({ bookings, currency, onEdit, onCancel, onNew, onNotify }) { const [q, setQ] = useStateQ(""); const [view, setView] = useStateQ("all"); const [statusF, setStatusF] = useStateQ("active"); const [typeF, setTypeF] = useStateQ("all"); const [stateF, setStateF] = useStateQ("all"); const [confirmCancel, setConfirmCancel] = useStateQ(null); const [resend, setResend] = useStateQ(null); const [nowTs, setNowTs] = useStateQ(Date.now()); useEffectQ(() => { const id = setInterval(() => setNowTs(Date.now()), 1000); return () => clearInterval(id); }, []); function openBooking(b) { window.location.href = "Fedex Booking.html#t=" + encodeURIComponent(b.tracking); } const stateOf = b => b.state || window.FX.suburbState(b.dropoff.suburb) || "—"; const isActive = b => b.status !== "Cancelled" && b.status !== "Delivered"; const isLate = b => { const d = dueInfo(b, nowTs); return isActive(b) && d && d.msLeft < 60 * 60000; }; const lateCount = bookings.filter(isLate).length; const importantCount = bookings.filter(b => b.status !== "Cancelled" && importantCustomer(b)).length; const nfCount = bookings.filter(b => b.status !== "Cancelled" && b.status !== "Delivered" && window.FX.isNextFlight(b)).length; const ql = q.trim().toLowerCase(); let filtered = bookings.filter(b => { if (view === "late" && !isLate(b)) return false; if (view === "important" && !(b.status !== "Cancelled" && importantCustomer(b))) return false; if (view === "nextflight" && !window.FX.isNextFlight(b)) return false; if (statusF === "active" && b.status === "Cancelled") return false; if (statusF !== "active" && statusF !== "all" && b.status !== statusF) return false; if (typeF !== "all" && b.typeId !== typeF) return false; if (stateF !== "all" && stateOf(b) !== stateF) return false; if (ql && !(b.tracking + b.customerName + b.customerRef + b.pickup.suburb + b.dropoff.suburb).toLowerCase().includes(ql)) return false; return true; }); if (view === "late") { filtered = [...filtered].sort((a, b) => { const da = dueInfo(a, nowTs), db = dueInfo(b, nowTs); return (da ? da.msLeft : 1e15) - (db ? db.msLeft : 1e15); }); } const typeOf = id => window.FX.BOOKING_TYPES.find(t => t.id === id); const statusTone = s => s === "Cancelled" ? "danger" : s === "In transit" ? "brand" : "success"; const statusDot = s => s === "Cancelled" ? "var(--danger)" : s === "In transit" ? "var(--brand)" : "var(--success)"; const GRID = "0.9fr 1.02fr 1fr 0.7fr 0.92fr 0.86fr 0.76fr 104px"; const selStyle = { width: "auto", minWidth: 0, paddingTop: 9, paddingBottom: 9, fontSize: 13.5 }; return (
{/* tabs */}
{[["all", "All bookings", null], ["late", "Late / at risk", lateCount], ["important", "Important customers", importantCount], ["nextflight", "Next Flight", nfCount]].map(([k, lbl, count]) => { const on = view === k; const danger = k === "late" && count > 0; return ( ); })}
Filter ({ value: t.id, label: t.short }))]} />