From 7ca9c043ddfc5393efcd6c00fc5677d60b6dbe55 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 1 Jun 2026 13:52:22 +0300
Subject: [PATCH] feat(admin-remnawave): meaningful icons for users-by-status
 cards

Each Remnawave user status now gets a distinct icon instead of the same people glyph: ACTIVE -> check-circle, DISABLED -> prohibit, LIMITED -> gauge, EXPIRED -> clock (people icon as fallback for unknown statuses).
---
 src/pages/AdminRemnawave.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/pages/AdminRemnawave.tsx b/src/pages/AdminRemnawave.tsx
index 17d3ad2..d7fee72 100644
--- a/src/pages/AdminRemnawave.tsx
+++ b/src/pages/AdminRemnawave.tsx
@@ -37,6 +37,10 @@ import {
   DevicesIcon,
   StatUptimeIcon,
   UsersIcon,
+  CheckCircleIcon,
+  BanIcon,
+  TrafficIcon,
+  ClockIcon,
   SyncIcon,
   RefreshIcon,
   PlayIcon,
@@ -75,6 +79,22 @@ const providerFaviconUrl = (link: string | null | undefined): string | null => {
   }
 };
 
+// Meaningful icon per Remnawave user status (instead of the same people glyph).
+const userStatusIcon = (status: string): React.ReactNode => {
+  switch (status.toUpperCase()) {
+    case 'ACTIVE':
+      return <CheckCircleIcon className="h-4 w-4" />;
+    case 'DISABLED':
+      return <BanIcon className="h-4 w-4" />;
+    case 'LIMITED':
+      return <TrafficIcon className="h-4 w-4" />;
+    case 'EXPIRED':
+      return <ClockIcon className="h-4 w-4" />;
+    default:
+      return <UsersIcon className="h-4 w-4" />;
+  }
+};
+
 // Realtime interface throughput (bytes/s) → network-style speed, matching the
 // panel exactly: the unit step is by 1024 bytes, but the value is shown in bits
 // (×8 / 1000), e.g. 341 KB/s → "2728 Kb/s", 1.34 MB/s → "10.72 Mb/s".
@@ -637,7 +657,7 @@ function OverviewTab({
               key={status}
               label={status}
               value={count}
-              icon={<UsersIcon className="h-4 w-4" />}
+              icon={userStatusIcon(status)}
               color={status === 'ACTIVE' ? 'green' : status === 'DISABLED' ? 'red' : 'accent'}
             />
           ))}