fix: CycleTransferStats display

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

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">
+                <section className="flex justify-between items-center">
-                  <span className="text-sm font-semibold">{serverName}</span>
+                  <div className=" bg-blue-600 w-fit text-white px-1 py-0.5 rounded text-[10px]">
-                  <span className="text-sm text-stone-600 dark:text-stone-400 font-semibold">
+                    {name}
-                    {formatBytes(transfer)} / {formatBytes(max)}
-                  </span>
                   </div>
+                  <span className="text-stone-600 dark:text-stone-400 text-xs">
+                    {new Date(from).toLocaleDateString()} -{" "}
+                    {new Date(to).toLocaleDateString()}
+                  </span>
+                </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-xs text-stone-600 dark:text-stone-400 font-semibold">
-                    <span className="text-stone-600 dark:text-stone-400 text-xs">
+                    {formatBytes(transfer)} / {formatBytes(max)}
-                      {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>
                 </section>
               </div>
             );

src/components/ServerCard.tsx

@@ -108,13 +108,15 @@ export default function ServerCard({
               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)}
+              {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)}
+              {t("serverCard.download")}:
+              {formatBytes(serverInfo.state.net_in_transfer)}
             </Badge>
           </section>
         </div>

src/components/ServerDetailOverview.tsx

@@ -219,7 +219,6 @@ export default function ServerDetailOverview({
             </section>
           </CardContent>
         </Card>
-
       </section>
     </div>
   );

src/components/ServiceTracker.tsx

@@ -47,7 +47,6 @@ 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
@@ -55,7 +54,6 @@ export const ServiceTracker: React.FC = () => {
           />
         </div>
       )}
-      </section>
       <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);