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

src/components/PaymentRequest/PaymentRequestFilterPanel.jsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "./PaymentRequestSchema";
+
+import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
+import SelectMultiple from "../common/SelectMultiple";
+import { useProjectName } from "../../hooks/useProjects";
+import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
+import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
+import { useSelector } from "react-redux";
+import moment from "moment";
+import { usePaymentRequestFilter } from "../../hooks/useExpense";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+
+const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => {
+    const { status } = useParams();
+    const navigate = useNavigate();
+    const selectedProjectId = useSelector(
+        (store) => store.localVariables.projectId
+    );
+    const { data, isLoading, isError, error, isFetching, isFetched } =
+        usePaymentRequestFilter();
+
+    const groupByList = useMemo(() => {
+        return [
+            { id: "projects", name: "Project" },
+            { id: "status", name: "Status" },
+            { id: "createdBy", name: "Submitted By" },
+            { id: "currency", name: "Currency" },
+            { id: "expensesCategory", name: "Expense Category" },
+            { id: "payees", name: "Payee" },
+            { id: "date", name: "Due Date" },
+
+        ].sort((a, b) => a.name.localeCompare(b.name));
+    }, []);
+
+    const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
+    const [resetKey, setResetKey] = useState(0);
+
+console.log("Kartik",data)
+
+    const methods = useForm({
+        resolver: zodResolver(SearchPaymentRequestSchema),
+        defaultValues: defaultPaymentRequestFilter,
+    });
+
+    const { control, handleSubmit, reset, setValue, watch } = methods;
+    const isTransactionDate = watch("isTransactionDate");
+
+    const closePanel = () => {
+        document.querySelector(".offcanvas.show .btn-close")?.click();
+    };
+
+
+
+    const handleGroupChange = (e) => {
+        const group = groupByList.find((g) => g.id === e.target.value);
+        if (group) setSelectedGroup(group);
+    };
+
+
+    const onSubmit = (formData) => {
+        onApply({
+            ...formData,
+            startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+            endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+        });
+        handleGroupBy(selectedGroup.id);
+        // closePanel();
+    };
+
+    const onClear = () => {
+        reset(defaultPaymentRequestFilter);
+        setResetKey((prev) => prev + 1);
+        onApply(defaultPaymentRequestFilter);
+        if (status) {
+            navigate("/expenses", { replace: true });
+        }
+    };
+
+    const location = useLocation();
+    useEffect(() => {
+        closePanel();
+    }, [location]);
+
+    const [appliedStatusId, setAppliedStatusId] = useState(null);
+
+    if (isError && isFetched)
+        return <div>Something went wrong Here- {error.message} </div>;
+
+    return (
+        <>
+            <FormProvider {...methods}>
+                <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+                    <div className="mb-3 w-100">
+                        <div className="d-flex align-items-center mb-2">
+                            <label className="form-label me-2">Filter By:</label>
+                        </div>
+                        <label className="fw-semibold">Choose Date Range:</label>
+                        <DateRangePicker1
+                            placeholder="DD-MM-YYYY To DD-MM-YYYY"
+                            startField="startDate"
+                            endField="endDate"
+                            resetSignal={resetKey}
+                            defaultRange={false}
+                            maxDate={new Date()}
+                        />
+                    </div>
+
+                    <div className="row g-2">
+                        <SelectMultiple
+                            name="projectIds"
+                            label="Projects :"
+                            options={data?.projects}
+                            labelKey="name"
+                            valueKey="id"
+                        />
+                        <SelectMultiple
+                            name="createdByIds"
+                            label="Submitted By :"
+                            options={data?.createdBy}
+                            labelKey={(item) => item.name}
+                            valueKey="id"
+                        />
+                        <SelectMultiple
+                            name="payees"
+                            label="Payee :"
+                            options={data?.payees}
+                            labelKey={(item) => item.name}
+                            valueKey="id"
+                        />
+                        <SelectMultiple
+                            name="expensesCategory"
+                            label="Category :"
+                            options={data?.expensesCategory}
+                            labelKey={(item) => item.name}
+                            valueKey="id"
+                        />
+                        <SelectMultiple
+                            name="currencyIds"
+                            label="Currency :"
+                            options={data?.currency}
+                            labelKey={(item) => item.name}
+                            valueKey="id"
+                        />
+
+                        <div className="mb-3">
+                            <label className="form-label">Status :</label>
+                            <div className="row flex-wrap">
+                                {data?.status
+                                    ?.slice()
+                                    .sort((a, b) => a.name.localeCompare(b.name))
+                                    .map((status) => (
+                                        <div className="col-6" key={status.id}>
+                                            <Controller
+                                                control={control}
+                                                name="statusIds"
+                                                render={({ field: { value = [], onChange } }) => (
+                                                    <div className="d-flex align-items-center me-3 mb-2">
+                                                        <input
+                                                            type="checkbox"
+                                                            className="form-check-input"
+                                                            value={status.id}
+                                                            checked={value.includes(status.id)}
+                                                            onChange={(e) => {
+                                                                const checked = e.target.checked;
+                                                                onChange(
+                                                                    checked
+                                                                        ? [...value, status.id]
+                                                                        : value.filter((v) => v !== status.id)
+                                                                );
+                                                            }}
+                                                        />
+                                                        <label className="ms-2 mb-0">{status.name}</label>
+                                                    </div>
+                                                )}
+                                            />
+                                        </div>
+                                    ))}
+                            </div>
+                        </div>
+                    </div>                   
+
+                    <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>
+        </>
+    );
+};
+
+export default PaymentRequestFilterPanel;

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -10,9 +10,14 @@ import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 import Avatar from "../../components/common/Avatar";
 import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
 import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
