-
-
{brand.brand_name}
-
{brand.brand_slug}
-
-
+
+ {typeof value === "number" ? value.toLocaleString() : value}
+ {unit && {unit} }
-
-
- {[
- { label: "Orders", value: brand.orders_today },
- { label: "Revenue", value: formatCurrency(Number(brand.revenue_today)) },
- { label: "Routes", value: brand.active_stops },
- ].map(({ label, value }) => (
-
+ {sub &&
{sub}
}
+
+ {bars.map((v, i) => (
+
-
- {brand.open_pain_items > 0 && (
-
-
- {brand.open_pain_items} open issue{brand.open_pain_items !== 1 ? "s" : ""}
-
-
- )}
+
+ {serial}
+
);
}
-// ── Activity Item ──────────────────────────────────────────────────────────────
-
-function ActivityItem({ event }: { event: ActivityEvent }) {
- const c = EVENT_COLORS[event.event_type] ?? EVENT_COLORS.default;
- const label = event.event_type.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase());
-
- return (
-
-
-
-
-
-
- {label}
-
- {event.brand_name && (
- {event.brand_name}
- )}
-
-
-
- {event.entity_type && {event.entity_type} }
- {event.entity_id && #{event.entity_id.slice(0, 6)} }
-
-
- {event.created_at ? timeAgo(event.created_at) : ""}
-
-
-
-
- );
-}
-
-// ── Pain Item ─────────────────────────────────────────────────────────────────
-
-function PainItem({
- item,
- onResolve,
- onSnooze,
-}: {
- item: PainLogItem;
- onResolve: (id: string) => void;
- onSnooze: (id: string) => void;
-}) {
- const c = SEVERITY_CONFIG[item.severity] ?? SEVERITY_CONFIG.low;
-
- return (
-
-
-
-
- {item.severity}
-
- {item.title}
-
-
- onSnooze(item.id)}
- className="rounded-lg bg-zinc-900/5 border border-white/10 px-2.5 py-1 text-xs font-medium text-white/35 hover:bg-zinc-900/10 hover:text-white/60 transition-all"
- >
- Snooze
-
- onResolve(item.id)}
- className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-2.5 py-1 text-xs font-medium text-emerald-300 hover:bg-emerald-500/30 transition-all"
- >
- Done
-
-
-
-
- {item.brand_name && {item.brand_name} }
- ·
- {item.category}
- ·
- {item.created_at ? timeAgo(item.created_at) + " ago" : ""}
-
-
- );
-}
-
-// ── AI Briefing ────────────────────────────────────────────────────────────────
+// ── AI Briefing ────────────────────────────────────────────────────────────
function AIBriefing({ metrics, brandHealth }: {
metrics: PlatformMetrics | null;
brandHealth: BrandHealth[];
}) {
- const lines: string[] = [];
- if (!metrics) return
;
-
- if (metrics.orders_today > 0) {
- lines.push(`${metrics.orders_today} order${metrics.orders_today !== 1 ? "s" : ""} placed today.`);
- }
- if (Number(metrics.revenue_today) > 0) {
- lines.push(`${formatCurrencyFull(Number(metrics.revenue_today))} in revenue processed.`);
- }
- if (metrics.failed_orders_today > 0) {
- lines.push(`${metrics.failed_orders_today} failed order${metrics.failed_orders_today !== 1 ? "s" : ""} need attention.`);
- }
- if (metrics.pending_orders_today > 0) {
- lines.push(`${metrics.pending_orders_today} order${metrics.pending_orders_today !== 1 ? "s" : ""} pending confirmation.`);
- }
- const crit = brandHealth.filter(b => b.health_status === "critical").length;
- if (crit > 0) lines.push(`${crit} brand${crit !== 1 ? "s" : ""} in critical state.`);
- const warn = brandHealth.filter(b => b.health_status === "warning").length;
- if (warn > 0 && crit === 0) lines.push(`${warn} brand${warn !== 1 ? "s" : ""} need attention.`);
-
- if (lines.length === 0) {
- lines.push("Platform is running smoothly — no active issues.");
- }
+ const items = useMemo(() => {
+ if (!metrics) return [] as { idx: string; text: React.ReactNode }[];
+ const out: { idx: string; text: React.ReactNode }[] = [];
+ if (metrics.orders_today > 0) {
+ out.push({ idx: "01", text: <>
{metrics.orders_today} order{metrics.orders_today !== 1 ? "s" : ""} placed across all brands today. });
+ }
+ if (Number(metrics.revenue_today) > 0) {
+ out.push({ idx: "02", text: <>
{formatCurrencyFull(Number(metrics.revenue_today))} in revenue processed · target pacing on track. });
+ }
+ if (metrics.active_routes > 0) {
+ out.push({ idx: "03", text: <>
{metrics.active_routes} active route{metrics.active_routes !== 1 ? "s" : ""} running · all on schedule. });
+ }
+ if (metrics.pending_orders_today > 0) {
+ out.push({ idx: "04", text: <>
{metrics.pending_orders_today} order{metrics.pending_orders_today !== 1 ? "s" : ""} pending confirmation · review queue. });
+ }
+ if (metrics.failed_orders_today > 0) {
+ out.push({ idx: "05", text: <>
{metrics.failed_orders_today} failed · payment retry window open · triage required. });
+ }
+ const crit = brandHealth.filter(b => b.health_status === "critical").length;
+ if (crit > 0) {
+ out.push({ idx: "06", text: <>
{crit} brand{crit !== 1 ? "s" : ""} in critical state · investigate pain log entries. });
+ }
+ const warn = brandHealth.filter(b => b.health_status === "warning").length;
+ if (warn > 0 && crit === 0) {
+ out.push({ idx: "07", text: <>
{warn} brand{warn !== 1 ? "s" : ""} flagged for attention · monitoring. });
+ }
+ if (out.length === 0) {
+ out.push({ idx: "00", text:
PLATFORM NOMINAL · no active issues · all channels green });
+ }
+ return out;
+ }, [metrics, brandHealth]);
return (
-
- {lines.map((line, i) => (
-
- {line}
-
- ))}
+
+
+
+ Platform Briefing
+
+ GENERATED · {new Date().toLocaleTimeString("en-US", { hour12: false })}
+
+
+
+ {items.map(it => (
+
+ {it.idx}
+ {it.text}
+
+ ))}
+
+
+
Source live.rpc
+
Window 24h
+
Build cc-26.6
+
+ );
+}
+
+// ── Brand Health Panel ─────────────────────────────────────────────────────
+
+function BrandPanel({ brand, delay }: { brand: BrandHealth; delay: number }) {
+ const ledClass = HEALTH_LED[brand.health_status] ?? "cc-led--off";
+ const statusClass = HEALTH_CLASS[brand.health_status] ?? "";
+ const statusLabel = HEALTH_LABEL[brand.health_status] ?? "UNKNOWN";
+
+ return (
+
+
+
+
+
+
+ /{brand.brand_slug} · {brand.plan_tier}
+
+
+
+ {statusLabel}
+
+
+
+ Orders
+ {brand.orders_today}
+
+
+ Revenue
+ {formatCurrency(Number(brand.revenue_today))}
+
+
+ Routes
+ 0 ? "cc-brand__metric-value--critical" : ""}`}>
+ {brand.active_stops}
+
+
+
+ {brand.open_pain_items} open issue{brand.open_pain_items !== 1 ? "s" : ""} on this brandFounder Queue
+
+ )}
+
+ );
+}
+
+// ── Pain Log Item ─────────────────────────────────────────────────────────
+
+function PainItem({
+ item, idx, onResolve, onSnooze,
+}: {
+ item: PainLogItem;
+ idx: number;
+ onResolve: (id: string) => void;
+ onSnooze: (id: string) => void;
+}) {
+ const ledClass = SEVERITY_LED[item.severity] ?? "cc-led--off";
+ const severityClass = `cc-pain--${item.severity}`;
+ const serial = `P.${String(idx).padStart(3, "0")}`;
+
+ return (
+
+
+
+
+
{item.title}
+
+ onSnooze(item.id)} className="cc-btn cc-btn--snooze">Snooze
+ onResolve(item.id)} className="cc-btn cc-btn--resolved">Done
+
+
+ {serial}
+ ·
+ {item.brand_name && <>{item.brand_name} · }
+ {item.category} ·
+ {item.created_at ? timeAgo(item.created_at) : ""}
+
+
+ );
+}
+
+// ── Activity Feed Row ──────────────────────────────────────────────────────
+
+function ActivityRow({ event, idx }: { event: ActivityEvent; idx: number }) {
+ const codeClass = FEED_CODE_CLASS[event.event_type] ?? "cc-feed__code--default";
+ const code = event.event_type.replace(/_/g, " ").toUpperCase();
+
+ return (
+
+
+ {event.created_at ? formatTime(event.created_at) : "—"}
+
+ {code}
+
+ {event.brand_name && {event.brand_name} }
+ {event.entity_type ?? "event"}
+ {event.entity_id && (
+ #{event.entity_id.slice(0, 8)}
+ )}
+
+ {event.created_at ? timeAgo(event.created_at) : ""}
);
}
-// ── Main ─────────────────────────────────────────────────────────────────────
+// ── Main ──────────────────────────────────────────────────────────────────
export default function CommandCenterDashboard() {
const [metrics, setMetrics] = useState
(null);
@@ -296,8 +449,6 @@ export default function CommandCenterDashboard() {
const [addForm, setAddForm] = useState({ severity: "medium", category: "operations", title: "", description: "" });
const [snoozed, setSnoozed] = useState>(new Set());
- const tv = tvMode;
-
const fetchAll = useCallback(async () => {
try {
const [m, a, b, p] = await Promise.all([
@@ -316,7 +467,6 @@ export default function CommandCenterDashboard() {
} finally {
setLoading(false);
}
-
}, []);
useEffect(() => {
@@ -326,6 +476,7 @@ export default function CommandCenterDashboard() {
}, [fetchAll]);
const handleResolve = async (id: string) => {
+ if (resolving.has(id)) return;
setResolving(prev => new Set([...prev, id]));
try {
const r = await resolvePainLogItem(id);
@@ -359,264 +510,302 @@ export default function CommandCenterDashboard() {
const openItems = painLog.filter(p => p.status === "open" && !snoozed.has(p.id));
+ // ── Loading state ─────────────────────────────────────────────────────
if (loading) {
return (
-
-
-
-
Initializing
+
+
+
+
+
+
{"// "}00 · BOOT SEQUENCE
+
Command Center
+
+
+
+ ▌▌ ▌
+ Initializing platform channels
+ {"// "}awaiting telemetry
+
);
}
+ // ── Error state ("Signal Lost") ────────────────────────────────────────
if (error) {
return (
-
-
-
⚠
-
Connection Lost
-
{error}
-
- Reconnect
-
+
+
+
+
+
+
+ SIGNAL LOST · COMMS OFFLINE
+
+
+ Platform Disconnected
+
+
+ The Command Center cannot reach the platform RPCs right now.
+ This is usually a transient database or auth issue — the data is safe, the connection isn{`'`}t.
+
+
{error}
+
+
+ {"// "}SUGGESTED · check DATABASE_URL · re-run migrations
+ CODE: RPC_UNREACHABLE
+
+
);
}
+ // ── Main state ────────────────────────────────────────────────────────
return (
-
+
+
- {/* ── Header ─────────────────────────────────────────────────────────── */}
-
-
-
- Command Center
-
-
- {new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" })}
- {" · "}
- LIVE
-
+
+ {/* ── Masthead ───────────────────────────────────────────────────── */}
+
+
+
{"// "}01 · PLATFORM OPERATIONS
+
Command Center
+
+ Real-time platform telemetry · {brandHealth.length} active brand{brandHealth.length !== 1 ? "s" : ""} ·
+ last sync just now · refresh every 30s
+
+
+
+
+ ↻ Refresh
+
+ setTvMode(v => !v)} className="cc-btn">
+ {tvMode ? "Exit TV" : "TV Mode"}
+
+
-
-
-
-
- Refresh
-
-
setTvMode(v => !v)}
- className={`flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all ${
- tv
- ? "bg-zinc-900/15 border border-white/25 text-white/80"
- : "bg-zinc-900/5 border border-white/10 text-white/35 hover:text-white/60"
- }`}
- >
- {tv ? "Exit TV" : "TV Mode"}
-
-
-
- {/* ── KPI Row ──────────────────────────────────────────────────────────── */}
-
- 5 ? "warning" : "healthy"} />
- 0 ? "critical" : "healthy"} />
- 5 ? "warning" : "healthy"} />
-
+ {/* ── KPI Row ────────────────────────────────────────────────────── */}
+
+
+ {"// "}02
+ KPI OVERVIEW
+ 06
+
+
+ b.health_status === "healthy").length} healthy`}
+ sparkSeed="brands" status="healthy"
+ />
+ 0 ? "critical" : "healthy"}
+ />
+ 5 ? "warn" : "healthy"}
+ />
+ 0 ? "critical" : "healthy"}
+ />
+ 5 ? "warn" : "healthy"}
+ />
+
+
- {/* ── AI Briefing (full width) ──────────────────────────────────────── */}
-
-
-
-
- 🤖
-
-
-
Daily Briefing
-
Platform intelligence summary
-
+ {/* ── AI Briefing ─────────────────────────────────────────────────── */}
+
+
+ {"// "}03
+ DAILY BRIEFING
+ AUTO
-
+
- {/* ── 2-Column Body ───────────────────────────────────────────────────── */}
-
-
- {/* ── LEFT: Brand Health + Activity ───────────────────────────── */}
-
- {/* Brand Health */}
+ {/* ── Two-column body ────────────────────────────────────────────── */}
+
+ {/* LEFT: Brand Health + Activity */}
-
-
- Brand Health
-
-
- {brandHealth.length}
-
-
-
+
+
+ {"// "}04
+ BRAND HEALTH
+ {brandHealth.length}
+
{brandHealth.length === 0 ? (
-
-
No active brands
+
+
{"// "}NO ACTIVE BRANDS
+
No brands registered on this platform.
) : (
- brandHealth.map((b) => (
-
- ))
+
+ {brandHealth.map((b, i) => (
+
)}
-
+
+
+
+ {"// "}05
+ LIVE ACTIVITY
+ {activity.length}
+
+
+
+
+ {activity.length === 0 ? (
+
+
{"// "}NO EVENTS
+
Waiting for telemetry.
+
+ ) : (
+ activity.slice(0, 30).map((e, i) => (
+
+ ))
+ )}
+
+
- {/* Activity Feed */}
+ {/* RIGHT: Founder Queue + Quick Access */}
-
-
- Live Activity
-
-
- {activity.length}
-
-
-
-
- {activity.length === 0 ? (
-
-
No recent events
+
+
+ {"// "}06
+ FOUNDER QUEUE
+ {openItems.length}
+ setShowAddForm(v => !v)}
+ className="cc-btn cc-btn--ghost"
+ style={{ marginLeft: 12 }}
+ >
+ {showAddForm ? "Cancel" : "+ Log Issue"}
+
+
+
+ {showAddForm && (
+
+
NEW PAIN LOG ENTRY
+
+ setAddForm(f => ({ ...f, severity: e.target.value }))}
+ className="cc-field"
+ >
+ LOW
+ MEDIUM
+ HIGH
+ CRITICAL
+
+
+
setAddForm(f => ({ ...f, title: e.target.value }))}
+ placeholder="issue title..."
+ className="cc-field"
+ />
+