// Admin dashboard — super_admin only // Full-featured: Dashboard, Customers, Users, Audit Log, Settings const { useState: useAdm, useEffect: useAdmEffect, useCallback: useAdmCb, useMemo: useAdmMemo, useRef: useAdmRef, } = React; // ─── helpers ───────────────────────────────────────────────────────────────── function fmtDate(iso) { if (!iso) return "—"; return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); } function fmtRelative(iso) { if (!iso) return "Never"; const mins = Math.floor((Date.now() - new Date(iso)) / 60000); if (mins < 2) return "Just now"; if (mins < 60) return `${mins}m ago`; if (mins < 1440) return `${Math.floor(mins / 60)}h ago`; if (mins < 10080) return `${Math.floor(mins / 1440)}d ago`; return fmtDate(iso); } function fmtMRR(cents) { if (!cents) return "$0"; return "$" + (cents / 100).toLocaleString("en-US", { maximumFractionDigits: 0 }); } const STATUS_STYLE = { active: { bg: "rgba(110,231,183,0.12)", color: "#10b981", label: "Active" }, trial: { bg: "rgba(251,191,36,0.12)", color: "#d97706", label: "Trial" }, churned: { bg: "rgba(248,113,113,0.12)", color: "#ef4444", label: "Churned" }, suspended:{ bg: "rgba(248,113,113,0.12)",color: "#ef4444", label: "Suspended"}, }; function StatusBadge({ status }) { const s = STATUS_STYLE[status] || STATUS_STYLE.trial; return {s.label}; } const BIZ_MODELS = [ { v: "services", l: "Professional Services", icon: "💼", desc: "Consulting, agencies, law, accounting" }, { v: "saas", l: "SaaS / Software", icon: "💻", desc: "Subscription software products" }, { v: "inventory", l: "Product / Inventory", icon: "📦", desc: "Physical goods, wholesale, distribution" }, { v: "retail", l: "Retail / Stores", icon: "🏪", desc: "Multi-location or e-commerce retail" }, { v: "manufacturing", l: "Manufacturing", icon: "🏭", desc: "Production, fabrication, processing" }, { v: "mixed", l: "Mixed / Other", icon: "🔀", desc: "Multiple revenue streams" }, ]; const COMPANY_TYPES = [ { v: "llc", l: "LLC" }, { v: "s_corp", l: "S-Corp" }, { v: "c_corp", l: "C-Corp" }, { v: "sole_prop", l: "Sole Proprietorship" }, { v: "partnership",l: "Partnership" }, { v: "nonprofit", l: "Non-Profit" }, ]; const ROLES = ["Owner", "Admin", "Finance", "Viewer"]; const PLAN_OPTIONS = ["trial","starter","growth","pro","enterprise"]; // ─── Notification toast helper (shared) ────────────────────────────────────── function AdminToast({ msg, type }) { const bg = type === "success" ? "#10b981" : type === "error" ? "#ef4444" : "#3b82f6"; return (
{msg}
); } function useAdminToast() { const [toast, setToast] = useAdm(null); const show = (msg, type = "success") => { setToast({ msg, type }); setTimeout(() => setToast(null), 3500); }; return [toast, show]; } const AUDIT_ICONS = { "company.created": { icon: "✦", color: "#10b981" }, "company.updated": { icon: "✎", color: "#3b82f6" }, "company.suspended": { icon: "⏸", color: "#d97706" }, "company.deleted": { icon: "✕", color: "#ef4444" }, "user.invited": { icon: "✉", color: "#3b82f6" }, "user.role_changed": { icon: "⇄", color: "#6366f1" }, "user.removed": { icon: "−", color: "#ef4444" }, "user.invite_resent": { icon: "↺", color: "#3b82f6" }, "user.password_reset":{ icon: "⚿", color: "#d97706" }, }; // ─── Edge Function caller ───────────────────────────────────────────────────── async function callAdmin(path, method, body) { const db = window.supabaseClient; const { data: { session } } = await db.auth.getSession(); const token = session?.access_token; const base = `${window.SUPABASE_URL}/functions/v1/admin-actions`; const res = await fetch(`${base}/${path}`, { method, headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}`, "Apikey": window.SUPABASE_ANON_KEY, }, body: body ? JSON.stringify(body) : undefined, }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Request failed"); return data; } // ─── Shared form components ─────────────────────────────────────────────────── function Field({ label, children, hint, half }) { return (
{children} {hint &&
{hint}
}
); } function AInput({ value, onChange, ...rest }) { return onChange(e.target.value)} {...rest} />; } function ASelect({ value, onChange, children, ...rest }) { return ( ); } // ─── Confirm dialog ─────────────────────────────────────────────────────────── function ConfirmDialog({ message, confirmLabel, danger, onConfirm, onCancel }) { return (
e.stopPropagation()}>
Confirm action

