feat: add detail card

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

@@ -1,62 +1,243 @@
 "use client";
 
-import useSWR from "swr";
 import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-import { nezhaFetcher } from "@/lib/utils";
-import getEnv from "@/lib/env-entry";
-import { useRouter } from "next/navigation";
-import { useLocale } from "next-intl";
 import { BackIcon } from "@/components/Icon";
-import { Card, CardContent } from "@/components/ui/card";
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
 import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import getEnv from "@/lib/env-entry";
+import { cn, nezhaFetcher } from "@/lib/utils";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
 
-export default function ServerDetailClient({ server_id }: { server_id: number }) {
-    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,
-        },
-    );
+export default function ServerDetailClient({
+  server_id,
+}: {
+  server_id: number;
+}) {
+  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="mx-auto grid w-full max-w-5xl gap-1">
-            <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 />
-                HomeDash
-            </div>
-            <section className="flex flex-wrap gap-4 mt-2">
-                <Card className="rounded-[10px] flex flex-col justify-center">
-                    <CardContent className="px-1.5 py-1">
-                        <section className="flex items-center gap-2">
-                            <p className="text-xs font-semibold">
-                                ID
-                            </p>
-                            <div className="text-xs w-fit"> {server_id} </div>
-                        </section>
-                    </CardContent>
-                </Card>
-                <Card className="rounded-[10px]">
-                    <CardContent className="px-1.5 py-1">
-                        <section className="flex items-center gap-2">
-                            <p className="text-xs font-semibold">
-                                Tag
-                            </p>
-                            <Badge className="text-xs rounded-[6px] w-fit px-1 py-0" variant="secondary"> {data?.tag} </Badge>
-                        </section>
-                    </CardContent>
-                </Card>
-            </section>
+      <>
+        <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")} */}
+            fetch_error_message
+          </p>
         </div>
-    )
+      </>
+    );
+  }
+  if (!data) return null;
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-1">
+      <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-2">
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Status</p>
+              <Badge
+                className={cn(
+                  "text-xs 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 ? "Online" : "Offline"}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Uptime</p>
+              <Badge
+                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                variant="secondary"
+              >
+                {" "}
+                {(data?.status.Uptime / 86400).toFixed(0)} Days{" "}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
 
-
-
-}
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Tag</p>
+              <Badge
+                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                variant="secondary"
+              >
+                {" "}
+                {data?.tag || "Unknown"}{" "}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Arch</p>
+              <Badge
+                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                variant="secondary"
+              >
+                {" "}
+                {data?.host.Arch || "Unknown"}{" "}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Version</p>
+              <Badge
+                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                variant="secondary"
+              >
+                {" "}
+                {data?.host.Version || "Unknown"}{" "}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] flex flex-col justify-center">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">System</p>
+              {data?.host.Platform ? (
+                <div className="text-xs w-fit">
+                  {" "}
+                  {data?.host.Platform || "Unknown"} -{" "}
+                  {data?.host.PlatformVersion}{" "}
+                </div>
+              ) : (
+                <div className="text-xs w-fit"> Unknown </div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] flex flex-col justify-center">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">CPU</p>
+              {data?.host.CPU ? (
+                <div className="text-xs w-fit">
+                  {" "}
+                  {data?.host.CPU || "Unknown"}
+                </div>
+              ) : (
+                <div className="text-xs w-fit"> Unknown </div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">CPU</p>
+              <p className="text-xs text-end w-10 font-medium">
+                {data?.status.CPU.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={data?.status.CPU}
+              />
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Mem</p>
+              <p className="text-xs w-10 text-end font-medium">
+                {((data?.status.MemUsed / data?.host.MemTotal) * 100).toFixed(
+                  0,
+                )}
+                %
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={(data?.status.MemUsed / data?.host.MemTotal) * 100}
+              />
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Swap</p>
+              <p className="text-xs w-10 text-end font-medium">
+                {data?.status.SwapUsed
+                  ? (
+                      (data?.status.SwapUsed / data?.host.SwapTotal) *
+                      100
+                    ).toFixed(0)
+                  : 0}
+                %
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={(data?.status.SwapUsed / data?.host.SwapTotal) * 100}
+              />
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px]">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex items-center gap-2">
+              <p className="text-xs font-semibold">Disk</p>
+              <p className="text-xs w-10 text-end font-medium">
+                {((data?.status.DiskUsed / data?.host.DiskTotal) * 100).toFixed(
+                  0,
+                )}
+                %
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={(data?.status.DiskUsed / data?.host.DiskTotal) * 100}
+              />
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}

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

@@ -1,7 +1,5 @@
 import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
 
 export default function Page({ params }: { params: { id: string } }) {
-  return (
-    <ServerDetailClient server_id={Number(params.id)} />
-  );
+  return <ServerDetailClient server_id={Number(params.id)} />;
 }

app/api/detail/route.ts

@@ -10,21 +10,20 @@ interface NezhaDataResponse {
 }
 
 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 });
+  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 });
+}

components/ui/animated-circular-progress-bar.tsx

@@ -0,0 +1,102 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+  max: number;
+  value: number;
+  min: number;
+  className?: string;
+}
+
+export default function AnimatedCircularProgressBar({
+  max = 100,
+  min = 0,
+  value = 0,
+  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="opacity-100 stroke-current"
+          style={
+            {
+              "--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

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 const badgeVariants = cva(
-  "inline-flex items-center text-nowarp 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: {

lib/serverFetch.tsx

@@ -145,20 +145,22 @@ export async function GetServerDetail({ server_id }: { server_id: number }) {
     }
 
     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];
+    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;
   }
-}
+}

prettier.config.js

@@ -3,6 +3,7 @@ module.exports = {
   importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
+  endOfLine: "auto",
   plugins: [
     "prettier-plugin-tailwindcss",
     "@trivago/prettier-plugin-sort-imports",