Merge pull request 'Issues_Expense_2W Changes of Expense, Payment Request and Recurring Expense.' (#505) from Issues_Expense_2W into upgrade_Expense

Reviewed-on: #505
Merged

src/components/Dashboard/ExpenseByProject.jsx

@@ -35,7 +35,7 @@ const ExpenseByProject = () => {
 
   const getSelectedTypeName = () => {
     if (!selectedType) return "All Types";
-    const found = ExpenseTypes.find((t) => t.id === selectedType);
+    const found = ExpenseCategories.find((t) => t.id === selectedType);
     return found ? found.name : "All Types";
   };
 
@@ -69,8 +69,8 @@ const ExpenseByProject = () => {
 
 
   const ExpenseCategoryType = [
-    {id:1,category:"Category",label:"Category"},
-    {id:2,category:"Project",label:"Project"}
+    { id: 1, category: "Category", label: "Category" },
+    { id: 2, category: "Project", label: "Project" }
   ]
 
   return (
@@ -91,19 +91,19 @@ const ExpenseByProject = () => {
             >
               {viewMode}
             </button>
-             <ul className="dropdown-menu dropdown-menu-end ">
-              {ExpenseCategoryType.map((cat)=>(
-                   <li>
-                <button
-                  className="dropdown-item"
-                  onClick={() => {
-                    setViewMode(cat.category);
-                    setSelectedType("");
-                  }}
-                >
-                  {cat.label}
-                </button>
-              </li>
+            <ul className="dropdown-menu dropdown-menu-end ">
+              {ExpenseCategoryType.map((cat) => (
+                <li>
+                  <button
+                    className="dropdown-item"
+                    onClick={() => {
+                      setViewMode(cat.category);
+                      setSelectedType("");
+                    }}
+                  >
+                    {cat.label}
+                  </button>
+                </li>
               ))}
             </ul>
           </div>
@@ -115,8 +115,8 @@ const ExpenseByProject = () => {
             <button
               key={item}
               className={`border-0 px-2 py-1 text-sm rounded ${range === item
-                  ? "text-white bg-primary"
-                  : "text-body bg-transparent"
+                ? "text-white bg-primary"
+                : "text-body bg-transparent"
                 }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(item)}

src/components/Documents/DocumentFilterPanel.jsx

@@ -13,230 +13,236 @@ import { useParams } from "react-router-dom";
 
 const DocumentFilterPanel = forwardRef(
   ({ entityTypeId, onApply, setFilterdata }, ref) => {
-  const [resetKey, setResetKey] = useState(0);
-  const { status } = useParams();
+    const [resetKey, setResetKey] = useState(0);
+    const { status } = useParams();
 
-  const { data, isError, isLoading, error } =
-    useDocumentFilterEntities(entityTypeId);
+    const { data, isError, isLoading, error } =
+      useDocumentFilterEntities(entityTypeId);
 
-  //changes
+    useEffect(() => {
+      return () => {
+        closePanel();
+      };
+    }, []);
 
-  const dynamicDocumentFilterDefaultValues = useMemo(() => {
-    return {
-      ...DocumentFilterDefaultValues,
-      uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
-      documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
-      documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
-      documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
-      startDate: DocumentFilterDefaultValues.startDate,
-      endDate: DocumentFilterDefaultValues.endDate,
+    //changes
+
+    const dynamicDocumentFilterDefaultValues = useMemo(() => {
+      return {
+        ...DocumentFilterDefaultValues,
+        uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
+        documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
+        documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
+        documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
+        startDate: DocumentFilterDefaultValues.startDate,
+        endDate: DocumentFilterDefaultValues.endDate,
+      };
+
+    }, [status]);
+
+    const methods = useForm({
+      resolver: zodResolver(DocumentFilterSchema),
+      defaultValues: dynamicDocumentFilterDefaultValues,
+    });
+
+    const { handleSubmit, reset, setValue, watch } = methods;
+
+    // Watch values from form
+    const isUploadedAt = watch("isUploadedAt");
+    const isVerified = watch("isVerified");
+
+    // Close the offcanvas (bootstrap specific)
+    const closePanel = () => {
+      document.querySelector(".offcanvas.show .btn-close")?.click();
     };
 
-  }, [status]);
+    useImperativeHandle(ref, () => ({
+      resetFieldValue: (name, value) => {
+        if (value !== undefined) {
+          setValue(name, value);
+        } else {
+          reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
+        }
+      },
+      getValues: methods.getValues, // optional, to read current filter state
+    }));
 
-  const methods = useForm({
-    resolver: zodResolver(DocumentFilterSchema),
-    defaultValues: dynamicDocumentFilterDefaultValues,
-  });
-
-  const { handleSubmit, reset, setValue, watch } = methods;
-
-  // Watch values from form
-  const isUploadedAt = watch("isUploadedAt");
-  const isVerified = watch("isVerified");
-
-  // Close the offcanvas (bootstrap specific)
-  const closePanel = () => {
-    document.querySelector(".offcanvas.show .btn-close")?.click();
-  };
-
-  useImperativeHandle(ref, () => ({
-    resetFieldValue: (name, value) => {
-      if (value !== undefined) {
-        setValue(name, value);
-      } else {
-        reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
+    //changes
+    useEffect(() => {
+      if (data && setFilterdata) {
+        setFilterdata(data);
       }
-    },
-    getValues: methods.getValues, // optional, to read current filter state
-  }));
+    }, [data, setFilterdata]);
 
-  //changes
-  useEffect(() => {
-    if (data && setFilterdata) {
-      setFilterdata(data);
-    }
-  }, [data, setFilterdata]);
+    const onSubmit = (values) => {
+      onApply({
+        ...values,
+        startDate: values.startDate
+          ? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
+          : null,
+        endDate: values.endDate
+          ? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
+          : null,
+      });
+      // closePanel();
+    };
 
-  const onSubmit = (values) => {
-    onApply({
-      ...values,
-      startDate: values.startDate
-        ? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
-        : null,
-      endDate: values.endDate
-        ? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
-        : null,
-    });
-    // closePanel();
-  };
+    const onClear = () => {
+      reset(DocumentFilterDefaultValues);
+      setResetKey((prev) => prev + 1);
+      onApply(DocumentFilterDefaultValues);
+      // closePanel();
+    };
 
-  const onClear = () => {
-    reset(DocumentFilterDefaultValues);
-    setResetKey((prev) => prev + 1);
-    onApply(DocumentFilterDefaultValues);
-    // closePanel();
-  };
+    if (isLoading) return <div>Loading...</div>;
+    if (isError)
+      return <div>Error: {error?.message || "Something went wrong!"}</div>;
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isError)
-    return <div>Error: {error?.message || "Something went wrong!"}</div>;
-
-  const {
-    uploadedBy = [],
-    documentCategory = [],
-    documentType = [],
-    documentTag = [],
-  } = data?.data || {};
+    const {
+      uploadedBy = [],
+      documentCategory = [],
+      documentType = [],
+      documentTag = [],
+    } = data?.data || {};
 
 
 
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        {/* Date Range Section */}
-        <div className="mb-2">
-          <div className="text-start d-flex align-items-center my-1">
-            <label className="form-label me-2 my-0">Choose Date:</label>
-            <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
-              <button
-                type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
-                  }`}
-                onClick={() => setValue("isUploadedAt", true)}
-              >
-                Uploaded On
-              </button>
-              <button
-                type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
-                  }`}
-                onClick={() => setValue("isUploadedAt", false)}
-              >
-                Updated On
-              </button>
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {/* Date Range Section */}
+          <div className="mb-2">
+            <div className="text-start d-flex align-items-center my-1">
+              <label className="form-label me-2 my-0">Choose Date:</label>
+              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
+                    }`}
+                  onClick={() => setValue("isUploadedAt", true)}
+                >
+                  Uploaded On
+                </button>
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
+                    }`}
+                  onClick={() => setValue("isUploadedAt", false)}
+                >
+                  Updated On
+                </button>
+              </div>
+            </div>
+
+            <DateRangePicker1
+              placeholder="DD-MM-YYYY To DD-MM-YYYY"
+              startField="startDate"
+              endField="endDate"
+              defaultRange={false}
+              resetSignal={resetKey}
+              maxDate={new Date()}
+            />
+          </div>
+
+          {/* Dropdown Filters */}
+          <div className="row g-2 text-start">
+            <SelectMultiple
+              name="uploadedByIds"
+              label="Uploaded By:"
+              options={uploadedBy}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentCategoryIds"
+              label="Document Category:"
+              options={documentCategory}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentTypeIds"
+              label="Document Type:"
+              options={documentType}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentTagIds"
+              label="Tags:"
+              options={documentTag}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+
+          {/* Status Filter */}
+          <div className="text-start my-2">
+            <label className="form-label d-block mb-2">Choose Status:</label>
+            <div className="d-flex gap-4">
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === null}
+                  onChange={() => setValue("isVerified", null)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">All</span>
+              </label>
+
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === true}
+                  onChange={() => setValue("isVerified", true)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">Verified</span>
+              </label>
+
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === false}
+                  onChange={() => setValue("isVerified", false)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">Rejected</span>
+              </label>
             </div>
           </div>
 
-          <DateRangePicker1
-            placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="startDate"
-            endField="endDate"
-            defaultRange={false}
-            resetSignal={resetKey}
-            maxDate={new Date()}
-          />
-        </div>
-
-        {/* Dropdown Filters */}
-        <div className="row g-2 text-start">
-          <SelectMultiple
-            name="uploadedByIds"
-            label="Uploaded By:"
-            options={uploadedBy}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentCategoryIds"
-            label="Document Category:"
-            options={documentCategory}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentTypeIds"
-            label="Document Type:"
-            options={documentType}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentTagIds"
-            label="Tags:"
-            options={documentTag}
-            labelKey="name"
-            valueKey="id"
-          />
-        </div>
-
-        {/* Status Filter */}
-        <div className="text-start my-2">
-          <label className="form-label d-block mb-2">Choose Status:</label>
-          <div className="d-flex gap-4">
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === null}
-                onChange={() => setValue("isVerified", null)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">All</span>
-            </label>
-
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === true}
-                onChange={() => setValue("isVerified", true)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Verified</span>
-            </label>
-
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === false}
-                onChange={() => setValue("isVerified", false)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Rejected</span>
-            </label>
+          {/* Footer Buttons */}
+          <div className="d-flex justify-content-end py-3 gap-2">
+            <button
+              type="button"
+              className="btn btn-label-secondary btn-sm"
+              onClick={onClear}
+            >
+              Clear
+            </button>
+            <button type="submit" className="btn btn-primary btn-sm">
+              Apply
+            </button>
           </div>
-        </div>
-
-        {/* Footer Buttons */}
-        <div className="d-flex justify-content-end py-3 gap-2">
-          <button
-            type="button"
-            className="btn btn-label-secondary btn-sm"
-            onClick={onClear}
-          >
-            Clear
-          </button>
-          <button type="submit" className="btn btn-primary btn-sm">
-            Apply
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-});
+        </form>
+      </FormProvider>
+    );
+  });
 
 export default DocumentFilterPanel;

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -519,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               ? "Please Wait..."
               : requestToEdit
               ? "Update"
-              : "Save as Draft"}
+              : "Submit"}
           </button>
         </div>
       </form>

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -43,9 +43,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
-          }`.trim();
+          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+            }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -98,9 +97,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
-        }`.trim() || "N/A",
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+          }`.trim() || "N/A",
       customRender: (e) => (
         <div
           className="d-flex align-items-center cursor-pointer"
@@ -113,9 +111,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
-            }`.trim() || "N/A"}
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+              }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -128,15 +125,12 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
     },
     {
       key: "amount",
-      label: " Amount",
-      align: "text-start",
-      getValue: (e) => (
-        <>
-          {formatCurrency(e?.amount)}&nbsp;{e.currency.currencyCode}
-        </>
-      ),
-
-      align: "text-end px-3",
+      label: "Amount",
+      align: "text-end",
+      getValue: (e) =>
+        e?.amount
+          ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""}${e.amount.toLocaleString()}`
+          : "N/A",
     },
     {
       key: "expenseStatus",
@@ -144,9 +138,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
-          }`}
+          className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+            }`}
         >
           {e?.expenseStatus?.name || "Unknown"}
         </span>
@@ -181,8 +174,13 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   if (isLoading) return <ExpenseTableSkeleton headers={header} />;
 
   const grouped = groupBy
-    ? groupByField(data?.data ?? [], groupBy)
+    ? Object.fromEntries(
+      Object.entries(groupByField(data?.data ?? [], groupBy)).sort(([keyA], [keyB]) =>
+        keyA.localeCompare(keyB)
+      )
+    )
     : { All: data?.data ?? [] };
+
   const IsGroupedByDate = [
     { key: "transactionDate", displayField: "Transaction Date" },
     { key: "createdAt", displayField: "created Date" },

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -68,7 +68,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       align: "text-end",
       getValue: (e) =>
         e?.amount
-          ? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}`
+          ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""}${e.amount.toLocaleString()}`
           : "N/A",
     },
     {
@@ -109,7 +109,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
     );
 
 
-   const paginate = (page) => {
+  const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
@@ -277,11 +277,11 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
         </div>
 
         {/* Pagination */}
-      <Pagination
-                currentPage={currentPage}
-                totalPages={data?.totalPages}
-                onPageChange={paginate}
-              />
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          onPageChange={paginate}
+        />
       </div>
     </>
   );