From f2316fdd3a7d24e11629876e99e268a63dea592c Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 10:58:06 +0100
Subject: [PATCH 1/6] Add setting to change network unit

---
 AppImage/components/settings.tsx | 601 ++++++++++++++++++++-----------
 1 file changed, 390 insertions(+), 211 deletions(-)

diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index 81b6fe8..ed482b4 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -1,10 +1,16 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { Button } from "./ui/button"
-import { Input } from "./ui/input"
-import { Label } from "./ui/label"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
+import { useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
 import {
   Shield,
   Lock,
@@ -19,106 +25,130 @@ import {
   Copy,
   Eye,
   EyeOff,
-} from "lucide-react"
-import { APP_VERSION } from "./release-notes-modal"
-import { getApiUrl, fetchApi } from "../lib/api-config"
-import { TwoFactorSetup } from "./two-factor-setup"
+  Ruler,
+} from "lucide-react";
+import { APP_VERSION } from "./release-notes-modal";
+import { getApiUrl, fetchApi } from "../lib/api-config";
+import { TwoFactorSetup } from "./two-factor-setup";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 interface ProxMenuxTool {
-  key: string
-  name: string
-  enabled: boolean
+  key: string;
+  name: string;
+  enabled: boolean;
 }
 
 export function Settings() {
-  const [authEnabled, setAuthEnabled] = useState(false)
-  const [totpEnabled, setTotpEnabled] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [success, setSuccess] = useState("")
+  const [authEnabled, setAuthEnabled] = useState(false);
+  const [totpEnabled, setTotpEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
 
   // Setup form state
-  const [showSetupForm, setShowSetupForm] = useState(false)
-  const [username, setUsername] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
+  const [showSetupForm, setShowSetupForm] = useState(false);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
 
   // Change password form state
-  const [showChangePassword, setShowChangePassword] = useState(false)
-  const [currentPassword, setCurrentPassword] = useState("")
-  const [newPassword, setNewPassword] = useState("")
-  const [confirmNewPassword, setConfirmNewPassword] = useState("")
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
 
-  const [show2FASetup, setShow2FASetup] = useState(false)
-  const [show2FADisable, setShow2FADisable] = useState(false)
-  const [disable2FAPassword, setDisable2FAPassword] = useState("")
+  const [show2FASetup, setShow2FASetup] = useState(false);
+  const [show2FADisable, setShow2FADisable] = useState(false);
+  const [disable2FAPassword, setDisable2FAPassword] = useState("");
 
-  const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
-  const [loadingTools, setLoadingTools] = useState(true)
-  const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
+  const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([]);
+  const [loadingTools, setLoadingTools] = useState(true);
+  const [expandedVersions, setExpandedVersions] = useState<
+    Record<string, boolean>
+  >({
     [APP_VERSION]: true, // Current version expanded by default
-  })
+  });
+
+  const [networkUnitSettings, setNetworkUnitSettings] = useState("Bytes");
+  const [loadingUnitSettings, setLoadingUnitSettings] = useState(true);
 
   // API Token state management
-  const [showApiTokenSection, setShowApiTokenSection] = useState(false)
-  const [apiToken, setApiToken] = useState("")
-  const [apiTokenVisible, setApiTokenVisible] = useState(false)
-  const [tokenPassword, setTokenPassword] = useState("")
-  const [tokenTotpCode, setTokenTotpCode] = useState("")
-  const [generatingToken, setGeneratingToken] = useState(false)
-  const [tokenCopied, setTokenCopied] = useState(false)
+  const [showApiTokenSection, setShowApiTokenSection] = useState(false);
+  const [apiToken, setApiToken] = useState("");
+  const [apiTokenVisible, setApiTokenVisible] = useState(false);
+  const [tokenPassword, setTokenPassword] = useState("");
+  const [tokenTotpCode, setTokenTotpCode] = useState("");
+  const [generatingToken, setGeneratingToken] = useState(false);
+  const [tokenCopied, setTokenCopied] = useState(false);
 
   useEffect(() => {
-    checkAuthStatus()
-    loadProxmenuxTools()
-  }, [])
+    checkAuthStatus();
+    loadProxmenuxTools();
+    getUnitsSettings();
+  }, []);
+
+  const changeNetworkUnit = (unit: string) => {
+    localStorage.setItem("proxmenux-network-unit", unit);
+    setNetworkUnitSettings(unit);
+  };
+
+  const getUnitsSettings = () => {
+    const networkUnit =
+      localStorage.getItem("proxmenux-network-unit") || "Bytes";
+    // wait 2 seconds to simulate loading
+    console.log("[v0] Loaded network unit from localStorage:", networkUnit);
+    setTimeout(() => {
+      setNetworkUnitSettings(networkUnit);
+      setLoadingUnitSettings(false);
+    }, 1000);
+  };
 
   const checkAuthStatus = async () => {
     try {
-      const response = await fetch(getApiUrl("/api/auth/status"))
-      const data = await response.json()
-      setAuthEnabled(data.auth_enabled || false)
-      setTotpEnabled(data.totp_enabled || false) // Get 2FA status
+      const response = await fetch(getApiUrl("/api/auth/status"));
+      const data = await response.json();
+      setAuthEnabled(data.auth_enabled || false);
+      setTotpEnabled(data.totp_enabled || false); // Get 2FA status
     } catch (err) {
-      console.error("Failed to check auth status:", err)
+      console.error("Failed to check auth status:", err);
     }
-  }
+  };
 
   const loadProxmenuxTools = async () => {
     try {
-      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"))
-      const data = await response.json()
+      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"));
+      const data = await response.json();
 
       if (data.success) {
-        setProxmenuxTools(data.installed_tools || [])
+        setProxmenuxTools(data.installed_tools || []);
       }
     } catch (err) {
-      console.error("Failed to load ProxMenux tools:", err)
+      console.error("Failed to load ProxMenux tools:", err);
     } finally {
-      setLoadingTools(false)
+      setLoadingTools(false);
     }
-  }
+  };
 
   const handleEnableAuth = async () => {
-    setError("")
-    setSuccess("")
+    setError("");
+    setSuccess("");
 
     if (!username || !password) {
-      setError("Please fill in all fields")
-      return
+      setError("Please fill in all fields");
+      return;
     }
 
     if (password !== confirmPassword) {
-      setError("Passwords do not match")
-      return
+      setError("Passwords do not match");
+      return;
     }
 
     if (password.length < 6) {
-      setError("Password must be at least 6 characters")
-      return
+      setError("Password must be at least 6 characters");
+      return;
     }
 
-    setLoading(true)
+    setLoading(true);
 
     try {
       const response = await fetch(getApiUrl("/api/auth/setup"), {
@@ -129,145 +159,155 @@ export function Settings() {
           password,
           enable_auth: true,
         }),
-      })
+      });
 
-      const data = await response.json()
+      const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || "Failed to enable authentication")
+        throw new Error(data.error || "Failed to enable authentication");
       }
 
       // Save token
-      localStorage.setItem("proxmenux-auth-token", data.token)
-      localStorage.setItem("proxmenux-auth-setup-complete", "true")
+      localStorage.setItem("proxmenux-auth-token", data.token);
+      localStorage.setItem("proxmenux-auth-setup-complete", "true");
 
-      setSuccess("Authentication enabled successfully!")
-      setAuthEnabled(true)
-      setShowSetupForm(false)
-      setUsername("")
-      setPassword("")
-      setConfirmPassword("")
+      setSuccess("Authentication enabled successfully!");
+      setAuthEnabled(true);
+      setShowSetupForm(false);
+      setUsername("");
+      setPassword("");
+      setConfirmPassword("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to enable authentication")
+      setError(
+        err instanceof Error ? err.message : "Failed to enable authentication"
+      );
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleDisableAuth = async () => {
     if (
       !confirm(
-        "Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
+        "Are you sure you want to disable authentication? This will remove password protection from your dashboard."
       )
     ) {
-      return
+      return;
     }
 
-    setLoading(true)
-    setError("")
-    setSuccess("")
+    setLoading(true);
+    setError("");
+    setSuccess("");
 
     try {
-      const token = localStorage.getItem("proxmenux-auth-token")
+      const token = localStorage.getItem("proxmenux-auth-token");
       const response = await fetch(getApiUrl("/api/auth/disable"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      })
+      });
 
