import AppLayout from '@/Layouts/AppLayout'; import { Head } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { Server, Monitor, Box, Cloud, Shield, AlertTriangle, Activity, TrendingUp, Cpu, MemoryStick, HardDrive, Wifi } from 'lucide-react'; import { StatCard, GlassCard } from '@/Components/ui/GlassCard'; import { StatusBadge } from '@/Components/ui/StatusBadge'; import { ProgressBar } from '@/Components/ui/ProgressBar'; import { timeAgo, getStatusDot } from '@/lib/utils'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'; const FADE_UP = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }; const CONTAINER = { hidden: {}, show: { transition: { staggerChildren: 0.05 } } }; // Mock chart data - replace with real metrics const cpuData = Array.from({ length: 20 }, (_, i) => ({ t: `${i}m`, cpu: Math.round(20 + Math.random() * 50), mem: Math.round(40 + Math.random() * 40) })); const PROVIDER_COLORS = { aws: '#FF9900', alibaba: '#FF6A00', tencent: '#00A3FF', gcp: '#4285F4', azure: '#0078D4' }; export default function Dashboard({ stats, hypervisors, endpoints, cloud_accounts, recent_alerts }) { return ( {/* ── Header ──────────────────────────────────────── */}

Infrastructure Overview

Real-time view across all platforms

Live
{/* ── Top stats ────────────────────────────────────── */} 0 ? 'red' : 'green'} /> = 80 ? 'green' : stats.security_score >= 60 ? 'yellow' : 'red'} /> {/* ── Charts Row ───────────────────────────────────── */} {/* CPU / Memory chart */}

Resource Utilization

Avg CPU & Memory — last 20 min

CPU Memory
{/* VM Status Donut */}

VM Status

Across all hypervisors

{[{ label: 'Running', val: stats.vms_running, color: 'bg-cyan-400' }, { label: 'Stopped', val: stats.vms_stopped, color: 'bg-slate-600' }].map(s => (
{s.label}
{s.val}
))}
{/* ── Hypervisors & Endpoints ───────────────────────── */} {/* Hypervisors */}

Hypervisors

View all →
{hypervisors?.slice(0, 6).map(h => (

{h.name}

{h.type} · {timeAgo(h.last_sync_at)}

 ))} {(!hypervisors || hypervisors.length === 0) && (

No hypervisors configured

)}
{/* Docker Endpoints */}

Docker Endpoints

View all →
{endpoints?.slice(0, 6).map(e => (

{e.name}

{e.type}

))} {(!endpoints || endpoints.length === 0) && (

No Docker endpoints

)}
{/* ── Cloud & Alerts ────────────────────────────────── */} {/* Cloud accounts */}

Cloud Accounts

Manage →
{cloud_accounts?.map(acc => (
{acc.provider?.toUpperCase().slice(0, 2)}

{acc.name}

))} {(!cloud_accounts || cloud_accounts.length === 0) && (

No cloud accounts

)}
{/* Recent Alerts */}

Active Alerts

View all →
{recent_alerts?.map(alert => (

{alert.title}

{alert.target_name} · {timeAgo(alert.created_at)}

))} {(!recent_alerts || recent_alerts.length === 0) && (

All clear — no active alerts

)}
); }