Update AppImage

AppImage/components/network-metrics.tsx

@@ -4,10 +4,9 @@ import { useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
 import { Badge } from "./ui/badge"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
-import { Wifi, Activity, Network, Router, AlertCircle, Zap, Info } from "lucide-react"
+import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
 import useSWR from "swr"
 import { NetworkTrafficChart } from "./network-traffic-chart"
-import { VMNetworkChart } from "./vm-lxc-network-chart"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 
 interface NetworkData {
@@ -155,15 +154,12 @@ export function NetworkMetrics() {
   const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
   const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
   const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
-  // REMOVED: const [vmLxcTraffic, setVmLxcTraffic] = useState<Record<number, { received: number; sent: number }>>({})
 
   const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
     refreshInterval: 30000,
     revalidateOnFocus: false,
   })
 
-  // REMOVED: useEffect for VM/LXC traffic fetch
-
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -195,10 +191,8 @@ export function NetworkMetrics() {
     )
   }
 
-  // REMOVED: const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes
-  // REMOVED: const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent * 1024 * 1024 * 1024)
-  const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv)
-  const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent)
+  const trafficInFormatted = formatStorage(networkTotals.received * 1024 * 1024 * 1024) // Convert GB to bytes
+  const trafficOutFormatted = formatStorage(networkTotals.sent * 1024 * 1024 * 1024)
   const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0"
 
   const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0)
