feat: add admin traffic usage page with TanStack Table

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.
This commit is contained in:
Fringg
2026-02-07 09:04:55 +03:00
parent 280f4aef0d
commit a034a6068c
10 changed files with 716 additions and 8 deletions

53
src/api/adminTraffic.ts Normal file
View File

@@ -0,0 +1,53 @@
import apiClient from './client';
export interface TrafficNodeInfo {
node_uuid: string;
node_name: string;
country_code: string;
}
export interface UserTrafficItem {
user_id: number;
telegram_id: number | null;
username: string | null;
full_name: string;
tariff_name: string | null;
subscription_status: string | null;
traffic_limit_gb: number;
device_limit: number;
node_traffic: Record<string, number>;
total_bytes: number;
}
export interface TrafficUsageResponse {
items: UserTrafficItem[];
nodes: TrafficNodeInfo[];
total: number;
offset: number;
limit: number;
period_days: number;
}
export interface ExportCsvResponse {
success: boolean;
message: string;
}
export const adminTrafficApi = {
getTrafficUsage: async (params: {
period?: number;
limit?: number;
offset?: number;
search?: string;
sort_by?: string;
sort_desc?: boolean;
}): Promise<TrafficUsageResponse> => {
const response = await apiClient.get('/cabinet/admin/traffic', { params });
return response.data;
},
exportCsv: async (data: { period: number }): Promise<ExportCsvResponse> => {
const response = await apiClient.post('/cabinet/admin/traffic/export-csv', data);
return response.data;
},
};