diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index 194ac3f..dc54384 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -65,8 +65,14 @@ export function Settings() {
}, [])
const changeNetworkUnit = (unit: string) => {
- localStorage.setItem("proxmenux-network-unit", unit);
+ const settings = { networkUnit: unit }
+ localStorage.setItem('unitsSettings', JSON.stringify(settings))
+ localStorage.setItem("proxmenux-network-unit", unit); // Keep legacy for backwards compatibility
setNetworkUnitSettings(unit);
+
+ // Dispatch custom event to notify other components
+ window.dispatchEvent(new Event('unitsSettingsChanged'))
+ window.dispatchEvent(new Event('storage'))
};
const getUnitsSettings = () => {
diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx
index 271aa4b..4152bda 100644
--- a/AppImage/components/system-overview.tsx
+++ b/AppImage/components/system-overview.tsx
@@ -163,6 +163,38 @@ export function SystemOverview() {
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes")
+ useEffect(() => {
+ const getSettings = () => {
+ if (typeof window === 'undefined') return { networkUnit: 'Bytes' as const }
+ try {
+ const settings = window.localStorage.getItem('unitsSettings')
+ if (settings) {
+ const parsed = JSON.parse(settings)
+ return { networkUnit: parsed.networkUnit || 'Bytes' }
+ }
+ } catch (e) {
+ console.error('[v0] Error reading units settings:', e)
+ }
+ return { networkUnit: 'Bytes' as const }
+ }
+
+ const settings = getSettings()
+ setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
+
+ const handleStorageChange = () => {
+ const settings = getSettings()
+ setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
+ }
+
+ window.addEventListener('storage', handleStorageChange)
+ window.addEventListener('unitsSettingsChanged', handleStorageChange)
+
+ return () => {
+ window.removeEventListener('storage', handleStorageChange)
+ window.removeEventListener('unitsSettingsChanged', handleStorageChange)
+ }
+ }, [])
+
useEffect(() => {
const fetchAllData = async () => {
const [systemResult, vmResult, storageResults, networkResult] = await Promise.all([
@@ -311,13 +343,19 @@ export function SystemOverview() {
const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
if (unit === "Bits") {
- const sizeInGb = sizeInGB * 8
- if (sizeInGb < 1) {
- return `${(sizeInGb * 1024).toFixed(1)} Mb`
- } else if (sizeInGb > 999) {
- return `${(sizeInGb / 1024).toFixed(2)} Tb`
+ const sizeInBits = sizeInGB * 8
+ if (sizeInBits < 1024) {
+ return `${sizeInBits.toFixed(1)} b`
+ } else if (sizeInBits < 1024 ** 2) {
+ return `${(sizeInBits / 1024).toFixed(1)} Kb`
+ } else if (sizeInBits < 1024 ** 3) {
+ return `${(sizeInBits / 1024 ** 2).toFixed(1)} Mb`
+ } else if (sizeInBits < 1024 ** 4) {
+ return `${(sizeInBits / 1024 ** 3).toFixed(2)} Gb`
+ } else if (sizeInBits < 1024 ** 5) {
+ return `${(sizeInBits / 1024 ** 4).toFixed(2)} Tb`
} else {
- return `${sizeInGb.toFixed(2)} Gb`
+ return `${(sizeInBits / 1024 ** 5).toFixed(2)} Pb`
}
} else {
return formatStorage(sizeInGB)
@@ -427,26 +465,6 @@ export function SystemOverview() {
-
-
- Temperature
-
-
-
-
- {systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`}
-
-
-
- {tempStatus.status}
-
-
-
- {systemData.temperature === 0 ? "No sensor available" : "Live temperature reading"}
-
-
-
-
@@ -481,6 +499,28 @@ export function SystemOverview() {
)}
+
+
+
+
+
+ Temperature
+
+
+
+
+ {systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`}
+
+
+
+ {tempStatus.status}
+
+
+
+ {systemData.temperature === 0 ? "No sensor available" : "Live temperature reading"}
+
+
+
@@ -615,27 +655,29 @@ export function SystemOverview() {
Network Overview
-
-
+
+
+
+