-      const data = await response.json()
+      const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to disable authentication")
+        throw new Error(data.message || "Failed to disable authentication");
       }
 
-      localStorage.removeItem("proxmenux-auth-token")
-      localStorage.removeItem("proxmenux-auth-setup-complete")
+      localStorage.removeItem("proxmenux-auth-token");
+      localStorage.removeItem("proxmenux-auth-setup-complete");
 
-      setSuccess("Authentication disabled successfully! Reloading...")
+      setSuccess("Authentication disabled successfully! Reloading...");
 
       setTimeout(() => {
-        window.location.reload()
-      }, 1000)
+        window.location.reload();
+      }, 1000);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to disable authentication. Please try again."
+      );
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleChangePassword = async () => {
-    setError("")
-    setSuccess("")
+    setError("");
+    setSuccess("");
 
     if (!currentPassword || !newPassword) {
-      setError("Please fill in all fields")
-      return
+      setError("Please fill in all fields");
+      return;
     }
 
     if (newPassword !== confirmNewPassword) {
-      setError("New passwords do not match")
-      return
+      setError("New passwords do not match");
+      return;
     }
 
     if (newPassword.length < 6) {
-      setError("Password must be at least 6 characters")
-      return
+      setError("Password must be at least 6 characters");
+      return;
     }
 
-    setLoading(true)
+    setLoading(true);
 
     try {
       const response = await fetch(getApiUrl("/api/auth/change-password"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
+          Authorization: `Bearer ${localStorage.getItem(
+            "proxmenux-auth-token"
+          )}`,
         },
         body: JSON.stringify({
           current_password: currentPassword,
           new_password: newPassword,
         }),
-      })
+      });
 
-      const data = await response.json()
+      const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || "Failed to change password")
+        throw new Error(data.error || "Failed to change password");
       }
 
       // Update token if provided
       if (data.token) {
-        localStorage.setItem("proxmenux-auth-token", data.token)
+        localStorage.setItem("proxmenux-auth-token", data.token);
       }
 
-      setSuccess("Password changed successfully!")
-      setShowChangePassword(false)
-      setCurrentPassword("")
-      setNewPassword("")
-      setConfirmNewPassword("")
+      setSuccess("Password changed successfully!");
+      setShowChangePassword(false);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmNewPassword("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to change password")
+      setError(
+        err instanceof Error ? err.message : "Failed to change password"
+      );
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleDisable2FA = async () => {
-    setError("")
-    setSuccess("")
+    setError("");
+    setSuccess("");
 
     if (!disable2FAPassword) {
-      setError("Please enter your password")
-      return
+      setError("Please enter your password");
+      return;
     }
 
-    setLoading(true)
+    setLoading(true);
 
     try {
-      const token = localStorage.getItem("proxmenux-auth-token")
+      const token = localStorage.getItem("proxmenux-auth-token");
       const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
         method: "POST",
         headers: {
@@ -275,47 +315,47 @@ export function Settings() {
           Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({ password: disable2FAPassword }),
-      })
+      });
 
-      const data = await response.json()
+      const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to disable 2FA")
+        throw new Error(data.message || "Failed to disable 2FA");
       }
 
-      setSuccess("2FA disabled successfully!")
-      setTotpEnabled(false)
-      setShow2FADisable(false)
-      setDisable2FAPassword("")
-      checkAuthStatus()
+      setSuccess("2FA disabled successfully!");
+      setTotpEnabled(false);
+      setShow2FADisable(false);
+      setDisable2FAPassword("");
+      checkAuthStatus();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable 2FA")
+      setError(err instanceof Error ? err.message : "Failed to disable 2FA");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleLogout = () => {
-    localStorage.removeItem("proxmenux-auth-token")
-    localStorage.removeItem("proxmenux-auth-setup-complete")
-    window.location.reload()
-  }
+    localStorage.removeItem("proxmenux-auth-token");
+    localStorage.removeItem("proxmenux-auth-setup-complete");
+    window.location.reload();
+  };
 
   const handleGenerateApiToken = async () => {
-    setError("")
-    setSuccess("")
+    setError("");
+    setSuccess("");
 
     if (!tokenPassword) {
-      setError("Please enter your password")
-      return
+      setError("Please enter your password");
+      return;
     }
 
     if (totpEnabled && !tokenTotpCode) {
-      setError("Please enter your 2FA code")
-      return
+      setError("Please enter your 2FA code");
+      return;
     }
 
-    setGeneratingToken(true)
+    setGeneratingToken(true);
 
     try {
       const data = await fetchApi("/api/auth/generate-api-token", {
@@ -325,47 +365,55 @@ export function Settings() {
           password: tokenPassword,
           totp_token: totpEnabled ? tokenTotpCode : undefined,
         }),
-      })
+      });
 
       if (!data.success) {
-        setError(data.message || data.error || "Failed to generate API token")
-        return
+        setError(data.message || data.error || "Failed to generate API token");
+        return;
       }
 
       if (!data.token) {
-        setError("No token received from server")
-        return
+        setError("No token received from server");
+        return;
       }
 
-      setApiToken(data.token)
-      setSuccess("API token generated successfully! Make sure to copy it now as you won't be able to see it again.")
-      setTokenPassword("")
-      setTokenTotpCode("")
+      setApiToken(data.token);
+      setSuccess(
+        "API token generated successfully! Make sure to copy it now as you won't be able to see it again."
+      );
+      setTokenPassword("");
+      setTokenTotpCode("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to generate API token. Please try again.")
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to generate API token. Please try again."
+      );
     } finally {
-      setGeneratingToken(false)
+      setGeneratingToken(false);
     }
