@libredb/studio 0.9.7

package/src/components/admin/tabs/OverviewTab.tsx

@@ -0,0 +1,1328 @@
+'use client';
+
+import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { storage } from '@/lib/storage';
+import { useAllConnections } from '@/hooks/use-all-connections';
+import { getDBIcon, getDBColor } from '@/lib/db-ui-config';
+import {
+  type DatabaseType,
+  type DatabaseConnection,
+  type QueryHistoryItem,
+  ENVIRONMENT_COLORS,
+  ENVIRONMENT_LABELS,
+} from '@/lib/types';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  RadialBarChart,
+  RadialBar,
+} from 'recharts';
+import { format, subDays, startOfDay } from 'date-fns';
+import {
+  Activity,
+  RefreshCw,
+  TrendingUp,
+  TrendingDown,
+  Zap,
+  Clock,
+  Database,
+  Wrench,
+  Shield,
+  ArrowRight,
+  CheckCircle2,
+  XCircle,
+  Link2,
+  HardDrive,
+  Sparkles,
+  Radio,
+  Gauge,
+} from 'lucide-react';
+import { motion, AnimatePresence, type Variants } from 'framer-motion';
+import Link from 'next/link';
+import type { FleetHealthItem } from '@/app/api/admin/fleet-health/route';
+import type { AuditEvent } from '@/lib/audit';
+
+// ─── Animation Variants ─────────────────────────────────────────────────────
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.08, delayChildren: 0.1 },
+  },
+} as const;
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: 'spring' as const, stiffness: 300, damping: 24 },
+  },
+};
+
+const heroVariants = {
+  hidden: { opacity: 0, y: -30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { type: 'spring' as const, stiffness: 200, damping: 20 },
+  },
+};
+
+const feedItemVariants: Variants = {
+  hidden: { opacity: 0, x: -10 },
+  visible: (i: number) => ({
+    opacity: 1,
+    x: 0,
+    transition: { delay: i * 0.05, type: 'spring' as const, stiffness: 300, damping: 24 },
+  }),
+};
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+const DARK_TOOLTIP_STYLE = {
+  backgroundColor: '#18181b',
+  border: '1px solid rgba(255,255,255,0.1)',
+  borderRadius: '8px',
+  fontSize: 12,
+  color: '#a1a1aa',
+};
+
+const GAUGE_COLORS = {
+  excellent: '#10b981',
+  good: '#3b82f6',
+  warning: '#f59e0b',
+  critical: '#ef4444',
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function getGaugeColor(value: number, thresholds = { warning: 70, critical: 50 }) {
+  if (value >= 90) return GAUGE_COLORS.excellent;
+  if (value >= thresholds.warning) return GAUGE_COLORS.good;
+  if (value >= thresholds.critical) return GAUGE_COLORS.warning;
+  return GAUGE_COLORS.critical;
+}
+
+function getGaugeColorReverse(value: number, thresholds = { warning: 200, critical: 500 }) {
+  if (value <= 50) return GAUGE_COLORS.excellent;
+  if (value <= thresholds.warning) return GAUGE_COLORS.good;
+  if (value <= thresholds.critical) return GAUGE_COLORS.warning;
+  return GAUGE_COLORS.critical;
+}
+
+function formatRelativeTime(date: Date | string) {
+  const now = Date.now();
+  const then = new Date(date).getTime();
+  const diff = Math.max(0, now - then);
+  const secs = Math.floor(diff / 1000);
+  if (secs < 60) return 'just now';
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function formatNumber(n: number) {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toString();
+}
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface ActivityFeedItem {
+  id: string;
+  type: 'audit' | 'query';
+  text: string;
+  status: 'success' | 'failure';
+  time: string | Date;
+  connectionName?: string;
+}
+
+// ─── useAnimatedCounter Hook ─────────────────────────────────────────────────
+
+function useAnimatedCounter(target: number, duration = 1500) {
+  const [value, setValue] = useState(0);
+  const prevTarget = useRef(0);
+
+  useEffect(() => {
+    const start = prevTarget.current;
+    prevTarget.current = target;
+    if (target === 0) {
+      setValue(0);
+      return;
+    }
+
+    const startTime = performance.now();
+    let raf: number;
+
+    const tick = (now: number) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      // ease-out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setValue(Math.round(start + (target - start) * eased));
+      if (progress < 1) {
+        raf = requestAnimationFrame(tick);
+      }
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+
+  return value;
+}
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+interface OverviewTabProps {
+  user: { username: string; role: string } | null;
+}
+
+export function OverviewTab({ user }: OverviewTabProps) {
+  const [connections, setConnections] = useState<DatabaseConnection[]>([]);
+  const [history, setHistory] = useState<QueryHistoryItem[]>([]);
+  const [fleetHealth, setFleetHealth] = useState<FleetHealthItem[]>([]);
+  const [fleetLoading, setFleetLoading] = useState(false);
+  const [auditEvents, setAuditEvents] = useState<AuditEvent[]>([]);
+
+  const { connections: allConns } = useAllConnections();
+  useEffect(() => {
+    setConnections(allConns);
+    setHistory(storage.getHistory());
+  }, [allConns]);
+
+  // Fetch audit events for activity feed
+  useEffect(() => {
+    fetch('/api/admin/audit?limit=10')
+      .then((r) => r.json())
+      .then((d) => setAuditEvents(d.events || []))
+      .catch(() => {});
+  }, []);
+
+  const fetchFleetHealth = useCallback(async () => {
+    if (connections.length === 0) return;
+    setFleetLoading(true);
+    try {
+      const res = await fetch('/api/admin/fleet-health', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ connections }),
+      });
+      const data = await res.json();
+      if (data.results) setFleetHealth(data.results);
+    } catch {
+      // silently fail
+    } finally {
+      setFleetLoading(false);
+    }
+  }, [connections]);
+
+  useEffect(() => {
+    if (connections.length > 0) fetchFleetHealth();
+  }, [connections, fetchFleetHealth]);
+
+  // Auto-refresh fleet health every 60 seconds
+  useEffect(() => {
+    if (connections.length === 0) return;
+    const interval = setInterval(fetchFleetHealth, 60000);
+    return () => clearInterval(interval);
+  }, [connections, fetchFleetHealth]);
+
+  const queryStats = useMemo(() => {
+    const total = history.length;
+    const successful = history.filter((h) => h.status === 'success').length;
+    const failed = total - successful;
+    const successRate = total > 0 ? Math.round((successful / total) * 100) : 0;
+    const avgTime =
+      total > 0
+        ? Math.round(
+            history.reduce((sum, h) => sum + h.executionTime, 0) / total
+          )
+        : 0;
+
+    const now = new Date();
+    const byDay: { day: string; success: number; fail: number }[] = [];
+    for (let i = 6; i >= 0; i--) {
+      const dayStart = startOfDay(subDays(now, i));
+      const dayEnd = startOfDay(subDays(now, i - 1));
+      const dayItems = history.filter((h) => {
+        const t = new Date(h.executedAt).getTime();
+        return t >= dayStart.getTime() && t < dayEnd.getTime();
+      });
+      byDay.push({
+        day: format(dayStart, 'EEE'),
+        success: dayItems.filter((h) => h.status === 'success').length,
+        fail: dayItems.filter((h) => h.status !== 'success').length,
+      });
+    }
+
+    return { total, successful, failed, successRate, avgTime, byDay };
+  }, [history]);
+
+  const healthScore = useMemo(() => {
+    if (fleetHealth.length === 0) return 0;
+    const healthy = fleetHealth.filter((h) => h.status === 'healthy').length;
+    return Math.round((healthy / fleetHealth.length) * 100);
+  }, [fleetHealth]);
+
+  const todayQueries = useMemo(() => {
+    const todayStart = startOfDay(new Date()).getTime();
+    return history.filter((h) => new Date(h.executedAt).getTime() >= todayStart).length;
+  }, [history]);
+
+  const yesterdayQueries = useMemo(() => {
+    const now = new Date();
+    const yesterdayStart = startOfDay(subDays(now, 1)).getTime();
+    const todayStart = startOfDay(now).getTime();
+    return history.filter((h) => {
+      const t = new Date(h.executedAt).getTime();
+      return t >= yesterdayStart && t < todayStart;
+    }).length;
+  }, [history]);
+
+  const avgLatency = useMemo(() => {
+    const healthy = fleetHealth.filter((h) => h.status !== 'error');
+    if (healthy.length === 0) return 0;
+    return Math.round(
+      healthy.reduce((sum, h) => sum + h.latencyMs, 0) / healthy.length
+    );
+  }, [fleetHealth]);
+
+  const totalDBSize = useMemo(() => {
+    let totalBytes = 0;
+    for (const item of fleetHealth) {
+      if (!item.databaseSize) continue;
+      const s = item.databaseSize.toLowerCase();
+      const num = parseFloat(s);
+      if (isNaN(num)) continue;
+      if (s.includes('gb')) totalBytes += num * 1024 * 1024 * 1024;
+      else if (s.includes('mb')) totalBytes += num * 1024 * 1024;
+      else if (s.includes('kb')) totalBytes += num * 1024;
+      else totalBytes += num;
+    }
+    if (totalBytes === 0) return '0';
+    if (totalBytes >= 1024 * 1024 * 1024) return `${(totalBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+    if (totalBytes >= 1024 * 1024) return `${(totalBytes / (1024 * 1024)).toFixed(0)} MB`;
+    return `${(totalBytes / 1024).toFixed(0)} KB`;
+  }, [fleetHealth]);
+
+  // Activity feed: merge audit events + recent history
+  const activityFeed = useMemo(() => {
+    const items: ActivityFeedItem[] = [];
+
+    for (const e of auditEvents) {
+      items.push({
+        id: e.id,
+        type: 'audit',
+        text: `${e.action} ${e.target}`,
+        status: e.result,
+        time: e.timestamp,
+        connectionName: e.connectionName,
+      });
+    }
+
+    for (const h of history.slice(0, 10)) {
+      items.push({
+        id: `q-${h.executedAt}-${Math.random().toString(36).slice(2, 6)}`,
+        type: 'query',
+        text: h.query.length > 60 ? h.query.slice(0, 60) + '...' : h.query,
+        status: h.status === 'success' ? 'success' : 'failure',
+        time: h.executedAt,
+        connectionName: h.connectionName,
+      });
+    }
+
+    items.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
+    return items.slice(0, 15);
+  }, [auditEvents, history]);
+
+  const hasConnections = connections.length > 0;
+
+  if (!hasConnections) {
+    return <EmptyState />;
+  }
+
+  return (
+    <motion.div
+      className="space-y-6"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      {/* SECTION 1: Hero Status Banner */}
+      <HeroStatusBanner
+        healthScore={healthScore}
+        fleetHealth={fleetHealth}
+        connections={connections}
+        queryStats={queryStats}
+        todayQueries={todayQueries}
+        yesterdayQueries={yesterdayQueries}
+        totalDBSize={totalDBSize}
+        user={user}
+        fleetLoading={fleetLoading}
+        onRefresh={fetchFleetHealth}
+      />
+
+      {/* SECTION 2: Fleet Health Grid */}
+      <FleetHealthSection
+        fleetHealth={fleetHealth}
+        fleetLoading={fleetLoading}
+        connections={connections}
+      />
+
+      {/* SECTION 3: Key Metrics */}
+      <KeyMetricsSection
+        queryStats={queryStats}
+        healthScore={healthScore}
+        avgLatency={avgLatency}
+        todayQueries={todayQueries}
+        yesterdayQueries={yesterdayQueries}
+      />
+
+      {/* SECTION 4: Analytics */}
+      <AnalyticsSection
+        queryStats={queryStats}
+        activityFeed={activityFeed}
+      />
+
+      {/* SECTION 5: Quick Actions */}
+      <QuickActionsSection />
+    </motion.div>
+  );
+}
+
+// ─── SECTION 1: Hero Status Banner ──────────────────────────────────────────
+
+function HeroStatusBanner({
+  healthScore,
+  fleetHealth,
+  connections,
+  queryStats,
+  todayQueries,
+  yesterdayQueries,
+  totalDBSize,
+  user,
+  fleetLoading,
+  onRefresh,
+}: {
+  healthScore: number;
+  fleetHealth: FleetHealthItem[];
+  connections: DatabaseConnection[];
+  queryStats: { total: number; successRate: number; avgTime: number };
+  todayQueries: number;
+  yesterdayQueries: number;
+  totalDBSize: string;
+  user: { username: string; role: string } | null;
+  fleetLoading: boolean;
+  onRefresh: () => void;
+}) {
+  const animatedScore = useAnimatedCounter(healthScore);
+  const animatedConns = useAnimatedCounter(connections.length);
+  const animatedQueries = useAnimatedCounter(queryStats.total);
+  const animatedToday = useAnimatedCounter(todayQueries);
+
+  const gaugeColor = getGaugeColor(healthScore);
+  const gaugeData = [{ value: healthScore, fill: gaugeColor }];
+
+  const healthyCount = fleetHealth.filter((h) => h.status === 'healthy').length;
+  const degradedCount = fleetHealth.filter((h) => h.status === 'degraded').length;
+  const errorCount = fleetHealth.filter((h) => h.status === 'error').length;
+
+  const statusText =
+    errorCount > 0
+      ? 'Attention Required'
+      : degradedCount > 0
+        ? 'Degraded Performance'
+        : 'All Systems Operational';
+
+  const statusColor =
+    errorCount > 0
+      ? 'text-red-400'
+      : degradedCount > 0
+        ? 'text-amber-400'
+        : 'text-emerald-400';
+
+  const statusGlow =
+    errorCount > 0
+      ? 'shadow-[0_0_20px_rgba(239,68,68,0.15)]'
+      : degradedCount > 0
+        ? 'shadow-[0_0_20px_rgba(245,158,11,0.15)]'
+        : 'shadow-[0_0_20px_rgba(16,185,129,0.1)]';
+
+  const queryTrend = todayQueries - yesterdayQueries;
+
+  return (
+    <motion.div variants={heroVariants} className="relative">
+      <div
+        className={`relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-zinc-900/80 via-zinc-950 to-zinc-900/80 p-6 ${statusGlow}`}
+      >
+        {/* Decorative blur orbs */}
+        <div className="absolute top-0 left-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute bottom-0 right-1/4 w-48 h-48 bg-emerald-500/5 rounded-full blur-3xl pointer-events-none" />
+
+        <div className="relative flex flex-col md:flex-row gap-6 items-center">
+          {/* Left: Radial Health Gauge */}
+          <div className="relative flex-shrink-0">
+            <div className="w-[160px] h-[160px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <RadialBarChart
+                  innerRadius="70%"
+                  outerRadius="90%"
+                  barSize={12}
+                  data={gaugeData}
+                  startAngle={90}
+                  endAngle={-270}
+                >
+                  <RadialBar
+                    dataKey="value"
+                    cornerRadius={6}
+                    background={{ fill: 'rgba(255,255,255,0.04)' }}
+                  />
+                </RadialBarChart>
+              </ResponsiveContainer>
+            </div>
+            {/* Center overlay */}
+            <div className="absolute inset-0 flex flex-col items-center justify-center">
+              <span
+                className="text-3xl font-bold tabular-nums"
+                style={{ color: gaugeColor }}
+              >
+                {animatedScore}%
+              </span>
+              <span className="text-[10px] text-zinc-500 uppercase tracking-wider">
+                Health
+              </span>
+            </div>
+            {/* LIVE badge */}
+            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5">
+              <motion.div
+                className="w-2 h-2 rounded-full bg-emerald-500"
+                animate={{ scale: [1, 1.05, 1], opacity: [0.7, 1, 0.7] }}
+                transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
+              />
+              <span className="text-[9px] font-bold text-emerald-400 uppercase tracking-widest">
+                Live
+              </span>
+            </div>
+          </div>
+
+          {/* Right: Counter Cards + Status */}
+          <div className="flex-1 min-w-0 space-y-4">
+            {/* Status Line */}
+            <div className="flex items-center justify-between gap-3 flex-wrap">
+              <div className="flex items-center gap-3">
+                <span className={`text-sm font-bold ${statusColor}`}>
+                  {statusText}
+                </span>
+                <div className="flex gap-1.5 text-[10px]">
+                  {healthyCount > 0 && (
+                    <Badge
+                      variant="outline"
+                      className="border-emerald-500/30 text-emerald-400 h-5 text-[9px]"
+                    >
+                      {healthyCount} healthy
+                    </Badge>
+                  )}
+                  {degradedCount > 0 && (
+                    <Badge
+                      variant="outline"
+                      className="border-amber-500/30 text-amber-400 h-5 text-[9px]"
+                    >
+                      {degradedCount} degraded
+                    </Badge>
+                  )}
+                  {errorCount > 0 && (
+                    <Badge
+                      variant="outline"
+                      className="border-red-500/30 text-red-400 h-5 text-[9px]"
+                    >
+                      {errorCount} error
+                    </Badge>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {user && (
+                  <Badge
+                    variant="outline"
+                    className="border-white/10 text-zinc-500 h-5 text-[9px]"
+                  >
+                    {user.username} ({user.role})
+                  </Badge>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 text-[10px] text-zinc-500 hover:text-zinc-300"
+                  onClick={onRefresh}
+                  disabled={fleetLoading}
+                >
+                  <RefreshCw
+                    className={`w-3 h-3 mr-1 ${fleetLoading ? 'animate-spin' : ''}`}
+                  />
+                  Refresh
+                </Button>
+              </div>
+            </div>
+
+            {/* Counter Cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              <CounterCard
+                icon={Link2}
+                label="Connections"
+                value={animatedConns}
+                suffix=""
+                color="text-blue-400"
+              />
+              <CounterCard
+                icon={Zap}
+                label="Total Queries"
+                value={animatedQueries}
+                suffix=""
+                color="text-purple-400"
+                formatValue={formatNumber}
+              />
+              <CounterCard
+                icon={HardDrive}
+                label="DB Size"
+                value={totalDBSize}
+                suffix=""
+                color="text-emerald-400"
+                isString
+              />
+              <CounterCard
+                icon={Activity}
+                label="Today"
+                value={animatedToday}
+                suffix=""
+                color="text-amber-400"
+                trend={queryTrend}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+function CounterCard({
+  icon: Icon,
+  label,
+  value,
+  suffix,
+  color,
+  trend,
+  isString,
+  formatValue,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: number | string;
+  suffix: string;
+  color: string;
+  trend?: number;
+  isString?: boolean;
+  formatValue?: (n: number) => string;
+}) {
+  const displayValue = isString
+    ? value
+    : formatValue
+      ? formatValue(value as number)
+      : value;
+
+  return (
+    <div className="rounded-xl border border-white/5 bg-white/[0.02] p-3">
+      <div className="flex items-center gap-1.5 mb-1.5">
+        <Icon className={`w-3.5 h-3.5 ${color}`} />
+        <span className="text-[10px] text-zinc-500 uppercase tracking-wider">
+          {label}
+        </span>
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className="text-2xl font-bold text-zinc-100 tabular-nums">
+          {displayValue}
+        </span>
+        {suffix && (
+          <span className="text-xs text-zinc-500">{suffix}</span>
+        )}
+      </div>
+      {trend !== undefined && trend !== 0 && (
+        <div
+          className={`flex items-center gap-0.5 mt-1 text-[10px] ${
+            trend > 0 ? 'text-emerald-400' : 'text-red-400'
+          }`}
+        >
+          {trend > 0 ? (
+            <TrendingUp className="w-3 h-3" />
+          ) : (
+            <TrendingDown className="w-3 h-3" />
+          )}
+          <span>
+            {trend > 0 ? '+' : ''}
+            {trend} vs yesterday
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── SECTION 2: Fleet Health Grid ────────────────────────────────────────────
+
+function FleetHealthSection({
+  fleetHealth,
+  fleetLoading,
+  connections,
+}: {
+  fleetHealth: FleetHealthItem[];
+  fleetLoading: boolean;
+  connections: DatabaseConnection[];
+}) {
+  if (connections.length === 0) return null;
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'healthy':
+        return {
+          dot: 'bg-emerald-500',
+          border: 'border-emerald-500/20 hover:border-emerald-500/40',
+          glow: 'hover:shadow-[0_0_30px_rgba(16,185,129,0.08)]',
+          gradient: 'from-emerald-500/60 via-emerald-400/40',
+          latencyColor: '#10b981',
+        };
+      case 'degraded':
+        return {
+          dot: 'bg-amber-500',
+          border: 'border-amber-500/20 hover:border-amber-500/40',
+          glow: 'hover:shadow-[0_0_30px_rgba(245,158,11,0.08)]',
+          gradient: 'from-amber-500/60 via-amber-400/40',
+          latencyColor: '#f59e0b',
+        };
+      default:
+        return {
+          dot: 'bg-red-500',
+          border: 'border-red-500/20 hover:border-red-500/40',
+          glow: 'hover:shadow-[0_0_30px_rgba(239,68,68,0.08)]',
+          gradient: 'from-red-500/60 via-red-400/40',
+          latencyColor: '#ef4444',
+        };
+    }
+  };
+
+  return (
+    <motion.div variants={itemVariants}>
+      <div className="flex items-center gap-2 mb-3">
+        <Radio className="h-4 w-4 text-blue-400" />
+        <h2 className="text-sm font-bold text-zinc-300">Fleet Status</h2>
+        <span className="text-[10px] text-zinc-600">
+          {fleetHealth.length} endpoint{fleetHealth.length !== 1 ? 's' : ''}
+        </span>
+      </div>
+
+      {fleetLoading && fleetHealth.length === 0 ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[...Array(3)].map((_, i) => (
+            <div
+              key={i}
+              className="rounded-xl border border-white/5 bg-zinc-900/50 p-4"
+            >
+              <Skeleton className="h-4 w-24 mb-3 bg-zinc-800" />
+              <Skeleton className="h-3 w-32 mb-2 bg-zinc-800" />
+              <Skeleton className="h-2 w-full bg-zinc-800" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {fleetHealth.map((item) => {
+            const colors = getStatusColor(item.status);
+            const Icon = getDBIcon(item.type as DatabaseType);
+            const maxLatency = 500;
+            const latencyPct = Math.min((item.latencyMs / maxLatency) * 100, 100);
+
+            return (
+              <motion.a
+                key={item.connectionId}
+                href="/admin?tab=monitoring"
+                variants={itemVariants}
+                whileHover={{ scale: 1.02, y: -2 }}
+                className={`group relative rounded-xl border-2 ${colors.border} bg-zinc-900/50 p-4 transition-all duration-200 hover:bg-white/[0.04] ${colors.glow} cursor-pointer block overflow-hidden`}
+              >
+                {/* Top gradient glow line */}
+                <div
+                  className={`absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent ${colors.gradient} to-transparent`}
+                />
+
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`w-2 h-2 rounded-full ${colors.dot} ${item.status === 'healthy' ? 'animate-pulse' : ''}`}
+                    />
+                    <span className="text-sm font-medium text-zinc-200 truncate max-w-[150px]">
+                      {item.connectionName}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {item.environment && (
+                      <Badge
+                        variant="outline"
+                        className="text-[9px] h-4"
+                        style={{
+                          borderColor:
+                            ENVIRONMENT_COLORS[
+                              item.environment as keyof typeof ENVIRONMENT_COLORS
+                            ],
+                          color:
+                            ENVIRONMENT_COLORS[
+                              item.environment as keyof typeof ENVIRONMENT_COLORS
+                            ],
+                        }}
+                      >
+                        {ENVIRONMENT_LABELS[
+                          item.environment as keyof typeof ENVIRONMENT_LABELS
+                        ] || item.environment}
+                      </Badge>
+                    )}
+                    <div className="p-1 rounded bg-white/[0.04]">
+                      <Icon
+                        className={`w-3.5 h-3.5 ${getDBColor(item.type as DatabaseType)}`}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Latency bar */}
+                <div className="mb-2">
+                  <div className="h-1.5 rounded-full bg-white/[0.04] overflow-hidden">
+                    <motion.div
+                      className="h-full rounded-full"
+                      style={{ backgroundColor: colors.latencyColor }}
+                      initial={{ width: 0 }}
+                      animate={{ width: `${latencyPct}%` }}
+                      transition={{ duration: 1, delay: 0.3 }}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 text-[11px] text-zinc-500">
+                  <span className="font-mono text-zinc-400">
+                    {item.status === 'error' ? 'timeout' : `${item.latencyMs}ms`}
+                  </span>
+                  {item.databaseSize && (
+                    <>
+                      <span className="text-zinc-700">&middot;</span>
+                      <span className="font-mono text-zinc-400">
+                        {item.databaseSize}
+                      </span>
+                    </>
+                  )}
+                  {item.activeConnections !== undefined && (
+                    <>
+                      <span className="text-zinc-700">&middot;</span>
+                      <span className="font-mono text-zinc-400">
+                        {item.activeConnections} conn
+                      </span>
+                    </>
+                  )}
+                </div>
+
+                {item.error && (
+                  <div className="text-red-400 text-[10px] truncate mt-1.5">
+                    {item.error}
+                  </div>
+                )}
+              </motion.a>
+            );
+          })}
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}
+
+// ─── SECTION 3: Key Metrics Dashboard ────────────────────────────────────────
+
+function KeyMetricsSection({
+  queryStats,
+  healthScore,
+  avgLatency,
+  todayQueries,
+  yesterdayQueries,
+}: {
+  queryStats: { total: number; successRate: number; avgTime: number };
+  healthScore: number;
+  avgLatency: number;
+  todayQueries: number;
+  yesterdayQueries: number;
+}) {
+  return (
+    <motion.div variants={itemVariants}>
+      <div className="flex items-center gap-2 mb-3">
+        <Gauge className="h-4 w-4 text-blue-400" />
+        <h2 className="text-sm font-bold text-zinc-300">Key Metrics</h2>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <MetricGauge
+          label="Query Success"
+          value={queryStats.successRate}
+          unit="%"
+          color={getGaugeColor(queryStats.successRate)}
+        />
+        <MetricGauge
+          label="Fleet Health"
+          value={healthScore}
+          unit="%"
+          color={getGaugeColor(healthScore)}
+        />
+        <MetricGauge
+          label="Avg Response"
+          value={Math.min(avgLatency, 500)}
+          displayValue={`${avgLatency}`}
+          unit="ms"
+          maxValue={500}
+          color={getGaugeColorReverse(avgLatency)}
+        />
+        <MetricBigNumber
+          label="Total Queries"
+          value={queryStats.total}
+          trend={todayQueries - yesterdayQueries}
+          icon={Zap}
+        />
+      </div>
+    </motion.div>
+  );
+}
+
+function MetricGauge({
+  label,
+  value,
+  displayValue,
+  unit,
+  color,
+  maxValue = 100,
+}: {
+  label: string;
+  value: number;
+  displayValue?: string;
+  unit: string;
+  color: string;
+  maxValue?: number;
+}) {
+  const pct = Math.round((value / maxValue) * 100);
+  const animatedValue = useAnimatedCounter(value);
+  const gaugeData = [{ value: pct, fill: color }];
+
+  return (
+    <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4 flex flex-col items-center">
+      <div className="relative w-[100px] h-[100px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <RadialBarChart
+            innerRadius="70%"
+            outerRadius="90%"
+            barSize={8}
+            data={gaugeData}
+            startAngle={90}
+            endAngle={-270}
+          >
+            <RadialBar
+              dataKey="value"
+              cornerRadius={4}
+              background={{ fill: 'rgba(255,255,255,0.03)' }}
+            />
+          </RadialBarChart>
+        </ResponsiveContainer>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className="text-xl font-bold tabular-nums"
+            style={{ color }}
+          >
+            {displayValue ?? animatedValue}
+          </span>
+          <span className="text-[9px] text-zinc-500">{unit}</span>
+        </div>
+      </div>
+      <span className="text-[10px] text-zinc-500 mt-1 uppercase tracking-wider">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function MetricBigNumber({
+  label,
+  value,
+  trend,
+  icon: Icon,
+}: {
+  label: string;
+  value: number;
+  trend: number;
+  icon: React.ComponentType<{ className?: string }>;
+}) {
+  const animatedValue = useAnimatedCounter(value);
+
+  return (
+    <div className="rounded-xl border border-white/5 bg-white/[0.02] p-4 flex flex-col items-center justify-center">
+      <div className="p-2 rounded-lg bg-purple-500/10 mb-2">
+        <Icon className="w-5 h-5 text-purple-400" />
+      </div>
+      <span className="text-3xl font-bold text-zinc-100 tabular-nums">
+        {formatNumber(animatedValue)}
+      </span>
+      <span className="text-[10px] text-zinc-500 mt-1 uppercase tracking-wider">
+        {label}
+      </span>
+      {trend !== 0 && (
+        <div
+          className={`flex items-center gap-0.5 mt-1.5 text-[10px] ${
+            trend > 0 ? 'text-emerald-400' : 'text-red-400'
+          }`}
+        >
+          {trend > 0 ? (
+            <TrendingUp className="w-3 h-3" />
+          ) : (
+            <TrendingDown className="w-3 h-3" />
+          )}
+          <span>
+            {trend > 0 ? '+' : ''}
+            {trend} today
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── SECTION 4: Analytics ────────────────────────────────────────────────────
+
+function AnalyticsSection({
+  queryStats,
+  activityFeed,
+}: {
+  queryStats: { total: number; byDay: { day: string; success: number; fail: number }[] };
+  activityFeed: ActivityFeedItem[];
+}) {
+  return (
+    <motion.div variants={itemVariants}>
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Gradient AreaChart */}
+        <div className="rounded-xl border border-white/5 bg-zinc-900/50 p-5">
+          <h3 className="text-sm font-bold text-zinc-300 mb-4 flex items-center gap-2">
+            <Activity className="h-4 w-4 text-blue-400" />
+            Query Volume (7 days)
+          </h3>
+          {queryStats.total === 0 ? (
+            <div className="flex items-center justify-center py-8 text-sm text-zinc-600">
+              No query history yet.
+            </div>
+          ) : (
+            <div className="h-[200px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={queryStats.byDay}>
+                  <defs>
+                    <linearGradient id="gradSuccess" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.4} />
+                      <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                    </linearGradient>
+                    <linearGradient id="gradFail" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#ef4444" stopOpacity={0.4} />
+                      <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
+                  <XAxis
+                    dataKey="day"
+                    tick={{ fontSize: 11, fill: '#71717a' }}
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <YAxis
+                    allowDecimals={false}
+                    tick={{ fontSize: 11, fill: '#71717a' }}
+                    axisLine={false}
+                    tickLine={false}
+                    width={30}
+                  />
+                  <Tooltip contentStyle={DARK_TOOLTIP_STYLE} />
+                  <Area
+                    type="monotone"
+                    dataKey="success"
+                    name="Success"
+                    stroke="#10b981"
+                    strokeWidth={2}
+                    fill="url(#gradSuccess)"
+                    stackId="1"
+                    animationDuration={1500}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="fail"
+                    name="Failed"
+                    stroke="#ef4444"
+                    strokeWidth={2}
+                    fill="url(#gradFail)"
+                    stackId="1"
+                    animationDuration={1500}
+                  />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </div>
+
+        {/* Recent Activity Feed */}
+        <div className="rounded-xl border border-white/5 bg-zinc-900/50 p-5">
+          <h3 className="text-sm font-bold text-zinc-300 mb-4 flex items-center gap-2">
+            <Clock className="h-4 w-4 text-blue-400" />
+            Recent Activity
+          </h3>
+          {activityFeed.length === 0 ? (
+            <div className="flex items-center justify-center py-8 text-sm text-zinc-600">
+              No recent activity.
+            </div>
+          ) : (
+            <div className="max-h-[260px] overflow-y-auto editor-scrollbar space-y-1">
+              <AnimatePresence>
+                {activityFeed.map((item, i) => (
+                  <motion.div
+                    key={item.id}
+                    custom={i}
+                    variants={feedItemVariants}
+                    initial="hidden"
+                    animate="visible"
+                    className="flex items-center gap-2.5 py-1.5 px-2 rounded-lg hover:bg-white/[0.03] transition-colors"
+                  >
+                    {item.type === 'audit' ? (
+                      <Wrench className="w-3.5 h-3.5 text-zinc-600 flex-shrink-0" />
+                    ) : (
+                      <Zap className="w-3.5 h-3.5 text-zinc-600 flex-shrink-0" />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="text-xs text-zinc-400 truncate">
+                        {item.text}
+                      </div>
+                      {item.connectionName && (
+                        <div className="text-[10px] text-zinc-600 truncate">
+                          {item.connectionName}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {item.status === 'success' ? (
+                        <CheckCircle2 className="w-3 h-3 text-emerald-500" />
+                      ) : (
+                        <XCircle className="w-3 h-3 text-red-500" />
+                      )}
+                      <span className="text-[10px] text-zinc-600 whitespace-nowrap">
+                        {formatRelativeTime(item.time)}
+                      </span>
+                    </div>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── SECTION 5: Quick Actions ────────────────────────────────────────────────
+
+function QuickActionsSection() {
+  const actions = [
+    {
+      label: 'Maintenance',
+      description: 'VACUUM, ANALYZE, and optimize your databases',
+      icon: Wrench,
+      href: '/admin?tab=operations',
+      gradient: 'from-blue-500/20 to-cyan-500/20',
+      iconColor: 'text-blue-400',
+      borderColor: 'hover:border-blue-500/30',
+    },
+    {
+      label: 'Security & Masking',
+      description: 'Configure data masking rules and access control',
+      icon: Shield,
+      href: '/admin?tab=security',
+      gradient: 'from-emerald-500/20 to-teal-500/20',
+      iconColor: 'text-emerald-400',
+      borderColor: 'hover:border-emerald-500/30',
+    },
+    {
+      label: 'Real-time Monitoring',
+      description: 'Live metrics, connection pools, and alert thresholds',
+      icon: Activity,
+      href: '/admin?tab=monitoring',
+      gradient: 'from-purple-500/20 to-pink-500/20',
+      iconColor: 'text-purple-400',
+      borderColor: 'hover:border-purple-500/30',
+    },
+  ];
+
+  return (
+    <motion.div variants={itemVariants}>
+      <div className="flex items-center gap-2 mb-3">
+        <Sparkles className="h-4 w-4 text-blue-400" />
+        <h2 className="text-sm font-bold text-zinc-300">Quick Actions</h2>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        {actions.map((action) => (
+          <motion.a
+            key={action.label}
+            href={action.href}
+            whileHover={{ scale: 1.02, y: -4 }}
+            className={`group relative rounded-xl border border-white/5 ${action.borderColor} bg-zinc-900/50 p-5 transition-all duration-200 cursor-pointer block overflow-hidden hover:shadow-[0_0_30px_rgba(59,130,246,0.06)]`}
+          >
+            {/* Background gradient on hover */}
+            <div
+              className={`absolute inset-0 bg-gradient-to-br ${action.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
+            />
+
+            <div className="relative">
+              <div className={`p-2 rounded-lg bg-white/[0.04] w-fit mb-3`}>
+                <action.icon className={`w-5 h-5 ${action.iconColor}`} />
+              </div>
+              <h3 className="text-sm font-bold text-zinc-200 mb-1">
+                {action.label}
+              </h3>
+              <p className="text-[11px] text-zinc-500 mb-3">
+                {action.description}
+              </p>
+              <div className="flex items-center gap-1 text-[11px] text-zinc-600 group-hover:text-zinc-400 transition-colors">
+                <span>Open</span>
+                <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
+              </div>
+            </div>
+          </motion.a>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Empty State ─────────────────────────────────────────────────────────────
+
+function EmptyState() {
+  const features = [
+    {
+      icon: Database,
+      label: '7 DB Types',
+      description: 'PostgreSQL, MySQL, SQLite, MongoDB, Redis, Oracle, MSSQL',
+    },
+    {
+      icon: Sparkles,
+      label: 'AI Queries',
+      description: 'Natural language to SQL with multi-model AI support',
+    },
+    {
+      icon: Activity,
+      label: 'Real-time Monitor',
+      description: 'Live metrics, alerts, and connection pool monitoring',
+    },
+  ];
+
+  return (
+    <div className="relative min-h-[70vh] flex flex-col items-center justify-center px-4">
+      {/* Animated breathing orbs */}
+      <motion.div
+        className="absolute top-1/4 left-1/3 w-72 h-72 bg-blue-500/5 rounded-full blur-3xl pointer-events-none"
+        animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
+        transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
+      />
+      <motion.div
+        className="absolute bottom-1/4 right-1/3 w-56 h-56 bg-emerald-500/5 rounded-full blur-3xl pointer-events-none"
+        animate={{ scale: [1.2, 1, 1.2], opacity: [0.3, 0.5, 0.3] }}
+        transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut', delay: 2 }}
+      />
+
+      <motion.div
+        className="relative z-10 flex flex-col items-center text-center"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {/* Database icon with pulse glow */}
+        <motion.div
+          variants={itemVariants}
+          className="relative mb-6"
+        >
+          <div className="absolute inset-0 w-20 h-20 bg-blue-500/20 rounded-full blur-xl" />
+          <motion.div
+            className="relative p-5 rounded-2xl border border-white/10 bg-zinc-900/80"
+            animate={{ boxShadow: ['0 0 20px rgba(59,130,246,0.1)', '0 0 40px rgba(59,130,246,0.2)', '0 0 20px rgba(59,130,246,0.1)'] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <Database className="w-10 h-10 text-blue-400" />
+          </motion.div>
+        </motion.div>
+
+        <motion.h2
+          variants={itemVariants}
+          className="text-2xl font-bold text-zinc-100 mb-2"
+        >
+          Welcome to Command Center
+        </motion.h2>
+        <motion.p
+          variants={itemVariants}
+          className="text-sm text-zinc-500 max-w-md mb-8"
+        >
+          Connect your first database to unlock real-time fleet monitoring,
+          analytics, and intelligent query assistance.
+        </motion.p>
+
+        {/* Feature cards */}
+        <motion.div
+          variants={containerVariants}
+          className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 w-full max-w-2xl"
+        >
+          {features.map((f) => (
+            <motion.div
+              key={f.label}
+              variants={itemVariants}
+              className="rounded-xl border border-white/5 bg-white/[0.02] p-4 text-center"
+            >
+              <div className="p-2 rounded-lg bg-blue-500/10 w-fit mx-auto mb-2">
+                <f.icon className="w-5 h-5 text-blue-400" />
+              </div>
+              <div className="text-sm font-bold text-zinc-200 mb-1">
+                {f.label}
+              </div>
+              <div className="text-[11px] text-zinc-500">{f.description}</div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* CTA Button */}
+        <motion.div variants={itemVariants}>
+          <Button
+            asChild
+            className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 shadow-[0_0_30px_rgba(59,130,246,0.3)] hover:shadow-[0_0_40px_rgba(59,130,246,0.4)] transition-all"
+          >
+            <Link href="/">Connect Your First Database</Link>
+          </Button>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}