+import ConfirmModal from "../common/ConfirmModal";
+import { useNavigate } from "react-router-dom";
 
-const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
+const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
   const { setManageRequest } = usePaymentRequestContext();
+  const navigate = useNavigate();
+  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState(null);
   const groupByField = (items, field) => {
     return items.reduce((acc, item) => {
       let key;
@@ -28,8 +33,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${
+          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
-            item.createdBy?.lastName ?? ""
             }`.trim();
           displayField = "Submitted By";
           break;
@@ -83,8 +87,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-          e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
         <div
@@ -98,8 +101,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
-              e.createdBy?.lastName ?? ""
               }`.trim() || "N/A"}
           </span>
         </div>
@@ -126,8 +128,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
+          className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
-            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
             }`}
         >
           {e?.expenseStatus?.name || "Unknown"}
@@ -142,7 +143,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
   const { data, isLoading, isError, error, isFetching } = usePaymentRequestList(
     ITEMS_PER_PAGE,
     currentPage,
-    {},
+    filters,
     true,
     debouncedSearch
   );
@@ -190,7 +191,33 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
     );
   };
 
+  const handleDelete = (id) => {
+    setDeletingId(id);
+    DeleteExpense(
+      { id },
+      {
+        onSettled: () => {
+          setDeletingId(null);
+          setIsDeleteModalOpen(false);
+        },
+      }
+    );
+  };
+
   return (
+    <>
+      {IsDeleteModalOpen && (
+        <ConfirmModal
+          isOpen={IsDeleteModalOpen}
+          type="delete"
+          header="Delete Expense"
+          message="Are you sure you want delete?"
+          onSubmit={handleDelete}
+          onClose={() => setIsDeleteModalOpen(false)}
+          // loading={isPending}
+          paramData={deletingId}
+        />
+      )}
       <div className="card page-min-h table-responsive px-sm-4">
         <div className="card-datatable" id="payment-request-table">
           <table className="table border-top dataTable text-nowrap align-middle">
@@ -320,8 +347,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                  className={`page-item ${
+                    className={`page-item ${currentPage === index + 1 ? "active" : ""
-                    currentPage === index + 1 ? "active" : ""
                       }`}
                   >
                     <button
@@ -337,6 +363,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
           </div>
         )}
       </div>
+    </>
   );
 };
 

