added new selectproject field inside ManageRecurring

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -27,6 +27,7 @@ import InputSuggestions from "../common/InputSuggestion";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import HoverPopup from "../common/HoverPopup";
+import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 
 const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
   const {
@@ -131,7 +132,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
     }
   }, [currencyData, requestToEdit, setValue]);
 
-  const StrikeDate = watch("strikeDate")
+  const StrikeDate = watch("strikeDate");
 
   const onSubmit = (fromdata) => {
     let payload = {
@@ -163,10 +164,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         {/* Project and Category */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>
-              Select Project
-            </Label>
-            <select
+            {/* <select
               className="form-select form-select-sm"
               {...register("projectId")}
             >
@@ -180,7 +178,19 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </option>
                 ))
               )}
-            </select>
+            </select> */}
+            <SelectProjectField
+              label="Select 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>
             )}
@@ -235,7 +245,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
           </div>
 
           <div className="col-md-6 mt-2">
-            <div className="d-flex justify-content-start align-items-center gap-2">
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
               <Label htmlFor="isVariable" className="form-label mb-0" required>
                 Payment Type
               </Label>
@@ -243,13 +253,16 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 title="Payment Type"
                 id="payment_type"
                 content={
-                  <p>
-                    Choose whether the payment amount varies or remains fixed each cycle.
-                    <br />
-                    <strong>Is Variable:</strong> Amount changes per cycle.
-                    <br />
-                    <strong>Fixed:</strong> Amount stays constant.
-                  </p>
+                  <div className=" w-50">
+                    <p>
+                      Choose whether the payment amount varies or remains fixed
+                      each cycle.
+                      <br />
+                      <strong>Is Variable:</strong> Amount changes per cycle.
+                      <br />
+                      <strong>Fixed:</strong> Amount stays constant.
+                    </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
@@ -270,7 +283,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === true}
                       onChange={() => field.onChange(true)}
                     />
-                    <Label htmlFor="isVariableTrue" className="form-check-label">
+                    <Label
+                      htmlFor="isVariableTrue"
+                      className="form-check-label"
+                    >
                       Is Variable
                     </Label>
                   </div>
@@ -283,7 +299,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === false}
                       onChange={() => field.onChange(false)}
                     />
-                    <Label htmlFor="isVariableFalse" className="form-check-label">
+                    <Label
+                      htmlFor="isVariableFalse"
+                      className="form-check-label"
+                    >
                       Fixed
                     </Label>
                   </div>
@@ -295,7 +314,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <small className="danger-text">{errors.isVariable.message}</small>
             )}
           </div>
-
         </div>
 
         {/* Date and Amount */}
@@ -391,11 +409,12 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 id="frequency"
                 content={
                   <p>
-                    Defines how often payments or billing occur, such as monthly, quarterly, or annually.
+                    Defines how often payments or billing occur, such as
+                    monthly, quarterly, or annually.
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -444,10 +463,13 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
 
         {/* Payment Buffer Days and End Date */}
         <div className="row my-2 text-start">
-
           <div className="col-md-6">
-            <div className="d-flex justify-content-start align-items-center gap-2">
-              <Label htmlFor="paymentBufferDays" className="form-label mb-0" required>
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
+              <Label
+                htmlFor="paymentBufferDays"
+                className="form-label mb-0 "
+                required
+              >
                 Payment Buffer Days
               </Label>
               <HoverPopup
@@ -455,11 +477,12 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 id="payment_buffer_days"
                 content={
                   <p>
-                    Number of extra days allowed after the due date before payment is considered late.
+                    Number of extra days allowed after the due date before
+                    payment is considered late.
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -480,9 +503,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             )}
           </div>
 
-
           <div className="col-md-6">
-            <div className="d-flex justify-content-start align-items-center gap-2">
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
               <Label htmlFor="endDate" className="form-label mb-0" required>
                 End Date
               </Label>
@@ -495,7 +517,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -510,10 +532,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <small className="danger-text">{errors.endDate.message}</small>
             )}
           </div>
-
         </div>
 
-
         <div className="row my-2 text-start">
           <div className="col-md-6">
             <Label htmlFor="notifyTo" className="form-label" required>
@@ -572,8 +592,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             {createPending || isPending
               ? "Please wait...."
               : requestToEdit
-                ? "Update"
-                : "Save as Draft"}
+              ? "Update"
+              : "Save as Draft"}
           </button>
         </div>
       </form>