diff --git a/src/app/page.tsx b/src/app/page.tsx
index e775a9e..965ecef 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -204,6 +204,25 @@ export default function Home() {
/>
+ {/* GB10 Fabric Overview */}
+
diff --git a/src/components/UnifiWidget.tsx b/src/components/UnifiWidget.tsx
index 864e202..c12a5aa 100644
--- a/src/components/UnifiWidget.tsx
+++ b/src/components/UnifiWidget.tsx
@@ -1,33 +1,53 @@
"use client";
import { useEffect, useState } from "react";
-import { Wifi, WifiOff } from "lucide-react";
+import { Wifi, WifiOff, Globe, Radio, Network, ArrowDown, ArrowUp } from "lucide-react";
+
+interface Health {
+ wan?: { status: string; wanIp: string; isp: string; txRate: number; rxRate: number; gateways: number; clients: number };
+ www?: { status: string; latency: number; uptime: number; downSpeed: number; upSpeed: number };
+ wlan?: { status: string; adopted: number; clients: number; aps: number; txRate: number; rxRate: number };
+ lan?: { status: string; adopted: number; clients: number; switches: number; txRate: number; rxRate: number };
+ vpn?: { status: string };
+}
+
+function formatRate(bytesPerSec: number): string {
+ if (bytesPerSec >= 1_000_000) return (bytesPerSec / 1_000_000).toFixed(1) + " MB/s";
+ if (bytesPerSec >= 1_000) return (bytesPerSec / 1_000).toFixed(0) + " KB/s";
+ return bytesPerSec + " B/s";
+}
+
+function StatusDot({ status }: { status: string }) {
+ const color = status === "ok" ? "bg-green-400" : status === "unknown" ? "bg-gray-500" : "bg-yellow-400";
+ return
;
+}
export default function UnifiWidget() {
const [devices, setDevices] = useState
([]);
+ const [health, setHealth] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
useEffect(() => {
- fetchDevices();
- const interval = setInterval(fetchDevices, 30000);
+ fetchData();
+ const interval = setInterval(fetchData, 30000);
return () => clearInterval(interval);
}, []);
- const fetchDevices = async () => {
+ const fetchData = async () => {
try {
const response = await fetch("/api/unifi");
if (response.ok) {
const data = await response.json();
- // API returns { devices, health, totalClients } — extract the array
const devArr = Array.isArray(data) ? data : Array.isArray(data?.devices) ? data.devices : [];
setDevices(devArr);
+ setHealth(data?.health || null);
setError(false);
} else {
setError(true);
}
setLoading(false);
- } catch (err) {
+ } catch {
setError(true);
setLoading(false);
}
@@ -43,6 +63,9 @@ export default function UnifiWidget() {
UniFi Network
+ {health?.wan && (
+ {health.wan.isp}
+ )}
{loading ? (
@@ -52,24 +75,70 @@ export default function UnifiWidget() {
) : error ? (