component designer search and user search

src/pages/admin/service/AdminService.ts

@@ -13,6 +13,13 @@ export const getAdmins = async (page: number, limit: number = 10) => {
   return data;
 };
 
+export const searchAdmins = async (search: string) => {
+  const { data } = await axios.get<AdminsType>("/admin/admins/search", {
+    params: { search: search || undefined },
+  });
+  return data;
+};
+
 export const createAdmin = async (params: CreateAdminType) => {
   const { data } = await axios.post("/admin/admin", params);
   return data;

src/pages/designer/DesignerSearch.tsx

@@ -0,0 +1,100 @@
+import { type FC, useEffect, useRef, useState } from "react";
+import { clx } from "@/helpers/utils";
+import { useDesignerSearch } from "./hooks/useDesignerSearch";
+import type { AdminItemType } from "../admin/types/Types";
+
+const DEBOUNCE_MS = 400;
+
+type DesignerSearchProps = {
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  onChange?: (designId: string) => void;
+  value?: string;
+};
+
+const DesignerSearch: FC<DesignerSearchProps> = ({
+  label,
+  placeholder = "جستجوی طراح (نام، موبایل، ...)",
+  className,
+  onChange,
+  value = "",
+}) => {
+  const [search, setSearch] = useState(value);
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  const { designers, isFetching } = useDesignerSearch(debouncedSearch);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSelect = (designer: AdminItemType) => {
+    setSearch(`${designer.firstName} ${designer.lastName}`);
+    onChange?.(designer.id);
+    setIsOpen(false);
+  };
+
+  const displayLabel = (designer: AdminItemType) =>
+    `${designer.firstName} ${designer.lastName}`;
+
+  return (
+    <div ref={wrapperRef} className={clx("w-full relative", className)}>
+      {label && (
+        <label className="text-sm text-primary-content block mb-1">{label}</label>
+      )}
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value);
+          setIsOpen(true);
+        }}
+        onFocus={() => setIsOpen(true)}
+        placeholder={placeholder}
+        className="w-full bg-white h-10 text-black block px-4 text-xs rounded-xl border border-border"
+      />
+      {isOpen && debouncedSearch.length > 0 && (
+        <div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border border-border rounded-xl shadow-lg max-h-60 overflow-auto">
+          {isFetching ? (
+            <div className="px-4 py-3 text-xs text-description">در حال جستجو...</div>
+          ) : designers.length === 0 ? (
+            <div className="px-4 py-3 text-xs text-description">نتیجه‌ای یافت نشد</div>
+          ) : (
+            <ul className="py-1">
+              {designers.map((designer) => (
+                <li key={designer.id}>
+                  <button
+                    type="button"
+                    onClick={() => handleSelect(designer)}
+                    className="w-full text-right px-4 py-2 text-xs hover:bg-muted transition-colors flex flex-col"
+                  >
+                    <span className="font-medium">{displayLabel(designer)}</span>
+                    {designer.phone && (
+                      <span className="text-description text-[10px]">{designer.phone}</span>
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DesignerSearch;

src/pages/designer/hooks/useDesignerSearch.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { searchAdmins } from "../../admin/service/AdminService";
+import type { AdminItemType } from "../../admin/types/Types";
+
+export const useDesignerSearch = (debouncedSearch: string) => {
+  const { data, isFetching } = useQuery({
+    queryKey: ["designers", "search", debouncedSearch],
+    queryFn: () => searchAdmins(debouncedSearch),
+    enabled: debouncedSearch.length > 0,
+  });
+
+  const designers = (data?.data ?? []) as AdminItemType[];
+
+  return { designers, isFetching };
+};

src/pages/order/List.tsx

@@ -1,5 +1,5 @@
 import Filters from '@/components/Filters'
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import Table from '@/components/Table'
 import { AddSquare, Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
 import { useGetOrders } from './hooks/useOrderData'
@@ -8,10 +8,12 @@ import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import type { OrderListItemType } from './types/Types'
 import Button from '@/components/Button'
+import UserSearch from '../user/UserSearch'
+import DesignerSearch from '../designer/DesignerSearch'
 
 const OrdersList: FC = () => {
-
-    const { data } = useGetOrders()
+    const [designId, setDesignId] = useState<string | undefined>()
+    const { data } = useGetOrders({ designId })
 
     return (
         <div className='mt-5'>
@@ -27,7 +29,7 @@ const OrdersList: FC = () => {
                 </Link>
             </div>
 
-            <div className='mt-8'>
+            <div className='mt-8 flex flex-wrap items-end gap-4'>
                 <Filters
                     fields={[
                         {
@@ -50,6 +52,12 @@ const OrdersList: FC = () => {
                         },
                     ]}
                     onChange={() => { }} />
+                <UserSearch className='w-[220px]' />
+                <DesignerSearch
+                    className='w-[220px]'
+                    placeholder='جستجوی طراح'
+                    onChange={(id) => setDesignId(id || undefined)}
+                />
             </div>
 
             <div className='mt-8'>

src/pages/order/hooks/useOrderData.ts

@@ -6,10 +6,10 @@ import type {
   OrderPrintFormType,
 } from "../types/Types";
 
-export const useGetOrders = () => {
+export const useGetOrders = (params?: { designId?: string }) => {
   return useQuery({
-    queryKey: ["orders"],
-    queryFn: api.getOrders,
+    queryKey: ["orders", params?.designId],
+    queryFn: () => api.getOrders(params),
   });
 };
 

src/pages/order/service/OrderService.ts

@@ -15,8 +15,10 @@ import type {
   ProductResponeType,
 } from "@/pages/product/types/Types";
 
-export const getOrders = async () => {
-  const { data } = await axios.get<OrderListResponseType>(`/admin/orders`);
+export const getOrders = async (params?: { designId?: string }) => {
+  const { data } = await axios.get<OrderListResponseType>(`/admin/orders`, {
+    params: params?.designId ? { designId: params.designId } : undefined,
+  });
   return data;
 };
 

src/pages/user/UserSearch.tsx

@@ -0,0 +1,100 @@
+import { type FC, useEffect, useRef, useState } from "react";
+import { clx } from "@/helpers/utils";
+import { useUserSearch } from "./hooks/useUserSearch";
+import type { UserType } from "./types/Types";
+
+const DEBOUNCE_MS = 400;
+
+type UserSearchProps = {
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  onChange?: (userId: string) => void;
+  value?: string;
+};
+
+const UserSearch: FC<UserSearchProps> = ({
+  label,
+  placeholder = "جستجوی کاربر (نام، موبایل، ...)",
+  className,
+  onChange,
+  value = "",
+}) => {
+  const [search, setSearch] = useState(value);
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  const { users, isFetching } = useUserSearch(debouncedSearch);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSelect = (user: UserType) => {
+    setSearch(user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.phone);
+    onChange?.(user.id);
+    setIsOpen(false);
+  };
+
+  const displayLabel = (user: UserType) =>
+    user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.phone;
+
+  return (
+    <div ref={wrapperRef} className={clx("w-full relative", className)}>
+      {label && (
+        <label className="text-sm text-primary-content block mb-1">{label}</label>
+      )}
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value);
+          setIsOpen(true);
+        }}
+        onFocus={() => setIsOpen(true)}
+        placeholder={placeholder}
+        className="w-full bg-white h-10 text-black block px-4 text-xs rounded-xl border border-border"
+      />
+      {isOpen && debouncedSearch.length > 0 && (
+        <div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border border-border rounded-xl shadow-lg max-h-60 overflow-auto">
+          {isFetching ? (
+            <div className="px-4 py-3 text-xs text-description">در حال جستجو...</div>
+          ) : users.length === 0 ? (
+            <div className="px-4 py-3 text-xs text-description">نتیجه‌ای یافت نشد</div>
+          ) : (
+            <ul className="py-1">
+              {users.map((user) => (
+                <li key={user.id}>
+                  <button
+                    type="button"
+                    onClick={() => handleSelect(user)}
+                    className="w-full text-right px-4 py-2 text-xs hover:bg-muted transition-colors flex flex-col"
+                  >
+                    <span className="font-medium">{displayLabel(user)}</span>
+                    {user.phone && (
+                      <span className="text-description text-[10px]">{user.phone}</span>
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserSearch;

src/pages/user/hooks/useUserSearch.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { searchUsers } from "../service/UserService";
+import type { UserType } from "../types/Types";
+
+export const useUserSearch = (debouncedSearch: string) => {
+  const { data, isFetching } = useQuery({
+    queryKey: ["users", "search", debouncedSearch],
+    queryFn: () => searchUsers(debouncedSearch),
+    enabled: debouncedSearch.length > 0,
+  });
+
+  const users = (data?.data ?? []) as UserType[];
+
+  return { users, isFetching };
+};

src/pages/user/service/UserService.ts

@@ -7,3 +7,11 @@ export const getUsers = async (page: number) => {
   );
   return data;
 };
+
+export const searchUsers = async (search: string) => {
+  const { data } = await axios.get<UsersResponseType>(
+    `/admin/users/search`,
+    { params: { search: search || undefined } }
+  );
+  return data;
+};