From 94900b3875b010d4562d484fc46c8877cdb0f0ef Mon Sep 17 00:00:00 2001 From: Redsandyg Date: Tue, 3 Jun 2025 20:56:22 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=20=D1=8D=D0=BA=D1=81=D0=BF=D0=BE=D1=80=D1=82=D0=B8?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B0=D0=BD?= =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0?= =?UTF-8?q?=D1=82=D0=B5=20CSV=20=D0=B4=D0=BB=D1=8F=20=D1=82=D0=B0=D0=B1?= =?UTF-8?q?=D0=BB=D0=B8=D1=86:=20AgentsTable,=20BillingPayoutsTable,=20Pay?= =?UTF-8?q?outsTransactionsTable,=20ReferralsTable=20=D0=B8=20SalesTable.?= =?UTF-8?q?=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20?= =?UTF-8?q?=D0=B7=D0=B0=D0=B2=D0=B8=D1=81=D0=B8=D0=BC=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D0=B8=20=D0=B2=20package.json=20=D0=B8=20package-lock.json=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5=D1=80=D0=B6?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=BD=D0=BE=D0=B2=D0=BE=D0=B9=20=D1=84=D1=83?= =?UTF-8?q?=D0=BD=D0=BA=D1=86=D0=B8=D0=BE=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B8.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++++ package.json | 1 + src/components/AgentsTable.tsx | 58 +++++++++++++++----- src/components/BillingPayoutsTable.tsx | 58 +++++++++++++++----- src/components/PayoutsTransactionsTable.tsx | 60 +++++++++++++++------ src/components/ReferralsTable.tsx | 58 +++++++++++++++----- src/components/SalesTable.tsx | 58 +++++++++++++++----- 7 files changed, 232 insertions(+), 71 deletions(-) diff --git a/package-lock.json b/package-lock.json index c353749..42afef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 919bd5e..a24bc44 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/AgentsTable.tsx b/src/components/AgentsTable.tsx index 8c48934..28c291e 100644 --- a/src/components/AgentsTable.tsx +++ b/src/components/AgentsTable.tsx @@ -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 ( - - ); + const csvConfig = mkConfig({ + fieldSeparator: ',', + decimalSeparator: '.', + useKeysAsHeaders: true, + }); + + const table = useMaterialReactTable({ + columns, + data, + enableRowSelection: false, + renderTopToolbarCustomActions: ({ table }) => ( + + + + + + ), + muiTableBodyCellProps: { sx: { fontSize: 14 } }, + muiTableHeadCellProps: { sx: { fontWeight: 700 } }, + initialState: { pagination: { pageSize: 10, pageIndex: 0 } }, + }); + + const handleExportRows = (rows: MRT_Row[]) => { + 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 ; } \ No newline at end of file diff --git a/src/components/BillingPayoutsTable.tsx b/src/components/BillingPayoutsTable.tsx index fa44aeb..7431d4b 100644 --- a/src/components/BillingPayoutsTable.tsx +++ b/src/components/BillingPayoutsTable.tsx @@ -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 = { 'Ошибка': '#f44336', }; +const csvConfig = mkConfig({ + fieldSeparator: ',', + decimalSeparator: '.', + useKeysAsHeaders: true, +}); + export default function BillingPayoutsTable() { const columns = useMemo[]>( () => [ @@ -35,17 +44,38 @@ export default function BillingPayoutsTable() { [] ); - return ( - - ); + const table = useMaterialReactTable({ + columns, + data: mockData.payouts, + enableRowSelection: false, + renderTopToolbarCustomActions: ({ table }) => ( + + + + + + ), + muiTableBodyCellProps: { sx: { fontSize: 14 } }, + muiTableHeadCellProps: { sx: { fontWeight: 700 } }, + initialState: { pagination: { pageSize: 10, pageIndex: 0 } }, + }); + + const handleExportRows = (rows: MRT_Row[]) => { + 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 ; } \ No newline at end of file diff --git a/src/components/PayoutsTransactionsTable.tsx b/src/components/PayoutsTransactionsTable.tsx index f4f9588..a7daa84 100644 --- a/src/components/PayoutsTransactionsTable.tsx +++ b/src/components/PayoutsTransactionsTable.tsx @@ -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 }) => ( + + + + + + ), + muiTableBodyCellProps: { sx: { fontSize: 14 } }, + muiTableHeadCellProps: { sx: { fontWeight: 700 } }, + initialState: { pagination: { pageSize: 10, pageIndex: 0 } }, + }); + + const handleExportRows = (rows: MRT_Row[]) => { + 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 ( -
-

История выплат

- +

История выплат

+
- ); } \ No newline at end of file diff --git a/src/components/ReferralsTable.tsx b/src/components/ReferralsTable.tsx index 8bb43d2..d70e67e 100644 --- a/src/components/ReferralsTable.tsx +++ b/src/components/ReferralsTable.tsx @@ -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 ( - - ); + const csvConfig = mkConfig({ + fieldSeparator: ',', + decimalSeparator: '.', + useKeysAsHeaders: true, + }); + + const table = useMaterialReactTable({ + columns, + data, + enableRowSelection: false, + renderTopToolbarCustomActions: ({ table }) => ( + + + + + + ), + muiTableBodyCellProps: { sx: { fontSize: 14 } }, + muiTableHeadCellProps: { sx: { fontWeight: 700 } }, + initialState: { pagination: { pageSize: 10, pageIndex: 0 } }, + }); + + const handleExportRows = (rows: MRT_Row[]) => { + 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 ; } \ No newline at end of file diff --git a/src/components/SalesTable.tsx b/src/components/SalesTable.tsx index fa1d5cc..5a070e9 100644 --- a/src/components/SalesTable.tsx +++ b/src/components/SalesTable.tsx @@ -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 ( - - ); + const csvConfig = mkConfig({ + fieldSeparator: ',', + decimalSeparator: '.', + useKeysAsHeaders: true, + }); + + const table = useMaterialReactTable({ + columns, + data, + enableRowSelection: false, + renderTopToolbarCustomActions: ({ table }) => ( + + + + + + ), + muiTableBodyCellProps: { sx: { fontSize: 14 } }, + muiTableHeadCellProps: { sx: { fontWeight: 700 } }, + initialState: { pagination: { pageSize: 10, pageIndex: 0 } }, + }); + + const handleExportRows = (rows: MRT_Row[]) => { + 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 ; } \ No newline at end of file