From 3d778e5e36aaf4e018f6477181f72ec559bb0a25 Mon Sep 17 00:00:00 2001
From: web <web@ppanel.dev>
Date: Sun, 28 Sep 2025 07:23:28 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Update=20Badge=20variants?=
 =?UTF-8?q?=20and=20restructure=20traffic=20ratio=20display=20in=20Servers?=
 =?UTF-8?q?Page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/app/dashboard/servers/page.tsx | 25 +++++++++--------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/apps/admin/app/dashboard/servers/page.tsx b/apps/admin/app/dashboard/servers/page.tsx
index 333e1d6..bc84509 100644
--- a/apps/admin/app/dashboard/servers/page.tsx
+++ b/apps/admin/app/dashboard/servers/page.tsx
@@ -52,7 +52,7 @@ function RegionIpCell({
   return (
     <div className='flex items-center gap-1'>
       <Badge variant='outline'>{region}</Badge>
-      <Badge variant='outline'>{ip || t('notAvailable')}</Badge>
+      <Badge variant='secondary'>{ip || t('notAvailable')}</Badge>
     </div>
   );
 }
@@ -160,12 +160,15 @@ export default function ServersPage() {
               ) as API.Protocol[];
               if (!list.length) return '—';
               return (
-                <div className='flex flex-wrap gap-1'>
+                <div className='flex flex-col gap-1'>
                   {list.map((p, idx) => {
+                    const ratio = Number(p.ratio ?? 1) || 1;
                     return (
-                      <Badge key={idx} variant='outline'>
-                        {p.type} ({p.port})
-                      </Badge>
+                      <div key={idx} className='flex items-center gap-2'>
+                        <Badge variant='outline'>{ratio.toFixed(2)}x</Badge>
+                        <Badge variant='secondary'>{p.type}</Badge>
+                        <Badge variant='secondary'>{p.port}</Badge>
+                      </div>
                     );
                   })}
                 </div>
@@ -218,15 +221,7 @@ export default function ServersPage() {
             header: t('onlineUsers'),
             cell: ({ row }) => <OnlineUsersCell status={row.original.status as API.ServerStatus} />,
           },
-          {
-            id: 'traffic_ratio',
-            header: t('traffic_ratio'),
-            cell: ({ row }) => {
-              const raw = row.original.ratio as unknown;
-              const ratio = Number(raw ?? 1) || 1;
-              return <span className='text-sm'>{ratio.toFixed(2)}x</span>;
-            },
-          },
+          // traffic ratio moved to per-protocol configs; column removed
         ]}
         params={[{ key: 'search' }]}
         request={async (pagination, filter) => {
@@ -291,11 +286,11 @@ export default function ServersPage() {
                 setLoading(true);
                 const { id, created_at, updated_at, last_reported_at, status, ...others } =
                   row as any;
+                // @ts-expect-error
                 const body: API.CreateServerRequest = {
                   name: others.name,
                   country: others.country,
                   city: others.city,
-                  ratio: others.ratio,
                   address: others.address,
                   protocols: others.protocols || [],
                 };