From 7a48fc2a28e3d7e20c106561dbd390bd0489654b Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 13 Aug 2025 01:24:35 -0600
Subject: [PATCH] Fix drive usage display and center status icon

---
 Data/Server/WebUI/src/Device_Details.jsx | 34 +++++++++++++++++++-----
 Data/Server/WebUI/src/Device_List.jsx    | 26 +++++++++---------
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/Data/Server/WebUI/src/Device_Details.jsx b/Data/Server/WebUI/src/Device_Details.jsx
index 5309b8a..6c61e2b 100644
--- a/Data/Server/WebUI/src/Device_Details.jsx
+++ b/Data/Server/WebUI/src/Device_Details.jsx
@@ -283,13 +283,33 @@ export default function DeviceDetails({ device, onBack }) {
   };
 
   const renderStorage = () => {
-    const rows = (details.storage || []).map((d) => ({
-      drive: d.drive,
-      disk_type: d.disk_type,
-      usage: d.usage !== undefined ? Number(d.usage) : undefined,
-      total: d.total !== undefined ? Number(d.total) : undefined,
-      free: d.free !== undefined ? Number(d.free) : undefined,
-    }));
+    const parseNum = (val) => {
+      if (val === undefined || val === null) return undefined;
+      const n = Number(String(val).replace(/[^0-9.]/g, ""));
+      return Number.isNaN(n) ? undefined : n;
+    };
+    const rows = (details.storage || []).map((d) => {
+      const total = parseNum(d.total);
+      const rawFree = parseNum(d.free);
+      const freePct = rawFree !== undefined
+        ? rawFree <= 100
+          ? rawFree
+          : total
+          ? (rawFree / total) * 100
+          : undefined
+        : undefined;
+      let usage = parseNum(d.usage);
+      if ((usage === undefined || Number.isNaN(usage)) && freePct !== undefined) {
+        usage = 100 - freePct;
+      }
+      return {
+        drive: d.drive,
+        disk_type: d.disk_type,
+        usage,
+        total,
+        free: freePct,
+      };
+    });
     if (!rows.length)
       return placeholderTable(["Drive Letter", "Disk Type", "Usage", "Total Size", "Free %"]);
     return (
diff --git a/Data/Server/WebUI/src/Device_List.jsx b/Data/Server/WebUI/src/Device_List.jsx
index 0799c4c..adf87c7 100644
--- a/Data/Server/WebUI/src/Device_List.jsx
+++ b/Data/Server/WebUI/src/Device_List.jsx
@@ -172,18 +172,20 @@ export default function DeviceList({ onSelectDevice }) {
               sx={{ cursor: onSelectDevice ? "pointer" : "default" }}
             >
               <TableCell>
-                <span
-                  style={{
-                    display: "inline-block",
-                    width: 10,
-                    height: 10,
-                    borderRadius: 10,
-                    background: statusColor(r.status),
-                    marginRight: 8,
-                    verticalAlign: "middle"
-                  }}
-                />
-                {r.status}
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box
+                    component="span"
+                    sx={{
+                      display: "inline-block",
+                      width: 10,
+                      height: 10,
+                      borderRadius: 10,
+                      bgcolor: statusColor(r.status),
+                      mr: 1,
+                    }}
+                  />
+                  {r.status}
+                </Box>
               </TableCell>
               <TableCell>{r.hostname}</TableCell>
               <TableCell>{timeSince(r.lastSeen)}</TableCell>