Implementing Project change

src/components/Expenses/ManageExpense.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
 import { formatFileSize, localToUtc } from "../../utils/appUtils";
-import {  useProjectName } from "../../hooks/useProjects";
+import { useProjectName } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster, {
@@ -32,6 +32,8 @@ import Label from "../common/Label";
 import EmployeeSearchInput from "../common/EmployeeSearchInput";
 import Filelist from "./Filelist";
 import { DEFAULT_CURRENCY } from "../../utils/constants";
+import SelectEmployeeServerSide, { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
+import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -40,6 +42,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     error: ExpenseErrorLoad,
   } = useExpense(expenseToEdit);
   const [expenseCategory, setExpenseCategory] = useState();
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
   const dispatch = useDispatch();
   const {
     expenseCategories,
@@ -83,11 +86,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     loading: StatusLoadding,
     error: stausError,
   } = useExpenseStatus();
-  const {
-    data: employees,
-    isLoading: EmpLoading,
-    isError: isEmployeeError,
-  } = useEmployeesNameByProject(selectedproject);
+  // const {
+  //   data: employees,
+  //   isLoading: EmpLoading,
+  //   isError: isEmployeeError,
+  // } = useEmployeesNameByProject(selectedproject);
 
   const files = watch("billAttachments");
   const onFileChange = async (e) => {
@@ -150,6 +153,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     }
   };
 
+  const { mutate: AllocationTeam, isPending1 } = useAllocationServiceProjectTeam(
+    () => {
+      setSelectedEmployees([]);
+      setSeletingEmp({
+        employee: null,
+        isOpen: false,
+      });
+    }
+  );
   useEffect(() => {
     if (expenseToEdit && data) {
       reset({
@@ -168,19 +180,19 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         currencyId: data.currency.id || DEFAULT_CURRENCY,
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
-              fileName: doc.fileName,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.documentId,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.documentId,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
-      });
+      });     
     }
-  }, [data, reset, employees]);
+  }, [data, reset]);
   const { mutate: ExpenseUpdate, isPending } = useUpdateExpense(() =>
     handleClose()
   );
@@ -223,7 +235,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div className="row my-2 text-start">
-          <div className="col-md-6">
+          {/* <div className="col-md-6">
             <Label className="form-label" required>
               Select Project
             </Label>
@@ -245,6 +257,24 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {errors.projectId && (
               <small className="danger-text">{errors.projectId.message}</small>
             )}
+          </div> */}
+          <div className="col-12 col-md-6 mb-2">
+            <SelectProjectField
+              label="Project"
+              required
+              placeholder="Select Project"
+              value={watch("projectId")}
+
+              onChange={(val) =>
+                setValue("projectId", val, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+              }
+            />
+            {errors.projectId && (
+              <small className="danger-text">{errors.projectId.message}</small>
+            )}
           </div>
 
           <div className="col-md-6">
@@ -314,9 +344,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               control={control}
               name="paidById"
               projectId={null}
-              forAll={expenseToEdit ? true : false}
+              forAll={true}
             />
-          </div>
+          </div>         
         </div>
 
         <div className="row my-2 text-start">
@@ -423,10 +453,10 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               <small className="danger-text">{errors.gstNumber.message}</small>
             )}
           </div>
-         
+
         </div>
-      <div className="row">
-           <div className="col-md-6 text-start ">
+        <div className="row">
+          <div className="col-md-6 text-start ">
             <Label htmlFor="currencyId" className="form-label" required>
               Select Currency
             </Label>
@@ -452,24 +482,24 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               <small className="danger-text">{errors.currencyId.message}</small>
             )}
           </div>
-        {expenseCategory?.noOfPersonsRequired && (
-          <div className="col-md-6  text-start">
-            <Label className="form-label" required>No. of Persons</Label>
-            <input
-              type="number"
-              id="noOfPersons"
-              className="form-control form-control-sm"
-              {...register("noOfPersons")}
-              inputMode="numeric"
-            />
-            {errors.noOfPersons && (
-              <small className="danger-text">
-                {errors.noOfPersons.message}
-              </small>
-            )}
-          </div>
-        )}
-      </div>
+          {expenseCategory?.noOfPersonsRequired && (
+            <div className="col-md-6  text-start">
+              <Label className="form-label" required>No. of Persons</Label>
+              <input
+                type="number"
+                id="noOfPersons"
+                className="form-control form-control-sm"
+                {...register("noOfPersons")}
+                inputMode="numeric"
+              />
+              {errors.noOfPersons && (
+                <small className="danger-text">
+                  {errors.noOfPersons.message}
+                </small>
+              )}
+            </div>
+          )}
+        </div>
 
         <div className="row my-2 text-start">
           <div className="col-md-12">
@@ -540,7 +570,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -565,8 +595,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {isPending || createPending
               ? "Please Wait..."
               : expenseToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
           </button>
         </div>
       </form>

src/components/common/EmployeeSearchInput.jsx

@@ -7,6 +7,7 @@ import Avatar from "./Avatar";
 const EmployeeSearchInput = ({
   control,
   name,
+  size = "sm",
   projectId,
   placeholder,
   forAll,
@@ -46,7 +47,7 @@ const EmployeeSearchInput = ({
       <input
         type="text"
         ref={ref}
-        className={`form-control form-control-sm`}
+        className={`form-control form-control-sm-${size}`}
         placeholder={placeholder}
         value={search}
         onChange={(e) => {