// app.jsx — shell: sidebar, routing, state, tweaks const { useState: useStateApp, useEffect: useEffectApp } = React; const PORTAL_SESSION_KEY = "fedexPortalSession_v1"; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "brandColor": "#4D148C", "accentColor": "#FF6600", "currency": "AUD", "rateMult": 1, "darkSidebar": true, "accessLevel": "manager" }/*EDITMODE-END*/; const NAV = [ { group: "Bookings", items: [ { id: "dashboard", label: "Home", icon: "layout-dashboard" }, { id: "book", label: "Book a delivery", icon: "plus" }, { id: "quote", label: "Get a quote", icon: "calculator" }, ]}, { group: "Delivery runs", items: [ { id: "createRun", label: "Create delivery run", icon: "plus" }, { id: "manageRuns", label: "Manage delivery runs", icon: "navigation" }, ]}, { group: "Manage", items: [ { id: "history", label: "Delivery history", icon: "history" }, { id: "addresses", label: "Address book", icon: "map-pin" }, ]}, { group: "Account", items: [ { id: "invoices", label: "Invoices", icon: "file-text" }, { id: "payment", label: "Payment methods", icon: "credit-card" }, { id: "users", label: "Users & team", icon: "users" }, ]}, { group: "Support", items: [ { id: "inquiries", label: "My inquiries", icon: "message-square" }, { id: "depots", label: "Depots", icon: "map-pin" }, { id: "contact", label: "Contact us", icon: "headset" }, ]}, ]; const TITLES = { dashboard: "Home", book: "Book a delivery", quote: "Get a quote", createRun: "Create delivery run", manageRuns: "Manage delivery runs", history: "Delivery history", inquiries: "My inquiries", depots: "Depots", invoices: "Invoices", payment: "Payment methods", users: "Users & team", contact: "Contact" }; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [page, setPage] = useStateApp("dashboard"); const [payload, setPayload] = useStateApp(null); const [drawer, setDrawer] = useStateApp(false); const [narrow, setNarrow] = useStateApp(typeof window !== "undefined" && window.innerWidth < 940); const initState = window.FX.loadState(); const [bookings, setBookings] = useStateApp(initState.bookings || []); const [notices, setNotices] = useStateApp(initState.notices || window.FX.NOTICES); const [users, setUsers] = useStateApp(initState.users || window.FX.USERS); const [payment, setPayment] = useStateApp(initState.payment || window.FX.PAYMENT_METHODS); const [activeAccountId, setActiveAccountId] = useStateApp(initState.activeAccountId || "acc1"); const [runs, setRuns] = useStateApp(initState.runs || window.FX.DELIVERY_RUNS); const [savedQuotes, setSavedQuotes] = useStateApp(initState.savedQuotes || [ { no: "Q-480021", from: "Sydney CBD", fromPc: "2000", to: "Chatswood", toPc: "2067", serviceId: "premium", vehicleId: "wagon", total: 96.4, km: 12, isReturn: false, items: [{ qty: "2", type: "Carton", l: "40", w: "30", h: "25", weight: "6" }], createdAt: new Date(Date.now() - 2 * 864e5).toISOString(), expiresAt: new Date(Date.now() + 12 * 864e5).toISOString(), status: "active" }, ]); const [acctMenu, setAcctMenu] = useStateApp(false); const [inquiries, setInquiries] = useStateApp(window.FX.loadInquiries()); const activeAccount = window.FX.ACCOUNTS.find(a => a.id === activeAccountId) || window.FX.ACCOUNTS[0]; const [drafts, setDrafts] = useStateApp(initState.drafts || []); const [addressBook, setAddressBook] = useStateApp(initState.addressBook || window.FX.ADDRESS_BOOK); const [session, setSession] = useStateApp(() => { try { return JSON.parse(localStorage.getItem(PORTAL_SESSION_KEY)); } catch (e) { return null; } }); // persist useEffectApp(() => { window.FX.saveState({ bookings, notices, users, payment, activeAccountId, runs, savedQuotes, drafts, addressBook }); }, [bookings, notices, users, payment, activeAccountId, runs, savedQuotes, drafts, addressBook]); useEffectApp(() => { window.FX.saveInquiries(inquiries); }, [inquiries]); // apply theme tweaks useEffectApp(() => { const r = document.documentElement.style; const c = t.brandColor, a = t.accentColor; r.setProperty("--brand", c); r.setProperty("--brand-700", `color-mix(in srgb, ${c}, black 24%)`); r.setProperty("--brand-900", `color-mix(in srgb, ${c}, black 48%)`); r.setProperty("--brand-soft", `color-mix(in srgb, ${c}, white 90%)`); r.setProperty("--accent", a); r.setProperty("--accent-600", `color-mix(in srgb, ${a}, black 12%)`); r.setProperty("--accent-700", `color-mix(in srgb, ${a}, black 24%)`); r.setProperty("--accent-soft", `color-mix(in srgb, ${a}, white 88%)`); r.setProperty("--shadow-cta", `0 8px 22px color-mix(in srgb, ${a}, transparent 70%)`); }, [t.brandColor, t.accentColor]); useEffectApp(() => { const onResize = () => setNarrow(window.innerWidth < 940); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); function nav(p, pl = null) { setPage(p); setPayload(pl); setDrawer(false); setAcctMenu(false); window.scrollTo({ top: 0 }); } function onPlaced(b) { setBookings(prev => [b, ...prev]); } function onPublish(n) { setNotices(prev => [n, ...prev]); } function addUser(u) { setUsers(prev => [...prev, u]); } function removeUser(id) { setUsers(prev => prev.filter(u => u.id !== id)); } function addCard(c) { setPayment(prev => c.primary ? [...prev.map(p => ({ ...p, primary: false })), c] : [...prev, c]); } function removeCard(id) { setPayment(prev => prev.filter(p => p.id !== id)); } function setPrimaryCard(id) { setPayment(prev => prev.map(p => ({ ...p, primary: p.id === id }))); } function onCreateRun(r) { setRuns(prev => [r, ...prev]); setPage("manageRuns"); window.scrollTo({ top: 0 }); } function addSavedQuote(q) { setSavedQuotes(prev => [q, ...prev.filter(x => x.no !== q.no)]); } function reopenQuote(q) { nav("book", { fromQuote: q }); } function saveDraft(d) { setDrafts(prev => [d, ...prev.filter(x => x.id !== d.id)]); } function deleteDraft(id) { setDrafts(prev => prev.filter(x => x.id !== id)); } function saveAddress(a) { setAddressBook(prev => prev.some(x => x.id === a.id) ? prev.map(x => x.id === a.id ? a : x) : [a, ...prev]); } function removeAddress(id) { setAddressBook(prev => prev.filter(x => x.id !== id)); } function lodgeInquiry({ shipment, type, message }) { const now = new Date().toISOString(); const inq = { ref: window.FX.genInquiryRef(), tracking: shipment ? shipment.id : "General inquiry", product: "", customerId: activeAccount.id, customerName: window.FX.COMPANY, customerEmail: "dispatch@meridiangroup.com.au", type, message, status: "in-progress", createdAt: now, updatedAt: now, comments: [], rating: null, agent: null }; setInquiries(prev => [inq, ...prev]); return inq; } function rateInquiry(ref, n) { setInquiries(prev => prev.map(i => i.ref === ref ? { ...i, rating: n } : i)); } const cur = t.currency, rateMult = t.rateMult; const sidebarBg = t.darkSidebar ? "var(--brand)" : "var(--surface)"; const onDark = t.darkSidebar; const Sidebar = ( ); if (!session) { return { const s = { email: em, at: new Date().toISOString() }; try { localStorage.setItem(PORTAL_SESSION_KEY, JSON.stringify(s)); } catch (e) {} setSession(s); }} />; } return (
{Sidebar} {narrow && drawer &&
setDrawer(false)} style={{ position: "fixed", inset: 0, background: "rgba(30,22,51,0.4)", zIndex: 140 }} />}
{/* top bar */}
{narrow && }
{TITLES[page]}
{page === "dashboard" && } {page === "book" && } {page === "quote" && } {page === "createRun" && } {page === "manageRuns" && nav("createRun")} />} {page === "history" && } {page === "addresses" && } {page === "inquiries" && } {page === "depots" && } {page === "invoices" && } {page === "payment" && } {page === "users" && } {page === "contact" && }
{/* Tweaks */} setTweak("brandColor", v)} /> setTweak("accentColor", v)} /> setTweak("darkSidebar", v)} /> setTweak("currency", v)} /> setTweak("rateMult", v)} /> setTweak("accessLevel", v)} />
); } ReactDOM.createRoot(document.getElementById("root")).render();