// admin-shell.jsx — Layout + shared primitives
const { useState } = React;
// ── Icon system — pure SVG, no external deps ────────────────
const ICON_PATHS = {
LayoutDashboard: '',
Users: '',
ToggleLeft: '',
BarChart3: '',
CreditCard: '',
Headphones: '',
LogOut: '',
Zap: '',
Bell: '',
ChevronRight: '',
ArrowUpRight: '',
ArrowDownRight: '',
Search: '',
X: '',
Save: '',
TrendingDown: '',
Settings: '',
Moon: '',
Sun: '',
Mail: '',
Plus: '',
Send: '',
Eye: '',
Trash2: '',
Inbox: '',
TrendingUp: '',
CheckCircle: '',
Clock: '',
Calendar: '',
Loader: '',
Image: '',
ShieldAlert: '',
GitBranch: '',
GripVertical: '',
Workflow: '',
Hourglass: '',
EyeOff: '',
ChevronDown: '',
Power: '',
Sparkles: '',
Rocket: '',
FileText: '',
};
function Icon({ name, size = 16, color = 'currentColor', fill = 'none' }) {
const paths = ICON_PATHS[name] || '';
return React.createElement('svg', {
width: size, height: size, viewBox: '0 0 24 24',
fill, stroke: color, strokeWidth: 2,
strokeLinecap: 'round', strokeLinejoin: 'round',
style: { flexShrink: 0, display: 'block' },
dangerouslySetInnerHTML: { __html: paths },
});
}
// ── Navigation ───────────────────────────────────────────────
const NAV = [
{ id: 'dashboard', label: 'Overview', icon: 'LayoutDashboard' },
{ id: 'users', label: 'Users', icon: 'Users' },
{ id: 'features', label: 'Features', icon: 'ToggleLeft' },
{ id: 'costs', label: 'Costs & P&L', icon: 'BarChart3' },
{ id: 'billing', label: 'Billing', icon: 'CreditCard' },
{ id: 'support', label: 'Support', icon: 'Headphones' },
{ id: 'newsletter', label: 'Newsletter', icon: 'Mail' },
{ id: 'blog-images', label: 'Blog Image Generator', icon: 'Image' },
{ id: 'mission-control', label: 'Mission Control', icon: 'Rocket' },
{ id: 'settings', label: 'Slack Notifications', icon: 'Settings' },
];
function Sidebar({ page, setPage }) {
const { admin } = window.MOCK;
return (
);
}
function MobileHeader({ page }) {
const cur = NAV.find(n=>n.id===page)||NAV[0];
return (
);
}
function MobileNav({ page, setPage }) {
return (
{NAV.slice(0,5).map(({ id, label, icon }) => (
))}
);
}
function AdminShell({ page, setPage, children }) {
return (
{NAV.find(n=>n.id===page)?.label}
{children}
);
}
// ── Shared primitives ────────────────────────────────────────
function PlanBadge({ plan }) {
const cfg = { scale:{c:'#10B981',l:'Scale'}, growth:{c:'#3B82F6',l:'Growth'}, lite:{c:'#F59E0B',l:'Lite'}, trial:{c:'#9CA3AF',l:'Trial'} };
const { c, l } = cfg[plan] || cfg.trial;
return {l};
}
function StatusDot({ status }) {
const cfg = { active:{c:'#10B981',l:'Active'}, trialing:{c:'#F59E0B',l:'Trial'}, canceled:{c:'#F43F5E',l:'Canceled'}, past_due:{c:'#F97316',l:'Past Due'} };
const { c, l } = cfg[status] || { c:'#9CA3AF', l:status };
return {l};
}
function Btn({ children, variant='secondary', onClick, style, disabled }) {
const base = { display:'inline-flex', alignItems:'center', gap:6, padding:'7px 14px', borderRadius:8, fontFamily:'inherit', fontSize:12, fontWeight:700, cursor:disabled?'not-allowed':'pointer', border:'none', transition:'all 0.12s', opacity:disabled?0.5:1, ...style };
const v = { primary:{background:'#F97316',color:'#fff'}, secondary:{background:'#F3F4F6',color:'#1A2B3B',border:'1px solid #E5E7EB'}, ghost:{background:'transparent',color:'#6B7280'}, danger:{background:'#FFF1F2',color:'#F43F5E',border:'1px solid #FECDD3'} };
return ;
}
function Tabs({ options, value, onChange }) {
return (
{options.map(o => {
const v = o.value||o; const l = o.label||o;
return ;
})}
);
}
function Toggle({ on, onClick }) {
return (
);
}
function BarChart({ data, height=110 }) {
const maxMrr = Math.max(...data.map(d=>d.mrr));
const n = data.length; const W=300, H=height;
const barW = (W/n)*0.55; const gap = W/n;
const bars = data.map((d,i) => {
const mH=((d.mrr/maxMrr)*(H-20)); const cH=((d.costs/maxMrr)*(H-20));
const x=i*gap+(gap-barW)/2;
return `${d.month}`;
}).join('');
return React.createElement('svg', { width:'100%', viewBox:`0 0 ${W} ${H}`, preserveAspectRatio:'none', dangerouslySetInnerHTML:{ __html: bars }});
}
Object.assign(window, { AdminShell, PlanBadge, StatusDot, Btn, Tabs, Toggle, BarChart, Icon, NAV });