}>
{items.map((n) => {
const Icon = window.Icons[n.icon] || window.Icons.Bell;
return (
{ if (n.link) window.location.href = n.link; else { onClose(); onNavigate(n.cat); } }}
style={{display:"flex", gap:12, padding:"12px 14px", border:"1px solid var(--border)", borderRadius:"var(--radius-md)", cursor:"pointer", background: n.read ? "var(--card)" : "var(--surface)", position:"relative"}}>
{!n.read &&
}
{n.title}
{n.desc}
{n.time}
);
})}
);
};
// ─── Search overlay ───
const SearchOverlay = ({ open, onClose, onNavigate }) => {
const [q, setQ] = useState("");
const inputRef = useRef(null);
useEffect(() => { if (open) setTimeout(()=> inputRef.current?.focus(), 30); else setQ(""); }, [open]);
if (!open) return null;
const items = [
...ROUTES.flatMap(g => g.items.map(i => ({ kind: "Page", label: i.label, route: i.id }))),
{ kind: "Batch", label: "BAT-26-0512-04 · Mary Wairimu", route: "inventory" },
{ kind: "Batch", label: "BAT-26-0512-03 · Grace Wambui", route: "inventory" },
{ kind: "Farmer", label: "Mary Wairimu · Kangema, Murang'a", route: "procurement" },
{ kind: "Farmer", label: "Esther Njeri · Kandara, Murang'a", route: "procurement" },
{ kind: "Order", label: "SO-2026-0413 · Karibu Foods", route: "orders" },
{ kind: "Order", label: "SO-2026-0412 · Olivado EPZ", route: "orders" },
{ kind: "Run", label: "PRO-26-0512-A · Line 1 · Hass", route: "production" },
{ kind: "QC", label: "QC-8429 · BAT-26-0512-04 · pass", route: "qc" },
];
const hits = q ? items.filter(i => i.label.toLowerCase().includes(q.toLowerCase())) : items.slice(0, 8);
return (
{ if (e.target === e.currentTarget) onClose(); }}>
setQ(e.target.value)} placeholder="Search batches, farmers, orders, runs…"/>
{hits.length === 0
?
No results for "{q}"
: hits.map((h, i) => (
{ onNavigate(h.route); onClose(); }}>
{h.label}
{h.kind}
))
}
);
};
// ─── Tweak defaults (host-persisted) ───
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
"dark": false,
"bgPattern": "two",
"density": "comfortable",
"procState": "default",
"reqState": "default",
"formState": "empty",
"bulkState": "valid",
"detailState": "receiving",
"editMode": "newversion",
"selectState": "default",
"sendState": "ready",
"bcastStatusState": "complete",
"respState": "receiving",
"compareCount": "4",
"shortlistState": "fully",
"approveStep": "1",
"gateInState": "awaitingFarmer",
"agreementState": "awaiting1",
"rescheduleState": "noconflict",
"calendarView": "week",
"usersState": "default",
"userCreateState": "empty",
"userEditState": "active",
"permRole": "procurement-officer",
"notifState": "default",
"searchState": "results",
"auditState": "default",
"profileTab": "profile"
}/*EDITMODE-END*/;
// ─── Root ───
const App = () => {
const [route, setRoute] = useState(() => {
const hash = location.hash.replace("#", "");
return PAGE_META[hash] ? hash : "procurement";
});
const [notifOpen, setNotifOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const [collapsed, setCollapsed] = useState(() => {
try { return localStorage.getItem("amoms-sb-collapsed") === "1"; } catch (e) { return false; }
});
// persist desktop collapse state
useEffect(() => {
try { localStorage.setItem("amoms-sb-collapsed", collapsed ? "1" : "0"); } catch (e) {}
}, [collapsed]);
// Trigger: collapse to icon-rail on desktop, open off-canvas sheet on mobile.
const toggleSidebar = () => {
if (window.matchMedia("(max-width: 960px)").matches) setMenuOpen(o => !o);
else setCollapsed(c => !c);
};
// sync URL hash
useEffect(() => {
location.hash = route;
document.title = `AMOMS — ${PAGE_META[route]?.title || ""}`;
setMenuOpen(false); // close menu on route change
}, [route]);
// ⌘K shortcut + ⌘B sidebar toggle
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setSearchOpen(true); }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "b") { e.preventDefault(); toggleSidebar(); }
if (e.key === "Escape") { setSearchOpen(false); setMenuOpen(false); }
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, () => {}];
useEffect(() => {
document.documentElement.classList.toggle("dark", !!t.dark);
}, [t.dark]);
useEffect(() => {
document.documentElement.setAttribute("data-pattern", t.bgPattern || "two");
}, [t.bgPattern]);
const PageComp = window.Pages?.[route];
const meta = PAGE_META[route];
return (
{menuOpen &&
setMenuOpen(false)}/>}
setMenuOpen(false)}/>
setNotifOpen(true)}
dark={!!t.dark}
onToggleDark={()=> setTweak("dark", !t.dark)}
onMenuClick={()=> setMenuOpen(true)}
onToggleSidebar={toggleSidebar}
collapsed={collapsed}
onSearchClick={()=> setSearchOpen(true)}/>
{PageComp
?
:
}
setNotifOpen(false)} onNavigate={setRoute}/>
setSearchOpen(false)} onNavigate={setRoute}/>
{window.TweaksPanel && (
p.route === route) ? route : ""}
onChange={(v)=> { const p = PAGE_NAV.find(x => x.route === v); if (p) window.location.href = p.href; }}
options={PAGE_NAV.map(p => ({ value: p.route, label: `${p.code} · ${p.label}` }))}/>
setTweak("dark", v)}/>
setTweak("bgPattern", v)}
options={[{value:"two", label:"Fields"},{value:"none", label:"None"}]}/>
{route === "procurement" && (
setTweak("procState", v)}
options={[
{value:"default", label:"Default (populated)"},
{value:"empty", label:"First-run / empty"},
{value:"noresults", label:"Filtered — no results"},
{value:"loading", label:"Loading"},
]}/>
)}
{route === "requirements" && (
setTweak("reqState", v)}
options={[
{value:"default", label:"Default (populated)"},
{value:"empty", label:"First-run / no requirements"},
{value:"noresults", label:"Filters — no results"},
{value:"loading", label:"Loading"},
]}/>
)}
{route === "createReq" && (
setTweak("formState", v)}
options={[
{value:"empty", label:"Empty form"},
{value:"autosaved", label:"Auto-saved"},
{value:"errors", label:"Validation errors"},
]}/>
)}
{route === "bulkCreate" && (
setTweak("bulkState", v)}
options={[
{value:"empty", label:"Empty"},
{value:"parsing", label:"Parsing"},
{value:"valid", label:"Valid preview"},
{value:"partial", label:"Partial errors"},
{value:"allerrors", label:"All errors"},
]}/>
)}
{route === "reqDetail" && (
setTweak("detailState", v)}
options={[
{value:"draft", label:"Draft"},
{value:"receiving", label:"Broadcasted — receiving"},
{value:"pastdeadline", label:"Past deadline"},
{value:"approved", label:"Approved"},
{value:"cancelled", label:"Cancelled"},
{value:"loading", label:"Loading"},
]}/>
)}
{route === "editReq" && (
setTweak("editMode", v)}
options={[{value:"draft", label:"Draft edit"},{value:"newversion", label:"New version"}]}/>
)}
{route === "broadcastSelect" && (
setTweak("selectState", v)}
options={[
{value:"default", label:"Default"},
{value:"nofarmers", label:"No farmers match"},
{value:"nochannels", label:"No channels selected"},
{value:"large", label:"Large selection (500+)"},
]}/>
)}
{route === "broadcastPreview" && (
setTweak("sendState", v)}
options={[
{value:"ready", label:"Ready (send now)"},
{value:"scheduled", label:"Scheduled"},
{value:"sending", label:"Sending"},
{value:"sent", label:"Sent success"},
{value:"partial", label:"Partial failure"},
]}/>
)}
{route === "broadcastStatus" && (
setTweak("bcastStatusState", v)}
options={[
{value:"sending", label:"Sending"},
{value:"complete", label:"Complete"},
{value:"failures", label:"Has failures"},
{value:"loading", label:"Loading"},
]}/>
)}
{route === "responses" && (
setTweak("respState", v)}
options={[
{value:"receiving", label:"Receiving (live)"},
{value:"closed", label:"Closed (past deadline)"},
{value:"waiting", label:"No responses yet"},
{value:"none", label:"None received (closed)"},
]}/>
)}
{route === "compare" && (
setTweak("compareCount", v)}
options={[{value:"2", label:"2"},{value:"4", label:"4"},{value:"6", label:"6+"}]}/>
)}
{route === "shortlist" && (
setTweak("shortlistState", v)}
options={[
{value:"under", label:"Under-allocated"},
{value:"fully", label:"Fully allocated"},
{value:"over", label:"Over-allocated"},
{value:"single", label:"Single farmer"},
]}/>
)}
{route === "approve" && (
setTweak("gateInState", v)}
options={[
{value:"awaitingFarmer", label:"Awaiting farmer confirm"},
{value:"confirmed", label:"Farmer confirmed — QR active"},
{value:"arrived", label:"Arrived at gate"},
]}/>
)}
{route === "agreement" && (
setTweak("agreementState", v)}
options={[
{value:"awaiting1", label:"Awaiting first sign"},
{value:"awaiting2", label:"First signed"},
{value:"both", label:"Both signed"},
{value:"declined", label:"Declined"},
]}/>
)}
{route === "reschedule" && (
setTweak("rescheduleState", v)}
options={[
{value:"noconflict", label:"Approve — no conflict"},
{value:"conflict", label:"Approve — conflict"},
{value:"reject", label:"Reject"},
{value:"counter", label:"Counter-propose"},
]}/>
)}
{route === "slotCalendar" && (
setTweak("calendarView", v)}
options={[{value:"day", label:"Day"},{value:"week", label:"Week"},{value:"month", label:"Month"}]}/>
)}
{route === "profile" && (
setTweak("profileTab", v)}
options={[{value:"profile", label:"Profile"},{value:"security", label:"Security"},{value:"prefs", label:"Prefs"}]}/>
)}
{route === "users" && (
setTweak("usersState", v)}
options={[
{value:"default", label:"Default (populated)"},
{value:"empty", label:"First-run / no users"},
{value:"noresults", label:"Filtered — no results"},
{value:"loading", label:"Loading"},
]}/>
)}
{route === "userCreate" && (
setTweak("userCreateState", v)}
options={[
{value:"empty", label:"Empty form"},
{value:"filled", label:"Filled in"},
{value:"errors", label:"Validation errors"},
{value:"invited", label:"Invite sent"},
]}/>
)}
{route === "userEdit" && (
setTweak("userEditState", v)}
options={[
{value:"active", label:"Active"},
{value:"invited", label:"Invite pending"},
{value:"deactivated", label:"Deactivated"},
]}/>
)}
{route === "permissions" && (
setTweak("permRole", v)}
options={(window.MD?.ROLES || []).map(r => ({ value:r.id, label:r.name }))}/>
)}
{route === "notifications" && (
setTweak("notifState", v)}
options={[
{value:"default", label:"Default (all)"},
{value:"unread", label:"Unread only"},
{value:"empty", label:"Inbox zero"},
]}/>
)}
{route === "globalSearch" && (
setTweak("searchState", v)}
options={[
{value:"results", label:"Results"},
{value:"typing", label:"Recent / typing"},
{value:"empty", label:"No results"},
]}/>
)}
{route === "auditLog" && (
setTweak("auditState", v)}
options={[
{value:"default", label:"Default (all events)"},
{value:"filtered", label:"Filtered (auth only)"},
{value:"loading", label:"Loading"},
]}/>
)}
)}
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);