From ab59e2deac08e1f970197c160878b8f5e0cd8a21 Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Fri, 17 Oct 2025 19:06:15 +0200
Subject: [PATCH] Update AppImage

---
 AppImage/components/network-metrics.tsx  | 345 ++++++++++++++++-------
 AppImage/components/storage-overview.tsx | 176 ++++++++----
 2 files changed, 357 insertions(+), 164 deletions(-)

diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index c04a62c..d09ae60 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -269,66 +269,129 @@ export function NetworkMetrics() {
                 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 hover:bg-white/10 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}
+                  <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()}
                         </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"}
-                        </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}
+                      {/* 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>
+                    </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>
+                        </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>
+                          <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>
+                        )}
+                      </div>
                     </div>
                   </div>
                 )
@@ -470,67 +533,131 @@ export function NetworkMetrics() {
                 const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
 
                 return (
-                  <div
-                    key={index}
-                    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}
+                  <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()}
                         </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>
-
-                    {/* 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)}
+                      {/* 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="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 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>
+                        )}
+                      </div>
+                    </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>
+                      </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>
                     </div>
                   </div>
                 )
diff --git a/AppImage/components/storage-overview.tsx b/AppImage/components/storage-overview.tsx
index 64ca8d3..3ae6985 100644
--- a/AppImage/components/storage-overview.tsx
+++ b/AppImage/components/storage-overview.tsx
@@ -642,69 +642,135 @@ export function StorageOverview() {
         <CardContent>
           <div className="space-y-4">
             {storageData.disks.map((disk) => (
-              <div
-                key={disk.name}
-                className="border border-white/10 rounded-lg p-4 cursor-pointer bg-card hover:bg-white/5 dark:bg-card dark:hover:bg-white/5 transition-colors"
-                onClick={() => handleDiskClick(disk)}
-              >
-                <div className="space-y-2 mb-3">
-                  {/* Row 1: Device name and type badge */}
-                  <div className="flex items-center gap-2">
-                    <HardDrive className="h-5 w-5 text-muted-foreground flex-shrink-0" />
-                    <h3 className="font-semibold">/dev/{disk.name}</h3>
-                    <Badge className={getDiskTypeBadge(disk.name, disk.rotation_rate).className}>
-                      {getDiskTypeBadge(disk.name, disk.rotation_rate).label}
-                    </Badge>
+              <div key={disk.name}>
+                <div
+                  className="sm:hidden border border-white/10 rounded-lg p-4 cursor-pointer bg-white/5 transition-colors"
+                  onClick={() => handleDiskClick(disk)}
+                >
+                  <div className="space-y-2 mb-3">
+                    {/* Row 1: Device name and type badge */}
+                    <div className="flex items-center gap-2">
+                      <HardDrive className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                      <h3 className="font-semibold">/dev/{disk.name}</h3>
+                      <Badge className={getDiskTypeBadge(disk.name, disk.rotation_rate).className}>
+                        {getDiskTypeBadge(disk.name, disk.rotation_rate).label}
+                      </Badge>
+                    </div>
+
+                    {/* Row 2: Model, temperature, and health status */}
+                    <div className="flex items-center justify-between gap-3 pl-7">
+                      {disk.model && disk.model !== "Unknown" && (
+                        <p className="text-sm text-muted-foreground truncate flex-1 min-w-0">{disk.model}</p>
+                      )}
+                      <div className="flex items-center gap-3 flex-shrink-0">
+                        {disk.temperature > 0 && (
+                          <div className="flex items-center gap-1">
+                            <Thermometer
+                              className={`h-4 w-4 ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
+                            />
+                            <span
+                              className={`text-sm font-medium ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
+                            >
+                              {disk.temperature}°C
+                            </span>
+                          </div>
+                        )}
+                        {getHealthBadge(disk.health)}
+                      </div>
+                    </div>
                   </div>
 
-                  {/* Row 2: Model, temperature, and health status */}
-                  <div className="flex items-center justify-between gap-3 pl-7">
-                    {disk.model && disk.model !== "Unknown" && (
-                      <p className="text-sm text-muted-foreground truncate flex-1 min-w-0">{disk.model}</p>
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    {disk.size_formatted && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Size</p>
+                        <p className="font-medium">{disk.size_formatted}</p>
+                      </div>
+                    )}
+                    {disk.smart_status && disk.smart_status !== "unknown" && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">SMART Status</p>
+                        <p className="font-medium capitalize">{disk.smart_status}</p>
+                      </div>
+                    )}
+                    {disk.power_on_hours !== undefined && disk.power_on_hours > 0 && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Power On Time</p>
+                        <p className="font-medium">{formatHours(disk.power_on_hours)}</p>
+                      </div>
+                    )}
+                    {disk.serial && disk.serial !== "Unknown" && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Serial</p>
+                        <p className="font-medium text-xs">{disk.serial}</p>
+                      </div>
                     )}
