From 6dfac27bc3a487e1ce68e0ecf1656a4a5d5a5d2b Mon Sep 17 00:00:00 2001
From: web <web@ppanel.dev>
Date: Wed, 17 Sep 2025 02:24:54 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Enhance=20server=20ID=20d?=
 =?UTF-8?q?isplay=20in=20ServerTrafficLogPage=20with=20badges=20and=20serv?=
 =?UTF-8?q?er=20ratio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/dashboard/log/server-traffic/page.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/admin/app/dashboard/log/server-traffic/page.tsx b/apps/admin/app/dashboard/log/server-traffic/page.tsx
index 992e238..f81d9fb 100644
--- a/apps/admin/app/dashboard/log/server-traffic/page.tsx
+++ b/apps/admin/app/dashboard/log/server-traffic/page.tsx
@@ -3,6 +3,7 @@
 import { ProTable } from '@/components/pro-table';
 import { filterServerTrafficLog } from '@/services/admin/log';
 import { useServer } from '@/store/server';
+import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { formatBytes } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
@@ -12,7 +13,7 @@ import { useSearchParams } from 'next/navigation';
 export default function ServerTrafficLogPage() {
   const t = useTranslations('log');
   const sp = useSearchParams();
-  const { getServerName } = useServer();
+  const { getServerName, getServerById } = useServer();
 
   const today = new Date().toISOString().split('T')[0];
 
@@ -39,11 +40,17 @@ export default function ServerTrafficLogPage() {
         {
           accessorKey: 'server_id',
           header: t('column.server'),
-          cell: ({ row }) => (
-            <span>
-              {getServerName(row.original.server_id)} ({row.original.server_id})
-            </span>
-          ),
+          cell: ({ row }) => {
+            const server = getServerById(row.original.server_id);
+            const ratio = server?.ratio || 1;
+            return (
+              <div className='flex items-center gap-2'>
+                <Badge>{row.original.server_id}</Badge>
+                <span>{getServerName(row.original.server_id)}</span>
+                <Badge variant='outline'>{ratio}X</Badge>
+              </div>
+            );
+          },
         },
         {
           accessorKey: 'upload',