crap

src/pages/ClientsPage/ClientsPage.tsx

@@ -1,17 +1,18 @@
 import {FC} from "react";
-import styles from './ClientsPage.module.css';
 import ClientsTable from "./components/ClientsTable/ClientsTable.tsx";
-import {ClientService} from "../../client";
-import {useQuery} from "@tanstack/react-query";
-
+import useClientsList from "./hooks/useClientsList.tsx";
+import PageBlock from "../../components/PageBlock/PageBlock.tsx";
 
 const ClientsPage: FC = () => {
-    const {data} = useQuery({queryKey: ['clients'], queryFn: ClientService.getAllClients})
+    const {clients} = useClientsList();
     return (
-        <div className={styles['container']}>
-            <ClientsTable data={data?.clients || []}/>
-        </div>
+        <>
+            <PageBlock>
+
+                <ClientsTable data={clients}/>
+            </PageBlock>
+
+        </>
     )
 }
-
 export default ClientsPage;

src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx

@@ -1,52 +1,28 @@
-import {Checkbox, rem, Table} from "@mantine/core";
-import {columns} from "./columns.tsx";
-import React, {FC} from "react";
-import {Client} from "../../../../types/Client.ts";
-import {IconEdit} from "@tabler/icons-react";
-import {notifications} from "../../../../shared/lib/notifications.ts";
+import {FC} from "react";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {useClientsTableColumns} from "./columns.tsx";
+import {MantineReactTable, MRT_Table, MRT_TableOptions, useMantineReactTable} from "mantine-react-table";
+import {ClientSchema} from "../../../../client";
 
 type Props = {
-    data: Client[];
+    data: ClientSchema[];
 
 }
 const ClientsTable: FC<Props> = ({data}) => {
-
+    const columns = useClientsTableColumns();
     return (
-        <Table.ScrollContainer minWidth={rem(50)}>
-            <Table striped>
-
-                <Table.Thead>
-                    <Table.Tr>
-                        <Table.Th/>
-
-                        {columns.map(column => (
-                            <Table.Th>{column.header}</Table.Th>
-                        ))}
-                    </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>
-                    {data.map(client => (
-                        <Table.Tr key={client.name}>
-                            <Table.Td>
-
-                                <IconEdit
-                                    onClick={() => {
-                                        notifications.success({message: `Редактирую ${client.id}`})
-                                    }}
-                                    style={{cursor: 'pointer'}}
-                                />
-                            </Table.Td>
-
-                            {columns.map(column => (
-                                <Table.Td>{client[column.accessorKey]}</Table.Td>
-
-                            ))}
-                        </Table.Tr>
-                    ))}
-                </Table.Tbody>
-            </Table>
-
-        </Table.ScrollContainer>
+        <BaseTable
+            striped
+            data={data}
+            columns={columns}
+            restProps={{
+                enableSorting: false,
+                enableColumnActions: false,
+                enableRowSelection: true,
+                enableColumnResizing: true,
+                layoutMode: "grid"
+            } as MRT_TableOptions<ClientSchema>}
+        />
     )
 }
 

src/pages/ClientsPage/components/ClientsTable/columns.tsx

@@ -1,12 +1,25 @@
-import {Client} from "../../../../types/Client.ts";
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {ClientSchema} from "../../../../client";
 
-type Column = {
-    accessorKey: keyof Client;
-    header: string;
+
+export const useClientsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<ClientSchema>[]>(() => [
+        {
+            accessorKey: "name",
+            header: "Имя",
+        },
+        {
+            accessorKey: "details.address",
+            header: "Адрес"
+        },
+        {
+            accessorKey: "details.email",
+            header: "EMAIL"
+        },
+        {
+            accessorKey: "details.phone_number",
+            header: "Телефон"
+        }
+    ], []);
 }
-export const columns: Column[] = [
-    {
-        accessorKey: 'name',
-        header: 'Название'
-    }
-]

src/pages/ClientsPage/hooks/useClientsList.tsx

@@ -0,0 +1,13 @@
+import {ClientService} from "../../../client";
+import {useQuery} from "@tanstack/react-query";
+
+const useClientsList = () => {
+    const {isPending, error, data, refetch} = useQuery({
+        queryKey: ['getAllClients'],
+        queryFn: ClientService.getAllClients
+    });
+    const clients = isPending || error || !data ? [] : data.clients;
+
+    return {clients, refetch}
+}
+export default useClientsList;