fix: update now time

app/(main)/ClientComponents/ServerListClient.tsx

@@ -4,33 +4,31 @@ import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import { nezhaFetcher } from "@/lib/utils";
 import useSWR from "swr";
-import { DateTime } from "luxon";
 
 export default function ServerListClient() {
-  const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
+  const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
     refreshInterval: 3000,
   });
   if (!data) return null;
   const sortedResult = data.result.sort((a: any, b: any) => a.id - b.id);
+  const timestamp = Date.now() / 1000;
 
   return (
-    <section className={"grid grid-cols-1 gap-2  md:grid-cols-2"}>
+    <section className={"grid grid-cols-1 gap-2 md:grid-cols-2"}>
-      {sortedResult.map(
+      {sortedResult.map((server: any) => (
-        (server: any) => (
+        <ServerCard
-          <ServerCard
+          key={server.id}
-            key={server.id}
+          id={server.id}
-            id={server.id}
+          cpu={server.status.CPU}
-            cpu={server.status.CPU}
+          name={server.name}
-            name={server.name}
+          up={server.status.NetOutSpeed / 1024 / 1024}
-            up={server.status.NetOutSpeed / 1024 / 1024}
+          down={server.status.NetInSpeed / 1024 / 1024}
-            down={server.status.NetInSpeed / 1024 / 1024}
+          status={timestamp - server.last_active > 300 ? "offline" : "online"}
-            status={DateTime.now().toUnixInteger() - server.last_active > 300 ? "offline" : "online"}
+          uptime={server.status.Uptime / 86400}
-            uptime={server.status.Uptime / 86400}
+          mem={(server.status.MemUsed / server.host.MemTotal) * 100}
-            mem={(server.status.MemUsed / server.host.MemTotal) * 100}
+          stg={(server.status.DiskUsed / server.host.DiskTotal) * 100}
-            stg={(server.status.DiskUsed / server.host.DiskTotal) * 100}
+        />
-          />
+      ))}
-        ),
-      )}
     </section>
   );
 }

app/(main)/footer.tsx

@@ -1,22 +1,22 @@
 export default function Footer() {
-    return (
+  return (
-        <footer className="mx-auto w-full max-w-5xl">
+    <footer className="mx-auto w-full max-w-5xl">
-            <section className="flex flex-col">
+      <section className="flex flex-col">
-                <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-                    Find the code on{' '}
+          Find the code on{" "}
-                    <a
+          <a
-                        href="https://github.com/hamster1963/nezha-dash"
+            href="https://github.com/hamster1963/nezha-dash"
-                        target="_blank"
+            target="_blank"
-                        className="cursor-pointer font-normal underline decoration-yellow-500 decoration-2 underline-offset-2 dark:decoration-yellow-500/50"
+            className="cursor-pointer font-normal underline decoration-yellow-500 decoration-2 underline-offset-2 dark:decoration-yellow-500/50"
-                    >
+          >
-                        GitHub
+            GitHub
-                    </a>
+          </a>
-                </p>
+        </p>
-                <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-                    © 2020-{new Date().getFullYear()}{' '}
+          © 2020-{new Date().getFullYear()}{" "}
-                    <a href={'https://github.com/hamster1963'}>@Hamster1963</a>
+          <a href={"https://github.com/hamster1963"}>@Hamster1963</a>
-                </section>
+        </section>
-            </section>
+      </section>
-        </footer>
+    </footer>
-    )
+  );
 }

app/(main)/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { Separator } from "@/components/ui/separator";
 import { DateTime } from "luxon";
@@ -36,22 +36,45 @@ function Header() {
   );
 }
 
+// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
+const useInterval = (callback: Function, delay?: number | null) => {
+  const savedCallback = useRef<Function>(() => { });
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    if (delay !== null) {
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
+      return () => clearInterval(interval);
+    }
+
+    return undefined;
+  }, [delay]);
+};
+
 function Overview() {
   const [mouted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
   }, []);
