Spaces:
Running
Running
| "use client"; | |
| import React from "react"; | |
| import Link from "next/link"; | |
| import { usePathname } from "next/navigation"; | |
| import { AdminPermission } from "@micprotocol/shared-types"; | |
| import { trpc } from "@/lib/trpc"; | |
| import { | |
| LayoutDashboard, | |
| Server, | |
| Radio, | |
| Layers, | |
| BrainCircuit, | |
| Plug, | |
| Webhook, | |
| Activity, | |
| Gauge, | |
| TerminalSquare, | |
| Bug, | |
| Building2, | |
| ShieldCheck, | |
| ShieldAlert, | |
| Users, | |
| MessageSquare, | |
| FlaskConical, | |
| Microscope, | |
| ChevronDown, | |
| BarChart, | |
| FileText, | |
| Sliders, | |
| } from "lucide-react"; | |
| interface NavItem { | |
| href: string; | |
| label: string; | |
| icon: React.ComponentType<{ className?: string }>; | |
| badge?: string; | |
| /** Platform permission required to see this entry (absent = always visible). */ | |
| permission?: AdminPermission; | |
| children?: NavItem[]; | |
| } | |
| const primaryNav: NavItem[] = [ | |
| { href: "/", label: "Overview", icon: LayoutDashboard, permission: AdminPermission.ANALYTICS_READ }, | |
| { href: "/infrastructure", label: "Infrastructure", icon: Server, permission: AdminPermission.OPS_READ }, | |
| { href: "/realtime", label: "Realtime Engine", icon: Radio, permission: AdminPermission.OPS_READ }, | |
| { href: "/queues", label: "Queues", icon: Layers, permission: AdminPermission.OPS_READ }, | |
| { | |
| href: "/ai-engines", | |
| label: "AI Engines", | |
| icon: BrainCircuit, | |
| permission: AdminPermission.OPS_READ, | |
| children: [ | |
| { href: "/ai-engines", label: "Overview", icon: Microscope, permission: AdminPermission.OPS_READ }, | |
| { href: "/ai-engines/clip-scorer", label: "CLIP Scorer", icon: FlaskConical, permission: AdminPermission.OPS_READ }, | |
| ], | |
| }, | |
| { | |
| href: "/integrations", | |
| label: "Integrations", | |
| icon: Plug, | |
| permission: AdminPermission.SETTINGS_READ, | |
| children: [ | |
| { href: "/integrations", label: "Services", icon: Plug, permission: AdminPermission.SETTINGS_READ }, | |
| { href: "/integrations/credentials", label: "Credentials", icon: ShieldCheck, permission: AdminPermission.SETTINGS_READ }, | |
| ], | |
| }, | |
| { href: "/webhooks", label: "Webhooks", icon: Webhook, permission: AdminPermission.OPS_READ }, | |
| { | |
| href: "/observability", | |
| label: "Observability", | |
| icon: Activity, | |
| permission: AdminPermission.OPS_READ, | |
| children: [ | |
| { href: "/observability/traces", label: "Traces", icon: Activity, permission: AdminPermission.OPS_READ }, | |
| { href: "/observability/metrics", label: "Metrics", icon: Gauge, permission: AdminPermission.OPS_READ }, | |
| { href: "/observability/logs", label: "Live Logs", icon: TerminalSquare, permission: AdminPermission.OPS_READ }, | |
| { href: "/observability/errors", label: "Errors", icon: Bug, permission: AdminPermission.OPS_READ }, | |
| ], | |
| }, | |
| { href: "/tenants", label: "Tenants", icon: Building2, permission: AdminPermission.WORKSPACES_READ }, | |
| { href: "/verification", label: "Verification", icon: ShieldCheck, permission: AdminPermission.MODERATION_READ }, | |
| { | |
| href: "/crm", | |
| label: "CRM", | |
| icon: Users, | |
| permission: AdminPermission.USERS_READ, | |
| children: [ | |
| { href: "/crm/users", label: "Users", icon: Users, permission: AdminPermission.USERS_READ }, | |
| { href: "/crm/guests", label: "Guests", icon: Users, permission: AdminPermission.WORKSPACES_READ }, | |
| { href: "/crm/inquiries", label: "Inquiries", icon: MessageSquare, permission: AdminPermission.SUPPORT_READ }, | |
| ], | |
| }, | |
| { | |
| href: "/users", | |
| label: "Platform Users", | |
| icon: Users, | |
| permission: AdminPermission.USERS_READ, | |
| }, | |
| { | |
| href: "/workspaces", | |
| label: "Platform Workspaces", | |
| icon: Building2, | |
| permission: AdminPermission.WORKSPACES_READ, | |
| }, | |
| { href: "/settings", label: "Settings & Flags", icon: Sliders, permission: AdminPermission.SETTINGS_READ }, | |
| { href: "/moderation", label: "Moderation", icon: ShieldAlert, permission: AdminPermission.MODERATION_READ }, | |
| { href: "/supervision", label: "Supervision", icon: Gauge, permission: AdminPermission.SUPERVISION_READ }, | |
| { href: "/synthetic-agents", label: "Synthetic Agents", icon: FlaskConical, permission: AdminPermission.OPS_READ }, | |
| { href: "/audit-logs", label: "Audit Logs", icon: FileText, permission: AdminPermission.AUDIT_READ }, | |
| { href: "/security-policy", label: "Security Policy", icon: ShieldAlert, permission: AdminPermission.SECURITY_POLICY_READ }, | |
| { href: "/ratings", label: "Ratings", icon: BarChart, permission: AdminPermission.MODERATION_READ }, | |
| { href: "/surveys", label: "Surveys", icon: FileText, permission: AdminPermission.ANNOUNCEMENTS_READ }, | |
| { href: "/support", label: "Support", icon: MessageSquare, permission: AdminPermission.SUPPORT_READ }, | |
| ]; | |
| function filterNav(items: NavItem[], has: (p: AdminPermission) => boolean): NavItem[] { | |
| const out: NavItem[] = []; | |
| for (const item of items) { | |
| const ownOk = !item.permission || has(item.permission); | |
| if (item.children) { | |
| const children = filterNav(item.children, has); | |
| if (children.length > 0) { | |
| out.push({ ...item, children }); | |
| } else if (ownOk) { | |
| const { children: _dropped, ...rest } = item; | |
| out.push(rest); | |
| } | |
| } else if (ownOk) { | |
| out.push(item); | |
| } | |
| } | |
| return out; | |
| } | |
| function NavItemLink({ item, depth = 0 }: { item: NavItem; depth?: number }) { | |
| const pathname = usePathname(); | |
| const [open, setOpen] = React.useState( | |
| () => (item.children?.some((c) => pathname.startsWith(c.href)) ?? false), | |
| ); | |
| const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href)); | |
| if (item.children) { | |
| const hasActiveChild = item.children.some((c) => pathname.startsWith(c.href)); | |
| return ( | |
| <div className={hasActiveChild || open ? "" : ""}> | |
| <button | |
| onClick={() => setOpen((o) => !o)} | |
| className={`group flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${ | |
| hasActiveChild | |
| ? "bg-[var(--bg-tertiary)] text-[var(--color-primary)]" | |
| : "text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]" | |
| }`} | |
| > | |
| <item.icon className="size-4 shrink-0" /> | |
| <span className="flex-1 text-left">{item.label}</span> | |
| <ChevronDown className={`size-4 transition-transform ${open ? "rotate-180" : ""}`} /> | |
| </button> | |
| {open && ( | |
| <div className="mt-1 space-y-1 border-l border-[var(--border-color)] pl-3 ml-3"> | |
| {item.children.map((child) => ( | |
| <NavItemLink key={child.href} item={child} depth={depth + 1} /> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <Link | |
| href={item.href} | |
| className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${ | |
| active | |
| ? "bg-[var(--bg-tertiary)] text-[var(--color-primary)]" | |
| : "text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]" | |
| }`} | |
| > | |
| <item.icon className="size-4 shrink-0" /> | |
| <span className="flex-1">{item.label}</span> | |
| </Link> | |
| ); | |
| } | |
| export function AdminSidebar() { | |
| const meQuery = trpc.admin.me.useQuery(undefined, { retry: false }); | |
| const permissions = meQuery.data?.permissions; | |
| const permsSet = React.useMemo( | |
| () => (permissions ? new Set<string>(permissions) : null), | |
| [permissions], | |
| ); | |
| const nav = React.useMemo( | |
| () => | |
| permsSet | |
| ? filterNav(primaryNav, (p) => permsSet.has(p)) | |
| : primaryNav, | |
| [permsSet], | |
| ); | |
| return ( | |
| <aside className="flex h-full w-60 shrink-0 flex-col border-r border-[var(--border-color)] bg-[var(--bg-secondary)]"> | |
| <div className="flex h-16 items-center gap-2.5 border-b border-[var(--border-color)] px-5"> | |
| <img src="/favicon.svg" alt="MicProtocol logo" className="size-7" /> | |
| <div> | |
| <div className="font-display text-sm font-semibold text-[var(--text-primary)]">MicProtocol</div> | |
| <div className="text-[11px] uppercase tracking-widest text-[var(--color-primary)]">Admin</div> | |
| </div> | |
| </div> | |
| <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4"> | |
| {nav.map((item) => ( | |
| <NavItemLink key={item.href} item={item} /> | |
| ))} | |
| {permsSet && nav.length === 0 && ( | |
| <p className="px-3 py-2 text-xs text-[var(--text-tertiary)]"> | |
| Your role has no console permissions assigned. Contact a SUPER_ADMIN. | |
| </p> | |
| )} | |
| </nav> | |
| <div className="border-t border-[var(--border-color)] p-4 text-xs text-[var(--text-tertiary)]"> | |
| MicProtocol Admin Panel | |
| <br /> | |
| v0.1.0 | |
| {meQuery.data?.role && ( | |
| <> | |
| <br /> | |
| Role: {meQuery.data.role} | |
| </> | |
| )} | |
| </div> | |
| </aside> | |
| ); | |
| } | |