// ─────────────────────────────────────────────────────────────── // Busco Ops — shared components (v2) // Top-nav shell, no emoji, larger logo, denser primitives. // ─────────────────────────────────────────────────────────────── const { useState, useEffect, useRef, useMemo } = React; // ── Icon set (Lucide-style) ─────────────────────────────────── function Icon({ name, size = 14, color = "currentColor", className = "", strokeWidth }) { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth || 1.75, strokeLinecap: "round", strokeLinejoin: "round", className }; switch (name) { case "layout":return ; case "clipboard":return ; case "building":return ; case "truck":return ; case "bell":return ; case "wallet":return ; case "users":return ; case "upload":return ; case "check":return ; case "check-circle":return ; case "package":return ; case "trend":return ; case "trend-down":return ; case "alert":return ; case "alert-circle":return ; case "file":return ; case "search":return ; case "x":return ; case "lock":return ; case "unlock":return ; case "plus":return ; case "minus":return ; case "edit":return ; case "trash":return ; case "send":return ; case "arrow-right":return ; case "trophy":return ; case "flag":return ; case "filter":return ; case "calendar":return ; case "mail":return ; case "phone":return ; case "down":return ; case "up":return ; case "chevron-right":return ; case "chevron-down":return ; case "more":return ; case "info":return ; case "briefcase":return ; case "tool":return ; case "settings":return ; case "export":return ; case "kanban":return ; case "refresh":return ; case "list":return ; case "grid":return ; case "office":return ; default:return null; } } // ── Section nav config ──────────────────────────────────────── const SECTIONS = [ { id: "hub", label: "Overview", icon: "layout" }, { id: "log", label: "Operations", icon: "clipboard" }, { id: "clients", label: "Clients", icon: "office" }, { id: "couriers", label: "Couriers", icon: "truck" }, { id: "alerts", label: "Alerts", icon: "bell" }, { id: "users", label: "Users", icon: "users" }, { id: "financial", label: "Financial", icon: "wallet", pin: true }]; // ── Header ──────────────────────────────────────────────────── function Header({ user, workspace, onWorkspaceChange, onRequestSignIn, onSignOut }) { return (
Busco Shipping Company
); } // ── Workspace chip (header dropdown) ───────────────────────── function WorkspaceChip({ workspace, onChange }) { const [open, setOpen] = useState(false); const wrapRef = useRef(null); const active = workspace || WORKSPACES[0]; return (
setOpen(false)} anchor={wrapRef} align="left" width={264}>
Switch workspace
{buscoAllWorkspaces().map((w) => )}
); } // ── User menu (dropdown) ───────────────────────────────────── function UserMenu({ user, workspace, onRequestSignIn, onSignOut }) { const [open, setOpen] = useState(false); const wrapRef = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onEsc = (e) => e.key === "Escape" && setOpen(false); document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); }; }, [open]); const signedIn = !!user; const initials = user?.initials || "OM"; const name = user?.name || "Ops Manager"; const role = t(user?.role || "Team access"); const email = user?.email || "ops.manager@busco.sa"; const wsLabel = workspace?.label || "KSA · Multi-city"; const go = (view) => { setOpen(false); opsAccount(view); }; return (
{open &&
{initials}
{name}
{email}
{signedIn ? : }
}
); } // ── Sign-in window ─────────────────────────────────────────── function SignInModal({ onClose, onSignIn, required }) { const [email, setEmail] = useState(""); const [pw, setPw] = useState(""); const [busy, setBusy] = useState(false); const [mode, setMode] = useState("signin"); // "signin" or "signup" const [error, setError] = useState(null); // Note: "keep me signed in" removed — Supabase persists sessions by default, // and the checkbox was decorative. Sessions live in localStorage until you sign out. useEffect(() => { if (required) return; const esc = (e) => e.key === "Escape" && onClose && onClose(); document.addEventListener("keydown", esc); return () => document.removeEventListener("keydown", esc); }, [onClose, required]); const submit = async (e) => { e.preventDefault(); if (!email || !pw) return; setBusy(true); setError(null); try { const authUser = mode === "signin" ? await window.buscoSignIn(email, pw) : await window.buscoSignUp(email, pw); const buscoUser = window.buscoUserFromAuth(authUser); onSignIn(buscoUser); } catch (err) { let msg = err?.message || "Sign-in failed. Check your credentials."; if (/email not confirmed/i.test(msg)) msg = "Confirm your email first (or disable email confirmation in Supabase Auth settings)."; if (/invalid login/i.test(msg)) msg = "Wrong email or password."; if (/already registered/i.test(msg)) msg = "Account already exists — switch to Sign in."; setError(msg); setBusy(false); } }; const handleOverlayClick = required ? undefined : onClose; const switchMode = (e, target) => { e.preventDefault(); setMode(target); setError(null); }; return (
e.stopPropagation()}> {!required && ( )}
Busco Shipping Company
{mode === "signin" ? t("Sign in to Busco Ops") : t("Create your account")}
{mode === "signin" ? t("Use your work email to access the operations centre.") : t("First-time setup — pick a strong password (6+ characters).")}
setEmail(e.target.value)} placeholder="name@busco.sa" />
{error &&
{error}
}
{mode === "signin" ? <>{t("New here?")} switchMode(e, "signup")}>{t("Create an account")} : <>{t("Already have an account?")} switchMode(e, "signin")}>{t("Sign in")} }
); } // ── Section nav ─────────────────────────────────────────────── function SectionNav({ active, onChange, sections }) { const list = sections && sections.length ? sections : SECTIONS; // Single-section users (e.g. warehouse staff) — skip the nav entirely if (list.length <= 1) return null; return (
{list.map((s) => )}
); } // ── Page subbar (title + breadcrumbs + actions) ────────────── function PageBar({ title, crumbs, actions }) { return (

