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

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",

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",

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({
-    <MaterialReactTable
+    fieldSeparator: ',',
-      columns={columns}
+    decimalSeparator: '.',
-      data={data}
+    useKeysAsHeaders: true,
-      enableColumnActions={false}
+  });
-      enableColumnFilters={false}
+
-      enableSorting={true}
+  const table = useMaterialReactTable({
-      enablePagination={true}
+    columns,
-      muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
+    data,
-      muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
+    enableRowSelection: false,
-      initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
+    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} />;
 } 

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<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 (
+  const table = useMaterialReactTable({
-    <MaterialReactTable
+    columns,
-      columns={columns}
+    data: mockData.payouts,
-      data={mockData.payouts}
+    enableRowSelection: false,
-      enableColumnActions={false}
+    renderTopToolbarCustomActions: ({ table }) => (
-      enableColumnFilters={false}
+      <Box sx={{ display: 'flex', gap: 2, p: 1, flexWrap: 'wrap' }}>
-      enableSorting={true}
+        <Button onClick={() => handleExportData()} startIcon={<FileDownloadIcon />}>
-      enablePagination={true}
+          Экспорт всех данных
-      muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
+        </Button>
-      muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
+        <Button onClick={() => handleExportRows(table.getPrePaginationRowModel().rows)} startIcon={<FileDownloadIcon />} disabled={table.getPrePaginationRowModel().rows.length === 0}>
-      initialState={{ pagination: { pageSize: 10, pageIndex: 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} />;
 } 

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
     []
   );
 
-  return (
+  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
+      <MaterialReactTable table={table} />
-        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 } }}
-        />
     </div>
-
   );
 } 

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({
-    <MaterialReactTable
+    fieldSeparator: ',',
-      columns={columns}
+    decimalSeparator: '.',
-      data={data}
+    useKeysAsHeaders: true,
-      enableColumnActions={false}
+  });
-      enableColumnFilters={false}
+
-      enableSorting={true}
+  const table = useMaterialReactTable({
-      enablePagination={true}
+    columns,
-      muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
+    data,
-      muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
+    enableRowSelection: false,
-      initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
+    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} />;
 } 

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({
-    <MaterialReactTable
+    fieldSeparator: ',',
-      columns={columns}
+    decimalSeparator: '.',
-      data={data}
+    useKeysAsHeaders: true,
-      enableColumnActions={false}
+  });
-      enableColumnFilters={false}
+
-      enableSorting={true}
+  const table = useMaterialReactTable({
-      enablePagination={true}
+    columns,
-      muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
+    data,
-      muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
+    enableRowSelection: false,
-      initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
+    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} />;
 }