{message}

); } // ─── Sidebar nav ────────────────────────────────────────────────────────────── const NAV_GROUPS = [ { label: "Platform", items: [ { id: "dashboard", label: "Dashboard", sub: null, icon: ( )}, { id: "analytics", label: "Analytics", sub: null, icon: ( )}, { id: "billing", label: "Billing & Revenue", sub: null, icon: ( )}, ], }, { label: "Customers", items: [ { id: "customers", label: "All Customers", sub: null, icon: ( )}, { id: "users", label: "User Management", sub: null, icon: ( )}, { id: "onboard", label: "Onboard Customer", sub: "Invite & setup", icon: ( )}, ], }, { label: "Platform Config", items: [ { id: "pricing", label: "Pricing Plans", sub: "Plans & packaging", icon: ( )}, { id: "documents", label: "Documents", sub: "Contracts & manuals", icon: ( )}, { id: "integrations", label: "Integrations & APIs", sub: "API credentials", icon: ( )}, { id: "audit", label: "Audit Log", sub: null, icon: ( )}, { id: "settings", label: "Settings", sub: null, icon: ( )}, ], }, ]; // ─── Admin Sidebar ──────────────────────────────────────────────────────────── function AdminSidebar({ activeSection, onNav, adminEmail, onLogout, companies, onViewCompany, onQuickInvite }) { const [viewAsOpen, setViewAsOpen] = useAdm(false); const viewAsRef = useAdmRef(null); const initials = adminEmail ? adminEmail.slice(0, 2).toUpperCase() : "SA"; useAdmEffect(() => { if (!viewAsOpen) return; const h = (e) => { if (viewAsRef.current && !viewAsRef.current.contains(e.target)) setViewAsOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [viewAsOpen]); return (
Perdura
Admin Console
{companies.length > 0 && (
{viewAsOpen && (
Switch to customer
{companies.map(c => ( ))}
)}
)}
{initials}
{adminEmail || "Super Admin"}
Super Admin
); } // ─── KPI card ───────────────────────────────────────────────────────────────── function KpiCard({ label, value, sub, accent, trend, icon }) { return (
{label}
{icon &&
{icon}
}
{value}
{trend !== undefined && ( = 0 ? "#10b981" : "#ef4444" }}> {trend >= 0 ? "+" : ""}{trend}% )} {sub &&
{sub}
}
); } // ─── Dashboard section ──────────────────────────────────────────────────────── function DashboardSection({ companies, allUsers }) { const mrr = companies.reduce((s, c) => s + (c.mrr || 0), 0); const active = companies.filter(c => c.status === "active").length; const trial = companies.filter(c => c.status === "trial").length; const churned = companies.filter(c => c.status === "churned").length; const totalUsers = allUsers.length; const activeUsers = allUsers.filter(u => u.last_sign_in_at && (Date.now() - new Date(u.last_sign_in_at)) < 7 * 86400000).length; const pendingUsers = allUsers.filter(u => u.cu_status === "Pending").length; // Recent signups (last 30 days) const recentCompanies = [...companies] .filter(c => c.created_at && (Date.now() - new Date(c.created_at)) < 30 * 86400000) .sort((a, b) => new Date(b.created_at) - new Date(a.created_at)) .slice(0, 5); // Recently active users const recentUsers = [...allUsers] .filter(u => u.last_sign_in_at) .sort((a, b) => new Date(b.last_sign_in_at) - new Date(a.last_sign_in_at)) .slice(0, 8); return (

