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: 'Название'
+    }
+]

src/pages/LeadsPage/ui/LeadsPage.module.css

@@ -4,20 +4,6 @@
     flex-direction: column;
 }
 
-.header {
-    display: flex;
-    flex-direction: row;
-}
-
-.header-input {
-    flex: 1;
-}
-
-.header-button {
-    height: 100%;
-    width: 10%;
-    min-width: 5rem;
-}
 
 .search-input {
 

src/pages/LeadsPage/ui/LeadsPage.tsx

@@ -3,33 +3,16 @@ import styles from './LeadsPage.module.css';
 import Board from "../../../components/Dnd/Board/Board.tsx";
 import {Button, TextInput} from "@mantine/core";
 import {DragDropContext} from "@hello-pangea/dnd";
-import {useAppDispatch} from "../../../redux/store.ts";
-import {setIsLoading} from "../../../features/uiSlice.ts";
 
 export const LeadsPage: FC = () => {
-    const dispatch = useAppDispatch();
 
     useEffect(() => {
-        dispatch(setIsLoading(true));
+        // dispatch(setIsLoading(true));
     }, []);
 
     return (
         <>
             <div className={styles['container']}>
-                <div className={styles['header']}>
-                    <TextInput
-                        radius={0}
-                        placeholder={"Поиск и фильтры"}
-                        size={"xl"}
-                        className={styles['header-input']}
-                    />
-                    <Button
-                        radius={0}
-                        color={"gray"}
-                        variant={'default'}
-                        className={styles['header-button']}
-                    >Поиск</Button>
-                </div>
                 <div className={styles['boards']}>
                     <DragDropContext onDragEnd={() => {
                     }}>

src/pages/PageWrapper/PageWrapper.tsx

@@ -1,8 +1,9 @@
 import {FC, ReactNode} from "react";
-import {Flex} from "@mantine/core";
+import {Flex, rem} from "@mantine/core";
 import {Navbar} from "../../components/Navbar/Navbar.tsx";
 import {useSelector} from "react-redux";
 import {RootState} from "../../redux/store.ts";
+import Header from "../../components/Header/Header.tsx";
 
 export type Props = {
     children: ReactNode;
@@ -10,10 +11,20 @@ export type Props = {
 const PageWrapper: FC<Props> = ({children}) => {
     const authState = useSelector((state: RootState) => state.auth);
     return (<Flex style={{flex: 1}}>
+
             {authState.isAuthorized &&
+
                 <Navbar/>
             }
-            {children}
+            <div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
+                <Header/>
+                <div style={{padding:rem(20), flex:1}}>
+
+                    {children}
+                </div>
+
+            </div>
+
         </Flex>
     )
 }