From 1970248ae641155de5d65b3bee5349f5d2fedd4c Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 30 Nov 2024 22:58:52 +0800
Subject: [PATCH] fix: CycleTransferStats display

---
 src/components/CycleTransferStats.tsx       |  4 +-
 src/components/CycleTransferStatsClient.tsx | 48 ++++++++++++---------
 src/components/ServerCard.tsx               | 28 ++++++------
 src/components/ServerDetailOverview.tsx     |  3 +-
 src/components/ServiceTracker.tsx           | 16 +++----
 5 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/CycleTransferStats.tsx b/src/components/CycleTransferStats.tsx
index 5bbf753..856d2d0 100644
--- a/src/components/CycleTransferStats.tsx
+++ b/src/components/CycleTransferStats.tsx
@@ -12,7 +12,7 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
   className,
 }) => {
   return (
-    <>
+    <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
       {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
         const serverStats = Object.entries(cycleData.server_name).map(
           ([serverId, serverName]) => ({
@@ -35,7 +35,7 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
           />
         );
       })}
-    </>
+    </section>
   );
 };
 
diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
index 1e51e0e..bf91cce 100644
--- a/src/components/CycleTransferStatsClient.tsx
+++ b/src/components/CycleTransferStatsClient.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { formatBytes } from "@/lib/format";
+import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
 
 interface CycleTransferStatsClientProps {
   name: string;
@@ -27,25 +28,36 @@ export const CycleTransferStatsClient: React.FC<
       )}
     >
       <div className="space-y-1">
-        {/* <div className="flex justify-between items-center">
-          <span className=" font-semibold text-sm">{name}</span>
-          <span className="text-stone-600 dark:text-stone-400 text-xs">
-            {new Date(from).toLocaleDateString()} -{" "}
-            {new Date(to).toLocaleDateString()}
-          </span>
-        </div> */}
         <div className="space-y-2">
           {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
             const progress = (transfer / max) * 100;
 
             return (
               <div key={serverId} className="space-y-2">
-                <div className="flex justify-between items-center">
-                  <span className="text-sm font-semibold">{serverName}</span>
-                  <span className="text-sm text-stone-600 dark:text-stone-400 font-semibold">
-                    {formatBytes(transfer)} / {formatBytes(max)}
+                <section className="flex justify-between items-center">
+                  <div className=" bg-blue-600 w-fit text-white px-1 py-0.5 rounded text-[10px]">
+                    {name}
+                  </div>
+                  <span className="text-stone-600 dark:text-stone-400 text-xs">
+                    {new Date(from).toLocaleDateString()} -{" "}
+                    {new Date(to).toLocaleDateString()}
                   </span>
-                </div>
+                </section>
+                <section className="flex justify-between items-center">
+                  <span className="text-sm font-semibold">{serverName}</span>
+                  <div className="flex items-center gap-1">
+                    <p className="text-xs text-end w-10 font-medium">
+                      {progress.toFixed(0)}%
+                    </p>
+                    <AnimatedCircularProgressBar
+                      className="size-4 text-[0px]"
+                      max={100}
+                      min={0}
+                      value={progress}
+                      primaryColor="hsl(var(--chart-1))"
+                    />
+                  </div>
+                </section>
                 <div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-full h-2.5">
                   <div
                     className="bg-blue-600 h-2.5 rounded-full"
@@ -57,15 +69,9 @@ export const CycleTransferStatsClient: React.FC<
                   <div className="text-xs text-stone-500 dark:text-stone-400">
                     Next update: {new Date(nextUpdate).toLocaleString()}
                   </div>
-                  <section className="flex items-center gap-2">
-                    <span className="text-stone-600 dark:text-stone-400 text-xs">
-                      {new Date(from).toLocaleDateString()} -{" "}
-                      {new Date(to).toLocaleDateString()}
-                    </span>
-                    <div className=" bg-blue-600 text-white px-1 py-0.5 rounded text-[10px]">
-                      {name}
-                    </div>
-                  </section>
+                  <span className="text-xs text-stone-600 dark:text-stone-400 font-semibold">
+                    {formatBytes(transfer)} / {formatBytes(max)}
+                  </span>
                 </section>
               </div>
             );
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 154a90e..8c6ba46 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -104,19 +104,21 @@ export default function ServerCard({
             </div>
           </section>
           <section 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("serverCard.upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
-              </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("serverCard.download")}:{formatBytes(serverInfo.state.net_in_transfer)}
-              </Badge>
-            </section>
+            <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("serverCard.upload")}:
+              {formatBytes(serverInfo.state.net_out_transfer)}
+            </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("serverCard.download")}:
+              {formatBytes(serverInfo.state.net_in_transfer)}
+            </Badge>
+          </section>
         </div>
       </Card>
     </section>
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index cca9e18..cccc405 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -189,7 +189,7 @@ export default function ServerDetailOverview({
         </Card>
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
-      <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+        <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">
@@ -219,7 +219,6 @@ export default function ServerDetailOverview({
             </section>
           </CardContent>
         </Card>
-
       </section>
     </div>
   );
diff --git a/src/components/ServiceTracker.tsx b/src/components/ServiceTracker.tsx
index f27f2fd..f43f3d0 100644
--- a/src/components/ServiceTracker.tsx
+++ b/src/components/ServiceTracker.tsx
@@ -47,15 +47,13 @@ export const ServiceTracker: React.FC = () => {
 
   return (
     <div className="mt-4 w-full mx-auto ">
-      <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-        {serviceData.data.cycle_transfer_stats && (
-          <div>
-            <CycleTransferStatsCard
-              cycleStats={serviceData.data.cycle_transfer_stats}
-            />
-          </div>
-        )}
-      </section>
+      {serviceData.data.cycle_transfer_stats && (
+        <div>
+          <CycleTransferStatsCard
+            cycleStats={serviceData.data.cycle_transfer_stats}
+          />
+        </div>
+      )}
       <section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
         {Object.entries(serviceData.data.services).map(([name, data]) => {
           const { days, uptime, avgDelay } = processServiceData(data);