Merge branch 'main' into cloudflare-dev

.env.example

@@ -1,6 +1,13 @@
 NezhaBaseUrl=http://124.XX.XX.XX:8008
 NezhaAuth=your-nezha-api-token
 DefaultLocale=zh
+ForceShowAllServers=false
 NEXT_PUBLIC_NezhaFetchInterval=5000
 NEXT_PUBLIC_ShowFlag=true
-NEXT_PUBLIC_DisableCartoon=true
+NEXT_PUBLIC_DisableCartoon=false
+NEXT_PUBLIC_ShowTag=true
+NEXT_PUBLIC_ShowNetTransfer=false
+NEXT_PUBLIC_ForceUseSvgFlag=false
+NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
+NEXT_PUBLIC_CustomTitle=NezhaDash
+NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.

.github/workflows/Deploy.yml

@@ -10,33 +10,6 @@ env:
   ALIYUN_REGISTRY_IMAGE: registry.cn-guangzhou.aliyuncs.com/hamster-home/nezha-dash
 
 jobs:
-  changelog:
-    name: Generate Changelog
-    runs-on: ubuntu-latest
-    outputs:
-      release_body: ${{ steps.git-cliff.outputs.content }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Generate a changelog
-        uses: orhun/git-cliff-action@v4
-        id: git-cliff
-        with:
-          config: git-cliff-config/cliff.toml
-          args: -vv --latest --strip 'footer'
-        env:
-          OUTPUT: CHANGES.md
-      - name: Release
-        uses: softprops/action-gh-release@v2
-        if: startsWith(github.ref, 'refs/tags/')
-        with:
-          body: ${{ steps.git-cliff.outputs.content }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-        env:
-          GITHUB_REPOSITORY: ${{ github.repository }}
-
   build-and-push:
     name: Build and push Docker image
     runs-on: ubuntu-latest
@@ -83,3 +56,31 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+
+  changelog:
+    name: Generate Changelog
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    outputs:
+      release_body: ${{ steps.git-cliff.outputs.content }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Generate a changelog
+        uses: orhun/git-cliff-action@v4
+        id: git-cliff
+        with:
+          config: git-cliff-config/cliff.toml
+          args: -vv --latest --strip 'footer'
+        env:
+          OUTPUT: CHANGES.md
+      - name: Release
+        uses: softprops/action-gh-release@v2
+        if: startsWith(github.ref, 'refs/tags/')
+        with:
+          body: ${{ steps.git-cliff.outputs.content }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          GITHUB_REPOSITORY: ${{ github.repository }}

Dockerfile

@@ -1,43 +1,25 @@
 FROM oven/bun:1 AS base
 
+# Stage 1: Install dependencies
 FROM base AS deps
 WORKDIR /app
+COPY package.json bun.lockb ./
+RUN bun install --frozen-lockfile
 
-
+# Stage 2: Build the application
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lockb* ./
-RUN bun install
-
-
 FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
-
 RUN bun run build
 
-
+# Stage 3: Production image
-FROM node:21-alpine AS runner
+FROM oven/bun:1-alpine AS runner
-
 WORKDIR /app
-
+ENV NODE_ENV=production
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
 COPY --from=builder /app/public ./public
-
+COPY --from=builder /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/.env.example ./.env
-
-USER nextjs
 
 EXPOSE 3000
-
+CMD ["bun", "run", "server.js"]
-ENV PORT 3000
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]

README.md

@@ -5,21 +5,28 @@
 
 </div>
 
-| 一键部署到 Vercel-推荐                                | Docker部署                                                      | Cloudflare部署                                                          |
+| 一键部署到 Vercel-推荐                                | Docker部署                                                      | Cloudflare部署                                                          | 如何更新？                                                |
-| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| ----------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------- |
-| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) |
+| [部署简易教程](https://buycoffee.top/blog/tech/nezha) | [Docker 部署教程](https://buycoffee.top/blog/tech/nezha-docker) | [Cloudflare 部署教程](https://buycoffee.top/blog/tech/nezha-cloudflare) | [更新教程](https://buycoffee.top/blog/tech/nezha-upgrade) |
 | [Vercel-demo](https://nezha-dash-ruddy.vercel.app)    | [Docker-demo](https://nezha-docker.buycoffee.tech)              | [Cloudflare-demo](https://nezha-cloudflare.buycoffee.tech)              |
 
 #### 环境变量
 
-| 变量名                         | 含义                             | 示例                             |
+| 变量名                         | 含义                             | 示例                                                          |
-| ------------------------------ | -------------------------------- | -------------------------------- |
+| ------------------------------ | -------------------------------- | ------------------------------------------------------------- |
-| NezhaBaseUrl                   | nezha 面板地址                   | http://120.x.x.x:8008            |
+| NezhaBaseUrl                   | nezha 面板地址                   | http://120.x.x.x:8008                                         |
-| NezhaAuth                      | nezha 面板 API Token             | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
+| NezhaAuth                      | nezha 面板 API Token             | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi                              |
-| DefaultLocale                  | 面板默认显示语言（代码参考下表） | **默认**：en                     |
+| DefaultLocale                  | 面板默认显示语言（代码参考下表） | **默认**：en                                                  |
-| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒）             | **默认**：2000                   |
+| ForceShowAllServers            | 是否强制显示所有服务器           | **默认**：false                                               |
-| NEXT_PUBLIC_ShowFlag           | 是否显示旗帜                     | **默认**：false                  |
+| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒）             | **默认**：2000                                                |
-| NEXT_PUBLIC_DisableCartoon     | 是否禁用卡通人物                 | **默认**：false                  |
+| NEXT_PUBLIC_ShowFlag           | 是否显示旗帜                     | **默认**：false                                               |
+| NEXT_PUBLIC_DisableCartoon     | 是否禁用卡通人物                 | **默认**：false                                               |
+| NEXT_PUBLIC_ShowTag            | 是否显示标签                     | **默认**：false                                               |
+| NEXT_PUBLIC_ShowNetTransfer    | 是否显示流量信息                 | **默认**：false                                               |
+| NEXT_PUBLIC_ForceUseSvgFlag    | 是否强制使用SVG旗帜              | **默认**：false                                               |
+| NEXT_PUBLIC_CustomLogo         | 自定义Logo                       | **示例**：https://nezha-cf.buycoffee.top/apple-touch-icon.png |
+| NEXT_PUBLIC_CustomTitle        | 自定义标题                       |                                                               |
+| NEXT_PUBLIC_CustomDescription  | 自定义描述(无多语言支持)         |                                                               |
 
 #### 多语言支持
 
@@ -30,5 +37,9 @@
 | 英语     | en   | 是           |
 | 日语     | ja   | 是           |
 
-![screen-shot-one](/.github/shotOne.png)
+![screen](/.github/shot-1.png)
-![screen-shot-two](/.github/shotTwo.png)
+![screen](/.github/shot-2.png)
+![screen](/.github/shot-3.png)
+![screen](/.github/shot-1-dark.png)
+![screen](/.github/shot-2-dark.png)
+![screen](/.github/shot-3-dark.png)

app/[locale]/(main)/ClientComponents/NetworkChart.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import NetworkChartLoading from "@/app/[locale]/(main)/ClientComponents/NetworkChartLoading";
+import {
+  NezhaAPIMonitor,
+  ServerMonitorChart,
+} from "@/app/[locale]/types/nezha-api";
+import { BackIcon } from "@/components/Icon";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import getEnv from "@/lib/env-entry";
+import { formatTime, nezhaFetcher } from "@/lib/utils";
+import { formatRelativeTime } from "@/lib/utils";
+import { useLocale } from "next-intl";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import useSWR from "swr";
+
+interface ResultItem {
+  created_at: number;
+  [key: string]: number | null;
+}
+
+export function NetworkChartClient({
+  server_id,
+  show,
+}: {
+  server_id: number;
+  show: boolean;
+}) {
+  const t = useTranslations("NetworkChartClient");
+  const { data, error } = useSWR<NezhaAPIMonitor[]>(
+    `/api/monitor?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval:
+        Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
+      isPaused: () => !show,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+        <NetworkChartLoading />
+      </>
+    );
+  }
+
+  if (!data) return <NetworkChartLoading />;
+
+  const transformedData = transformData(data);
+
+  const formattedData = formatData(data);
+
+  const initChartConfig = {
+    avg_delay: {
+      label: t("avg_delay"),
+    },
+  } satisfies ChartConfig;
+
+  const chartDataKey = Object.keys(transformedData);
+
+  return (
+    <NetworkChart
+      chartDataKey={chartDataKey}
+      chartConfig={initChartConfig}
+      chartData={transformedData}
+      serverName={data[0].server_name}
+      formattedData={formattedData}
+    />
+  );
+}
+
+export const NetworkChart = React.memo(function NetworkChart({
+  chartDataKey,
+  chartConfig,
+  chartData,
+  serverName,
+  formattedData,
+}: {
+  chartDataKey: string[];
+  chartConfig: ChartConfig;
+  chartData: ServerMonitorChart;
+  serverName: string;
+  formattedData: ResultItem[];
+}) {
+  const t = useTranslations("NetworkChart");
+  const router = useRouter();
+  const locale = useLocale();
+
+  const defaultChart = "All";
+
+  const [activeChart, setActiveChart] = React.useState(defaultChart);
+
+  const handleButtonClick = useCallback(
+    (chart: string) => {
+      setActiveChart((prev) => (prev === chart ? defaultChart : chart));
+    },
+    [defaultChart],
+  );
+
+  const getColorByIndex = useCallback(
+    (chart: string) => {
+      const index = chartDataKey.indexOf(chart);
+      return `hsl(var(--chart-${(index % 10) + 1}))`;
+    },
+    [chartDataKey],
+  );
+
+  const chartButtons = useMemo(
+    () =>
+      chartDataKey.map((key) => (
+        <button
+          key={key}
+          data-active={activeChart === key}
+          className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
+          onClick={() => handleButtonClick(key)}
+        >
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {key}
+          </span>
+          <span className="text-md font-bold leading-none sm:text-lg">
+            {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
+          </span>
+        </button>
+      )),
+    [chartDataKey, activeChart, chartData, handleButtonClick],
+  );
+
+  const chartLines = useMemo(() => {
+    if (activeChart !== defaultChart) {
+      return (
+        <Line
+          isAnimationActive={false}
+          strokeWidth={1}
+          type="linear"
+          dot={false}
+          dataKey="avg_delay"
+          stroke={getColorByIndex(activeChart)}
+        />
+      );
+    }
+    return chartDataKey.map((key) => (
+      <Line
+        key={key}
+        isAnimationActive={false}
+        strokeWidth={1}
+        type="linear"
+        dot={false}
+        dataKey={key}
+        stroke={getColorByIndex(key)}
+        connectNulls={true}
+      />
+    ));
+  }, [activeChart, defaultChart, chartDataKey, getColorByIndex]);
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
+        <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
+          <CardTitle
+            onClick={() => {
+              router.push(`/${locale}/`);
+            }}
+            className="flex flex-none cursor-pointer items-center gap-0.5 text-xl"
+          >
+            <BackIcon />
+            {serverName}
+          </CardTitle>
+          <CardDescription className="text-xs">
+            {chartDataKey.length} {t("ServerMonitorCount")}
+          </CardDescription>
+        </div>
+        <div className="flex flex-wrap">{chartButtons}</div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={
+              activeChart === defaultChart
+                ? formattedData
+                : chartData[activeChart]
+            }
+            margin={{ left: 12, right: 12 }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="created_at"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              interval={"preserveStartEnd"}
+              tickFormatter={(value) => formatRelativeTime(value)}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              mirror={true}
+              tickMargin={-15}
+              minTickGap={20}
+              tickFormatter={(value) => `${value}ms`}
+            />
+            <ChartTooltip
+              isAnimationActive={false}
+              content={
+                <ChartTooltipContent
+                  indicator={"line"}
+                  labelKey="created_at"
+                  labelFormatter={(_, payload) => {
+                    return formatTime(payload[0].payload.created_at);
+                  }}
+                />
+              }
+            />
+            {activeChart === defaultChart && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+            {chartLines}
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+});
+
+const transformData = (data: NezhaAPIMonitor[]) => {
+  const monitorData: ServerMonitorChart = {};
+
+  data.forEach((item) => {
+    const monitorName = item.monitor_name;
+
+    if (!monitorData[monitorName]) {
+      monitorData[monitorName] = [];
+    }
+
+    for (let i = 0; i < item.created_at.length; i++) {
+      monitorData[monitorName].push({
+        created_at: item.created_at[i],
+        avg_delay: item.avg_delay[i],
+      });
+    }
+  });
+
+  return monitorData;
+};
+
+const formatData = (rawData: NezhaAPIMonitor[]) => {
+  const result: { [time: number]: ResultItem } = {};
+
+  const allTimes = new Set<number>();
+  rawData.forEach((item) => {
+    item.created_at.forEach((time) => allTimes.add(time));
+  });
+
+  const allTimeArray = Array.from(allTimes).sort((a, b) => a - b);
+
+  rawData.forEach((item) => {
+    const { monitor_name, created_at, avg_delay } = item;
+
+    allTimeArray.forEach((time) => {
+      if (!result[time]) {
+        result[time] = { created_at: time };
+      }
+
+      const timeIndex = created_at.indexOf(time);
+      result[time][monitor_name] =
+        timeIndex !== -1 ? avg_delay[timeIndex] : null;
+    });
+  });
+
+  return Object.values(result).sort((a, b) => a.created_at - b.created_at);
+};

app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx

@@ -0,0 +1,35 @@
+import { BackIcon } from "@/components/Icon";
+import { Loader } from "@/components/loading/Loader";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function NetworkChartLoading() {
+  const router = useRouter();
+  const locale = useLocale();
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5">
+          <CardTitle
+            onClick={() => {
+              router.push(`/${locale}/`);
+            }}
+            className="flex items-center cursor-pointer gap-0.5 text-xl"
+          >
+            <BackIcon />
+            <div className="aspect-auto h-[20px] w-24 bg-muted"></div>
+          </CardTitle>
+          <div className="mt-[2px] aspect-auto h-[14px] w-32 bg-muted"></div>
+        </div>
+        <div className="hidden pr-4 pt-4 sm:block">
+          <Loader visible={true} />
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <div className="aspect-auto h-[250px] w-full"></div>
+      </CardContent>
+    </Card>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -0,0 +1,754 @@
+"use client";
+
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import getEnv from "@/lib/env-entry";
+import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import useSWR from "swr";
+
+import { NezhaAPISafe } from "../../types/nezha-api";
+
+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 ServerDetailChartClient({
+  server_id,
+  show,
+}: {
+  server_id: number;
+  show: boolean;
+}) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+      isPaused: () => !show,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+  if (!data) return null;
+
+  return (
+    <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+      <CpuChart data={data} />
+      <ProcessChart data={data} />
+      <DiskChart data={data} />
+      <MemChart data={data} />
+      <NetworkChart data={data} />
+      <ConnectChart data={data} />
+    </section>
+  );
+}
+
+function CpuChart({ data }: { data: NezhaAPISafe }) {
+  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 className=" rounded-sm">
+      <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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  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 className=" rounded-sm">
+      <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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  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 className=" rounded-sm">
+      <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">{t("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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  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 className="rounded-sm">
+      <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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  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 className=" rounded-sm">
+      <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">{t("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">
+                  {t("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: NezhaAPISafe }) {
+  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 className="rounded-sm">
+      <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>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { BackIcon } from "@/components/Icon";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import getEnv from "@/lib/env-entry";
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
+
+import ServerDetailLoading from "./ServerDetailLoading";
+
+export default function ServerDetailClient({
+  server_id,
+}: {
+  server_id: number;
+}) {
+  const t = useTranslations("ServerDetailClient");
+  const router = useRouter();
+  const locale = useLocale();
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("detail_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  if (!data) return <ServerDetailLoading />;
+
+  return (
+    <div>
+      <div
+        onClick={() => {
+          router.push(`/${locale}/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {data?.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">{t("status")}</p>
+              <Badge
+                className={cn(
+                  "text-[10px] rounded-[6px] w-fit px-1 py-0 dark:text-white",
+                  {
+                    " bg-green-800": data?.online_status,
+                    " bg-red-600": !data?.online_status,
+                  },
+                )}
+              >
+                {data?.online_status ? t("Online") : t("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">{t("Uptime")}</p>
+              <div className="text-xs">
+                {" "}
+                {(data?.status.Uptime / 86400).toFixed(0)} {t("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">{t("Version")}</p>
+              <div className="text-xs">{data?.host.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">{t("Arch")}</p>
+              <div className="text-xs">{data?.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">{t("Mem")}</p>
+              <div className="text-xs">{formatBytes(data?.host.MemTotal)}</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">{t("Disk")}</p>
+              <div className="text-xs">{formatBytes(data?.host.DiskTotal)}</div>
+            </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">{t("System")}</p>
+              {data?.host.Platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {data?.host.Platform || "Unknown"} -{" "}
+                  {data?.host.PlatformVersion}{" "}
+                </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">{t("CPU")}</p>
+              {data?.host.CPU ? (
+                <div className="text-xs"> {data?.host.CPU}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -0,0 +1,33 @@
+import { BackIcon } from "@/components/Icon";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function ServerDetailLoading() {
+  const router = useRouter();
+  const locale = useLocale();
+  return (
+    <div>
+      <div
+        onClick={() => {
+          router.push(`/${locale}/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </div>
+      <Skeleton className="flex flex-wrap gap-2 h-[100px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      <Separator className="my-4" />
+      <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </section>
+    </div>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerListClient.tsx

@@ -1,11 +1,19 @@
 "use client";
 
-import { ServerApi } from "../../types/nezha-api";
+import { ServerApi } from "@/app/[locale]/types/nezha-api";
-import ServerCard from "../../../../components/ServerCard";
+import ServerCard from "@/components/ServerCard";
-import { nezhaFetcher } from "../../../../lib/utils";
+import Switch from "@/components/Switch";
+import getEnv from "@/lib/env-entry";
+import { nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 import useSWR from "swr";
-import getEnv from "../../../../lib/env-entry";
+
 export default function ServerListClient() {
+  const t = useTranslations("ServerListClient");
+
+  const [tag, setTag] = useState<string>(t("defaultTag"));
+
   const { data, error } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
     refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
   });
@@ -13,13 +21,10 @@ export default function ServerListClient() {
     return (
       <div className="flex flex-col items-center justify-center">
         <p className="text-sm font-medium opacity-40">{error.message}</p>
-        <p className="text-sm font-medium opacity-40">
+        <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
-          Please check your environment variables and review the server console
-          logs for more details.
-        </p>
       </div>
     );
-  if (!data) return null;
+  if (!data?.result) return null;
 
   const { result } = data;
 
@@ -29,11 +34,26 @@ export default function ServerListClient() {
     return a.id - b.id;
   });
 
+  const allTag = sortedServers.map((server) => server.tag).filter((tag) => tag);
+  const uniqueTags = [...new Set(allTag)];
+
+  uniqueTags.unshift(t("defaultTag"));
+
+  const filteredServers =
+    tag === t("defaultTag")
+      ? sortedServers
+      : sortedServers.filter((server) => server.tag === tag);
+
   return (
-    <section className="grid grid-cols-1 gap-2 md:grid-cols-2">
+    <>
-      {sortedServers.map((serverInfo) => (
+      {getEnv("NEXT_PUBLIC_ShowTag") === "true" && uniqueTags.length > 1 && (
-        <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+        <Switch allTag={uniqueTags} nowTag={tag} setTag={setTag} />
-      ))}
+      )}
-    </section>
+      <section className="grid grid-cols-1 gap-2 md:grid-cols-2">
+        {filteredServers.map((serverInfo) => (
+          <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+        ))}
+      </section>
+    </>
   );
 }

app/[locale]/(main)/[id]/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { NetworkChartClient } from "@/app/[locale]/(main)/ClientComponents/NetworkChart";
+import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
+import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
+import TabSwitch from "@/components/TabSwitch";
+import { Separator } from "@/components/ui/separator";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export default function Page({ params }: { params: { id: string } }) {
+  const t = useTranslations("TabSwitch");
+
+  const tabs = [t("Detail"), t("Network")];
+  const [currentTab, setCurrentTab] = useState(tabs[0]);
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-2">
+      <ServerDetailClient server_id={Number(params.id)} />
+      <section className="flex items-center my-2 w-full">
+        <Separator className="flex-1" />
+        <div className="flex justify-center w-full max-w-[200px]">
+          <TabSwitch
+            tabs={tabs}
+            currentTab={currentTab}
+            setCurrentTab={setCurrentTab}
+          />
+        </div>
+        <Separator className="flex-1" />
+      </section>
+      {currentTab === tabs[0] && (
+        <ServerDetailChartClient server_id={Number(params.id)} show={true} />
+      )}
+      {currentTab === tabs[1] && (
+        <NetworkChartClient server_id={Number(params.id)} show={true} />
+      )}
+    </div>
+  );
+}

app/[locale]/(main)/footer.tsx

@@ -1,4 +1,5 @@
 import { useTranslations } from "next-intl";
+
 export default function Footer() {
   const t = useTranslations("Footer");
   return (

app/[locale]/(main)/header.tsx

@@ -1,35 +1,53 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import React, { useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import { Separator } from "../../../components/ui/separator";
-import { DateTime } from "luxon";
-import { ModeToggle } from "../../../components/ThemeSwitcher";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { ModeToggle } from "@/components/ThemeSwitcher";
+import { Separator } from "@/components/ui/separator";
+import getEnv from "@/lib/env-entry";
+import { DateTime } from "luxon";
+import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useRef, useState } from "react";
+
 function Header() {
   const t = useTranslations("Header");
+  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
+  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
+  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
+
+  const router = useRouter();
+  const locale = useLocale();
+
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
-        <section className="flex items-center text-base font-medium">
+        <section
+          onClick={() => {
+            router.push(`/${locale}/`);
+          }}
+          className="flex cursor-pointer items-center text-base font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start">
             <Image
               width={40}
               height={40}
               unoptimized
               alt="apple-touch-icon"
-              src={"/apple-touch-icon.png"}
+              src={customLogo ? customLogo : "/apple-touch-icon.png"}
-              className="relative !m-0 h-6 w-6 border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
+              className="relative !m-0 border-2 border-transparent h-6 w-6 object-cover object-top !p-0"
             />
           </div>
-          NezhaDash
+          {customTitle ? customTitle : "NezhaDash"}
           <Separator
             orientation="vertical"
             className="mx-2 hidden h-4 w-[1px] md:block"
           />
           <p className="hidden text-sm font-medium opacity-40 md:block">
-            {t("p_1079-1199_Simpleandbeautifuldashbo")}
+            {customDescription
+              ? customDescription
+              : t("p_1079-1199_Simpleandbeautifuldashbo")}
           </p>
         </section>
         <section className="flex items-center gap-2">

app/[locale]/(main)/layout.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import Footer from "@/app/[locale]/(main)/footer";
 import Header from "@/app/[locale]/(main)/header";
-import Footer from "./footer";
+import React from "react";
 
 type DashboardProps = {
   children: React.ReactNode;

app/[locale]/(main)/page.tsx

@@ -1,6 +1,6 @@
+import ServerList from "@/components/ServerList";
+import ServerOverview from "@/components/ServerOverview";
 import { unstable_setRequestLocale } from "next-intl/server";
-import ServerList from "../../../components/ServerList";
-import ServerOverview from "../../../components/ServerOverview";
 
 export default function Home({
   params: { locale },

app/[locale]/layout.tsx

@@ -1,31 +1,34 @@
 // @auto-i18n-check. Please do not delete the line.
-
-import "@/styles/globals.css";
-import "/node_modules/flag-icons/css/flag-icons.min.css";
-
-import React from "react";
-import { NextIntlClientProvider, useMessages } from "next-intl";
-import { PublicEnvScript } from "next-runtime-env";
-import type { Metadata } from "next";
-import { Inter as FontSans } from "next/font/google";
-import { ThemeProvider } from "next-themes";
-import { Viewport } from "next";
-import { cn } from "@/lib/utils";
 import { locales } from "@/i18n-metadata";
+import getEnv from "@/lib/env-entry";
+import { cn } from "@/lib/utils";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+import { Viewport } from "next";
+import { NextIntlClientProvider, useMessages } from "next-intl";
 import { unstable_setRequestLocale } from "next-intl/server";
+import { PublicEnvScript } from "next-runtime-env";
+import { ThemeProvider } from "next-themes";
+import { Inter as FontSans } from "next/font/google";
+import React from "react";
+
+import "/node_modules/flag-icons/css/flag-icons.min.css";
 
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
 });
 
+const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
+const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
+
 export const metadata: Metadata = {
   manifest: "/manifest.json",
-  title: "NezhaDash",
+  title: customTitle || "NezhaDash",
-  description: "A dashboard for nezha",
+  description: customDescription || "A dashboard for nezha",
   appleWebApp: {
     capable: true,
-    title: "NezhaDash",
+    title: customTitle || "NezhaDash",
     statusBarStyle: "black-translucent",
   },
 };
@@ -37,8 +40,6 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
-export const dynamic = "force-static";
-
 export async function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }

app/[locale]/types/nezha-api.ts

@@ -1,7 +1,8 @@
 export type ServerApi = {
   live_servers: number;
   offline_servers: number;
-  total_bandwidth: number;
+  total_out_bandwidth: number;
+  total_in_bandwidth: number;
   result: NezhaAPISafe[];
 };
 
@@ -17,6 +18,7 @@ export interface NezhaAPI {
   ipv6: string;
   valid_ip: string;
   display_index: number;
+  hide_for_guest: boolean;
   host: NezhaAPIHost;
   status: NezhaAPIStatus;
 }
@@ -55,3 +57,19 @@ export interface NezhaAPIStatus {
   Temperatures: number;
   GPU: number;
 }
+
+export type ServerMonitorChart = {
+  [key: string]: {
+    created_at: number;
+    avg_delay: number;
+  }[];
+};
+
+export interface NezhaAPIMonitor {
+  monitor_id: number;
+  monitor_name: string;
+  server_id: number;
+  server_name: string;
+  created_at: number[];
+  avg_delay: number[];
+}

app/api/detail/route.ts

@@ -0,0 +1,29 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { GetServerDetail } from "@/lib/serverFetch";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+interface NezhaDataResponse {
+  error?: string;
+  data?: NezhaAPISafe;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const server_id = searchParams.get("server_id");
+  if (!server_id) {
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
+  }
+  const response = (await GetServerDetail({
+    server_id: parseInt(server_id),
+  })) as NezhaDataResponse;
+  if (response.error) {
+    console.log(response.error);
+    return NextResponse.json({ error: response.error }, { status: 400 });
+  }
+  return NextResponse.json(response, { status: 200 });
+}

app/api/monitor/route.ts

@@ -0,0 +1,29 @@
+import { ServerMonitorChart } from "@/app/[locale]/types/nezha-api";
+import { GetServerMonitor } from "@/lib/serverFetch";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+interface NezhaDataResponse {
+  error?: string;
+  data?: ServerMonitorChart;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const server_id = searchParams.get("server_id");
+  if (!server_id) {
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
+  }
+  const response = (await GetServerMonitor({
+    server_id: parseInt(server_id),
+  })) as NezhaDataResponse;
+  if (response.error) {
+    console.log(response.error);
+    return NextResponse.json({ error: response.error }, { status: 400 });
+  }
+  return NextResponse.json(response, { status: 200 });
+}

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://registry.npmmirror.com/"

components/BlurLayer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 const BlurLayers = () => {
   const computeLayerStyle = (index: number) => {
     const blurAmount = index * 3.7037;

components/LanguageSwitcher.tsx

@@ -1,10 +1,5 @@
 "use client";
 
-import { useLocale } from "next-intl";
-import { localeItems } from "../i18n-metadata";
-import { useRouter, usePathname } from "next/navigation";
-import * as React from "react";
-
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -12,6 +7,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useLocale } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
+import * as React from "react";
+
+import { localeItems } from "../i18n-metadata";
 
 export function LanguageSwitcher() {
   const locale = useLocale();

components/ServerCard.tsx

@@ -1,17 +1,18 @@
-import { useTranslations } from "next-intl";
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
+import ServerCardPopover from "@/components/ServerCardPopover";
+import ServerFlag from "@/components/ServerFlag";
 import ServerUsageBar from "@/components/ServerUsageBar";
+import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { cn, formatNezhaInfo } from "@/lib/utils";
+import getEnv from "@/lib/env-entry";
-import ServerCardPopover from "./ServerCardPopover";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
-
+import { useLocale, useTranslations } from "next-intl";
-import { env } from "next-runtime-env";
+import { useRouter } from "next/navigation";
-import ServerFlag from "./ServerFlag";
 
 export default function ServerCard({
   serverInfo,
@@ -19,84 +20,130 @@ export default function ServerCard({
   serverInfo: NezhaAPISafe;
 }) {
   const t = useTranslations("ServerCard");
-  const { name, country_code, online, cpu, up, down, mem, stg, ...props } =
+  const router = useRouter();
+  const { id, name, country_code, online, cpu, up, down, mem, stg, ...props } =
     formatNezhaInfo(serverInfo);
 
-  const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true";
+  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
+
+  const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
+
+  const locale = useLocale();
 
   return online ? (
     <Card
       className={
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
       }
+      onClick={() => {
+        router.push(`/${locale}/${id}`);
+      }}
     >
-      <Popover>
+      <section
-        <PopoverTrigger asChild>
+        className="grid items-center gap-2 lg:w-28 "
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
+        style={{ gridTemplateColumns: "auto auto 1fr" }}
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+      >
-            <p
+        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-              className={cn(
+        <div
-                "break-all font-bold tracking-tight",
+          className={cn(
-                showFlag ? "text-xs" : "text-sm",
+            "flex items-center justify-center",
-              )}
+            showFlag ? "min-w-[17px]" : "min-w-0",
-            >
+          )}
-              {name}
+        >
-            </p>
+          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
-          </section>
-        </PopoverTrigger>
-        <PopoverContent side="top">
-          <ServerCardPopover status={props.status} host={props.host} />
-        </PopoverContent>
-      </Popover>
-      <section className={"grid grid-cols-5 items-center gap-3"}>
-        <div className={"flex w-14 flex-col"}>
-          <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-          <div className="flex items-center text-xs font-semibold">
-            {cpu.toFixed(2)}%
-          </div>
-          <ServerUsageBar value={cpu} />
-        </div>
-        <div className={"flex w-14 flex-col"}>
-          <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-          <div className="flex items-center text-xs font-semibold">
-            {mem.toFixed(2)}%
-          </div>
-          <ServerUsageBar value={mem} />
-        </div>
-        <div className={"flex w-14 flex-col"}>
-          <p className="text-xs text-muted-foreground">{t("STG")}</p>
-          <div className="flex items-center text-xs font-semibold">
-            {stg.toFixed(2)}%
-          </div>
-          <ServerUsageBar value={stg} />
-        </div>
-        <div className={"flex w-14 flex-col"}>
-          <p className="text-xs text-muted-foreground">{t("Upload")}</p>
-          <div className="flex items-center text-xs font-semibold">
-            {up.toFixed(2)}
-            Mb/s
-          </div>
-        </div>
-        <div className={"flex w-14 flex-col"}>
-          <p className="text-xs text-muted-foreground">{t("Download")}</p>
-          <div className="flex items-center text-xs font-semibold">
-            {down.toFixed(2)}
-            Mb/s
-          </div>
         </div>
+        <p
+          className={cn(
+            "break-all font-bold tracking-tight",
+            showFlag ? "text-xs" : "text-sm",
+          )}
+        >
+          {name}
+        </p>
       </section>
+      <div className="flex flex-col gap-2">
+        <section className={"grid  grid-cols-5 items-center gap-3"}>
+          <div className={"flex w-14 flex-col"}>
+            <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+            <div className="flex items-center text-xs font-semibold">
+              {cpu.toFixed(2)}%
+            </div>
+            <ServerUsageBar value={cpu} />
+          </div>
+          <div className={"flex w-14 flex-col"}>
+            <p className="text-xs text-muted-foreground">{t("Mem")}</p>
+            <div className="flex items-center text-xs font-semibold">
+              {mem.toFixed(2)}%
+            </div>
+            <ServerUsageBar value={mem} />
+          </div>
+          <div className={"flex w-14 flex-col"}>
+            <p className="text-xs text-muted-foreground">{t("STG")}</p>
+            <div className="flex items-center text-xs font-semibold">
+              {stg.toFixed(2)}%
+            </div>
+            <ServerUsageBar value={stg} />
+          </div>
+          <div className={"flex w-14 flex-col"}>
+            <p className="text-xs text-muted-foreground">{t("Upload")}</p>
+            <div className="flex items-center text-xs font-semibold">
+              {up.toFixed(2)}M/s
+            </div>
+          </div>
+          <div className={"flex w-14 flex-col"}>
+            <p className="text-xs text-muted-foreground">{t("Download")}</p>
+            <div className="flex items-center text-xs font-semibold">
+              {down.toFixed(2)}M/s
+            </div>
+          </div>
+        </section>
+        {showNetTransfer && (
+          <section
+            onClick={() => {
+              router.push(`/${locale}/network/${id}`);
+            }}
+            className={"flex items-center justify-between gap-1"}
+          >
+            <Badge
+              variant="secondary"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
+            </Badge>
+          </section>
+        )}
+      </div>
     </Card>
   ) : (
     <Card
-      className={
+      className={cn(
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
-      }
+        showNetTransfer
+          ? "lg:min-h-[91px] min-h-[123px]"
+          : "lg:min-h-[61px] min-h-[93px]",
+      )}
     >
       <Popover>
         <PopoverTrigger asChild>
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
+          <section
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto auto 1fr" }}
+          >
+            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
+            <div
+              className={cn(
+                "flex items-center justify-center",
+                showFlag ? "min-w-[17px]" : "min-w-0",
+              )}
+            >
+              {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            </div>
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -105,7 +152,6 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent className="w-fit p-2" side="top">

components/ServerCardPopover.tsx

@@ -1,6 +1,6 @@
-import { useTranslations } from "next-intl";
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
 import { cn, formatBytes } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 
 export function ServerCardPopoverCard({
   className,

components/ServerFlag.tsx

@@ -1,10 +1,19 @@
-import { useEffect, useState } from "react";
+import getEnv from "@/lib/env-entry";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
+import { useEffect, useState } from "react";
 
 export default function ServerFlag({ country_code }: { country_code: string }) {
   const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
 
+  const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true";
+
   useEffect(() => {
+    if (useSvgFlag) {
+      // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持
+      setSupportsEmojiFlags(false);
+      return;
+    }
+
     const checkEmojiSupport = () => {
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
@@ -20,13 +29,17 @@ export default function ServerFlag({ country_code }: { country_code: string }) {
     };
 
     checkEmojiSupport();
-  }, []);
+  }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
 
   if (!country_code) return null;
 
+  if (supportsEmojiFlags && country_code.toLowerCase() === "tw") {
+    country_code = "cn";
+  }
+
   return (
     <span className="text-[12px] text-muted-foreground">
-      {!supportsEmojiFlags ? (
+      {useSvgFlag || !supportsEmojiFlags ? (
         <span className={`fi fi-${country_code}`}></span>
       ) : (
         getUnicodeFlagIcon(country_code)

components/ServerList.tsx

@@ -1,7 +1,6 @@
+import ServerListClient from "@/app/[locale]/(main)/ClientComponents/ServerListClient";
 import React from "react";
 
-import ServerListClient from "../app/[locale]/(main)/ClientComponents/ServerListClient";
-
 export default async function ServerList() {
   return <ServerListClient />;
 }

components/ServerOverview.tsx

@@ -1,4 +1,4 @@
-import ServerOverviewClient from "../app/[locale]/(main)/ClientComponents/ServerOverviewClient";
+import ServerOverviewClient from "@/app/[locale]/(main)/ClientComponents/ServerOverviewClient";
 
 export default async function ServerOverview() {
   return <ServerOverviewClient />;

components/ServerUsageBar.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-
 import { Progress } from "@/components/ui/progress";
+import React from "react";
 
 type ServerUsageBarProps = {
   value: number;

components/Switch.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import React from "react";
+
+export default function Switch({
+  allTag,
+  nowTag,
+  setTag,
+}: {
+  allTag: string[];
+  nowTag: string;
+  setTag: (tag: string) => void;
+}) {
+  return (
+    <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
+      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+        {allTag.map((tag) => (
+          <div
+            key={tag}
+            onClick={() => setTag(tag)}
+            className={cn(
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
+              nowTag === tag
+                ? "text-black dark:text-white"
+                : "text-stone-400 dark:text-stone-500",
+            )}
+          >
+            {nowTag === tag && (
+              <motion.div
+                layoutId="nav-item"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
+            <div className="relative z-20 flex items-center gap-1">
+              <p className="whitespace-nowrap">{tag}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/TabSwitch.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import React, { useState } from "react";
+
+export default function TabSwitch({
+  tabs,
+  currentTab,
+  setCurrentTab,
+}: {
+  tabs: string[];
+  currentTab: string;
+  setCurrentTab: (tab: string) => void;
+}) {
+  return (
+    <div className="z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
+      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+        {tabs.map((tab: string) => (
+          <div
+            key={tab}
+            onClick={() => setCurrentTab(tab)}
+            className={cn(
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
+              currentTab === tab
+                ? "text-black dark:text-white"
+                : "text-stone-400 dark:text-stone-500",
+            )}
+          >
+            {currentTab === tab && (
+              <motion.div
+                layoutId="tab-switch"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
+            <div className="relative z-20 flex items-center gap-1">
+              <p className="whitespace-nowrap">{tab}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/ThemeSwitcher.tsx

@@ -1,10 +1,5 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import * as React from "react";
-
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -12,6 +7,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import * as React from "react";
 
 export function ModeToggle() {
   const { setTheme } = useTheme();

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>
+  );
+}

components/ui/badge.tsx

@@ -1,10 +1,9 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-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",
+  "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

components/ui/button.tsx

@@ -1,8 +1,7 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
 import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",

components/ui/card.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-
 import { cn } from "@/lib/utils";
+import * as React from "react";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -78,9 +77,9 @@ CardFooter.displayName = "CardFooter";
 
 export {
   Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
   CardHeader,
+  CardFooter,
   CardTitle,
+  CardDescription,
+  CardContent,
 };

components/ui/chart.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+// 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;
+    }
+
+    payload.sort((a, b) => {
+      return Number(b.value) - Number(a.value);
+    });
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-sm 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={cn(
+                            "ml-2 font-mono font-medium tabular-nums text-foreground",
+                            payload.length === 1 && "-ml-9",
+                          )}
+                        >
+                          {typeof item.value === "number"
+                            ? item.value.toFixed(3).toLocaleString()
+                            : item.value}
+                        </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 flex-wrap 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,
+                  }}
+                />
+              )}
+              {key}
+            </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,
+};

components/ui/dropdown-menu.tsx

@@ -1,11 +1,10 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -65,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg shadow-neutral-200/50 dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}

components/ui/input.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-
 import { cn } from "@/lib/utils";
+import * as React from "react";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}

components/ui/navigation-menu.tsx

@@ -1,10 +1,9 @@
+import { cn } from "@/lib/utils";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>

components/ui/popover.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
 import { cn } from "@/lib/utils";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
 const Popover = PopoverPrimitive.Root;
 

components/ui/progress.tsx

@@ -1,10 +1,9 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {

components/ui/separator.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
 import { cn } from "@/lib/utils";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

components/ui/sheet.tsx

@@ -1,12 +1,11 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-
 const Sheet = SheetPrimitive.Root;
 
 const SheetTrigger = SheetPrimitive.Trigger;

components/ui/tooltip.tsx

@@ -1,10 +1,9 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-
 const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = TooltipPrimitive.Root;

docker/.env.example

@@ -1,6 +1,13 @@
 NezhaBaseUrl=http://124.XX.XX.XX:8008
 NezhaAuth=your-nezha-api-token
 DefaultLocale=zh
+ForceShowAllServers=false
 NEXT_PUBLIC_NezhaFetchInterval=5000
 NEXT_PUBLIC_ShowFlag=true
-NEXT_PUBLIC_DisableCartoon=true
+NEXT_PUBLIC_DisableCartoon=false
+NEXT_PUBLIC_ShowTag=true
+NEXT_PUBLIC_ShowNetTransfer=false
+NEXT_PUBLIC_ForceUseSvgFlag=false
+NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
+NEXT_PUBLIC_CustomTitle=NezhaDash
+NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.

i18n-metadata.ts

@@ -1,5 +1,4 @@
 // @auto-i18n-check. Please do not delete the line.
-
 import getEnv from "./lib/env-entry";
 
 export const localeItems = [

i18n.ts

@@ -1,7 +1,7 @@
 // @auto-i18n-check. Please do not delete the line.
-
-import { notFound } from "next/navigation";
 import { getRequestConfig } from "next-intl/server";
+import { notFound } from "next/navigation";
+
 import { locales } from "./i18n-metadata";
 
 export default getRequestConfig(async ({ locale }) => {

lib/serverFetch.tsx

@@ -1,9 +1,9 @@
 "use server";
 
-import { NezhaAPI, ServerApi } from "../app/[locale]/types/nezha-api";
+import { NezhaAPI, ServerApi } from "@/app/[locale]/types/nezha-api";
-import { MakeOptional } from "../app/[locale]/types/utils";
+import { MakeOptional } from "@/app/[locale]/types/utils";
+import getEnv from "@/lib/env-entry";
 import { unstable_noStore as noStore } from "next/cache";
-import getEnv from "./env-entry";
 
 export async function GetNezhaData() {
   noStore();
@@ -36,11 +36,24 @@ export async function GetNezhaData() {
     const data: ServerApi = {
       live_servers: 0,
       offline_servers: 0,
-      total_bandwidth: 0,
+      total_out_bandwidth: 0,
+      total_in_bandwidth: 0,
       result: [],
     };
+
+    var forceShowAllServers = getEnv("ForceShowAllServers");
+    let nezhaDataFiltered: NezhaAPI[];
+    if (forceShowAllServers === "true") {
+      nezhaDataFiltered = nezhaData;
+    } else {
+      // remove hidden servers
+      nezhaDataFiltered = nezhaData.filter(
+        (element) => !element.hide_for_guest,
+      );
+    }
+
     const timestamp = Date.now() / 1000;
-    data.result = nezhaData.map(
+    data.result = nezhaDataFiltered.map(
       (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
         if (timestamp - element.last_active > 300) {
           data.offline_servers += 1;
@@ -49,7 +62,8 @@ export async function GetNezhaData() {
           data.live_servers += 1;
           element.online_status = true;
         }
-        data.total_bandwidth += element.status.NetOutTransfer;
+        data.total_out_bandwidth += element.status.NetOutTransfer;
+        data.total_in_bandwidth += element.status.NetInTransfer;
 
         delete element.ipv4;
         delete element.ipv6;
@@ -64,3 +78,91 @@ export async function GetNezhaData() {
     return error;
   }
 }
+
+export async function GetServerMonitor({ server_id }: { server_id: number }) {
+  var nezhaBaseUrl = getEnv("NezhaBaseUrl");
+  if (!nezhaBaseUrl) {
+    console.log("NezhaBaseUrl is not set");
+    return { error: "NezhaBaseUrl is not set" };
+  }
+
+  // Remove trailing slash
+  if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
+    nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
+  }
+
+  try {
+    const response = await fetch(
+      nezhaBaseUrl + `/api/v1/monitor/${server_id}`,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 30,
+        },
+      },
+    );
+    const resData = await response.json();
+    const monitorData = resData.result;
+    if (!monitorData) {
+      console.log(resData);
+      return { error: "MonitorData fetch failed" };
+    }
+    return monitorData;
+  } catch (error) {
+    return error;
+  }
+}
+
+export async function GetServerDetail({ server_id }: { server_id: number }) {
+  var nezhaBaseUrl = getEnv("NezhaBaseUrl");
+  if (!nezhaBaseUrl) {
+    console.log("NezhaBaseUrl is not set");
+    return { error: "NezhaBaseUrl is not set" };
+  }
+
+  // Remove trailing slash
+  if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
+    nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
+  }
+
+  try {
+    const response = await fetch(
+      nezhaBaseUrl + `/api/v1/server/details?id=${server_id}`,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 0,
+        },
+      },
+    );
+    const resData = await response.json();
+    const detailDataList = resData.result;
+    if (!detailDataList) {
+      console.log(resData);
+      return { error: "MonitorData fetch failed" };
+    }
+
+    const timestamp = Date.now() / 1000;
+    const detailData = detailDataList.map(
+      (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        if (timestamp - element.last_active > 300) {
+          element.online_status = false;
+        } else {
+          element.online_status = true;
+        }
+        delete element.ipv4;
+        delete element.ipv6;
+        delete element.valid_ip;
+        return element;
+      },
+    )[0];
+
+    return detailData;
+  } catch (error) {
+    return error;
+  }
+}

lib/sseFetch.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import useSWRSubscription, {
   type SWRSubscriptionOptions,
 } from "swr/subscription";

lib/utils.ts

@@ -1,4 +1,4 @@
-import { NezhaAPISafe } from "../app/[locale]/types/nezha-api";
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -10,10 +10,15 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
   return {
     ...serverInfo,
     cpu: serverInfo.status.CPU,
+    process: serverInfo.status.ProcessCount,
     up: serverInfo.status.NetOutSpeed / 1024 / 1024,
     down: serverInfo.status.NetInSpeed / 1024 / 1024,
     online: serverInfo.online_status,
+    tcp: serverInfo.status.TcpConnCount,
+    udp: serverInfo.status.UdpConnCount,
     mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
+    swap: (serverInfo.status.SwapUsed / serverInfo.host.SwapTotal) * 100,
+    disk: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
     stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
     country_code: serverInfo.host.CountryCode,
   };
@@ -79,3 +84,34 @@ export const nezhaFetcher = (url: string) =>
       console.error(err);
       throw err;
     });
+
+export function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+  if (hours > 24) {
+    const days = Math.floor(hours / 24);
+    return `${days}d`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else if (minutes > 0) {
+    return `${minutes}m`;
+  } else if (seconds >= 0) {
+    return `${seconds}s`;
+  }
+  return "0s";
+}
+
+export function formatTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}

messages/en.json

@@ -3,7 +3,13 @@
     "p_816-881_Totalservers": "Total servers",
     "p_1610-1676_Onlineservers": "Online servers",
     "p_2532-2599_Offlineservers": "Offline servers",
-    "p_3463-3530_Totalbandwidth": "Total bandwidth"
+    "p_3463-3530_Totalbandwidth": "Total bandwidth",
+    "error_message": "Please check your environment variables and review the server console",
+    "no_data_message": "No data"
+  },
+  "ServerListClient": {
+    "error_message": "Please check your environment variables and review the server console",
+    "defaultTag": "All"
   },
   "ServerCard": {
     "CPU": "CPU",
@@ -13,6 +19,10 @@
     "Download": "Download",
     "Offline": "Offline"
   },
+  "TabSwitch": {
+    "Detail": "Detail",
+    "Network": "Network"
+  },
   "ServerCardPopover": {
     "System": "System",
     "CPU": "CPU",
@@ -24,6 +34,36 @@
     "Online": "Online",
     "Offline": "Offline"
   },
+  "NetworkChartClient": {
+    "avg_delay": "Latency",
+    "chart_fetch_error_message": "Failed to fetch network data, please check if the server monitoring is enabled"
+  },
+  "NetworkChart": {
+    "ServerMonitorCount": "Services"
+  },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "Please check your environment variables and review the server console",
+    "status": "Status",
+    "Online": "Online",
+    "Offline": "Offline",
+    "Uptime": "Uptime",
+    "Days": "Days",
+    "Version": "Version",
+    "Arch": "Arch",
+    "Mem": "Mem",
+    "Disk": "Disk",
+    "System": "System",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "Please check your environment variables and review the server console",
+    "Process": "Process",
+    "Disk": "Disk",
+    "Mem": "Mem",
+    "Swap": "Swap",
+    "Upload": "Upload",
+    "Download": "Download"
+  },
   "ThemeSwitcher": {
     "Light": "Light",
     "Dark": "Dark",

messages/ja.json

@@ -3,7 +3,13 @@
     "p_816-881_Totalservers": "サーバーの総数",
     "p_1610-1676_Onlineservers": "オンラインサーバー",
     "p_2532-2599_Offlineservers": "オフラインサーバー",
-    "p_3463-3530_Totalbandwidth": "総流量"
+    "p_3463-3530_Totalbandwidth": "総流量",
+    "error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "no_data_message": "データなし"
+  },
+  "ServerListClient": {
+    "error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "defaultTag": "すべて"
   },
   "ServerCard": {
     "CPU": "CPU",
@@ -13,6 +19,10 @@
     "Download": "Download",
     "Offline": "Offline"
   },
+  "TabSwitch": {
+    "Detail": "詳細",
+    "Network": "ネットワーク"
+  },
   "ServerCardPopover": {
     "System": "システム",
     "CPU": "CPU",
@@ -24,6 +34,36 @@
     "Online": "オンライン時間",
     "Offline": "オフライン"
   },
+  "NetworkChartClient": {
+    "avg_delay": "遅延",
+    "chart_fetch_error_message": "ネットワークデータの取得に失敗しました。サーバーの監視が有効になっているかどうかを確認してください"
+  },
+  "NetworkChart": {
+    "ServerMonitorCount": "サービス"
+  },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "status": "ステータス",
+    "Online": "オンライン",
+    "Offline": "オフライン",
+    "Uptime": "稼働時間",
+    "Days": "日",
+    "Version": "バージョン",
+    "Arch": "アーキテクチャ",
+    "Mem": "メモリ",
+    "Disk": "ディスク",
+    "System": "システム",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "Process": "進捗状況",
+    "Disk": "ディスク",
+    "Mem": "メモリ",
+    "Swap": "スワップ",
+    "Upload": "アップロード",
+    "Download": "ダウンロード"
+  },
   "ThemeSwitcher": {
     "Light": "ライト",
     "Dark": "ダーク",

messages/zh-t.json

@@ -3,7 +3,13 @@
     "p_816-881_Totalservers": "伺服器總數",
     "p_1610-1676_Onlineservers": "在線伺服器",
     "p_2532-2599_Offlineservers": "離線伺服器",
-    "p_3463-3530_Totalbandwidth": "總流量"
+    "p_3463-3530_Totalbandwidth": "總流量",
+    "error_message": "請檢查您的環境變數並檢查伺服器控制台",
+    "no_data_message": "無資料"
+  },
+  "ServerListClient": {
+    "error_message": "請檢查您的環境變數並檢查伺服器控制台",
+    "defaultTag": "全部"
   },
   "ServerCard": {
     "CPU": "CPU",
@@ -13,6 +19,10 @@
     "Download": "下載",
     "Offline": "離線"
   },
+  "TabSwitch": {
+    "Detail": "詳細",
+    "Network": "網路"
+  },
   "ServerCardPopover": {
     "System": "系統",
     "CPU": "CPU",
@@ -24,6 +34,36 @@
     "Online": "在線時間",
     "Offline": "離線"
   },
+  "NetworkChartClient": {
+    "avg_delay": "延遲",
+    "chart_fetch_error_message": "獲取網絡數據失敗，請檢查是否開啟服務端監控"
+  },
+  "NetworkChart": {
+    "ServerMonitorCount": "個監測服務"
+  },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
+    "status": "狀態",
+    "Online": "在線",
+    "Offline": "離線",
+    "Uptime": "稼働時間",
+    "Days": "天",
+    "Version": "版本",
+    "Arch": "架構",
+    "Mem": "記憶體",
+    "Disk": "磁碟",
+    "System": "系統",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
+    "Process": "進程",
+    "Disk": "磁碟",
+    "Mem": "記憶體",
+    "Swap": "虛擬記憶體",
+    "Upload": "上傳",
+    "Download": "下載"
+  },
   "ThemeSwitcher": {
     "Light": "亮色",
     "Dark": "暗色",

messages/zh.json

@@ -3,7 +3,13 @@
     "p_816-881_Totalservers": "服务器总数",
     "p_1610-1676_Onlineservers": "在线服务器",
     "p_2532-2599_Offlineservers": "离线服务器",
-    "p_3463-3530_Totalbandwidth": "总流量"
+    "p_3463-3530_Totalbandwidth": "总流量",
+    "error_message": "请检查您的环境变量并检查服务器控制台",
+    "no_data_message": "无数据"
+  },
+  "ServerListClient": {
+    "error_message": "请检查您的环境变量并检查服务器控制台",
+    "defaultTag": "全部"
   },
   "ServerCard": {
     "CPU": "CPU",
@@ -13,6 +19,10 @@
     "Download": "下载",
     "Offline": "离线"
   },
+  "TabSwitch": {
+    "Detail": "详情",
+    "Network": "网络"
+  },
   "ServerCardPopover": {
     "System": "系统",
     "CPU": "CPU",
@@ -24,6 +34,36 @@
     "Online": "在线时间",
     "Offline": "离线"
   },
+  "NetworkChartClient": {
+    "avg_delay": "延迟",
+    "chart_fetch_error_message": "获取网络数据失败，请检查是否开启服务端监控"
+  },
+  "NetworkChart": {
+    "ServerMonitorCount": "个监控服务"
+  },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
+    "status": "状态",
+    "Online": "在线",
+    "Offline": "离线",
+    "Uptime": "运行时间",
+    "Days": "天",
+    "Version": "版本",
+    "Arch": "架构",
+    "Mem": "内存",
+    "Disk": "磁盘",
+    "System": "系统",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
+    "Process": "进程",
+    "Disk": "磁盘",
+    "Mem": "内存",
+    "Swap": "虚拟内存",
+    "Upload": "上传",
+    "Download": "下载"
+  },
   "ThemeSwitcher": {
     "Light": "亮色",
     "Dark": "暗色",

middleware.ts

@@ -1,6 +1,6 @@
 // @auto-i18n-check. Please do not delete the line.
-
 import createMiddleware from "next-intl/middleware";
+
 import { defaultLocale, locales } from "./i18n-metadata";
 
 export default createMiddleware({
@@ -12,7 +12,7 @@ export default createMiddleware({
 
   // 'always': This is the default, The home page will also be redirected to the default language, such as www.abc.com to www.abc.com/en
   // 'as-needed': The default page is not redirected. For example, if you open www.abc.com, it is still www.abc.com
-  localePrefix: "as-needed",
+  localePrefix: "always",
 });
 
 export const config = {

next.config.mjs

@@ -1,12 +1,13 @@
+import withPWAInit from "@ducanh2912/next-pwa";
 import withBundleAnalyzer from "@next/bundle-analyzer";
+import createNextIntlPlugin from "next-intl/plugin";
 
 const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 });
 
-import createNextIntlPlugin from "next-intl/plugin";
 const withNextIntl = createNextIntlPlugin();
-import withPWAInit from "@ducanh2912/next-pwa";
+
 const withPWA = withPWAInit({
   dest: "public",
   cacheOnFrontEndNav: true,

package.json

@@ -12,26 +12,28 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.9",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "caniuse-lite": "^1.0.30001664",
+    "caniuse-lite": "^1.0.30001669",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
-    "lucide-react": "^0.414.0",
+    "framer-motion": "^11.11.9",
+    "lucide-react": "^0.451.0",
     "luxon": "^3.5.0",
-    "next": "^14.2.13",
+    "next": "^14.2.15",
-    "next-intl": "^3.20.0",
+    "next-intl": "^3.21.1",
     "next-runtime-env": "^3.2.2",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -39,25 +41,26 @@
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.1",
     "react-wrap-balancer": "^1.1.1",
+    "recharts": "2.12.7",
     "sharp": "^0.33.5",
     "swr": "^2.2.6-beta.4",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "eslint-plugin-turbo": "^2.1.2",
+    "eslint-plugin-turbo": "^2.2.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "@next/bundle-analyzer": "^14.2.13",
+    "@next/bundle-analyzer": "^14.2.15",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.7",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.11.1",
+    "eslint": "^9.13.0",
-    "eslint-config-next": "^14.2.13",
+    "eslint-config-next": "^14.2.15",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }

prettier.config.js

@@ -1,4 +1,11 @@
 // prettier.config.js
 module.exports = {
-  plugins: ["prettier-plugin-tailwindcss"],
+  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  endOfLine: "auto",
+  plugins: [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports",
+  ],
 };

styles/globals.css

@@ -24,6 +24,16 @@
     --input: 20 5.9% 90%;
     --ring: 20 14.3% 4.1%;
     --radius: 1rem;
+    --chart-1: 220 70% 50%;
+    --chart-2: 340 75% 55%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 160 60% 45%;
+    --chart-6: 180 50% 50%;
+    --chart-7: 216 50% 50%;
+    --chart-8: 252 50% 50%;
+    --chart-9: 288 50% 50%;
+    --chart-10: 324 50% 50%;
   }
 
   .dark {
@@ -46,6 +56,16 @@
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 340 75% 55%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 160 60% 45%;
+    --chart-6: 180 50% 50%;
+    --chart-7: 216 50% 50%;
+    --chart-8: 252 50% 50%;
+    --chart-9: 288 50% 50%;
+    --chart-10: 324 50% 50%;
   }
 }
 
@@ -189,3 +209,11 @@
     opacity: 0.15;
   }
 }
+
+.scrollbar-hidden {
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none; /* Chrome, Safari 和 Opera */
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,