-  }
+  };
 
   const copyApiToken = () => {
-    navigator.clipboard.writeText(apiToken)
-    setTokenCopied(true)
-    setTimeout(() => setTokenCopied(false), 2000)
-  }
+    navigator.clipboard.writeText(apiToken);
+    setTokenCopied(true);
+    setTimeout(() => setTokenCopied(false), 2000);
+  };
 
   const toggleVersion = (version: string) => {
     setExpandedVersions((prev) => ({
       ...prev,
       [version]: !prev[version],
-    }))
-  }
+    }));
+  };
 
   return (
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold">Settings</h1>
-        <p className="text-muted-foreground mt-2">Manage your dashboard security and preferences</p>
+        <p className="text-muted-foreground mt-2">
+          Manage your dashboard security and preferences
+        </p>
       </div>
 
       {/* Authentication Settings */}
@@ -375,7 +423,9 @@ export function Settings() {
             <Shield className="h-5 w-5 text-blue-500" />
             <CardTitle>Authentication</CardTitle>
           </div>
-          <CardDescription>Protect your dashboard with username and password authentication</CardDescription>
+          <CardDescription>
+            Protect your dashboard with username and password authentication
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {error && (
@@ -395,19 +445,31 @@ export function Settings() {
           <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
             <div className="flex items-center gap-3">
               <div
-                className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
+                className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                  authEnabled ? "bg-green-500/10" : "bg-gray-500/10"
+                }`}
               >
-                <Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
+                <Lock
+                  className={`h-5 w-5 ${
+                    authEnabled ? "text-green-500" : "text-gray-500"
+                  }`}
+                />
               </div>
               <div>
                 <p className="font-medium">Authentication Status</p>
                 <p className="text-sm text-muted-foreground">
-                  {authEnabled ? "Password protection is enabled" : "No password protection"}
+                  {authEnabled
+                    ? "Password protection is enabled"
+                    : "No password protection"}
                 </p>
               </div>
             </div>
             <div
-              className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
+              className={`px-3 py-1 rounded-full text-sm font-medium ${
+                authEnabled
+                  ? "bg-green-500/10 text-green-500"
+                  : "bg-gray-500/10 text-gray-500"
+              }`}
             >
               {authEnabled ? "Enabled" : "Disabled"}
             </div>
@@ -418,10 +480,14 @@ export function Settings() {
               <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
                 <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
                 <p className="text-sm text-blue-500">
-                  Enable authentication to protect your dashboard when accessing from non-private networks.
+                  Enable authentication to protect your dashboard when accessing
+                  from non-private networks.
                 </p>
               </div>
-              <Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
+              <Button
+                onClick={() => setShowSetupForm(true)}
+                className="w-full bg-blue-500 hover:bg-blue-600"
+              >
                 <Shield className="h-4 w-4 mr-2" />
                 Enable Authentication
               </Button>
@@ -481,10 +547,19 @@ export function Settings() {
               </div>
 
               <div className="flex gap-2">
-                <Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
+                <Button
+                  onClick={handleEnableAuth}
+                  className="flex-1 bg-blue-500 hover:bg-blue-600"
+                  disabled={loading}
+                >
                   {loading ? "Enabling..." : "Enable"}
                 </Button>
-                <Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
+                <Button
+                  onClick={() => setShowSetupForm(false)}
+                  variant="outline"
+                  className="flex-1"
+                  disabled={loading}
+                >
                   Cancel
                 </Button>
               </div>
@@ -493,13 +568,21 @@ export function Settings() {
 
           {authEnabled && (
             <div className="space-y-3">
-              <Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
+              <Button
+                onClick={handleLogout}
+                variant="outline"
+                className="w-full bg-transparent"
+              >
                 <LogOut className="h-4 w-4 mr-2" />
                 Logout
               </Button>
 
               {!showChangePassword && (
-                <Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
+                <Button
+                  onClick={() => setShowChangePassword(true)}
+                  variant="outline"
+                  className="w-full"
+                >
                   <Lock className="h-4 w-4 mr-2" />
                   Change Password
                 </Button>
@@ -542,7 +625,9 @@ export function Settings() {
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="confirm-new-password">Confirm New Password</Label>
+                    <Label htmlFor="confirm-new-password">
+                      Confirm New Password
+                    </Label>
                     <div className="relative">
                       <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                       <Input
@@ -582,15 +667,21 @@ export function Settings() {
                   <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
                     <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
                     <div className="text-sm text-blue-400">
-                      <p className="font-medium mb-1">Two-Factor Authentication (2FA)</p>
+                      <p className="font-medium mb-1">
+                        Two-Factor Authentication (2FA)
+                      </p>
                       <p className="text-blue-300">
-                        Add an extra layer of security by requiring a code from your authenticator app in addition to
-                        your password.
+                        Add an extra layer of security by requiring a code from
+                        your authenticator app in addition to your password.
                       </p>
                     </div>
                   </div>
 
-                  <Button onClick={() => setShow2FASetup(true)} variant="outline" className="w-full">
+                  <Button
+                    onClick={() => setShow2FASetup(true)}
+                    variant="outline"
+                    className="w-full"
+                  >
                     <Shield className="h-4 w-4 mr-2" />
                     Enable Two-Factor Authentication
                   </Button>
@@ -601,11 +692,17 @@ export function Settings() {
                 <div className="space-y-3">
                   <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
                     <CheckCircle className="h-5 w-5 text-green-500" />
-                    <p className="text-sm text-green-500 font-medium">2FA is enabled</p>
+                    <p className="text-sm text-green-500 font-medium">
+                      2FA is enabled
+                    </p>
                   </div>
 
                   {!show2FADisable && (
-                    <Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
+                    <Button
+                      onClick={() => setShow2FADisable(true)}
+                      variant="outline"
+                      className="w-full"
+                    >
                       <Shield className="h-4 w-4 mr-2" />
                       Disable 2FA
                     </Button>
@@ -613,8 +710,12 @@ export function Settings() {
 
                   {show2FADisable && (
                     <div className="space-y-4 border border-border rounded-lg p-4">
-                      <h3 className="font-semibold">Disable Two-Factor Authentication</h3>
-                      <p className="text-sm text-muted-foreground">Enter your password to confirm</p>
+                      <h3 className="font-semibold">
+                        Disable Two-Factor Authentication
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        Enter your password to confirm
+                      </p>
 
                       <div className="space-y-2">
                         <Label htmlFor="disable-2fa-password">Password</Label>
@@ -625,7 +726,9 @@ export function Settings() {
                             type="password"
                             placeholder="Enter your password"
                             value={disable2FAPassword}
-                            onChange={(e) => setDisable2FAPassword(e.target.value)}
+                            onChange={(e) =>
+                              setDisable2FAPassword(e.target.value)
+                            }
                             className="pl-10"
                             disabled={loading}
                           />
@@ -633,14 +736,19 @@ export function Settings() {
                       </div>
 
                       <div className="flex gap-2">
-                        <Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
+                        <Button
+                          onClick={handleDisable2FA}
+                          variant="destructive"
+                          className="flex-1"
+                          disabled={loading}
+                        >
                           {loading ? "Disabling..." : "Disable 2FA"}
                         </Button>
                         <Button
                           onClick={() => {
-                            setShow2FADisable(false)
-                            setDisable2FAPassword("")
-                            setError("")
+                            setShow2FADisable(false);
+                            setDisable2FAPassword("");
+                            setError("");
                           }}
                           variant="outline"
                           className="flex-1"
@@ -654,7 +762,12 @@ export function Settings() {
                 </div>
               )}
 
-              <Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
+              <Button
+                onClick={handleDisableAuth}
+                variant="destructive"
+                className="w-full"
+                disabled={loading}
+              >
                 Disable Authentication
               </Button>
             </div>
@@ -671,7 +784,8 @@ export function Settings() {
               <CardTitle>API Access Tokens</CardTitle>
             </div>
             <CardDescription>
-              Generate long-lived API tokens for external integrations like Homepage and Home Assistant
+              Generate long-lived API tokens for external integrations like
+              Homepage and Home Assistant
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
@@ -705,7 +819,10 @@ export function Settings() {
             </div>
 
             {!showApiTokenSection && !apiToken && (
-              <Button onClick={() => setShowApiTokenSection(true)} className="w-full bg-purple-500 hover:bg-purple-600">
+              <Button
+                onClick={() => setShowApiTokenSection(true)}
+                className="w-full bg-purple-500 hover:bg-purple-600"
+              >
                 <Key className="h-4 w-4 mr-2" />
                 Generate New API Token
               </Button>
@@ -763,10 +880,10 @@ export function Settings() {
                   </Button>
                   <Button
                     onClick={() => {
-                      setShowApiTokenSection(false)
-                      setTokenPassword("")
-                      setTokenTotpCode("")
-                      setError("")
+                      setShowApiTokenSection(false);
+                      setTokenPassword("");
+                      setTokenTotpCode("");
+                      setError("");
                     }}
                     variant="outline"
                     className="flex-1"
@@ -813,10 +930,23 @@ export function Settings() {
                         onClick={() => setApiTokenVisible(!apiTokenVisible)}
                         className="h-7 w-7 p-0"
                       >
-                        {apiTokenVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                        {apiTokenVisible ? (
+                          <EyeOff className="h-4 w-4" />
+                        ) : (
+                          <Eye className="h-4 w-4" />
+                        )}
                       </Button>
-                      <Button size="sm" variant="ghost" onClick={copyApiToken} className="h-7 w-7 p-0">
-                        <Copy className={`h-4 w-4 ${tokenCopied ? "text-green-500" : ""}`} />
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={copyApiToken}
+                        className="h-7 w-7 p-0"
+                      >
+                        <Copy
+                          className={`h-4 w-4 ${
+                            tokenCopied ? "text-green-500" : ""
+                          }`}
+                        />
                       </Button>
                     </div>
                   </div>
@@ -831,18 +961,21 @@ export function Settings() {
                 <div className="space-y-2">
                   <p className="text-sm font-medium">How to use this token:</p>
                   <div className="bg-muted/50 rounded p-3 text-xs font-mono">
-                    <p className="text-muted-foreground mb-2"># Add to request headers:</p>
+                    <p className="text-muted-foreground mb-2">
+                      # Add to request headers:
+                    </p>
                     <p>Authorization: Bearer YOUR_TOKEN_HERE</p>
                   </div>
                   <p className="text-xs text-muted-foreground">
-                    See the README documentation for complete integration examples with Homepage and Home Assistant.
+                    See the README documentation for complete integration
+                    examples with Homepage and Home Assistant.
                   </p>
                 </div>
 
                 <Button
                   onClick={() => {
-                    setApiToken("")
-                    setShowApiTokenSection(false)
+                    setApiToken("");
+                    setShowApiTokenSection(false);
                   }}
                   variant="outline"
                   className="w-full"
@@ -855,6 +988,42 @@ export function Settings() {
         </Card>
       )}
 
+      {/* ProxMenux unit settings*/}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Ruler className="h-5 w-5 text-green-500" />
+            <CardTitle>ProxMenux unit settings</CardTitle>
+          </div>
+          <CardDescription>Change settings related to units</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loadingUnitSettings ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
+            </div>
+          ) : (
+            <div className="text-foreground flex items-center justify-between">
+              <div className="flex items-center">
+                Network Unit Display
+              </div>
+              <Select
+                value={networkUnitSettings}
+                onValueChange={changeNetworkUnit}
+              >
+                <SelectTrigger className="w-28 h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Bits">Bits</SelectItem>
+                  <SelectItem value="Bytes">Bytes</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
       {/* ProxMenux Optimizations */}
       <Card>
         <CardHeader>
@@ -862,7 +1031,9 @@ export function Settings() {
             <Wrench className="h-5 w-5 text-orange-500" />
             <CardTitle>ProxMenux Optimizations</CardTitle>
           </div>
-          <CardDescription>System optimizations and utilities installed via ProxMenux</CardDescription>
+          <CardDescription>
+            System optimizations and utilities installed via ProxMenux
+          </CardDescription>
         </CardHeader>
         <CardContent>
           {loadingTools ? (
@@ -872,14 +1043,22 @@ export function Settings() {
           ) : proxmenuxTools.length === 0 ? (
             <div className="text-center py-8">
               <Package className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
-              <p className="text-muted-foreground">No ProxMenux optimizations installed yet</p>
-              <p className="text-sm text-muted-foreground mt-1">Run ProxMenux to configure system optimizations</p>
+              <p className="text-muted-foreground">
+                No ProxMenux optimizations installed yet
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Run ProxMenux to configure system optimizations
+              </p>
             </div>
           ) : (
             <div className="space-y-2">
               <div className="flex items-center justify-between mb-4 pb-2 border-b border-border">
-                <span className="text-sm font-medium text-muted-foreground">Installed Tools</span>
-                <span className="text-sm font-semibold text-orange-500">{proxmenuxTools.length} active</span>
+                <span className="text-sm font-medium text-muted-foreground">
+                  Installed Tools
+                </span>
+                <span className="text-sm font-semibold text-orange-500">
+                  {proxmenuxTools.length} active
+                </span>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                 {proxmenuxTools.map((tool) => (
@@ -901,10 +1080,10 @@ export function Settings() {
         open={show2FASetup}
         onClose={() => setShow2FASetup(false)}
         onSuccess={() => {
-          setSuccess("2FA enabled successfully!")
-          checkAuthStatus()
+          setSuccess("2FA enabled successfully!");
+          checkAuthStatus();
         }}
       />
     </div>
-  )
+  );
 }

From 867a74cffbe27482be8dc7cbc5adc8e13ef86539 Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 11:26:49 +0100
Subject: [PATCH 2/6] Added optional prop to display network traffic in bits or
 bytes

---
 AppImage/components/network-traffic-chart.tsx | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx
index 7d9eac0..809d3bf 100644
--- a/AppImage/components/network-traffic-chart.tsx
+++ b/AppImage/components/network-traffic-chart.tsx
@@ -17,33 +17,16 @@ interface NetworkTrafficChartProps {
   interfaceName?: string
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
   refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
+  networkUnit?: "Bytes" | "Bits"
 }
 
-const CustomNetworkTooltip = ({ active, payload, label }: any) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
-        <p className="text-sm font-semibold text-white mb-2">{label}</p>
-        <div className="space-y-1.5">
-          {payload.map((entry: any, index: number) => (
-            <div key={index} className="flex items-center gap-2">
-              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
-              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
-              <span className="text-sm font-semibold text-white">{entry.value.toFixed(3)} GB</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-  return null
-}
 
 export function NetworkTrafficChart({
   timeframe,
   interfaceName,
   onTotalsCalculated,
   refreshInterval = 60000,
+  networkUnit = "Bits",
 }: NetworkTrafficChartProps) {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
@@ -138,6 +121,15 @@ export function NetworkTrafficChart({
         const netInBytes = (item.netin || 0) * intervalSeconds
         const netOutBytes = (item.netout || 0) * intervalSeconds
 
+        if (networkUnit === "Bits") {
+          return {
+            time: timeLabel,
+            timestamp: item.time,
+            netIn: Number((netInBytes * 8 / 1024 / 1024 / 1024).toFixed(4)),
+            netOut: Number((netOutBytes * 8 / 1024 / 1024 / 1024).toFixed(4)),
+          }
+        }
+
         return {
           time: timeLabel,
           timestamp: item.time,
@@ -222,6 +214,26 @@ export function NetworkTrafficChart({
     )
   }
 
+  const CustomNetworkTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">{entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
   return (
     <ResponsiveContainer width="100%" height={300}>
       <AreaChart data={data} margin={{ bottom: 80 }}>
@@ -240,7 +252,7 @@ export function NetworkTrafficChart({
           stroke="currentColor"
           className="text-foreground"
           tick={{ fill: "currentColor", fontSize: 12 }}
-          label={{ value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+          label={{ value: networkUnit === "Bits" ? "Gb" : "GB", angle: -90, position: "insideLeft", fill: "currentColor" }}
           domain={[0, "auto"]}
         />
         <Tooltip content={<CustomNetworkTooltip />} />

From 620a088c6c2ad460f7ae70e216230320f37e5df8 Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 11:32:32 +0100
Subject: [PATCH 3/6] Removed debug code

---
 AppImage/components/settings.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index ed482b4..0fdd85b 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -95,12 +95,9 @@ export function Settings() {
   const getUnitsSettings = () => {
     const networkUnit =
       localStorage.getItem("proxmenux-network-unit") || "Bytes";
-    // wait 2 seconds to simulate loading
     console.log("[v0] Loaded network unit from localStorage:", networkUnit);
-    setTimeout(() => {
-      setNetworkUnitSettings(networkUnit);
-      setLoadingUnitSettings(false);
-    }, 1000);
+    setNetworkUnitSettings(networkUnit);
+    setLoadingUnitSettings(false);
   };
 
   const checkAuthStatus = async () => {

From 9c0ea9b1c76e657ef00fcb772d81f03b1206b0b8 Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 13:08:39 +0100
Subject: [PATCH 4/6] System oberview take network unit into account

---
 AppImage/components/system-overview.tsx | 35 ++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx
index 546b3c4..47c6c40 100644
--- a/AppImage/components/system-overview.tsx
+++ b/AppImage/components/system-overview.tsx
@@ -146,6 +146,13 @@ const fetchProxmoxStorageData = async (): Promise<ProxmoxStorageData | null> =>
   }
 }
 
+const getUnitsSettings = (): "Bytes" | "Bits" => {
+  const raw = localStorage.getItem("proxmenux-network-unit");
+  const networkUnit = raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes";
+  console.log("[v0] Loaded network unit from localStorage:", networkUnit);
+  return networkUnit;
+};
+
 export function SystemOverview() {
   const [systemData, setSystemData] = useState<SystemData | null>(null)
   const [vmData, setVmData] = useState<VMData[]>([])
@@ -161,6 +168,7 @@ export function SystemOverview() {
   const [error, setError] = useState<string | null>(null)
   const [networkTimeframe, setNetworkTimeframe] = useState("day")
   const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
+  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes");
 
   useEffect(() => {
     const fetchAllData = async () => {
@@ -178,6 +186,9 @@ export function SystemOverview() {
         return
       }
 
+      const networkUnitSetting = getUnitsSettings();
+      setNetworkUnit(networkUnitSetting);
+
       setSystemData(systemResult)
       setVmData(vmResult)
       setStorageData(storageResults[0])
@@ -298,13 +309,19 @@ export function SystemOverview() {
     return (bytes / 1024 ** 3).toFixed(2)
   }
 
-  const formatStorage = (sizeInGB: number): string => {
-    if (sizeInGB < 1) {
-      return `${(sizeInGB * 1024).toFixed(1)} MB`
-    } else if (sizeInGB > 999) {
-      return `${(sizeInGB / 1024).toFixed(2)} TB`
+  const formatStorage = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
+    let size = sizeInGB;
+    let sufix = "B";
+    if (unit === "Bits") {
+      size = size * 8;
+      sufix = "b";
+    }
+    if (size < 1) {
+      return `${(size * 1024).toFixed(1)} M${sufix}`
+    } else if (size > 999) {
+      return `${(size / 1024).toFixed(2)} T${sufix}`
     } else {
-      return `${sizeInGB.toFixed(2)} GB`
+      return `${size.toFixed(2)} G${sufix}`
     }
   }
 
@@ -667,21 +684,21 @@ export function SystemOverview() {
                   <div className="flex justify-between items-center">
                     <span className="text-sm text-muted-foreground">Received:</span>
                     <span className="text-lg font-semibold text-green-500 flex items-center gap-1">
-                      ↓ {formatStorage(networkTotals.received)}
+                      ↓ {formatStorage(networkTotals.received, networkUnit)}
                       <span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
                     </span>
                   </div>
                   <div className="flex justify-between items-center">
                     <span className="text-sm text-muted-foreground">Sent:</span>
                     <span className="text-lg font-semibold text-blue-500 flex items-center gap-1">
-                      ↑ {formatStorage(networkTotals.sent)}
+                      ↑ {formatStorage(networkTotals.sent, networkUnit)}
                       <span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
                     </span>
                   </div>
                 </div>
 
                 <div className="pt-3 border-t border-border">
-                  <NetworkTrafficChart timeframe={networkTimeframe} onTotalsCalculated={setNetworkTotals} />
+                  <NetworkTrafficChart timeframe={networkTimeframe} onTotalsCalculated={setNetworkTotals} networkUnit={networkUnit} />
                 </div>
               </div>
             ) : (

From f3b0784651d3b797ff389e764e3dd6a552fa7c82 Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 13:19:23 +0100
Subject: [PATCH 5/6] Network metrics take network unit into acount

---
 AppImage/components/network-metrics.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index 724bd80..3248165 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
 import { Badge } from "./ui/badge"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
@@ -132,6 +132,13 @@ const fetcher = async (url: string): Promise<NetworkData> => {
   return fetchApi<NetworkData>(url)
 }
 
+const getUnitsSettings = (): "Bytes" | "Bits" => {
+  const raw = localStorage.getItem("proxmenux-network-unit");
+  const networkUnit = raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes";
+  console.log("[v0] Loaded network unit from localStorage:", networkUnit);
+  return networkUnit;
+};
+
 export function NetworkMetrics() {
   const {
     data: networkData,
@@ -160,6 +167,13 @@ export function NetworkMetrics() {
     revalidateOnFocus: false,
   })
 
+  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes");
+
+  useEffect(() => {
+    const networkUnitSetting = getUnitsSettings();
+    setNetworkUnit(networkUnitSetting);
+  }, []);
+
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -375,7 +389,7 @@ export function NetworkMetrics() {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <NetworkTrafficChart timeframe={timeframe} onTotalsCalculated={setNetworkTotals} />
+          <NetworkTrafficChart timeframe={timeframe} onTotalsCalculated={setNetworkTotals} networkUnit={networkUnit} />
         </CardContent>
       </Card>
 

From 9e72720bda6221f422ab4c0d432d6c4892e0b0fd Mon Sep 17 00:00:00 2001
From: riri-314 <henri.pihet.807@gmail.com>
Date: Tue, 18 Nov 2025 13:30:37 +0100
Subject: [PATCH 6/6] revert code formating

---
 AppImage/components/settings.tsx | 549 ++++++++++++-------------------
 1 file changed, 214 insertions(+), 335 deletions(-)

diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index 0fdd85b..c84aa36 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -1,16 +1,10 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
+import { useState, useEffect } from "react"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
 import {
   Shield,
   Lock,
@@ -26,66 +20,64 @@ import {
   Eye,
   EyeOff,
   Ruler,
-} from "lucide-react";
-import { APP_VERSION } from "./release-notes-modal";
-import { getApiUrl, fetchApi } from "../lib/api-config";
-import { TwoFactorSetup } from "./two-factor-setup";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+} from "lucide-react"
+import { APP_VERSION } from "./release-notes-modal"
+import { getApiUrl, fetchApi } from "../lib/api-config"
+import { TwoFactorSetup } from "./two-factor-setup"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 
 interface ProxMenuxTool {
-  key: string;
-  name: string;
-  enabled: boolean;
+  key: string
+  name: string
+  enabled: boolean
 }
 
 export function Settings() {
-  const [authEnabled, setAuthEnabled] = useState(false);
-  const [totpEnabled, setTotpEnabled] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
+  const [authEnabled, setAuthEnabled] = useState(false)
+  const [totpEnabled, setTotpEnabled] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
 
   // Setup form state
-  const [showSetupForm, setShowSetupForm] = useState(false);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showSetupForm, setShowSetupForm] = useState(false)
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
 
   // Change password form state
-  const [showChangePassword, setShowChangePassword] = useState(false);
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const [showChangePassword, setShowChangePassword] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const [confirmNewPassword, setConfirmNewPassword] = useState("")
 
-  const [show2FASetup, setShow2FASetup] = useState(false);
-  const [show2FADisable, setShow2FADisable] = useState(false);
-  const [disable2FAPassword, setDisable2FAPassword] = useState("");
+  const [show2FASetup, setShow2FASetup] = useState(false)
+  const [show2FADisable, setShow2FADisable] = useState(false)
+  const [disable2FAPassword, setDisable2FAPassword] = useState("")
 
-  const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([]);
-  const [loadingTools, setLoadingTools] = useState(true);
-  const [expandedVersions, setExpandedVersions] = useState<
-    Record<string, boolean>
-  >({
+  const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
+  const [loadingTools, setLoadingTools] = useState(true)
+  const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
     [APP_VERSION]: true, // Current version expanded by default
-  });
+  })
 
   const [networkUnitSettings, setNetworkUnitSettings] = useState("Bytes");
   const [loadingUnitSettings, setLoadingUnitSettings] = useState(true);
 
   // API Token state management
-  const [showApiTokenSection, setShowApiTokenSection] = useState(false);
-  const [apiToken, setApiToken] = useState("");
-  const [apiTokenVisible, setApiTokenVisible] = useState(false);
-  const [tokenPassword, setTokenPassword] = useState("");
-  const [tokenTotpCode, setTokenTotpCode] = useState("");
-  const [generatingToken, setGeneratingToken] = useState(false);
-  const [tokenCopied, setTokenCopied] = useState(false);
+  const [showApiTokenSection, setShowApiTokenSection] = useState(false)
+  const [apiToken, setApiToken] = useState("")
+  const [apiTokenVisible, setApiTokenVisible] = useState(false)
+  const [tokenPassword, setTokenPassword] = useState("")
+  const [tokenTotpCode, setTokenTotpCode] = useState("")
+  const [generatingToken, setGeneratingToken] = useState(false)
+  const [tokenCopied, setTokenCopied] = useState(false)
 
   useEffect(() => {
-    checkAuthStatus();
-    loadProxmenuxTools();
+    checkAuthStatus()
+    loadProxmenuxTools()
     getUnitsSettings();
-  }, []);
+  }, [])
 
   const changeNetworkUnit = (unit: string) => {
     localStorage.setItem("proxmenux-network-unit", unit);
@@ -102,50 +94,50 @@ export function Settings() {
 
   const checkAuthStatus = async () => {
     try {
-      const response = await fetch(getApiUrl("/api/auth/status"));
-      const data = await response.json();
-      setAuthEnabled(data.auth_enabled || false);
-      setTotpEnabled(data.totp_enabled || false); // Get 2FA status
+      const response = await fetch(getApiUrl("/api/auth/status"))
+      const data = await response.json()
+      setAuthEnabled(data.auth_enabled || false)
+      setTotpEnabled(data.totp_enabled || false) // Get 2FA status
     } catch (err) {
-      console.error("Failed to check auth status:", err);
+      console.error("Failed to check auth status:", err)
     }
-  };
+  }
 
   const loadProxmenuxTools = async () => {
     try {
-      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"));
-      const data = await response.json();
+      const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"))
+      const data = await response.json()
 
       if (data.success) {
-        setProxmenuxTools(data.installed_tools || []);
+        setProxmenuxTools(data.installed_tools || [])
       }
     } catch (err) {
-      console.error("Failed to load ProxMenux tools:", err);
+      console.error("Failed to load ProxMenux tools:", err)
     } finally {
-      setLoadingTools(false);
+      setLoadingTools(false)
     }
-  };
+  }
 
   const handleEnableAuth = async () => {
-    setError("");
-    setSuccess("");
+    setError("")
+    setSuccess("")
 
     if (!username || !password) {
-      setError("Please fill in all fields");
-      return;
+      setError("Please fill in all fields")
+      return
     }
 
     if (password !== confirmPassword) {
-      setError("Passwords do not match");
-      return;
+      setError("Passwords do not match")
+      return
     }
 
     if (password.length < 6) {
-      setError("Password must be at least 6 characters");
-      return;
+      setError("Password must be at least 6 characters")
+      return
     }
 
-    setLoading(true);
+    setLoading(true)
 
     try {
       const response = await fetch(getApiUrl("/api/auth/setup"), {
@@ -156,155 +148,145 @@ export function Settings() {
           password,
           enable_auth: true,
         }),
-      });
+      })
 
-      const data = await response.json();
+      const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.error || "Failed to enable authentication");
+        throw new Error(data.error || "Failed to enable authentication")
       }
 
       // Save token
-      localStorage.setItem("proxmenux-auth-token", data.token);
-      localStorage.setItem("proxmenux-auth-setup-complete", "true");
+      localStorage.setItem("proxmenux-auth-token", data.token)
+      localStorage.setItem("proxmenux-auth-setup-complete", "true")
 
-      setSuccess("Authentication enabled successfully!");
-      setAuthEnabled(true);
-      setShowSetupForm(false);
-      setUsername("");
-      setPassword("");
-      setConfirmPassword("");
+      setSuccess("Authentication enabled successfully!")
+      setAuthEnabled(true)
+      setShowSetupForm(false)
+      setUsername("")
+      setPassword("")
+      setConfirmPassword("")
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to enable authentication"
-      );
+      setError(err instanceof Error ? err.message : "Failed to enable authentication")
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const handleDisableAuth = async () => {
     if (
       !confirm(
-        "Are you sure you want to disable authentication? This will remove password protection from your dashboard."
+        "Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
       )
     ) {
-      return;
+      return
     }
 
-    setLoading(true);
-    setError("");
-    setSuccess("");
+    setLoading(true)
+    setError("")
+    setSuccess("")
 
     try {
-      const token = localStorage.getItem("proxmenux-auth-token");
+      const token = localStorage.getItem("proxmenux-auth-token")
       const response = await fetch(getApiUrl("/api/auth/disable"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-      });
+      })
 
-      const data = await response.json();
+      const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to disable authentication");
+        throw new Error(data.message || "Failed to disable authentication")
       }
 
-      localStorage.removeItem("proxmenux-auth-token");
-      localStorage.removeItem("proxmenux-auth-setup-complete");
+      localStorage.removeItem("proxmenux-auth-token")
+      localStorage.removeItem("proxmenux-auth-setup-complete")
 
-      setSuccess("Authentication disabled successfully! Reloading...");
+      setSuccess("Authentication disabled successfully! Reloading...")
 
       setTimeout(() => {
-        window.location.reload();
-      }, 1000);
+        window.location.reload()
+      }, 1000)
     } catch (err) {
-      setError(
-        err instanceof Error
-          ? err.message
-          : "Failed to disable authentication. Please try again."
-      );
+      setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const handleChangePassword = async () => {
-    setError("");
-    setSuccess("");
+    setError("")
+    setSuccess("")
 
     if (!currentPassword || !newPassword) {
-      setError("Please fill in all fields");
-      return;
+      setError("Please fill in all fields")
+      return
     }
 
     if (newPassword !== confirmNewPassword) {
-      setError("New passwords do not match");
-      return;
+      setError("New passwords do not match")
+      return
     }
 
     if (newPassword.length < 6) {
-      setError("Password must be at least 6 characters");
-      return;
+      setError("Password must be at least 6 characters")
+      return
     }
 
-    setLoading(true);
+    setLoading(true)
 
     try {
       const response = await fetch(getApiUrl("/api/auth/change-password"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem(
-            "proxmenux-auth-token"
-          )}`,
+          Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
         },
         body: JSON.stringify({
           current_password: currentPassword,
           new_password: newPassword,
         }),
-      });
+      })
 
