import React from 'react'; import Header from './components/Header'; import Hero from './components/Hero'; import Footer from './components/Footer'; import { Container } from '@/components/ui/container'; import { Card } from '@/components/ui/card'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts'; import { Activity, Terminal, Database, Zap, Box, Layers, ChevronRight, RefreshCcw, Wifi } from 'lucide-react'; const data = [ { name: '00:00', val: 400, load: 240 }, { name: '04:00', val: 300, load: 139 }, { name: '08:00', val: 900, load: 980 }, { name: '12:00', val: 600, load: 390 }, { name: '16:00', val: 700, load: 480 }, { name: '20:00', val: 800, load: 380 }, { name: '24:00', val: 500, load: 430 }, ]; export default function App() { return (

{/* Dashboard Grid Section */}

{/* Left Column: Data Stream */}

{/* Visual Chart Card */}

POWER_FLUX_LOG

{/* Grid of Mini Stats */}

} label="DB_NODES" value="24/24" color="bg-primary" /> } label="GRID_VOLTAGE" value="1.2MV" color="bg-accent" /> } label="P2P_SIGNAL" value="GOOD" color="bg-primary" />

{/* Right Column: Sidebar Terminal */}

{/* System Status Feed */}

SYSLOG_FEED

SCANNING_NETWORK...

{[1,2,3].map(i =>

)}

{/* Sub-Card: Image Info */}

SECTOR_VISUAL

Location: Core_Facility_A1

{/* Feature Grid / Inventory Section */}

NODE_INVENTORY

08/12

{/* CTA Strip */}

SYSTEM_OVERRIDE_INITIATED

Awaiting manual confirmation for sector wide deployment

); } function MiniStatCard({ icon, label, value, color }: { icon: React.ReactNode, label: string, value: string, color: string }) { return (

{icon}

{label}

{value}

); } function LogEntry({ time, status, msg, isError = false }: { time: string, status: string, msg: string, isError?: boolean }) { return (

{time} [{status}] {msg}

); } function InventoryCard({ id, type, health, status, warning = false, isError = false }: { id: string, type: string, health: number, status: string, warning?: boolean, isError?: boolean }) { const statusColor = isError ? 'bg-accent' : warning ? 'bg-yellow-500' : 'bg-primary'; return (

{id}

UNIT_TYPE {type}

HEALTH {health}%

{status}

); }

Brutalist Dashboard Design