feat: Add theme toggle, implement interactive simulator menu, and enhance dashboard stats API.
This commit is contained in:
@@ -107,32 +107,52 @@ def generate_mock_hdmi_test():
|
||||
}
|
||||
|
||||
if __name__ == "__main__":
|
||||
import sys
|
||||
|
||||
hu = HeadUnit()
|
||||
|
||||
if len(sys.argv) < 2:
|
||||
print("Usage: python simulator.py [register|test|mode-dev|mode-prod|swap|loop]")
|
||||
sys.exit(1)
|
||||
|
||||
cmd = sys.argv[1]
|
||||
|
||||
if cmd == "register":
|
||||
hu.register()
|
||||
elif cmd == "test":
|
||||
hu.report_test(generate_mock_hdmi_test())
|
||||
elif cmd == "mode-dev":
|
||||
hu.switch_mode("DEV")
|
||||
elif cmd == "mode-prod":
|
||||
hu.switch_mode("PROD")
|
||||
elif cmd == "swap":
|
||||
hu.switch_slot()
|
||||
elif cmd == "loop":
|
||||
print("[*] Starting simulator loop. Ctrl+C to exit.")
|
||||
while True:
|
||||
def print_menu():
|
||||
print("\n" + "="*45)
|
||||
print(f" HDMI TESTER - HARDWARE SIMULATOR (v1.2.0)")
|
||||
print("="*45)
|
||||
print(f" Status: [{hu.status}]")
|
||||
print(f" Mode: [{hu.mode}]")
|
||||
print(f" Active: [Slot {hu.active_slot}]")
|
||||
print(f" Serial: [{hu.serial_number}]")
|
||||
print("-" * 45)
|
||||
print(" 1. Register / Sync Device")
|
||||
print(" 2. Report Mock HDMI Test")
|
||||
print(" 3. Switch to DEV Mode")
|
||||
print(" 4. Switch to PROD Mode")
|
||||
print(" 5. Swap Active Slot (A/B)")
|
||||
print(" 6. Start Automated Loop")
|
||||
print(" 0. Exit Orchestrator")
|
||||
print("-" * 45)
|
||||
|
||||
while True:
|
||||
print_menu()
|
||||
choice = input("Select operation [0-6] >> ").strip()
|
||||
|
||||
if choice == "1":
|
||||
hu.register()
|
||||
if hu.status == "ENROLLED":
|
||||
hu.report_test(generate_mock_hdmi_test())
|
||||
time.sleep(10)
|
||||
else:
|
||||
print("Unknown command.")
|
||||
elif choice == "2":
|
||||
hu.report_test(generate_mock_hdmi_test())
|
||||
elif choice == "3":
|
||||
hu.switch_mode("DEV")
|
||||
elif choice == "4":
|
||||
hu.switch_mode("PROD")
|
||||
elif choice == "5":
|
||||
hu.switch_slot()
|
||||
elif choice == "6":
|
||||
print("\n[*] Entering automated telemetry loop. Press Ctrl+C to return to menu.")
|
||||
try:
|
||||
while True:
|
||||
hu.register()
|
||||
if hu.status == "ENROLLED":
|
||||
hu.report_test(generate_mock_hdmi_test())
|
||||
time.sleep(5)
|
||||
except KeyboardInterrupt:
|
||||
print("\n[!] Loop interrupted by user.")
|
||||
elif choice == "0":
|
||||
print("[*] Powering down head unit...")
|
||||
break
|
||||
else:
|
||||
print("[!] Invalid selection.")
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -12,6 +12,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.562.0",
|
||||
"next": "16.1.1",
|
||||
"next-themes": "^0.4.6",
|
||||
"prisma": "^6.19.1",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
@@ -5291,6 +5292,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-themes": {
|
||||
"version": "0.4.6",
|
||||
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
|
||||
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/next/node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.562.0",
|
||||
"next": "16.1.1",
|
||||
"next-themes": "^0.4.6",
|
||||
"prisma": "^6.19.1",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
|
||||
BIN
prisma/dev.db
BIN
prisma/dev.db
Binary file not shown.
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Shield, Smartphone, ArrowRight, Settings2, PlusCircle, CheckCircle2, XCircle, Clock } from "lucide-react";
|
||||
import { Shield, ArrowRight, Settings2, PlusCircle, CheckCircle2, XCircle, Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Device {
|
||||
id: string;
|
||||
@@ -37,105 +38,118 @@ export default function AdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateName = async (id: string, name: string) => {
|
||||
await fetch(`/api/devices/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
setDevices(devices.map(d => d.id === id ? { ...d, name } : d));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight mb-2 flex items-center gap-3">
|
||||
<Shield className="w-8 h-8 text-sky-500" />
|
||||
<h1 className="text-3xl font-black tracking-tighter mb-2 flex items-center gap-4 text-foreground uppercase">
|
||||
<div className="w-12 h-12 bg-sky-500/10 border border-sky-500/20 rounded-2xl flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-sky-500" />
|
||||
</div>
|
||||
Command Center
|
||||
</h1>
|
||||
<p className="text-slate-400">Manage device fleet, enrollment, and firmware orchestration.</p>
|
||||
<p className="text-slate-500 font-medium text-sm tracking-wide">Manage device fleet, enrollment, and firmware orchestration.</p>
|
||||
</div>
|
||||
<button className="bg-sky-500 hover:bg-sky-400 text-white px-4 py-2 rounded-xl text-sm font-bold flex items-center gap-2 transition-all shadow-[0_0_20px_rgba(56,189,248,0.2)]">
|
||||
<button className="bg-sky-500 hover:bg-sky-400 text-white px-6 py-2.5 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-3 transition-all shadow-[0_0_25px_rgba(56,189,248,0.2)] hover:scale-105 active:scale-95">
|
||||
<PlusCircle className="w-4 h-4" />
|
||||
Proactive Provisioning
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{/* Device Management Table */}
|
||||
<div className="bg-white/[0.02] border border-white/5 rounded-3xl overflow-hidden backdrop-blur-md">
|
||||
<div className="px-6 py-4 border-b border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<h2 className="text-xs font-bold uppercase tracking-widest text-slate-500 italic">Connected Hardware Tree</h2>
|
||||
<div className="bg-background border border-border rounded-[2rem] overflow-hidden backdrop-blur-xl">
|
||||
<div className="px-8 py-6 border-b border-border bg-background/30 flex items-center justify-between">
|
||||
<h2 className="text-[10px] font-black uppercase tracking-[0.3em] text-secondary">Connected Hardware Tree</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-white/5 text-[10px] font-bold uppercase tracking-widest text-slate-600">
|
||||
<th className="px-6 py-4">Hardware ID</th>
|
||||
<th className="px-6 py-4">Designation</th>
|
||||
<th className="px-6 py-4">Architecture</th>
|
||||
<th className="px-6 py-4">Orchestration</th>
|
||||
<th className="px-6 py-4">Deployment</th>
|
||||
<th className="px-6 py-4 text-right">Control</th>
|
||||
<tr className="border-b border-border text-[10px] font-black uppercase tracking-[0.2em] text-secondary">
|
||||
<th className="px-8 py-5">Hardware ID</th>
|
||||
<th className="px-8 py-5">Designation</th>
|
||||
<th className="px-8 py-5">Architecture</th>
|
||||
<th className="px-8 py-5">Orchestration</th>
|
||||
<th className="px-8 py-5">Deployment</th>
|
||||
<th className="px-8 py-5 text-right">Control</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/[0.02]">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-12 text-center text-slate-500">Scanning network for head units...</td>
|
||||
<td colSpan={6} className="px-8 py-20 text-center text-slate-500 font-medium italic">Scanning network for head units...</td>
|
||||
</tr>
|
||||
) : devices.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-12 text-center text-slate-500">No devices detected in local mesh.</td>
|
||||
<td colSpan={6} className="px-8 py-20 text-center text-slate-500 font-medium italic">No devices detected in local mesh.</td>
|
||||
</tr>
|
||||
) : (
|
||||
devices.map((device) => (
|
||||
<tr key={device.id} className="hover:bg-white/[0.01] transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-2 h-2 rounded-full ${device.status === 'ENROLLED' ? 'bg-sky-400' : 'bg-amber-400 animate-pulse'}`} />
|
||||
<tr key={device.id} className="hover:bg-white/[0.03] transition-all group">
|
||||
<td className="px-8 py-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-2 h-2 rounded-full shadow-[0_0_8px] ${device.status === 'ENROLLED' ? 'bg-sky-400 shadow-sky-400/50' : 'bg-amber-400 shadow-amber-400/50 animate-pulse'}`} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-mono text-[10px] text-slate-400">{device.macAddress}</span>
|
||||
<span className="text-xs font-bold text-slate-200">{device.serialNumber}</span>
|
||||
<span className="text-xs font-black text-slate-200 uppercase tracking-tight">{device.serialNumber}</span>
|
||||
<span className="font-mono text-[9px] text-slate-500 uppercase tracking-tighter">{device.macAddress}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<td className="px-8 py-4">
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={device.name}
|
||||
className="bg-transparent border-b border-white/5 text-xs focus:border-sky-500 outline-none w-full pb-1 transition-colors"
|
||||
onBlur={(e) => handleUpdateName(device.id, e.target.value)}
|
||||
className="bg-secondary/5 border border-border rounded-xl px-4 py-2 text-[11px] text-foreground focus:border-sky-500/50 focus:bg-secondary/10 outline-none w-full transition-all font-bold placeholder:text-secondary/50 placeholder:font-normal"
|
||||
placeholder="Assign static name..."
|
||||
/>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-[10px] font-mono text-slate-500 uppercase">
|
||||
<td className="px-8 py-4 text-[10px] font-black font-mono text-slate-500 uppercase tracking-tighter">
|
||||
RPi Zero 2 W
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Settings2 className="w-3.5 h-3.5 text-slate-500" />
|
||||
<span className="text-[10px] font-bold text-slate-400 bg-white/5 py-0.5 px-2 rounded uppercase">
|
||||
Slot {device.activeSlot} (v{device.firmwareVersion})
|
||||
<td className="px-8 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings2 className="w-4 h-4 text-slate-500" />
|
||||
<span className="text-[9px] font-black text-slate-400 bg-white/5 py-1.5 px-3 rounded-xl border border-white/5 uppercase tracking-widest group-hover:border-sky-500/20 group-hover:text-sky-400 transition-colors">
|
||||
Slot {device.activeSlot} <span className="mx-1.5 opacity-20">|</span> v{device.firmwareVersion}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<td className="px-8 py-4">
|
||||
{device.status === "ENROLLED" ? (
|
||||
<span className="text-[10px] font-black text-emerald-500/80 tracking-tighter uppercase flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> Enrolled
|
||||
</span>
|
||||
<div className="flex items-center gap-2 text-emerald-400 text-[10px] font-black uppercase tracking-[0.1em]">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] animate-pulse" />
|
||||
Active Mesh
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[10px] font-black text-amber-500/80 tracking-tighter uppercase flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" /> Awaiting
|
||||
</span>
|
||||
<div className="flex items-center gap-2 text-amber-500 text-[10px] font-black uppercase tracking-[0.1em]">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.5)] animate-bounce" />
|
||||
Isolated
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<td className="px-8 py-4 text-right">
|
||||
{device.status === "PENDING" ? (
|
||||
<button
|
||||
onClick={() => handleEnroll(device.id)}
|
||||
className="bg-sky-500/10 hover:bg-sky-500/20 text-sky-400 text-[10px] font-black py-1.5 px-3 rounded uppercase transition-colors flex items-center gap-2 ml-auto"
|
||||
className="bg-sky-500 hover:bg-sky-400 text-white text-[10px] font-black py-2.5 px-5 rounded-2xl uppercase tracking-widest transition-all shadow-[0_0_20px_rgba(56,189,248,0.2)] hover:scale-105 active:scale-95 flex items-center gap-2 ml-auto"
|
||||
>
|
||||
Enroll <ArrowRight className="w-3 h-3" />
|
||||
Enroll Node <ArrowRight className="w-3 h-3" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="text-slate-600 hover:text-rose-500 transition-colors"
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center text-slate-600 hover:text-rose-500 hover:bg-rose-500/10 transition-all ml-auto group"
|
||||
title="Decommission Hardware"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
<XCircle className="w-5 h-5 group-hover:scale-110 transition-transform" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const [deviceCount, testCount, onlineCount, recentTests] = await Promise.all([
|
||||
const [deviceCount, testCount, onlineCount, recentTests, enrolledDevices] = await Promise.all([
|
||||
prisma.device.count(),
|
||||
prisma.test.count(),
|
||||
prisma.device.count({ where: { status: "ENROLLED" } }),
|
||||
@@ -12,11 +12,17 @@ export async function GET() {
|
||||
orderBy: { timestamp: "desc" },
|
||||
include: { device: true },
|
||||
}),
|
||||
prisma.device.findMany({
|
||||
where: { status: "ENROLLED" },
|
||||
take: 5,
|
||||
orderBy: { lastHeartbeat: "desc" },
|
||||
}),
|
||||
]);
|
||||
|
||||
return NextResponse.json({
|
||||
stats: { deviceCount, testCount, onlineCount },
|
||||
recentTests,
|
||||
enrolledDevices,
|
||||
});
|
||||
} catch (error) {
|
||||
return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
|
||||
|
||||
@@ -1,26 +1,31 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-border: var(--border);
|
||||
--color-secondary: var(--secondary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
:root {
|
||||
--background: #f8fafc;
|
||||
--foreground: #0f172a;
|
||||
--border: rgba(15, 23, 42, 0.08);
|
||||
--secondary: #64748b;
|
||||
}
|
||||
|
||||
[class~="dark"] {
|
||||
--background: #0a0a0c;
|
||||
--foreground: #f1f5f9;
|
||||
--border: rgba(255, 255, 255, 0.05);
|
||||
--secondary: #94a3b8;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
}
|
||||
@@ -9,46 +9,59 @@ export const metadata: Metadata = {
|
||||
description: "Advanced HDMI testing and modular device management",
|
||||
};
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="dark" suppressHydrationWarning>
|
||||
<body className={`${inter.className} bg-[#0a0a0c] text-slate-200 min-h-screen antialiased`} suppressHydrationWarning>
|
||||
<div className="fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,_rgba(56,189,248,0.08),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative flex flex-col min-h-screen">
|
||||
<nav className="border-b border-white/5 bg-[#0a0a0c]/80 backdrop-blur-xl sticky top-0 z-50">
|
||||
<div className="container mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 group cursor-pointer">
|
||||
<div className="w-8 h-8 bg-sky-500 rounded-lg flex items-center justify-center group-hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] transition-all duration-300">
|
||||
<span className="text-white font-bold text-lg">H</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/60">
|
||||
HDMI<span className="text-sky-400">Tester</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-8">
|
||||
<a href="/" className="text-sm font-medium text-slate-400 hover:text-white transition-colors">Dashboard</a>
|
||||
<a href="/admin" className="text-sm font-medium text-slate-400 hover:text-white transition-colors">Admin</a>
|
||||
<div className="h-4 w-px bg-white/10" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-slate-500">Live</span>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${inter.className} min-h-screen antialiased transition-colors duration-300`} suppressHydrationWarning>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<div className="fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,_rgba(56,189,248,0.08),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative flex flex-col min-h-screen">
|
||||
<nav className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-0 z-50">
|
||||
<div className="container mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2 group cursor-pointer transition-opacity hover:opacity-80">
|
||||
<div className="w-8 h-8 bg-sky-500 rounded-lg flex items-center justify-center group-hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] transition-all duration-300">
|
||||
<span className="text-white font-bold text-lg">H</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/60">
|
||||
HDMI<span className="text-sky-400">Tester</span>
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-8">
|
||||
<Link href="/" className="text-sm font-medium text-secondary hover:text-foreground transition-colors">Dashboard</Link>
|
||||
<Link href="/admin" className="text-sm font-medium text-secondary hover:text-foreground transition-colors">Admin</Link>
|
||||
<div className="h-4 w-px bg-border md:block hidden" />
|
||||
<div className="flex items-center gap-2 pr-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-slate-500">Live</span>
|
||||
</div>
|
||||
<div className="h-4 w-px bg-border" />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="flex-1 container mx-auto px-6 py-10">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="border-t border-white/5 py-8 mt-auto">
|
||||
<div className="container mx-auto px-6 text-center text-slate-500 text-xs">
|
||||
© 2025 HDMI Tester Enterprise. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="flex-1 container mx-auto px-6 py-10">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="border-t border-border py-8 mt-auto">
|
||||
<div className="container mx-auto px-6 text-center text-secondary text-xs">
|
||||
© 2025 HDMI Tester Enterprise. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
215
src/app/page.tsx
215
src/app/page.tsx
@@ -33,6 +33,7 @@ interface DashboardData {
|
||||
onlineCount: number;
|
||||
};
|
||||
recentTests: Test[];
|
||||
enrolledDevices: Device[];
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
@@ -57,34 +58,53 @@ export default function DashboardPage() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 3000); // Poll every 3 seconds
|
||||
const interval = setInterval(fetchData, 3000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-12 h-12 border-4 border-sky-500/20 border-t-sky-500 rounded-full animate-spin" />
|
||||
<p className="text-slate-500 font-mono text-xs uppercase tracking-widest animate-pulse">Syncing with hardware mesh...</p>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 border-4 border-sky-500/10 border-t-sky-500 rounded-full animate-spin" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Zap className="w-6 h-6 text-sky-500 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-slate-300 font-bold uppercase tracking-[0.2em] text-sm">Synchronizing Fleet</p>
|
||||
<p className="text-slate-500 font-mono text-[10px]">Establishing secure tunnel to edge nodes...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-10 animate-in fade-in duration-1000">
|
||||
{/* Header with Live Indicator */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-sm font-black uppercase tracking-[0.3em] text-slate-500 flex items-center gap-3">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
|
||||
</span>
|
||||
Real-time Telemetry
|
||||
</h1>
|
||||
<div className="text-[10px] font-mono text-slate-600 uppercase">
|
||||
Last sync: {lastUpdate.toLocaleTimeString()}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="px-3 py-1 bg-sky-500/10 border border-sky-500/20 rounded-full flex items-center gap-2">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-sky-400">Mesh Encoded</span>
|
||||
</div>
|
||||
<h1 className="text-lg font-black uppercase tracking-[0.2em] text-foreground">
|
||||
Operational Telemetry
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-[10px] font-mono text-slate-500 uppercase tracking-tighter">
|
||||
Last sync: <span className="text-slate-300">{lastUpdate.toLocaleTimeString()}</span>
|
||||
</div>
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full transition-all duration-500",
|
||||
isUpdating ? "bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.8)]" : "bg-white/10"
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -98,27 +118,32 @@ export default function DashboardPage() {
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
"bg-white/[0.03] border border-white/5 rounded-2xl p-6 backdrop-blur-sm relative overflow-hidden group transition-all duration-700",
|
||||
isUpdating && "scale-[1.01] bg-white/[0.05] border-white/10",
|
||||
"bg-background border border-border rounded-2xl p-6 backdrop-blur-sm relative overflow-hidden group transition-all duration-700",
|
||||
isUpdating && "bg-background/80 border-sky-500/20",
|
||||
stat.glow
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent pointer-events-none" />
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<div>
|
||||
<p className="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">{stat.label}</p>
|
||||
<p className="text-slate-500 text-[10px] font-black uppercase tracking-[0.2em] mb-2">{stat.label}</p>
|
||||
<h3 className={cn(
|
||||
"text-4xl font-bold tracking-tight transition-all duration-500",
|
||||
isUpdating ? "scale-110 " + stat.color : "text-white"
|
||||
"text-4xl font-black tracking-tighter transition-all duration-500 font-mono",
|
||||
isUpdating ? stat.color : "text-white"
|
||||
)}>
|
||||
{stat.value}
|
||||
{stat.value.toString().padStart(2, '0')}
|
||||
</h3>
|
||||
</div>
|
||||
<stat.icon className={cn(
|
||||
"w-10 h-10 transition-all duration-700",
|
||||
isUpdating ? "opacity-100 scale-110" : "opacity-20",
|
||||
stat.color
|
||||
)} />
|
||||
<div className={cn(
|
||||
"w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-700",
|
||||
isUpdating ? "bg-white/10 scale-110" : "bg-white/5"
|
||||
)}>
|
||||
<stat.icon className={cn(
|
||||
"w-6 h-6 transition-all duration-700",
|
||||
isUpdating ? "opacity-100" : "opacity-40",
|
||||
stat.color
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -129,65 +154,71 @@ export default function DashboardPage() {
|
||||
{/* Recent Activity Feed */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-sky-400" />
|
||||
Latest Test Sequences
|
||||
<h2 className="text-sm font-black uppercase tracking-[0.2em] flex items-center gap-3 text-slate-300">
|
||||
<Clock className="w-4 h-4 text-sky-400" />
|
||||
Live Sequence Stream
|
||||
</h2>
|
||||
<div className="h-px flex-1 mx-6 bg-gradient-to-r from-white/5 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="bg-white/[0.02] border border-white/5 rounded-3xl overflow-hidden backdrop-blur-md">
|
||||
<table className="w-full text-left">
|
||||
<div className="bg-background border border-border rounded-2xl overflow-hidden backdrop-blur-md">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-white/5 bg-white/[0.01]">
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500">Source</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500">Operation</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500">Status</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500">Metric</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500">Execution</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-slate-500"></th>
|
||||
<tr className="border-b border-border bg-background/30">
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Node</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Operation</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Status</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Execution</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/[0.02]">
|
||||
{data.recentTests.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-12 text-center text-slate-500 italic">No telemetry data reported yet.</td>
|
||||
<td colSpan={5} className="px-6 py-16 text-center text-slate-500 italic font-medium">No telemetry data reported yet.</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.recentTests.map((test) => (
|
||||
<tr key={test.id} className="hover:bg-white/[0.02] transition-colors group animate-in fade-in slide-in-from-left-2 duration-500">
|
||||
<tr key={test.id} className="hover:bg-white/[0.04] transition-all group animate-in fade-in slide-in-from-left-2 duration-500">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-slate-200">{test.device.name || "Head Unit"}</span>
|
||||
<span className="text-[10px] text-slate-500 font-mono">{test.device.serialNumber}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-white/5 border border-white/5 flex items-center justify-center font-mono text-[10px] font-bold text-sky-400">
|
||||
HU
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-slate-200 text-xs">
|
||||
{test.device.name && test.device.name !== "Unnamed Device" ? test.device.name : test.device.serialNumber}
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-500 font-mono tracking-tighter uppercase whitespace-nowrap">
|
||||
ID: {test.device.serialNumber}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-sm px-2 py-1 rounded-md bg-white/5 border border-white/5 text-slate-300 font-medium whitespace-nowrap">
|
||||
<span className="text-[10px] px-2 py-0.5 rounded bg-white/5 border border-white/5 text-slate-400 font-black uppercase tracking-widest whitespace-nowrap">
|
||||
{test.type.replace("_", " ")}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{test.status === "PASS" ? (
|
||||
<div className="flex items-center gap-1.5 text-emerald-400 text-sm font-bold">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
SUCCESS
|
||||
<div className="flex items-center gap-2 text-emerald-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
|
||||
Nominal
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-rose-400 text-sm font-bold">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
FAILURE
|
||||
<div className="flex items-center gap-2 text-rose-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.5)]" />
|
||||
Fault
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-xs text-slate-400 max-w-[200px] truncate block">{test.summary}</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase">
|
||||
{new Date(test.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
<span className="text-[10px] font-bold text-slate-300 font-mono">
|
||||
{new Date(test.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-600 font-medium">
|
||||
<span className="text-[8px] text-slate-500 font-black uppercase tracking-widest">
|
||||
{new Date(test.timestamp).toLocaleDateString([], { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
@@ -195,9 +226,9 @@ export default function DashboardPage() {
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Link
|
||||
href={`/tests/${test.id}`}
|
||||
className="text-xs font-bold text-sky-400 hover:text-sky-300 underline-offset-4 hover:underline"
|
||||
className="px-3 py-1 bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 rounded-lg text-[9px] font-black text-sky-400 uppercase tracking-widest transition-all hover:scale-105 active:scale-95"
|
||||
>
|
||||
INSIGHTS
|
||||
Insights
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -210,44 +241,54 @@ export default function DashboardPage() {
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-sky-500/10 border border-sky-500/20 rounded-2xl p-6 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10">
|
||||
<Zap className="w-16 h-16 text-sky-400" />
|
||||
<div className="bg-gradient-to-br from-sky-500/10 to-transparent border border-sky-500/20 rounded-2xl p-6 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-5">
|
||||
<Zap className="w-20 h-20 text-sky-400" />
|
||||
</div>
|
||||
<h4 className="font-bold text-sky-400 mb-2 flex items-center gap-2 relative z-10">
|
||||
<Zap className="w-4 h-4" />
|
||||
<h4 className="font-black text-sky-400 text-[10px] uppercase tracking-[0.3em] mb-4 flex items-center gap-2 relative z-10">
|
||||
<Activity className="w-3 h-3" />
|
||||
Intelligence Engine
|
||||
</h4>
|
||||
<p className="text-xs text-slate-400 leading-relaxed mb-4 relative z-10">
|
||||
Real-time spectral analysis of HDMI bus metrics. All processing orchestrated in the cloud with sub-ms edge latency.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 py-2 border-t border-sky-500/10 relative z-10">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-sky-200">Processing Engine Active</span>
|
||||
<div className="space-y-3 relative z-10">
|
||||
<p className="text-xs text-slate-400 leading-relaxed font-medium">
|
||||
Real-time spectral analysis of HDMI bus metrics. Processing orchestrated with <span className="text-sky-400 font-bold">sub-ms</span> edge latency.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 py-3 border-t border-sky-500/10">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.15em] text-white">Neural Engine Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/[0.03] border border-white/5 rounded-2xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="font-bold text-slate-200 text-sm uppercase tracking-widest">Fleet Control</h4>
|
||||
<Link href="/admin" className="text-[10px] text-sky-400 hover:underline uppercase font-bold">Manage Hub</Link>
|
||||
<div className="bg-background border border-border rounded-2xl p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h4 className="font-black text-slate-400 text-[10px] uppercase tracking-[0.3em]">Fleet Nodes</h4>
|
||||
<Link href="/admin" className="text-[9px] text-sky-400 hover:text-sky-300 uppercase font-black tracking-widest">Manage All</Link>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="p-3 bg-white/5 rounded-xl border border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-sky-500/10 flex items-center justify-center">
|
||||
<Cpu className="w-4 h-4 text-sky-400" />
|
||||
<div className="space-y-3">
|
||||
{data.enrolledDevices.length === 0 ? (
|
||||
<p className="text-[10px] text-slate-500 italic text-center py-4 border border-dashed border-white/5 rounded-xl">No active nodes in mesh.</p>
|
||||
) : (
|
||||
data.enrolledDevices.map((device) => (
|
||||
<div key={device.id} className="p-3 bg-secondary/5 hover:bg-secondary/10 transition-colors rounded-xl border border-border flex items-center justify-between group cursor-default">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-sky-500/10 flex items-center justify-center group-hover:bg-sky-500/20 transition-colors">
|
||||
<Cpu className="w-4 h-4 text-sky-400" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black text-slate-200 uppercase tracking-wider">
|
||||
{device.name && device.name !== "Unnamed Device" ? device.name : device.serialNumber}
|
||||
</span>
|
||||
<span className="text-[8px] text-slate-500 font-mono uppercase tracking-tighter">System Health: Optimal</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.5)]" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-bold text-slate-300">Edge Provisioning</span>
|
||||
<span className="text-[8px] text-slate-500 uppercase">Auto-Scale enabled</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { notFound } from "next/navigation";
|
||||
import { CheckCircle2, AlertCircle, Clock, Smartphone, Info, ShieldCheck, Gauge, ExternalLink } from "lucide-react";
|
||||
import { CheckCircle2, AlertCircle, Clock, Smartphone, Info, ShieldCheck, Gauge, ExternalLink, Activity } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
async function getTestData(id: string) {
|
||||
@@ -22,115 +22,158 @@ export default async function TestDetailsPage({ params }: { params: Promise<{ id
|
||||
const diodeResults = test.diodeResults ? JSON.parse(test.diodeResults) as Record<string, number> : undefined;
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-20">
|
||||
<div className="flex items-center gap-4 text-sm font-medium text-slate-500 mb-2">
|
||||
<Link href="/" className="hover:text-sky-400 transition-colors">Dashboard</Link>
|
||||
<span>/</span>
|
||||
<span className="text-slate-300">Test Insights</span>
|
||||
<div className="space-y-10 pb-20 animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
||||
<div className="flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.2em] text-secondary">
|
||||
<Link href="/" className="hover:text-sky-400 transition-colors flex items-center gap-2">
|
||||
<Activity className="w-3 h-3" /> Dashboard
|
||||
</Link>
|
||||
<span className="opacity-20">/</span>
|
||||
<span className="text-secondary/70">Node Insights</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-white">
|
||||
Sequence Analysis: <span className="font-mono text-sky-400">{test.id.slice(-8).toUpperCase()}</span>
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-8 pb-8 border-b border-border">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<h1 className="text-5xl font-black tracking-tighter text-foreground font-mono">
|
||||
{test.id.slice(-8).toUpperCase()}
|
||||
</h1>
|
||||
{test.status === "PASS" ? (
|
||||
<span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" /> Nominal
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-rose-500/10 text-rose-400 border border-rose-500/20 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest flex items-center gap-1.5">
|
||||
<AlertCircle className="w-3.5 h-3.5" /> Anomaly Detected
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
{test.status === "PASS" ? (
|
||||
<span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2 shadow-[0_0_15px_rgba(16,185,129,0.1)]">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" /> Nominal State
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-rose-500/10 text-rose-400 border border-rose-500/20 px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2 shadow-[0_0_15px_rgba(244,63,94,0.1)]">
|
||||
<AlertCircle className="w-3.5 h-3.5" /> Critical Fault
|
||||
</span>
|
||||
)}
|
||||
<div className="px-3 py-1 bg-secondary/5 border border-border rounded-lg text-[9px] font-bold text-secondary uppercase tracking-widest">
|
||||
Sequence Verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<p className="text-secondary text-xs font-bold flex items-center gap-3 bg-secondary/5 px-4 py-2 rounded-2xl border border-border">
|
||||
<Smartphone className="w-4 h-4 text-sky-400" />
|
||||
<span className="text-secondary/80">Node:</span>
|
||||
<span className="text-foreground">{test.device.name && test.device.name !== "Unnamed Device" ? test.device.name : test.device.serialNumber}</span>
|
||||
<span className="text-secondary font-mono text-[10px] opacity-60">[{test.device.serialNumber}]</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-slate-400 flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Origin: <span className="font-bold text-slate-200">{test.device.name || "Unknown Head Unit"}</span>
|
||||
<span className="text-slate-600 font-mono text-xs">({test.device.serialNumber})</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-6 bg-background border border-border p-4 rounded-3xl backdrop-blur-md">
|
||||
<div className="text-right">
|
||||
<p className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Execution Timestamp</p>
|
||||
<p className="text-sm font-bold text-slate-300">{new Date(test.timestamp).toLocaleString()}</p>
|
||||
<p className="text-[10px] text-secondary font-black uppercase tracking-[0.2em] mb-1">Capture Timestamp</p>
|
||||
<p className="text-sm font-black text-foreground font-mono tabular-nums">{new Date(test.timestamp).toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
|
||||
<Clock className="w-5 h-5 text-slate-400" />
|
||||
<div className="w-12 h-12 rounded-2xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Spectral Analysis Card */}
|
||||
<div className="lg:col-span-2 bg-white/[0.02] border border-white/5 rounded-3xl p-8 backdrop-blur-md relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5">
|
||||
<Gauge className="w-32 h-32" />
|
||||
<div className="lg:col-span-2 bg-background border border-border rounded-[2.5rem] p-10 backdrop-blur-xl relative overflow-hidden group">
|
||||
<div className="absolute -top-24 -right-24 p-8 opacity-[0.03] transition-transform duration-1000 group-hover:scale-110 group-hover:rotate-12">
|
||||
<Gauge className="w-96 h-96" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Info className="w-5 h-5 text-sky-400" />
|
||||
<h2 className="text-xs font-bold uppercase tracking-[0.2em] text-slate-500 italic">Spectral Diode Response</h2>
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-sky-500/10 flex items-center justify-center">
|
||||
<Info className="w-5 h-5 text-sky-400" />
|
||||
</div>
|
||||
<h2 className="text-[10px] font-black uppercase tracking-[0.3em] text-secondary">Response Spectrum Analysis</h2>
|
||||
</div>
|
||||
<div className="px-4 py-1.5 bg-sky-500/10 border border-sky-500/20 rounded-full text-[9px] font-black text-sky-400 uppercase tracking-widest">
|
||||
Calibration: 0.8V VDD
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{diodeResults ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-10">
|
||||
{Object.entries(diodeResults).map(([pin, voltage]) => (
|
||||
<div key={pin} className="space-y-2">
|
||||
<div className="flex justify-between items-end text-[10px] font-bold uppercase tracking-wider">
|
||||
<span className="text-slate-400">{pin.replace("_", " ")}</span>
|
||||
<span className="text-sky-400 font-mono text-xs">{voltage.toFixed(3)}V</span>
|
||||
<div key={pin} className="space-y-4">
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.15em] text-slate-500 mb-0.5">{pin.replace("_", " ")}</span>
|
||||
<span className="text-[8px] text-slate-600 font-black uppercase">Spectral Diode Path</span>
|
||||
</div>
|
||||
<span className="text-sky-400 font-mono text-lg font-black tracking-tight">{voltage.toFixed(3)}<span className="text-[10px] ml-0.5 opacity-60">V</span></span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
|
||||
<div className="h-3 w-full bg-white/5 rounded-full overflow-hidden p-0.5 border border-white/5">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-sky-600 to-sky-400 rounded-full"
|
||||
className="h-full bg-gradient-to-r from-sky-600 via-sky-400 to-sky-300 rounded-full transition-all duration-1000 shadow-[0_0_12px_rgba(56,189,248,0.3)] relative group-hover:brightness-110"
|
||||
style={{ width: `${Math.min((voltage / 0.8) * 100, 100)}%` }}
|
||||
/>
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-slate-500 italic">
|
||||
No detailed diode metrics available for this sequence.
|
||||
<div className="text-center py-20 flex flex-col items-center gap-4">
|
||||
<AlertCircle className="w-12 h-12 text-slate-700" />
|
||||
<p className="text-slate-500 italic font-bold text-sm">No detailed spectral metrics available for this sequence.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Intelligence Report Summary */}
|
||||
<div className="bg-white/[0.02] border border-white/5 rounded-3xl p-8 flex flex-col gap-6">
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-slate-500 mb-4 flex items-center gap-2">
|
||||
<ShieldCheck className="w-4 h-4 text-sky-400" />
|
||||
Validation Report
|
||||
</h3>
|
||||
<div className="bg-white/5 border border-white/5 rounded-2xl p-4">
|
||||
<p className="text-sm italic text-slate-300 leading-relaxed font-serif">
|
||||
"{test.summary}"
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
<div className="bg-background border border-border rounded-[2rem] p-8 flex flex-col gap-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-6 opacity-[0.03]">
|
||||
<ShieldCheck className="w-20 h-20" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-secondary mb-6 flex items-center gap-3">
|
||||
<ShieldCheck className="w-4 h-4 text-sky-400" />
|
||||
Validation Report
|
||||
</h3>
|
||||
<div className="bg-gradient-to-br from-secondary/5 to-transparent border border-border rounded-3xl p-6 relative group text-foreground">
|
||||
<p className="text-sm font-bold leading-loose italic">
|
||||
"{test.summary}"
|
||||
</p>
|
||||
<div className="mt-4 pt-4 border-t border-border flex items-center justify-between">
|
||||
<span className="text-[8px] font-black uppercase text-secondary tracking-widest">Synthesized by AI Engine</span>
|
||||
<span className="text-emerald-500 text-[8px] font-black uppercase tracking-widest">Authenticated</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-secondary/5 border border-border rounded-2xl p-4 transition-colors hover:bg-secondary/10">
|
||||
<p className="text-[9px] font-black uppercase text-secondary mb-2 tracking-widest">Architecture</p>
|
||||
<p className="text-xs font-black text-foreground">HDMI v1.4b <span className="text-[8px] opacity-40 ml-1">ENCODED</span></p>
|
||||
</div>
|
||||
<div className="bg-secondary/5 border border-border rounded-2xl p-4 transition-colors hover:bg-secondary/10">
|
||||
<p className="text-[9px] font-black uppercase text-secondary mb-2 tracking-widest">Type</p>
|
||||
<p className="text-xs font-black text-foreground font-mono">{test.type}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center justify-center gap-3 w-full py-4 bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] transition-all text-sky-400 shadow-sm hover:shadow-sky-500/10 group"
|
||||
>
|
||||
Re-Orchestrate Node <ExternalLink className="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-6 border-t border-white/5">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-white/[0.01] border border-white/5 rounded-xl p-3">
|
||||
<p className="text-[10px] font-bold uppercase text-slate-500 mb-1">Architecture</p>
|
||||
<p className="text-xs font-bold text-slate-300">HDMI v1.4b</p>
|
||||
</div>
|
||||
<div className="bg-white/[0.01] border border-white/5 rounded-xl p-3">
|
||||
<p className="text-[10px] font-bold uppercase text-slate-500 mb-1">Probe Type</p>
|
||||
<p className="text-xs font-bold text-slate-300">{test.type}</p>
|
||||
</div>
|
||||
<div className="bg-amber-500/5 border border-amber-500/10 rounded-2xl p-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Info className="w-4 h-4 text-amber-500" />
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-amber-500">Security Advisory</span>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/admin"
|
||||
className="mt-6 flex items-center justify-center gap-2 w-full py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all text-slate-300"
|
||||
>
|
||||
Re-Orchestrate Node <ExternalLink className="w-3 h-3" />
|
||||
</Link>
|
||||
<p className="text-[10px] text-amber-500/60 leading-relaxed font-medium">
|
||||
Telemetry data is signed with hardware-level HMAC. Direct physical access to the head unit is required for re-calibration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
11
src/components/theme-provider.tsx
Normal file
11
src/components/theme-provider.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NextThemesProvider>) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
}
|
||||
38
src/components/theme-toggle.tsx
Normal file
38
src/components/theme-toggle.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = React.useState(false);
|
||||
|
||||
// Avoid hydration mismatch
|
||||
React.useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-all duration-300 group relative overflow-hidden"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-sky-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative z-10">
|
||||
{theme === "dark" ? (
|
||||
<Sun className="w-5 h-5 animate-in zoom-in duration-300" />
|
||||
) : (
|
||||
<Moon className="w-5 h-5 animate-in zoom-in duration-300" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user