Replace the cabinet's hand-written heroicons-style SVG icon components with
the Remnawave panel's own icon family — Phosphor via react-icons/pi (Duotone).
All icons now live in a single central barrel (src/components/icons:
index + extended-icons + editor-icons, 144 icons); every feature file imports
from it instead of redefining inline SVGs (~440 icon defs removed).
- Add react-icons dependency
- Desktop nav (AppShell) now uses the central Phosphor icons, removing a
stroke-vs-duotone inconsistency the partial migration introduced
- Icons with custom props (SortIcon's direction, expandable chevrons) kept as
thin Phosphor wrappers; the RemnawaveIcon brand logo and animated SVGs
(checkmarks, spinners) are intentionally left as-is
- Restore the original per-call-site icon sizes wherever the centralized
default differed (211 call sites)
Third and final step in the AdminTrafficUsage decomp. Move the
filter dropdowns + PeriodSelector into
src/components/admin/trafficUsage/filters/:
- PeriodSelector.tsx (103 lines): fixed period tabs (1/3/7/14/30
days) + custom date-range mode. Exports the PERIODS constant
so the parent's prefetch effect iterates the same canonical
list.
- TariffFilter.tsx (133 lines): pop-over multi-select for tariff
names.
- StatusFilter.tsx (147 lines): pop-over multi-select for
subscription statuses. Exports STATUS_COLORS alongside.
- NodeFilter.tsx (135 lines): pop-over multi-select for traffic
nodes (with flag emoji + traffic-share numbers).
- CountryFilter.tsx (132 lines): pop-over multi-select for
source countries.
All five are pure controlled components — parent owns every
Set<string> filter state and feeds them via {available, selected,
onChange}. The parent imports them and drops 9 now-unused icon
imports (FilterIcon, ChevronDownIcon, ServerIcon, CalendarIcon,
StatusIcon, GlobeIcon — they live inside the filter files now).
AdminTrafficUsage.tsx: 1593 → 977 lines (-616).
Cumulative across the 3-step admin-traffic decomp:
1904 → 977 (-927, -49%).
Second step in the AdminTrafficUsage decomp. Move the 15 inline SVG
icons (Search/Chevron/Refresh/Download/Sort/Filter/Server/Calendar/X/
Status/Globe/Shield/ServerSmall) into a single barrel at
src/components/admin/trafficUsage/TrafficIcons.tsx. Pure SVG, no
behavioural change.
AdminTrafficUsage.tsx: 1734 → 1593 lines (-141).
First step in the AdminTrafficUsage decomp. Two new files under
src/components/admin/trafficUsage/:
- trafficUsageHelpers.ts (166 lines): the TanStack Table module
augmentation (sticky/align/bold meta), formatters (formatBytes,
formatCurrency, formatShortDate, formatGbPerDay,
toBackendSortField, getFlagEmoji wrapper), risk-assessment helpers
(bytesToGbPerDay, getRatio, getRowBgColor, getNodeTextColor,
getRiskLevel, getCompositeRisk), and the RISK_STYLES constant.
- RiskBadge.tsx (36 lines): the small per-row risk indicator
(dot + GB/d value + mini progress bar). Pure presentational.
Parent imports everything from the new modules; the inline
'TanStack Table module augmentation' lives in the helpers file
so the declaration merge still picks up across the codebase
once the helpers are imported.
AdminTrafficUsage.tsx: 1904 → 1734 lines (-170).
The page maintained two parallel cache mechanisms:
L1 — adminTrafficApi.getCached + Map<key, {data, timestamp}> with 5min
TTL and a 20-entry LRU eviction
L2 — manual setState + initialLoading/loading flags + cancelled-flag
cleanup in useEffect
React Query covers both with stronger guarantees:
- dedup of in-flight requests with identical queryKey (the prefetch
+ main-fetch race could double-fire previously)
- staleTime: 5 min matches the old TTL
- gcTime: 5 min matches the eviction behaviour
- background refetch on stale + tab refocus disabled globally
trafficQuery owns the main list; enrichmentQuery is gated on
!trafficQuery.isLoading && items.length > 0 (preserves the 'don't tag
before tags have anyone to tag' guard). Existing setItems / setNodes /
setLoading / setEnrichment state is fed by sync useEffects so all
downstream selectors, the table, derived memos, and the column defs
are untouched.
Prefetch adjacent periods now goes through queryClient.prefetchQuery
(same warmup cadence, no separate path). handleRefresh invalidates
both queries + the internal Map cache and refetches enrichment
imperatively.
adminTrafficApi's own Map cache stays in place as a harmless L2 — it
backs queryFn calls and any non-RQ caller (none in src/ today, but
the API surface is shared).
React 19's @types/react flags FormEvent as deprecated — quote: 'FormEvent
doesn't actually exist. You probably meant to use ChangeEvent, InputEvent,
SubmitEvent, or just SyntheticEvent'. All 17 call sites in this repo
typed form onSubmit handlers and only called e.preventDefault(), so
SyntheticEvent is the correct general replacement.
No behavior change — pure type-level cleanup that clears the chronic
deprecation hint that has been showing up after every edit to any
form-bearing page.
Sweep orange across SubscriptionPurchase/GiftSubscription/PromoOffersSection/
AdminTrafficUsage/AnalyticsTab/withdrawalUtils to warning-* tokens. Stars brand
yellow→orange gradient kept in TopUpAmount.
User reported the EE (Estonia) flag rendered as plain text 'EE' on the
admin servers page. Root cause: getCountryFlag() in AdminServers.tsx
and AdminServerEdit.tsx hardcoded a 25-entry codeMap that didn't
include EE; falling through to 'return code' produced raw text.
Two other admin pages (AdminRemnawaveSquadDetail, AdminUserDetail)
had bigger 35-entry maps that did include EE — so EE worked there
but MX/AR/EG/ZA and friends still wouldn't. AdminRemnawave repeated
the same 35-entry map. AdminTrafficUsage already had the correct
algorithmic ISO→regional-indicator code but as a local duplicate of
utils/subscriptionHelpers.
Unify all six on the single algorithmic helper:
- getFlagEmoji() in utils/subscriptionHelpers.ts now:
* accepts string | null | undefined (callers don't need to guard)
* trims whitespace
* validates [A-Za-z]{2} before composing regional indicators
- Each admin page now either imports getFlagEmoji directly or wraps
it with the page's preferred fallback character (e.g. '🌍' for
empty codes where the UI expects a placeholder).
memory.used from systeminformation includes disk cache/buffers,
showing ~91% when actual usage is ~18%. Now uses (total - available)
which matches htop/free output. Also added PB/EB units to formatBytes.
- Add CountryFilter dropdown with flag emoji + node count per country
- Country filter merges with node filter for both table and CSV export
- Pass total/node GB/day thresholds to backend for risk columns in CSV
- CSV now includes Risk Level, Risk Ratio, Risk GB/day when thresholds set
Expand invisible touch area from 4px to 20px for comfortable finger
interaction on iPhone. Visual indicator stays thin (4px) inside the
wider hit zone. Use inline touchAction: none to prevent scroll conflict.
- RiskBadge now shows real daily GB/d value + mini progress bar
- Node cells show daily rate subtitle when threshold is active
- Total column shows daily rate subtitle when threshold is active
- getCompositeRisk returns both ratio and dominant GB/d value
- formatGbPerDay helper for clean number formatting
Add threshold inputs (total GB/day, per-node GB/day) to admin traffic
usage page. When set, rows get background color gradation (green to red)
and node cells get text color (blue to red) based on threshold ratios.
Conditional Risk column shows composite risk badge with level indicator.
7 i18n keys added across all 4 locales (ru, en, zh, fa).
- Add NodeFilter component with flag emojis and checkbox dropdown
- Add StatusFilter component with colored status dots
- Add custom date range picker (calendar toggle, from/to date inputs)
- Wire all filters to backend params (nodes, statuses, start_date, end_date)
- CSV export passes all active filters and date range
- Add displayNodes memo for table column filtering
- Add i18n keys for nodes, statuses, dates in ru/en/zh/fa
- Add NodeFilter dropdown with flag emojis and checkbox selection
- Add StatusFilter dropdown with colored status dots
- Add DateRangePicker with From/To date inputs, toggle from period mode
- Devices column now shows N/M (connected/limit) with accent color
- Export CSV passes all active filters to backend
- New i18n keys for nodes, statuses, dates in ru/en/zh/fa
- Add 5-min in-memory cache in API layer keyed by request params
- Replace blocking spinner with animated progress bar during refresh
- Keep stale data visible while fetching (opacity dim)
- Prefetch all periods in background for instant switching
- TariffFilter dropdown with checkboxes for filtering by tariff
- Column resizing via TanStack Table resize handles
- Add allTariffs locale key to all 4 languages
- Pass tariffs param to API
Add AdminTrafficUsage page showing per-user traffic statistics by node
with period filtering (1/3/7/14/30d), server-side sorting, search,
pagination, and CSV export. Uses @tanstack/react-table with manual
sorting and dynamic node columns.
