redsandy/partner-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено экспортирование данных в формате CSV для таблиц: AgentsTable, BillingPayoutsTable, PayoutsTransactionsTable, ReferralsTable и SalesTable. Обновлены зависимости в package.json и package-lock.json для поддержки новой функциональности.

Browse Source
This commit is contained in:
Redsandyg
2025-06-03 20:56:22 +03:00
parent 582f5330c8
commit 94900b3875
7 changed files with 232 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/AgentsTable.tsx
View File

@@ -1,6 +1,9 @@
import { useEffect, useState, useMemo } from 'react';
import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
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", {
@@ -36,17 +39,44 @@ export default function AgentsTable({ filters, reloadKey }: { filters: { dateSta
[]
);
return (
<MaterialReactTable
columns={columns}
data={data}
enableColumnActions={false}
enableColumnFilters={false}
enableSorting={true}
enablePagination={true}
muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
/>
);
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} />;
}

58
src/components/BillingPayoutsTable.tsx
View File

@@ -1,6 +1,9 @@
import { useMemo } from 'react';
import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
import { MaterialReactTable, MRT_ColumnDef, MRT_Row, useMaterialReactTable } from 'material-react-table';
import mockData from '../data/mockData';
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', {
@@ -16,6 +19,12 @@ const statusColor: Record<string, string> = {
'Ошибка': '#f44336',
};
const csvConfig = mkConfig({
fieldSeparator: ',',
decimalSeparator: '.',
useKeysAsHeaders: true,
});
export default function BillingPayoutsTable() {
const columns = useMemo<MRT_ColumnDef<any>[]>(
() => [
@@ -35,17 +44,38 @@ export default function BillingPayoutsTable() {
[]
);
return (
<MaterialReactTable
columns={columns}
data={mockData.payouts}
enableColumnActions={false}
enableColumnFilters={false}
enableSorting={true}
enablePagination={true}
muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
/>
);
const table = useMaterialReactTable({
columns,
data: mockData.payouts,
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)(mockData.payouts);
download(csvConfig)(csv);
};
return <MaterialReactTable table={table} />;
}

60
src/components/PayoutsTransactionsTable.tsx
View File

@@ -1,6 +1,9 @@
import { useEffect, useState, useMemo } from "react";
import { MaterialReactTable, MRT_ColumnDef } from "material-react-table";
import { MaterialReactTable, MRT_ColumnDef, MRT_Row, useMaterialReactTable } from "material-react-table";
import styles from "../styles/billing.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) {
@@ -51,22 +54,49 @@ export default function PayoutsTransactionsTable({ filters, reloadKey }: { filte
[]
);
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 (
<div className={styles.tableBlock}>
<h3 className={styles.tableTitle}>История выплат</h3>
<MaterialReactTable
columns={columns}
data={data}
enableColumnActions={false}
enableColumnFilters={false}
enableSorting={true}
enablePagination={true}
muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
/>
<h3 className={styles.tableTitle}>История выплат</h3>
<MaterialReactTable table={table} />
</div>
);
}

58
src/components/ReferralsTable.tsx
View File

@@ -1,6 +1,9 @@
import { useEffect, useState, useMemo } from 'react';
import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
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", {
@@ -35,17 +38,44 @@ export default function ReferralsTable({ filters, reloadKey }: { filters: { date
[]
);
return (
<MaterialReactTable
columns={columns}
data={data}
enableColumnActions={false}
enableColumnFilters={false}
enableSorting={true}
enablePagination={true}
muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
/>
);
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} />;
}

58
src/components/SalesTable.tsx
View File

@@ -1,6 +1,9 @@
import { useEffect, useState, useMemo } from 'react';
import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
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", {
@@ -36,17 +39,44 @@ export default function SalesTable({ filters, reloadKey }: { filters: { dateStar
[]
);
return (
<MaterialReactTable
columns={columns}
data={data}
enableColumnActions={false}
enableColumnFilters={false}
enableSorting={true}
enablePagination={true}
muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
/>
);
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} />;
}