82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import { useEffect, useState, useMemo } from 'react';
|
||
import { MaterialReactTable, MRT_ColumnDef, MRT_Row, useMaterialReactTable } from 'material-react-table';
|
||
import styles from "../styles/stat.module.css";
|
||
import { Box, Button } from '@mui/material';
|
||
import FileDownloadIcon from '@mui/icons-material/FileDownload';
|
||
import { mkConfig, generateCsv, download } from 'export-to-csv';
|
||
|
||
function formatCurrency(amount: number) {
|
||
return amount?.toLocaleString("ru-RU", {
|
||
style: "currency",
|
||
currency: "RUB",
|
||
minimumFractionDigits: 0,
|
||
}) ?? "";
|
||
}
|
||
|
||
export default function AgentsTable({ filters, reloadKey }: { filters: { dateStart: string, dateEnd: string }, reloadKey: number }) {
|
||
const [data, setData] = useState<any[]>([]);
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams();
|
||
if (filters.dateStart) params.append('date_start', filters.dateStart);
|
||
if (filters.dateEnd) params.append('date_end', filters.dateEnd);
|
||
fetch(`/api/stat/agents?${params.toString()}`)
|
||
.then(res => res.json())
|
||
.then(setData)
|
||
.catch(() => setData([]));
|
||
}, [filters.dateStart, filters.dateEnd, reloadKey]);
|
||
|
||
const columns = useMemo<MRT_ColumnDef<any>[]>(
|
||
() => [
|
||
{ accessorKey: 'name', header: 'Имя' },
|
||
{ accessorKey: 'refCount', header: 'Кол-во рефов' },
|
||
{ accessorKey: 'salesCount', header: 'Кол-во продаж' },
|
||
{ accessorKey: 'salesSum', header: 'Сумма продаж',
|
||
Cell: ({ cell }) => formatCurrency(cell.getValue() as number) },
|
||
{ accessorKey: 'crediting', header: 'Начислено',
|
||
Cell: ({ cell }) => formatCurrency(cell.getValue() as number) },
|
||
],
|
||
[]
|
||
);
|
||
|
||
const csvConfig = mkConfig({
|
||
fieldSeparator: ',',
|
||
decimalSeparator: '.',
|
||
useKeysAsHeaders: true,
|
||
});
|
||
|
||
const table = useMaterialReactTable({
|
||
columns,
|
||
data,
|
||
enableRowSelection: false,
|
||
renderTopToolbarCustomActions: ({ table }) => (
|
||
<Box sx={{ display: 'flex', gap: 2, p: 1, flexWrap: 'wrap' }}>
|
||
<Button onClick={() => handleExportData()} startIcon={<FileDownloadIcon />}>
|
||
Экспорт всех данных
|
||
</Button>
|
||
<Button onClick={() => handleExportRows(table.getPrePaginationRowModel().rows)} startIcon={<FileDownloadIcon />} disabled={table.getPrePaginationRowModel().rows.length === 0}>
|
||
Экспорт всех строк
|
||
</Button>
|
||
<Button onClick={() => handleExportRows(table.getRowModel().rows)} startIcon={<FileDownloadIcon />} disabled={table.getRowModel().rows.length === 0}>
|
||
Экспорт текущей страницы
|
||
</Button>
|
||
</Box>
|
||
),
|
||
muiTableBodyCellProps: { sx: { fontSize: 14 } },
|
||
muiTableHeadCellProps: { sx: { fontWeight: 700 } },
|
||
initialState: { pagination: { pageSize: 10, pageIndex: 0 } },
|
||
});
|
||
|
||
const handleExportRows = (rows: MRT_Row<any>[]) => {
|
||
const rowData = rows.map((row) => row.original);
|
||
const csv = generateCsv(csvConfig)(rowData);
|
||
download(csvConfig)(csv);
|
||
};
|
||
|
||
const handleExportData = () => {
|
||
const csv = generateCsv(csvConfig)(data);
|
||
download(csvConfig)(csv);
|
||
};
|
||
|
||
return <MaterialReactTable table={table} />;
|
||
}
|