-      const data = await response.json();
+      const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.error || "Failed to change password");
+        throw new Error(data.error || "Failed to change password")
       }
 
       // Update token if provided
       if (data.token) {
-        localStorage.setItem("proxmenux-auth-token", data.token);
+        localStorage.setItem("proxmenux-auth-token", data.token)
       }
 
-      setSuccess("Password changed successfully!");
-      setShowChangePassword(false);
-      setCurrentPassword("");
-      setNewPassword("");
-      setConfirmNewPassword("");
+      setSuccess("Password changed successfully!")
+      setShowChangePassword(false)
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmNewPassword("")
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to change password"
-      );
+      setError(err instanceof Error ? err.message : "Failed to change password")
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const handleDisable2FA = async () => {
-    setError("");
-    setSuccess("");
+    setError("")
+    setSuccess("")
 
     if (!disable2FAPassword) {
-      setError("Please enter your password");
-      return;
+      setError("Please enter your password")
+      return
     }
 
-    setLoading(true);
+    setLoading(true)
 
     try {
-      const token = localStorage.getItem("proxmenux-auth-token");
+      const token = localStorage.getItem("proxmenux-auth-token")
       const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
         method: "POST",
         headers: {
@@ -312,47 +294,47 @@ export function Settings() {
           Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({ password: disable2FAPassword }),
-      });
+      })
 