@@ -248,15 +242,11 @@ export function NetworkMetrics() {
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
                 <span className="text-sm text-muted-foreground hidden md:inline">Received:</span>
-                <span className="text-base lg:text-xl font-bold text-green-500">
-                  ↓ {formatStorage(networkData.traffic.bytes_recv)}
-                </span>
+                <span className="text-base lg:text-xl font-bold text-green-500">↓ {trafficInFormatted}</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-sm text-muted-foreground hidden md:inline">Sent:</span>
-                <span className="text-base lg:text-xl font-bold text-blue-500">
-                  ↑ {formatStorage(networkData.traffic.bytes_sent)}
-                </span>
+                <span className="text-base lg:text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
               </div>
             </div>
           </CardContent>
@@ -353,113 +343,100 @@ export function NetworkMetrics() {
         </CardContent>
       </Card>
 
-      {/* VM & LXC Network Interfaces section */}
-      {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
-        <Card className="bg-card border-border">
-          <CardHeader>
-            <CardTitle className="text-foreground flex items-center">
-              <Network className="h-5 w-5 mr-2" />
-              VM & LXC Network Interfaces
-              <Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
-                {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
-              </Badge>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {networkData.vm_lxc_interfaces.map((interface_, index) => {
-                const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
-                // REMOVED: const trafficData = interface_.vmid && vmLxcTraffic[interface_.vmid]
-                // REMOVED: const bytesRecv = trafficData ? trafficData.received : interface_.bytes_recv
-                // REMOVED: const bytesSent = trafficData ? trafficData.sent : interface_.bytes_sent
+      {/* Physical Interfaces section */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Router className="h-5 w-5 mr-2" />
+            Physical Interfaces
+            <Badge variant="outline" className="ml-3 bg-blue-500/10 text-blue-500 border-blue-500/20">
+              {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {networkData.physical_interfaces.map((interface_, index) => {
+              const typeBadge = getInterfaceTypeBadge(interface_.type)
 
-                return (
-                  <div
-                    key={index}
-                    className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
-                    onClick={() => setSelectedInterface(interface_)}
-                  >
-                    {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
-                    <div className="flex items-center gap-3 flex-wrap">
-                      <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
-                      <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
-                        <div className="font-medium text-foreground">{interface_.name}</div>
-                        <Badge variant="outline" className={vmTypeBadge.color}>
-                          {vmTypeBadge.label}
-                        </Badge>
-                        {interface_.vm_name && (
-                          <div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
-                        )}
-                      </div>
-                      <Badge
-                        variant="outline"
-                        className={
-                          interface_.status === "up"
-                            ? "bg-green-500/10 text-green-500 border-green-500/20"
-                            : "bg-red-500/10 text-red-500 border-red-500/20"
-                        }
-                      >
-                        {interface_.status.toUpperCase()}
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
+                  onClick={() => setSelectedInterface(interface_)}
+                >
+                  {/* First row: Icon, Name, Type Badge, Status */}
+                  <div className="flex items-center gap-3 flex-wrap">
+                    <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
+                      <div className="font-medium text-foreground">{interface_.name}</div>
+                      <Badge variant="outline" className={typeBadge.color}>
+                        {typeBadge.label}
                       </Badge>
                     </div>
-
-                    {/* Second row: Details - Responsive layout */}
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                      <div>
-                        <div className="text-sm text-muted-foreground">VMID</div>
-                        <div className="font-medium">{interface_.vmid ?? "N/A"}</div>
-                      </div>
-
-                      <div>
-                        <div className="text-sm text-muted-foreground">Speed</div>
-                        <div className="font-medium text-foreground flex items-center gap-1">
-                          <Zap className="h-3 w-3" />
-                          {formatSpeed(interface_.speed)}
-                        </div>
-                      </div>
-
-                      <div className="col-span-2 md:col-span-1">
-                        <div className="text-sm text-muted-foreground">Traffic</div>
-                        <div className="font-medium text-foreground text-xs">
-                          <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
-                          {" / "}
-                          <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
-                        </div>
-                      </div>
-
-                      {interface_.mac_address && (
-                        <div className="col-span-2 md:col-span-1">
-                          <div className="text-sm text-muted-foreground">MAC</div>
-                          <div className="font-medium text-foreground font-mono text-xs truncate">
-                            {interface_.mac_address}
-                          </div>
-                        </div>
-                      )}
-                    </div>
+                    <Badge
+                      variant="outline"
+                      className={
+                        interface_.status === "up"
+                          ? "bg-green-500/10 text-green-500 border-green-500/20"
+                          : "bg-red-500/10 text-red-500 border-red-500/20"
+                      }
+                    >
+                      {interface_.status.toUpperCase()}
+                    </Badge>
                   </div>
-                )
-              })}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+
+                  {/* Second row: Details - Responsive layout */}
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    <div>
+                      <div className="text-muted-foreground text-xs">IP Address</div>
+                      <div className="font-medium text-foreground font-mono text-sm truncate">
+                        {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
+                      </div>
+                    </div>
+
+                    <div>
+                      <div className="text-muted-foreground text-xs">Speed</div>
+                      <div className="font-medium text-foreground flex items-center gap-1 text-xs">
+                        <Zap className="h-3 w-3" />
+                        {formatSpeed(interface_.speed)}
+                      </div>
+                    </div>
+
+                    <div className="col-span-2 md:col-span-1">
+                      <div className="text-muted-foreground text-xs">Traffic Statistics</div>
+                      <div className="font-medium text-foreground text-xs">
+                        <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
+                        {" / "}
+                        <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
+                      </div>
+                    </div>
+
+                    {interface_.mac_address && (
+                      <div className="col-span-2 md:col-span-1">
+                        <div className="text-muted-foreground text-xs">MAC</div>
+                        <div className="font-medium text-foreground font-mono text-xs truncate">
+                          {interface_.mac_address}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
 
       {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
-            <CardTitle className="text-foreground flex items-center flex-wrap gap-2">
+            <CardTitle className="text-foreground flex items-center">
               <Network className="h-5 w-5 mr-2" />
               Bridge Interfaces
-              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+              <Badge variant="outline" className="ml-3 bg-green-500/10 text-green-500 border-green-500/20">
                 {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active
               </Badge>
-              <Badge
-                variant="outline"
-                className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
-              >
-                <Info className="h-3 w-3" />
-                Since Boot
-              </Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -540,7 +517,7 @@ export function NetworkMetrics() {
                       </div>
 
                       <div className="col-span-2 md:col-span-1">
-                        <div className="text-muted-foreground text-xs">Traffic</div>
+                        <div className="text-muted-foreground text-xs">Traffic Statistics</div>
                         <div className="font-medium text-foreground text-xs">
                           <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
                           {" / "}
@@ -565,96 +542,93 @@ export function NetworkMetrics() {
         </Card>
       )}
 
-      <Card className="bg-card border-border">
-        <CardHeader>
-          <CardTitle className="text-foreground flex items-center flex-wrap gap-2">
-            <Router className="h-5 w-5 mr-2" />
-            Physical Interfaces
-            <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
-              {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
-            </Badge>
-            <Badge
-              variant="outline"
-              className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
-            >
-              <Info className="h-3 w-3" />
-              Since Boot
-            </Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {networkData.physical_interfaces.map((interface_, index) => {
-              const typeBadge = getInterfaceTypeBadge(interface_.type)
+      {/* VM & LXC Network Interfaces section */}
+      {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Network className="h-5 w-5 mr-2" />
+              VM & LXC Network Interfaces
+              <Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
+                {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {networkData.vm_lxc_interfaces.map((interface_, index) => {
+                const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
 
-              return (
-                <div
-                  key={index}
-                  className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
-                  onClick={() => setSelectedInterface(interface_)}
-                >
-                  {/* First row: Icon, Name, Type Badge, Status */}
-                  <div className="flex items-center gap-3 flex-wrap">
-                    <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
-                    <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
-                      <div className="font-medium text-foreground">{interface_.name}</div>
-                      <Badge variant="outline" className={typeBadge.color}>
-                        {typeBadge.label}
+                return (
+                  <div
+                    key={index}
+                    className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
+                    onClick={() => setSelectedInterface(interface_)}
+                  >
+                    {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                      <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
+                        <div className="font-medium text-foreground">{interface_.name}</div>
+                        <Badge variant="outline" className={vmTypeBadge.color}>
+                          {vmTypeBadge.label}
+                        </Badge>
+                        {interface_.vm_name && (
+                          <div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
+                        )}
+                      </div>
+                      <Badge
+                        variant="outline"
+                        className={
+                          interface_.status === "up"
+                            ? "bg-green-500/10 text-green-500 border-green-500/20"
+                            : "bg-red-500/10 text-red-500 border-red-500/20"
+                        }
+                      >
+                        {interface_.status.toUpperCase()}
                       </Badge>
                     </div>
-                    <Badge
-                      variant="outline"
-                      className={
-                        interface_.status === "up"
-                          ? "bg-green-500/10 text-green-500 border-green-500/20"
-                          : "bg-red-500/10 text-red-500 border-red-500/20"
-                      }
-                    >
-                      {interface_.status.toUpperCase()}
-                    </Badge>
-                  </div>
 
-                  {/* Second row: Details - Responsive layout */}
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                    <div>
-                      <div className="text-muted-foreground text-xs">IP Address</div>
-                      <div className="font-medium text-foreground font-mono text-sm truncate">
-                        {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
+                    {/* Second row: Details - Responsive layout */}
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                      <div>
+                        <div className="text-sm text-muted-foreground">VMID</div>
+                        <div className="font-medium">{interface_.vmid ?? "N/A"}</div>
                       </div>
-                    </div>
 
-                    <div>
-                      <div className="text-muted-foreground text-xs">Speed</div>
-                      <div className="font-medium text-foreground flex items-center gap-1 text-xs">
-                        <Zap className="h-3 w-3" />
-                        {formatSpeed(interface_.speed)}
-                      </div>
-                    </div>
-
-                    <div className="col-span-2 md:col-span-1">
-                      <div className="text-muted-foreground text-xs">Traffic</div>
-                      <div className="font-medium text-foreground text-xs">
-                        <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
-                        {" / "}
-                        <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
-                      </div>
-                    </div>
-
-                    {interface_.mac_address && (
-                      <div className="col-span-2 md:col-span-1">
-                        <div className="text-muted-foreground text-xs">MAC</div>
-                        <div className="font-medium text-foreground font-mono text-xs truncate">
-                          {interface_.mac_address}
+                      <div>
+                        <div className="text-sm text-muted-foreground">Speed</div>
+                        <div className="font-medium text-foreground flex items-center gap-1">
+                          <Zap className="h-3 w-3" />
+                          {formatSpeed(interface_.speed)}
                         </div>
                       </div>
-                    )}
+
+                      <div className="col-span-2 md:col-span-1">
+                        <div className="text-sm text-muted-foreground">Traffic Statistics</div>
+                        <div className="font-medium text-foreground text-xs">
+                          <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
+                          {" / "}
+                          <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
+                        </div>
+                      </div>
+
+                      {interface_.mac_address && (
+                        <div className="col-span-2 md:col-span-1">
+                          <div className="text-sm text-muted-foreground">MAC</div>
+                          <div className="font-medium text-foreground font-mono text-xs truncate">
+                            {interface_.mac_address}
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )
-            })}
-          </div>
-        </CardContent>
-      </Card>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
       {/* Interface Details Modal */}
       <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
@@ -858,18 +832,6 @@ export function NetworkMetrics() {
                 </div>
               </div>
 
-              {/* Network chart for VM/LXC interfaces */}
-              {selectedInterface.type === "vm_lxc" && selectedInterface.vmid && selectedInterface.vm_type && (
-                <div>
-                  <h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
-                  <VMNetworkChart
-                    vmid={selectedInterface.vmid}
-                    vmType={selectedInterface.vm_type as "qemu" | "lxc"}
-                    initialTimeframe={timeframe}
-                  />
-                </div>
-              )}
-
               {/* Bond Information */}
               {selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
                 <div>

AppImage/components/vm-lxc-network-chart.tsx

@@ -1,195 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
-import useSWR from "swr"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
-
-interface VMNetworkChartProps {
-  vmid: number
-  vmType: "qemu" | "lxc"
-  initialTimeframe?: "hour" | "day" | "week" | "month" | "year"
-}
-
-const fetcher = async (url: string) => {
-  const response = await fetch(url, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-    signal: AbortSignal.timeout(10000),
-  })
-  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-  return response.json()
-}
-
-const formatBytes = (bytes: number): string => {
-  if (bytes === 0) return "0 B"
-  const k = 1024
-  const sizes = ["B", "KB", "MB", "GB", "TB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
-}
-
-export function VMNetworkChart({ vmid, vmType, initialTimeframe = "day" }: VMNetworkChartProps) {
-  const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">(initialTimeframe)
-  const [visibleLines, setVisibleLines] = useState({ received: true, sent: true })
-  const [chartData, setChartData] = useState<any[]>([])
-
-  const { data: rrdData } = useSWR(`/api/${vmType}/${vmid}/rrddata?timeframe=${timeframe}`, fetcher, {
-    refreshInterval: 30000,
-    revalidateOnFocus: false,
-  })
-
-  useEffect(() => {
-    if (!rrdData) return
-
-    const transformedData = rrdData.map((point: any) => {
-      const timestamp = new Date(point.time * 1000)
-      const hours = timestamp.getHours().toString().padStart(2, "0")
-      const minutes = timestamp.getMinutes().toString().padStart(2, "0")
-      const month = (timestamp.getMonth() + 1).toString().padStart(2, "0")
-      const day = timestamp.getDate().toString().padStart(2, "0")
-
-      let timeLabel = `${hours}:${minutes}`
-      if (timeframe === "week" || timeframe === "month") {
-        timeLabel = `${month}/${day}`
-      } else if (timeframe === "year") {
-        timeLabel = `${month}/${day}`
-      }
-
-      // Calculate traffic in GB for the interval
-      const intervalSeconds = timeframe === "hour" ? 60 : timeframe === "day" ? 60 : timeframe === "week" ? 1800 : 3600
-      const receivedGB = ((point.netin || 0) * intervalSeconds) / (1024 * 1024 * 1024)
-      const sentGB = ((point.netout || 0) * intervalSeconds) / (1024 * 1024 * 1024)
-
-      return {
-        time: timeLabel,
-        received: receivedGB,
-        sent: sentGB,
-      }
-    })
-
-    setChartData(transformedData)
-  }, [rrdData, timeframe])
-
-  const toggleLine = (line: "received" | "sent") => {
-    setVisibleLines((prev) => ({ ...prev, [line]: !prev[line] }))
-  }
-
-  const getTimeframeLabel = () => {
-    switch (timeframe) {
-      case "hour":
-        return "1 Hour"
-      case "day":
-        return "24 Hours"
-      case "week":
-        return "7 Days"
-      case "month":
-        return "30 Days"
-      case "year":
-        return "1 Year"
-      default:
-        return "24 Hours"
-    }
-  }
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload && payload.length) {
-      return (
-        <div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg p-3 shadow-lg">
-          <p className="text-sm font-medium text-foreground mb-2">{payload[0].payload.time}</p>
-          {payload.map((entry: any, index: number) => (
-            <div key={index} className="flex items-center justify-between gap-4 text-sm">
-              <span className="flex items-center gap-2">
-                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
-                <span className="text-muted-foreground">{entry.name}:</span>
-              </span>
-              <span className="font-medium text-foreground">{formatBytes(entry.value * 1024 * 1024 * 1024)}</span>
-            </div>
-          ))}
-        </div>
-      )
-    }
-    return null
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Timeframe Selector */}
-      <div className="flex justify-end">
-        <Select value={timeframe} onValueChange={(value: any) => setTimeframe(value)}>
-          <SelectTrigger className="w-[180px] bg-card border-border">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="hour">1 Hour</SelectItem>
-            <SelectItem value="day">24 Hours</SelectItem>
-            <SelectItem value="week">7 Days</SelectItem>
-            <SelectItem value="month">30 Days</SelectItem>
-            <SelectItem value="year">1 Year</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Interactive Legend */}
-      <div className="flex items-center justify-center gap-6 pb-2">
-        <button
-          onClick={() => toggleLine("received")}
-          className={`flex items-center gap-2 transition-opacity ${!visibleLines.received ? "opacity-40" : ""}`}
-        >
-          <span className="w-3 h-3 rounded-full bg-green-500" />
-          <span className="text-sm font-medium">Received</span>
-        </button>
-        <button
-          onClick={() => toggleLine("sent")}
-          className={`flex items-center gap-2 transition-opacity ${!visibleLines.sent ? "opacity-40" : ""}`}
-        >
-          <span className="w-3 h-3 rounded-full bg-blue-500" />
-          <span className="text-sm font-medium">Sent</span>
-        </button>
-      </div>
-
-      {/* Chart */}
-      <ResponsiveContainer width="100%" height={300}>
-        <AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
-          <defs>
-            <linearGradient id="colorReceived" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
-              <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
-            </linearGradient>
-            <linearGradient id="colorSent" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
-            </linearGradient>
-          </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
-          <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} tickLine={false} />
-          <YAxis
-            stroke="hsl(var(--muted-foreground))"
-            fontSize={12}
-            tickLine={false}
-            tickFormatter={(value) => {
-              if (value === 0) return "0"
-              if (value < 0.01) return `${(value * 1024).toFixed(0)} MB`
-              return `${value.toFixed(2)} GB`
-            }}
-            label={{ value: "GB", angle: -90, position: "insideLeft", style: { fill: "hsl(var(--muted-foreground))" } }}
-          />
-          <Tooltip content={<CustomTooltip />} />
-          {visibleLines.received && (
-            <Area
-              type="monotone"
-              dataKey="received"
-              stroke="#10b981"
-              strokeWidth={2}
-              fill="url(#colorReceived)"
-              name="Received"
-            />
-          )}
-          {visibleLines.sent && (
-            <Area type="monotone" dataKey="sent" stroke="#3b82f6" strokeWidth={2} fill="url(#colorSent)" name="Sent" />
-          )}
-        </AreaChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}