component designer search and user search

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;
+};