From 48ddc2b4c6237540ef1baf797cfc52ddc070865f Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 1 Jul 2025 18:47:36 +0700
Subject: [PATCH] Remove system_info card from overview and update status badge

---
 .../src/components/servers/OSTypeIcon.tsx     |  2 +-
 .../servers/ServerMetricsOverview.tsx         | 41 -------------------
 .../components/servers/ServerStatsCards.tsx   | 18 ++++----
 .../components/servers/ServerStatusBadge.tsx  | 15 ++++---
 .../src/components/servers/ServerTable.tsx    | 23 +++--------
 application/src/pages/ServerDetail.tsx        | 11 +++--
 6 files changed, 33 insertions(+), 77 deletions(-)

diff --git a/application/src/components/servers/OSTypeIcon.tsx b/application/src/components/servers/OSTypeIcon.tsx
index 151883f..ff3c0d2 100644
--- a/application/src/components/servers/OSTypeIcon.tsx
+++ b/application/src/components/servers/OSTypeIcon.tsx
@@ -10,7 +10,7 @@ export const OSTypeIcon = ({ osType, className = "h-4 w-4" }: OSTypeIconProps) =
   const getOSIcon = (os: string) => {
     const osLower = os.toLowerCase();
     
-    if (osLower.includes('linux') || osLower.includes('ubuntu') || osLower.includes('centos')) {
+    if (osLower.includes('linux') || osLower.includes('ubuntu') || osLower.includes('centos') || osLower.includes('debian')) {
       return <Server className={className} />;
     } else if (osLower.includes('windows')) {
       return <Monitor className={className} />;
diff --git a/application/src/components/servers/ServerMetricsOverview.tsx b/application/src/components/servers/ServerMetricsOverview.tsx
index 840db9c..34ec57a 100644
--- a/application/src/components/servers/ServerMetricsOverview.tsx
+++ b/application/src/components/servers/ServerMetricsOverview.tsx
@@ -203,47 +203,6 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
         icon={HardDrive}
         color={theme === 'dark' ? "#f59e0b" : "#d97706"}
       />
-
-      {/* System Info Card */}
-      <Card className="relative overflow-hidden bg-gradient-to-br from-card/80 via-card to-card/60 border border-border/60 shadow-lg hover:shadow-xl hover:border-border/80 transition-all duration-300 backdrop-blur-sm group xl:col-span-2">
-        <div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/[0.02] to-white/[0.05] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-        <CardHeader className="pb-3 relative">
-          <CardTitle className="flex items-center gap-3 text-sm font-semibold">
-            <div className="p-2.5 rounded-xl bg-purple-500/15 shadow-sm ring-1 ring-white/10 transition-all duration-300 group-hover:scale-110" style={{ boxShadow: '0 4px 12px rgba(168, 85, 247, 0.2)' }}>
-              <Info className="h-4 w-4 text-purple-500" />
-            </div>
-            <span className="text-foreground/90">System Information</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3 relative">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
-            <div className="space-y-3">
-              <div className="bg-muted/20 rounded-lg p-3">
-                <span className="text-muted-foreground block mb-1">Operating System:</span>
-                <div className="font-semibold text-foreground">{server.os_type}</div>
-              </div>
-              <div className="bg-muted/20 rounded-lg p-3">
-                <span className="text-muted-foreground block mb-1">Hostname:</span>
-                <div className="font-mono text-xs text-foreground break-all">{server.hostname}</div>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <div className="bg-muted/20 rounded-lg p-3">
-                <span className="text-muted-foreground block mb-1">IP Address:</span>
-                <div className="font-mono text-xs text-foreground">{server.ip_address}</div>
-              </div>
-              {server.system_info && (
-                <div className="bg-muted/20 rounded-lg p-3">
-                  <span className="text-muted-foreground block mb-1">System Details:</span>
-                  <div className="font-mono text-[10px] text-foreground/80 line-clamp-3 leading-relaxed" title={server.system_info}>
-                    {server.system_info}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 };
\ No newline at end of file
diff --git a/application/src/components/servers/ServerStatsCards.tsx b/application/src/components/servers/ServerStatsCards.tsx
index 3c6e035..379288b 100644
--- a/application/src/components/servers/ServerStatsCards.tsx
+++ b/application/src/components/servers/ServerStatsCards.tsx
@@ -17,32 +17,32 @@ export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
       value: stats.total,
       icon: Server,
       gradient: theme === 'dark' 
-        ? "linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(160, 82, 45, 0.6) 100%)" 
-        : "linear-gradient(135deg, #8b4513 0%, #a0522d 100%)"
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(160, 82, 45, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #a0522d 100%)"
     },
     {
       title: "ONLINE SERVERS",
       value: stats.online,
       icon: Activity,
       gradient: theme === 'dark' 
-        ? "linear-gradient(135deg, rgba(67, 160, 71, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
-        : "linear-gradient(135deg, #43a047 0%, #66bb6a 100%)"
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)" 
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #66bb6a 100%)"
     },
     {
       title: "OFFLINE SERVERS",
       value: stats.offline,
       icon: Power,
       gradient: theme === 'dark'
-        ? "linear-gradient(135deg, rgba(229, 57, 53, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
-        : "linear-gradient(135deg, #e53935 0%, #ef5350 100%)"
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ef5350 100%)"
     },
     {
       title: "WARNING SERVERS",
       value: stats.warning,
       icon: AlertTriangle,
       gradient: theme === 'dark'
-        ? "linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
-        : "linear-gradient(135deg, #ff9800 0%, #ffb74d 100%)"
+        ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
+        : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #ffb74d 100%)"
     }
   ];
 
@@ -62,7 +62,7 @@ export const ServerStatsCards = ({ stats }: ServerStatsCardsProps) => {
           <div className="absolute inset-0 z-0 opacity-10">
             <div className="w-full h-full" 
               style={{ 
-                backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+                backgroundImage: `linear-gradient(#000 1px, transparent 1px), 
                                   linear-gradient(90deg, #fff 1px, transparent 1px)`,
                 backgroundSize: '20px 20px'
               }}
diff --git a/application/src/components/servers/ServerStatusBadge.tsx b/application/src/components/servers/ServerStatusBadge.tsx
index ac17edf..bdecfe5 100644
--- a/application/src/components/servers/ServerStatusBadge.tsx
+++ b/application/src/components/servers/ServerStatusBadge.tsx
@@ -2,7 +2,7 @@
 import { Badge } from "@/components/ui/badge";
 
 interface ServerStatusBadgeProps {
-  status: 'up' | 'down' | 'warning';
+  status: 'up' | 'down' | 'warning' | 'paused';
 }
 
 export const ServerStatusBadge = ({ status }: ServerStatusBadgeProps) => {
@@ -11,22 +11,27 @@ export const ServerStatusBadge = ({ status }: ServerStatusBadgeProps) => {
       case 'up':
         return {
           label: 'Online',
-          className: 'bg-green-100 text-green-800 border-green-200'
+          className: 'bg-green-600 text-green-100 border-green-200'
         };
       case 'down':
         return {
           label: 'Offline',
-          className: 'bg-red-100 text-red-800 border-red-200'
+          className: 'bg-red-600 text-red-100 border-red-200'
         };
       case 'warning':
         return {
           label: 'Warning',
-          className: 'bg-yellow-100 text-yellow-800 border-yellow-200'
+          className: 'bg-yellow-600 text-yellow-800 border-yellow-200'
+        };
+        case 'paused':
+        return {
+          label: 'Paused',
+          className: 'bg-gray-600 text-gray-100 border-gray-200'
         };
       default:
         return {
           label: 'Unknown',
-          className: 'bg-gray-100 text-gray-800 border-gray-200'
+          className: 'bg-gray-600 text-gray-100 border-gray-200'
         };
     }
   };
diff --git a/application/src/components/servers/ServerTable.tsx b/application/src/components/servers/ServerTable.tsx
index 85af02b..d906b44 100644
--- a/application/src/components/servers/ServerTable.tsx
+++ b/application/src/components/servers/ServerTable.tsx
@@ -119,7 +119,6 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                   <TableHead>Memory</TableHead>
                   <TableHead>Disk</TableHead>
                   <TableHead>Uptime</TableHead>
-                  <TableHead>Docker</TableHead>
                   <TableHead>Last Checked</TableHead>
                   <TableHead className="text-right">Actions</TableHead>
                 </TableRow>
@@ -136,7 +135,7 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                       <TableCell>
                         <div>
                           <div className="font-medium">{server.name}</div>
-                          <div className="text-sm text-muted-foreground">{server.hostname}</div>
+                          
                         </div>
                       </TableCell>
                       <TableCell>
@@ -161,7 +160,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                             value={cpuUsage} 
                             className="h-2"
                             indicatorClassName={
-                              cpuUsage > 80 ? "bg-red-500" : 
+                              cpuUsage > 90 ? "bg-red-00" : 
+                              cpuUsage > 75 ? "bg-orange-500" :
                               cpuUsage > 60 ? "bg-yellow-500" : "bg-green-500"
                             }
                           />
@@ -170,8 +170,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                       <TableCell>
                         <div className="space-y-1 min-w-[120px]">
                           <div className="flex justify-between text-sm">
-                            <span>{serverService.formatBytes(server.ram_used)}</span>
                             <span className="text-muted-foreground">{memoryUsage.toFixed(1)}%</span>
+                            <span>{serverService.formatBytes(server.ram_total)}</span>
                           </div>
                           <Progress 
                             value={memoryUsage} 
@@ -186,8 +186,8 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                       <TableCell>
                         <div className="space-y-1 min-w-[120px]">
                           <div className="flex justify-between text-sm">
-                            <span>{serverService.formatBytes(server.disk_used)}</span>
                             <span className="text-muted-foreground">{diskUsage.toFixed(1)}%</span>
+                            <span>{serverService.formatBytes(server.disk_total)}</span>
                           </div>
                           <Progress 
                             value={diskUsage} 
@@ -202,18 +202,7 @@ export const ServerTable = ({ servers, isLoading, onRefresh }: ServerTableProps)
                       <TableCell>
                         <div className="text-sm">{server.uptime}</div>
                       </TableCell>
-                      <TableCell>
-                        {server.docker === 'true' ? (
-                          <Badge variant="secondary" className="text-xs">
-                            <Activity className="h-3 w-3 mr-1" />
-                            Enabled
-                          </Badge>
-                        ) : (
-                          <Badge variant="outline" className="text-xs">
-                            Disabled
-                          </Badge>
-                        )}
-                      </TableCell>
+                      
                       <TableCell>
                         <div className="text-sm text-muted-foreground">
                           {new Date(server.last_checked).toLocaleString()}
diff --git a/application/src/pages/ServerDetail.tsx b/application/src/pages/ServerDetail.tsx
index 63ea12f..4727e84 100644
--- a/application/src/pages/ServerDetail.tsx
+++ b/application/src/pages/ServerDetail.tsx
@@ -10,7 +10,7 @@ import { Header } from "@/components/dashboard/Header";
 import { serverService } from "@/services/serverService";
 import { authService } from "@/services/authService";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Server } from "lucide-react";
+import { ArrowLeft, Server, Database } from "lucide-react";
 import { ServerMetricsCharts } from "@/components/servers/ServerMetricsCharts";
 import { ServerMetricsOverview } from "@/components/servers/ServerMetricsOverview";
 import { ServerHistoryCharts } from "@/components/servers/ServerHistoryCharts";
@@ -126,7 +126,7 @@ const ServerDetail = () => {
                   </div>
                   <div className="flex items-center gap-3 mb-2">
                     <div className="h-8 w-8 rounded bg-primary/10 flex items-center justify-center">
-                      <Server className="h-4 w-4 text-primary" />
+                      <Database className="h-4 w-4 text-primary" />
                     </div>
                     <h1 className="text-2xl font-bold text-foreground">
                       {server?.name || 'Server Detail'}
@@ -135,11 +135,14 @@ const ServerDetail = () => {
                   <p className={`text-muted-foreground mt-1 sm:mt-2 transition-all duration-300 ${sidebarCollapsed ? 'text-base sm:text-lg' : 'text-sm sm:text-base'}`}>
                     Monitor server performance metrics and system health
                     {server && (
-                      <span className="block text-xs text-muted-foreground/70 mt-1">
-                        {server.hostname} • {server.ip_address} • {server.os_type}
+                      <span className="block text-xs text-foreground/80 mt-1">
+                        {server.hostname} • {server.ip_address} • {server.os_type} • {server.system_info} 
                       </span>
+                      
                     )}
                   </p>
+                  
+                  
                 </div>
               </div>
             </div>