Merge branch 'migrate_main' of https://git.marcoaiot.com/admin/marco.pms.web into migrate_main

src/components/Layout/Sidebar.jsx

@@ -27,14 +27,14 @@ const Sidebar = () => {
 
           <a
             href="/"
-            class="app-brand-link fw-bold navbar-brand text-green fs-6"
+            className="app-brand-link fw-bold navbar-brand text-green fs-6"
           >
-            <span class="app-brand-logo demo">
+            <span className="app-brand-logo demo">
               <img src="/img/brand/marco.png" width="50" />
             </span>
-            <span class="text-blue">OnField</span>
+            <span className="text-blue">OnField</span>
             <span>Work</span>
-            <span class="text-dark">.com</span>
+            <span className="text-dark">.com</span>
           </a>
         </Link>
 

src/components/PaymentRequest/ViewPaymentRequest.jsx

@@ -31,6 +31,7 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
   EXPENSE_PROCESSED,
   EXPENSE_REJECTEDBY,
+  EXPENSE_STATUS,
   PROCESS_EXPENSE,
   REVIEW_EXPENSE,
 } from "../../utils/constants";
@@ -123,13 +124,22 @@ const ViewPaymentRequest = ({ requestId }) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
 
+  const STATUS_HEADING = {
+    [EXPENSE_STATUS.daft]: "Initiation",
+    [EXPENSE_STATUS.review_pending]: "Review & Validation",
+    [EXPENSE_STATUS.approve_pending]: "Approval",
+    [EXPENSE_STATUS.payment_pending]: " Processing & Disbursement",
+  };
+
   return (
     <div
       className="container px-3 py-2 py-md-0"
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="col-12 mb-2 text-center ">
-        <h5 className="fw-semibold m-0">Payment Request Details</h5>
+        <h5 className="fw-semibold m-0">
+          Payment Request - {STATUS_HEADING[data?.expenseStatus?.id] || "Payment Request Details"}
+        </h5>
         <hr />
       </div>
       <div className="row mb-1 ">
@@ -138,8 +148,7 @@ const ViewPaymentRequest = ({ requestId }) => {
             <div className="col-12 d-flex justify-content-between  mb-6">
               <span> {data?.paymentRequestUID}</span>
               <span
-                className={`badge bg-label-${
+                className={`badge bg-label-${getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
-                  getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
                   }`}
               >
                 {data?.expenseStatus?.name}
@@ -254,8 +263,7 @@ const ViewPaymentRequest = ({ requestId }) => {
                       lastName={data?.createdBy?.lastName}
                     />
                     <span className="text-muted">
-                      {`${data?.createdBy?.firstName ?? ""} ${
+                      {`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
-                        data?.createdBy?.lastName ?? ""
                         }`.trim() || "N/A"}
                     </span>
                   </div>
@@ -276,8 +284,7 @@ const ViewPaymentRequest = ({ requestId }) => {
                       lastName={data?.paidBy?.lastName}
                     />
                     <span className="text-muted">
-                      {`${data?.paidBy?.firstName ?? ""} ${
+                      {`${data?.paidBy?.firstName ?? ""} ${data?.paidBy?.lastName ?? ""
-                        data?.paidBy?.lastName ?? ""
                         }`.trim() || "N/A"}
                     </span>
                   </div>

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -26,6 +26,7 @@ import {
 import InputSuggestions from "../common/InputSuggestion";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
+import HoverPopup from "../common/HoverPopup";
 
 const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
   const {
@@ -111,7 +112,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         strikeDate: data.strikeDate?.slice(0, 10) || "",
         projectId: data.project.id || "",
         paymentBufferDays: data.paymentBufferDays || "",
-        numberOfIteration: data.numberOfIteration || "",
+        // numberOfIteration: data.numberOfIteration || "",
+        endDate: data.endDate?.slice(0, 10) || "",
         expenseCategoryId: data.expenseCategory.id || "",
         statusId: data.status.id || "",
         frequency: data.frequency || "",
@@ -129,6 +131,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
     }
   }, [currencyData, requestToEdit, setValue]);
 
+  const StrikeDate = watch("strikeDate")
+
   const onSubmit = (fromdata) => {
     console.log(fromdata);
     let payload = {
@@ -136,6 +140,9 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
       strikeDate: fromdata.strikeDate
         ? new Date(fromdata.strikeDate).toISOString()
         : null,
+      endDate: fromdata.endDate
+        ? new Date(fromdata.endDate).toISOString()
+        : null,
       notifyTo: handleEmailGetting(fromdata.notifyTo),
     };
     if (requestToEdit) {
@@ -145,6 +152,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
       CreateRecurringExpense(payload);
     }
   };
+
   return (
     <div className="container p-3">
       <h5 className="m-0">
@@ -227,36 +235,33 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             )}
           </div>
 
-          {/* <div className="col-md-6">
-                        <Label htmlFor="isVariable" className="form-label" required>
-                            Is Variable
-                        </Label>
-                        <select
-                            id="isVariable"
-                            className="form-select form-select-sm"
-                            {...register("isVariable", {
-                                setValueAs: (v) => v === "true" ? true : v === "false" ? false : false,
-                            })}
-                        >
-                            <option value="false">False</option>
-                            <option value="true">True</option>
-                        </select>
-                        {errors.isVariable && (
-                            <small className="danger-text">{errors.isVariable.message}</small>
-                        )}
-                    </div>                  */}
-
           <div className="col-md-6 mt-2">
-            <Label htmlFor="isVariable" className="form-label" required>
+            <div className="d-flex justify-content-start align-items-center gap-2">
+              <Label htmlFor="isVariable" className="form-label mb-0" required>
                 Payment Type
               </Label>
+              <HoverPopup
+                title="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>
+                }
+              >
+                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+              </HoverPopup>
+            </div>
 
             <Controller
               name="isVariable"
               control={control}
               defaultValue={defaultRecurringExpense.isVariable ?? false}
               render={({ field }) => (
-                <div className="d-flex align-items-center gap-3">
+                <div className="d-flex align-items-center gap-3 mt-1">
                   <div className="form-check">
                     <input
                       type="radio"
@@ -265,10 +270,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === true}
                       onChange={() => field.onChange(true)}
                     />
-                    <Label
+                    <Label htmlFor="isVariableTrue" className="form-check-label">
-                      htmlFor="isVariableTrue"
-                      className="form-check-label"
-                    >
                       Is Variable
                     </Label>
                   </div>
@@ -281,20 +283,19 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === false}
                       onChange={() => field.onChange(false)}
                     />
-                    <Label
+                    <Label htmlFor="isVariableFalse" className="form-check-label">
-                      htmlFor="isVariableFalse"
-                      className="form-check-label"
-                    >
                       Fixed
                     </Label>
                   </div>
                 </div>
               )}
             />
+
             {errors.isVariable && (
               <small className="danger-text">{errors.isVariable.message}</small>
             )}
           </div>
+
         </div>
 
         {/* Date and Amount */}
@@ -381,12 +382,25 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         {/* Frequency To and Status Id  */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label htmlFor="frequency" className="form-label" required>
+            <div className="d-flex justify-content-start align-items-center gap-2">
+              <Label htmlFor="frequency" className="form-label mb-0" required>
                 Frequency
               </Label>
+              <HoverPopup
+                title="Frequency"
+                content={
+                  <p>
+                    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>
+              </HoverPopup>
+            </div>
+
             <select
               id="frequency"
-              className="form-select form-select-sm"
+              className="form-select form-select-sm mt-1"
               {...register("frequency", { valueAsNumber: true })}
             >
               <option value="">Select Frequency</option>
@@ -396,10 +410,12 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 </option>
               ))}
             </select>
+
             {errors.frequency && (
               <small className="danger-text">{errors.frequency.message}</small>
             )}
           </div>
+
           <div className="col-md-6">
             <Label htmlFor="statusId" className="form-label" required>
               Status
@@ -425,48 +441,76 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
           </div>
         </div>
 
-        {/* Payment Buffer Days and Number of Iteration */}
+        {/* Payment Buffer Days and End Date */}
         <div className="row my-2 text-start">
+
           <div className="col-md-6">
-            <Label htmlFor="paymentBufferDays" className="form-label" required>
+            <div className="d-flex justify-content-start align-items-center gap-2">
+              <Label htmlFor="paymentBufferDays" className="form-label mb-0" required>
                 Payment Buffer Days
               </Label>
+              <HoverPopup
+                title="Payment Buffer Days"
+                content={
+                  <p>
+                    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>
+              </HoverPopup>
+            </div>
+
             <input
               type="number"
               id="paymentBufferDays"
-              className="form-control form-control-sm"
+              className="form-control form-control-sm mt-1"
               min="0"
               step="1"
               {...register("paymentBufferDays", { valueAsNumber: true })}
               placeholder="Enter payment buffer days"
             />
+
             {errors.paymentBufferDays && (
               <small className="danger-text">
                 {errors.paymentBufferDays.message}
               </small>
             )}
           </div>
+
+
           <div className="col-md-6">
-            <Label htmlFor="numberOfIteration" className="form-label" required>
+            <div className="d-flex justify-content-start align-items-center gap-2">
-              Number of Iteration
+              <Label htmlFor="endDate" className="form-label mb-0" required>
+                End Date
               </Label>
-            <input
+              <HoverPopup
-              type="number"
+                title="End Date"
-              id="numberOfIteration"
+                content={
-              className="form-control form-control-sm"
+                  <p>
-              min="1"
+                    The final date until which the plan, subscription, or project remains valid.
-              step="1"
+                  </p>
-              {...register("numberOfIteration", { valueAsNumber: true })}
+                }
-              placeholder="Enter number of iterations"
+              >
+                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+              </HoverPopup>
+            </div>
+
+            <DatePicker
+              name="endDate"
+              control={control}
+              minDate={StrikeDate}
+              className="w-100 mt-1"
             />
-            {errors.numberOfIteration && (
+
-              <small className="danger-text">
+            {errors.endDate && (
-                {errors.numberOfIteration.message}
+              <small className="danger-text">{errors.endDate.message}</small>
-              </small>
             )}
           </div>
+
         </div>
 
+
         <div className="row my-2 text-start">
           <div className="col-md-6">
             <Label htmlFor="notifyTo" className="form-label" required>

src/components/RecurringExpense/RecurringExpenseSchema.js

@@ -24,7 +24,7 @@ export const PaymentRecurringExpense = () => {
 
     strikeDate: z
       .string()
-      .min(1, { message: "Date is required" })
+      .min(1, { message: "Strike Date is required" })
       .refine((val) => !isNaN(Date.parse(val)), {
         message: "Invalid date format",
       })
@@ -42,12 +42,13 @@ export const PaymentRecurringExpense = () => {
       })
       .min(0, { message: "Buffer days cannot be negative" }),
 
-    numberOfIteration: z
+       endDate: z
-      .number({
+      .string()
-        required_error: "Iteration is required",
+      .min(1, { message: "End Date is required" })
-        invalid_type_error: "Iteration must be a number",
+      .refine((val) => !isNaN(Date.parse(val)), {
+        message: "Invalid date format",
       })
-      .min(1, { message: "Iteration must be at least 1" }),
+      .transform((val) => val.trim()),
 
     expenseCategoryId: z
       .string()
@@ -83,7 +84,7 @@ export const defaultRecurringExpense = {
   strikeDate: "",
   projectId: "",
   paymentBufferDays: 0,
-  numberOfIteration: 1,
+  endDate: "",
   expenseCategoryId: "",
   statusId: "",
   frequency: 1,

src/components/RecurringExpense/ViewRecurringExpense.jsx

@@ -21,7 +21,7 @@ const ViewRecurringExpense = ({ RecurringId }) => {
   return (
     <form className="container px-3">
       <div className="col-12 mb-1">
-        <h5 className="fw-semibold m-0">Recurring Payment Details</h5>
+        <h5 className="fw-semibold m-0">Recurring Expense Details</h5>
       </div>
       <div className="row mb-1">
         {/* <div className="col-12 col-lg-7 col-xl-8 mb-3"> */}

src/components/common/HoverPopup.jsx

@@ -5,11 +5,11 @@ const HoverPopup = ({ title, content, children }) => {
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
 
-  // Toggle on hover or click
+  // Toggle popup on hover or click
   const handleMouseEnter = () => setVisible(true);
   const handleClick = () => setVisible((prev) => !prev);
 
-  // Hide on outside click
+  // Hide popup on outside click
   useEffect(() => {
     const handleDocumentClick = (e) => {
       if (
@@ -20,13 +20,8 @@ const HoverPopup = ({ title, content, children }) => {
       }
     };
 
-    if (visible) {
+    if (visible) document.addEventListener("click", handleDocumentClick);
-      document.addEventListener("click", handleDocumentClick);
+    return () => document.removeEventListener("click", handleDocumentClick);
-    }
-
-    return () => {
-      document.removeEventListener("click", handleDocumentClick);
-    };
   }, [visible]);
 
   return (
@@ -34,6 +29,7 @@ const HoverPopup = ({ title, content, children }) => {
       className="d-inline-block position-relative"
       ref={triggerRef}
       onMouseEnter={handleMouseEnter}
+      onMouseLeave={() => setVisible(false)}
       onClick={handleClick}
       style={{ cursor: "pointer" }}
     >
@@ -42,19 +38,27 @@ const HoverPopup = ({ title, content, children }) => {
       {visible && (
         <div
           ref={popupRef}
-          className="bg-white border rounded shadow-sm py-1 px-2 text-start text-lowercase"
+          className="bg-white border rounded shadow-sm p-3 text-start"
           style={{
             position: "absolute",
             top: "100%",
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 1050,
-            minWidth: "220px",
+            minWidth: "240px",
+            maxWidth: "300px",
             marginTop: "8px",
+            whiteSpace: "normal",
           }}
         >
-          {title && <h6 className="mb-2 text-capitalize">{title}</h6>}
+          {title && (
-          <div className="text-capitalize">{content}</div>
+            <h6 className="mb-2 fw-semibold text-dark" style={{ fontSize: "0.9rem" }}>
+              {title}
+            </h6>
+          )}
+          <div className="text-muted" style={{ fontSize: "0.85rem", lineHeight: "1.4" }}>
+            {content}
+          </div>
         </div>
       )}
     </div>
@@ -62,4 +66,3 @@ const HoverPopup = ({ title, content, children }) => {
 };
 
 export default HoverPopup;
-