From 671f22c1d38c988759ed78aec0e81fda4088fc77 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 3 Jul 2025 21:05:56 +0700
Subject: [PATCH 1/8] Add FUNDING.yml (#63)

* Merge pull request #27 from operacle/develop

feat: Implement uptime monitoring data retention

* Create FUNDING.yml

* add codeowners and pull request workflow
---
 .github/CODEOWNERS  |  2 ++
 .github/FUNDING.yml | 15 +++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 .github/CODEOWNERS
 create mode 100644 .github/FUNDING.yml

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..78454b3
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,2 @@
+# These owners will be the default owners for everything in
+*       @tolaleng
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..cca37f4
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [tolaleng]
+patreon: # Replace with a single Patreon username
+open_collective: checkcle
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

From f0eec90e75ba3bc455a19ac67c6eda10220bceef Mon Sep 17 00:00:00 2001
From: samang-dauth <samangdauth@gmail.com>
Date: Sat, 5 Jul 2025 17:00:21 +0700
Subject: [PATCH 2/8] feat: Add system info cards to server detail header Adds
 small cards in the server detail page header to display server system
 information.

---
 .../servers/ServerMetricsOverview.tsx         |   6 +-
 .../servers/ServerSystemInfoCard.tsx          | 112 ++++++++++++++++++
 application/src/pages/ServerDetail.tsx        |  11 +-
 3 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 application/src/components/servers/ServerSystemInfoCard.tsx

diff --git a/application/src/components/servers/ServerMetricsOverview.tsx b/application/src/components/servers/ServerMetricsOverview.tsx
index 34ec57a..e706f5e 100644
--- a/application/src/components/servers/ServerMetricsOverview.tsx
+++ b/application/src/components/servers/ServerMetricsOverview.tsx
@@ -54,8 +54,8 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
             <div 
               className="p-2.5 rounded-xl shadow-sm ring-1 ring-white/10 transition-all duration-300 group-hover:scale-110"
               style={{ 
-                backgroundColor: `${color}15`,
-                boxShadow: `0 4px 12px ${color}20`
+                backgroundColor: `${color}35`,
+               // boxShadow: `0 4px 12px ${color}20`
               }}
             >
               <Icon className="h-4 w-4" style={{ color }} />
@@ -64,7 +64,7 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
           </div>
           <div className="text-xs font-mono font-bold px-2 py-1 rounded-md" style={{ 
             color, 
-            backgroundColor: `${color}10`,
+            backgroundColor: `${color}35`,
             border: `1px solid ${color}30`
           }}>
             {percentage.toFixed(1)}%
diff --git a/application/src/components/servers/ServerSystemInfoCard.tsx b/application/src/components/servers/ServerSystemInfoCard.tsx
new file mode 100644
index 0000000..893b60d
--- /dev/null
+++ b/application/src/components/servers/ServerSystemInfoCard.tsx
@@ -0,0 +1,112 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Server, Monitor, Cpu, HardDrive, DatabaseIcon, InfoIcon } from "lucide-react";
+import { Server as ServerType } from "@/types/server.types";
+
+interface ServerSystemInfoCardProps {
+  server: ServerType;
+}
+
+export function ServerSystemInfoCard({ server }: ServerSystemInfoCardProps) {
+  // Parse system_info if it's a string
+  let systemInfo: any = {};
+  if (server.system_info) {
+    try {
+      systemInfo = typeof server.system_info === 'string' 
+        ? JSON.parse(server.system_info) 
+        : server.system_info;
+    } catch (error) {
+      console.log('Error parsing system_info:', error);
+    }
+  }
+
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatUptime = (uptimeSeconds: string | number) => {
+    const seconds = typeof uptimeSeconds === 'string' ? parseInt(uptimeSeconds) : uptimeSeconds;
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  };
+
+  // Format the detailed system info string
+  const getDetailedSystemInfo = () => {
+    if (typeof server.system_info === 'string' && server.system_info.includes('|')) {
+      // If system_info is already in the detailed format, return it
+      return server.system_info;
+    }
+    
+    // Otherwise, build the detailed string from available data
+    const parts = [];
+    
+    // Basic server info
+    parts.push(server.hostname || 'Unknown');
+    parts.push(server.ip_address || 'Unknown IP');
+    parts.push(server.os_type || 'Unknown OS');
+    
+    // Parse additional info from system_info if available
+    if (systemInfo.OSName) {
+      parts.push(systemInfo.OSName + (systemInfo.OSVersion ? ` ${systemInfo.OSVersion}` : ''));
+    }
+    
+    if (systemInfo.Architecture) {
+      parts.push(`| ${systemInfo.Architecture}`);
+    }
+    
+    if (systemInfo.KernelVersion) {
+      parts.push(`| Kernel: ${systemInfo.KernelVersion}`);
+    }
+    
+    if (systemInfo.CPUModel) {
+      parts.push(`| CPU: ${systemInfo.CPUModel} (${server.cpu_cores || 0} cores)`);
+    } else if (server.cpu_cores) {
+      parts.push(`| CPU: ${server.cpu_cores} cores`);
+    }
+    
+    if (server.ram_total) {
+      parts.push(`| RAM: ${formatBytes(server.ram_total)}`);
+    }
+    
+    if (systemInfo.GoVersion) {
+      parts.push(`| Go ${systemInfo.GoVersion}`);
+    }
+    
+    if (systemInfo.IPAddress && systemInfo.IPAddress !== server.ip_address) {
+      parts.push(`| IP: ${systemInfo.IPAddress}`);
+    }
+    
+    // Check for Docker info
+    const dockerInfo = server.docker || systemInfo.Docker;
+    if (dockerInfo !== undefined) {
+      parts.push(`| Docker: ${dockerInfo}`);
+    }
+    
+    return parts.join(' • ').replace(/• \|/g, '|');
+  };
+
+  return (
+    <Card className="bg-card/50 backdrop-blur-sm border-border/50 max-w-md">
+      <CardContent className="p-4">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="h-6 w-6 rounded bg-primary/10 flex items-center justify-center">
+            <InfoIcon className="h-3 w-3 text-primary" />
+          </div>
+          <h3 className="text-sm font-medium">System Information</h3>
+        </div>
+        
+        <div className="text-xs text-muted-foreground leading-relaxed break-all">
+          {getDetailedSystemInfo()}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/application/src/pages/ServerDetail.tsx b/application/src/pages/ServerDetail.tsx
index 4e7fdd1..6522f3a 100644
--- a/application/src/pages/ServerDetail.tsx
+++ b/application/src/pages/ServerDetail.tsx
@@ -14,6 +14,7 @@ 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";
+import { ServerSystemInfoCard } from "@/components/servers/ServerSystemInfoCard";
 
 const ServerDetail = () => {
   const { serverId } = useParams();
@@ -136,14 +137,18 @@ const ServerDetail = () => {
                     Monitor server performance metrics and system health
                     {server && (
                       <span className="block text-xs text-foreground/80 mt-1">
-                        {server.hostname} • {server.ip_address} • {server.os_type} • {server.system_info} 
+                        {server.hostname} • {server.ip_address} • {server.os_type}
                       </span>
                       
                     )}
                   </p>
-                  
-                  
                 </div>
+                  {/* System Info Card */}
+                {server && (
+                  <div className="flex-shrink-0">
+                    <ServerSystemInfoCard server={server} />
+                  </div>
+                )}
               </div>
             </div>
 

From 5d2b8b2ed20ce0fa6ed56437f0bd1a387cd5283a Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sun, 6 Jul 2025 15:12:03 +0700
Subject: [PATCH 3/8] Refactor: Split ServerHistory and Charts into smaller
 components

---
 .../servers/ServerHistoryCharts.tsx           | 494 ++----------------
 .../servers/ServerMetricsCharts.tsx           |  19 +-
 .../components/servers/charts/CPUChart.tsx    |  83 +++
 .../components/servers/charts/CPUCharts.tsx   | 141 -----
 .../components/servers/charts/DiskChart.tsx   |  83 +++
 .../components/servers/charts/DiskCharts.tsx  | 138 -----
 .../components/servers/charts/MemoryChart.tsx |  83 +++
 .../servers/charts/MemoryCharts.tsx           | 138 -----
 .../servers/charts/NetworkChart.tsx           | 102 ++++
 .../servers/charts/NetworkCharts.tsx          | 140 -----
 .../servers/charts/TimeRangeSelector.tsx      |  11 +-
 .../components/servers/charts/chartConfig.ts  |  34 --
 .../components/servers/charts/dataUtils.ts    | 115 ++--
 .../charts/hooks/useServerHistoryData.ts      |  45 ++
 .../tooltips/DetailedTooltipContent.tsx       |  65 +++
 .../charts/tooltips/NetworkTooltipContent.tsx |  48 ++
 16 files changed, 662 insertions(+), 1077 deletions(-)
 create mode 100644 application/src/components/servers/charts/CPUChart.tsx
 delete mode 100644 application/src/components/servers/charts/CPUCharts.tsx
 create mode 100644 application/src/components/servers/charts/DiskChart.tsx
 delete mode 100644 application/src/components/servers/charts/DiskCharts.tsx
 create mode 100644 application/src/components/servers/charts/MemoryChart.tsx
 delete mode 100644 application/src/components/servers/charts/MemoryCharts.tsx
 create mode 100644 application/src/components/servers/charts/NetworkChart.tsx
 delete mode 100644 application/src/components/servers/charts/NetworkCharts.tsx
 delete mode 100644 application/src/components/servers/charts/chartConfig.ts
 create mode 100644 application/src/components/servers/charts/hooks/useServerHistoryData.ts
 create mode 100644 application/src/components/servers/charts/tooltips/DetailedTooltipContent.tsx
 create mode 100644 application/src/components/servers/charts/tooltips/NetworkTooltipContent.tsx

diff --git a/application/src/components/servers/ServerHistoryCharts.tsx b/application/src/components/servers/ServerHistoryCharts.tsx
index 870b0ee..22dcfc9 100644
--- a/application/src/components/servers/ServerHistoryCharts.tsx
+++ b/application/src/components/servers/ServerHistoryCharts.tsx
@@ -1,163 +1,37 @@
-import { useQuery } from "@tanstack/react-query";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts";
-import { serverService } from "@/services/serverService";
-import { Loader2, TrendingUp, Cpu, HardDrive, Wifi, MemoryStick } from "lucide-react";
-import { useTheme } from "@/contexts/ThemeContext";
+
+import { useMemo } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Loader2, TrendingUp } from "lucide-react";
 import { TimeRangeSelector } from "./charts/TimeRangeSelector";
-import { useState } from "react";
-import { formatChartData, filterMetricsByTimeRange, formatBytes } from "./charts/dataUtils";
+import { useServerHistoryData } from "./charts/hooks/useServerHistoryData";
+import { CPUChart } from "./charts/CPUChart";
+import { MemoryChart } from "./charts/MemoryChart";
+import { DiskChart } from "./charts/DiskChart";
+import { NetworkChart } from "./charts/NetworkChart";
 
 interface ServerHistoryChartsProps {
   serverId: string;
 }
 
-type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
-
 export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
-  const { theme } = useTheme();
-  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
-
-  console.log('ServerHistoryCharts: Rendering with serverId:', serverId);
-
   const {
-    data: metrics = [],
+    timeRange,
+    setTimeRange,
+    metrics,
+    chartData,
     isLoading,
-    error
-  } = useQuery({
-    queryKey: ['server-metrics-history', serverId, timeRange],
-    queryFn: async () => {
-      console.log('ServerHistoryCharts: Fetching metrics for serverId:', serverId, 'timeRange:', timeRange);
-      const result = await serverService.getServerMetrics(serverId, timeRange);
-      console.log('ServerHistoryCharts: Raw metrics result for timeRange', timeRange, ':', result?.length || 0, 'records');
-      console.log('ServerHistoryCharts: First 3 records:', result?.slice(0, 3));
-      return result;
-    },
-    enabled: !!serverId,
-    refetchInterval: 60000,
-    retry: 1
-  });
-
-  console.log('ServerHistoryCharts: Query state:', { 
-    metricsCount: metrics.length, 
-    isLoading, 
-    error: error?.message,
-    firstMetric: metrics[0],
-    serverId,
-    timeRange
-  });
+    error,
+    isFetching
+  } = useServerHistoryData(serverId);
 
-  console.log('ServerHistoryCharts: About to format chart data with', metrics?.length || 0, 'metrics for timeRange:', timeRange);
-  const chartData = formatChartData(metrics, timeRange);
-  console.log('ServerHistoryCharts: After formatting, got', chartData?.length || 0, 'chart data points');
-
-  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
-  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
-
-  // Custom tooltip content with detailed information and full date/time
-  const DetailedTooltipContent = ({ active, payload, label }: any) => {
-    if (active && payload && payload.length) {
-      const data = payload[0]?.payload;
-      return (
-        <div className="bg-popover/95 border border-border backdrop-blur-sm rounded-lg p-3 shadow-lg">
-          <p className="font-medium text-popover-foreground mb-2">{label}</p>
-          {data?.fullTimestamp && (
-            <p className="text-xs text-muted-foreground mb-2">
-              {new Date(data.fullTimestamp).toLocaleString('en-US', {
-                weekday: 'short',
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-              })}
-            </p>
-          )}
-          {payload.map((entry: any, index: number) => {
-            const data = entry.payload;
-            return (
-              <div key={index} className="space-y-1">
-                <div className="flex items-center gap-2">
-                  <div 
-                    className="w-3 h-3 rounded-full" 
-                    style={{ backgroundColor: entry.color }}
-                  />
-                  <span className="text-sm font-medium">{entry.name}: {entry.value}%</span>
-                </div>
-                {entry.dataKey === 'cpuUsage' && (
-                  <div className="text-xs text-muted-foreground ml-5">
-                    <div>CPU Cores: {data.cpuCores}</div>
-                    <div>Free: {data.cpuFree}%</div>
-                  </div>
-                )}
-                {entry.dataKey === 'ramUsagePercent' && (
-                  <div className="text-xs text-muted-foreground ml-5">
-                    <div>Used: {data.ramUsed}</div>
-                    <div>Total: {data.ramTotal}</div>
-                    <div>Free: {data.ramFree}</div>
-                  </div>
-                )}
-                {entry.dataKey === 'diskUsagePercent' && (
-                  <div className="text-xs text-muted-foreground ml-5">
-                    <div>Used: {data.diskUsed}</div>
-                    <div>Total: {data.diskTotal}</div>
-                    <div>Free: {data.diskFree}</div>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      );
-    }
-    return null;
-  };
+  console.log('ServerHistoryCharts: Rendering with serverId:', serverId, 'timeRange:', timeRange);
 
-  // Network tooltip with detailed info and full date/time
-  const NetworkTooltipContent = ({ active, payload, label }: any) => {
-    if (active && payload && payload.length) {
-      const data = payload[0]?.payload;
-      return (
-        <div className="bg-popover/95 border border-border backdrop-blur-sm rounded-lg p-3 shadow-lg">
-          <p className="font-medium text-popover-foreground mb-2">{label}</p>
-          {data?.fullTimestamp && (
-            <p className="text-xs text-muted-foreground mb-2">
-              {new Date(data.fullTimestamp).toLocaleString('en-US', {
-                weekday: 'short',
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-              })}
-            </p>
-          )}
-          {payload.map((entry: any, index: number) => (
-            <div key={index} className="flex items-center gap-2 mb-1">
-              <div 
-                className="w-3 h-3 rounded-full" 
-                style={{ backgroundColor: entry.color }}
-              />
-              <span className="text-sm font-medium">
-                {entry.name}: {entry.dataKey.includes('Speed') ? `${entry.value} KB/s` : formatBytes(entry.value)}
-              </span>
-            </div>
-          ))}
-          {data && (
-            <div className="text-xs text-muted-foreground mt-2 pt-2 border-t border-border">
-              <div>Total RX: {data.networkRx}</div>
-              <div>Total TX: {data.networkTx}</div>
-            </div>
-          )}
-        </div>
-      );
-    }
-    return null;
-  };
+  // Memoize latest data calculation to prevent unnecessary recalculations
+  const latestData = useMemo(() => {
+    return chartData.length > 0 ? chartData[chartData.length - 1] : null;
+  }, [chartData]);
 
+  // Show skeleton loading state for better UX
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -165,22 +39,28 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             <h2 className="text-lg font-medium">Historical Performance</h2>
-            <Loader2 className="h-4 w-4 animate-spin ml-2" />
+            <div className="flex items-center gap-2 ml-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-xs text-muted-foreground">Loading...</span>
+            </div>
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
         </div>
+        
+        {/* Skeleton loading cards */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {[1, 2, 3, 4].map((index) => (
-            <Card key={index}>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <div className="h-5 w-5 bg-muted animate-pulse rounded" />
-                  <div className="h-4 w-32 bg-muted animate-pulse rounded" />
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-center h-80">
-                  <div className="h-4 w-full bg-muted animate-pulse rounded" />
+            <Card key={index} className="bg-gradient-to-br from-background to-muted/20">
+              <CardContent className="p-6">
+                <div className="animate-pulse">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-muted rounded-lg"></div>
+                      <div className="w-24 h-5 bg-muted rounded"></div>
+                    </div>
+                    <div className="w-16 h-4 bg-muted rounded"></div>
+                  </div>
+                  <div className="w-full h-80 bg-muted rounded"></div>
                 </div>
               </CardContent>
             </Card>
@@ -198,6 +78,7 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             <h2 className="text-lg font-medium">Historical Performance</h2>
+            {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
         </div>
@@ -206,7 +87,7 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
             <div className="text-center">
               <p className="text-muted-foreground">Error loading chart data</p>
               <p className="text-xs mt-2 font-mono text-red-500">{error?.message}</p>
-              <p className="text-xs mt-1 text-muted-foreground">Server ID: {serverId}</p>
+              <p className="text-xs mt-1 text-muted-foreground">Server ID: {serverId} • Time Range: {timeRange}</p>
             </div>
           </CardContent>
         </Card>
@@ -221,6 +102,7 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
           <div className="flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             <h2 className="text-lg font-medium">Historical Performance</h2>
+            {isFetching && <Loader2 className="h-4 w-4 animate-spin ml-2" />}
           </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
         </div>
@@ -229,9 +111,9 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
             <div className="text-center">
               <p className="text-muted-foreground">No historical data available for {timeRange}</p>
               <p className="text-xs mt-2">Raw metrics count: {metrics.length}</p>
-              <p className="text-xs mt-1">Server ID: {serverId}</p>
+              <p className="text-xs mt-1">Server ID: {serverId} • Time Range: {timeRange}</p>
               <p className="text-xs mt-1 text-muted-foreground">
-                {metrics.length > 0 ? 'Data exists but filtered out by time range' : 'No metrics data found'}
+                {metrics.length > 0 ? 'Data exists but may be outside selected time range' : 'No metrics data found'}
               </p>
             </div>
           </CardContent>
@@ -242,291 +124,31 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
 
   console.log('ServerHistoryCharts: Rendering charts with', chartData.length, 'data points for time range:', timeRange);
 
-  // Calculate summary stats from latest data point
-  const latestData = chartData[chartData.length - 1];
-
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <TrendingUp className="h-5 w-5" />
           <h2 className="text-lg font-medium">Historical Performance</h2>
-          <span className="text-xs text-muted-foreground">({chartData.length} data points • {timeRange})</span>
+          <span className="text-xs text-muted-foreground">
+            ({chartData.length} data points • {timeRange})
+            {isFetching && (
+              <span className="inline-flex items-center gap-1 ml-2">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                <span className="text-blue-500">Updating...</span>
+              </span>
+            )}
+          </span>
         </div>
         <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
       </div>
 
+      {/* Use CSS Grid for better performance than flexbox */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* CPU Usage Chart - Smooth Area Chart with Blue Gradient */}
-        <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between text-foreground">
-              <div className="flex items-center gap-2">
-                <div className="p-2 rounded-lg bg-blue-500/15">
-                  <Cpu className="h-5 w-5 text-blue-500" />
-                </div>
-                CPU Usage
-              </div>
-              {latestData && (
-                <div className="text-right text-sm">
-                  <div className="text-blue-500 font-semibold">{latestData.cpuUsage}%</div>
-                  <div className="text-xs text-muted-foreground">{latestData.cpuCores} cores</div>
-                </div>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-2">
-            <ChartContainer config={{
-              cpuUsage: {
-                label: "CPU Usage (%)",
-                color: theme === 'dark' ? "#3b82f6" : "#2563eb",
-              }
-            }} className="h-80">
-              <AreaChart data={chartData}>
-                <defs>
-                  <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor={theme === 'dark' ? "#3b82f6" : "#2563eb"} stopOpacity={0.4}/>
-                    <stop offset="95%" stopColor={theme === 'dark' ? "#1e40af" : "#1d4ed8"} stopOpacity={0.1}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-                <XAxis 
-                  dataKey="timestamp" 
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                />
-                <YAxis 
-                  domain={[0, 100]}
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                  label={{ value: 'CPU %', angle: -90, position: 'insideLeft' }}
-                />
-                <ChartTooltip 
-                  content={<DetailedTooltipContent />}
-                  cursor={{ stroke: getGridColor() }}
-                />
-                <Area 
-                  type="monotone" 
-                  dataKey="cpuUsage" 
-                  stroke={theme === 'dark' ? "#60a5fa" : "#2563eb"}
-                  strokeWidth={3}
-                  dot={false}
-                  fill="url(#cpuGradient)"
-                  fillOpacity={1}
-                  name="CPU Usage (%)"
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-
-        {/* Memory Usage Chart - Basis Area Chart with Green Gradient */}
-        <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between text-foreground">
-              <div className="flex items-center gap-2">
-                <div className="p-2 rounded-lg bg-green-500/15">
-                  <MemoryStick className="h-5 w-5 text-green-500" />
-                </div>
-                Memory Usage
-              </div>
-              {latestData && (
-                <div className="text-right text-sm">
-                  <div className="text-green-500 font-semibold">{latestData.ramUsagePercent}%</div>
-                  <div className="text-xs text-muted-foreground">{latestData.ramUsed} / {latestData.ramTotal}</div>
-                </div>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-2">
-            <ChartContainer config={{
-              ramUsagePercent: {
-                label: "Memory Usage (%)",
-                color: theme === 'dark' ? "#10b981" : "#059669",
-              }
-            }} className="h-80">
-              <AreaChart data={chartData}>
-                <defs>
-                  <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor={theme === 'dark' ? "#10b981" : "#059669"} stopOpacity={0.5}/>
-                    <stop offset="95%" stopColor={theme === 'dark' ? "#047857" : "#065f46"} stopOpacity={0.1}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-                <XAxis 
-                  dataKey="timestamp" 
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                />
-                <YAxis 
-                  domain={[0, 100]}
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                  label={{ value: 'Memory %', angle: -90, position: 'insideLeft' }}
-                />
-                <ChartTooltip 
-                  content={<DetailedTooltipContent />}
-                  cursor={{ stroke: getGridColor() }}
-                />
-                <Area 
-                  type="basis" 
-                  dataKey="ramUsagePercent" 
-                  stroke={theme === 'dark' ? "#34d399" : "#059669"}
-                  strokeWidth={3}
-                  dot={false}
-                  fill="url(#memoryGradient)"
-                  fillOpacity={1}
-                  name="Memory Usage (%)"
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-
-        {/* Disk Usage Chart - Stepped Area Chart with Orange Gradient */}
-        <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between text-foreground">
-              <div className="flex items-center gap-2">
-                <div className="p-2 rounded-lg bg-amber-500/15">
-                  <HardDrive className="h-5 w-5 text-amber-500" />
-                </div>
-                Disk Usage
-              </div>
-              {latestData && (
-                <div className="text-right text-sm">
-                  <div className="text-amber-500 font-semibold">{latestData.diskUsagePercent}%</div>
-                  <div className="text-xs text-muted-foreground">{latestData.diskUsed} / {latestData.diskTotal}</div>
-                </div>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-2">
-            <ChartContainer config={{
-              diskUsagePercent: {
-                label: "Disk Usage (%)",
-                color: theme === 'dark' ? "#f59e0b" : "#d97706",
-              }
-            }} className="h-80">
-              <AreaChart data={chartData}>
-                <defs>
-                  <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor={theme === 'dark' ? "#f59e0b" : "#d97706"} stopOpacity={0.6}/>
-                    <stop offset="95%" stopColor={theme === 'dark' ? "#d97706" : "#b45309"} stopOpacity={0.1}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-                <XAxis 
-                  dataKey="timestamp" 
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                />
-                <YAxis 
-                  domain={[0, 100]}
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                  label={{ value: 'Disk %', angle: -90, position: 'insideLeft' }}
-                />
-                <ChartTooltip 
-                  content={<DetailedTooltipContent />}
-                  cursor={{ stroke: getGridColor() }}
-                />
-                <Area 
-                  type="step" 
-                  dataKey="diskUsagePercent" 
-                  stroke={theme === 'dark' ? "#fbbf24" : "#d97706"}
-                  strokeWidth={3}
-                  dot={false}
-                  fill="url(#diskGradient)"
-                  fillOpacity={1}
-                  name="Disk Usage (%)"
-                />
-              </AreaChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-
-        {/* Network Traffic Chart - Dual Line Chart with Purple/Red Theme */}
-        <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between text-foreground">
-              <div className="flex items-center gap-2">
-                <div className="p-2 rounded-lg bg-purple-500/15">
-                  <Wifi className="h-5 w-5 text-purple-500" />
-                </div>
-                Network Traffic
-              </div>
-              {latestData && (
-                <div className="text-right text-sm">
-                  <div className="text-purple-500 font-semibold">{latestData.networkRxSpeed} KB/s ↓</div>
-                  <div className="text-red-500 font-semibold">{latestData.networkTxSpeed} KB/s ↑</div>
-                </div>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-2">
-            <ChartContainer config={{
-              networkRxSpeed: {
-                label: "RX Speed",
-                color: theme === 'dark' ? "#8b5cf6" : "#7c3aed",
-              },
-              networkTxSpeed: {
-                label: "TX Speed", 
-                color: theme === 'dark' ? "#ef4444" : "#dc2626",
-              }
-            }} className="h-80">
-              <LineChart data={chartData}>
-                <defs>
-                  <linearGradient id="networkGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor={theme === 'dark' ? "#8b5cf6" : "#7c3aed"} stopOpacity={0.2}/>
-                    <stop offset="95%" stopColor={theme === 'dark' ? "#7c3aed" : "#6d28d9"} stopOpacity={0.05}/>
-                  </linearGradient>
-                  <filter id="glow">
-                    <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
-                    <feMerge> 
-                      <feMergeNode in="coloredBlur"/>
-                      <feMergeNode in="SourceGraphic"/>
-                    </feMerge>
-                  </filter>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-                <XAxis 
-                  dataKey="timestamp" 
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                />
-                <YAxis 
-                  tick={{ fontSize: 10, fill: getAxisColor() }}
-                  axisLine={{ stroke: getGridColor() }}
-                  label={{ value: 'Network Speed (KB/s)', angle: -90, position: 'insideLeft' }}
-                />
-                <ChartTooltip 
-                  content={<NetworkTooltipContent />}
-                  cursor={{ stroke: getGridColor() }}
-                />
-                <Line 
-                  type="monotone" 
-                  dataKey="networkRxSpeed" 
-                  stroke={theme === 'dark' ? "#a78bfa" : "#7c3aed"}
-                  strokeWidth={3}
-                  dot={false}
-                  name="RX Speed"
-                  filter="url(#glow)"
-                  strokeDasharray="0"
-                />
-                <Line 
-                  type="monotone" 
-                  dataKey="networkTxSpeed" 
-                  stroke={theme === 'dark' ? "#f87171" : "#dc2626"}
-                  strokeWidth={3}
-                  dot={false}
-                  name="TX Speed"
-                  strokeDasharray="5 5"
-                />
-              </LineChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
+        <CPUChart data={chartData} latestData={latestData} />
+        <MemoryChart data={chartData} latestData={latestData} />
+        <DiskChart data={chartData} latestData={latestData} />
+        <NetworkChart data={chartData} latestData={latestData} />
       </div>
     </div>
   );
diff --git a/application/src/components/servers/ServerMetricsCharts.tsx b/application/src/components/servers/ServerMetricsCharts.tsx
index 31fc7e0..a3fa10c 100644
--- a/application/src/components/servers/ServerMetricsCharts.tsx
+++ b/application/src/components/servers/ServerMetricsCharts.tsx
@@ -6,10 +6,10 @@ import { serverService } from "@/services/serverService";
 import { Loader2, Cpu, HardDrive, Network, MemoryStick } from "lucide-react";
 import { formatChartData } from "./charts/dataUtils";
 import { TimeRangeSelector } from "./charts/TimeRangeSelector";
-import { CPUCharts } from "./charts/CPUCharts";
-import { MemoryCharts } from "./charts/MemoryCharts";
-import { DiskCharts } from "./charts/DiskCharts";
-import { NetworkCharts } from "./charts/NetworkCharts";
+import { CPUChart } from "./charts/CPUChart";
+import { MemoryChart } from "./charts/MemoryChart";
+import { DiskChart } from "./charts/DiskChart";
+import { NetworkChart } from "./charts/NetworkChart";
 
 interface ServerMetricsChartsProps {
   serverId: string;
@@ -58,6 +58,9 @@ export const ServerMetricsCharts = ({ serverId }: ServerMetricsChartsProps) => {
     );
   }
 
+  // Calculate latest data for each chart
+  const latestData = chartData[chartData.length - 1];
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -89,19 +92,19 @@ export const ServerMetricsCharts = ({ serverId }: ServerMetricsChartsProps) => {
         </TabsList>
 
         <TabsContent value="cpu" className="space-y-4 mt-6">
-          <CPUCharts data={chartData} />
+          <CPUChart data={chartData} latestData={latestData} />
         </TabsContent>
 
         <TabsContent value="memory" className="space-y-4 mt-6">
-          <MemoryCharts data={chartData} />
+          <MemoryChart data={chartData} latestData={latestData} />
         </TabsContent>
 
         <TabsContent value="disk" className="space-y-4 mt-6">
-          <DiskCharts data={chartData} />
+          <DiskChart data={chartData} latestData={latestData} />
         </TabsContent>
 
         <TabsContent value="network" className="space-y-4 mt-6">
-          <NetworkCharts data={chartData} />
+          <NetworkChart data={chartData} latestData={latestData} />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/application/src/components/servers/charts/CPUChart.tsx b/application/src/components/servers/charts/CPUChart.tsx
new file mode 100644
index 0000000..c5fb013
--- /dev/null
+++ b/application/src/components/servers/charts/CPUChart.tsx
@@ -0,0 +1,83 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { Cpu } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
+
+interface CPUChartProps {
+  data: any[];
+  latestData?: any;
+}
+
+export const CPUChart = ({ data, latestData }: CPUChartProps) => {
+  const { theme } = useTheme();
+
+  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
+  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
+
+  return (
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center justify-between text-foreground">
+          <div className="flex items-center gap-2">
+            <div className="p-2 rounded-lg bg-blue-500/15">
+              <Cpu className="h-5 w-5 text-blue-500" />
+            </div>
+            CPU Usage
+          </div>
+          {latestData && (
+            <div className="text-right text-sm">
+              <div className="text-blue-500 font-semibold">{latestData.cpuUsage}%</div>
+              <div className="text-xs text-muted-foreground">{latestData.cpuCores} cores</div>
+            </div>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <ChartContainer config={{
+          cpuUsage: {
+            label: "CPU Usage (%)",
+            color: theme === 'dark' ? "#3b82f6" : "#2563eb",
+          }
+        }} className="h-80">
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={theme === 'dark' ? "#3b82f6" : "#2563eb"} stopOpacity={0.4}/>
+                <stop offset="95%" stopColor={theme === 'dark' ? "#1e40af" : "#1d4ed8"} stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+            <XAxis 
+              dataKey="timestamp" 
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+            />
+            <YAxis 
+              domain={[0, 100]}
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+              label={{ value: 'CPU %', angle: -90, position: 'insideLeft' }}
+            />
+            <ChartTooltip 
+              content={<DetailedTooltipContent />}
+              cursor={{ stroke: getGridColor() }}
+            />
+            <Area 
+              type="monotone" 
+              dataKey="cpuUsage" 
+              stroke={theme === 'dark' ? "#60a5fa" : "#2563eb"}
+              strokeWidth={3}
+              dot={false}
+              fill="url(#cpuGradient)"
+              fillOpacity={1}
+              name="CPU Usage (%)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/CPUCharts.tsx b/application/src/components/servers/charts/CPUCharts.tsx
deleted file mode 100644
index db9f3f4..0000000
--- a/application/src/components/servers/charts/CPUCharts.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
-import { Cpu } from "lucide-react";
-import { useChartConfig } from "./chartConfig";
-import { formatBytes } from "./dataUtils";
-
-interface CPUChartsProps {
-  data: any[];
-}
-
-export const CPUCharts = ({ data }: CPUChartsProps) => {
-  const { chartConfig, getGridColor, getAxisColor } = useChartConfig();
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-blue-500/10 border border-blue-500/20">
-              <Cpu className="h-4 w-4 text-blue-500" />
-            </div>
-            CPU Usage
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8}/>
-                  <stop offset="50%" stopColor="#60a5fa" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#93c5fd" stopOpacity={0.1}/>
-                </linearGradient>
-                <filter id="glow">
-                  <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
-                  <feMerge> 
-                    <feMergeNode in="coloredBlur"/>
-                    <feMergeNode in="SourceGraphic"/>
-                  </feMerge>
-                </filter>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                domain={[0, 100]}
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#3b82f6', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="cpuUsage" 
-                stroke="#3b82f6"
-                strokeWidth={3}
-                fill="url(#cpuGradient)"
-                dot={false}
-                name="CPU Usage (%)"
-                filter="url(#glow)"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-blue-500/10 border border-blue-500/20">
-              <Cpu className="h-4 w-4 text-blue-500" />
-            </div>
-            CPU Usage Distribution
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="cpuUsedGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.9}/>
-                  <stop offset="100%" stopColor="#1e40af" stopOpacity={0.3}/>
-                </linearGradient>
-                <linearGradient id="cpuFreeGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#94a3b8" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#64748b" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                domain={[0, 100]}
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#3b82f6', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="cpuFree" 
-                stackId="1"
-                stroke="#64748b"
-                strokeWidth={2}
-                fill="url(#cpuFreeGradient)"
-                name="CPU Available (%)"
-              />
-              <Area 
-                type="monotone" 
-                dataKey="cpuUsage" 
-                stackId="1"
-                stroke="#3b82f6"
-                strokeWidth={3}
-                fill="url(#cpuUsedGradient)"
-                name="CPU Usage (%)"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/DiskChart.tsx b/application/src/components/servers/charts/DiskChart.tsx
new file mode 100644
index 0000000..da82c15
--- /dev/null
+++ b/application/src/components/servers/charts/DiskChart.tsx
@@ -0,0 +1,83 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { HardDrive } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
+
+interface DiskChartProps {
+  data: any[];
+  latestData?: any;
+}
+
+export const DiskChart = ({ data, latestData }: DiskChartProps) => {
+  const { theme } = useTheme();
+
+  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
+  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
+
+  return (
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center justify-between text-foreground">
+          <div className="flex items-center gap-2">
+            <div className="p-2 rounded-lg bg-amber-500/15">
+              <HardDrive className="h-5 w-5 text-amber-500" />
+            </div>
+            Disk Usage
+          </div>
+          {latestData && (
+            <div className="text-right text-sm">
+              <div className="text-amber-500 font-semibold">{latestData.diskUsagePercent}%</div>
+              <div className="text-xs text-muted-foreground">{latestData.diskUsed} / {latestData.diskTotal}</div>
+            </div>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <ChartContainer config={{
+          diskUsagePercent: {
+            label: "Disk Usage (%)",
+            color: theme === 'dark' ? "#f59e0b" : "#d97706",
+          }
+        }} className="h-80">
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={theme === 'dark' ? "#f59e0b" : "#d97706"} stopOpacity={0.6}/>
+                <stop offset="95%" stopColor={theme === 'dark' ? "#d97706" : "#b45309"} stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+            <XAxis 
+              dataKey="timestamp" 
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+            />
+            <YAxis 
+              domain={[0, 100]}
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+              label={{ value: 'Disk %', angle: -90, position: 'insideLeft' }}
+            />
+            <ChartTooltip 
+              content={<DetailedTooltipContent />}
+              cursor={{ stroke: getGridColor() }}
+            />
+            <Area 
+              type="step" 
+              dataKey="diskUsagePercent" 
+              stroke={theme === 'dark' ? "#fbbf24" : "#d97706"}
+              strokeWidth={3}
+              dot={false}
+              fill="url(#diskGradient)"
+              fillOpacity={1}
+              name="Disk Usage (%)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/DiskCharts.tsx b/application/src/components/servers/charts/DiskCharts.tsx
deleted file mode 100644
index 1b6bf07..0000000
--- a/application/src/components/servers/charts/DiskCharts.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
-import { HardDrive } from "lucide-react";
-import { useChartConfig } from "./chartConfig";
-import { formatBytes } from "./dataUtils";
-
-interface DiskChartsProps {
-  data: any[];
-}
-
-export const DiskCharts = ({ data }: DiskChartsProps) => {
-  const { chartConfig, getGridColor, getAxisColor } = useChartConfig();
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-amber-500/5 via-transparent to-orange-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
-              <HardDrive className="h-4 w-4 text-amber-500" />
-            </div>
-            Disk Usage
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#f59e0b" stopOpacity={0.8}/>
-                  <stop offset="50%" stopColor="#fbbf24" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#fcd34d" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                domain={[0, 100]}
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#f59e0b', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="diskUsagePercent" 
-                stroke="#f59e0b"
-                strokeWidth={3}
-                fill="url(#diskGradient)"
-                dot={false}
-                name="Disk Usage (%)"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-amber-500/5 via-transparent to-yellow-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
-              <HardDrive className="h-4 w-4 text-amber-500" />
-            </div>
-            Disk Usage (Bytes)
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="diskUsedGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#f59e0b" stopOpacity={0.9}/>
-                  <stop offset="100%" stopColor="#d97706" stopOpacity={0.3}/>
-                </linearGradient>
-                <linearGradient id="diskTotalGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#94a3b8" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#64748b" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-                tickFormatter={(value) => formatBytes(value)}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#f59e0b', strokeWidth: 2, strokeOpacity: 0.5 }}
-                formatter={(value, name) => [
-                  name === 'Used Disk' ? formatBytes(Number(value)) : 
-                  name === 'Total Disk' ? formatBytes(Number(value)) : value,
-                  name
-                ]}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="diskTotalBytes" 
-                stackId="1"
-                stroke="#64748b"
-                strokeWidth={2}
-                fill="url(#diskTotalGradient)"
-                name="Total Disk"
-              />
-              <Area 
-                type="monotone" 
-                dataKey="diskUsedBytes" 
-                stackId="1"
-                stroke="#f59e0b"
-                strokeWidth={3}
-                fill="url(#diskUsedGradient)"
-                name="Used Disk"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/MemoryChart.tsx b/application/src/components/servers/charts/MemoryChart.tsx
new file mode 100644
index 0000000..a0abd7b
--- /dev/null
+++ b/application/src/components/servers/charts/MemoryChart.tsx
@@ -0,0 +1,83 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { MemoryStick } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
+
+interface MemoryChartProps {
+  data: any[];
+  latestData?: any;
+}
+
+export const MemoryChart = ({ data, latestData }: MemoryChartProps) => {
+  const { theme } = useTheme();
+
+  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
+  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
+
+  return (
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center justify-between text-foreground">
+          <div className="flex items-center gap-2">
+            <div className="p-2 rounded-lg bg-green-500/15">
+              <MemoryStick className="h-5 w-5 text-green-500" />
+            </div>
+            Memory Usage
+          </div>
+          {latestData && (
+            <div className="text-right text-sm">
+              <div className="text-green-500 font-semibold">{latestData.ramUsagePercent}%</div>
+              <div className="text-xs text-muted-foreground">{latestData.ramUsed} / {latestData.ramTotal}</div>
+            </div>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <ChartContainer config={{
+          ramUsagePercent: {
+            label: "Memory Usage (%)",
+            color: theme === 'dark' ? "#10b981" : "#059669",
+          }
+        }} className="h-80">
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={theme === 'dark' ? "#10b981" : "#059669"} stopOpacity={0.5}/>
+                <stop offset="95%" stopColor={theme === 'dark' ? "#047857" : "#065f46"} stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+            <XAxis 
+              dataKey="timestamp" 
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+            />
+            <YAxis 
+              domain={[0, 100]}
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+              label={{ value: 'Memory %', angle: -90, position: 'insideLeft' }}
+            />
+            <ChartTooltip 
+              content={<DetailedTooltipContent />}
+              cursor={{ stroke: getGridColor() }}
+            />
+            <Area 
+              type="basis" 
+              dataKey="ramUsagePercent" 
+              stroke={theme === 'dark' ? "#34d399" : "#059669"}
+              strokeWidth={3}
+              dot={false}
+              fill="url(#memoryGradient)"
+              fillOpacity={1}
+              name="Memory Usage (%)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/MemoryCharts.tsx b/application/src/components/servers/charts/MemoryCharts.tsx
deleted file mode 100644
index 4c748ce..0000000
--- a/application/src/components/servers/charts/MemoryCharts.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
-import { MemoryStick } from "lucide-react";
-import { useChartConfig } from "./chartConfig";
-import { formatBytes } from "./dataUtils";
-
-interface MemoryChartsProps {
-  data: any[];
-}
-
-export const MemoryCharts = ({ data }: MemoryChartsProps) => {
-  const { chartConfig, getGridColor, getAxisColor } = useChartConfig();
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 via-transparent to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-green-500/10 border border-green-500/20">
-              <MemoryStick className="h-4 w-4 text-green-500" />
-            </div>
-            Memory Usage
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#10b981" stopOpacity={0.8}/>
-                  <stop offset="50%" stopColor="#34d399" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#6ee7b7" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                domain={[0, 100]}
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#10b981', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="ramUsagePercent" 
-                stroke="#10b981"
-                strokeWidth={3}
-                fill="url(#memoryGradient)"
-                dot={false}
-                name="RAM Usage (%)"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 via-transparent to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-green-500/10 border border-green-500/20">
-              <MemoryStick className="h-4 w-4 text-green-500" />
-            </div>
-            Memory Usage (Bytes)
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-80">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="memoryUsedGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#10b981" stopOpacity={0.9}/>
-                  <stop offset="100%" stopColor="#047857" stopOpacity={0.3}/>
-                </linearGradient>
-                <linearGradient id="memoryTotalGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#94a3b8" stopOpacity={0.4}/>
-                  <stop offset="100%" stopColor="#64748b" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-                tickFormatter={(value) => formatBytes(value)}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#10b981', strokeWidth: 2, strokeOpacity: 0.5 }}
-                formatter={(value, name) => [
-                  name === 'Used Memory' ? formatBytes(Number(value)) : 
-                  name === 'Total Memory' ? formatBytes(Number(value)) : value,
-                  name
-                ]}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="ramTotalBytes" 
-                stackId="1"
-                stroke="#64748b"
-                strokeWidth={2}
-                fill="url(#memoryTotalGradient)"
-                name="Total Memory"
-              />
-              <Area 
-                type="monotone" 
-                dataKey="ramUsedBytes" 
-                stackId="1"
-                stroke="#10b981"
-                strokeWidth={3}
-                fill="url(#memoryUsedGradient)"
-                name="Used Memory"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/NetworkChart.tsx b/application/src/components/servers/charts/NetworkChart.tsx
new file mode 100644
index 0000000..cbb25b5
--- /dev/null
+++ b/application/src/components/servers/charts/NetworkChart.tsx
@@ -0,0 +1,102 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts";
+import { Wifi } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+import { NetworkTooltipContent } from "./tooltips/NetworkTooltipContent";
+
+interface NetworkChartProps {
+  data: any[];
+  latestData?: any;
+}
+
+export const NetworkChart = ({ data, latestData }: NetworkChartProps) => {
+  const { theme } = useTheme();
+
+  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
+  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
+
+  return (
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center justify-between text-foreground">
+          <div className="flex items-center gap-2">
+            <div className="p-2 rounded-lg bg-purple-500/15">
+              <Wifi className="h-5 w-5 text-purple-500" />
+            </div>
+            Network Traffic
+          </div>
+          {latestData && (
+            <div className="text-right text-sm">
+              <div className="text-purple-500 font-semibold">{latestData.networkRxSpeed} KB/s ↓</div>
+              <div className="text-red-500 font-semibold">{latestData.networkTxSpeed} KB/s ↑</div>
+            </div>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <ChartContainer config={{
+          networkRxSpeed: {
+            label: "RX Speed",
+            color: theme === 'dark' ? "#8b5cf6" : "#7c3aed",
+          },
+          networkTxSpeed: {
+            label: "TX Speed", 
+            color: theme === 'dark' ? "#ef4444" : "#dc2626",
+          }
+        }} className="h-80">
+          <LineChart data={data}>
+            <defs>
+              <linearGradient id="networkGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={theme === 'dark' ? "#8b5cf6" : "#7c3aed"} stopOpacity={0.2}/>
+                <stop offset="95%" stopColor={theme === 'dark' ? "#7c3aed" : "#6d28d9"} stopOpacity={0.05}/>
+              </linearGradient>
+              <filter id="glow">
+                <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+                <feMerge> 
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+            <XAxis 
+              dataKey="timestamp" 
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+            />
+            <YAxis 
+              tick={{ fontSize: 10, fill: getAxisColor() }}
+              axisLine={{ stroke: getGridColor() }}
+              label={{ value: 'Network Speed (KB/s)', angle: -90, position: 'insideLeft' }}
+            />
+            <ChartTooltip 
+              content={<NetworkTooltipContent />}
+              cursor={{ stroke: getGridColor() }}
+            />
+            <Line 
+              type="monotone" 
+              dataKey="networkRxSpeed" 
+              stroke={theme === 'dark' ? "#a78bfa" : "#7c3aed"}
+              strokeWidth={3}
+              dot={false}
+              name="RX Speed"
+              filter="url(#glow)"
+              strokeDasharray="0"
+            />
+            <Line 
+              type="monotone" 
+              dataKey="networkTxSpeed" 
+              stroke={theme === 'dark' ? "#f87171" : "#dc2626"}
+              strokeWidth={3}
+              dot={false}
+              name="TX Speed"
+              strokeDasharray="5 5"
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/NetworkCharts.tsx b/application/src/components/servers/charts/NetworkCharts.tsx
deleted file mode 100644
index 2ad4c16..0000000
--- a/application/src/components/servers/charts/NetworkCharts.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
-import { Network } from "lucide-react";
-import { useChartConfig } from "./chartConfig";
-
-interface NetworkChartsProps {
-  data: any[];
-}
-
-export const NetworkCharts = ({ data }: NetworkChartsProps) => {
-  const { chartConfig, getGridColor, getAxisColor } = useChartConfig();
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-purple-500/10 border border-purple-500/20">
-              <Network className="h-4 w-4 text-purple-500" />
-            </div>
-            Network Traffic
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-64">
-            <LineChart data={data}>
-              <defs>
-                <linearGradient id="networkRxGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.8}/>
-                  <stop offset="100%" stopColor="#a78bfa" stopOpacity={0.2}/>
-                </linearGradient>
-                <linearGradient id="networkTxGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#ef4444" stopOpacity={0.8}/>
-                  <stop offset="100%" stopColor="#f87171" stopOpacity={0.2}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#8b5cf6', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Line 
-                type="monotone" 
-                dataKey="networkRxBytes" 
-                stroke="url(#networkRxGradient)"
-                strokeWidth={3}
-                name="RX Bytes"
-                dot={false}
-              />
-              <Line 
-                type="monotone" 
-                dataKey="networkTxBytes" 
-                stroke="url(#networkTxGradient)"
-                strokeWidth={3}
-                name="TX Bytes"
-                dot={false}
-              />
-            </LineChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-
-      <Card className="bg-gradient-to-br from-card/90 via-card to-card/80 border-border/50 shadow-xl backdrop-blur-sm overflow-hidden group hover:shadow-2xl transition-all duration-300">
-        <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-violet-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        <CardHeader className="relative">
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <div className="p-2 rounded-lg bg-purple-500/10 border border-purple-500/20">
-              <Network className="h-4 w-4 text-purple-500" />
-            </div>
-            Network Speed (KB/s)
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="relative">
-          <ChartContainer config={chartConfig} className="h-64">
-            <AreaChart data={data}>
-              <defs>
-                <linearGradient id="networkSpeedRxGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.6}/>
-                  <stop offset="100%" stopColor="#a78bfa" stopOpacity={0.1}/>
-                </linearGradient>
-                <linearGradient id="networkSpeedTxGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#ef4444" stopOpacity={0.6}/>
-                  <stop offset="100%" stopColor="#f87171" stopOpacity={0.1}/>
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="1 3" stroke={getGridColor()} opacity={0.3} />
-              <XAxis 
-                dataKey="timestamp" 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <YAxis 
-                tick={{ fontSize: 10, fill: getAxisColor() }}
-                axisLine={false}
-                tickLine={false}
-              />
-              <ChartTooltip 
-                content={<ChartTooltipContent className="bg-popover/95 border-border backdrop-blur-sm" />}
-                cursor={{ stroke: '#8b5cf6', strokeWidth: 2, strokeOpacity: 0.5 }}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="networkRxSpeed" 
-                stroke="#8b5cf6"
-                strokeWidth={3}
-                fill="url(#networkSpeedRxGradient)"
-                name="RX Speed (KB/s)"
-                dot={false}
-              />
-              <Area 
-                type="monotone" 
-                dataKey="networkTxSpeed" 
-                stroke="#ef4444"
-                strokeWidth={3}
-                fill="url(#networkSpeedTxGradient)"
-                name="TX Speed (KB/s)"
-                dot={false}
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/TimeRangeSelector.tsx b/application/src/components/servers/charts/TimeRangeSelector.tsx
index 6847b1c..7a9f5f2 100644
--- a/application/src/components/servers/charts/TimeRangeSelector.tsx
+++ b/application/src/components/servers/charts/TimeRangeSelector.tsx
@@ -1,6 +1,5 @@
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { timeRangeOptions } from "./dataUtils";
 
 type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
 
@@ -9,10 +8,18 @@ interface TimeRangeSelectorProps {
   onChange: (value: TimeRange) => void;
 }
 
+const timeRangeOptions = [
+  { value: '60m' as TimeRange, label: 'Last 60 minutes' },
+  { value: '1d' as TimeRange, label: 'Last 24 hours' },
+  { value: '7d' as TimeRange, label: 'Last 7 days' },
+  { value: '1m' as TimeRange, label: 'Last 30 days' },
+  { value: '3m' as TimeRange, label: 'Last 90 days' },
+];
+
 export const TimeRangeSelector = ({ value, onChange }: TimeRangeSelectorProps) => {
   return (
     <Select value={value} onValueChange={(value: TimeRange) => onChange(value)}>
-      <SelectTrigger className="w-[140px] h-8">
+      <SelectTrigger className="w-[160px] h-8">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
diff --git a/application/src/components/servers/charts/chartConfig.ts b/application/src/components/servers/charts/chartConfig.ts
deleted file mode 100644
index 4f04a5e..0000000
--- a/application/src/components/servers/charts/chartConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-
-import { useTheme } from "@/contexts/ThemeContext";
-
-export const useChartConfig = () => {
-  const { theme } = useTheme();
-
-  const chartConfig = {
-    cpuUsage: {
-      label: "CPU Usage (%)",
-      color: theme === 'dark' ? "#60a5fa" : "#3b82f6",
-    },
-    ramUsagePercent: {
-      label: "RAM Usage (%)",
-      color: theme === 'dark' ? "#34d399" : "#10b981",
-    },
-    diskUsagePercent: {
-      label: "Disk Usage (%)",
-      color: theme === 'dark' ? "#fbbf24" : "#f59e0b",
-    },
-    networkRx: {
-      label: "Network RX",
-      color: theme === 'dark' ? "#a78bfa" : "#8b5cf6",
-    },
-    networkTx: {
-      label: "Network TX",
-      color: theme === 'dark' ? "#f87171" : "#ef4444",
-    },
-  };
-
-  const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
-  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
-
-  return { chartConfig, getGridColor, getAxisColor, theme };
-};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/dataUtils.ts b/application/src/components/servers/charts/dataUtils.ts
index 4e0ca53..17c935a 100644
--- a/application/src/components/servers/charts/dataUtils.ts
+++ b/application/src/components/servers/charts/dataUtils.ts
@@ -42,87 +42,122 @@ export const convertToBytes = (value: string | number): number => {
 type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
 
 export const timeRangeOptions = [
-  { value: '60m' as TimeRange, label: '60 minutes', hours: 1 },
-  { value: '1d' as TimeRange, label: '1 day', hours: 24 },
-  { value: '7d' as TimeRange, label: '7 days', hours: 24 * 7 },
-  { value: '1m' as TimeRange, label: '1 month', hours: 24 * 30 },
-  { value: '3m' as TimeRange, label: '3 months', hours: 24 * 90 },
+  { value: '60m' as TimeRange, label: 'Last 60 minutes', hours: 1 },
+  { value: '1d' as TimeRange, label: 'Last 24 hours', hours: 24 },
+  { value: '7d' as TimeRange, label: 'Last 7 days', hours: 24 * 7 },
+  { value: '1m' as TimeRange, label: 'Last 30 days', hours: 24 * 30 },
+  { value: '3m' as TimeRange, label: 'Last 90 days', hours: 24 * 90 },
 ];
 
+// Optimized time range filtering with early returns
 export const filterMetricsByTimeRange = (metrics: any[], timeRange: TimeRange): any[] => {
+  if (!metrics?.length) return [];
+  
   const now = new Date();
   const selectedRange = timeRangeOptions.find(opt => opt.value === timeRange);
   if (!selectedRange) return metrics;
 
-  const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000));
-  console.log('filterMetricsByTimeRange: timeRange:', timeRange, 'cutoffTime:', cutoffTime.toISOString(), 'now:', now.toISOString());
+  // Add small buffer to avoid edge cases
+  const bufferMinutes = timeRange === '60m' ? 5 : timeRange === '1d' ? 30 : 60;
+  const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000) - (bufferMinutes * 60 * 1000));
+  
+  console.log('filterMetricsByTimeRange: timeRange:', timeRange, 'cutoffTime:', cutoffTime.toISOString());
   
   const filtered = metrics.filter(metric => {
     const metricTime = new Date(metric.created || metric.timestamp);
-    const isValid = metricTime >= cutoffTime;
-    if (!isValid && metrics.indexOf(metric) < 3) {
-      console.log('filterMetricsByTimeRange: Filtered out metric:', { 
-        metricTime: metricTime.toISOString(), 
-        cutoffTime: cutoffTime.toISOString(),
-        created: metric.created,
-        timestamp: metric.timestamp
-      });
-    }
-    return isValid;
+    return metricTime >= cutoffTime && metricTime <= now;
   });
   
   console.log('filterMetricsByTimeRange: Filtered', metrics.length, 'to', filtered.length, 'metrics');
-  return filtered;
+  
+  // Sort by timestamp for proper chart display
+  return filtered.sort((a, b) => 
+    new Date(a.created || a.timestamp).getTime() - new Date(b.created || b.timestamp).getTime()
+  );
 };
 
+// Optimized timestamp formatting with caching
+const timestampCache = new Map<string, string>();
+
 const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
+  const cacheKey = `${timestamp}-${timeRange}`;
+  if (timestampCache.has(cacheKey)) {
+    return timestampCache.get(cacheKey)!;
+  }
+  
   const date = new Date(timestamp);
+  let formatted: string;
   
   if (timeRange === '60m') {
-    // For 60 minutes, show time with seconds
-    return date.toLocaleString('en-US', { 
+    formatted = date.toLocaleString('en-US', { 
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false
+    });
+  } else if (timeRange === '1d') {
+    formatted = date.toLocaleString('en-US', { 
       month: 'short',
       day: 'numeric',
       hour: '2-digit', 
       minute: '2-digit',
-      second: '2-digit'
+      hour12: false
     });
-  } else if (timeRange === '1d') {
-    // For 1 day, show date and time
-    return date.toLocaleString('en-US', { 
+  } else if (timeRange === '7d') {
+    formatted = date.toLocaleString('en-US', { 
       month: 'short',
       day: 'numeric',
-      hour: '2-digit', 
-      minute: '2-digit'
+      hour: '2-digit',
+      hour12: false
     });
   } else {
-    // For longer periods, show date and time
-    return date.toLocaleString('en-US', { 
+    formatted = date.toLocaleString('en-US', { 
       month: 'short',
       day: 'numeric',
-      year: 'numeric',
-      hour: '2-digit', 
-      minute: '2-digit'
+      year: '2-digit'
     });
   }
+  
+  // Cache the result (limit cache size)
+  if (timestampCache.size > 1000) {
+    timestampCache.clear();
+  }
+  timestampCache.set(cacheKey, formatted);
+  
+  return formatted;
 };
 
+// Optimized chart data formatting with better performance
 export const formatChartData = (metrics: any[], timeRange: TimeRange) => {
   console.log('formatChartData: Input metrics count:', metrics?.length || 0, 'timeRange:', timeRange);
   
+  if (!metrics?.length) return [];
+  
   const filteredMetrics = filterMetricsByTimeRange(metrics, timeRange);
   console.log('formatChartData: After time filtering:', filteredMetrics?.length || 0, 'metrics');
   
-  if (filteredMetrics.length > 0) {
-    console.log('formatChartData: First filtered metric:', filteredMetrics[0]);
-    console.log('formatChartData: Sample timestamps:', filteredMetrics.slice(0, 3).map(m => ({ 
-      created: m.created, 
-      timestamp: m.timestamp,
-      both: new Date(m.created || m.timestamp).toISOString()
-    })));
+  if (!filteredMetrics.length) return [];
+  
+  // Dynamic sampling based on time range and data volume
+  let maxDataPoints: number;
+  switch (timeRange) {
+    case '60m': maxDataPoints = 60; break;   // 1 point per minute max
+    case '1d': maxDataPoints = 144; break;   // 1 point per 10 minutes max
+    case '7d': maxDataPoints = 168; break;   // 1 point per hour max
+    case '1m': maxDataPoints = 120; break;   // 1 point per 6 hours max
+    case '3m': maxDataPoints = 90; break;    // 1 point per day max
+    default: maxDataPoints = 100;
   }
   
-  return filteredMetrics.slice(0, 100).reverse().map((metric, index) => {
+  // Smart sampling - only sample if we have significantly more data
+  const sampledMetrics = filteredMetrics.length > maxDataPoints * 1.2
+    ? filteredMetrics.filter((_, index) => index % Math.ceil(filteredMetrics.length / maxDataPoints) === 0)
+    : filteredMetrics;
+  
+  console.log('formatChartData: After sampling:', sampledMetrics.length, 'metrics for display');
+  
+  // Batch process the data transformation for better performance
+  return sampledMetrics.map((metric) => {
     const cpuUsage = typeof metric.cpu_usage === 'string' ? 
       parseFloat(metric.cpu_usage.replace('%', '')) : 
       parseFloat(metric.cpu_usage) || 0;
@@ -149,7 +184,7 @@ export const formatChartData = (metrics: any[], timeRange: TimeRange) => {
       fullTimestamp: timestamp,
       cpuUsage: Math.round(cpuUsage * 100) / 100,
       cpuCores: parseInt(metric.cpu_cores) || 0,
-      cpuFree: 100 - cpuUsage,
+      cpuFree: Math.round((100 - cpuUsage) * 100) / 100,
       
       ramUsedBytes,
       ramTotalBytes,
diff --git a/application/src/components/servers/charts/hooks/useServerHistoryData.ts b/application/src/components/servers/charts/hooks/useServerHistoryData.ts
new file mode 100644
index 0000000..d28eae7
--- /dev/null
+++ b/application/src/components/servers/charts/hooks/useServerHistoryData.ts
@@ -0,0 +1,45 @@
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { serverService } from "@/services/serverService";
+import { formatChartData } from "../dataUtils";
+
+type TimeRange = '60m' | '1d' | '7d' | '1m' | '3m';
+
+export const useServerHistoryData = (serverId: string) => {
+  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
+
+  const {
+    data: metrics = [],
+    isLoading,
+    error,
+    isFetching
+  } = useQuery({
+    queryKey: ['server-metrics-history', serverId, timeRange],
+    queryFn: async () => {
+      console.log('useServerHistoryData: Fetching metrics for serverId:', serverId, 'timeRange:', timeRange);
+      const result = await serverService.getServerMetrics(serverId, timeRange);
+      console.log('useServerHistoryData: Raw metrics result for timeRange', timeRange, ':', result?.length || 0, 'records');
+      return result || [];
+    },
+    enabled: !!serverId,
+    refetchInterval: timeRange === '60m' ? 30000 : timeRange === '1d' ? 60000 : 120000, // Reduced frequency
+    staleTime: timeRange === '60m' ? 15000 : timeRange === '1d' ? 30000 : 60000, // Increased stale time
+    retry: 2, // Reduced retries
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 3000), // Faster retry
+    gcTime: 5 * 60 * 1000, // 5 minutes cache
+  });
+
+  // Memoize chart data formatting to prevent unnecessary recalculations
+  const chartData = formatChartData(metrics, timeRange);
+
+  return {
+    timeRange,
+    setTimeRange,
+    metrics,
+    chartData,
+    isLoading,
+    error,
+    isFetching
+  };
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/tooltips/DetailedTooltipContent.tsx b/application/src/components/servers/charts/tooltips/DetailedTooltipContent.tsx
new file mode 100644
index 0000000..042321f
--- /dev/null
+++ b/application/src/components/servers/charts/tooltips/DetailedTooltipContent.tsx
@@ -0,0 +1,65 @@
+
+interface DetailedTooltipContentProps {
+  active?: boolean;
+  payload?: any[];
+  label?: string;
+}
+
+export const DetailedTooltipContent = ({ active, payload, label }: DetailedTooltipContentProps) => {
+  if (!active || !payload || !payload.length) return null;
+
+  const data = payload[0]?.payload;
+
+  return (
+    <div className="bg-popover/95 border border-border backdrop-blur-sm rounded-lg p-3 shadow-lg">
+      <p className="font-medium text-popover-foreground mb-2">{label}</p>
+      {data?.fullTimestamp && (
+        <p className="text-xs text-muted-foreground mb-2">
+          {new Date(data.fullTimestamp).toLocaleString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+          })}
+        </p>
+      )}
+      {payload.map((entry: any, index: number) => {
+        const data = entry.payload;
+        return (
+          <div key={index} className="space-y-1">
+            <div className="flex items-center gap-2">
+              <div 
+                className="w-3 h-3 rounded-full" 
+                style={{ backgroundColor: entry.color }}
+              />
+              <span className="text-sm font-medium">{entry.name}: {entry.value}%</span>
+            </div>
+            {entry.dataKey === 'cpuUsage' && (
+              <div className="text-xs text-muted-foreground ml-5">
+                <div>CPU Cores: {data.cpuCores}</div>
+                <div>Free: {data.cpuFree}%</div>
+              </div>
+            )}
+            {entry.dataKey === 'ramUsagePercent' && (
+              <div className="text-xs text-muted-foreground ml-5">
+                <div>Used: {data.ramUsed}</div>
+                <div>Total: {data.ramTotal}</div>
+                <div>Free: {data.ramFree}</div>
+              </div>
+            )}
+            {entry.dataKey === 'diskUsagePercent' && (
+              <div className="text-xs text-muted-foreground ml-5">
+                <div>Used: {data.diskUsed}</div>
+                <div>Total: {data.diskTotal}</div>
+                <div>Free: {data.diskFree}</div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/application/src/components/servers/charts/tooltips/NetworkTooltipContent.tsx b/application/src/components/servers/charts/tooltips/NetworkTooltipContent.tsx
new file mode 100644
index 0000000..3a709b8
--- /dev/null
+++ b/application/src/components/servers/charts/tooltips/NetworkTooltipContent.tsx
@@ -0,0 +1,48 @@
+
+interface NetworkTooltipContentProps {
+  active?: boolean;
+  payload?: any[];
+  label?: string;
+}
+
+export const NetworkTooltipContent = ({ active, payload, label }: NetworkTooltipContentProps) => {
+  if (!active || !payload || !payload.length) return null;
+
+  const data = payload[0]?.payload;
+
+  return (
+    <div className="bg-popover/95 border border-border backdrop-blur-sm rounded-lg p-3 shadow-lg">
+      <p className="font-medium text-popover-foreground mb-2">{label}</p>
+      {data?.fullTimestamp && (
+        <p className="text-xs text-muted-foreground mb-2">
+          {new Date(data.fullTimestamp).toLocaleString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+          })}
+        </p>
+      )}
+      {payload.map((entry: any, index: number) => (
+        <div key={index} className="flex items-center gap-2 mb-1">
+          <div 
+            className="w-3 h-3 rounded-full" 
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm font-medium">
+            {entry.name}: {entry.dataKey.includes('Speed') ? `${entry.value} KB/s` : entry.value}
+          </span>
+        </div>
+      ))}
+      {data && (
+        <div className="text-xs text-muted-foreground mt-2 pt-2 border-t border-border">
+          <div>Total RX: {data.networkRx}</div>
+          <div>Total TX: {data.networkTx}</div>
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file

From 08f31835e1df926ef8b20ce884584358cc6826aa Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Mon, 7 Jul 2025 14:49:41 +0700
Subject: [PATCH 4/8] feat: Improve server overview cards - Added card
 background color and grid layout to server overview cards in the server
 detail page.

---
 .../servers/ServerMetricsOverview.tsx         | 169 ++++++++++++------
 1 file changed, 110 insertions(+), 59 deletions(-)

diff --git a/application/src/components/servers/ServerMetricsOverview.tsx b/application/src/components/servers/ServerMetricsOverview.tsx
index e706f5e..103edc8 100644
--- a/application/src/components/servers/ServerMetricsOverview.tsx
+++ b/application/src/components/servers/ServerMetricsOverview.tsx
@@ -36,7 +36,7 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
   const ramUsagePercent = server.ram_total > 0 ? (server.ram_used / server.ram_total) * 100 : 0;
   const diskUsagePercent = server.disk_total > 0 ? (server.disk_used / server.disk_total) * 100 : 0;
 
-  const MetricCard = ({ title, used, total, free, percentage, icon: Icon, color, additionalInfo }: {
+  const MetricCard = ({ title, used, total, free, percentage, icon: Icon, color, gradient, additionalInfo }: {
     title: string;
     used: string;
     total: string;
@@ -44,66 +44,69 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
     percentage: number;
     icon: any;
     color: string;
+    gradient: string;
     additionalInfo?: string;
   }) => (
-    <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">
-      <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">
+    <Card 
+      className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+      style={{ background: gradient }}
+    >
+      {/* Grid Pattern Overlay */}
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div 
+          className="w-full h-full" 
+          style={{ 
+            backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                              linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+            backgroundSize: '20px 20px'
+          }}
+        />
+      </div>
+      
+      <CardHeader className="pb-3 relative z-10">
         <CardTitle className="flex items-center justify-between text-sm font-semibold">
           <div className="flex items-center gap-3">
-            <div 
-              className="p-2.5 rounded-xl shadow-sm ring-1 ring-white/10 transition-all duration-300 group-hover:scale-110"
-              style={{ 
-                backgroundColor: `${color}35`,
-               // boxShadow: `0 4px 12px ${color}20`
-              }}
-            >
-              <Icon className="h-4 w-4" style={{ color }} />
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Icon className="h-4 w-4 text-white" />
             </div>
-            <span className="text-foreground/90">{title}</span>
+            <span className="text-white">{title}</span>
           </div>
-          <div className="text-xs font-mono font-bold px-2 py-1 rounded-md" style={{ 
-            color, 
-            backgroundColor: `${color}35`,
-            border: `1px solid ${color}30`
-          }}>
+          <div className="text-xs font-mono font-bold px-2 py-1 rounded-md bg-white/20 backdrop-blur-sm text-white border border-white/30">
             {percentage.toFixed(1)}%
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4 relative">
+      
+      <CardContent className="space-y-4 relative z-10">
         <div className="grid grid-cols-2 gap-4 text-xs">
           <div className="space-y-1">
             <div className="flex justify-between">
-              <span className="text-muted-foreground">Used:</span>
-              <span className="font-mono font-semibold text-foreground">{used}</span>
+              <span className="text-white/70">Used:</span>
+              <span className="font-mono font-semibold text-white">{used}</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-muted-foreground">Free:</span>
-              <span className="font-mono font-semibold text-foreground">{free}</span>
+              <span className="text-white/70">Free:</span>
+              <span className="font-mono font-semibold text-white">{free}</span>
             </div>
           </div>
           <div className="space-y-1">
             <div className="flex justify-between">
-              <span className="text-muted-foreground">Total:</span>
-              <span className="font-mono font-semibold text-foreground">{total}</span>
+              <span className="text-white/70">Total:</span>
+              <span className="font-mono font-semibold text-white">{total}</span>
             </div>
             {additionalInfo && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground">Cores:</span>
-                <span className="font-mono font-semibold text-foreground">{additionalInfo}</span>
+                <span className="text-white/70">Cores:</span>
+                <span className="font-mono font-semibold text-white">{additionalInfo}</span>
               </div>
             )}
           </div>
         </div>
-        <div className="w-full bg-muted/40 rounded-full h-3 overflow-hidden shadow-inner">
+        
+        <div className="w-full bg-white/20 rounded-full h-3 overflow-hidden shadow-inner backdrop-blur-sm">
           <div 
-            className="h-3 rounded-full transition-all duration-700 ease-out relative overflow-hidden"
-            style={{ 
-              width: `${Math.min(percentage, 100)}%`,
-              backgroundColor: color,
-              boxShadow: `0 0 12px ${color}50, inset 0 1px 0 rgba(255,255,255,0.2)`
-            }}
+            className="h-3 rounded-full transition-all duration-700 ease-out relative overflow-hidden bg-white/80"
+            style={{ width: `${Math.min(percentage, 100)}%` }}
           >
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse" />
             <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-white/10" />
@@ -116,54 +119,90 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
       {/* Status 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">
-        <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">
+      <Card 
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+        style={{
+          background: theme === 'dark' 
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)" 
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
+        }}
+      >
+        {/* Grid Pattern Overlay */}
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div 
+            className="w-full h-full" 
+            style={{ 
+              backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+              backgroundSize: '20px 20px'
+            }}
+          />
+        </div>
+        
+        <CardHeader className="pb-3 relative z-10">
           <CardTitle className="flex items-center gap-3 text-sm font-semibold">
-            <div className="p-2.5 rounded-xl bg-primary/15 shadow-sm ring-1 ring-white/10 transition-all duration-300 group-hover:scale-110" style={{ boxShadow: '0 4px 12px rgba(59, 130, 246, 0.2)' }}>
-              <Activity className="h-4 w-4 text-primary" />
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Activity className="h-4 w-4 text-white" />
             </div>
-            <span className="text-foreground/90">Status</span>
+            <span className="text-white">Status</span>
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4 relative">
-          <div className={`text-lg font-bold capitalize ${getStatusColor(server.status)} flex items-center gap-3`}>
-            <div className={`w-3 h-3 rounded-full ${server.status === 'up' ? 'bg-green-500' : server.status === 'down' ? 'bg-red-500' : 'bg-yellow-500'} animate-pulse shadow-sm`} style={{ 
-              boxShadow: `0 0 8px ${server.status === 'up' ? '#10b981' : server.status === 'down' ? '#ef4444' : '#f59e0b'}` 
-            }} />
+        
+        <CardContent className="space-y-4 relative z-10">
+          <div className={`text-lg font-bold capitalize flex items-center gap-3 text-white`}>
+            <div className={`w-3 h-3 rounded-full ${server.status === 'up' ? 'bg-green-400' : server.status === 'down' ? 'bg-red-400' : 'bg-yellow-400'} animate-pulse shadow-sm`} />
             {server.status}
           </div>
           <div className="space-y-2 text-xs">
             <div className="flex justify-between py-1">
-              <span className="text-muted-foreground">Agent:</span>
-              <span className="font-semibold text-foreground">{server.agent_status}</span>
+              <span className="text-white/70">Agent:</span>
+              <span className="font-semibold text-white">{server.agent_status}</span>
             </div>
             <div className="flex justify-between py-1">
-              <span className="text-muted-foreground">Connection:</span>
-              <span className="font-semibold text-foreground">{server.connection}</span>
+              <span className="text-white/70">Connection:</span>
+              <span className="font-semibold text-white">{server.connection}</span>
             </div>
           </div>
         </CardContent>
       </Card>
 
       {/* Uptime 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">
-        <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">
+      <Card 
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
+        style={{
+          background: theme === 'dark' 
+            ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(34, 197, 94, 0.6) 100%)" 
+            : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #22c55e 100%)"
+        }}
+      >
+        {/* Grid Pattern Overlay */}
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div 
+            className="w-full h-full" 
+            style={{ 
+              backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
+                                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+              backgroundSize: '20px 20px'
+            }}
+          />
+        </div>
+        
+        <CardHeader className="pb-3 relative z-10">
           <CardTitle className="flex items-center gap-3 text-sm font-semibold">
-            <div className="p-2.5 rounded-xl bg-blue-500/15 shadow-sm ring-1 ring-white/10 transition-all duration-300 group-hover:scale-110" style={{ boxShadow: '0 4px 12px rgba(59, 130, 246, 0.2)' }}>
-              <Clock className="h-4 w-4 text-blue-500" />
+            <div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
+              <Clock className="h-4 w-4 text-white" />
             </div>
-            <span className="text-foreground/90">Uptime</span>
+            <span className="text-white">Uptime</span>
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4 relative">
-          <div className="text-lg font-bold text-blue-500">
+        
+        <CardContent className="space-y-4 relative z-10">
+          <div className="text-lg font-bold text-white">
             {server.uptime}
           </div>
-          <div className="text-xs text-muted-foreground space-y-1">
+          <div className="text-xs text-white/70 space-y-1">
             <div>Last Check:</div>
-            <div className="font-mono text-[10px] text-foreground/80 bg-muted/30 px-2 py-1 rounded">
+            <div className="font-mono text-[10px] text-white/90 bg-white/10 px-2 py-1 rounded backdrop-blur-sm">
               {new Date(server.last_checked).toLocaleString()}
             </div>
           </div>
@@ -179,6 +218,10 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
         percentage={cpuUsagePercent}
         icon={Cpu}
         color={theme === 'dark' ? "#3b82f6" : "#2563eb"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
+        }
         additionalInfo={server.cpu_cores?.toString()}
       />
 
@@ -191,6 +234,10 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
         percentage={ramUsagePercent}
         icon={MemoryStick}
         color={theme === 'dark' ? "#10b981" : "#059669"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(16, 185, 129, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #10b981 100%)"
+        }
       />
 
       {/* Disk Metric */}
@@ -202,6 +249,10 @@ export const ServerMetricsOverview = ({ server }: ServerMetricsOverviewProps) =>
         percentage={diskUsagePercent}
         icon={HardDrive}
         color={theme === 'dark' ? "#f59e0b" : "#d97706"}
+        gradient={theme === 'dark' 
+          ? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(245, 158, 11, 0.6) 100%)" 
+          : "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #f59e0b 100%)"
+        }
       />
     </div>
   );

From be7c80d7c4c09c14cd2e2ea327e06338398ee3b4 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Mon, 7 Jul 2025 20:33:52 +0700
Subject: [PATCH 5/8] Improved the Uptime Response Time History

---
 application/src/components/services/ResponseTimeChart.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/application/src/components/services/ResponseTimeChart.tsx b/application/src/components/services/ResponseTimeChart.tsx
index b0879ec..ab046d8 100644
--- a/application/src/components/services/ResponseTimeChart.tsx
+++ b/application/src/components/services/ResponseTimeChart.tsx
@@ -14,13 +14,13 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
   
   // Modern color palette for different chart lines with solid colors at 90-100% opacity
   const modernColors = [
-    { stroke: '#f59e0b', fill: 'rgba(245, 158, 11, 0.95)' }, // Yellow (changed from blue)
-    { stroke: '#10b981', fill: 'rgba(16, 185, 129, 0.95)' }, // Emerald
+    { stroke: '#f59e0b', fill: 'rgba(111, 86, 63, 0.95)' }, // Yellow (changed from blue)
+    { stroke: '#10b981', fill: 'rgba(0, 84, 56, 0.95)' }, // Emerald
     { stroke: '#3b82f6', fill: 'rgba(59, 130, 246, 0.95)' }, // Blue (moved to second position)
     { stroke: '#ef4444', fill: 'rgba(239, 68, 68, 0.95)' }, // Red
     { stroke: '#8b5cf6', fill: 'rgba(139, 92, 246, 0.95)' }, // Violet
     { stroke: '#06b6d4', fill: 'rgba(6, 182, 212, 0.95)' }, // Cyan
-    { stroke: '#f97316', fill: 'rgba(249, 115, 22, 0.95)' }, // Orange
+    { stroke: '#f97316', fill: 'rgba(231, 148, 89, 0.95)' }, // Orange
     { stroke: '#84cc16', fill: 'rgba(132, 204, 22, 0.95)' }, // Lime
   ];
   

From 6b4911979742b85d7e02279c0f0eb88668bd63a2 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 8 Jul 2025 17:11:35 +0700
Subject: [PATCH 6/8] Fix: Add regional_status to Service type - Improved the
 regional monitoring agent assign to service type

---
 .../src/components/services/ServiceForm.tsx   | 28 +++++++++------
 .../add-service/ServiceRegionalFields.tsx     | 34 +++++++++++++++----
 application/src/services/serviceService.ts    | 19 ++++++-----
 application/src/types/service.types.ts        |  2 ++
 4 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/application/src/components/services/ServiceForm.tsx b/application/src/components/services/ServiceForm.tsx
index 18bc34d..f9342f2 100644
--- a/application/src/components/services/ServiceForm.tsx
+++ b/application/src/components/services/ServiceForm.tsx
@@ -74,8 +74,9 @@ export function ServiceForm({
         urlValue = initialData.url || "";
       }
 
-      // Handle regional monitoring data - ensure proper assignment display
-      const regionalAgent = initialData.region_name && initialData.agent_id 
+      // Handle regional monitoring data - check regional_status field
+      const isRegionalEnabled = initialData.regional_status === "enabled";
+      const regionalAgent = isRegionalEnabled && initialData.region_name && initialData.agent_id 
         ? `${initialData.region_name}|${initialData.agent_id}` 
         : "";
 
@@ -89,7 +90,7 @@ export function ServiceForm({
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel === "none" ? "" : initialData.notificationChannel || "",
         alertTemplate: initialData.alertTemplate === "default" ? "" : initialData.alertTemplate || "",
-        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalMonitoringEnabled: isRegionalEnabled,
         regionalAgent: regionalAgent,
       });
 
@@ -99,7 +100,8 @@ export function ServiceForm({
         url: urlValue, 
         port: portValue, 
         regionalAgent,
-        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalMonitoringEnabled: isRegionalEnabled,
+        regional_status: initialData.regional_status,
         region_name: initialData.region_name,
         agent_id: initialData.agent_id
       });
@@ -118,12 +120,16 @@ export function ServiceForm({
       // Parse regional agent selection
       let regionName = "";
       let agentId = "";
+      let regionalStatus: "enabled" | "disabled" = "disabled";
       
-      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
-      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
-        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
-        regionName = parsedRegionName || "";
-        agentId = parsedAgentId || "";
+      // Set regional status and agent data based on form values
+      if (data.regionalMonitoringEnabled) {
+        regionalStatus = "enabled";
+        if (data.regionalAgent && data.regionalAgent !== "") {
+          const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+          regionName = parsedRegionName || "";
+          agentId = parsedAgentId || "";
+        }
       }
       
       // Prepare service data with proper field mapping
@@ -134,8 +140,8 @@ export function ServiceForm({
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel === "none" ? "" : data.notificationChannel,
         alertTemplate: data.alertTemplate === "default" ? "" : data.alertTemplate,
-        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
-        // Always set region_name and agent_id - empty strings when unassigned
+        // Use regional_status field instead of regionalMonitoringEnabled
+        regionalStatus: regionalStatus,
         regionName: regionName,
         agentId: agentId,
         // Map the URL field to appropriate database field based on service type
diff --git a/application/src/components/services/add-service/ServiceRegionalFields.tsx b/application/src/components/services/add-service/ServiceRegionalFields.tsx
index 1ed7045..39b9e3f 100644
--- a/application/src/components/services/add-service/ServiceRegionalFields.tsx
+++ b/application/src/components/services/add-service/ServiceRegionalFields.tsx
@@ -22,8 +22,10 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
     enabled: regionalMonitoringEnabled,
   });
 
-  // Filter only online agents
-  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+  // Filter only online agents and exclude the default localhost agent (ID 1)
+  const onlineAgents = regionalAgents.filter(agent => 
+    agent.connection === 'online' && agent.agent_id !== "1"
+  );
 
   // Find the current agent name for display
   const getCurrentAgentDisplay = () => {
@@ -31,7 +33,7 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
       return "Select a regional agent or unassign";
     }
     
-    const [regionName] = currentRegionalAgent.split("|");
+    const [regionName, agentId] = currentRegionalAgent.split("|");
     const agent = onlineAgents.find(agent => 
       `${agent.region_name}|${agent.agent_id}` === currentRegionalAgent
     );
@@ -41,7 +43,25 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
     }
     
     // If agent is not found in online agents, it might be offline but still assigned
-    return regionName || "Select a regional agent or unassign";
+    // Show the region name from the stored value
+    if (regionName && agentId) {
+      return `${regionName} (Agent ${agentId}) - Offline`;
+    }
+    
+    return "Select a regional agent or unassign";
+  };
+
+  // Get the proper select value - handle both assigned and unassigned cases
+  const getSelectValue = () => {
+    if (!regionalMonitoringEnabled) {
+      return "unassign";
+    }
+    
+    if (!currentRegionalAgent || currentRegionalAgent === "") {
+      return "unassign";
+    }
+    
+    return currentRegionalAgent;
   };
 
   return (
@@ -82,7 +102,7 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                   // Handle the unassign case by setting to empty string
                   field.onChange(value === "unassign" ? "" : value);
                 }} 
-                value={field.value || "unassign"}
+                value={getSelectValue()}
                 disabled={isLoading}
               >
                 <FormControl>
@@ -135,12 +155,12 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                   No online regional agents found. Services will use default monitoring.
                 </p>
               )}
-              {currentRegionalAgent && currentRegionalAgent !== "" && currentRegionalAgent !== "unassign" && (
+              {currentRegionalAgent && currentRegionalAgent !== "" && (
                 <p className="text-sm text-green-600">
                   Currently assigned to: {getCurrentAgentDisplay()}
                 </p>
               )}
-              {(!currentRegionalAgent || currentRegionalAgent === "" || currentRegionalAgent === "unassign") && (
+              {(!currentRegionalAgent || currentRegionalAgent === "") && regionalMonitoringEnabled && (
                 <p className="text-sm text-orange-600">
                   Service is unassigned and will use default monitoring.
                 </p>
diff --git a/application/src/services/serviceService.ts b/application/src/services/serviceService.ts
index fd6c89e..4a00345 100644
--- a/application/src/services/serviceService.ts
+++ b/application/src/services/serviceService.ts
@@ -32,10 +32,11 @@ export const serviceService = {
         muteAlerts: item.alerts === "muted",  // Convert string to boolean for compatibility
         alerts: item.alerts || "unmuted",     // Store actual database field
         muteChangedAt: item.mute_changed_at,
-        // Regional monitoring fields
+        // Regional monitoring fields - use regional_status
         region_name: item.region_name || "",
         agent_id: item.agent_id || "",
-        regional_monitoring_enabled: item.regional_monitoring_enabled || false,
+        regional_status: item.regional_status || "disabled",
+        regional_monitoring_enabled: item.regional_status === "enabled", // Backward compatibility
       }));
     } catch (error) {
       console.error("Error fetching services:", error);
@@ -62,8 +63,8 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel,
         template_id: params.alertTemplate,
-        // Regional monitoring fields
-        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        // Regional monitoring fields - use regional_status
+        regional_status: params.regionalStatus || "disabled",
         region_name: params.regionName || "",
         agent_id: params.agentId || "",
         // Conditionally add fields based on service type
@@ -98,7 +99,8 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
-        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        regional_status: record.regional_status || "disabled",
+        regional_monitoring_enabled: record.regional_status === "enabled",
         region_name: record.region_name || "",
         agent_id: record.agent_id || "",
       } as Service;
@@ -128,8 +130,8 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel || null,
         template_id: params.alertTemplate || null,
-        // Regional monitoring fields
-        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        // Regional monitoring fields - use regional_status
+        regional_status: params.regionalStatus || "disabled",
         region_name: params.regionName || "",
         agent_id: params.agentId || "",
         // Conditionally update fields based on service type
@@ -171,7 +173,8 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
-        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        regional_status: record.regional_status || "disabled",
+        regional_monitoring_enabled: record.regional_status === "enabled",
         region_name: record.region_name || "",
         agent_id: record.agent_id || "",
       } as Service;
diff --git a/application/src/types/service.types.ts b/application/src/types/service.types.ts
index e2dbc9a..2653ea4 100644
--- a/application/src/types/service.types.ts
+++ b/application/src/types/service.types.ts
@@ -34,6 +34,7 @@ export interface Service {
   // Regional monitoring fields
   region_name?: string;
   agent_id?: string;
+  regional_status?: "enabled" | "disabled"; // Add regional_status field
   regional_monitoring_enabled?: boolean;
 }
 
@@ -50,6 +51,7 @@ export interface CreateServiceParams {
   alertTemplate?: string;
   // Regional monitoring params
   regionalMonitoringEnabled?: boolean;
+  regionalStatus?: "enabled" | "disabled"; // Add regionalStatus field
   regionName?: string;
   agentId?: string;
 }

From f4aeaebe0d4c8cb04f264da4e0c3e995bf193307 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 8 Jul 2025 20:10:34 +0700
Subject: [PATCH 7/8] Fix: Uptime history bar color for paused/unknown - Update
 UptimeBar component to display grey color for "Paused" status and when no
 data is available.

---
 .../src/components/services/UptimeBar.tsx     | 10 ++-
 .../hooks/useConsolidatedUptimeData.ts        | 74 +++++++++++++++++--
 2 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/application/src/components/services/UptimeBar.tsx b/application/src/components/services/UptimeBar.tsx
index 1c00ffe..ea58b7a 100644
--- a/application/src/components/services/UptimeBar.tsx
+++ b/application/src/components/services/UptimeBar.tsx
@@ -24,7 +24,7 @@ export const UptimeBar = ({ uptime, status, serviceId, interval, serviceType }:
 
   const getStatusColor = (itemStatus: string, hasData: boolean = true) => {
     if (!hasData) {
-      return "bg-gray-300"; // No data color
+      return "bg-gray-400"; // No data color - grey
     }
     
     switch (itemStatus) {
@@ -35,9 +35,11 @@ export const UptimeBar = ({ uptime, status, serviceId, interval, serviceType }:
       case "warning":
         return "bg-yellow-500";
       case "paused":
-        return "bg-gray-500"; // Distinct paused color (darker grey)
+        return "bg-gray-400"; // Paused status - grey
+      case "unknown":
+      case "NA":
       default:
-        return "bg-gray-300"; // Default fallback
+        return "bg-gray-400"; // Unknown/NA/default - grey
     }
   };
 
@@ -102,7 +104,7 @@ export const UptimeBar = ({ uptime, status, serviceId, interval, serviceType }:
                                 item.status === 'up' ? 'bg-emerald-500' :
                                 item.status === 'down' ? 'bg-red-500' :
                                 item.status === 'warning' ? 'bg-yellow-500' : 
-                                item.status === 'paused' ? 'bg-gray-500' : 'bg-gray-300'
+                                item.status === 'paused' ? 'bg-gray-400' : 'bg-gray-400'
                               }`} />
                               <span className="text-xs font-medium truncate">{item.source}</span>
                             </div>
diff --git a/application/src/components/services/hooks/useConsolidatedUptimeData.ts b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
index 06a1f07..5fb40f7 100644
--- a/application/src/components/services/hooks/useConsolidatedUptimeData.ts
+++ b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { uptimeService } from '@/services/uptimeService';
@@ -167,14 +166,72 @@ export const useConsolidatedUptimeData = ({ serviceId, serviceType, status, inte
     if (uptimeData && uptimeData.length > 0) {
       console.log(`Processing consolidated uptime data for service ${serviceId}`);
       const processedData = processConsolidatedData(uptimeData);
-      setConsolidatedItems(processedData);
+      
+      // If service is currently paused, override ONLY the latest (first) bar with paused status
+      if (status === "paused" && processedData.length > 0) {
+        console.log(`Service ${serviceId} is paused, overriding latest bar with paused status`);
+        
+        // Create a paused entry for the latest timestamp
+        const latestTimestamp = new Date();
+        latestTimestamp.setSeconds(0, 0); // Normalize to minute precision
+        
+        const pausedSlot: ConsolidatedTimeSlot = {
+          timestamp: latestTimestamp.toISOString(),
+          items: [{
+            id: `paused-${serviceId}-latest`,
+            service_id: serviceId || "",
+            serviceId: serviceId || "",
+            timestamp: latestTimestamp.toISOString(),
+            status: "paused" as "up" | "down" | "warning" | "paused",
+            responseTime: 0,
+            source: 'Default (Agent 1)',
+            isDefault: true
+          }]
+        };
+        
+        // Replace the first item with paused status, keep the rest as historical data
+        const updatedData = [pausedSlot, ...processedData.slice(0, 19)];
+        console.log(`Updated data with paused latest bar, total bars: ${updatedData.length}`);
+        setConsolidatedItems(updatedData);
+      } else {
+        // Service is active (up/down/warning) - merge real data with any existing paused bars
+        console.log(`Service ${serviceId} is active with status: ${status}, merging with existing paused bars`);
+        
+        // Get existing paused bars from current state
+        const existingPausedBars = consolidatedItems.filter(slot => 
+          slot.items.some(item => item.status === "paused")
+        );
+        
+        // Create a map of existing paused timestamps for quick lookup
+        const pausedTimestamps = new Set(existingPausedBars.map(slot => slot.timestamp));
+        
+        // Merge processed data with existing paused bars
+        const mergedData = [...processedData];
+        
+        // Add back any paused bars that don't conflict with new data
+        existingPausedBars.forEach(pausedSlot => {
+          const hasConflict = processedData.some(slot => slot.timestamp === pausedSlot.timestamp);
+          if (!hasConflict) {
+            mergedData.push(pausedSlot);
+            console.log(`Preserved paused bar at timestamp: ${pausedSlot.timestamp}`);
+          }
+        });
+        
+        // Sort by timestamp (newest first) and limit to 20
+        const finalData = mergedData
+          .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+          .slice(0, 20);
+        
+        console.log(`Final merged data has ${finalData.length} slots`);
+        setConsolidatedItems(finalData);
+      }
     } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
       // Generate placeholder data when no real data is available
-      console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
+      console.log(`No uptime data available for service ${serviceId}, generating placeholder with status: ${status}`);
       
-      const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
-        ? status 
-        : "paused";
+      // Use the actual service status for placeholder data
+      const statusValue = status === "paused" ? "paused" : 
+                         (status === "up" || status === "down" || status === "warning") ? status : "unknown";
         
       const placeholderHistory: ConsolidatedTimeSlot[] = Array(20).fill(null).map((_, index) => {
         const timestamp = new Date(Date.now() - (index * interval * 1000));
@@ -188,16 +245,17 @@ export const useConsolidatedUptimeData = ({ serviceId, serviceType, status, inte
             serviceId: serviceId || "",
             timestamp: timestamp.toISOString(),
             status: statusValue as "up" | "down" | "warning" | "paused",
-            responseTime: 0,
+            responseTime: statusValue === "paused" ? 0 : (statusValue === "up" ? 200 : 0),
             source: 'Default (Agent 1)',
             isDefault: true
           }]
         };
       });
       
+      console.log(`Generated ${placeholderHistory.length} placeholder slots with status: ${statusValue}`);
       setConsolidatedItems(placeholderHistory);
     }
-  }, [uptimeData, serviceId, status, interval]);
+  }, [uptimeData, serviceId, status, interval, consolidatedItems]);
 
   return {
     consolidatedItems,

From e355e771d11ab4d38c980d78c5d723d64920a891 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 8 Jul 2025 22:01:04 +0700
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=93=96=20=20Updated=20project=20image?=
 =?UTF-8?q?=20URL=20Readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c5acd79..2d5c9bd 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-![CheckCle Platform](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/instance-server-monitoring.png)
+![CheckCle Platform](https://pub-4a4062303020445f8f289a2fee84f9e8.r2.dev/images/server-detail-page.png)
 
 # 🚀 What is CheckCle?