-      const data = await response.json();
+      const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to disable 2FA");
+        throw new Error(data.message || "Failed to disable 2FA")
       }
 
-      setSuccess("2FA disabled successfully!");
-      setTotpEnabled(false);
-      setShow2FADisable(false);
-      setDisable2FAPassword("");
-      checkAuthStatus();
+      setSuccess("2FA disabled successfully!")
+      setTotpEnabled(false)
+      setShow2FADisable(false)
+      setDisable2FAPassword("")
+      checkAuthStatus()
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to disable 2FA");
+      setError(err instanceof Error ? err.message : "Failed to disable 2FA")
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const handleLogout = () => {
-    localStorage.removeItem("proxmenux-auth-token");
-    localStorage.removeItem("proxmenux-auth-setup-complete");
-    window.location.reload();
-  };
+    localStorage.removeItem("proxmenux-auth-token")
+    localStorage.removeItem("proxmenux-auth-setup-complete")
+    window.location.reload()
+  }
 
   const handleGenerateApiToken = async () => {
-    setError("");
-    setSuccess("");
+    setError("")
+    setSuccess("")
 
     if (!tokenPassword) {
-      setError("Please enter your password");
-      return;
+      setError("Please enter your password")
+      return
     }
 
     if (totpEnabled && !tokenTotpCode) {
-      setError("Please enter your 2FA code");
-      return;
+      setError("Please enter your 2FA code")
+      return
     }
 
-    setGeneratingToken(true);
+    setGeneratingToken(true)
 
     try {
       const data = await fetchApi("/api/auth/generate-api-token", {
@@ -362,55 +344,47 @@ export function Settings() {
           password: tokenPassword,
           totp_token: totpEnabled ? tokenTotpCode : undefined,
         }),
-      });
+      })
 
       if (!data.success) {
-        setError(data.message || data.error || "Failed to generate API token");
-        return;
+        setError(data.message || data.error || "Failed to generate API token")
+        return
       }
 
       if (!data.token) {
-        setError("No token received from server");
-        return;
+        setError("No token received from server")
+        return
       }
 
