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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@mui/material": "^7.1.0",
"@mui/x-data-grid": "^8.5.0",
"@types/react-datepicker": "^6.2.0",
"export-to-csv": "^1.4.0",
"js-cookie": "^3.0.5",
"material-react-table": "^3.2.1",
"next": "15.3.3",
@ -1951,6 +1952,15 @@
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
"license": "MIT"
},
"node_modules/export-to-csv": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/export-to-csv/-/export-to-csv-1.4.0.tgz",
"integrity": "sha512-6CX17Cu+rC2Fi2CyZ4CkgVG3hLl6BFsdAxfXiZkmDFIDY4mRx2y2spdeH6dqPHI9rP+AsHEfGeKz84Uuw7+Pmg==",
"license": "MIT",
"engines": {
"node": "^v12.20.0 || >=v14.13.0"
}
},
"node_modules/fast-equals": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"@mui/material": "^7.1.0",
"@mui/x-data-grid": "^8.5.0",
"@types/react-datepicker": "^6.2.0",
"export-to-csv": "^1.4.0",
"js-cookie": "^3.0.5",
"material-react-table": "^3.2.1",
"next": "15.3.3",

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} />;
}