Create AppImage

AppImage/components/network-metrics.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
+import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"
+
+const networkTraffic = [
+  { time: "00:00", incoming: 45, outgoing: 32 },
+  { time: "04:00", incoming: 52, outgoing: 28 },
+  { time: "08:00", incoming: 78, outgoing: 65 },
+  { time: "12:00", incoming: 65, outgoing: 45 },
+  { time: "16:00", incoming: 82, outgoing: 58 },
+  { time: "20:00", incoming: 58, outgoing: 42 },
+  { time: "24:00", incoming: 43, outgoing: 35 },
+]
+
+const connectionData = [
+  { time: "00:00", connections: 1250 },
+  { time: "04:00", connections: 980 },
+  { time: "08:00", connections: 1850 },
+  { time: "12:00", connections: 1650 },
+  { time: "16:00", connections: 2100 },
+  { time: "20:00", connections: 1580 },
+  { time: "24:00", connections: 1320 },
+]
+
+export function NetworkMetrics() {
+  return (
+    <div className="space-y-6">
+      {/* Network Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Network Traffic</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">156 MB/s</div>
+            <div className="flex items-center space-x-2 mt-2">
+              <span className="text-xs text-green-500">↓ 89 MB/s</span>
+              <span className="text-xs text-blue-500">↑ 67 MB/s</span>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Peak: 245 MB/s at 16:30</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Active Connections</CardTitle>
+            <Network className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">1,847</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Normal
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+              <span className="text-green-500">↑ 12%</span> from last hour
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Firewall Status</CardTitle>
+            <Shield className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">Active</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Protected
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">247 blocked attempts today</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Latency</CardTitle>
+            <Globe className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">12ms</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Excellent
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Avg response time</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Network Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
+              Network Traffic (24h)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={networkTraffic}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    color: "hsl(var(--foreground))",
+                  }}
+                  formatter={(value, name) => [`${value} MB/s`, name === "incoming" ? "Incoming" : "Outgoing"]}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="incoming"
+                  stackId="1"
+                  stroke="#10b981"
+                  fill="#10b981"
+                  fillOpacity={0.6}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="outgoing"
+                  stackId="1"
+                  stroke="#3b82f6"
+                  fill="#3b82f6"
+                  fillOpacity={0.6}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Network className="h-5 w-5 mr-2" />
+              Active Connections (24h)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <LineChart data={connectionData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    color: "hsl(var(--foreground))",
+                  }}
+                  formatter={(value) => [`${value}`, "Connections"]}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="connections"
+                  stroke="#8b5cf6"
+                  strokeWidth={3}
+                  dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Network Interfaces */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Router className="h-5 w-5 mr-2" />
+            Network Interfaces
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[
+              {
+                name: "vmbr0",
+                type: "Bridge",
+                status: "up",
+                ip: "192.168.1.100/24",
+                speed: "1000 Mbps",
+                rx: "2.3 GB",
+                tx: "1.8 GB",
+              },
+              {
+                name: "enp1s0",
+                type: "Physical",
+                status: "up",
+                ip: "192.168.1.101/24",
+                speed: "1000 Mbps",
+                rx: "1.2 GB",
+                tx: "890 MB",
+              },
+              {
+                name: "vmbr1",
+                type: "Bridge",
+                status: "up",
+                ip: "10.0.0.1/24",
+                speed: "1000 Mbps",
+                rx: "456 MB",
+                tx: "234 MB",
+              },
+              {
+                name: "tap101i0",
+                type: "TAP",
+                status: "up",
+                ip: "10.0.0.101/24",
+                speed: "1000 Mbps",
+                rx: "123 MB",
+                tx: "89 MB",
+              },
+            ].map((interface_, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
+              >
+                <div className="flex items-center space-x-4">
+                  <Wifi className="h-5 w-5 text-muted-foreground" />
+                  <div>
+                    <div className="font-medium text-foreground">{interface_.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {interface_.type} • {interface_.speed}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-6">
+                  <div className="text-center">
+                    <div className="text-sm text-muted-foreground">IP Address</div>
+                    <div className="text-sm font-medium text-foreground font-mono">{interface_.ip}</div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="text-sm text-muted-foreground">RX / TX</div>
+                    <div className="text-sm font-medium text-foreground">
+                      {interface_.rx} / {interface_.tx}
+                    </div>
+                  </div>
+
+                  <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                    {interface_.status.toUpperCase()}
+                  </Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

AppImage/components/proxmox-dashboard.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { SystemOverview } from "@/components/system-overview"
+import { StorageMetrics } from "@/components/storage-metrics"
+import { NetworkMetrics } from "@/components/network-metrics"
+import { VirtualMachines } from "@/components/virtual-machines"
+import { SystemLogs } from "@/components/system-logs"
+import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Languages, Server } from "lucide-react"
+import Image from "next/image"
+import { ThemeToggle } from "@/components/theme-toggle"
+
+interface SystemStatus {
+  status: "healthy" | "warning" | "critical"
+  uptime: string
+  lastUpdate: string
+  serverName: string
+  nodeId: string
+}
+
+export function ProxmoxDashboard() {
+  const [systemStatus, setSystemStatus] = useState<SystemStatus>({
+    status: "healthy",
+    uptime: "15d 7h 23m",
+    lastUpdate: new Date().toLocaleTimeString(),
+    serverName: "proxmox-01",
+    nodeId: "pve-node-01",
+  })
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [isTranslating, setIsTranslating] = useState(false)
+
+  useEffect(() => {
+    const fetchServerInfo = async () => {
+      try {
+        const response = await fetch("/api/flask/system-info")
+        if (response.ok) {
+          const data = await response.json()
+          setSystemStatus((prev) => ({
+            ...prev,
+            serverName: data.hostname || "proxmox-01",
+            nodeId: data.node_id || "pve-node-01",
+          }))
+        }
+      } catch (error) {
+        console.log("[v0] Using default server name due to API error:", error)
+      }
+    }
+
+    fetchServerInfo()
+  }, [])
+
+  const refreshData = async () => {
+    setIsRefreshing(true)
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    setSystemStatus((prev) => ({
+      ...prev,
+      lastUpdate: new Date().toLocaleTimeString(),
+    }))
+    setIsRefreshing(false)
+  }
+
+  const translatePage = async () => {
+    setIsTranslating(true)
+    try {
+      if ("translate" in document.documentElement.dataset) {
+        const currentLang = document.documentElement.dataset.translate
+        document.documentElement.dataset.translate = currentLang === "yes" ? "no" : "yes"
+      } else {
+        const googleTranslateScript = document.createElement("script")
+        googleTranslateScript.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+        document.head.appendChild(googleTranslateScript)
+
+        window.googleTranslateElementInit = () => {
+          new window.google.translate.TranslateElement(
+            {
+              pageLanguage: "en",
+              includedLanguages: "es,en,fr,de,it,pt,ru,zh,ja,ko",
+              layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
+            },
+            "google_translate_element",
+          )
+        }
+      }
+    } catch (error) {
+      console.error("Translation error:", error)
+    }
+    setIsTranslating(false)
+  }
+
+  const getStatusIcon = () => {
+    switch (systemStatus.status) {
+      case "healthy":
+        return <CheckCircle className="h-4 w-4 text-green-500" />
+      case "warning":
+        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
+      case "critical":
+        return <XCircle className="h-4 w-4 text-red-500" />
+    }
+  }
+
+  const getStatusColor = () => {
+    switch (systemStatus.status) {
+      case "healthy":
+        return "bg-green-500/10 text-green-500 border-green-500/20"
+      case "warning":
+        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+      case "critical":
+        return "bg-red-500/10 text-red-500 border-red-500/20"
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b border-border header-bg sticky top-0 z-50">
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 relative">
+                  <Image
+                    src="/images/proxmenux-logo.png"
+                    alt="ProxMenux Logo"
+                    width={40}
+                    height={40}
+                    className="object-contain"
+                    priority
+                  />
+                </div>
+                <div>
+                  <h1 className="text-xl font-semibold">ProxMenux Monitor</h1>
+                  <p className="text-sm opacity-70">Proxmox System Dashboard</p>
+                </div>
+              </div>
+              <div className="hidden md:flex items-center ml-6">
+                <div className="server-info flex items-center space-x-2">
+                  <Server className="h-4 w-4 opacity-70" />
+                  <div className="text-sm">
+                    <div className="font-medium">{systemStatus.nodeId}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <Badge variant="outline" className={getStatusColor()}>
+                {getStatusIcon()}
+                <span className="ml-1 capitalize">{systemStatus.status}</span>
+              </Badge>
+
+              <div className="text-sm opacity-70">Uptime: {systemStatus.uptime}</div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={refreshData}
+                disabled={isRefreshing}
+                className="border-border/50 bg-transparent hover:bg-secondary"
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
+                Refresh
+              </Button>
+
+              <ThemeToggle />
+
+              <Button
+                variant="outline"
+                size="sm"
+                className="border-border/50 bg-transparent hover:bg-secondary"
+                onClick={translatePage}
+                disabled={isTranslating}
+              >
+                <Languages className={`h-4 w-4 mr-2 ${isTranslating ? "animate-pulse" : ""}`} />
+                Translate
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div id="google_translate_element" className="hidden"></div>
+      </header>
+
+      <div className="container mx-auto px-6 py-6">
+        <Tabs defaultValue="overview" className="space-y-6">
+          <TabsList className="grid w-full grid-cols-5 bg-card border border-border">
+            <TabsTrigger
+              value="overview"
+              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              Overview
+            </TabsTrigger>
+            <TabsTrigger
+              value="storage"
+              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              Storage
+            </TabsTrigger>
+            <TabsTrigger
+              value="network"
+              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              Network
+            </TabsTrigger>
+            <TabsTrigger
+              value="vms"
+              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              Virtual Machines
+            </TabsTrigger>
+            <TabsTrigger
+              value="logs"
+              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              System Logs
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-6">
+            <SystemOverview />
+          </TabsContent>
+
+          <TabsContent value="storage" className="space-y-6">
+            <StorageMetrics />
+          </TabsContent>
+
+          <TabsContent value="network" className="space-y-6">
+            <NetworkMetrics />
+          </TabsContent>
+
+          <TabsContent value="vms" className="space-y-6">
+            <VirtualMachines />
+          </TabsContent>
+
+          <TabsContent value="logs" className="space-y-6">
+            <SystemLogs />
+          </TabsContent>
+        </Tabs>
+
+        <footer className="mt-12 pt-6 border-t border-border text-center text-sm text-muted-foreground">
+          <p>Last updated: {systemStatus.lastUpdate} • ProxMenux Monitor v1.0.0</p>
+        </footer>
+      </div>
+    </div>
+  )
+}

AppImage/components/storage-metrics.tsx

@@ -0,0 +1,243 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"
+import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity } from "lucide-react"
+
+const storageData = [
+  { name: "Used", value: 1250, color: "#3b82f6" }, // Blue
+  { name: "Available", value: 750, color: "#10b981" }, // Green
+]
+
+const diskPerformance = [
+  { disk: "sda", read: 45, write: 32, iops: 1250 },
+  { disk: "sdb", read: 67, write: 28, iops: 980 },
+  { disk: "sdc", read: 23, write: 45, iops: 1100 },
+  { disk: "nvme0n1", read: 156, write: 89, iops: 3400 },
+]
+
+export function StorageMetrics() {
+  return (
+    <div className="space-y-6">
+      {/* Storage Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Storage</CardTitle>
+            <HardDrive className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">2.0 TB</div>
+            <Progress value={62.5} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2">1.25 TB used • 750 GB available</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">VM & LXC Storage</CardTitle>
+            <Database className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">890 GB</div>
+            <Progress value={71.2} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2">71.2% of allocated space</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Archive className="h-5 w-5 mr-2" />
+              Backups
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">245 GB</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                12 Backups
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Last backup: 2h ago</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
+              IOPS
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">6.7K</div>
+            <div className="flex items-center space-x-2 mt-2">
+              <span className="text-xs text-green-500">Read: 4.2K</span>
+              <span className="text-xs text-blue-500">Write: 2.5K</span>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">Average operations/sec</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Storage Distribution and Performance */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <HardDrive className="h-5 w-5 mr-2" />
+              Storage Distribution
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-foreground font-medium">Used Storage</span>
+                  <span className="text-muted-foreground">1.25 TB (62.5%)</span>
+                </div>
+                <div className="w-full bg-muted rounded-full h-3">
+                  <div
+                    className="bg-blue-500 h-3 rounded-full transition-all duration-300"
+                    style={{ width: "62.5%" }}
+                  ></div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-foreground font-medium">Available Storage</span>
+                  <span className="text-muted-foreground">750 GB (37.5%)</span>
+                </div>
+                <div className="w-full bg-muted rounded-full h-3">
+                  <div
+                    className="bg-green-500 h-3 rounded-full transition-all duration-300"
+                    style={{ width: "37.5%" }}
+                  ></div>
+                </div>
+              </div>
+
+              <div className="pt-4 border-t border-border">
+                <div className="grid grid-cols-2 gap-4 text-center">
+                  <div className="space-y-1">
+                    <div className="flex items-center justify-center">
+                      <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
+                      <span className="text-sm font-medium text-foreground">Used</span>
+                    </div>
+                    <div className="text-lg font-bold text-foreground">1.25 TB</div>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="flex items-center justify-center">
+                      <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+                      <span className="text-sm font-medium text-foreground">Available</span>
+                    </div>
+                    <div className="text-lg font-bold text-foreground">750 GB</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
+              Disk Performance
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={diskPerformance}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="disk" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    color: "hsl(var(--foreground))",
+                  }}
+                />
+                <Bar dataKey="read" fill="#3b82f6" name="Read MB/s" />
+                <Bar dataKey="write" fill="#10b981" name="Write MB/s" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Disk Details */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Database className="h-5 w-5 mr-2" />
+            Storage Devices
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[
+              { name: "/dev/sda", type: "HDD", size: "1TB", used: "650GB", health: "healthy", temp: "42°C" },
+              { name: "/dev/sdb", type: "HDD", size: "1TB", used: "480GB", health: "healthy", temp: "38°C" },
+              { name: "/dev/sdc", type: "SSD", size: "500GB", used: "120GB", health: "healthy", temp: "35°C" },
+              { name: "/dev/nvme0n1", type: "NVMe", size: "1TB", used: "340GB", health: "warning", temp: "55°C" },
+            ].map((disk, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
+              >
+                <div className="flex items-center space-x-4">
+                  <HardDrive className="h-5 w-5 text-muted-foreground" />
+                  <div>
+                    <div className="font-medium text-foreground">{disk.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {disk.type} • {disk.size}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-6">
+                  <div className="text-right">
+                    <div className="text-sm font-medium text-foreground">
+                      {disk.used} / {disk.size}
+                    </div>
+                    <Progress
+                      value={(Number.parseInt(disk.used) / Number.parseInt(disk.size)) * 100}
+                      className="w-24 mt-1"
+                    />
+                  </div>
+
+                  <div className="text-center">
+                    <div className="text-sm text-muted-foreground">Temp</div>
+                    <div className="text-sm font-medium text-foreground">{disk.temp}</div>
+                  </div>
+
+                  <Badge
+                    variant="outline"
+                    className={
+                      disk.health === "healthy"
+                        ? "bg-green-500/10 text-green-500 border-green-500/20"
+                        : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                    }
+                  >
+                    {disk.health === "healthy" ? (
+                      <CheckCircle className="h-3 w-3 mr-1" />
+                    ) : (
+                      <AlertTriangle className="h-3 w-3 mr-1" />
+                    )}
+                    {disk.health}
+                  </Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

AppImage/components/system-logs.tsx

@@ -0,0 +1,275 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { FileText, Search, Download, AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react"
+import { useState } from "react"
+
+const systemLogs = [
+  {
+    timestamp: "2024-01-15 14:32:15",
+    level: "info",
+    service: "pveproxy",
+    message: "User root@pam authenticated successfully",
+    source: "auth.log",
+  },
+  {
+    timestamp: "2024-01-15 14:31:45",
+    level: "warning",
+    service: "pvedaemon",
+    message: "VM 101 high memory usage detected (85%)",
+    source: "syslog",
+  },
+  {
+    timestamp: "2024-01-15 14:30:22",
+    level: "error",
+    service: "pve-cluster",
+    message: "Failed to connect to cluster node pve-02",
+    source: "cluster.log",
+  },
+  {
+    timestamp: "2024-01-15 14:29:18",
+    level: "info",
+    service: "pvestatd",
+    message: "Storage local: 1.25TB used, 750GB available",
+    source: "syslog",
+  },
+  {
+    timestamp: "2024-01-15 14:28:33",
+    level: "info",
+    service: "pve-firewall",
+    message: "Blocked connection attempt from 192.168.1.50",
+    source: "firewall.log",
+  },
+  {
+    timestamp: "2024-01-15 14:27:45",
+    level: "warning",
+    service: "smartd",
+    message: "SMART warning: /dev/nvme0n1 temperature high (55°C)",
+    source: "smart.log",
+  },
+  {
+    timestamp: "2024-01-15 14:26:12",
+    level: "info",
+    service: "pveproxy",
+    message: "Started backup job for VM 100",
+    source: "backup.log",
+  },
+  {
+    timestamp: "2024-01-15 14:25:38",
+    level: "error",
+    service: "qemu-server",
+    message: "VM 102 failed to start: insufficient memory",
+    source: "qemu.log",
+  },
+  {
+    timestamp: "2024-01-15 14:24:55",
+    level: "info",
+    service: "pvedaemon",
+    message: "VM 103 migrated successfully to node pve-01",
+    source: "migration.log",
+  },
+  {
+    timestamp: "2024-01-15 14:23:17",
+    level: "warning",
+    service: "pve-ha-lrm",
+    message: "Resource VM:104 state changed to error",
+    source: "ha.log",
+  },
+]
+
+export function SystemLogs() {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [levelFilter, setLevelFilter] = useState("all")
+  const [serviceFilter, setServiceFilter] = useState("all")
+
+  const filteredLogs = systemLogs.filter((log) => {
+    const matchesSearch =
+      log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      log.service.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesLevel = levelFilter === "all" || log.level === levelFilter
+    const matchesService = serviceFilter === "all" || log.service === serviceFilter
+
+    return matchesSearch && matchesLevel && matchesService
+  })
+
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case "error":
+        return "bg-red-500/10 text-red-500 border-red-500/20"
+      case "warning":
+        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+      case "info":
+        return "bg-blue-500/10 text-blue-500 border-blue-500/20"
+      default:
+        return "bg-gray-500/10 text-gray-500 border-gray-500/20"
+    }
+  }
+
+  const getLevelIcon = (level: string) => {
+    switch (level) {
+      case "error":
+        return <XCircle className="h-3 w-3 mr-1" />
+      case "warning":
+        return <AlertTriangle className="h-3 w-3 mr-1" />
+      case "info":
+        return <Info className="h-3 w-3 mr-1" />
+      default:
+        return <CheckCircle className="h-3 w-3 mr-1" />
+    }
+  }
+
+  const logCounts = {
+    total: systemLogs.length,
+    error: systemLogs.filter((log) => log.level === "error").length,
+    warning: systemLogs.filter((log) => log.level === "warning").length,
+    info: systemLogs.filter((log) => log.level === "info").length,
+  }
+
+  const uniqueServices = [...new Set(systemLogs.map((log) => log.service))]
+
+  return (
+    <div className="space-y-6">
+      {/* Log Statistics */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Logs</CardTitle>
+            <FileText className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">{logCounts.total}</div>
+            <p className="text-xs text-muted-foreground mt-2">Last 24 hours</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Errors</CardTitle>
+            <XCircle className="h-4 w-4 text-red-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-500">{logCounts.error}</div>
+            <p className="text-xs text-muted-foreground mt-2">Requires attention</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Warnings</CardTitle>
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-yellow-500">{logCounts.warning}</div>
+            <p className="text-xs text-muted-foreground mt-2">Monitor closely</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Info</CardTitle>
+            <Info className="h-4 w-4 text-blue-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-blue-500">{logCounts.info}</div>
+            <p className="text-xs text-muted-foreground mt-2">Normal operations</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Log Filters and Search */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <FileText className="h-5 w-5 mr-2" />
+            System Logs
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col sm:flex-row gap-4 mb-6">
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search logs..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10 bg-background border-border"
+                />
+              </div>
+            </div>
+
+            <Select value={levelFilter} onValueChange={setLevelFilter}>
+              <SelectTrigger className="w-full sm:w-[180px] bg-background border-border">
+                <SelectValue placeholder="Filter by level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Levels</SelectItem>
+                <SelectItem value="error">Error</SelectItem>
+                <SelectItem value="warning">Warning</SelectItem>
+                <SelectItem value="info">Info</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={serviceFilter} onValueChange={setServiceFilter}>
+              <SelectTrigger className="w-full sm:w-[180px] bg-background border-border">
+                <SelectValue placeholder="Filter by service" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Services</SelectItem>
+                {uniqueServices.map((service) => (
+                  <SelectItem key={service} value={service}>
+                    {service}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Button variant="outline" className="border-border bg-transparent">
+              <Download className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </div>
+
+          <ScrollArea className="h-[600px] w-full rounded-md border border-border">
+            <div className="space-y-2 p-4">
+              {filteredLogs.map((log, index) => (
+                <div
+                  key={index}
+                  className="flex items-start space-x-4 p-3 rounded-lg bg-card/50 border border-border/50"
+                >
+                  <div className="flex-shrink-0">
+                    <Badge variant="outline" className={getLevelColor(log.level)}>
+                      {getLevelIcon(log.level)}
+                      {log.level.toUpperCase()}
+                    </Badge>
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between mb-1">
+                      <div className="text-sm font-medium text-foreground">{log.service}</div>
+                      <div className="text-xs text-muted-foreground font-mono">{log.timestamp}</div>
+                    </div>
+                    <div className="text-sm text-foreground mb-1">{log.message}</div>
+                    <div className="text-xs text-muted-foreground">Source: {log.source}</div>
+                  </div>
+                </div>
+              ))}
+
+              {filteredLogs.length === 0 && (
+                <div className="text-center py-8 text-muted-foreground">
+                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>No logs found matching your criteria</p>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

AppImage/components/system-overview.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
+import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap } from "lucide-react"
+
+const cpuData = [
+  { time: "00:00", value: 45 },
+  { time: "04:00", value: 52 },
+  { time: "08:00", value: 78 },
+  { time: "12:00", value: 65 },
+  { time: "16:00", value: 82 },
+  { time: "20:00", value: 58 },
+  { time: "24:00", value: 43 },
+]
+
+const memoryData = [
+  { time: "00:00", used: 12.5, available: 19.5 },
+  { time: "04:00", used: 14.2, available: 17.8 },
+  { time: "08:00", used: 18.7, available: 13.3 },
+  { time: "12:00", used: 16.3, available: 15.7 },
+  { time: "16:00", used: 21.1, available: 10.9 },
+  { time: "20:00", used: 15.8, available: 16.2 },
+  { time: "24:00", used: 13.2, available: 18.8 },
+]
+
+export function SystemOverview() {
+  return (
+    <div className="space-y-6">
+      {/* Key Metrics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card className="bg-card border-border metric-card">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle>
+            <Cpu className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground metric-value">67.3%</div>
+            <Progress value={67.3} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2 metric-label">
+              <span className="text-green-500">↓ 2.1%</span> from last hour
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
+            <MemoryStick className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground metric-value">15.8 GB</div>
+            <Progress value={49.4} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2 metric-label">
+              49.4% of 32 GB • <span className="text-yellow-500">↑ 1.2 GB</span>
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Temperature</CardTitle>
+            <Thermometer className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground metric-value">52°C</div>
+            <div className="flex items-center mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Normal
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2 metric-label">Max: 78°C • Avg: 48°C</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Active VMs & LXC</CardTitle>
+            <Server className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground metric-value">15</div>
+            <div className="vm-badges mt-2">
+              <Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
+                8 Running VMs
+              </Badge>
+              <Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
+                3 Running LXC
+              </Badge>
+              <Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
+                4 Stopped
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2 metric-label">Total: 12 VMs • 6 LXC configured</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="bg-card border-border metric-card">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
+              CPU Usage (24h)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={cpuData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    color: "hsl(var(--foreground))",
+                  }}
+                />
+                <Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <MemoryStick className="h-5 w-5 mr-2" />
+              Memory Usage (24h)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={memoryData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    color: "hsl(var(--foreground))",
+                  }}
+                />
+                <Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
+                <Area
+                  type="monotone"
+                  dataKey="available"
+                  stackId="1"
+                  stroke="#10b981"
+                  fill="#10b981"
+                  fillOpacity={0.6}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* System Information */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card className="bg-card border-border metric-card">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Server className="h-5 w-5 mr-2" />
+              System Information
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Hostname:</span>
+              <span className="text-foreground font-mono metric-value">proxmox-01</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Version:</span>
+              <span className="text-foreground metric-value">PVE 8.1.3</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Kernel:</span>
+              <span className="text-foreground font-mono metric-value">6.5.11-7-pve</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Architecture:</span>
+              <span className="text-foreground metric-value">x86_64</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Users className="h-5 w-5 mr-2" />
+              Active Sessions
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground metric-label">Web Console:</span>
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                3 active
+              </Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground metric-label">SSH Sessions:</span>
+              <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
+                1 active
+              </Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">API Calls:</span>
+              <span className="text-foreground metric-value">247/hour</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border metric-card">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Zap className="h-5 w-5 mr-2" />
+              Power & Performance
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Power State:</span>
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Running
+              </Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Load Average:</span>
+              <span className="text-foreground font-mono metric-value">1.23, 1.45, 1.67</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Boot Time:</span>
+              <span className="text-foreground metric-value">2.3s</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

AppImage/components/theme-provider.tsx

@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

AppImage/components/theme-toggle.tsx

@@ -0,0 +1,22 @@
+"use client"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="border-border bg-transparent"
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

AppImage/components/virtual-machines.tsx

@@ -0,0 +1,317 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react"
+
+const virtualMachines = [
+  {
+    id: 100,
+    name: "web-server-01",
+    type: "vm",
+    status: "running",
+    os: "Ubuntu 22.04",
+    cpu: 4,
+    memory: 8192,
+    disk: 50,
+    uptime: "15d 7h 23m",
+    cpuUsage: 45,
+    memoryUsage: 62,
+    diskUsage: 78,
+  },
+  {
+    id: 101,
+    name: "database-01",
+    type: "vm",
+    status: "running",
+    os: "CentOS 8",
+    cpu: 8,
+    memory: 16384,
+    disk: 100,
+    uptime: "12d 3h 45m",
+    cpuUsage: 78,
+    memoryUsage: 85,
+    diskUsage: 45,
+  },
+  {
+    id: 102,
+    name: "backup-server",
+    type: "vm",
+    status: "stopped",
+    os: "Debian 11",
+    cpu: 2,
+    memory: 4096,
+    disk: 200,
+    uptime: "0d 0h 0m",
+    cpuUsage: 0,
+    memoryUsage: 0,
+    diskUsage: 23,
+  },
+  {
+    id: 103,
+    name: "dev-environment",
+    type: "vm",
+    status: "running",
+    os: "Ubuntu 20.04",
+    cpu: 6,
+    memory: 12288,
+    disk: 75,
+    uptime: "3d 12h 18m",
+    cpuUsage: 32,
+    memoryUsage: 58,
+    diskUsage: 67,
+  },
+  {
+    id: 104,
+    name: "monitoring-01",
+    type: "vm",
+    status: "running",
+    os: "Alpine Linux",
+    cpu: 2,
+    memory: 2048,
+    disk: 25,
+    uptime: "8d 15h 32m",
+    cpuUsage: 15,
+    memoryUsage: 34,
+    diskUsage: 42,
+  },
+  {
+    id: 105,
+    name: "mail-server",
+    type: "vm",
+    status: "stopped",
+    os: "Ubuntu 22.04",
+    cpu: 4,
+    memory: 8192,
+    disk: 60,
+    uptime: "0d 0h 0m",
+    cpuUsage: 0,
+    memoryUsage: 0,
+    diskUsage: 56,
+  },
+  {
+    id: 200,
+    name: "nginx-proxy",
+    type: "lxc",
+    status: "running",
+    os: "Ubuntu 22.04 LXC",
+    cpu: 1,
+    memory: 512,
+    disk: 8,
+    uptime: "25d 14h 12m",
+    cpuUsage: 8,
+    memoryUsage: 45,
+    diskUsage: 32,
+  },
+  {
+    id: 201,
+    name: "redis-cache",
+    type: "lxc",
+    status: "running",
+    os: "Alpine Linux LXC",
+    cpu: 1,
+    memory: 1024,
+    disk: 4,
+    uptime: "18d 6h 45m",
+    cpuUsage: 12,
+    memoryUsage: 38,
+    diskUsage: 28,
+  },
+  {
+    id: 202,
+    name: "log-collector",
+    type: "lxc",
+    status: "stopped",
+    os: "Debian 11 LXC",
+    cpu: 1,
+    memory: 256,
+    disk: 2,
+    uptime: "0d 0h 0m",
+    cpuUsage: 0,
+    memoryUsage: 0,
+    diskUsage: 15,
+  },
+]
+
+export function VirtualMachines() {
+  const runningVMs = virtualMachines.filter((vm) => vm.status === "running").length
+  const stoppedVMs = virtualMachines.filter((vm) => vm.status === "stopped").length
+  const runningLXC = virtualMachines.filter((vm) => vm.type === "lxc" && vm.status === "running").length
+  const totalVMs = virtualMachines.filter((vm) => vm.type === "vm").length
+  const totalLXC = virtualMachines.filter((vm) => vm.type === "lxc").length
+  const totalCPU = virtualMachines.reduce((sum, vm) => sum + vm.cpu, 0)
+  const totalMemory = virtualMachines.reduce((sum, vm) => sum + vm.memory, 0)
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "running":
+        return "bg-green-500/10 text-green-500 border-green-500/20"
+      case "stopped":
+        return "bg-red-500/10 text-red-500 border-red-500/20"
+      default:
+        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "running":
+        return <Play className="h-3 w-3 mr-1" />
+      case "stopped":
+        return <Square className="h-3 w-3 mr-1" />
+      default:
+        return <RotateCcw className="h-3 w-3 mr-1" />
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* VM Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total VMs & LXC</CardTitle>
+            <Server className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">{virtualMachines.length}</div>
+            <div className="vm-badges mt-2">
+              <Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
+                {runningVMs} VMs
+              </Badge>
+              <Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
+                {runningLXC} LXC
+              </Badge>
+              <Badge variant="outline" className="vm-badge bg-red-500/10 text-red-500 border-red-500/20">
+                {stoppedVMs} Stopped
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+              {totalVMs} VMs • {totalLXC} LXC
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total CPU Cores</CardTitle>
+            <Cpu className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">{totalCPU}</div>
+            <p className="text-xs text-muted-foreground mt-2">Allocated across all VMs and LXC containers</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Memory</CardTitle>
+            <MemoryStick className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">{(totalMemory / 1024).toFixed(1)} GB</div>
+            <p className="text-xs text-muted-foreground mt-2">Allocated RAM across all VMs and LXC containers</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Average Load</CardTitle>
+            <Monitor className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">42%</div>
+            <p className="text-xs text-muted-foreground mt-2">Average resource utilization</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Virtual Machines List */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Server className="h-5 w-5 mr-2" />
+            Virtual Machines & LXC Containers
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {virtualMachines.map((vm) => (
+              <div key={vm.id} className="p-6 rounded-lg border border-border bg-card/50">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-4">
+                    <Server className="h-6 w-6 text-muted-foreground" />
+                    <div>
+                      <div className="font-semibold text-foreground text-lg flex items-center">
+                        {vm.name}
+                        <Badge
+                          variant="outline"
+                          className={`ml-2 text-xs ${
+                            vm.type === "lxc"
+                              ? "bg-blue-500/10 text-blue-500 border-blue-500/20"
+                              : "bg-purple-500/10 text-purple-500 border-purple-500/20"
+                          }`}
+                        >
+                          {vm.type.toUpperCase()}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        ID: {vm.id} • {vm.os}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-3">
+                    <Badge variant="outline" className={getStatusColor(vm.status)}>
+                      {getStatusIcon(vm.status)}
+                      {vm.status.toUpperCase()}
+                    </Badge>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">Resources</div>
+                    <div className="space-y-1 text-sm">
+                      <div className="flex justify-between">
+                        <span>CPU:</span>
+                        <span className="font-medium">{vm.cpu} cores</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>Memory:</span>
+                        <span className="font-medium">{(vm.memory / 1024).toFixed(1)} GB</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>Disk:</span>
+                        <span className="font-medium">{vm.disk} GB</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
+                    <div className="text-lg font-semibold text-foreground mb-1">{vm.cpuUsage}%</div>
+                    <Progress value={vm.cpuUsage} className="h-2" />
+                  </div>
+
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
+                    <div className="text-lg font-semibold text-foreground mb-1">{vm.memoryUsage}%</div>
+                    <Progress value={vm.memoryUsage} className="h-2" />
+                  </div>
+
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">Uptime</div>
+                    <div className="text-lg font-semibold text-foreground">{vm.uptime}</div>
+                    <div className="text-xs text-muted-foreground mt-1">Disk: {vm.diskUsage}% used</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}