/* Platform Admin shell — sidebar, topbar, page router */ function PlatformAdminPage({ lang, setLang, t }) { // section comes from hash: #/admin/section const getHashSection = () => { const h = window.location.hash || "#/admin"; const parts = h.replace(/^#\//, "").split("/"); return parts[1] || "overview"; }; const [section, setSection] = React.useState(getHashSection()); const [drawer, setDrawer] = React.useState(null); // approval detail const [mobileOpen, setMobileOpen] = React.useState(false); const [toast, setToast] = React.useState(null); const [dataKey, setDataKey] = React.useState(0); const [search, setSearch] = React.useState(""); // Auth gate — only admin/superadmin roles may access const { user, loading: authLoading } = useAuth(); const [adminCheck, setAdminCheck] = React.useState({ checking: true, allowed: false, error: "" }); React.useEffect(() => { if (authLoading) return; if (!user) { setAdminCheck({ checking: false, allowed: false, error: "" }); return; } window.sb.from("profiles").select("role, full_name").eq("id", user.id).single() .then(({ data, error }) => { if (error) { setAdminCheck({ checking: false, allowed: false, error: error.message }); return; } const role = data?.role; const ok = role === "admin" || role === "superadmin"; setAdminCheck({ checking: false, allowed: ok, error: ok ? "" : `Role "${role}" cannot access admin.`, name: data?.full_name || "", role }); }); }, [user, authLoading]); React.useEffect(() => { const onHash = () => setSection(getHashSection()); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); // F1 — close any open approval drawer when the active section changes. // Otherwise the drawer stays mounted (its backdrop unmounts via the new // section's render) and intercepts clicks, blocking the new section. React.useEffect(() => { setDrawer(null); }, [section]); // Load live admin data only after auth check passes React.useEffect(() => { if (!adminCheck.allowed) return; window._adminRefreshCallback = () => setDataKey(k => k + 1); if (window.loadAdminData) { window.loadAdminData(); } return () => { window._adminRefreshCallback = null; }; }, [adminCheck.allowed]); const goto = (s) => { window.location.hash = `#/admin/${s}`; setSection(s); setMobileOpen(false); }; const openApproval = (a) => setDrawer(a); // Topbar search — a real "jump to section" command. Matches the typed // query against section labels (EN + AR) and navigates to the first hit. const runSearch = () => { const term = search.trim().toLowerCase(); if (!term) return; const hit = sections.find(s => (s.en || "").toLowerCase().includes(term) || (s.ar || "").includes(search.trim()) || s.k.includes(term) ); if (hit) { goto(hit.k); setSearch(""); } }; const handleAction = async (approval, action, note) => { // AP-3 — "changes" is a distinct change-request decision, not a reject. const decision = action === "approve" ? "approved" : action === "changes" ? "changes_requested" : "rejected"; const apTitleEn = window.approvalTitle ? window.approvalTitle(approval, "en") : approval.title; const apTitleAr = window.approvalTitle ? window.approvalTitle(approval, "ar") : approval.title; const labels = { approve: { en: `Approved · ${apTitleEn}`, ar: `تمّت الموافقة · ${apTitleAr}` }, reject: { en: `Rejected · ${apTitleEn}`, ar: `رُفض · ${apTitleAr}` }, changes: { en: `Changes requested · ${apTitleEn}`, ar: `طُلب تعديل · ${apTitleAr}` }, }; try { const { data: { session } } = await window.sb.auth.getSession(); const token = session?.access_token; const res = await fetch(`${window.SB_URL}/functions/v1/approval_decide`, { method: "POST", headers: { "Content-Type": "application/json", "apikey": window.SB_ANON, "Authorization": `Bearer ${token}`, }, body: JSON.stringify({ id: approval.id, decision, reviewer_note: note || null, }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Action failed"); setToast({ text: labels[action][lang] || labels[action].en, kind: action }); setDrawer(null); setTimeout(() => setToast(null), 3500); // Reload admin data to reflect the change if (window.loadAdminData) window.loadAdminData(); } catch (ex) { setToast({ text: ex.message || "Action failed", kind: "reject" }); setTimeout(() => setToast(null), 4000); } }; const sections = [ { k: "overview", en: "Overview", ar: "النظرة العامّة", icon: "sun" }, { k: "approvals", en: "Approvals", ar: "الموافقات", icon: "check", badge: window.ADMIN_APPROVALS.length }, { k: "applications", en: "Applications", ar: "طلبات الانضمام", icon: "feather", badge: (window.ADMIN_APPLICATIONS || []).filter(window.isOpenApplication).length || undefined }, { k: "makers", en: "Makers", ar: "الصنّاع", icon: "hand" }, { k: "pieces", en: "Pieces", ar: "القطع", icon: "box" }, { k: "pieces-images", en: "Pieces & Images", ar: "القطع والصور", icon: "eye" }, { k: "orders", en: "Orders", ar: "الطلبات", icon: "basket" }, { k: "returns", en: "Returns", ar: "المرتجعات", icon: "arrow", badge: (window.ADMIN_OPEN_RETURNS || 0) || undefined }, { k: "customers", en: "Customers", ar: "العملاء", icon: "cup" }, { k: "finance", en: "Finance", ar: "الماليّة", icon: "wax" }, { k: "workshops", en: "Workshops", ar: "ورش العمل", icon: "scissors" }, { k: "content", en: "Journal & content", ar: "المحتوى", icon: "feather" }, { k: "audit", en: "Audit log", ar: "السجلّ", icon: "calendar" }, { k: "team", en: "Team & roles", ar: "الفريق", icon: "star" }, { k: "settings", en: "Settings", ar: "الإعدادات", icon: "moon" }, ]; // First name for the greeting — falls back to the email local-part, then null // (OverviewPage renders a neutral greeting when there's no name). const firstName = (adminCheck.name && adminCheck.name.trim().split(/\s+/)[0]) || (user?.email ? user.email.split("@")[0] : "") || ""; let body = null; switch (section) { case "overview": body = ; break; case "approvals": body = ; break; case "applications": body = ; break; case "makers": body = ; break; case "pieces": body = ; break; case "pieces-images": body = ; break; case "orders": body = ; break; case "returns": body = ; break; case "customers": body = ; break; case "finance": body = ; break; case "workshops": body = ; break; case "content": body = ; break; case "audit": body = ; break; case "team": body = ; break; case "settings": body = ; break; default: body = ; } const sectionMeta = sections.find(s => s.k === section) || sections[0]; // Auth gate — block render until allowed if (authLoading || adminCheck.checking) { return (
Verifying access…
); } if (!adminCheck.allowed) { return (

{!user ? (lang === "en" ? "Admin sign-in required." : "تسجيل دخول الإدارة مطلوب.") : (lang === "en" ? "Access denied." : "الوصول مرفوض.")}

{!user ? (lang === "en" ? "Sign in with an admin account to manage the platform." : "سجّل دخول بحساب إدارة لإدارة المنصة.") : (lang === "en" ? "Your account does not have admin privileges." : "حسابك ليس لديه صلاحيات إدارة.")}

{adminCheck.error && (

{adminCheck.error}

)}
); } return (
{/* Top bar (admin-specific, replaces site nav) */}
Admin
{ e.preventDefault(); runSearch(); }} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 14px", border: "1px solid rgba(244,237,226,0.14)", borderRadius: 999, background: "rgba(244,237,226,0.04)", minWidth: 280 }}> setSearch(e.target.value)} placeholder={lang === "en" ? "Jump to a section…" : "اذهب إلى قسم…"} aria-label={lang === "en" ? "Jump to a section" : "اذهب إلى قسم"} style={{ flex: 1, background: "transparent", border: 0, color: "var(--paper)", fontFamily: "var(--ff-sans)", fontSize: 13, outline: "none", }} />
{(() => { const displayName = adminCheck.name || (user?.email ? user.email.split("@")[0] : (lang === "en" ? "Admin" : "إداري")); const roleLabel = adminCheck.role === "superadmin" ? (lang === "en" ? "Owner" : "المالك") : (lang === "en" ? "Admin" : "إداري"); const initial = (displayName || "A").trim().charAt(0).toUpperCase(); return (
{displayName} {roleLabel}
{initial}
); })()}
{/* Layout */}
{/* Sidebar */} {/* Mobile drawer */} {mobileOpen && (
setMobileOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 90, display: "none" }} className="adm-mobile-overlay">
e.stopPropagation()} style={{ width: 280, height: "100%", background: "var(--paper)", padding: "20px 14px", overflow: "auto" }}>
SANAA control
{sections.map(s => ( ))}
)} {/* Main */}
{/* Title bar */}
{lang === "en" ? "Platform admin" : "إدارة المنصّة"} · {sectionMeta[lang] || sectionMeta.en}

{sectionMeta[lang] || sectionMeta.en}

{body}
{/* Approval drawer */} setDrawer(null)} lang={lang} onAction={handleAction} /> {/* Toast */} {toast && (
{toast.text}
)}
); } window.PlatformAdminPage = PlatformAdminPage;