Platform Overview

Updated just now
} /> } /> 0.6 ? "#10b981" : "#d97706"} sub={`${churned} churned`} icon={} /> } />
{/* Recent customers */}
New Customers (30 days)
{recentCompanies.length}
{recentCompanies.length === 0 ? (
No new customers this month
) : (
{recentCompanies.map(c => (
{(c.name||"?").slice(0,2).toUpperCase()}
{c.name}
{c.subdomain} · {c.plan || "trial"}
{fmtRelative(c.created_at)}
))}
)}
{/* Recent logins */}
Recent User Logins
{activeUsers} this week
{recentUsers.length === 0 ? (
No logins recorded
) : (
{recentUsers.map(u => (
{(u.email||"?").slice(0,2).toUpperCase()}
{u.email}
{u.company_name || "—"} · {u.role || "—"}
{fmtRelative(u.last_sign_in_at)}
))}
)}
{/* Plan breakdown */}
Customer Status Breakdown
{[ { label: "Active", count: active, color: "#10b981", pct: active / Math.max(companies.length, 1) }, { label: "Trial", count: trial, color: "#d97706", pct: trial / Math.max(companies.length, 1) }, { label: "Churned", count: churned, color: "#ef4444", pct: churned / Math.max(companies.length, 1) }, ].map(row => (
{row.count}
{row.label}
))}
{companies.length}
Total
); } // ─── New Customer Wizard ────────────────────────────────────────────────────── function NewCustomerWizard({ onClose, onCreated }) { const [step, setStep] = useAdm(0); const [loading, setLoading] = useAdm(false); const [error, setError] = useAdm(""); const [bizModel, setBizModel] = useAdm(""); const [name, setName] = useAdm(""); const [subdomain, setSubdomain] = useAdm(""); const [companyType, setCompanyType] = useAdm(""); const [industry, setIndustry] = useAdm(""); const [phone, setPhone] = useAdm(""); const [website, setWebsite] = useAdm(""); const [plan, setPlan] = useAdm("trial"); const [timezone, setTimezone] = useAdm(""); const [revBand, setRevBand] = useAdm(""); const [empCount, setEmpCount] = useAdm(""); const [notes, setNotes] = useAdm(""); const [ownerName, setOwnerName] = useAdm(""); const [ownerEmail, setOwnerEmail] = useAdm(""); useAdmEffect(() => { if (name) { setSubdomain(name.toLowerCase().replace(/[^a-z0-9]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "")); } }, [name]); async function handleSubmit() { setError(""); setLoading(true); try { const result = await callAdmin("invite", "POST", { companyName: name, subdomain, ownerName, ownerEmail, businessModel: bizModel, companyType, industry, plan, phone, website, timezone, notes, revenue_band: revBand, employee_count: empCount ? parseInt(empCount) : null, }); onCreated(result.company); onClose(); } catch (err) { setError(err.message); setLoading(false); } } const steps = ["Business type", "Company profile", "Admin user", "Confirm"]; return (
e.stopPropagation()}>
New customer
Step {step + 1} of {steps.length} — {steps[step]}
{steps.map((s, i) => (
{i < step ? "✓" : i + 1}
{s}
))}
{error &&
{error}
} {step === 0 && (

Select the primary business model for this customer.

{BIZ_MODELS.map(b => ( ))}
)} {step === 1 && (
https:// setSubdomain(e.target.value.toLowerCase().replace(/\s/g, "-"))} placeholder="acme" /> .cfodash.app
{COMPANY_TYPES.map(t => )} {["Under $500K","$500K – $1M","$1M – $3M","$3M – $8M","$8M – $15M","$15M – $30M","$30M+"].map(r => )} {PLAN_OPTIONS.map(p => )} {["America/New_York","America/Chicago","America/Denver","America/Los_Angeles","Europe/London","Europe/Paris","Asia/Dubai","Asia/Singapore","Australia/Sydney"].map(tz => )}