// App shell: top nav, sidebar, screen switcher, modals, theme persistence, mobile drawer. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#1d4ed8", "density": "comfy", "theme": "light", "showTopNav": true }/*EDITMODE-END*/; // =================== Theme persistence =================== const THEME_KEY = "catalogue-maker.theme.v1"; const FONT_STACKS = { "Geist": "'Geist', system-ui, sans-serif", "Inter": "'Inter', system-ui, sans-serif", "IBM Plex Sans": "'IBM Plex Sans', system-ui, sans-serif", "system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif", }; // Derive strong/soft shades from any hex color function deriveAccentShades(hex) { // Strong = darker, Soft = very light tint const c = hex.replace("#", ""); if (c.length !== 6) return { strong: hex, soft: "#eeefff" }; const r = parseInt(c.slice(0,2), 16), g = parseInt(c.slice(2,4), 16), b = parseInt(c.slice(4,6), 16); const strong = `#${Math.max(0, Math.round(r*.75)).toString(16).padStart(2,"0")}${Math.max(0, Math.round(g*.75)).toString(16).padStart(2,"0")}${Math.max(0, Math.round(b*.75)).toString(16).padStart(2,"0")}`; const soft = `#${Math.round(r + (255-r)*.92).toString(16).padStart(2,"0")}${Math.round(g + (255-g)*.92).toString(16).padStart(2,"0")}${Math.round(b + (255-b)*.92).toString(16).padStart(2,"0")}`; return { strong, soft }; } function loadStoredTheme(defaults) { try { const raw = localStorage.getItem(THEME_KEY); if (!raw) return defaults; return { ...defaults, ...JSON.parse(raw) }; } catch (e) { return defaults; } } function saveStoredTheme(theme) { try { localStorage.setItem(THEME_KEY, JSON.stringify(theme)); } catch (e) {} } function applyTheme(theme) { const root = document.documentElement; const { strong, soft } = deriveAccentShades(theme.accent); root.style.setProperty("--accent", theme.accent); root.style.setProperty("--accent-strong", strong); root.style.setProperty("--accent-soft", soft); root.style.setProperty("--r-md", theme.radius + "px"); root.style.setProperty("--r-sm", Math.max(4, theme.radius - 4) + "px"); root.style.setProperty("--r-lg", (theme.radius + 4) + "px"); root.style.setProperty("--font", FONT_STACKS[theme.font] || FONT_STACKS["Geist"]); document.body.dataset.density = theme.density; document.body.dataset.theme = theme.theme; document.body.dataset.sidebar = theme.sidebar || "rail"; } // =================== Data fixtures =================== const initialData = () => ({ user: { name: "Abhishek Sinha", email: "2bsinha@gmail.com", role: "SuperAdmin" }, org: { name: "Demo Workspace", id: "org_demo" }, currentProject: "Demo Workspace", projectOptions: ["Demo Workspace", "Sheetal Furniture", "Books Import", "Jewellery Pilot"], monthlySpend: 184.20, credits: 426, autoRecharge: true, autoRechargeThreshold: 100, autoRechargeAmount: 500, paymentMethod: { brand: "VISA", last4: "9015", exp: "08/27" }, invoiceAddress: "Abhishek Sinha\n264–265 Doctor Annie Besant Road\nGround floor\nMumbai, Maharashtra 400030\nIndia", taxId: "22AAAAA0000A1Z5", taxIdType: "GSTIN", subscription: { plan: "Growth", status: "Active", includedRuns: 500, usedRuns: 163, renewal: "Jun 16, 2026" }, creditLedger: { balance: 426, usedThisMonth: 163, reserved: 12, lastTopUp: "May 14, 2026" }, invoices: [ { id: "INV-2026-051", date: "May 14, 2026", desc: "Growth plan and script credits", amount: "$184.20", status: "Open" }, { id: "INV-2026-042", date: "Apr 30, 2026", desc: "Catalogue extraction usage", amount: "$92.40", status: "Paid" }, { id: "INV-2026-031", date: "Mar 31, 2026", desc: "Credit top-up", amount: "$300.00", status: "Paid" }, ], projects: [ { id: "p1", name: "Demo Workspace", default: true, current: true, created: "Feb 17, 2026", cost: 184.20, collab: 4 }, { id: "p2", name: "Sheetal Furniture", created: "Apr 12, 2026", cost: 92.40, collab: 3 }, { id: "p3", name: "Books Import", created: "May 02, 2026", cost: 28.18, collab: 2 }, ], members: [ { id: "m1", name: "Abhishek Sinha", email: "2bsinha@gmail.com", role: "SuperAdmin", lastActive: "Just now", status: "Active" }, { id: "m2", name: "Priya Nair", email: "priya@cataloguemaker.dev", role: "AppManager", lastActive: "2h ago", status: "Active" }, { id: "m3", name: "Karan Mehta", email: "karan@example.com", role: "Customer", lastActive: "Yesterday", status: "Active" }, { id: "m4", name: "Sasha Volkov", email: "sasha@partner.io", role: "Customer", lastActive: "4 days", status: "Pending" }, ], apiKeys: [ { id: "k1", name: "backend-service", key: "cm-live-9aF3kQ2pLm8nXvR0wY1zT5bN", created: "Apr 12, 2026", lastUsed: "12 min ago", revealed: false }, { id: "k2", name: "local-dev", key: "cm-test-3kL9pM5wT2vN8xR1qY7zB0sH", created: "Mar 28, 2026", lastUsed: "Yesterday", revealed: false }, ], profile: { name: "Abhishek Sinha", email: "2bsinha@gmail.com", username: "2bsinha", tz: "Asia/Kolkata (GMT+5:30)" }, spendByDay: [4, 8, 6, 12, 14, 9, 18, 21, 16, 19, 24, 28, 20, 18, 22, 26, 31, 34, 29, 27, 33, 36, 40, 38, 42, 44, 39, 41, 46, 50], spendByModel: [ { model: "catalogue-extractor", requests: "163", tokens: "PDF pages", spend: 92.4 }, { model: "price-list-normalizer", requests: "48", tokens: "Rows", spend: 28.18 }, { model: "image-crop-review", requests: "22", tokens: "Images", spend: 18.72 }, ], scripts: [ { id: "catalogue-extractor", name: "Catalogue Extractor", version: "1.0.3", status: "Active", creditCost: 1, input: "PDF, image", output: "Excel, images, JSON", owner: "SuperAdmin", lastRun: "12 min ago" }, { id: "price-list-normalizer", name: "Price List Normalizer", version: "0.4.1", status: "Active", creditCost: 1, input: "Excel, CSV", output: "Clean Excel", owner: "AppManager", lastRun: "1h ago" }, { id: "visual-page-crop", name: "Visual Page Crop", version: "0.2.0", status: "Testing", creditCost: 2, input: "PDF", output: "Cropped images", owner: "SuperAdmin", lastRun: "Yesterday" }, ], scriptVersions: [ { id: "v1", script: "Catalogue Extractor", version: "1.0.3", status: "Active", packageId: "pkg_101", approvedBy: "Abhishek", date: "May 15, 2026" }, { id: "v2", script: "Visual Page Crop", version: "0.2.0", status: "Testing", packageId: "pkg_102", approvedBy: "-", date: "May 16, 2026" }, ], jobs: [ { id: "job_6817", script: "Catalogue Extractor", org: "Sheetal Furniture", user: "Abhishek", status: "Succeeded", files: 1, artifacts: 164, credits: 26, created: "May 16, 2026 10:12", duration: "4m 18s", error: "" }, { id: "job_6818", script: "Visual Page Crop", org: "Sheetal Furniture", user: "Priya", status: "Running", files: 1, artifacts: 42, credits: 12, created: "May 16, 2026 11:04", duration: "2m 05s", error: "" }, { id: "job_6819", script: "Price List Normalizer", org: "Books Import", user: "Karan", status: "Queued", files: 2, artifacts: 0, credits: 0, created: "May 16, 2026 11:18", duration: "-", error: "" }, { id: "job_6820", script: "Catalogue Extractor", org: "Jewellery Pilot", user: "Sasha", status: "Failed", files: 1, artifacts: 0, credits: 1, created: "May 15, 2026 18:22", duration: "38s", error: "Input file was encrypted" }, ], artifacts: [ { id: "art_1", jobId: "job_6817", name: "sheetal_catalogue.xlsx", type: "Excel", size: "418 KB", created: "May 16, 2026 10:16" }, { id: "art_2", jobId: "job_6817", name: "extracted_images.zip", type: "Images", size: "84.1 MB", created: "May 16, 2026 10:16" }, { id: "art_3", jobId: "job_6818", name: "visual_crops_preview.zip", type: "Images", size: "18.7 MB", created: "May 16, 2026 11:06" }, ], packages: [ { id: "pkg_101", name: "catalogue-extractor", version: "1.0.3", status: "Approved", uploadedBy: "Abhishek", uploadedAt: "May 15, 2026", tests: "Passed" }, { id: "pkg_102", name: "visual-page-crop", version: "0.2.0", status: "Testing", uploadedBy: "Priya", uploadedAt: "May 16, 2026", tests: "Running" }, { id: "pkg_103", name: "jewellery-normalizer", version: "0.1.0", status: "Validation failed", uploadedBy: "Karan", uploadedAt: "May 14, 2026", tests: "Blocked" }, ], packageEvents: [ { id: "e1", packageId: "pkg_102", event: "ZIP uploaded", at: "May 16, 2026 10:42", actor: "Priya" }, { id: "e2", packageId: "pkg_102", event: "Manifest validated", at: "May 16, 2026 10:43", actor: "System" }, { id: "e3", packageId: "pkg_102", event: "Container build started", at: "May 16, 2026 10:45", actor: "System" }, ], analyticsByScript: [ { id: "a1", script: "Catalogue Extractor", runs: 163, success: "94%", credits: 326, avgDuration: "4m 02s" }, { id: "a2", script: "Price List Normalizer", runs: 48, success: "98%", credits: 48, avgDuration: "51s" }, { id: "a3", script: "Visual Page Crop", runs: 22, success: "86%", credits: 44, avgDuration: "5m 22s" }, ], usageAnalytics: { totalRuns: 233, successRate: "94%", creditsUsed: 418, storageGb: 7.8 }, clients: [ { id: "c1", name: "Sheetal Furniture", plan: "Growth", status: "Active", runs: 163, credits: 426, lastSeen: "Today" }, { id: "c2", name: "Books Import", plan: "Starter", status: "Active", runs: 48, credits: 72, lastSeen: "Today" }, { id: "c3", name: "Jewellery Pilot", plan: "Custom", status: "Support", runs: 22, credits: 310, lastSeen: "Yesterday" }, ], supportQueue: [ { id: "sup_1", client: "Jewellery Pilot", topic: "Encrypted PDF failed", priority: "High", status: "Open", owner: "AppManager" }, { id: "sup_2", client: "Sheetal Furniture", topic: "Review cropped images", priority: "Medium", status: "Waiting", owner: "AI App Manager" }, ], aiManagerTasks: [ { id: "ai_1", area: "Marketing", task: "Draft onboarding email for Catalogue Extractor users", status: "Ready for review" }, { id: "ai_2", area: "Sales", task: "Identify clients likely to need custom plan", status: "Queued" }, { id: "ai_3", area: "Support", task: "Summarize failed jobs and suggested fixes", status: "Running" }, ], files: [ { id:"f1", name:"SOFA PRICELIST .pdf", purpose:"script input", size:"18.4 MB", created:"May 16, 2026" }, { id:"f2", name:"LOUNGE PRICELIST.pdf", purpose:"script input", size:"24.1 MB", created:"May 15, 2026" }, { id:"f3", name:"sheetal_catalogue.xlsx", purpose:"artifact", size:"418 KB", created:"May 16, 2026" }, ], integrations: [ { name:"Cloudflare R2", desc:"Store uploaded files and generated artifacts", color:"#f48120", connected:true }, { name:"Stripe", desc:"Manage subscriptions, invoices, and credits", color:"#635bff", connected:false }, { name:"Slack", desc:"Get alerts on failed jobs and support tickets", color:"#4a154b", connected:true }, ], sshKeys: [ { id:"s1", label:"abhishek-macbook", fp:"SHA256:1a:f3:8b:c9:2e:74:5d:9c:b1:a8:6f:0d:e2:4a:9b:5c", added:"Feb 18, 2026" }, { id:"s2", label:"abhishek-workstation",fp:"SHA256:8d:c2:91:7e:5a:b0:42:13:fc:8e:6a:9d:71:0c:42:38", added:"Mar 22, 2026" }, ], }); // Resolve icon-by-name from config to React component const ICON_MAP = { IconUser, IconKey, IconPlug, IconUpload, IconFolder, IconCpu, IconBuilding, IconUsers, IconCard, IconChart, IconPalette, IconShield, IconList, IconWebhook, IconFile, IconQuestion, IconSettings, IconDownload, }; // =================== App =================== function App() { const cfg = window.APP_CONFIG; const [data, setData] = React.useState(initialData); // Expose the App data globally so the data layer can fall back to // it when an endpoint is in mock mode. Real apps would skip this. React.useEffect(() => { window.__appData = data; }, [data]); // Hash-based routing — URL drives state. Refresh/back/forward all work. const [route, routeParam, setHashRoute] = useHashRoute(cfg.initialRoute || "dashboard"); const setRoute = React.useCallback((r, p) => setHashRoute(r, p), [setHashRoute]); const setRouteParam = (p) => setHashRoute(route, p); const [modal, setModal] = React.useState(null); const [modalCtx, setModalCtx] = React.useState(null); // payload for the active modal const [drawerOpen, setDrawerOpen] = React.useState(false); const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false); const [paletteOpen, setPaletteOpen] = React.useState(false); const [apiFallback, setApiFallback] = React.useState(() => window.__apiFixtureFallback || null); const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // Runtime theme — user-controlled, persisted in localStorage. const [theme, setThemeState] = React.useState(() => loadStoredTheme(cfg.defaultTheme)); const setTheme = (patch) => setThemeState(prev => { const next = { ...prev, ...patch }; saveStoredTheme(next); return next; }); const resetTheme = () => { saveStoredTheme(cfg.defaultTheme); setThemeState({ ...cfg.defaultTheme }); window.__toast && window.__toast("Theme reset to defaults"); }; // Apply theme on every change React.useEffect(() => { applyTheme(theme); }, [theme]); // Dev tweaks panel mirrors a subset to runtime theme React.useEffect(() => { setTheme({ accent: tweaks.accent, density: tweaks.density, theme: tweaks.theme }); // eslint-disable-next-line }, [tweaks.accent, tweaks.density, tweaks.theme]); // Expose nav + edit triggers globally for inline links and row menus React.useEffect(() => { window.__nav = (r, p) => { setRoute(r, p); setDrawerOpen(false); }; window.__editProject = (id) => { setRoute("edit-project", id); }; window.__changeRole = (id) => { setModalCtx(data.members.find(m => m.id === id)); setModal("changeRole"); }; window.__removeMember = (id) => { setModalCtx(data.members.find(m => m.id === id)); setModal("removeMember"); }; window.__rotateKey = (id) => { setModalCtx(data.apiKeys.find(k => k.id === id)); setModal("rotateKey"); }; window.__revokeKey = (id) => { setModalCtx(data.apiKeys.find(k => k.id === id)); setModal("revokeKey"); }; window.__openPalette = () => setPaletteOpen(true); }, [data, setRoute]); // Global keyboard shortcut: cmd/ctrl + K opens the command palette React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setPaletteOpen(o => !o); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); // Close drawer on resize-up to desktop React.useEffect(() => { const onResize = () => { if (window.innerWidth >= 1024) setDrawerOpen(false); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); // Close drawer on route change React.useEffect(() => { setDrawerOpen(false); }, [route]); React.useEffect(() => { const onFallback = (event) => setApiFallback(event.detail); window.addEventListener("api-fixture-fallback", onFallback); return () => window.removeEventListener("api-fixture-fallback", onFallback); }, []); const openModal = (k) => setModal(k); const closeModal = () => setModal(null); const screen = (() => { switch (route) { // Dashboard / product (no sidebar) case "dashboard": return ; case "run-script": return ; case "jobs": return ; case "job-detail": return ; case "scripts": return ; case "artifacts": return ; case "analytics": return ; case "admin": return ; case "credits": return ; case "package-manager": return ; case "script-versions": return ; case "clients": return ; case "all-jobs": return ; case "usage-analytics": return ; case "support": return ; case "ai-app-manager": return ; // Settings screens (with sidebar) case "billing": return ; case "projects": return ; case "members": return ; case "api-keys": return ; case "profile": return ; case "appearance": return ; case "cookies": return ; case "org-general": return ; case "proj-general": return ; case "cost-analytics": return ; case "files": return ; case "integrations": return ; case "ssh-key": return ; case "invoice-usage": return ; // Create-flow pages case "new-project": return ; case "invite-member": return ; case "new-api-key": return ; case "new-ssh-key": return ; case "upload-file": return ; // Edit-flow pages case "edit-project": return ; // Auth pages — rendered without app shell (see early-return below) case "sign-in": return ; case "sign-up": return ; case "forgot-password": return ; case "check-email": return ; case "reset-password": return ; case "verify-email": return ; case "two-factor": return ; case "sso": return ; default: return ; } })(); // Auth routes (sign-in, sign-up, forgot-password, etc.) render WITHOUT the // app shell — no top nav, no sidebar, no modals, no command palette. const isAuthRoute = window.AUTH_ROUTES && window.AUTH_ROUTES.has(route); if (isAuthRoute) { return (
{screen}
); } // Breadcrumb chain for current route const findItem = (id) => { for (const g of cfg.sidebar) { const it = g.items.find(i => i.id === id); if (it) return { item: it, group: g.group }; } return null; }; const found = findItem(route); // Categorize route const isProductRoute = cfg.topNav.some(n => n.id === route); const usesSidebar = true; const isSettingsRoute = usesSidebar || !!found || [ "new-project","invite-member","new-api-key","new-ssh-key","upload-file", "edit-project","invoice-usage","appearance","cookies" ].includes(route); // Parent map for create/edit pages → settings group const PARENT_MAP = { "new-project": "projects", "edit-project": "projects", "invite-member": "members", "new-api-key": "api-keys", "new-ssh-key": "ssh-key", "upload-file": "run-script", "invoice-usage": "billing", }; const parentRoute = PARENT_MAP[route]; const parentFound = parentRoute ? findItem(parentRoute) : null; const crumbs = isProductRoute ? [{ label: cfg.brand.productName }, { label: cfg.topNav.find(n => n.id === route)?.label || route }] : found ? [{ label: "Settings" }, { label: data.org.name }, { label: found.item.label }] : parentFound ? [{ label: "Settings" }, { label: data.org.name }, { label: parentFound.item.label, route: parentRoute }, { label: route.startsWith("edit") ? "Edit" : "New" }] : [{ label: "Settings" }]; return (
setDrawerOpen(o => !o)} drawerOpen={drawerOpen} currentRoute={route} showHamburger={isSettingsRoute} showLinks={tweaks.showTopNav} openPalette={() => setPaletteOpen(true)}/>
{ setRoute(r); setDrawerOpen(false); }} drawerOpen={drawerOpen} onClose={() => setDrawerOpen(false)} collapsed={sidebarCollapsed} onToggleCollapsed={() => setSidebarCollapsed(v => !v)}/>
n.id === route)?.label}` : `Settings / ${found?.item.label || route}`}>
{crumbs.length > 1 && it.route && setRoute(it.route)}/>} {apiFallback && ( }> Development fixture fallback is active for {apiFallback.name}. Reason: {apiFallback.reason}. )} {screen}
{/* Modals */} { try { await window.api.call("addCredits", { id: data.org.id }, { amount: amt, reason: "Manual admin credit adjustment" }); setData(d => ({...d, credits: d.credits + amt, creditLedger: {...d.creditLedger, balance: d.creditLedger.balance + amt} })); window.__toast(`Requested ${amt} credit adjustment`); } catch (e) { window.__toast(e.message || "Credit API failed", "warn"); } }}/> { setData(d => ({...d, invoiceAddress: v})); window.__toast("Invoice address updated"); }}/> window.__toast("Payment method updated")}/> { setData(d => ({...d, taxId: val, taxIdType: type})); window.__toast("Tax ID saved"); }}/> { setData(d => ({...d, autoRechargeThreshold: threshold, autoRechargeAmount: amount, autoRecharge: true})); window.__toast("Thresholds saved"); }}/> {/* Edit modals */} { try { await window.api.call("updateMemberRole", { id: data.org.id, memberId: modalCtx.id }, { roleKey: role }); setData(d => ({...d, members: d.members.map(m => m.id === modalCtx.id ? {...m, role} : m)})); window.__toast(`${modalCtx.name} is now ${role}`); } catch (e) { window.__toast(e.message || "Member update failed", "warn"); } }}/> { try { await window.api.call("removeMember", { id: data.org.id, memberId: modalCtx.id }); setData(d => ({...d, members: d.members.filter(m => m.id !== modalCtx.id)})); window.__toast(`${modalCtx.name} removed`); } catch (e) { window.__toast(e.message || "Member removal failed", "warn"); } }}/> { let newKey = `cm-live-${Math.random().toString(36).slice(2,12)}${Math.random().toString(36).slice(2,12)}`; try { const result = await window.api.call("rotateApiKey", { id: data.org.id, keyId: modalCtx.id }, {}); newKey = result?.apiKey?.key || result?.key || newKey; } catch (e) { window.__toast(e.message || "Key rotation failed", "warn"); return; } setData(d => ({...d, apiKeys: d.apiKeys.map(k => k.id === modalCtx.id ? {...k, key: newKey, revealed: true, lastUsed: "—"} : k)})); setModalCtx({ ...modalCtx, key: newKey }); setTimeout(() => setModal("keyRotated"), 100); }}/> { try { await window.api.call("revokeApiKey", { id: data.org.id, keyId: modalCtx.id }); setData(d => ({...d, apiKeys: d.apiKeys.filter(k => k.id !== modalCtx.id)})); window.__toast(`Key "${modalCtx.name}" revoked`); } catch (e) { window.__toast(e.message || "Key revoke failed", "warn"); } }}/> {/* Toasts */} {/* Cookie consent banner (first visit) */} {/* Command palette (cmd/ctrl + K) */} setPaletteOpen(false)} data={data} cfg={cfg}/> {/* Dev Tweaks panel */} setTweak("theme", v)} options={[{label:"Light", value:"light"},{label:"Dark", value:"dark"}]} /> setTweak("accent", v)} options={["#1d4ed8","#0f766e","#7c3aed","#b45309","#be123c","#0b0d12"]} /> setTweak("density", v)} options={[{label:"Compact", value:"compact"},{label:"Comfortable", value:"comfy"},{label:"Airy", value:"airy"}]} /> setTweak("showTopNav", v)} /> setRoute("appearance")} /> setModal("addCredits")} /> setRoute("sign-in")} /> setRoute("sign-up")} /> setRoute("forgot-password")} /> setRoute("reset-password")} /> setRoute("verify-email")} /> setRoute("two-factor")} /> setRoute("sso")} />
); } // =================== TopNav =================== const TopNav = ({ data, setData, onMenuClick, drawerOpen, currentRoute, showHamburger, showLinks }) => { const cfg = window.APP_CONFIG; const [open, setOpen] = React.useState(false); return (
{showHamburger && ( )} e.preventDefault()}> {cfg.brand.showLogo && } {cfg.brand.name}{cfg.brand.suffix && {cfg.brand.suffix}} ))}
)}
{showLinks && ( )} {!showLinks &&
}
Search ⌘K}> e.preventDefault()}>
); }; // =================== Notifications dropdown =================== const NotificationsDropdown = () => { const [open, setOpen] = React.useState(false); const ref = React.useRef(); const [items, setItems] = React.useState([ { id: "n1", icon: IconCheck, title: "Job completed", body: "SOFA PRICELIST extraction finished", at: "12 min ago", unread: true }, { id: "n2", icon: IconUpload, title: "Package testing", body: "visual-page-crop build is running", at: "2 hr ago", unread: true }, { id: "n3", icon: IconCard, title: "Credits updated", body: "Growth plan balance refreshed", at: "Yesterday", unread: false }, { id: "n4", icon: IconChart, title: "Usage alert", body: "Sheetal Furniture used 80% of monthly runs", at: "Mar 28", unread: false }, ]); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("click", onDoc); return () => document.removeEventListener("click", onDoc); }, [open]); const unread = items.filter(i => i.unread).length; const markAllRead = () => setItems(items.map(i => ({ ...i, unread: false }))); return (
{open && (
e.stopPropagation()}>
Notifications {unread > 0 && }
{items.length === 0 ? } title="All caught up" description="No new notifications."/> : items.map(n => { const I = n.icon; return ( ); }) }
)}
); }; // =================== Avatar dropdown =================== const AvatarDropdown = ({ data }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("click", onDoc); return () => document.removeEventListener("click", onDoc); }, [open]); const go = (r) => { setOpen(false); window.__nav(r); }; return (
{open && (
e.stopPropagation()}>
{data.user.name}
{data.user.email}
e.preventDefault()}>Help & documentation
)}
); }; // =================== Command Palette (cmd+K) =================== const CommandPalette = ({ open, onClose, data, cfg }) => { const [q, setQ] = React.useState(""); const [active, setActive] = React.useState(0); const inputRef = React.useRef(); React.useEffect(() => { if (open) { setQ(""); setActive(0); setTimeout(() => inputRef.current?.focus(), 30); } }, [open]); // Build full searchable index const all = React.useMemo(() => { const items = []; cfg.topNav.forEach(n => items.push({ id: "nav-"+n.id, label: n.label, group: "Navigation", icon: IconChevR, action: () => window.__nav(n.id) })); cfg.sidebar.forEach(g => g.items.forEach(it => items.push({ id: "set-"+it.id, label: it.label, group: g.group, icon: ICON_MAP[it.icon] || IconFolder, action: () => window.__nav(it.id) }))); items.push({ id: "act-1", label: "Run script", group: "Actions", icon: IconPlus, action: () => window.__nav("run-script") }); items.push({ id: "act-2", label: "Open jobs", group: "Actions", icon: IconList, action: () => window.__nav("jobs") }); items.push({ id: "act-3", label: "Upload package", group: "Actions", icon: IconUpload, action: () => window.__nav("package-manager") }); items.push({ id: "act-4", label: "Invite member", group: "Actions", icon: IconUsers, action: () => window.__nav("invite-member") }); // Auth pages — discoverable via cmd+K too items.push({ id: "auth-1", label: "Sign in", group: "Auth pages", icon: IconLogout, action: () => window.__nav("sign-in") }); items.push({ id: "auth-2", label: "Sign up", group: "Auth pages", icon: IconPlus, action: () => window.__nav("sign-up") }); items.push({ id: "auth-3", label: "Forgot password", group: "Auth pages", icon: IconKey, action: () => window.__nav("forgot-password") }); items.push({ id: "auth-4", label: "Reset password", group: "Auth pages", icon: IconKey, action: () => window.__nav("reset-password") }); items.push({ id: "auth-5", label: "Verify email", group: "Auth pages", icon: IconShield, action: () => window.__nav("verify-email") }); items.push({ id: "auth-6", label: "Two-factor (2FA)",group: "Auth pages", icon: IconShield, action: () => window.__nav("two-factor") }); items.push({ id: "auth-7", label: "SSO sign-in", group: "Auth pages", icon: IconKey, action: () => window.__nav("sso") }); data.clients.forEach(c => items.push({ id: "c-"+c.id, label: c.name, sub: c.plan, group: "Clients", icon: IconBuilding, action: () => window.__nav("clients") })); data.members.forEach(m => items.push({ id: "m-"+m.id, label: m.name, sub: m.email, group: "Members", icon: IconUser, action: () => window.__nav("members") })); return items; }, [data, cfg]); const filtered = q.trim() === "" ? all.slice(0, 12) : all.filter(i => (i.label + " " + (i.sub||"")).toLowerCase().includes(q.toLowerCase())).slice(0, 16); React.useEffect(() => { setActive(0); }, [q]); React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowDown") { e.preventDefault(); setActive(a => Math.min(filtered.length - 1, a + 1)); } if (e.key === "ArrowUp") { e.preventDefault(); setActive(a => Math.max(0, a - 1)); } if (e.key === "Enter") { e.preventDefault(); const it = filtered[active]; if (it) { it.action(); onClose(); } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, filtered, active, onClose]); if (!open) return null; // Group by group label const grouped = filtered.reduce((acc, it) => { (acc[it.group] = acc[it.group] || []).push(it); return acc; }, {}); let cursor = 0; return (
e.stopPropagation()}>
setQ(e.target.value)} placeholder="Search pages, actions, clients, members..."/> esc
{filtered.length === 0 ? (
No results for "{q}"
) : Object.entries(grouped).map(([group, items]) => (
{group}
{items.map(it => { const idx = cursor++; const I = it.icon; return ( ); })}
))}
↑↓ navigate ↵ select esc close
); }; // =================== Sidebar =================== const Sidebar = ({ data, route, onNav, drawerOpen, onClose, collapsed, onToggleCollapsed }) => { const cfg = window.APP_CONFIG; const role = data.user.role || "Customer"; const groups = cfg.sidebar.filter(g => !g.roles || g.roles.includes(role)); return ( <> {drawerOpen &&
} ); }; // =================== Empty fallback =================== const EmptyScreen = ({ route }) => (
{route}
This page isn't part of the prototype scope.
); // =================== App-wide styles =================== const AppStyles = () => ( ); // Mount ReactDOM.createRoot(document.getElementById("app")).render();