mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
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:
@@ -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'}
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user