feat: deals table

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -0,0 +1,74 @@
+import { IconEdit } from "@tabler/icons-react";
+import { MRT_TableOptions } from "mantine-react-table";
+import { ActionIcon, Group, Pagination, Stack, Tooltip } from "@mantine/core";
+import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import BaseTable from "@/components/ui/BaseTable/BaseTable";
+import { useDrawersContext } from "@/drawers/DrawersContext";
+import { DealSchema } from "@/lib/client";
+
+const DealsTable = () => {
+    const { deals, paginationInfo, page, setPage, dealsCrud } =
+        useDealsContext();
+    const { openDrawer } = useDrawersContext();
+    const columns = useDealsTableColumns();
+    const defaultSorting = [{ id: "createdAt", desc: false }];
+
+    const onEditDeal = (deal: DealSchema) => {
+        openDrawer({
+            key: "dealEditorDrawer",
+            props: {
+                deal,
+                dealsCrud,
+            },
+        });
+    };
+
+    return (
+        <Stack
+            gap={"xs"}
+            h={"calc(100vh - 125px)"}>
+            <BaseTable
+                data={deals}
+                columns={columns}
+                restProps={
+                    {
+                        enableSorting: true,
+                        enableColumnActions: false,
+                        paginationDisplayMode: "pages",
+                        initialState: {
+                            sorting: defaultSorting,
+                        },
+                        mantinePaginationProps: {
+                            showRowsPerPage: false,
+                        },
+                        enableStickyHeader: true,
+                        enableStickyFooter: true,
+                        enableRowActions: true,
+                        renderRowActions: ({ row }) => (
+                            <Tooltip label="Редактировать">
+                                <ActionIcon
+                                    bdrs={"md"}
+                                    size={"lg"}
+                                    onClick={() => onEditDeal(row.original)}
+                                    variant={"default"}>
+                                    <IconEdit />
+                                </ActionIcon>
+                            </Tooltip>
+                        ),
+                    } as MRT_TableOptions<DealSchema>
+                }
+            />
+            <Group justify={"flex-end"}>
+                <Pagination
+                    withEdges
+                    total={paginationInfo.totalPages}
+                    value={page}
+                    onChange={setPage}
+                />
+            </Group>
+        </Stack>
+    );
+};
+
+export default DealsTable;

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { DealSchema } from "@/lib/client";
+
+const useDealsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<DealSchema>[]>(
+        () => [
+            {
+                accessorKey: "id",
+                header: "Номер",
+                size: 20,
+            },
+            {
+                accessorKey: "name",
+                header: "Название",
+                enableSorting: false,
+            },
+            {
+                header: "Дата создания",
+                accessorKey: "createdAt",
+                Cell: ({ row }) =>
+                    new Date(row.original.createdAt).toLocaleString("ru-RU"),
+                enableSorting: true,
+                sortingFn: (rowA, rowB) =>
+                    new Date(rowB.original.createdAt).getTime() -
+                    new Date(rowA.original.createdAt).getTime(),
+            },
+        ],
+        []
+    );
+};
+
+export default useDealsTableColumns;