From f20e46dee0abf4cb4faa3d63dd8e7dc449d71631 Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Tue, 21 Oct 2025 17:20:16 +0200
Subject: [PATCH] Update AppImage

---
 AppImage/components/metrics-dialog.tsx   | 208 ++++++++++-------------
 AppImage/components/virtual-machines.tsx | 171 +++++++++----------
 2 files changed, 169 insertions(+), 210 deletions(-)

diff --git a/AppImage/components/metrics-dialog.tsx b/AppImage/components/metrics-dialog.tsx
index 4c79aaf..4c663da 100644
--- a/AppImage/components/metrics-dialog.tsx
+++ b/AppImage/components/metrics-dialog.tsx
@@ -10,7 +10,6 @@ interface MetricsViewProps {
   vmid: number
   vmName: string
   vmType: "qemu" | "lxc"
-  metricType: "cpu" | "memory" | "network" | "disk"
   onBack: () => void
 }
 
@@ -22,14 +21,7 @@ const TIMEFRAME_OPTIONS = [
   { value: "year", label: "1 Year" },
 ]
 
-const METRIC_TITLES = {
-  cpu: "CPU Usage",
-  memory: "Memory Usage",
-  network: "Network Traffic",
-  disk: "Disk I/O",
-}
-
-export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: MetricsViewProps) {
+export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps) {
   const [timeframe, setTimeframe] = useState("week")
   const [data, setData] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
@@ -61,23 +53,19 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
         const date = new Date(item.time * 1000)
         let timeLabel = ""
 
-        // Format time based on timeframe
         if (timeframe === "hour") {
-          // For 1 hour: show HH:mm
           timeLabel = date.toLocaleString("en-US", {
             hour: "2-digit",
             minute: "2-digit",
             hour12: false,
           })
         } else if (timeframe === "day") {
-          // For 24 hours: show HH:mm
           timeLabel = date.toLocaleString("en-US", {
             hour: "2-digit",
             minute: "2-digit",
             hour12: false,
           })
         } else if (timeframe === "week") {
-          // For 7 days: show Mon DD HH:mm
           timeLabel = date.toLocaleString("en-US", {
             month: "short",
             day: "numeric",
@@ -86,13 +74,11 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
             hour12: false,
           })
         } else if (timeframe === "month") {
-          // For 30 days: show Mon DD
           timeLabel = date.toLocaleString("en-US", {
             month: "short",
             day: "numeric",
           })
         } else {
-          // For 1 year: show Mon YYYY
           timeLabel = date.toLocaleString("en-US", {
             month: "short",
             year: "numeric",
@@ -125,7 +111,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
     return tick
   }
 
-  const renderChart = () => {
+  const renderAllCharts = () => {
     if (loading) {
       return (
         <div className="flex items-center justify-center h-[400px]">
@@ -150,17 +136,15 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
       )
     }
 
-    // Calculate tick interval based on data length
     const tickInterval = Math.ceil(data.length / 8)
 
-    switch (metricType) {
-      case "cpu":
-        const maxCpuValue = Math.max(...data.map((d) => d.cpu || 0))
-        const cpuDomainMax = Math.ceil(maxCpuValue * 1.15) // 15% margin
-
-        return (
-          <ResponsiveContainer width="100%" height={400}>
-            <AreaChart data={data} margin={{ bottom: 100 }}>
+    return (
+      <div className="space-y-8">
+        {/* CPU Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">CPU Usage</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
               <XAxis
                 dataKey="time"
@@ -169,7 +153,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 tick={{ fill: "currentColor" }}
                 angle={-45}
                 textAnchor="end"
-                height={80}
+                height={60}
                 interval={tickInterval}
                 tickFormatter={formatXAxisTick}
               />
@@ -178,8 +162,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 className="text-foreground"
                 tick={{ fill: "currentColor" }}
                 label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
-                domain={[0, cpuDomainMax]}
-                allowDataOverflow={false}
+                domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
               />
               <Tooltip
                 contentStyle={{
@@ -188,7 +171,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                   borderRadius: "6px",
                 }}
               />
-              <Legend wrapperStyle={{ paddingTop: "20px" }} />
+              <Legend wrapperStyle={{ paddingTop: "10px" }} />
               <Area
                 type="monotone"
                 dataKey="cpu"
@@ -200,15 +183,13 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
               />
             </AreaChart>
           </ResponsiveContainer>
-        )
+        </div>
 
-      case "memory":
-        const maxMemoryValue = Math.max(...data.map((d) => d.memory || 0))
-        const memoryDomainMax = Math.ceil(maxMemoryValue * 1.15) // 15% margin
-
-        return (
-          <ResponsiveContainer width="100%" height={400}>
-            <AreaChart data={data} margin={{ bottom: 100 }}>
+        {/* Memory Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Memory Usage</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
               <XAxis
                 dataKey="time"
@@ -217,7 +198,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 tick={{ fill: "currentColor" }}
                 angle={-45}
                 textAnchor="end"
-                height={80}
+                height={60}
                 interval={tickInterval}
                 tickFormatter={formatXAxisTick}
               />
@@ -226,8 +207,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 className="text-foreground"
                 tick={{ fill: "currentColor" }}
                 label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
-                domain={[0, memoryDomainMax]}
-                allowDataOverflow={false}
+                domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
               />
               <Tooltip
                 contentStyle={{
@@ -236,7 +216,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                   borderRadius: "6px",
                 }}
               />
-              <Legend wrapperStyle={{ paddingTop: "20px" }} />
+              <Legend wrapperStyle={{ paddingTop: "10px" }} />
               <Area
                 type="monotone"
                 dataKey="memory"
@@ -248,15 +228,13 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
               />
             </AreaChart>
           </ResponsiveContainer>
-        )
+        </div>
 
-      case "network":
-        const maxNetworkValue = Math.max(...data.map((d) => Math.max(d.netin || 0, d.netout || 0)))
-        const networkDomainMax = Math.ceil(maxNetworkValue * 1.15) // 15% margin
-
-        return (
-          <ResponsiveContainer width="100%" height={400}>
-            <AreaChart data={data} margin={{ bottom: 100 }}>
+        {/* Disk I/O Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Disk I/O</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
               <XAxis
                 dataKey="time"
@@ -265,7 +243,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 tick={{ fill: "currentColor" }}
                 angle={-45}
                 textAnchor="end"
-                height={80}
+                height={60}
                 interval={tickInterval}
                 tickFormatter={formatXAxisTick}
               />
@@ -274,8 +252,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                 className="text-foreground"
                 tick={{ fill: "currentColor" }}
                 label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
-                domain={[0, networkDomainMax]}
-                allowDataOverflow={false}
+                domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
               />
               <Tooltip
                 contentStyle={{
@@ -284,64 +261,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
                   borderRadius: "6px",
                 }}
               />
-              <Legend wrapperStyle={{ paddingTop: "20px" }} />
-              <Area
-                type="monotone"
-                dataKey="netin"
-                stroke="#10b981"
-                fill="#10b981"
-                fillOpacity={0.3}
-                strokeWidth={2}
-                name="Download (MB)"
-              />
-              <Area
-                type="monotone"
-                dataKey="netout"
-                stroke="#3b82f6"
-                fill="#3b82f6"
-                fillOpacity={0.3}
-                strokeWidth={2}
-                name="Upload (MB)"
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        )
-
-      case "disk":
-        const maxDiskValue = Math.max(...data.map((d) => Math.max(d.diskread || 0, d.diskwrite || 0)))
-        const diskDomainMax = Math.ceil(maxDiskValue * 1.15) // 15% margin
-
-        return (
-          <ResponsiveContainer width="100%" height={400}>
-            <AreaChart data={data} margin={{ bottom: 100 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
-              <XAxis
-                dataKey="time"
-                stroke="currentColor"
-                className="text-foreground"
-                tick={{ fill: "currentColor" }}
-                angle={-45}
-                textAnchor="end"
-                height={80}
-                interval={tickInterval}
-                tickFormatter={formatXAxisTick}
-              />
-              <YAxis
-                stroke="currentColor"
-                className="text-foreground"
-                tick={{ fill: "currentColor" }}
-                label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
-                domain={[0, diskDomainMax]}
-                allowDataOverflow={false}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "hsl(var(--background))",
-                  border: "1px solid hsl(var(--border))",
-                  borderRadius: "6px",
-                }}
-              />
-              <Legend wrapperStyle={{ paddingTop: "20px" }} />
+              <Legend wrapperStyle={{ paddingTop: "10px" }} />
               <Area
                 type="monotone"
                 dataKey="diskread"
@@ -362,11 +282,63 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
               />
             </AreaChart>
           </ResponsiveContainer>
-        )
+        </div>
 
-      default:
-        return null
-    }
+        {/* Network I/O Chart */}
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Network I/O</h3>
+          <ResponsiveContainer width="100%" height={300}>
+            <AreaChart data={data} margin={{ bottom: 80 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
+              <XAxis
+                dataKey="time"
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={tickInterval}
+                tickFormatter={formatXAxisTick}
+              />
+              <YAxis
+                stroke="currentColor"
+                className="text-foreground"
+                tick={{ fill: "currentColor" }}
+                label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+                domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "hsl(var(--background))",
+                  border: "1px solid hsl(var(--border))",
+                  borderRadius: "6px",
+                }}
+              />
+              <Legend wrapperStyle={{ paddingTop: "10px" }} />
+              <Area
+                type="monotone"
+                dataKey="netin"
+                stroke="#10b981"
+                fill="#10b981"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Download (MB)"
+              />
+              <Area
+                type="monotone"
+                dataKey="netout"
+                stroke="#3b82f6"
+                fill="#3b82f6"
+                fillOpacity={0.3}
+                strokeWidth={2}
+                name="Upload (MB)"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    )
   }
 
   return (
@@ -379,9 +351,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
               <ArrowLeft className="h-5 w-5" />
             </Button>
             <div>
-              <h2 className="text-xl font-semibold">
-                {METRIC_TITLES[metricType]} - {vmName}
-              </h2>
+              <h2 className="text-xl font-semibold">Metrics - {vmName}</h2>
               <p className="text-sm text-muted-foreground mt-1">
                 VMID: {vmid} • Type: {vmType.toUpperCase()}
               </p>
@@ -402,8 +372,8 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
         </div>
       </div>
 
-      {/* Scrollable Content */}
-      <div className="flex-1 overflow-y-auto p-6">{renderChart()}</div>
+      {/* Scrollable Content with all charts */}
+      <div className="flex-1 overflow-y-auto p-6">{renderAllCharts()}</div>
     </div>
   )
 }
diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index 2b0a3a6..1de44dd 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import type React from "react"
+
 import { useState, useMemo, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
 import { Badge } from "./ui/badge"
@@ -170,6 +172,30 @@ const getModalProgressColor = (percent: number): string => {
   return "[&>div]:bg-blue-500"
 }
 
+// Placeholder for the undeclared getOSIcon function
+const getOSIcon = (ostype: string | undefined, vmType: string): React.ReactNode => {
+  if (vmType === "lxc") {
+    return <Container className="h-16 w-16 text-cyan-500" />
+  }
+
+  switch (ostype) {
+    case "debian":
+      return <img src="/icons/debian.svg" alt="Debian" className="h-16 w-16" />
+    case "ubuntu":
+      return <img src="/icons/ubuntu.svg" alt="Ubuntu" className="h-16 w-16" />
+    case "centos":
+      return <img src="/icons/centos.svg" alt="CentOS" className="h-16 w-16" />
+    case "fedora":
+      return <img src="/icons/fedora.svg" alt="Fedora" className="h-16 w-16" />
+    case "windows":
+      return <img src="/icons/windows.svg" alt="Windows" className="h-16 w-16" />
+    case "alpine":
+      return <img src="/icons/alpine.svg" alt="Alpine" className="h-16 w-16" />
+    default:
+      return <Server className="h-16 w-16 text-purple-500" />
+  }
+}
+
 export function VirtualMachines() {
   const {
     data: vmData,
@@ -188,8 +214,8 @@ export function VirtualMachines() {
   const [detailsLoading, setDetailsLoading] = useState(false)
   const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
   const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
-  const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null)
   const [showAdditionalInfo, setShowAdditionalInfo] = useState(false)
+  const [selectedMetric, setSelectedMetric] = useState<string | null>(null) // undeclared variable fix
 
   useEffect(() => {
     const fetchLXCIPs = async () => {
@@ -223,7 +249,6 @@ export function VirtualMachines() {
   const handleVMClick = async (vm: VMData) => {
     setSelectedVM(vm)
     setCurrentView("main")
-    setSelectedMetric(null)
     setShowAdditionalInfo(false)
     setDetailsLoading(true)
     try {
@@ -239,14 +264,12 @@ export function VirtualMachines() {
     }
   }
 
-  const handleMetricClick = (metric: "cpu" | "memory" | "disk" | "network") => {
-    setSelectedMetric(metric)
+  const handleMetricsClick = () => {
     setCurrentView("metrics")
   }
 
   const handleBackToMain = () => {
     setCurrentView("main")
-    setSelectedMetric(null)
   }
 
   const handleVMControl = async (vmid: number, action: string) => {
@@ -562,7 +585,7 @@ export function VirtualMachines() {
                           <div
                             className="cursor-pointer hover:opacity-80 transition-opacity"
                             onClick={() => {
-                              setSelectedMetric("cpu")
+                              setSelectedMetric("cpu") // undeclared variable fix
                             }}
                           >
                             <div
@@ -789,112 +812,79 @@ export function VirtualMachines() {
                         <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
                           Basic Information
                         </h3>
-                        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
-                          {/* CPU Usage Card */}
-                          <Card className="border border-border bg-card/50">
-                            <CardContent className="p-3">
-                              <div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
-                              <div
-                                className="cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleMetricClick("cpu")}
-                              >
-                                <div className={`font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
+                        <Card
+                          className="border border-border bg-card/50 cursor-pointer hover:bg-card/70 transition-colors"
+                          onClick={handleMetricsClick}
+                        >
+                          <CardContent className="p-4">
+                            <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                              {/* CPU Usage */}
+                              <div>
+                                <div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
+                                <div className={`text-2xl font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
                                   {(selectedVM.cpu * 100).toFixed(1)}%
                                 </div>
                                 <Progress
                                   value={selectedVM.cpu * 100}
-                                  className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
+                                  className={`h-2 ${getModalProgressColor(selectedVM.cpu * 100)}`}
                                 />
                               </div>
-                            </CardContent>
-                          </Card>
 
-                          {/* Memory Card */}
-                          <Card className="border border-border bg-card/50">
-                            <CardContent className="p-3">
-                              <div className="text-xs text-muted-foreground mb-2">Memory</div>
-                              <div
-                                className="cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleMetricClick("memory")}
-                              >
+                              {/* Memory */}
+                              <div>
+                                <div className="text-xs text-muted-foreground mb-2">Memory</div>
                                 <div
-                                  className={`font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
+                                  className={`text-2xl font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                                 >
                                   {(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "}
                                   {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
                                 </div>
                                 <Progress
                                   value={(selectedVM.mem / selectedVM.maxmem) * 100}
-                                  className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
+                                  className={`h-2 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                                 />
                               </div>
-                            </CardContent>
-                          </Card>
 
-                          {/* Disk Card */}
-                          <Card className="border border-border bg-card/50">
-                            <CardContent className="p-3">
-                              <div className="text-xs text-muted-foreground mb-2">Disk</div>
-                              <div
-                                className="cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleMetricClick("disk")}
-                              >
-                                <div
-                                  className={`font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
-                                >
-                                  {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
-                                  {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
-                                </div>
-                                <Progress
-                                  value={(selectedVM.disk / selectedVM.maxdisk) * 100}
-                                  className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
-                                />
-                              </div>
-                            </CardContent>
-                          </Card>
-
-                          {/* Disk I/O Card */}
-                          <Card className="border border-border bg-card/50">
-                            <CardContent className="p-3">
-                              <div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
-                              <div
-                                className="cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleMetricClick("disk")}
-                              >
-                                <div className="text-sm text-green-500 flex items-center gap-1 mb-1">
-                                  <span>↓</span>
-                                  <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
-                                </div>
-                                <div className="text-sm text-blue-500 flex items-center gap-1">
-                                  <span>↑</span>
-                                  <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                              {/* Disk I/O */}
+                              <div>
+                                <div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
+                                <div className="space-y-1">
+                                  <div className="text-sm text-green-500 flex items-center gap-1">
+                                    <span>↓</span>
+                                    <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                                  </div>
+                                  <div className="text-sm text-blue-500 flex items-center gap-1">
+                                    <span>↑</span>
+                                    <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                                  </div>
                                 </div>
                               </div>
-                            </CardContent>
-                          </Card>
 
-                          {/* Network I/O Card */}
-                          <Card className="border border-border bg-card/50">
-                            <CardContent className="p-3">
-                              <div className="text-xs text-muted-foreground mb-2">Network I/O</div>
-                              <div
-                                className="cursor-pointer hover:opacity-80 transition-opacity"
-                                onClick={() => handleMetricClick("network")}
-                              >
-                                <div className="text-sm text-green-500 flex items-center gap-1 mb-1">
-                                  <span>↓</span>
-                                  <span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span>
-                                </div>
-                                <div className="text-sm text-blue-500 flex items-center gap-1">
-                                  <span>↑</span>
-                                  <span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                              {/* Network I/O */}
+                              <div>
+                                <div className="text-xs text-muted-foreground mb-2">Network I/O</div>
+                                <div className="space-y-1">
+                                  <div className="text-sm text-green-500 flex items-center gap-1">
+                                    <span>↓</span>
+                                    <span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                                  </div>
+                                  <div className="text-sm text-blue-500 flex items-center gap-1">
+                                    <span>↑</span>
+                                    <span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                                  </div>
                                 </div>
                               </div>
-                            </CardContent>
-                          </Card>
-                        </div>
+
+                              {/* OS Icon / VM Icon */}
+                              <div className="flex items-center justify-center col-span-2 lg:col-span-1">
+                                {getOSIcon(vmDetails?.config?.ostype, selectedVM.type)} {/* undeclared variable fix */}
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
                       </div>
 
+                      {/* ... existing RESOURCES card and additional info ... */}
                       {detailsLoading ? (
                         <div className="text-center py-8 text-muted-foreground">Loading configuration...</div>
                       ) : vmDetails?.config ? (
@@ -1140,13 +1130,12 @@ export function VirtualMachines() {
               </div>
             </>
           ) : (
-            selectedVM &&
-            selectedMetric && (
+            selectedVM && (
+              // Pass only vmid, vmName, vmType and onBack
               <MetricsView
                 vmid={selectedVM.vmid}
                 vmName={selectedVM.name}
                 vmType={selectedVM.type as "qemu" | "lxc"}
-                metricType={selectedMetric}
                 onBack={handleBackToMain}
               />
             )