src/components/PaymentRequest/PaymentRequestSchema.js

@@ -64,3 +64,25 @@ export const defaultPaymentRequest = {
   billAttachments: [],
 };
 
+
+export const SearchPaymentRequestSchema = z.object({
+  projectIds: z.array(z.string()).optional(),
+  statusIds: z.array(z.string()).optional(),
+  createdByIds: z.array(z.string()).optional(),
+  currencyIds: z.array(z.string()).optional(),
+  expenseCategoryIds: z.array(z.string()).optional(),
+  payees: z.array(z.string()).optional(),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+});
+
+export const defaultPaymentRequestFilter = {
+  projectIds: [],
+  statusIds: [],
+  createdByIds: [],
+  currencyIds: [],
+  expenseCategoryIds: [],
+  payees: [],
+  startDate: null,
+  endDate: null,
+};

src/hooks/useExpense.js

@@ -334,6 +334,14 @@ export const useUpdatePaymentRequest = (onSuccessCallBack) => {
 };
 //#endregion
 
+export const usePaymentRequestFilter = () => {
+  return useQuery({
+    queryKey: ["PaymentRequestFilter"],
+    queryFn: async () =>
+      await ExpenseRepository.GetPaymentRequestFilter().then((res) => res.data),
+  });
+};
+
 //#region Advance Payment
 export const useExpenseTransactions = (employeeId)=>{
  return useQuery({

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -1,10 +1,12 @@
-import React, { createContext, useState,useEffect, useContext } from "react";
+import React, { createContext, useState, useEffect, useContext } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
 import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
 import { useFab } from "../../Context/FabContext";
 import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
+import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
+import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
 
 export const PaymentRequestContext = createContext();
 export const usePaymentRequestContext = () => {
@@ -21,32 +23,27 @@ const PaymentRequestPage = () => {
   });
   const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
   const { setOffcanvasContent, setShowTrigger } = useFab();
+  const [filters, setFilters] = useState(defaultPaymentRequestFilter);
 
   const [search, setSearch] = useState("");
 
   const contextValue = {
-    // setViewExpense,
     setManageRequest,
-    // setDocumentView,
-    // filterData,
-    // removeFilterChip
   };
 
   useEffect(() => {
 
     setShowTrigger(true);
     setOffcanvasContent(
-      "Expense Filters",
+      "Payment Request Filters",
-      <ExpenseFilterPanel
+      <PaymentRequestFilterPanel onApply={setFilters} />
-   
-      />
     );
 
     return () => {
       setShowTrigger(false);
       setOffcanvasContent("", null);
     };
-  },[]);
+  }, []);
 
   return (
     <PaymentRequestContext.Provider value={contextValue}>
@@ -96,6 +93,7 @@ const PaymentRequestPage = () => {
         </div>
         <PaymentRequestList
           search={search}
+          filters={filters}
         />
 
         {/* Add/Edit Modal */}

src/repositories/ExpsenseRepository.jsx

@@ -16,20 +16,21 @@ const ExpenseRepository = {
 
   //#endregion
 
-//#region Payment Request
+  //#region Payment Request
   GetPaymentRequestList: (pageSize, pageNumber, filter, isActive, searchString) => {
     const payloadJsonString = JSON.stringify(filter);
     return api.get(`/api/Expense/get/payment-requests/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
   },
   CreatePaymentRequest: (data) => api.post("/api/expense/payment-request/create", data),
   UpdatePaymentRequest: (id, data) => api.put(`/api/Expense/payment-request/edit/${id}`, data),
-    GetPaymentRequest:(id)=>api.get(`/api/Expense/get/payment-request/details/${id}`),
+  GetPaymentRequest: (id) => api.get(`/api/Expense/get/payment-request/details/${id}`),
+  GetPaymentRequestFilter: () => api.get('/api/Expense/payment-request/filter'),
 
   //#endregion
 
 
   //#region Advance Payment
-    GetTranctionList:()=>api.get(`/get/transactions/${employeeId}`)
+  GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
   //#endregion
 }