-                    <div className="flex items-center gap-3 flex-shrink-0">
-                      {disk.temperature > 0 && (
-                        <div className="flex items-center gap-1">
-                          <Thermometer
-                            className={`h-4 w-4 ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
-                          />
-                          <span
-                            className={`text-sm font-medium ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
-                          >
-                            {disk.temperature}°C
-                          </span>
-                        </div>
-                      )}
-                      {getHealthBadge(disk.health)}
-                    </div>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                  {disk.size_formatted && (
-                    <div>
-                      <p className="text-sm text-muted-foreground">Size</p>
-                      <p className="font-medium">{disk.size_formatted}</p>
+                <div
+                  className="hidden sm:block border border-white/10 rounded-lg p-4 cursor-pointer bg-card hover:bg-white/5 transition-colors"
+                  onClick={() => handleDiskClick(disk)}
+                >
+                  <div className="space-y-2 mb-3">
+                    {/* Row 1: Device name and type badge */}
+                    <div className="flex items-center gap-2">
+                      <HardDrive className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                      <h3 className="font-semibold">/dev/{disk.name}</h3>
+                      <Badge className={getDiskTypeBadge(disk.name, disk.rotation_rate).className}>
+                        {getDiskTypeBadge(disk.name, disk.rotation_rate).label}
+                      </Badge>
                     </div>
-                  )}
-                  {disk.smart_status && disk.smart_status !== "unknown" && (
-                    <div>
-                      <p className="text-sm text-muted-foreground">SMART Status</p>
-                      <p className="font-medium capitalize">{disk.smart_status}</p>
+
+                    {/* Row 2: Model, temperature, and health status */}
+                    <div className="flex items-center justify-between gap-3 pl-7">
+                      {disk.model && disk.model !== "Unknown" && (
+                        <p className="text-sm text-muted-foreground truncate flex-1 min-w-0">{disk.model}</p>
+                      )}
+                      <div className="flex items-center gap-3 flex-shrink-0">
+                        {disk.temperature > 0 && (
+                          <div className="flex items-center gap-1">
+                            <Thermometer
+                              className={`h-4 w-4 ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
+                            />
+                            <span
+                              className={`text-sm font-medium ${getTempColor(disk.temperature, disk.name, disk.rotation_rate)}`}
+                            >
+                              {disk.temperature}°C
+                            </span>
+                          </div>
+                        )}
+                        {getHealthBadge(disk.health)}
+                      </div>
                     </div>
-                  )}
-                  {disk.power_on_hours !== undefined && disk.power_on_hours > 0 && (
-                    <div>
-                      <p className="text-sm text-muted-foreground">Power On Time</p>
-                      <p className="font-medium">{formatHours(disk.power_on_hours)}</p>
-                    </div>
-                  )}
-                  {disk.serial && disk.serial !== "Unknown" && (
-                    <div>
-                      <p className="text-sm text-muted-foreground">Serial</p>
-                      <p className="font-medium text-xs">{disk.serial}</p>
-                    </div>
-                  )}
+                  </div>
+
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    {disk.size_formatted && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Size</p>
+                        <p className="font-medium">{disk.size_formatted}</p>
+                      </div>
+                    )}
+                    {disk.smart_status && disk.smart_status !== "unknown" && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">SMART Status</p>
+                        <p className="font-medium capitalize">{disk.smart_status}</p>
+                      </div>
+                    )}
+                    {disk.power_on_hours !== undefined && disk.power_on_hours > 0 && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Power On Time</p>
+                        <p className="font-medium">{formatHours(disk.power_on_hours)}</p>
+                      </div>
+                    )}
+                    {disk.serial && disk.serial !== "Unknown" && (
+                      <div>
+                        <p className="text-sm text-muted-foreground">Serial</p>
+                        <p className="font-medium text-xs">{disk.serial}</p>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
             ))}