{title}

{crumbs && crumbs.length > 0 &&
{crumbs.map((c, i) => {i > 0 && /} {c} )}
}
{actions}
); } // ── Badges ──────────────────────────────────────────────────── function RateBadge({ r, size }) { const cls = r >= 75 ? "rate-good" : r >= 50 ? "rate-warn" : "rate-bad"; return {r}%; } function TierBadge({ tier }) { return ( {tier.label} ); } function SourceBadge({ s }) { if (s === "manual") return M; if (s === "upload") return U; return null; } function ContractBadge({ type }) { return ( {type === "salary" ? "Salaried" : "Freelancer"} ); } // ── KPI ─────────────────────────────────────────────────────── function KPI({ label, value, sub, icon, tint, accent, tone, delta }) { return (
{icon &&
}
{label}
{value}
{delta !== undefined && = 0 ? "up" : "dn")}> {delta >= 0 ? "▲" : "▼"} {Math.abs(delta)}% } {sub}
); } // ── Sparkline ───────────────────────────────────────────────── function Sparkline({ values }) { const max = Math.max(...values, 100); return (
{values.map((v, i) => { const cls = v < 70 ? "lo" : v >= 88 ? "hi" : v >= 75 ? "ok" : ""; return ; })}
); } // ── Segmented ───────────────────────────────────────────────── function Segmented({ options, value, onChange }) { return (
{options.map((o) => )}
); } // ── Pill picker ─────────────────────────────────────────────── function PillRow({ options, value, onChange, multi }) { const isOn = (o) => multi ? value.includes(o) : value === o; const toggle = (o) => multi ? onChange(value.includes(o) ? value.filter((x) => x !== o) : [...value, o]) : onChange(o); return (
{options.map((o) => )}
); } // ── Multi-select dropdown ───────────────────────────────────── // value = array of selected strings. Renders a select-like trigger that // opens a checklist popover. Used for courier Client + Zone pickers. function MultiSelect({ options, value = [], onChange, placeholder = "Select…" }) { const [open, setOpen] = useState(false); const anchor = useRef(null); const toggle = (o) => onChange(value.includes(o) ? value.filter((x) => x !== o) : [...value, o]); const label = value.length === 0 ? placeholder : value.length <= 2 ? value.join(", ") : `${value.length} selected`; return (
setOpen(false)} anchor={anchor} align="left" width="100%">
{options.length === 0 &&
No options
} {options.map((o) => ( ))}
); } // ── Modal shell ─────────────────────────────────────────────── function Modal({ title, onClose, children, maxWidth }) { useEffect(() => { const esc = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", esc); return () => document.removeEventListener("keydown", esc); }, [onClose]); return (
e.stopPropagation()}>
{title}
{children}
); } // ── Toast ───────────────────────────────────────────────────── function Toast({ msg, kind, onDone }) { useEffect(() => { if (!msg) return; const t = setTimeout(onDone, 2400); return () => clearTimeout(t); }, [msg, onDone]); if (!msg) return null; return (
{msg}
); } // ── Rate cell with mini bar ────────────────────────────────── function RateCell({ r }) { const color = r >= 75 ? "var(--good)" : r >= 50 ? "var(--warn)" : "var(--crit)"; return (
{r}%
); } // ── Navigation helper (cross-screen) ───────────────────────── const opsNav = (page) => window.dispatchEvent(new CustomEvent("ops:nav", { detail: page })); // ── Account helper (opens account-level modals from anywhere) ─ const opsAccount = (view) => window.dispatchEvent(new CustomEvent("ops:account", { detail: view })); // ── Workspaces (shared list) ───────────────────────────────── // Built-in workspaces (country logic lives in busco-lib). Custom workspaces // are user-defined city lists, stored in localStorage and editable from the // Workspaces modal. const WORKSPACES = [ { id: "all", label: "All cities", sub: "KSA & Bahrain" }, { id: "ksa", label: "KSA", sub: "All Saudi cities" }, { id: "bahrain", label: "Bahrain", sub: "Manama · Riffa · Muharraq" }, ]; function buscoCustomWorkspaces() { try { return JSON.parse(localStorage.getItem("busco-workspaces") || "[]"); } catch { return []; } } function buscoSaveCustomWorkspaces(list) { try { localStorage.setItem("busco-workspaces", JSON.stringify(list)); } catch {} window.dispatchEvent(new CustomEvent("busco:workspaces")); } function buscoAllWorkspaces() { return [...WORKSPACES, ...buscoCustomWorkspaces().map((w) => ({ ...w, sub: (w.cities || []).join(" · "), custom: true }))]; } // Quick-pick KSA areas for the workspace editor const BUSCO_KSA_AREAS = { "Capital": ["Riyadh", "Qassim", "Kharj"], "Western": ["Jeddah", "Mecca", "Madinah", "Taif"], "Eastern": ["Dammam", "Khobar", "Dhahran", "Jubail", "Ahsa"], "Southern": ["Abha", "Khamis Mushait", "Jazan", "Najran"], "Northern": ["Tabuk", "Hail", "Sakaka", "Arar"], }; Object.assign(window, { buscoCustomWorkspaces, buscoSaveCustomWorkspaces, buscoAllWorkspaces }); // ── Generic popover wrapper (handles outside-click + escape) ─ function Popover({ open, onClose, anchor, align = "right", children, width }) { const popRef = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => { if (popRef.current && !popRef.current.contains(e.target) && !anchor?.current?.contains?.(e.target)) { onClose(); } }; const onEsc = (e) => e.key === "Escape" && onClose(); document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); }; }, [open, onClose, anchor]); if (!open) return null; // RTL: flip the alignment so a popover anchored "right" in LTR sticks to // the visual right edge in RTL (i.e. mirror it). Anchored "left" similarly // flips to the visual left. const isRtl = (typeof document !== "undefined") && document.documentElement.getAttribute("dir") === "rtl"; const eff = isRtl ? (align === "right" ? "left" : "right") : align; const style = { [eff]: 0, width }; return (
{children}
); } // ── Export menu ────────────────────────────────────────────── // getRows() → { rows, filename } built from the screen's CURRENT (filtered) // view, so the export always matches what's on screen. `formats` lists which // file types make sense here (data lists = xlsx/csv; no print-table PDF). function ExportMenu({ getRows, formats = ["xlsx", "csv"], onToast, includeBrief = false, label = "Export", size = "sm", primary = false }) { const [open, setOpen] = useState(false); const [briefOpen, setBriefOpen] = useState(false); const btnRef = useRef(null); const run = async (fmt) => { setOpen(false); if (fmt === "brief") { setBriefOpen(true); return; } try { const { rows, filename } = getRows(); const n = window.buscoExportData(fmt, rows, filename); onToast && onToast(`Downloaded ${n} row${n === 1 ? "" : "s"} as ${fmt.toUpperCase()}`); } catch (e) { onToast && onToast(e?.message || "Export failed", "danger"); } }; return (
setOpen(false)} anchor={btnRef} width={240}>
{t("Export format")}
{formats.includes("xlsx") && } {formats.includes("csv") && } {includeBrief && <>
} {briefOpen && setBriefOpen(false)} onToast={onToast} />}
); } // ── Brief report (morning/evening text export) ─────────────── function buildBriefReport(date) { const today = ENTRIES.filter((e) => e.date === date); const map = {}; for (const e of today) { const k = e.client; if (!map[k]) map[k] = { off: 0, del: 0, courierCount: 0, courierSet: new Set() }; map[k].off += e.offloaded; map[k].del += e.delivered; if (e.courierCount) map[k].courierCount += e.courierCount; if (e.courier && e.courier !== "—") map[k].courierSet.add(e.courier); } const rows = Object.entries(map).map(([name, v]) => ({ name, off: v.off, del: v.del, couriers: v.courierCount > 0 ? v.courierCount : v.courierSet.size, })).sort((a, b) => b.off - a.off); const totalOff = rows.reduce((a, r) => a + r.off, 0); const totalDel = rows.reduce((a, r) => a + r.del, 0); const tillOff = CLIENT_ROWS.reduce((a, c) => a + c.offloaded, 0); const tillDel = CLIENT_ROWS.reduce((a, c) => a + c.delivered, 0); const d = new Date(date + "T00:00:00"); const monthName = d.toLocaleString("en-US", { month: "long", year: "numeric" }); const dateName = d.toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric" }); let txt = `Month - ${monthName}\nDate - ${dateName}\n\n*Morning Report*\n`; rows.forEach((r, i) => { txt += `${i + 1}. ${r.name} - ${r.couriers} courier${r.couriers === 1 ? "" : "s"} took ${r.off} deliveries\n`; }); txt += `\nTotal Collected Today - ${totalOff} deliveries\nTotal Collected Till Date - ${tillOff} deliveries\n\n`; txt += `*Evening Report*\n`; rows.forEach((r, i) => { txt += `${i + 1}. ${r.name} - ${r.del} Delivered\n`; }); txt += `\nTotal Delivered Today - ${totalDel}\nTotal Delivered Till Date - ${tillDel}\n`; return { text: txt, rows, totalOff, totalDel, tillOff, tillDel, monthName, dateName }; } function BriefReportModal({ onClose, onToast }) { const [date, setDate] = useState(new Date().toISOString().slice(0, 10)); const [copied, setCopied] = useState(false); const data = useMemo(() => buildBriefReport(date), [date]); useEffect(() => { const esc = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", esc); return () => document.removeEventListener("keydown", esc); }, [onClose]); const copy = async () => { try { await navigator.clipboard.writeText(data.text); setCopied(true); setTimeout(() => setCopied(false), 1800); onToast && onToast("Brief copied to clipboard"); } catch { onToast && onToast("Copy failed — select & copy manually", "danger"); } }; const download = () => { const blob = new Blob([data.text], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `busco-brief-${date}.txt`; a.click(); URL.revokeObjectURL(url); onToast && onToast("Brief downloaded"); }; return (
e.stopPropagation()}>
{t("Brief report")}
{t("Morning + evening client summary — plain text for chat sharing")}
setDate(e.target.value)} />
{t("Clients reporting")}
{data.rows.length}
{t("Collected today")}
{fmtNum(data.totalOff)}
{t("Delivered today")}
{fmtNum(data.totalDel)}
Rate
{data.totalOff > 0 ? Math.round(data.totalDel / data.totalOff * 100) : 0}%
{data.rows.length === 0 ?
No entries on {data.dateName}. Pick a different date.
: 
{data.text}
}
Ready to paste into WhatsApp, Slack, or email
); } // ── Filter popover ─────────────────────────────────────────── function FilterPopover({ groups, value, onChange, onClear, label = "Filter", size = "sm" }) { const [open, setOpen] = useState(false); const btnRef = useRef(null); const active = Object.values(value || {}).reduce((a, v) => a + (Array.isArray(v) ? v.length : v ? 1 : 0), 0); return (
setOpen(false)} anchor={btnRef} width={260}>
{t("Filters")} {active > 0 && }
{groups.map((g) =>
{g.label}
{g.options.map((o) => { const checked = (value[g.key] || []).includes(o); return ( ); })}
)}
); } // ── Date popover ───────────────────────────────────────────── function DatePopover({ value, onChange, label = "Today", size = "sm" }) { const [open, setOpen] = useState(false); const btnRef = useRef(null); const presets = [ { k: "today", l: "Today" }, { k: "yesterday", l: "Yesterday" }, { k: "7d", l: "Last 7 days" }, { k: "30d", l: "Last 30 days" }, { k: "mtd", l: "Month to date" }, { k: "qtd", l: "Quarter to date" }]; return (
setOpen(false)} anchor={btnRef} width={200}>
{t("Date range")}
{presets.map((p) => )}
); } // ── Confirm dialog ─────────────────────────────────────────── function ConfirmModal({ title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "primary", onConfirm, onClose }) { useEffect(() => { const esc = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", esc); return () => document.removeEventListener("keydown", esc); }, [onClose]); return (
e.stopPropagation()}>
{title}
{body}
); } // ── Paste-report modal (WhatsApp morning/evening format) ──── function PasteReportModal({ onClose, onToast }) { const [text, setText] = useState(""); const [busy, setBusy] = useState(false); const parsed = useMemo(() => { if (!text.trim()) return null; try { return window.buscoParseTextReport(text); } catch { return null; } }, [text]); useEffect(() => { const esc = (e) => e.key === "Escape" && !busy && onClose(); document.addEventListener("keydown", esc); return () => document.removeEventListener("keydown", esc); }, [onClose, busy]); const submit = async () => { if (busy || !parsed) return; setBusy(true); try { const r = await window.buscoImportTextReport(text); const msg = `${r.inserted} new · ${r.updated} updated`; onToast(`Report imported: ${msg}`); onClose(); } catch (e) { onToast(e?.message || "Import failed", "danger"); setBusy(false); } }; const hasData = parsed && (parsed.morning.length || parsed.evening.length); const placeholderText = "Month - May 2026\n" + "Date - May 27, 2026\n\n" + "*Morning Report*\n" + "1. Ajex BH - 9 couriers took 375 deliveries\n" + "2. SMSA BH - 7 couriers took 280 deliveries\n\n" + "Total Collected Today - 655\n" + "Total Collected Till Date - 16034\n\n" + "*Evening Report*\n" + "1. Ajex BH - 313 Delivered\n" + "2. SMSA BH - 240 Delivered\n\n" + "Total Delivered Today - 553\n" + "Total Delivered Till Date - 11790"; return (
e.stopPropagation()}>
Paste daily report WhatsApp format — morning + evening sections both supported
{!busy && }