feat: add reset functionality to MultySelect adnd clinet page

src/components/MultySelect.tsx

@@ -15,12 +15,14 @@ function MultySelect<T extends { name: string; id: string }>({
   placeholder,
   resetTitle,
   onSelect,
+  reset,
 }: {
   data: T[];
   isGrid: boolean;
   placeholder: string;
   resetTitle: string;
   onSelect: (values: T[]) => void;
+  reset?: boolean;
 }) {
   const [selectedValues, setSelectedValues] = useState<T[]>([]);
   const [isSelectVisible, setIsSelectVisible] = useState(false);
@@ -29,6 +31,12 @@ function MultySelect<T extends { name: string; id: string }>({
     setIsSelectVisible(false);
   });
 
+  useEffect(() => {
+    if (reset) {
+      setSelectedValues([]);
+    }
+  }, [reset]);
+
   useEffect(() => {
     onSelect(selectedValues);
   }, [selectedValues]);

src/pages/ClientsPage.tsx

@@ -1,5 +1,131 @@
+import Button from "../components/Button";
+import CloseIcon from "../components/icons/CloseIcon";
+import SpinIcon from "../components/icons/SpinIcon";
+import MultySelect from "../components/MultySelect";
+import SearchInput from "../components/SearchInput";
+import { useState } from "react";
+import { useDebounce } from "@uidotdev/usehooks";
+import { useQuery } from "@tanstack/react-query";
+import { IUser } from "../types/User";
+import api from "../utils/api";
+
 function ClientsPage() {
-  return <div></div>;
+  const [limit, setLimit] = useState(10);
+  const [search, setSearch] = useState<string | null>(null);
+
+  const debouncedSearch = useDebounce(search, 500);
+
+  const { data: me } = useQuery({
+    queryKey: ["me"],
+    queryFn: () => api.get("auth/me").json<IUser>(),
+  });
+
+  const { data: clients, isLoading } = useQuery({
+    queryKey: ["clients"],
+    queryFn: () => api.get("clients").json<IUser[]>(),
+    enabled: !!me,
+  });
+
+  const { data: count } = useQuery({
+    queryKey: ["clients", "count", debouncedSearch],
+    queryFn: () => api.get(`sessions/count?clients`).json<number>(),
+    enabled: !!me,
+  });
+
+  function reset() {
+    setSearch("");
+  }
+
+  return (
+    <div className=" flex flex-col gap-[1.667vw]">
+      <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]">
+            <SearchInput
+              placeholder="Поиск клиентов"
+              value={search || ""}
+              onChange={(e) => setSearch(e.target.value)}
+              setSearch={setSearch}
+            />
+            <div className="flex gap-[0.556vw]">
+              <MultySelect
+                data={[
+                  { name: "С бронью", id: "1" },
+                  {
+                    name: "С избранными лотами",
+                    id: "2",
+                  },
+                  {
+                    name: "Без отправленных КП",
+                    id: "3",
+                  },
+                ]}
+                isGrid={false}
+                placeholder={"Все встречи"}
+                resetTitle={"Все встречи"}
+                onSelect={() => console.log(1)}
+              />
+              <MultySelect
+                data={[{ name: "сценарии", id: "1" }]}
+                isGrid
+                placeholder={"Все сценарии"}
+                resetTitle={"Все сценарии"}
+                onSelect={() => console.log(1)}
+              />
+            </div>
+          </div>
+          <div className="flex justify-between items-center">
+            <p className="caption-m font-medium opacity-40">
+              Найдено {count} клиентов
+            </p>
+            <button className="flex gap-[0.278vw] items-center" onClick={reset}>
+              <div className="size-[1.111vw] text-[#7D7D7D]">
+                <CloseIcon />
+              </div>
+              <p className="text-[#7D7D7D] text-[0.972vw] font-medium">
+                Сбросить все
+              </p>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-[1.667vw]">
+        {isLoading ? (
+          <div className="size-[2.222vw] m-auto text-[#7B60F3] animate-spin">
+            <SpinIcon />
+          </div>
+        ) : clients?.length ? (
+          clients?.map(({ fullname }) => (
+            <div key={fullname} className="space-y-[0.833vw]">
+              <p className="caption-m font-medium opacity-40">{fullname}</p>
+            </div>
+          ))
+        ) : (
+          <div className="m-auto flex flex-col items-center gap-[1.111vw] w-[18.333vw] mt-[6.111vw]">
+            <img src="/images/sad_ghost.png" alt="" className="w-[13.889vw]" />
+            <div className="space-y-[0.556vw]">
+              <p className="text-center font-medium title-m">Ничего не нашли</p>
+              <p className="text-[#BDBDBD] caption-s font-medium">
+                Попробуйте изменить параметры поиска
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+      {!!count && clients?.length === 0 && (
+        <Button
+          size="large"
+          variant="primary"
+          className="w-full"
+          onClick={() => setLimit((prev) => prev + 10)}
+          disabled={!!count && limit >= count}
+        >
+          Показать еще
+        </Button>
+      )}
+    </div>
+  );
 }
 
 export default ClientsPage;

src/pages/SessionsPage.tsx

@@ -20,6 +20,7 @@ function SessionsPage() {
   const [search, setSearch] = useState<string | null>(null);
   const [managerIds, setManagerIds] = useState<string[]>([]);
   const [appIds, setAppIds] = useState<string[]>([]);
+  const [shouldReset, setShouldReset] = useState(false);
 
   const debouncedSearch = useDebounce(search, 500);
 
@@ -75,10 +76,12 @@ function SessionsPage() {
     setSearch("");
     setAppIds([]);
     setManagerIds([]);
+    setShouldReset(true);
+    setTimeout(() => setShouldReset(false), 0);
   }
 
   return (
-    <div className="py-[1.667vw] flex flex-col gap-[1.667vw]">
+    <div className=" flex flex-col gap-[1.667vw]">
       <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]">
@@ -101,6 +104,7 @@ function SessionsPage() {
                 placeholder={"Менеджер"}
                 resetTitle={"Все менеджеры"}
                 onSelect={(values) => setManagerIds(values.map(({ id }) => id))}
+                reset={shouldReset}
               />
               <MultySelect
                 data={apps || []}
@@ -108,6 +112,7 @@ function SessionsPage() {
                 placeholder={"Проект"}
                 resetTitle={"Все проекты"}
                 onSelect={(values) => setAppIds(values.map(({ id }) => id))}
+                reset={shouldReset}
               />
             </div>
           </div>