From aae837c11000b267d5c173baf2d0da4b7f032d28 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 24 Nov 2024 02:51:41 +0800
Subject: [PATCH] feat: detail chart

---
 bun.lockb                                     | Bin 145938 -> 159867 bytes
 eslint.config.js                              |   1 +
 package.json                                  |   3 +-
 src/components/ServerDetailChart.tsx          | 742 ++++++++++++++++++
 src/components/ServerDetailOverview.tsx       | 171 ++++
 .../loading/ServerDetailLoading.tsx           |   1 -
 .../ui/animated-circular-progress-bar.tsx     | 107 +++
 src/components/ui/badge.tsx                   |  14 +-
 src/components/ui/chart.tsx                   | 363 +++++++++
 src/pages/ServerDetail.tsx                    | 172 +---
 10 files changed, 1398 insertions(+), 176 deletions(-)
 create mode 100644 src/components/ServerDetailChart.tsx
 create mode 100644 src/components/ServerDetailOverview.tsx
 create mode 100644 src/components/ui/animated-circular-progress-bar.tsx
 create mode 100644 src/components/ui/chart.tsx

diff --git a/bun.lockb b/bun.lockb
index e282bb92366a6fcd1ba02bc2fd75a6bf63ca7255..4c2db6cc1924eecdeaf4663b03051e62032688f4 100755
GIT binary patch
delta 29015
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

delta 20971
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

diff --git a/eslint.config.js b/eslint.config.js
index 79a552e..c1d602f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -23,6 +23,7 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
+      "react-hooks/exhaustive-deps": "off",
     },
   },
 );
diff --git a/package.json b/package.json
index c857601..fb2182d 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,13 @@
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "framer-motion": "^11.11.17",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.460.0",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
     "react-use-websocket": "^4.11.1",