-  const time = DateTime.TIME_SIMPLE;
+  const timeOption = DateTime.TIME_SIMPLE;
-  time.hour12 = true;
+  timeOption.hour12 = true;
+  const [timeString, setTimeString] = useState(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
+
+  useInterval(() => {
+    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
+  }, 1000);
 
   return (
-    <section className={"md:mt-16 mt-10 flex flex-col"}>
+    <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="text-md font-semibold">👋 Overview</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">where the time is</p>
         {mouted && (
           <p className="opacity-1 text-sm font-medium">
-            {DateTime.now().setLocale("en-US").toLocaleString(time)}
+            {timeString}
           </p>
         )}
       </div>

app/(main)/nav.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import React from "react";
-
-import { cn } from "@/lib/utils";
-
-export const siteUrlList = [
-  {
-    name: "Home",
-    header: "👋 Overview",
-    url: "/",
-  },
-  {
-    name: "Service",
-    header: "🎛️ Service",
-    url: "/service",
-  },
-];
-export default function Nav() {
-  const nowPath = usePathname();
-  return (
-    <div className={"flex flex-col items-center justify-center"}>
-      <div
-        className={
-          "fixed bottom-6 z-50 flex items-center gap-1 rounded-[50px] bg-stone-700 bg-opacity-80 px-2 py-1.5 backdrop-blur-lg"
-        }
-      >
-        {siteUrlList.map((site, index) => (
-          <div key={site.name} className={"flex items-center gap-1"}>
-            {index !== 0 && (
-              <p key={index} className={"pointer-events-none text-stone-500"}>
-                /
-              </p>
-            )}
-            <Link
-              key={site.name}
-              href={site.url}
-              scroll={true}
-              className={cn(
-                "rounded-[50px] px-2.5 py-1.5 text-[16px] font-[500] text-stone-400 transition-colors sm:hover:text-white",
-                clsx(
-                  nowPath === site.url &&
-                  "bg-stone-500 text-white dark:bg-stone-600",
-                ),
-              )}
-            >
-              {site.name}
-            </Link>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

components/ServerCard.tsx

@@ -40,9 +40,11 @@ export default function ServerCard({
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+            <section
+              className={"flex items-center justify-start gap-2 lg:w-28"}
+            >
               <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
-              <p className="text-sm font-bold tracking-tight break-all">
+              <p className="break-all text-sm font-bold tracking-tight">
                 {name}
               </p>
             </section>
@@ -90,7 +92,9 @@ export default function ServerCard({
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+            <section
+              className={"flex items-center justify-start gap-2 lg:w-28"}
+            >
               <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
               <p className="text-sm font-bold tracking-tight">{name}</p>
             </section>

components/ServerList.tsx

@@ -2,10 +2,6 @@ import React from "react";
 
 import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient";
 
-
-
 export default async function ServerList() {
-  return (
+  return <ServerListClient />;
-    <ServerListClient />
-  );
 }

components/ServerOverview.tsx

@@ -1,12 +1,5 @@
 import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient";
 
-
-
-
 export default async function ServerOverview() {
-    return (
+  return <ServerOverviewClient />;
-        <ServerOverviewClient />
+}
-    )
-
-
-}

components/SubscribeCard.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-
-import { Loader } from "@/components/loading/Loader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-
-type SubscribeCardProps = {
-  provider: string;
-  behavior: string;
-  value: number;
-  nextBillDay?: number;
-  total: number;
-  unit: string;
-  colorClassName: string;
-  isLoading: boolean;
-};
-
-function SubscribeCard({
-  provider,
-  behavior,
-  value,
-  total,
-  unit,
-  nextBillDay,
-  colorClassName,
-  isLoading,
-}: SubscribeCardProps) {
-  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-bold md:text-base">
-          {provider}
-        </CardTitle>
-        {nextBillDay !== -1 && (
-          <div className={"flex items-center gap-0.5"}>
-            <p className={"text-[10px] font-semibold opacity-50"}>
-              {nextBillDay}
-            </p>
-            <p className={"text-[10px] font-bold"}>|</p>
-          </div>
-        )}
-      </CardHeader>
-      <CardContent>
-        <div className={"flex items-center gap-0.5"}>
-          <p className="text-[12px] text-muted-foreground">{behavior}</p>
-          <Loader visible={isLoading} />
-        </div>
-
-        <div className={"flex items-baseline gap-1"}>
-          <p className={"mb-4 text-3xl font-semibold"}>{value}</p>
-          <p className={"mb-4 text-sm font-light text-muted-foreground"}>
-            {unit}
-          </p>
-        </div>
-        <Progress
-          aria-label={`Used ${unit}`}
-          aria-labelledby={`${value} Used ${unit}`}
-          value={(value / total) * 100}
-          indicatorClassName={colorClassName}
-          className={"h-[3px] rounded-sm"}
-        />
-      </CardContent>
-    </Card>
-  );
-}
-
-export default SubscribeCard;

lib/prefetch.tsx

@@ -0,0 +1,54 @@
+import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
+import { MakeOptional } from "@/app/types/utils";
+import { error } from "console";
+
+export async function GetNezhaData() {
+    if (!process.env.NezhaBaseUrl) {
+        error("NezhaBaseUrl is not set");
+        return;
+    }
+    // Remove trailing slash
+    var nezhaBaseUrl = process.env.NezhaBaseUrl;
+
+    if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === "/") {
+        nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
+    }
+    try {
+        const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
+            headers: {
+                Authorization: process.env.NezhaAuth as string,
+            },
+            next: {
+                revalidate: 1,
+            },
+        });
+        const nezhaData = (await response.json()).result as NezhaAPI[];
+        const data: ServerApi = {
+            live_servers: 0,
+            offline_servers: 0,
+            total_bandwidth: 0,
+            result: [],
+        };
+        const timestamp = Date.now() / 1000;
+        data.result = nezhaData.map(
+            (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+                if (timestamp - element.last_active > 300) {
+                    data.offline_servers += 1;
+                } else {
+                    data.live_servers += 1;
+                }
+                data.total_bandwidth += element.status.NetOutTransfer;
+
+                delete element.ipv4;
+                delete element.ipv6;
+                delete element.valid_ip;
+
+                return element;
+            },
+        );
+
+        return data;
+    } catch (error) {
+        return error;
+    }
+}

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3020",
-    "build": "next build",
+    "start": "node .next/standalone/server.js",
-    "start": "next start",
+    "lint": "next lint",
-    "lint": "next lint"
+    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.6",
@@ -33,7 +33,7 @@
     "react-wrap-balancer": "^1.1.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
-    "swr": "^2.2.6-beta.3",
+    "swr": "^2.2.6-beta.4",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"