redesign command center as operations schematic
Deploy to route.crispygoat.com / deploy (push) Successful in 4m18s

Aesthetic shift from generic dark glassmorphism to an industrial
mission-control look: phosphor amber on near-black, Major Mono Display
for the wordmark, JetBrains Mono for all labels/numbers/codes, Inter
Tight for body copy.

- Top status bar with live clock, pulsing LIVE LED, and scrolling brand
  ticker (plan tiers + slugs)
- Serial-numbered sections (// 01-07) with CAD-style corner crosshairs
  and scale-rule dividers
- 6 KPIs in a flush 1px-separated grid with tabular numerals, sparklines,
  and per-cell M.0N serials
- AI briefing as a numbered readout with model metadata sidebar
- Brand health panels with severity LEDs, vertical dividers between
  metrics, and open-pain indicators
- Activity feed as terminal-style rows with color-coded event codes
- Pain log items with severity LEDs and P.NNN serials
- Quick Access links with L.NN prefixes and slide-on-hover
- Loading state replaced with terminal-style blinking bar + 'BOOT
  SEQUENCE' eyebrow
- 'Connection Lost' replaced with 'SIGNAL LOST · Platform Disconnected'
  panel that surfaces the actual error, reconnect action, and a
  diagnostic hint footer
- prefers-reduced-motion respected across ticker, LED pulse, and
  boot-reveal animations
- TV Mode scales up the title, KPIs, and briefing for wall display
This commit is contained in:
Tyler
2026-06-17 09:28:44 -06:00
parent 9da9c8b6e0
commit 4f22da65d8
3 changed files with 1804 additions and 440 deletions
File diff suppressed because it is too large Load Diff
+38 -6
View File
@@ -2,17 +2,49 @@ import { getAdminUser } from "@/lib/admin-permissions";
import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
import CommandCenterDashboard from "@/components/admin/CommandCenterDashboard";
import { redirect } from "next/navigation";
import { Major_Mono_Display, JetBrains_Mono, Inter_Tight } from "next/font/google";
import "./command-center.css";
/**
* Command Center — Operations Schematic
*
* Industrial mission-control feel: phosphor amber on near-black, dense data,
* CAD-style corner crosshairs, brand ticker, serial-numbered sections. Three
* typefaces working in concert: Major Mono Display (wordmark only), JetBrains
* Mono (all labels/numbers/timestamps), Inter Tight (descriptive body copy).
*/
const majorMono = Major_Mono_Display({
subsets: ["latin"],
weight: "400",
variable: "--cc-font-mono-major",
display: "swap",
});
const jetbrainsMono = JetBrains_Mono({
subsets: ["latin"],
variable: "--cc-font-mono",
display: "swap",
weight: ["400", "500", "600", "700"],
});
const interTight = Inter_Tight({
subsets: ["latin"],
variable: "--cc-font-body",
display: "swap",
weight: ["400", "500", "600"],
});
export default async function CommandCenterPage() {
const adminUser = await getAdminUser();
if (!adminUser) return <AdminAccessDenied />;
if (adminUser.role !== "platform_admin") return <AdminAccessDenied message="Platform admin access required." />;
if (adminUser.must_change_password) redirect("/change-password");
return (
<main className="min-h-screen bg-black px-4 py-8">
<div className="mx-auto max-w-[1600px]">
<CommandCenterDashboard />
</div>
</main>
<div
className={`${majorMono.variable} ${jetbrainsMono.variable} ${interTight.variable} cc-schematic`}
>
<CommandCenterDashboard />
</div>
);
}
}