fix client page

src/pages/ClientsPage.tsx

@@ -1,3 +1,4 @@
+import api from "../utils/api";
 import Button from "../components/Button";
 import CloseIcon from "../components/icons/CloseIcon";
 import SpinIcon from "../components/icons/SpinIcon";
@@ -6,8 +7,8 @@ import SearchInput from "../components/SearchInput";
 import { useState } from "react";
 import { useDebounce } from "@uidotdev/usehooks";
 import { useQuery } from "@tanstack/react-query";
-import api from "../utils/api";
 import { User } from "../types/User";
+import { Client } from "../types/Client";
 
 function ClientsPage() {
   const [limit, setLimit] = useState(10);
@@ -21,14 +22,26 @@ function ClientsPage() {
   });
 
   const { data: clients, isLoading } = useQuery({
-    queryKey: ["clients"],
+    queryKey: ["clients", debouncedSearch],
-    queryFn: () => api.get("clients").json<User[]>(),
+    queryFn: () =>
+      api
+        .get("clients", {
+          searchParams: debouncedSearch
+            ? { search: debouncedSearch, limit }
+            : {},
+        })
+        .json<Client[]>(),
     enabled: !!me,
   });
 
   const { data: count } = useQuery({
     queryKey: ["clients", "count", debouncedSearch],
-    queryFn: () => api.get(`sessions/count?clients`).json<number>(),
+    queryFn: () =>
+      api
+        .get(`clients/count`, {
+          searchParams: debouncedSearch ? { search: debouncedSearch } : {},
+        })
+        .json<number>(),
     enabled: !!me,
   });
 
@@ -37,11 +50,11 @@ function ClientsPage() {
   }
 
   return (
-    <div className=" flex flex-col gap-[1.667vw]">
+    <div className="flex flex-col gap-[1.667vw] h-full">
       <h1 className="title-l font-medium">Клиенты</h1>
       <div className="p-[1.389vw] rounded-[2.222vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.05),0_2px_2px_0_rgba(15,16,17,0.05)] w-full">
         <div className="space-y-[1.111vw]">
-          <div className="flex flex-col gap-[0.556vw]">
+          <div className="flex flex-col gap-[0.556vw] h-full">
             <SearchInput
               placeholder="Поиск клиентов"
               value={search || ""}
@@ -50,17 +63,7 @@ function ClientsPage() {
             />
             <div className="flex gap-[0.556vw]">
               <MultySelect
-                data={[
+                data={[]}
-                  { name: "С бронью", id: "1" },
-                  {
-                    name: "С избранными лотами",
-                    id: "2",
-                  },
-                  {
-                    name: "Без отправленных КП",
-                    id: "3",
-                  },
-                ]}
                 isGrid={false}
                 placeholder={"Все встречи"}
                 resetTitle={"Все встречи"}
@@ -96,9 +99,9 @@ function ClientsPage() {
             <SpinIcon />
           </div>
         ) : clients?.length ? (
-          clients?.map(({ fullname }) => (
+          clients?.map(({ name }) => (
-            <div key={fullname} className="space-y-[0.833vw]">
+            <div key={name} className="aspace-y-[0.833vw]">
-              <p className="caption-m font-medium opacity-40">{fullname}</p>
+              <p className="caption-m font-medium opacity-40">{name}</p>
             </div>
           ))
         ) : (