added new project filed inside ManagePaymentRequest

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -29,6 +29,7 @@ import Filelist from "../Expenses/Filelist";
 import InputSuggestions from "../common/InputSuggestion";
 import { useProfile } from "../../hooks/useProfile";
 import { blockUI } from "../../utils/blockUI";
+import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 
 function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   const {
@@ -234,10 +235,10 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         {/* Project and Category */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>
+            {/* <Label className="form-label" required>
               Select Project
-            </Label>
+            </Label> */}
-            <select
+            {/* <select
               className="form-select form-select-sm"
               {...register("projectId")}
               disabled={
@@ -254,7 +255,23 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                   </option>
                 ))
               )}
-            </select>
+            </select> */}
+            <SelectProjectField
+              label="Project"
+              required
+              placeholder="Select Project"
+              value={watch("projectId")}
+              onChange={(val) =>
+                setValue("projectId", val, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+                
+              }
+                disabled={
+                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
+              }
+            />
             {errors.projectId && (
               <small className="danger-text">{errors.projectId.message}</small>
             )}

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -200,6 +200,7 @@ export const SelectProjectField = ({
   isFullObject = false,
   isMultiple = false,
   isAllProject = false,
+  disabled
 }) => {
   const [searchText, setSearchText] = useState("");
   const debounce = useDebounce(searchText, 300);
@@ -295,6 +296,7 @@ export const SelectProjectField = ({
           open ? "show" : ""
         }`}
         onClick={() => setOpen((prev) => !prev)}
+        disabled={disabled}
       >
         <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
           {displayText}