+    "recharts": "^2.13.3",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
new file mode 100644
index 0000000..70cec45
--- /dev/null
+++ b/src/components/ServerDetailChart.tsx
@@ -0,0 +1,742 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils";
+import { NezhaAPI, NezhaAPIResponse } from "@/types/nezha-api";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
+import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
+
+type cpuChartData = {
+  timeStamp: string;
+  cpu: number;
+};
+
+type processChartData = {
+  timeStamp: string;
+  process: number;
+};
+
+type diskChartData = {
+  timeStamp: string;
+  disk: number;
+};
+
+type memChartData = {
+  timeStamp: string;
+  mem: number;
+  swap: number;
+};
+
+type networkChartData = {
+  timeStamp: string;
+  upload: number;
+  download: number;
+};
+
+type connectChartData = {
+  timeStamp: string;
+  tcp: number;
+  udp: number;
+};
+
+export default function ServerDetailChart() {
+  const { id } = useParams();
+  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
+  });
+
+  // 检查连接状态
+  if (readyState !== 1) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
+  }
+
+  // 解析消息
+  const nezhaWsData = lastMessage
+    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
+    : null;
+
+  if (!nezhaWsData) {
+    return <ServerDetailChartLoading />;
+  }
+
+  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
+
+  if (!server) {
+    return <ServerDetailChartLoading />;
+  }
+
+  return (
+    <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+      <CpuChart data={server} />
+      <ProcessChart data={server} />
+      <DiskChart data={server} />
+      <MemChart data={server} />
+      <NetworkChart data={server} />
+      <ConnectChart data={server} />
+    </section>
+  );
+}
+
+function CpuChart({ data }: { data: NezhaAPI }) {
+  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
+
+  const { cpu } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as cpuChartData[];
+      if (cpuChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, cpu: cpu },
+          { timeStamp: timestamp, cpu: cpu },
+        ];
+      } else {
+        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setCpuChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    cpu: {
+      label: "CPU",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">CPU</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {cpu.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={cpu}
+                primaryColor="hsl(var(--chart-1))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={cpuChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="cpu"
+                type="step"
+                fill="hsl(var(--chart-1))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-1))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ProcessChart({ data }: { data: NezhaAPI }) {
+  const [processChartData, setProcessChartData] = useState(
+    [] as processChartData[],
+  );
+
+  const { process } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as processChartData[];
+      if (processChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, process: process },
+          { timeStamp: timestamp, process: process },
+        ];
+      } else {
+        newData = [
+          ...processChartData,
+          { timeStamp: timestamp, process: process },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setProcessChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    process: {
+      label: "Process",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{"Process"}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">{process}</p>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={processChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="process"
+                type="step"
+                fill="hsl(var(--chart-2))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-2))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function MemChart({ data }: { data: NezhaAPI }) {
+  const [memChartData, setMemChartData] = useState([] as memChartData[]);
+
+  const { mem, swap } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as memChartData[];
+      if (memChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, mem: mem, swap: swap },
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      } else {
+        newData = [
+          ...memChartData,
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setMemChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    mem: {
+      label: "Mem",
+    },
+    swap: {
+      label: "Swap",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{"Mem"}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={mem}
+                    primaryColor="hsl(var(--chart-8))"
+                  />
+                  <p className="text-xs font-medium">{mem.toFixed(0)}%</p>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{"Swap"}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={swap}
+                    primaryColor="hsl(var(--chart-10))"
+                  />
+                  <p className="text-xs font-medium">{swap.toFixed(0)}%</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={memChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="mem"
+                type="step"
+                fill="hsl(var(--chart-8))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-8))"
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="swap"
+                type="step"
+                fill="hsl(var(--chart-10))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-10))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DiskChart({ data }: { data: NezhaAPI }) {
+  const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
+
+  const { disk } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as diskChartData[];
+      if (diskChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, disk: disk },
+          { timeStamp: timestamp, disk: disk },
+        ];
+      } else {
+        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setDiskChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    disk: {
+      label: "Disk",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{"Disk"}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {disk.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={disk}
+                primaryColor="hsl(var(--chart-5))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={diskChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="disk"
+                type="step"
+                fill="hsl(var(--chart-5))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-5))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NetworkChart({ data }: { data: NezhaAPI }) {
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
+
+  const { up, down } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as networkChartData[];
+      if (networkChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, upload: up, download: down },
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      } else {
+        newData = [
+          ...networkChartData,
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setNetworkChartData(newData);
+    }
+  }, [data]);
+
+  let maxDownload = Math.max(...networkChartData.map((item) => item.download));
+  maxDownload = Math.ceil(maxDownload);
+  if (maxDownload < 1) {
+    maxDownload = 1;
+  }
+
+  const chartConfig = {
+    upload: {
+      label: "Upload",
+    },
+    download: {
+      label: "Download",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-20">
+                <p className="text-xs text-muted-foreground">{"Upload"}</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{up.toFixed(2)} M/s</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-20">
+                <p className=" text-xs text-muted-foreground">{"Download"}</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={networkChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                minTickGap={50}
+                interval="preserveStartEnd"
+                domain={[1, maxDownload]}
+                tickFormatter={(value) => `${value.toFixed(0)}M/s`}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="upload"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="download"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ConnectChart({ data }: { data: NezhaAPI }) {
+  const [connectChartData, setConnectChartData] = useState(
+    [] as connectChartData[],
+  );
+
+  const { tcp, udp } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as connectChartData[];
+      if (connectChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      } else {
+        newData = [
+          ...connectChartData,
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setConnectChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    tcp: {
+      label: "TCP",
+    },
+    udp: {
+      label: "UDP",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-12">
+                <p className="text-xs text-muted-foreground">TCP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{tcp}</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-12">
+                <p className=" text-xs text-muted-foreground">UDP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{udp}</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={connectChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                interval="preserveStartEnd"
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="tcp"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="udp"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
new file mode 100644
index 0000000..35cf6f2
--- /dev/null
+++ b/src/components/ServerDetailOverview.tsx
@@ -0,0 +1,171 @@
+import { BackIcon } from "@/components/Icon";
+import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
+import ServerFlag from "@/components/ServerFlag";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { NezhaAPIResponse } from "@/types/nezha-api";
+import { useNavigate, useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+
+export default function ServerDetailOverview() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
+  });
+
+  // 检查连接状态
+  if (readyState !== 1) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
+  }
+
+  // 解析消息
+  const nezhaWsData = lastMessage
+    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
+    : null;
+
+  if (!nezhaWsData) {
+    return <ServerDetailLoading />;
+  }
+
+  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
+
+  if (!server) {
+    return <ServerDetailLoading />;
+  }
+
+  const { name, online, uptime, version } = formatNezhaInfo(server);
+
+  return (
+    <div>
+      <div
+        onClick={() => navigate("/")}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {name}
+      </div>
+      <section className="flex flex-wrap gap-2 mt-3">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Status"}</p>
+              <Badge
+                className={cn(
+                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
+                  {
+                    " bg-green-800": online,
+                    " bg-red-600": !online,
+                  },
+                )}
+              >
+                {online ? "Online" : "Offline"}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Uptime"}</p>
+              <div className="text-xs">
+                {" "}
+                {online ? (uptime / 86400).toFixed(0) : "N/A"} {"Days"}{" "}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Version"}</p>
+              <div className="text-xs">{version || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Arch"}</p>
+              <div className="text-xs">{server.host.arch || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Mem"}</p>
+              <div className="text-xs">
+                {formatBytes(server.host.mem_total)}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Disk"}</p>
+              <div className="text-xs">
+                {formatBytes(server.host.disk_total)}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Region"}</p>
+              <section className="flex items-start gap-1">
+                <div className="text-xs text-start">
+                  {server.host.country_code?.toUpperCase() || "Unknown"}
+                </div>
+                {server.host.country_code && (
+                  <ServerFlag
+                    className="text-[11px] -mt-[1px]"
+                    country_code={server.host.country_code}
+                  />
+                )}
+              </section>
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"System"}</p>
+              {server.host.platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {server.host.platform || "Unknown"} -{" "}
+                  {server.host.platform_version}{" "}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"CPU"}</p>
+              {server.host.cpu ? (
+                <div className="text-xs"> {server.host.cpu}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/loading/ServerDetailLoading.tsx b/src/components/loading/ServerDetailLoading.tsx
index 7e19723..5e78fe7 100644
--- a/src/components/loading/ServerDetailLoading.tsx
+++ b/src/components/loading/ServerDetailLoading.tsx
@@ -1,4 +1,3 @@
-
 import { Skeleton } from "@/components/ui/skeleton";
 import { BackIcon } from "../Icon";
 import { useNavigate } from "react-router-dom";
diff --git a/src/components/ui/animated-circular-progress-bar.tsx b/src/components/ui/animated-circular-progress-bar.tsx
new file mode 100644
index 0000000..dd96fe8
--- /dev/null
+++ b/src/components/ui/animated-circular-progress-bar.tsx
@@ -0,0 +1,107 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+  max: number;
+  value: number;
+  min: number;
+  className?: string;
+  primaryColor?: string;
+}
+
+export default function AnimatedCircularProgressBar({
+  max = 100,
+  min = 0,
+  value = 0,
+  primaryColor,
+  className,
+}: Props) {
+  const circumference = 2 * Math.PI * 45;
+  const percentPx = circumference / 100;
+  const currentPercent = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div
+      className={cn("relative size-40 text-2xl font-semibold", className)}
+      style={
+        {
+          "--circle-size": "100px",
+          "--circumference": circumference,
+          "--percent-to-px": `${percentPx}px`,
+          "--gap-percent": "5",
+          "--offset-factor": "0",
+          "--transition-length": "1s",
+          "--transition-step": "200ms",
+          "--delay": "0s",
+          "--percent-to-deg": "3.6deg",
+          transform: "translateZ(0)",
+        } as React.CSSProperties
+      }
+    >
+      <svg
+        fill="none"
+        className="size-full"
+        strokeWidth="2"
+        viewBox="0 0 100 100"
+      >
+        {currentPercent <= 90 && currentPercent >= 0 && (
+          <circle
+            cx="50"
+            cy="50"
+            r="45"
+            strokeWidth="10"
+            strokeDashoffset="0"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opacity-100 stroke-muted"
+            style={
+              {
+                "--stroke-percent": 90 - currentPercent,
+                "--offset-factor-secondary": "calc(1 - var(--offset-factor))",
+                strokeDasharray:
+                  "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                transform:
+                  "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
+                transition: "all var(--transition-length) ease var(--delay)",
+                transformOrigin:
+                  "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+              } as React.CSSProperties
+            }
+          />
+        )}
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          strokeWidth="10"
+          strokeDashoffset="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn("opacity-100 stroke-current", {
+            "stroke-[var(--stroke-primary-color)]": primaryColor,
+          })}
+          style={
+            {
+              "--stroke-primary-color": primaryColor,
+              "--stroke-percent": currentPercent,
+              strokeDasharray:
+                "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+              transition:
+                "var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
+              transitionProperty: "stroke-dasharray,transform",
+              transform:
+                "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
+              transformOrigin:
+                "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+            } as React.CSSProperties
+          }
+        />
+      </svg>
+      <span
+        data-current-value={currentPercent}
+        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+      >
+        {currentPercent}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index f000e3e..d3d5d60 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..ba084ed
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,363 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/src/pages/ServerDetail.tsx b/src/pages/ServerDetail.tsx
index 11e3769..8e5afde 100644
--- a/src/pages/ServerDetail.tsx
+++ b/src/pages/ServerDetail.tsx
@@ -1,173 +1,11 @@
-
-import { BackIcon } from "@/components/Icon";
-import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
-import ServerFlag from "@/components/ServerFlag";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
-import { NezhaAPIResponse } from "@/types/nezha-api";
-import { useNavigate, useParams } from "react-router-dom";
-import useWebSocket from "react-use-websocket";
-
+import ServerDetailChart from "@/components/ServerDetailChart";
+import ServerDetailOverview from "@/components/ServerDetailOverview";
 
 export default function ServerDetail() {
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
-    shouldReconnect: () => true,
-    reconnectInterval: 3000,
-  });
-
-
-  // 检查连接状态
-  if (readyState !== 1) {
-    return (
-      <div className="flex flex-col items-center justify-center">
-        <p className="font-semibold text-sm">connecting...</p>
-      </div>
-    );
-  }
-
-  // 解析消息
-  const nezhaWsData = lastMessage
-    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
-    : null;
-
-  if (!nezhaWsData) {
-    return <ServerDetailLoading />;
-  }
-
-  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
-
-  if (!server) {
-    return <ServerDetailLoading />;
-  }
-
-  const { name, online,uptime,version } =
-    formatNezhaInfo(server);
-  
-
-
   return (
-    <div className="mx-auto w-full max-w-5xl px-0">
-      <div
-        onClick={() => navigate("/")}
-        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
-      >
-        <BackIcon />
-        {name}
-      </div>
-      <section className="flex flex-wrap gap-2 mt-3">
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Status"}</p>
-              <Badge
-                className={cn(
-                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
-                  {
-                    " bg-green-800": online,
-                    " bg-red-600": !online,
-                  },
-                )}
-              >
-                {online ? "Online" : "Offline"}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Uptime"}</p>
-              <div className="text-xs">
-                {" "}
-                {online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
-                {"Days"}{" "}
-              </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Version"}</p>
-              <div className="text-xs">{version || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Arch"}</p>
-              <div className="text-xs">{server.host.arch || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Mem"}</p>
-              <div className="text-xs">{formatBytes(server.host.mem_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Disk"}</p>
-              <div className="text-xs">{formatBytes(server.host.disk_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Region"}</p>
-              <section className="flex items-start gap-1">
-                <div className="text-xs text-start">
-                  {server.host.country_code?.toUpperCase() || "Unknown"}
-                </div>
-                {server.host.country_code && (<ServerFlag
-                  className="text-[11px] -mt-[1px]"
-                  country_code={server.host.country_code}
-                />)}
-                
-              </section>
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-      <section className="flex flex-wrap gap-2 mt-1">
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"System"}</p>
-              {server.host.platform ? (
-                <div className="text-xs">
-                  {" "}
-                  {server.host.platform || "Unknown"} -{" "}
-                  {server.host.platform_version}{" "}
-                </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"CPU"}</p>
-              {server.host.cpu ? (
-                <div className="text-xs"> {server.host.cpu}</div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-      </section>
+    <div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
+      <ServerDetailOverview />
+      <ServerDetailChart />
     </div>
   );
 }