From 19e7a43fe333df123a973f3ca186a028c6f39fb0 Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Fri, 17 Oct 2025 19:16:55 +0200
Subject: [PATCH] Update network-metrics.tsx

---
 AppImage/components/network-metrics.tsx | 362 +++++++++---------------
 1 file changed, 140 insertions(+), 222 deletions(-)

diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index d09ae60..6ebe940 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -249,9 +249,54 @@ export function NetworkMetrics() {
             </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>
+            <Router className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-500">Active</div>
+            <div className="flex items-center gap-2 mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs">
+                Protected
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">System protected</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">Network Health</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground mb-2">
+              <Badge variant="outline" className={healthColor}>
+                {healthStatus}
+              </Badge>
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Packet Loss:</span>
+                <span
+                  className={`font-medium ${Number.parseFloat(avgPacketLoss) > 1 ? "text-red-500" : "text-green-500"}`}
+                >
+                  {avgPacketLoss}%
+                </span>
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Errors:</span>
+                <span className={`font-medium ${totalErrors > 100 ? "text-red-500" : "text-green-500"}`}>
+                  {totalErrors}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
-      {/* Physical Interfaces */}
       {networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
@@ -269,129 +314,66 @@ export function NetworkMetrics() {
                 const typeBadge = getInterfaceTypeBadge(interface_.type)
 
                 return (
-                  <div key={index}>
-                    <div
-                      className="sm:hidden flex flex-col gap-3 p-4 rounded-lg border border-white/10 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>
-                        <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()}
+                  <div
+                    key={index}
+                    className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 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 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">
-                          <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">
-                            <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>
+                      <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
-                      className="hidden sm:flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-card 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>
+                    {/* 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>
-                        <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"}
-                          </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>
-                          <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 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">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 className="text-muted-foreground text-xs">MAC</div>
+                          <div className="font-medium text-foreground font-mono text-xs truncate">
+                            {interface_.mac_address}
                           </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>
                 )
@@ -420,7 +402,7 @@ export function NetworkMetrics() {
                 return (
                   <div
                     key={index}
-                    className="hidden sm:flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-card hover:bg-white/5 transition-colors cursor-pointer"
+                    className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer"
                     onClick={() => setSelectedInterface(interface_)}
                   >
                     {/* First row: Icon, Name, Type Badge, Physical Interface (responsive), Status */}
@@ -533,131 +515,67 @@ export function NetworkMetrics() {
                 const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
 
                 return (
-                  <div key={index}>
-                    <div
-                      className="sm:hidden flex flex-col gap-3 p-4 rounded-lg border border-white/10 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()}
+                  <div
+                    key={index}
+                    className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 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>
-                      </div>
-
-                      {/* Second row: Details - Responsive layout */}
-                      <div className="grid grid-cols-2 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">
-                          <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">
-                            <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>
+                        {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>
 
-                    <div
-                      className="hidden sm:flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-card 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>
+                    {/* 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>
 
-                      {/* 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 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>
-                          <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 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">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 className="text-sm text-muted-foreground">MAC</div>
+                          <div className="font-medium text-foreground font-mono text-xs truncate">
+                            {interface_.mac_address}
                           </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>
                 )