// Super admin screens (desktop, browser frame) // 1. Super Dashboard — system-wide overview + activity logs // 2. Branding / Tema / Templates — visual theming const { useState: useSp, useMemo: useMp } = React; // ═══════════════════════════════════════════════════════ // SHELL // ═══════════════════════════════════════════════════════ function SuperShell({ activeScreen, navigate, theme, children, pageTitle }) { const menu = [ { id: "super-dashboard", name: "Dashboard", icon: "shield_person" }, { id: "super-branding", name: "Branding & Tema", icon: "palette" }, { id: "super-templates", name: "Template Pesan", icon: "chat" }, { id: "super-admins", name: "Admin Users", icon: "group" }, { id: "super-logs", name: "Activity Logs", icon: "manage_history" }, { id: "super-api", name: "API Token", icon: "key" }, ]; return (

{pageTitle}

Super Administrator
{children}
); } // ═══════════════════════════════════════════════════════ // SUPER DASHBOARD // ═══════════════════════════════════════════════════════ function SuperDashboard({ theme }) { const stats = [ { label: "Total Orders", value: "1,248", sub: "+18 minggu ini", icon: "inventory_2" }, { label: "Admin Aktif", value: "4", sub: "2 superadmin", icon: "group" }, { label: "Notif WA Hari Ini", value: "127", sub: "5 gagal kirim", icon: "chat" }, { label: "Uptime", value: "99.9%", sub: "30 hari terakhir", icon: "verified" }, ]; return (
{stats.map((s) => (

{s.label}

{s.value}

{s.sub}

))}
{/* Activity logs */}

Activity Logs Terbaru

{ACTIVITY_LOGS.map((log) => { const typeColors = { update: { ic: "edit", c: "#3b82f6" }, create: { ic: "add_circle", c: theme.primary }, config: { ic: "settings", c: "#a855f7" }, done: { ic: "check_circle", c: "#10b981" }, }[log.type]; return (

{log.action} {log.who}

{log.target}

{log.time}

); })}
{/* WA Notif logs (right) */}

Notifikasi WhatsApp 24 Jam

122

Terkirim

5

Gagal

Gagal Kirim — Perlu Retry

{[ { order: "ORD-260525-007", reason: "Nomor tidak valid", time: "13:22" }, { order: "ORD-260524-002", reason: "Quota harian terlampaui", time: "11:08" }, { order: "ORD-260524-008", reason: "Timeout API gateway", time: "09:45" }, ].map((f) => (

{f.order}

{f.reason} · {f.time}

))}
); } // ═══════════════════════════════════════════════════════ // BRANDING & TEMA // ═══════════════════════════════════════════════════════ function SuperBranding({ theme, setBrandPreset, brandPresetId, setSecondary, customSecondary }) { const [form, setForm] = useSp({ brand_name: "Damelkeun", brand_tagline: "Tracking Pesanan Konveksi", brand_footer: "© 2026 Damelkeun Jaya Mandiri", }); const [saved, setSaved] = useSp(false); const onSave = () => { setSaved(true); setTimeout(() => setSaved(false), 2200); }; return (
{saved && (
Tema disimpan. Halaman customer otomatis update.
)}
{/* Editor */}

Warna Brand

Pilih preset atau custom. Warna ini diaplikasikan ke seluruh halaman customer + admin.

{BRAND_PRESETS.map((p) => { const isActive = brandPresetId === p.id; return ( ); })}

Override warna aksen sekunder secara independen.

setSecondary(e.target.value)} /> {customSecondary || theme.secondary} {customSecondary && ( )}

Identitas Brand

setForm((p) => ({ ...p, brand_name: e.target.value }))} />
setForm((p) => ({ ...p, brand_tagline: e.target.value }))} />
setForm((p) => ({ ...p, brand_footer: e.target.value }))} />

PNG transparent, ≥256×256

{/* Preview */}

PREVIEW LIVE

Customer side

{form.brand_name}

{form.brand_tagline}

Live
ORD-260526-001

Bayu Saputra

Kaos Polo Custom Bordir · 120 pcs

62%

Sedang dikerjakan

Jahit

{STAGES.slice(0, 5).map((s, i) => { const done = i < 4; return (
{s.label}
); })}
); } window.SuperShell = SuperShell; window.SuperDashboard = SuperDashboard; window.SuperBranding = SuperBranding;