style: Updated the overall UI of the provisining pages

frontend/src/devices/DeviceDetail.jsx

@@ -17,6 +17,23 @@ L.Icon.Default.mergeOptions({
   shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
 });
 
+// --- Helpers ---
+
+function formatSecondsAgo(seconds) {
+  if (seconds == null) return null;
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) {
+    const m = Math.round(seconds / 60);
+    return `${m}m ago`;
+  }
+  if (seconds < 86400) {
+    const h = Math.round(seconds / 3600);
+    return `${h}h ago`;
+  }
+  const d = Math.round(seconds / 86400);
+  return `${d}d ago`;
+}
+
 // --- Helper components ---
 
 function Field({ label, children }) {
@@ -3023,7 +3040,7 @@ export default function DeviceDetail() {
                 {isOnline ? "Online" : "Offline"}
                 {mqttStatus && (
                   <span className="ml-2 text-xs font-normal" style={{ color: "var(--text-muted)" }}>
-                    {mqttStatus.seconds_since_heartbeat}s ago
+                    {formatSecondsAgo(mqttStatus.seconds_since_heartbeat)}
                   </span>
                 )}
               </span>