othr

src/pages/ClientsPage/ClientsPage.module.css

@@ -0,0 +1,4 @@
+.container {
+    /*background: rebeccapurple;*/
+    flex: 1;
+}

src/pages/ClientsPage/ClientsPage.tsx

@@ -0,0 +1,17 @@
+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";
+
+
+const ClientsPage: FC = () => {
+    const {data} = useQuery({queryKey: ['clients'], queryFn: ClientService.getAllClients})
+    return (
+        <div className={styles['container']}>
+            <ClientsTable data={data?.clients || []}/>
+        </div>
+    )
+}
+
+export default ClientsPage;

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

@@ -0,0 +1,53 @@
+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";
+
+type Props = {
+    data: Client[];
+
+}
+const ClientsTable: FC<Props> = ({data}) => {
+
+    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>
+    )
+}
+
+export default ClientsTable;

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

@@ -0,0 +1,12 @@
+import {Client} from "../../../../types/Client.ts";
+
+type Column = {
+    accessorKey: keyof Client;
+    header: string;
+}
+export const columns: Column[] = [
+    {
+        accessorKey: 'name',
+        header: 'Название'
+    }
+]