Первый коммит

src/components/BillingPayoutsTable.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
+import mockData from '../data/mockData';
+
+function formatCurrency(amount: number) {
+  return amount?.toLocaleString('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+    minimumFractionDigits: 0,
+  }) ?? '';
+}
+
+const statusColor: Record<string, string> = {
+  'Завершена': '#4caf50',
+  'Ожидается': '#ff9800',
+  'Ошибка': '#f44336',
+};
+
+export default function BillingPayoutsTable() {
+  const columns = useMemo<MRT_ColumnDef<any>[]>(
+    () => [
+      { accessorKey: 'id', header: 'ID' },
+      { accessorKey: 'amount', header: 'Сумма',
+        Cell: ({ cell }) => formatCurrency(cell.getValue() as number) },
+      { accessorKey: 'date', header: 'Дата' },
+      { accessorKey: 'status', header: 'Статус',
+        Cell: ({ cell }) => (
+          <span style={{ color: statusColor[cell.getValue() as string] || '#333', fontWeight: 600 }}>
+            {cell.getValue() as string}
+          </span>
+        )
+      },
+      { accessorKey: 'method', header: 'Способ' },
+    ],
+    []
+  );
+
+  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 } }}
+    />
+  );
+}