51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
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 } }}
|
|
/>
|
|
);
|
|
}
|