etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #186 from BEDOLAGA-DEV/feat/traffic-filters-daterange

Browse Source 
feat: node/status filters + custom date range for traffic page
This commit is contained in:
Egor
2026-02-07 11:55:02 +03:00
committed by GitHub
parent b5a0562615 90b38e3ef2
commit 8b113a54e3
6 changed files with 554 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/api/adminTraffic.ts
View File

@@ -27,6 +27,7 @@ export interface TrafficUsageResponse {
limit: number;
period_days: number;
available_tariffs: string[];
available_statuses: string[];
}
export interface ExportCsvResponse {
@@ -42,6 +43,10 @@ export type TrafficParams = {
sort_by?: string;
sort_desc?: boolean;
tariffs?: string;
statuses?: string;
nodes?: string;
start_date?: string;
end_date?: string;
};
const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
@@ -50,13 +55,17 @@ const trafficCache = new Map<string, { data: TrafficUsageResponse; timestamp: nu
function buildCacheKey(params: TrafficParams): string {
return JSON.stringify({
p: params.period ?? 30,
l: params.limit ?? 50,
o: params.offset ?? 0,
s: params.search ?? '',
sb: params.sort_by ?? 'total_bytes',
sd: params.sort_desc ?? true,
t: params.tariffs ?? '',
period: params.period ?? 30,
limit: params.limit ?? 50,
offset: params.offset ?? 0,
search: params.search ?? '',
sort_by: params.sort_by ?? 'total_bytes',
sort_desc: params.sort_desc ?? true,
tariffs: params.tariffs ?? '',
statuses: params.statuses ?? '',
nodes: params.nodes ?? '',
start_date: params.start_date ?? '',
end_date: params.end_date ?? '',
});
}
@@ -95,7 +104,14 @@ export const adminTrafficApi = {
trafficCache.clear();
},
exportCsv: async (data: { period: number }): Promise<ExportCsvResponse> => {
exportCsv: async (data: {
period: number;
start_date?: string;
end_date?: string;
tariffs?: string;
statuses?: string;
nodes?: string;
}): Promise<ExportCsvResponse> => {
const response = await apiClient.post('/cabinet/admin/traffic/export-csv', data);
return response.data;
},

13
src/locales/en.json
View File

@@ -804,7 +804,18 @@
"loading": "Loading traffic data...",
"noTariff": "\u2014",
"search": "Search by name or username",
"allTariffs": "All tariffs"
"allTariffs": "All tariffs",
"nodes": "Nodes",
"allNodes": "All nodes",
"status": "Status",
"allStatuses": "All",
"statusActive": "Active",
"statusTrial": "Trial",
"statusExpired": "Expired",
"statusDisabled": "Disabled",
"customDates": "Custom dates",
"dateFrom": "From",
"dateTo": "To"
},
"emailTemplates": {
"title": "Email Templates",

13
src/locales/fa.json
View File

@@ -685,7 +685,18 @@
"loading": "در حال بارگذاری داده‌های ترافیک...",
"noTariff": "\u2014",
"search": "جستجو بر اساس نام یا نام کاربری",
"allTariffs": "همه تعرفه‌ها"
"allTariffs": "همه تعرفه‌ها",
"nodes": "نودها",
"allNodes": "همه نودها",
"status": "وضعیت",
"allStatuses": "همه",
"statusActive": "فعال",
"statusTrial": "آزمایشی",
"statusExpired": "منقضی",
"statusDisabled": "غیرفعال",
"customDates": "تاریخ دلخواه",
"dateFrom": "از",
"dateTo": "تا"
},
"emailTemplates": {
"title": "قالب‌های ایمیل",

13
src/locales/ru.json
View File

@@ -825,7 +825,18 @@
"loading": "Загрузка данных о трафике...",
"noTariff": "\u2014",
"search": "Поиск по имени или юзернейму",
"allTariffs": "Все тарифы"
"allTariffs": "Все тарифы",
"nodes": "Ноды",
"allNodes": "Все ноды",
"status": "Статус",
"allStatuses": "Все",
"statusActive": "Активная",
"statusTrial": "Пробная",
"statusExpired": "Истекла",
"statusDisabled": "Отключена",
"customDates": "Выбрать даты",
"dateFrom": "От",
"dateTo": "До"
},
"emailTemplates": {
"title": "Email-шаблоны",

13
src/locales/zh.json
View File

@@ -685,7 +685,18 @@
"loading": "正在加载流量数据...",
"noTariff": "\u2014",
"search": "按名称或用户名搜索",
"allTariffs": "所有套餐"
"allTariffs": "所有套餐",
"nodes": "节点",
"allNodes": "所有节点",
"status": "状态",
"allStatuses": "全部",
"statusActive": "活跃",
"statusTrial": "试用",
"statusExpired": "已过期",
"statusDisabled": "已禁用",
"customDates": "自定义日期",
"dateFrom": "从",
"dateTo": "到"
},
"paymentMethods": {
"title": "支付方法",

508
src/pages/AdminTrafficUsage.tsx
View File

@@ -13,6 +13,7 @@ import {
adminTrafficApi,
type UserTrafficItem,
type TrafficNodeInfo,
type TrafficUsageResponse,
type TrafficParams,
} from '../api/adminTraffic';
import { usePlatform } from '../platform/hooks/usePlatform';
@@ -134,6 +135,42 @@ const ChevronDownIcon = () => (
</svg>
);
const ServerIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z"
/>
</svg>
);
const CalendarIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
/>
</svg>
);
const XIcon = () => (
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
);
const StatusIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
);
// ============ Progress Bar ============
function ProgressBar({ loading }: { loading: boolean }) {
@@ -189,12 +226,62 @@ function PeriodSelector({
value,
onChange,
label,
dateMode,
customStart,
customEnd,
onToggleDateMode,
onCustomStartChange,
onCustomEndChange,
}: {
value: number;
onChange: (v: number) => void;
label: string;
dateMode: boolean;
customStart: string;
customEnd: string;
onToggleDateMode: () => void;
onCustomStartChange: (v: string) => void;
onCustomEndChange: (v: string) => void;
}) {
const { t } = useTranslation();
// Limit: last 31 days
const today = new Date().toISOString().split('T')[0];
const minDate = new Date(Date.now() - 31 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
if (dateMode) {
return (
<div className="flex items-center gap-2">
<CalendarIcon />
<span className="text-xs text-dark-400">{t('admin.trafficUsage.dateFrom')}</span>
<input
type="date"
value={customStart}
min={minDate}
max={customEnd || today}
onChange={(e) => onCustomStartChange(e.target.value)}
className="rounded-lg border border-dark-700 bg-dark-800 px-2 py-1 text-xs text-dark-200 focus:border-dark-600 focus:outline-none"
/>
<span className="text-xs text-dark-400">{t('admin.trafficUsage.dateTo')}</span>
<input
type="date"
value={customEnd}
min={customStart || minDate}
max={today}
onChange={(e) => onCustomEndChange(e.target.value)}
className="rounded-lg border border-dark-700 bg-dark-800 px-2 py-1 text-xs text-dark-200 focus:border-dark-600 focus:outline-none"
/>
<button
onClick={onToggleDateMode}
className="rounded-lg p-1 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
title={t('admin.trafficUsage.period')}
>
<XIcon />
</button>
</div>
);
}
return (
<div className="flex items-center gap-2">
<span className="text-xs text-dark-400">{label}</span>
@@ -214,6 +301,13 @@ function PeriodSelector({
</button>
))}
</div>
<button
onClick={onToggleDateMode}
className="rounded-lg border border-dark-700 bg-dark-800 p-1.5 text-dark-400 transition-colors hover:border-dark-600 hover:bg-dark-700 hover:text-dark-200"
title={t('admin.trafficUsage.customDates')}
>
<CalendarIcon />
</button>
</div>
);
}
@@ -347,6 +441,277 @@ function TariffFilter({
);
}
const STATUS_COLORS: Record<string, string> = {
active: 'bg-success-500',
trial: 'bg-warning-500',
expired: 'bg-error-500',
disabled: 'bg-dark-500',
};
function StatusFilter({
available,
selected,
onChange,
}: {
available: string[];
selected: Set<string>;
onChange: (next: Set<string>) => void;
}) {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
if (available.length === 0) return null;
const allSelected = selected.size === 0;
const activeCount = selected.size;
const toggle = (status: string) => {
const next = new Set(selected);
if (next.has(status)) {
next.delete(status);
} else {
next.add(status);
}
onChange(next);
};
const selectAll = () => onChange(new Set());
const statusLabel = (s: string) => {
const key = `admin.trafficUsage.status${s.charAt(0).toUpperCase() + s.slice(1)}`;
return t(key, s);
};
return (
<div className="relative" ref={ref}>
<button
onClick={() => setOpen(!open)}
className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
activeCount > 0
? 'border-accent-500/50 bg-accent-500/10 text-accent-400'
: 'border-dark-700 bg-dark-800 text-dark-200 hover:border-dark-600 hover:bg-dark-700'
}`}
>
<StatusIcon />
{t('admin.trafficUsage.status')}
{activeCount > 0 && (
<span className="rounded-full bg-accent-500 px-1.5 text-[10px] text-white">
{activeCount}
</span>
)}
<ChevronDownIcon />
</button>
{open && (
<div className="absolute left-0 top-full z-30 mt-1 w-56 rounded-xl border border-dark-700 bg-dark-800 py-1 shadow-xl">
<button
onClick={selectAll}
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-dark-700 ${
allSelected ? 'text-accent-400' : 'text-dark-300'
}`}
>
<span
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
allSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600'
}`}
>
{allSelected && (
<svg
className="h-3 w-3 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={3}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
)}
</span>
{t('admin.trafficUsage.allStatuses')}
</button>
<div className="mx-2 border-t border-dark-700" />
<div className="max-h-48 overflow-y-auto">
{available.map((s) => {
const checked = selected.has(s);
return (
<button
key={s}
onClick={() => toggle(s)}
className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-dark-300 transition-colors hover:bg-dark-700"
>
<span
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
checked ? 'border-accent-500 bg-accent-500' : 'border-dark-600'
}`}
>
{checked && (
<svg
className="h-3 w-3 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={3}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
)}
</span>
<span className={`h-2 w-2 rounded-full ${STATUS_COLORS[s] || 'bg-dark-500'}`} />
{statusLabel(s)}
</button>
);
})}
</div>
</div>
)}
</div>
);
}
function NodeFilter({
available,
selected,
onChange,
}: {
available: TrafficNodeInfo[];
selected: Set<string>;
onChange: (next: Set<string>) => void;
}) {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
if (available.length === 0) return null;
const allSelected = selected.size === 0;
const activeCount = selected.size;
const toggle = (uuid: string) => {
const next = new Set(selected);
if (next.has(uuid)) {
next.delete(uuid);
} else {
next.add(uuid);
}
onChange(next);
};
const selectAll = () => onChange(new Set());
return (
<div className="relative" ref={ref}>
<button
onClick={() => setOpen(!open)}
className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
activeCount > 0
? 'border-accent-500/50 bg-accent-500/10 text-accent-400'
: 'border-dark-700 bg-dark-800 text-dark-200 hover:border-dark-600 hover:bg-dark-700'
}`}
>
<ServerIcon />
{t('admin.trafficUsage.nodes')}
{activeCount > 0 && (
<span className="rounded-full bg-accent-500 px-1.5 text-[10px] text-white">
{activeCount}
</span>
)}
<ChevronDownIcon />
</button>
{open && (
<div className="absolute left-0 top-full z-30 mt-1 w-64 rounded-xl border border-dark-700 bg-dark-800 py-1 shadow-xl">
<button
onClick={selectAll}
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-dark-700 ${
allSelected ? 'text-accent-400' : 'text-dark-300'
}`}
>
<span
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
allSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600'
}`}
>
{allSelected && (
<svg
className="h-3 w-3 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={3}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
)}
</span>
{t('admin.trafficUsage.allNodes')}
</button>
<div className="mx-2 border-t border-dark-700" />
<div className="max-h-48 overflow-y-auto">
{available.map((node) => {
const checked = selected.has(node.node_uuid);
return (
<button
key={node.node_uuid}
onClick={() => toggle(node.node_uuid)}
className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-dark-300 transition-colors hover:bg-dark-700"
>
<span
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
checked ? 'border-accent-500 bg-accent-500' : 'border-dark-600'
}`}
>
{checked && (
<svg
className="h-3 w-3 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={3}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
)}
</span>
{getFlagEmoji(node.country_code)} {node.node_name}
</button>
);
})}
</div>
</div>
)}
</div>
);
}
// ============ Main Page ============
export default function AdminTrafficUsage() {
@@ -357,12 +722,18 @@ export default function AdminTrafficUsage() {
const [items, setItems] = useState<UserTrafficItem[]>([]);
const [nodes, setNodes] = useState<TrafficNodeInfo[]>([]);
const [availableTariffs, setAvailableTariffs] = useState<string[]>([]);
const [availableStatuses, setAvailableStatuses] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [initialLoading, setInitialLoading] = useState(true);
const [period, setPeriod] = useState(30);
const [dateMode, setDateMode] = useState(false);
const [customStart, setCustomStart] = useState('');
const [customEnd, setCustomEnd] = useState('');
const [searchInput, setSearchInput] = useState('');
const [committedSearch, setCommittedSearch] = useState('');
const [selectedTariffs, setSelectedTariffs] = useState<Set<string>>(new Set());
const [selectedStatuses, setSelectedStatuses] = useState<Set<string>>(new Set());
const [selectedNodes, setSelectedNodes] = useState<Set<string>>(new Set());
const [offset, setOffset] = useState(0);
const [total, setTotal] = useState(0);
const [exporting, setExporting] = useState(false);
@@ -376,34 +747,48 @@ export default function AdminTrafficUsage() {
const sortBy = sorting[0] ? toBackendSortField(sorting[0].id) : 'total_bytes';
const sortDesc = sorting[0]?.desc ?? true;
const tariffsParam = selectedTariffs.size > 0 ? [...selectedTariffs].join(',') : undefined;
const statusesParam = selectedStatuses.size > 0 ? [...selectedStatuses].join(',') : undefined;
const nodesParam = selectedNodes.size > 0 ? [...selectedNodes].join(',') : undefined;
const buildParams = useCallback(
(): TrafficParams => ({
period,
const buildParams = useCallback((): TrafficParams => {
const params: TrafficParams = {
limit,
offset,
search: committedSearch || undefined,
sort_by: sortBy,
sort_desc: sortDesc,
tariffs: tariffsParam,
}),
[period, offset, committedSearch, sortBy, sortDesc, tariffsParam],
);
statuses: statusesParam,
nodes: nodesParam,
};
if (dateMode && customStart && customEnd) {
params.start_date = customStart;
params.end_date = customEnd;
} else {
params.period = period;
}
return params;
}, [
period,
offset,
committedSearch,
sortBy,
sortDesc,
tariffsParam,
statusesParam,
nodesParam,
dateMode,
customStart,
customEnd,
]);
const applyData = useCallback(
(data: {
items: UserTrafficItem[];
nodes: TrafficNodeInfo[];
total: number;
available_tariffs: string[];
}) => {
setItems(data.items);
setNodes(data.nodes);
setTotal(data.total);
setAvailableTariffs(data.available_tariffs);
},
[],
);
const applyData = useCallback((data: TrafficUsageResponse) => {
setItems(data.items);
setNodes(data.nodes);
setTotal(data.total);
setAvailableTariffs(data.available_tariffs);
setAvailableStatuses(data.available_statuses);
}, []);
const loadData = useCallback(
async (skipCache = false) => {
@@ -438,8 +823,9 @@ export default function AdminTrafficUsage() {
loadData();
}, [loadData]);
// Prefetch adjacent periods in background
// Prefetch adjacent periods in background (only in period mode)
useEffect(() => {
if (dateMode) return;
const prefetchPeriods = PERIODS.filter((p) => p !== period);
const timer = setTimeout(() => {
prefetchPeriods.forEach((p) => {
@@ -456,8 +842,7 @@ export default function AdminTrafficUsage() {
});
}, 500);
return () => clearTimeout(timer);
// Only prefetch once on mount + when period changes
}, [period]);
}, [period, dateMode]);
useEffect(() => {
if (toast) {
@@ -475,7 +860,22 @@ export default function AdminTrafficUsage() {
const handleExport = async () => {
try {
setExporting(true);
await adminTrafficApi.exportCsv({ period });
const exportData: {
period: number;
start_date?: string;
end_date?: string;
tariffs?: string;
statuses?: string;
nodes?: string;
} = { period };
if (dateMode && customStart && customEnd) {
exportData.start_date = customStart;
exportData.end_date = customEnd;
}
if (tariffsParam) exportData.tariffs = tariffsParam;
if (statusesParam) exportData.statuses = statusesParam;
if (nodesParam) exportData.nodes = nodesParam;
await adminTrafficApi.exportCsv(exportData);
setToast({ message: t('admin.trafficUsage.exportSuccess'), type: 'success' });
} catch {
setToast({ message: t('admin.trafficUsage.exportError'), type: 'error' });
@@ -489,6 +889,34 @@ export default function AdminTrafficUsage() {
setOffset(0);
};
const handleToggleDateMode = () => {
if (dateMode) {
// Switch back to period mode
setDateMode(false);
setCustomStart('');
setCustomEnd('');
setOffset(0);
} else {
// Switch to date mode — pre-fill with last N days
const end = new Date();
const start = new Date(end.getTime() - period * 24 * 60 * 60 * 1000);
setCustomStart(start.toISOString().split('T')[0]);
setCustomEnd(end.toISOString().split('T')[0]);
setDateMode(true);
setOffset(0);
}
};
const handleCustomStartChange = (v: string) => {
setCustomStart(v);
setOffset(0);
};
const handleCustomEndChange = (v: string) => {
setCustomEnd(v);
setOffset(0);
};
const handleSortingChange = (updater: SortingState | ((old: SortingState) => SortingState)) => {
const next = typeof updater === 'function' ? updater(sorting) : updater;
setSorting(next);
@@ -500,10 +928,26 @@ export default function AdminTrafficUsage() {
setOffset(0);
};
const handleStatusChange = (next: Set<string>) => {
setSelectedStatuses(next);
setOffset(0);
};
const handleNodeChange = (next: Set<string>) => {
setSelectedNodes(next);
setOffset(0);
};
const handleRefresh = () => {
loadData(true);
};
// When node filter is active, show only selected node columns
const displayNodes = useMemo(
() => (selectedNodes.size > 0 ? nodes.filter((n) => selectedNodes.has(n.node_uuid)) : nodes),
[nodes, selectedNodes],
);
const columns = useMemo<ColumnDef<UserTrafficItem>[]>(() => {
const cols: ColumnDef<UserTrafficItem>[] = [
{
@@ -566,7 +1010,7 @@ export default function AdminTrafficUsage() {
return <span className="text-xs text-dark-300">{gb > 0 ? `${gb} GB` : '\u221E'}</span>;
},
},
...nodes.map(
...displayNodes.map(
(node): ColumnDef<UserTrafficItem> => ({
id: `node_${node.node_uuid}`,
accessorFn: (row) => row.node_traffic[node.node_uuid] || 0,
@@ -603,7 +1047,7 @@ export default function AdminTrafficUsage() {
},
];
return cols;
}, [nodes, t]);
}, [displayNodes, t]);
const table = useReactTable({
data: items,
@@ -671,12 +1115,24 @@ export default function AdminTrafficUsage() {
value={period}
onChange={handlePeriodChange}
label={t('admin.trafficUsage.period')}
dateMode={dateMode}
customStart={customStart}
customEnd={customEnd}
onToggleDateMode={handleToggleDateMode}
onCustomStartChange={handleCustomStartChange}
onCustomEndChange={handleCustomEndChange}
/>
<TariffFilter
available={availableTariffs}
selected={selectedTariffs}
onChange={handleTariffChange}
/>
<NodeFilter available={nodes} selected={selectedNodes} onChange={handleNodeChange} />
<StatusFilter
available={availableStatuses}
selected={selectedStatuses}
onChange={handleStatusChange}
/>
<button
onClick={handleExport}
disabled={exporting}