searchable user

src/pages/invoice/Create.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState, type FC } from "react";
 import Button from "@/components/Button";
-import Select from "@/components/Select";
 import { Add, TickSquare } from "iconsax-react";
 import { toast } from "@/shared/toast";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -8,7 +7,6 @@ import { Paths } from "@/config/Paths";
 import { extractErrorMessage } from "@/config/func";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { useGetUsers } from "@/pages/user/hooks/useUserData";
 import type { CreatePreInvoiceType, CreatePreInvoiceItemType } from "./types/Types";
 import InvoiceItemRow from "./components/InvoiceItemRow";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -20,6 +18,7 @@ import { useGetRequestDetail } from "@/pages/requests/hooks/useRequestData";
 import { useMultiUpload } from "../uploader/hooks/useUploader";
 import moment from "moment-jalaali";
 import { getItemLineTotal } from "./utils/invoiceItem";
+import UserSearch from "../user/UserSearch";
 
 const createEmptyItem = (): CreatePreInvoiceItemType => ({
     productId: "",
@@ -37,7 +36,6 @@ const CreateInvoice: FC = () => {
     const requestId = searchParams.get("requestId") ?? undefined;
 
     const { mutate: submitInvoice, isPending } = useCreateInvoice();
-    const { data: usersData } = useGetUsers();
     const { data: requestData, isLoading: isLoadingRequest } = useGetRequestDetail(requestId ?? "");
     const hydratedRequestId = useRef<string | null>(null);
     const multiUpload = useMultiUpload()
@@ -164,8 +162,6 @@ const CreateInvoice: FC = () => {
 
     const totalAmount = items.reduce((sum, i) => sum + getItemLineTotal(i), 0);
 
-    const users = usersData?.data ?? [];
-
     return (
         <div className="mt-5">
             <div className="justify-between items-center flex">
@@ -187,20 +183,22 @@ const CreateInvoice: FC = () => {
 
                 {!requestId && (
                     <div className="rowTwoInput mt-6">
-                        <Select
-                            items={users.map((u) => ({
-                                label: u.firstName && u.lastName ? `${u.firstName} ${u.lastName}` : u.phone,
-                                value: String(u.id),
-                            }))}
+                        <div className="w-full">
+                            <UserSearch
                                 label="مشتری"
-                            placeholder="انتخاب"
+                                placeholder="جستجوی مشتری (نام، موبایل، ...)"
                                 value={formik.values.userId}
-                            onChange={(e) => formik.setFieldValue("userId", e.target.value)}
-                            onBlur={formik.handleBlur}
-                            error_text={
-                                formik.errors.userId && formik.touched.userId ? formik.errors.userId : ""
-                            }
+                                onChange={(id) => {
+                                    formik.setFieldValue("userId", id);
+                                    formik.setFieldTouched("userId", true);
+                                }}
                             />
+                            {formik.errors.userId && formik.touched.userId ? (
+                                <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
+                                    {formik.errors.userId}
+                                </div>
+                            ) : null}
+                        </div>
                     </div>
                 )}