Update AppImage

AppImage/components/proxmox-dashboard.tsx

@@ -1,7 +1,5 @@
 "use client"
 
-import type React from "react"
-
 import { useState, useEffect, useMemo, useCallback } from "react"
 import { Badge } from "./ui/badge"
 import { Button } from "./ui/button"
@@ -55,13 +53,9 @@ interface FlaskSystemData {
 
 interface FlaskSystemInfo {
   hostname: string
-  uptime_seconds: number
-  uptime_formatted: string
-  health: {
-    status: string
-    summary: string
-  }
-  timestamp: string
+  node_id: string
+  uptime: string
+  health_status: "healthy" | "warning" | "critical"
 }
 
 export function ProxmoxDashboard() {
@@ -80,7 +74,6 @@ export function ProxmoxDashboard() {
   const [showNavigation, setShowNavigation] = useState(true)
   const [lastScrollY, setLastScrollY] = useState(0)
   const [showHealthModal, setShowHealthModal] = useState(false)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
 
   const fetchSystemData = useCallback(async () => {
     const apiUrl = getApiUrl("/api/system-info")
@@ -101,26 +94,14 @@ export function ProxmoxDashboard() {
       const data: FlaskSystemInfo = await response.json()
 
       const uptimeValue =
-        data.uptime_formatted && typeof data.uptime_formatted === "string" && data.uptime_formatted.trim() !== ""
-          ? data.uptime_formatted
-          : "N/A"
-
-      const healthStatus = data.health?.status || "healthy"
-      const mappedStatus =
-        healthStatus === "OK"
-          ? "healthy"
-          : healthStatus === "WARNING"
-            ? "warning"
-            : healthStatus === "CRITICAL"
-              ? "critical"
-              : "healthy"
+        data.uptime && typeof data.uptime === "string" && data.uptime.trim() !== "" ? data.uptime : "N/A"
 
       setSystemStatus({
-        status: mappedStatus as "healthy" | "warning" | "critical",
+        status: data.health_status || "healthy",
         uptime: uptimeValue,
         lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
         serverName: data.hostname || "Unknown",
-        nodeId: data.hostname || "Unknown",
+        nodeId: data.node_id || "Unknown",
       })
       setIsServerConnected(true)
     } catch (error) {
@@ -203,18 +184,6 @@ export function ProxmoxDashboard() {
     setIsRefreshing(false)
   }
 
-  const handleLogout = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    localStorage.removeItem("proxmenux-auth-token")
-    localStorage.removeItem("proxmenux-saved-username")
-    localStorage.removeItem("proxmenux-saved-password")
-    window.location.href = "/"
-  }
-
-  useEffect(() => {
-    setIsAuthenticated(!!localStorage.getItem("proxmenux-auth-token"))
-  }, [])
-
   const statusIcon = useMemo(() => {
     switch (systemStatus.status) {
       case "healthy":
@@ -287,16 +256,18 @@ export function ProxmoxDashboard() {
         className="border-b border-border bg-card sticky top-0 z-50 shadow-sm cursor-pointer hover:bg-accent/5 transition-colors"
         onClick={() => setShowHealthModal(true)}
       >
-        <div className="container mx-auto px-4 md:px-6 py-4">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex items-center space-x-3">
-              <div className="w-12 h-12 relative flex items-center justify-center bg-primary/10">
+        <div className="container mx-auto px-4 md:px-6 py-4 md:py-4">
+          {/* Logo and Title */}
+          <div className="flex items-start justify-between gap-3">
+            {/* Logo and Title */}
+            <div className="flex items-center space-x-2 md:space-x-3 min-w-0">
+              <div className="w-16 h-16 md:w-10 md:h-10 relative flex items-center justify-center bg-primary/10 flex-shrink-0">
                 <Image
                   src="/images/proxmenux-logo.png"
                   alt="ProxMenux Logo"
-                  width={48}
-                  height={48}
-                  className="object-contain"
+                  width={64}
+                  height={64}
+                  className="object-contain md:w-10 md:h-10"
                   priority
                   onError={(e) => {
                     console.log("[v0] Logo failed to load, using fallback icon")
@@ -308,65 +279,85 @@ export function ProxmoxDashboard() {
                     }
                   }}
                 />
-                <Server className="h-6 w-6 text-primary absolute fallback-icon hidden" />
+                <Server className="h-8 w-8 md:h-6 md:w-6 text-primary absolute fallback-icon hidden" />
               </div>
-              <div>
-                <h1 className="text-xl font-semibold text-foreground">ProxMenux Monitor</h1>
-                <p className="text-sm text-muted-foreground hidden md:block">Proxmox System Dashboard</p>
-                <div className="flex items-center space-x-2 mt-1">
-                  <Server className="h-3 w-3 text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">Node: {systemStatus.serverName}</span>
+              <div className="min-w-0">
+                <h1 className="text-lg md:text-xl font-semibold text-foreground truncate">ProxMenux Monitor</h1>
+                <p className="text-xs md:text-sm text-muted-foreground">Proxmox System Dashboard</p>
+                <div className="lg:hidden flex items-center gap-1 text-xs text-muted-foreground mt-0.5">
+                  <Server className="h-3 w-3" />
+                  <span className="truncate">Node: {systemStatus.serverName}</span>
                 </div>
               </div>
             </div>
 
-            <div className="flex items-center space-x-2 md:space-x-4">
-              <div className="hidden md:flex items-center space-x-4">
-                <Badge variant="outline" className={statusColor}>
-                  {statusIcon}
-                  <span className="ml-1 capitalize">{systemStatus.status}</span>
-                </Badge>
-
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    refreshData()
-                  }}
-                  disabled={isRefreshing}
-                  className="border-border/50 bg-transparent hover:bg-secondary"
-                >
-                  <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
-                </Button>
+            {/* Desktop Actions */}
+            <div className="hidden lg:flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <Server className="h-4 w-4 text-muted-foreground" />
+                <div className="text-sm">
+                  <div className="font-medium text-foreground">Node: {systemStatus.serverName}</div>
+                </div>
               </div>
 
-              <div className="flex md:hidden items-center space-x-2">
-                <Badge variant="outline" className={statusColor}>
-                  {statusIcon}
-                </Badge>
+              <Badge variant="outline" className={statusColor}>
+                {statusIcon}
+                <span className="ml-1 capitalize">{systemStatus.status}</span>
+              </Badge>
 
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    refreshData()
-                  }}
-                  disabled={isRefreshing}
-                  className="h-9 w-9 p-0"
-                >
-                  <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
-                </Button>
+              <div className="text-sm text-muted-foreground whitespace-nowrap">
+                Uptime: {systemStatus.uptime || "N/A"}
               </div>
 
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  refreshData()
+                }}
+                disabled={isRefreshing}
+                className="border-border/50 bg-transparent hover:bg-secondary"
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
+                Refresh
+              </Button>
+
+              <div onClick={(e) => e.stopPropagation()}>
+                <ThemeToggle />
+              </div>
+            </div>
+
+            {/* Mobile Actions */}
+            <div className="flex lg:hidden items-center gap-2">
+              <Badge variant="outline" className={`${statusColor} text-xs px-2`}>
+                {statusIcon}
+                <span className="ml-1 capitalize hidden sm:inline">{systemStatus.status}</span>
+              </Badge>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  refreshData()
+                }}
+                disabled={isRefreshing}
+                className="h-8 w-8 p-0"
+              >
+                <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
+              </Button>
+
               <div onClick={(e) => e.stopPropagation()}>
                 <ThemeToggle />
               </div>
             </div>
           </div>
 
-          <div className="mt-2 text-right text-sm text-muted-foreground">Uptime: {systemStatus.uptime}</div>
+          {/* 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 || "N/A"}</span>
+          </div>
         </div>
       </header>