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).
This commit is contained in:
c0mrade
2026-06-01 13:52:22 +03:00
parent bd5e39fa56
commit 7ca9c043dd

View File

@@ -37,6 +37,10 @@ import {
DevicesIcon, DevicesIcon,
StatUptimeIcon, StatUptimeIcon,
UsersIcon, UsersIcon,
CheckCircleIcon,
BanIcon,
TrafficIcon,
ClockIcon,
SyncIcon, SyncIcon,
RefreshIcon, RefreshIcon,
PlayIcon, 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 // 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 // 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". // (×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} key={status}
label={status} label={status}
value={count} value={count}
icon={<UsersIcon className="h-4 w-4" />} icon={userStatusIcon(status)}
color={status === 'ACTIVE' ? 'green' : status === 'DISABLED' ? 'red' : 'accent'} color={status === 'ACTIVE' ? 'green' : status === 'DISABLED' ? 'red' : 'accent'}
/> />
))} ))}