-      setApiToken(data.token);
-      setSuccess(
-        "API token generated successfully! Make sure to copy it now as you won't be able to see it again."
-      );
-      setTokenPassword("");
-      setTokenTotpCode("");
+      setApiToken(data.token)
+      setSuccess("API token generated successfully! Make sure to copy it now as you won't be able to see it again.")
+      setTokenPassword("")
+      setTokenTotpCode("")
     } catch (err) {
-      setError(
-        err instanceof Error
-          ? err.message
-          : "Failed to generate API token. Please try again."
-      );
+      setError(err instanceof Error ? err.message : "Failed to generate API token. Please try again.")
     } finally {
-      setGeneratingToken(false);
+      setGeneratingToken(false)
     }
-  };
+  }
 
   const copyApiToken = () => {
-    navigator.clipboard.writeText(apiToken);
-    setTokenCopied(true);
-    setTimeout(() => setTokenCopied(false), 2000);
-  };
+    navigator.clipboard.writeText(apiToken)
+    setTokenCopied(true)
+    setTimeout(() => setTokenCopied(false), 2000)
+  }
 
   const toggleVersion = (version: string) => {
     setExpandedVersions((prev) => ({
       ...prev,
       [version]: !prev[version],
-    }));
-  };
+    }))
+  }
 
   return (
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold">Settings</h1>
-        <p className="text-muted-foreground mt-2">
-          Manage your dashboard security and preferences
-        </p>
+        <p className="text-muted-foreground mt-2">Manage your dashboard security and preferences</p>
       </div>
 
       {/* Authentication Settings */}
@@ -420,9 +394,7 @@ export function Settings() {
             <Shield className="h-5 w-5 text-blue-500" />
             <CardTitle>Authentication</CardTitle>
           </div>
-          <CardDescription>
-            Protect your dashboard with username and password authentication
-          </CardDescription>
+          <CardDescription>Protect your dashboard with username and password authentication</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {error && (
@@ -442,31 +414,19 @@ export function Settings() {
           <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
             <div className="flex items-center gap-3">
               <div
-                className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                  authEnabled ? "bg-green-500/10" : "bg-gray-500/10"
-                }`}
+                className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
               >
-                <Lock
-                  className={`h-5 w-5 ${
-                    authEnabled ? "text-green-500" : "text-gray-500"
-                  }`}
-                />
+                <Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
               </div>
               <div>
                 <p className="font-medium">Authentication Status</p>
                 <p className="text-sm text-muted-foreground">
-                  {authEnabled
-                    ? "Password protection is enabled"
-                    : "No password protection"}
+                  {authEnabled ? "Password protection is enabled" : "No password protection"}
                 </p>
               </div>
             </div>
             <div
-              className={`px-3 py-1 rounded-full text-sm font-medium ${
-                authEnabled
-                  ? "bg-green-500/10 text-green-500"
-                  : "bg-gray-500/10 text-gray-500"
-              }`}
+              className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
             >
               {authEnabled ? "Enabled" : "Disabled"}
             </div>
@@ -477,14 +437,10 @@ export function Settings() {
               <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
                 <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
                 <p className="text-sm text-blue-500">
-                  Enable authentication to protect your dashboard when accessing
-                  from non-private networks.
+                  Enable authentication to protect your dashboard when accessing from non-private networks.
                 </p>
               </div>
-              <Button
-                onClick={() => setShowSetupForm(true)}
-                className="w-full bg-blue-500 hover:bg-blue-600"
-              >
+              <Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
                 <Shield className="h-4 w-4 mr-2" />
                 Enable Authentication
               </Button>
@@ -544,19 +500,10 @@ export function Settings() {
               </div>
 
               <div className="flex gap-2">
-                <Button
-                  onClick={handleEnableAuth}
-                  className="flex-1 bg-blue-500 hover:bg-blue-600"
-                  disabled={loading}
-                >
+                <Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
                   {loading ? "Enabling..." : "Enable"}
                 </Button>
-                <Button
-                  onClick={() => setShowSetupForm(false)}
-                  variant="outline"
-                  className="flex-1"
-                  disabled={loading}
-                >
+                <Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
                   Cancel
                 </Button>
               </div>
@@ -565,21 +512,13 @@ export function Settings() {
 
           {authEnabled && (
             <div className="space-y-3">
-              <Button
-                onClick={handleLogout}
-                variant="outline"
-                className="w-full bg-transparent"
-              >
+              <Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
                 <LogOut className="h-4 w-4 mr-2" />
                 Logout
               </Button>
 
               {!showChangePassword && (
-                <Button
-                  onClick={() => setShowChangePassword(true)}
-                  variant="outline"
-                  className="w-full"
-                >
+                <Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
                   <Lock className="h-4 w-4 mr-2" />
                   Change Password
                 </Button>
@@ -622,9 +561,7 @@ export function Settings() {
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="confirm-new-password">
-                      Confirm New Password
-                    </Label>
+                    <Label htmlFor="confirm-new-password">Confirm New Password</Label>
                     <div className="relative">
                       <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                       <Input
@@ -664,21 +601,15 @@ export function Settings() {
                   <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
                     <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
                     <div className="text-sm text-blue-400">
-                      <p className="font-medium mb-1">
-                        Two-Factor Authentication (2FA)
-                      </p>
+                      <p className="font-medium mb-1">Two-Factor Authentication (2FA)</p>
                       <p className="text-blue-300">
-                        Add an extra layer of security by requiring a code from
-                        your authenticator app in addition to your password.
+                        Add an extra layer of security by requiring a code from your authenticator app in addition to
+                        your password.
                       </p>
                     </div>
                   </div>
 
-                  <Button
-                    onClick={() => setShow2FASetup(true)}
-                    variant="outline"
-                    className="w-full"
-                  >
+                  <Button onClick={() => setShow2FASetup(true)} variant="outline" className="w-full">
                     <Shield className="h-4 w-4 mr-2" />
                     Enable Two-Factor Authentication
                   </Button>
@@ -689,17 +620,11 @@ export function Settings() {
                 <div className="space-y-3">
                   <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
                     <CheckCircle className="h-5 w-5 text-green-500" />
-                    <p className="text-sm text-green-500 font-medium">
-                      2FA is enabled
-                    </p>
+                    <p className="text-sm text-green-500 font-medium">2FA is enabled</p>
                   </div>
 
                   {!show2FADisable && (
-                    <Button
-                      onClick={() => setShow2FADisable(true)}
-                      variant="outline"
-                      className="w-full"
-                    >
+                    <Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
                       <Shield className="h-4 w-4 mr-2" />
                       Disable 2FA
                     </Button>
@@ -707,12 +632,8 @@ export function Settings() {
 
                   {show2FADisable && (
                     <div className="space-y-4 border border-border rounded-lg p-4">
-                      <h3 className="font-semibold">
-                        Disable Two-Factor Authentication
-                      </h3>
-                      <p className="text-sm text-muted-foreground">
-                        Enter your password to confirm
-                      </p>
+                      <h3 className="font-semibold">Disable Two-Factor Authentication</h3>
+                      <p className="text-sm text-muted-foreground">Enter your password to confirm</p>
 
                       <div className="space-y-2">
                         <Label htmlFor="disable-2fa-password">Password</Label>
@@ -723,9 +644,7 @@ export function Settings() {
                             type="password"
                             placeholder="Enter your password"
                             value={disable2FAPassword}
-                            onChange={(e) =>
-                              setDisable2FAPassword(e.target.value)
-                            }
+                            onChange={(e) => setDisable2FAPassword(e.target.value)}
                             className="pl-10"
                             disabled={loading}
                           />
@@ -733,19 +652,14 @@ export function Settings() {
                       </div>
 
                       <div className="flex gap-2">
-                        <Button
-                          onClick={handleDisable2FA}
-                          variant="destructive"
-                          className="flex-1"
-                          disabled={loading}
-                        >
+                        <Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
                           {loading ? "Disabling..." : "Disable 2FA"}
                         </Button>
                         <Button
                           onClick={() => {
-                            setShow2FADisable(false);
-                            setDisable2FAPassword("");
-                            setError("");
+                            setShow2FADisable(false)
+                            setDisable2FAPassword("")
+                            setError("")
                           }}
                           variant="outline"
                           className="flex-1"
@@ -759,12 +673,7 @@ export function Settings() {
                 </div>
               )}
 
-              <Button
-                onClick={handleDisableAuth}
-                variant="destructive"
-                className="w-full"
-                disabled={loading}
-              >
+              <Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
                 Disable Authentication
               </Button>
             </div>
@@ -781,8 +690,7 @@ export function Settings() {
               <CardTitle>API Access Tokens</CardTitle>
             </div>
             <CardDescription>
-              Generate long-lived API tokens for external integrations like
-              Homepage and Home Assistant
+              Generate long-lived API tokens for external integrations like Homepage and Home Assistant
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
@@ -816,10 +724,7 @@ export function Settings() {
             </div>
 
             {!showApiTokenSection && !apiToken && (
-              <Button
-                onClick={() => setShowApiTokenSection(true)}
-                className="w-full bg-purple-500 hover:bg-purple-600"
-              >
+              <Button onClick={() => setShowApiTokenSection(true)} className="w-full bg-purple-500 hover:bg-purple-600">
                 <Key className="h-4 w-4 mr-2" />
                 Generate New API Token
               </Button>
@@ -877,10 +782,10 @@ export function Settings() {
                   </Button>
                   <Button
                     onClick={() => {
-                      setShowApiTokenSection(false);
-                      setTokenPassword("");
-                      setTokenTotpCode("");
-                      setError("");
+                      setShowApiTokenSection(false)
+                      setTokenPassword("")
+                      setTokenTotpCode("")
+                      setError("")
                     }}
                     variant="outline"
                     className="flex-1"
@@ -927,23 +832,10 @@ export function Settings() {
                         onClick={() => setApiTokenVisible(!apiTokenVisible)}
                         className="h-7 w-7 p-0"
                       >
-                        {apiTokenVisible ? (
-                          <EyeOff className="h-4 w-4" />
-                        ) : (
-                          <Eye className="h-4 w-4" />
-                        )}
+                        {apiTokenVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                       </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={copyApiToken}
-                        className="h-7 w-7 p-0"
-                      >
-                        <Copy
-                          className={`h-4 w-4 ${
-                            tokenCopied ? "text-green-500" : ""
-                          }`}
-                        />
+                      <Button size="sm" variant="ghost" onClick={copyApiToken} className="h-7 w-7 p-0">
+                        <Copy className={`h-4 w-4 ${tokenCopied ? "text-green-500" : ""}`} />
                       </Button>
                     </div>
                   </div>
@@ -958,21 +850,18 @@ export function Settings() {
                 <div className="space-y-2">
                   <p className="text-sm font-medium">How to use this token:</p>
                   <div className="bg-muted/50 rounded p-3 text-xs font-mono">
-                    <p className="text-muted-foreground mb-2">
-                      # Add to request headers:
-                    </p>
+                    <p className="text-muted-foreground mb-2"># Add to request headers:</p>
                     <p>Authorization: Bearer YOUR_TOKEN_HERE</p>
                   </div>
                   <p className="text-xs text-muted-foreground">
-                    See the README documentation for complete integration
-                    examples with Homepage and Home Assistant.
+                    See the README documentation for complete integration examples with Homepage and Home Assistant.
                   </p>
                 </div>
 
                 <Button
                   onClick={() => {
-                    setApiToken("");
-                    setShowApiTokenSection(false);
+                    setApiToken("")
+                    setShowApiTokenSection(false)
                   }}
                   variant="outline"
                   className="w-full"
@@ -984,7 +873,7 @@ export function Settings() {
           </CardContent>
         </Card>
       )}
-
+      
       {/* ProxMenux unit settings*/}
       <Card>
         <CardHeader>
@@ -1028,9 +917,7 @@ export function Settings() {
             <Wrench className="h-5 w-5 text-orange-500" />
             <CardTitle>ProxMenux Optimizations</CardTitle>
           </div>
-          <CardDescription>
-            System optimizations and utilities installed via ProxMenux
-          </CardDescription>
+          <CardDescription>System optimizations and utilities installed via ProxMenux</CardDescription>
         </CardHeader>
         <CardContent>
           {loadingTools ? (
@@ -1040,22 +927,14 @@ export function Settings() {
           ) : proxmenuxTools.length === 0 ? (
             <div className="text-center py-8">
               <Package className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
-              <p className="text-muted-foreground">
-                No ProxMenux optimizations installed yet
-              </p>
-              <p className="text-sm text-muted-foreground mt-1">
-                Run ProxMenux to configure system optimizations
-              </p>
+              <p className="text-muted-foreground">No ProxMenux optimizations installed yet</p>
+              <p className="text-sm text-muted-foreground mt-1">Run ProxMenux to configure system optimizations</p>
             </div>
           ) : (
             <div className="space-y-2">
               <div className="flex items-center justify-between mb-4 pb-2 border-b border-border">
-                <span className="text-sm font-medium text-muted-foreground">
-                  Installed Tools
-                </span>
-                <span className="text-sm font-semibold text-orange-500">
-                  {proxmenuxTools.length} active
-                </span>
+                <span className="text-sm font-medium text-muted-foreground">Installed Tools</span>
+                <span className="text-sm font-semibold text-orange-500">{proxmenuxTools.length} active</span>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                 {proxmenuxTools.map((tool) => (
@@ -1077,10 +956,10 @@ export function Settings() {
         open={show2FASetup}
         onClose={() => setShow2FASetup(false)}
         onSuccess={() => {
-          setSuccess("2FA enabled successfully!");
-          checkAuthStatus();
+          setSuccess("2FA enabled successfully!")
+          checkAuthStatus()
         }}
       />
     </div>
-  );
-}
+  )
+}
\ No newline at end of file