// PortalTable Dashboard — app shell: sidebar, topbar, command palette (⌘K), // new-project dialog, routing between views, toast host, mount. const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React; const NAV = [ { group: "WORKSPACE", items: [ { id: "overview", label: "Overview", icon: "gauge" }, { id: "clients", label: "Clients", icon: "users", badge: 10 }, { id: "projects", label: "Projects", icon: "grid", badge: 7 }, { id: "approvals", label: "Approvals", icon: "checklist", badge: 4, badgeTone: "amber" }, ] }, { group: "DELIVERY", items: [ { id: "files", label: "Files", icon: "file" }, { id: "invoices", label: "Invoices", icon: "card", badge: 1, badgeTone: "red" }, { id: "messages", label: "Messages", icon: "message", badge: 2, badgeTone: "accent" }, ] }, { group: "PORTAL", items: [ { id: "branding", label: "Portal branding", icon: "palette" }, { id: "team", label: "Team", icon: "users" }, { id: "settings", label: "Settings", icon: "shield" }, ] }, ]; const VIEW_MAP = { overview: "OverviewView", clients: "ClientsView", projects: "ProjectsView", approvals: "ApprovalsView", files: "FilesView", invoices: "InvoicesView", messages: "MessagesView", branding: "BrandingView", team: "TeamView", settings: "SettingsView", }; const TITLES = { overview: "Overview", clients: "Clients", projects: "Projects", approvals: "Approvals", files: "Files", invoices: "Invoices", messages: "Messages", branding: "Portal branding", team: "Team", settings: "Settings" }; /* -------------------------------------------------------------------------- */ /* Sidebar */ /* -------------------------------------------------------------------------- */ function Sidebar({ route, navigate, open, onClose }) { return ( ); } function NavItem({ item, active, onClick }) { const [h, setH] = useStateA(false); return ( ); } /* -------------------------------------------------------------------------- */ /* Topbar */ /* -------------------------------------------------------------------------- */ function Topbar({ route, onOpenCmd, onOpenNav }) { return (
Studio Northstar {TITLES[route]}
} items={[ { label: "NOTIFICATIONS", header: true }, { label: "Devin Park commented", icon: "message", onClick: () => window.pdToast("Opening message…") }, { label: "INV-2039 is overdue", icon: "card", tone: "danger", onClick: () => window.pdToast("Opening invoice…") }, { label: "Lena approved the calendar", icon: "check", onClick: () => window.pdToast("Opening approval…") }, { separator: true }, { label: "Mark all as read", icon: "checklist", onClick: () => window.pdToast("All caught up") }, ]} /> ( )} items={[ { label: "Alex Rivera", header: true }, { label: "Profile", icon: "users", onClick: () => window.pdToast("Profile") }, { label: "Workspace settings", icon: "shield", onClick: () => window.pdNavigate && window.pdNavigate("settings") }, { label: "Theme", icon: "palette", kbd: "Light", onClick: () => {} }, { separator: true }, { label: "Sign out", icon: "external", tone: "danger", onClick: () => window.pdToast({ tone: "info", title: "Signed out" }) }, ]} />
); } /* -------------------------------------------------------------------------- */ /* Command palette (⌘K) */ /* -------------------------------------------------------------------------- */ function CommandPalette({ open, onClose, navigate }) { const [q, setQ] = useStateA(""); const [sel, setSel] = useStateA(0); const inputRef = useRefA(null); useEffectA(() => { if (open) { setQ(""); setSel(0); setTimeout(() => inputRef.current && inputRef.current.focus(), 40); } }, [open]); const commands = [ ...Object.keys(TITLES).map((id) => ({ id, group: "Go to", label: TITLES[id], icon: NAV.flatMap((s) => s.items).find((i) => i.id === id).icon, action: () => navigate(id) })), { id: "new_project", group: "Actions", label: "New project", icon: "plus", action: () => window.pdNewProject() }, { id: "invite_client", group: "Actions", label: "Invite client", icon: "users", action: () => { navigate("clients"); window.pdToast({ tone: "success", title: "Invite sent" }); } }, { id: "new_invoice", group: "Actions", label: "Create invoice", icon: "card", action: () => { navigate("invoices"); window.pdToast({ tone: "success", title: "Draft created" }); } }, ]; const filtered = q ? commands.filter((c) => c.label.toLowerCase().includes(q.toLowerCase())) : commands; const groups = filtered.reduce((acc, c) => { (acc[c.group] = acc[c.group] || []).push(c); return acc; }, {}); const flat = filtered; useEffectA(() => { if (!open) return; const onKey = (e) => { if (e.key === "ArrowDown") { e.preventDefault(); setSel((s) => Math.min(s + 1, flat.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setSel((s) => Math.max(s - 1, 0)); } else if (e.key === "Enter") { e.preventDefault(); if (flat[sel]) { flat[sel].action(); onClose(); } } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, flat, sel, onClose]); if (!open) return null; let idx = -1; return (
e.stopPropagation()} style={{ position: "fixed", top: "16vh", left: "50%", transform: "translateX(-50%)", width: "92%", maxWidth: 560 }}>
{ setQ(e.target.value); setSel(0); }} placeholder="Search clients, projects, actions…" style={{ flex: 1, border: 0, outline: 0, background: "transparent", fontSize: 15, color: "var(--fg-1)", fontFamily: "inherit" }} /> Esc
{flat.length === 0 &&
No results for "{q}"
} {Object.keys(groups).map((g) => (
{g}
{groups[g].map((c) => { idx++; const active = idx === sel; const myIdx = idx; return ( ); })}
))}
); } /* -------------------------------------------------------------------------- */ /* New project dialog */ /* -------------------------------------------------------------------------- */ function NewProjectDialog({ open, onClose }) { const [name, setName] = useStateA(""); const [client, setClient] = useStateA(PD_CLIENTS[0].name); useEffectA(() => { if (open) { setName(""); setClient(PD_CLIENTS[0].name); } }, [open]); function create() { if (!name.trim()) { window.pdToast({ tone: "error", title: "Name required" }); return; } window.pdToast({ tone: "success", title: "Project created", body: `${name} · ${client}` }); onClose(); } return ( }>
Tasks sync to the client's workspace automatically.
); } /* -------------------------------------------------------------------------- */ /* App */ /* -------------------------------------------------------------------------- */ function DashApp() { const [route, setRoute] = useStateA(() => { const h = location.hash.replace("#", ""); return VIEW_MAP[h] ? h : "overview"; }); const [cmdOpen, setCmdOpen] = useStateA(false); const [npOpen, setNpOpen] = useStateA(false); const [navOpen, setNavOpen] = useStateA(false); const scrollRef = useRefA(null); function navigate(r) { setRoute(r); location.hash = r; setNavOpen(false); window.scrollTo(0, 0); } useEffectA(() => { window.pdNavigate = navigate; window.pdNewProject = () => setNpOpen(true); }, []); useEffectA(() => { const onHash = () => { const h = location.hash.replace("#", ""); if (VIEW_MAP[h]) setRoute(h); }; const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCmdOpen((o) => !o); } else if (e.key === "Escape") { setNavOpen(false); } }; window.addEventListener("hashchange", onHash); window.addEventListener("keydown", onKey); return () => { window.removeEventListener("hashchange", onHash); window.removeEventListener("keydown", onKey); }; }, []); const View = window[VIEW_MAP[route]]; return (
setNavOpen(false)} /> {navOpen &&
setNavOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(16,18,22,0.42)", backdropFilter: "blur(2px)", zIndex: 70, animation: "pdFade 160ms var(--ease-out)" }} />}
setCmdOpen(true)} onOpenNav={() => setNavOpen(true)} />
{View ? : null}
setCmdOpen(false)} navigate={navigate} /> setNpOpen(false)} />
); } ReactDOM.createRoot(document.getElementById("pd-dash-root")).render();