feat: clients search

src/pages/ClientsPage/ClientsPage.tsx

@@ -3,15 +3,17 @@ import ClientsTable from "./components/ClientsTable/ClientsTable.tsx";
 import useClientsList from "./hooks/useClientsList.tsx";
 import PageBlock from "../../components/PageBlock/PageBlock.tsx";
 import styles from "./ClientsPage.module.css";
-import { Button } from "@mantine/core";
+import { Button, TextInput } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { ClientSchema, ClientService } from "../../client";
 import { notifications } from "../../shared/lib/notifications.ts";
 import { ChatContextProvider } from "./contexts/ChatContext.tsx";
 import ClientChatDrawer from "./drawers/ClientChatDrawer/ClientChatDrawer.tsx";
+import useClientsFilter from "./hooks/useClientsFilter.tsx";
 
 const ClientsPage: FC = () => {
     const { clients, refetch } = useClientsList();
+    const { filteredClients, search, setSearch } = useClientsFilter({ clients });
     const onCreate = (client: ClientSchema) => {
         ClientService.createClientApi({
             requestBody: {
@@ -61,6 +63,11 @@ const ClientsPage: FC = () => {
                         variant={"default"}>
                         Создать клиента
                     </Button>
+                    <TextInput
+                        placeholder={"Поиск"}
+                        value={search}
+                        onChange={e => setSearch(e.target.value)}
+                    />
                 </div>
             </PageBlock>
             <PageBlock>
@@ -68,7 +75,7 @@ const ClientsPage: FC = () => {
                     <ClientsTable
                         onChange={onChange}
                         onDelete={onDelete}
-                        items={clients}
+                        items={filteredClients}
                         refetch={refetch}
                     />
                     <ClientChatDrawer />

src/pages/ClientsPage/hooks/useClientsFilter.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { ClientSchema } from "../../../client";
+import { useDebouncedValue } from "@mantine/hooks";
+
+type Props = {
+    clients: ClientSchema[];
+}
+
+const useClientsFilter = ({ clients }: Props) => {
+    const [search, setSearch] = useState<string>("");
+    const debouncedSearch = useDebouncedValue(search, 400);
+    const [filteredClients, setFilteredClients] = useState<ClientSchema[]>([]);
+
+    const filterClients = () => {
+        const loweredSearch = search.toLowerCase();
+        const filtered = clients.filter(
+            client => (
+                client.name.toLowerCase().includes(loweredSearch) ||
+                client.details?.inn?.includes(loweredSearch) ||
+                client.details?.email?.toLowerCase().includes(loweredSearch) ||
+                client.details?.telegram?.toLowerCase().includes(loweredSearch) ||
+                client.details?.phoneNumber?.includes(loweredSearch) ||
+                client.companyName.toLowerCase().includes(loweredSearch)
+            ),
+        );
+        setFilteredClients(filtered);
+    };
+
+    useEffect(() => {
+        filterClients();
+    }, [debouncedSearch]);
+
+    return {
+        search,
+        setSearch,
+        filteredClients,
+    };
+};
+
+export default useClientsFilter;