Update AppImage

AppImage/components/hardware.tsx

@@ -163,14 +163,49 @@ const groupAndSortTemperatures = (temperatures: any[]) => {
 }
 
 export default function Hardware() {
+  // Static data - load once without refresh
   const {
-    data: hardwareData,
+    data: staticHardwareData,
-    error,
+    error: staticError,
-    isLoading,
+    isLoading: staticLoading,
   } = useSWR<HardwareData>("/api/hardware", fetcher, {
-    refreshInterval: 5000,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshInterval: 0, // No auto-refresh for static data
   })
 
+  // Dynamic data - refresh every 5 seconds for temperatures, fans, power, ups
+  const {
+    data: dynamicHardwareData,
+    error: dynamicError,
+    isLoading: dynamicLoading,
+  } = useSWR<HardwareData>("/api/hardware", fetcher, {
+    refreshInterval: 5000, // 5 second refresh for dynamic data
+  })
+
+  // Merge static and dynamic data, preferring static for CPU/memory/PCI/disks
+  const hardwareData = staticHardwareData
+    ? {
+        ...dynamicHardwareData,
+        // Keep static data from initial load
+        cpu: staticHardwareData.cpu,
+        motherboard: staticHardwareData.motherboard,
+        memory_modules: staticHardwareData.memory_modules,
+        pci_devices: staticHardwareData.pci_devices,
+        storage_devices: staticHardwareData.storage_devices,
+        gpus: staticHardwareData.gpus,
+        // Use dynamic data for these
+        temperatures: dynamicHardwareData?.temperatures,
+        fans: dynamicHardwareData?.fans,
+        power_meter: dynamicHardwareData?.power_meter,
+        power_supplies: dynamicHardwareData?.power_supplies,
+        ups: dynamicHardwareData?.ups,
+      }
+    : undefined
+
+  const error = staticError || dynamicError
+  const isLoading = staticLoading
+
   useEffect(() => {
     if (hardwareData?.storage_devices) {
       console.log("[v0] Storage devices data from backend:", hardwareData.storage_devices)

AppImage/components/proxmox-dashboard.tsx

@@ -27,6 +27,7 @@ import {
   Box,
   Cpu,
   FileText,
+  SettingsIcon,
 } from "lucide-react"
 import Image from "next/image"
 import { ThemeToggle } from "./theme-toggle"
@@ -54,7 +55,7 @@ export function ProxmoxDashboard() {
   const [systemStatus, setSystemStatus] = useState<SystemStatus>({
     status: "healthy",
     uptime: "Loading...",
-    lastUpdate: new Date().toLocaleTimeString(),
+    lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
     serverName: "Loading...",
     nodeId: "Loading...",
   })
@@ -99,12 +100,15 @@ export function ProxmoxDashboard() {
         status = "warning"
       }
 
+      const uptimeValue =
+        data.uptime && typeof data.uptime === "string" && data.uptime.trim() !== "" ? data.uptime : "N/A"
+
       setSystemStatus({
         status,
-        uptime: data.uptime,
+        uptime: uptimeValue,
-        lastUpdate: new Date().toLocaleTimeString(),
+        lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
-        serverName: data.hostname,
+        serverName: data.hostname || "Unknown",
-        nodeId: data.node_id,
+        nodeId: data.node_id || "Unknown",
       })
       setIsServerConnected(true)
     } catch (error) {
@@ -122,16 +126,27 @@ export function ProxmoxDashboard() {
         serverName: "Server Offline",
         nodeId: "Server Offline",
         uptime: "N/A",
-        lastUpdate: new Date().toLocaleTimeString(),
+        lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
       }))
     }
   }, [])
 
   useEffect(() => {
+    // Siempre fetch inicial
     fetchSystemData()
-    const interval = setInterval(fetchSystemData, 10000)
+
-    return () => clearInterval(interval)
+    // Solo hacer polling si estamos en overview
-  }, [fetchSystemData])
+    let interval: ReturnType<typeof setInterval> | null = null
+    if (activeTab === "overview") {
+      interval = setInterval(fetchSystemData, 10000)
+    } else {
+      interval = setInterval(fetchSystemData, 60000)
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  }, [fetchSystemData, activeTab])
 
   useEffect(() => {
     if (
@@ -217,6 +232,8 @@ export function ProxmoxDashboard() {
         return "Hardware"
       case "logs":
         return "System Logs"
+      case "settings":
+        return "Settings"
       default:
         return "Navigation Menu"
     }
@@ -300,7 +317,9 @@ export function ProxmoxDashboard() {
                 <span className="ml-1 capitalize">{systemStatus.status}</span>
               </Badge>
 
-              <div className="text-sm text-muted-foreground whitespace-nowrap">Uptime: {systemStatus.uptime}</div>
+              <div className="text-sm text-muted-foreground whitespace-nowrap">
+                Uptime: {systemStatus.uptime || "N/A"}
+              </div>
 
               <Button
                 variant="outline"
@@ -349,7 +368,7 @@ export function ProxmoxDashboard() {
 
           {/* Mobile Server Info */}
           <div className="lg:hidden mt-2 flex items-center justify-end text-xs text-muted-foreground">
-            <span className="whitespace-nowrap">Uptime: {systemStatus.uptime}</span>
+            <span className="whitespace-nowrap">Uptime: {systemStatus.uptime || "N/A"}</span>
           </div>
         </div>
       </header>
@@ -363,7 +382,7 @@ export function ProxmoxDashboard() {
       >
         <div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
-            <TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
+            <TabsList className="hidden md:grid w-full grid-cols-7 bg-card border border-border">
               <TabsTrigger
                 value="overview"
                 className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -400,6 +419,12 @@ export function ProxmoxDashboard() {
               >
                 System Logs
               </TabsTrigger>
+              <TabsTrigger
+                value="settings"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Settings
+              </TabsTrigger>
             </TabsList>
 
             <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
@@ -508,6 +533,21 @@ export function ProxmoxDashboard() {
                     <FileText className="h-5 w-5" />
                     <span>System Logs</span>
                   </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("settings")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "settings"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <SettingsIcon className="h-5 w-5" />
+                    <span>Settings</span>
+                  </Button>
                 </div>
               </SheetContent>
             </Sheet>
@@ -540,6 +580,10 @@ export function ProxmoxDashboard() {
           <TabsContent value="logs" className="space-y-4 md:space-y-6 mt-0">
             <SystemLogs key={`logs-${componentKey}`} />
           </TabsContent>
+
+          <TabsContent value="settings" className="space-y-4 md:space-y-6 mt-0">
+            <Settings />
+          </TabsContent>
         </Tabs>
 
         <footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">

AppImage/components/virtual-machines.tsx

@@ -1266,26 +1266,25 @@ export function VirtualMachines() {
                                 )}
                               </div>
 
+                              {/* IP Addresses with proper keys */}
                               {selectedVM?.type === "lxc" && vmDetails?.lxc_ip_info && (
                                 <div className="mt-4 lg:mt-6 pt-4 lg:pt-6 border-t border-border">
                                   <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
                                     IP Addresses
                                   </h4>
                                   <div className="flex flex-wrap gap-2">
-                                    {/* Real IPs (green, without "Real" label) */}
                                     {vmDetails.lxc_ip_info.real_ips.map((ip, index) => (
                                       <Badge
-                                        key={`ip-real-${selectedVM.vmid}-${ip}-${index}`}
+                                        key={`real-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
                                         variant="outline"
                                         className="bg-green-500/10 text-green-500 border-green-500/20"
                                       >
                                         {ip}
                                       </Badge>
                                     ))}
-                                    {/* Docker bridge IPs (yellow, with "Bridge" label) */}
                                     {vmDetails.lxc_ip_info.docker_ips.map((ip, index) => (
                                       <Badge
-                                        key={`ip-docker-${selectedVM.vmid}-${ip}-${index}`}
+                                        key={`docker-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
                                         variant="outline"
                                         className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
                                       >
@@ -1395,7 +1394,7 @@ export function VirtualMachines() {
                                             </div>
                                           )}
 
-                                        {/* GPU Passthrough */}
+                                        {/* GPU Passthrough with proper keys */}
                                         {vmDetails.hardware_info.gpu_passthrough &&
                                           vmDetails.hardware_info.gpu_passthrough.length > 0 && (
                                             <div>
@@ -1403,7 +1402,7 @@ export function VirtualMachines() {
                                               <div className="flex flex-wrap gap-2">
                                                 {vmDetails.hardware_info.gpu_passthrough.map((gpu, index) => (
                                                   <Badge
-                                                    key={`gpu-${selectedVM.vmid}-${index}-${gpu.substring(0, 20)}`}
+                                                    key={`gpu-${selectedVM.vmid}-${index}-${gpu.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
                                                     variant="outline"
                                                     className={
                                                       gpu.includes("NVIDIA")
@@ -1418,7 +1417,7 @@ export function VirtualMachines() {
                                             </div>
                                           )}
 
-                                        {/* Other Hardware Devices */}
+                                        {/* Hardware Devices with proper keys */}
                                         {vmDetails.hardware_info.devices &&
                                           vmDetails.hardware_info.devices.length > 0 && (
                                             <div>
@@ -1426,7 +1425,7 @@ export function VirtualMachines() {
                                               <div className="flex flex-wrap gap-2">
                                                 {vmDetails.hardware_info.devices.map((device, index) => (
                                                   <Badge
-                                                    key={`device-${selectedVM.vmid}-${index}-${device.substring(0, 20)}`}
+                                                    key={`device-${selectedVM.vmid}-${index}-${device.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
                                                     variant="outline"
                                                     className="bg-blue-500/10 text-blue-500 border-blue-500/20"
                                                   >
@@ -1561,6 +1560,7 @@ export function VirtualMachines() {
                                           <div className="font-medium text-foreground">{vmDetails.config.scsihw}</div>
                                         </div>
                                       )}
+                                      {/* Disk Storage with proper keys */}
                                       {Object.keys(vmDetails.config)
                                         .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
                                         .map((diskKey) => (
@@ -1589,6 +1589,7 @@ export function VirtualMachines() {
                                           </div>
                                         </div>
                                       )}
+                                      {/* Mount Points with proper keys */}
                                       {Object.keys(vmDetails.config)
                                         .filter((key) => key.match(/^mp\d+$/))
                                         .map((mpKey) => (
@@ -1610,6 +1611,7 @@ export function VirtualMachines() {
                                       Network
                                     </h4>
                                     <div className="space-y-3">
+                                      {/* Network Interfaces with proper keys */}
                                       {Object.keys(vmDetails.config)
                                         .filter((key) => key.match(/^net\d+$/))
                                         .map((netKey) => (
@@ -1651,7 +1653,7 @@ export function VirtualMachines() {
                                     </div>
                                   </div>
 
-                                  {/* PCI Devices Section */}
+                                  {/* PCI Devices with proper keys */}
                                   {Object.keys(vmDetails.config).some((key) => key.match(/^hostpci\d+$/)) && (
                                     <div>
                                       <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1674,7 +1676,7 @@ export function VirtualMachines() {
                                     </div>
                                   )}
 
-                                  {/* USB Devices Section */}
+                                  {/* USB Devices with proper keys */}
                                   {Object.keys(vmDetails.config).some((key) => key.match(/^usb\d+$/)) && (
                                     <div>
                                       <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1697,7 +1699,7 @@ export function VirtualMachines() {
                                     </div>
                                   )}
 
-                                  {/* Serial Devices Section */}
+                                  {/* Serial Ports with proper keys */}
                                   {Object.keys(vmDetails.config).some((key) => key.match(/^serial\d+$/)) && (
                                     <div>
                                       <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
@@ -1719,91 +1721,6 @@ export function VirtualMachines() {
                                       </div>
                                     </div>
                                   )}
-
-                                  {/* Options Section */}
-                                  <div>
-                                    <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
-                                      Options
-                                    </h4>
-                                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-                                      {vmDetails.config.onboot !== undefined && (
-                                        <div>
-                                          <div className="text-xs text-muted-foreground mb-1">Start on Boot</div>
-                                          <Badge
-                                            variant="outline"
-                                            className={
-                                              vmDetails.config.onboot
-                                                ? "bg-green-500/10 text-green-500 border-green-500/20"
-                                                : "bg-red-500/10 text-red-500 border-red-500/20"
-                                            }
-                                          >
-                                            {vmDetails.config.onboot ? "Yes" : "No"}
-                                          </Badge>
-                                        </div>
-                                      )}
-                                      {vmDetails.config.ostype && (
-                                        <div>
-                                          <div className="text-xs text-muted-foreground mb-1">OS Type</div>
-                                          <div className="font-medium text-foreground">{vmDetails.config.ostype}</div>
-                                        </div>
-                                      )}
-                                      {vmDetails.config.arch && (
-                                        <div>
-                                          <div className="text-xs text-muted-foreground mb-1">Architecture</div>
-                                          <div className="font-medium text-foreground">{vmDetails.config.arch}</div>
-                                        </div>
-                                      )}
-                                      {vmDetails.config.boot && (
-                                        <div>
-                                          <div className="text-xs text-muted-foreground mb-1">Boot Order</div>
-                                          <div className="font-medium text-foreground">{vmDetails.config.boot}</div>
-                                        </div>
-                                      )}
-                                      {vmDetails.config.features && (
-                                        <div className="col-span-2 lg:grid-cols-3">
-                                          <div className="text-xs text-muted-foreground mb-1">Features</div>
-                                          <div className="font-medium text-foreground text-sm">
-                                            {vmDetails.config.features}
-                                          </div>
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-
-                                  {/* Advanced Section */}
-                                  {(vmDetails.config.vmgenid || vmDetails.config.smbios1 || vmDetails.config.meta) && (
-                                    <div>
-                                      <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
-                                        Advanced
-                                      </h4>
-                                      <div className="space-y-3">
-                                        {vmDetails.config.vmgenid && (
-                                          <div>
-                                            <div className="text-xs text-muted-foreground mb-1">VM Generation ID</div>
-                                            <div className="font-medium text-muted-foreground text-sm font-mono">
-                                              {vmDetails.config.vmgenid}
-                                            </div>
-                                          </div>
-                                        )}
-                                        {vmDetails.config.smbios1 && (
-                                          <div>
-                                            <div className="text-xs text-muted-foreground mb-1">SMBIOS</div>
-                                            <div className="font-medium text-muted-foreground text-sm font-mono break-all">
-                                              {vmDetails.config.smbios1}
-                                            </div>
-                                          </div>
-                                        )}
-                                        {vmDetails.config.meta && (
-                                          <div>
-                                            <div className="text-xs text-muted-foreground mb-1">Metadata</div>
-                                            <div className="font-medium text-muted-foreground text-sm font-mono">
-                                              {vmDetails.config.meta}
-                                            </div>
-                                          </div>
-                                        )}
-                                      </div>
-                                    </div>
-                                  )}
                                 </div>
                               )}
                             </CardContent>