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

src/components/Dashboard/ExpenseByProject.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
-import { useExpenseType } from "../../hooks/masterHook/useMaster";
+import { useExpenseCategory } from "../../hooks/masterHook/useMaster";
 import { useSelector } from "react-redux";
 import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
 import { formatCurrency } from "../../utils/appUtils";
@@ -13,7 +13,7 @@ const ExpenseByProject = () => {
   const [viewMode, setViewMode] = useState("Category");
   const [chartData, setChartData] = useState({ categories: [], data: [] });
 
-  const { ExpenseTypes, loading: typeLoading } = useExpenseType();
+  const { ExpenseTypes, loading: typeLoading } = useExpenseCategory();
 
   const { data: expenseApiData, isLoading } = useExpenseDataByProject(
     projectId,

src/components/Expenses/ExpenseList.jsx

@@ -92,8 +92,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           key = item?.paymentMode?.name || "Unknown Mode";
           displayField = "Payment Mode";
           break;
-        case "expensesType":
+        case "expenseCategory":
-          key = item?.expensesType?.name || "Unknown Type";
+          key = item?.expenseCategory?.name || "Unknown Type";
           displayField = "Expense Category";
           break;
         case "createdAt":
@@ -184,7 +184,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       ),
     },
   ];
- const headers = ["Expense Type","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
+ const headers = ["Expense Category","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
   if (isInitialLoading && !data) return <ExpenseTableSkeleton headers={headers} />;
   if (isError) return <div>{error?.message}</div>;
 

src/components/Expenses/ExpenseSkeleton.jsx

@@ -143,7 +143,11 @@ const SkeletonCell = ({
   />
 );
 
-export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers }) => {
+export const ExpenseTableSkeleton = ({
+  groups = 3,
+  rowsPerGroup = 3,
+  headers,
+}) => {
   return (
     <div className="card px-2">
       <table
@@ -153,12 +157,11 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers })
       >
         <thead>
           <tr>
-            {headers.map((header)=>(
+            {headers.map((header) => (
-               <th className="d-none d-sm-table-cell">
+              <th key={header} className="d-none d-sm-table-cell">
-              <div className="text-start ms-5">{header}</div>
+                <div className="text-start ms-5">{header}</div>
-            </th>
+              </th>
             ))}
-          
           </tr>
         </thead>
 
@@ -199,7 +202,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers })
                       <SkeletonCell width="80px" height={16} />
                     </div>
                   </td>
-                    {/* Submitted */}
+                  {/* Submitted */}
                   <td className="d-none d-md-table-cell text-end">
                     <SkeletonCell width="70px" height={16} />
                   </td>

src/components/Expenses/ManageExpense.jsx

@@ -7,8 +7,8 @@ import { useProjectName } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster, {
+  useExpenseCategory,
   useExpenseStatus,
-  useExpenseType,
   usePaymentMode,
 } from "../../hooks/masterHook/useMaster";
 import {
@@ -42,7 +42,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     ExpenseTypes,
     loading: ExpenseLoading,
     error: ExpenseError,
-  } = useExpenseType();
+  } = useExpenseCategory;
   const schema = ExpenseSchema(ExpenseTypes);
   const {
     register,

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -2,16 +2,17 @@ import React, { useEffect } from 'react'
 import { useCurrencies, useProjectName } from '../../hooks/useProjects';
 import Label from '../common/Label';
 import { useForm } from 'react-hook-form';
-import { useExpenseType } from '../../hooks/masterHook/useMaster';
+import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
 import DatePicker from '../common/DatePicker';
-import { useCreatePaymentRequest, useUpdatePaymentRequest } from '../../hooks/useExpense';
+import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
-import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { formatFileSize, localToUtc } from '../../utils/appUtils';
+import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
 
-function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
+function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
-
+    const {data,isLoading,isError,error:requestError}= usePaymentRequestDetail(requestToEdit)
-    const { data } = {}
+// const data = {}
 
     const { projectNames, loading: projectLoading, error, isError: isProjectError,
     } = useProjectName();
@@ -23,7 +24,8 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
         ExpenseTypes,
         loading: ExpenseLoading,
         error: ExpenseError,
-    } = useExpenseType();
+    } = useExpenseCategory();
+    
     const schema = PaymentRequestSchema(ExpenseTypes);
     const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
         resolver: zodResolver(schema),
@@ -78,7 +80,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
             reader.onerror = (error) => reject(error);
         });
     const removeFile = (index) => {
-        if (expenseToEdit) {
+        if (requestToEdit) {
             const newFiles = files.map((file, i) => {
                 if (file.documentId !== index) return file;
                 return {
@@ -108,16 +110,16 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
     );
 
     useEffect(() => {
-        if (expenseToEdit && data) {
+        if (requestToEdit && data) {
             reset({
                 title: data.title || "",
                 description: data.description || "",
                 payee: data.payee || "",
-                currencyId: data.currencyId.id || "",
+                currencyId: data.currency.id || "",
                 amount: data.amount || "",
                 dueDate: data.dueDate?.slice(0, 10) || "",
                 projectId: data.project.id || "",
-                expenseCategoryId: data.expenseCategoryId.id || "",
+                expenseCategoryId: data.expenseCategory.id || "",
                 isAdvancePayment: data.isAdvancePayment || false,
                 billAttachments: data.documents
                     ? data.documents.map((doc) => ({
@@ -141,7 +143,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
             ...fromdata,
             dueDate: localToUtc(fromdata.dueDate),
         };
-        if (expenseToEdit) {
+        if (requestToEdit) {
             const editPayload = { ...payload, id: data.id };
             PaymentRequestUpdate({ id: data.id, payload: editPayload });
         } else {
@@ -153,7 +155,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
     return (
         <div className="container p-3">
             <h5 className="m-0">
-                {expenseToEdit ? "Update Payment Request " : "Create Payment Request"}
+                {requestToEdit ? "Update Payment Request " : "Create Payment Request"}
             </h5>
             <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
                 <div className="row my-2 text-start">
@@ -395,7 +397,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
                             <div className="d-block">
                                 {files
                                     .filter((file) => {
-                                        if (expenseToEdit) {
+                                        if (requestToEdit) {
                                             return file.isActive;
                                         }
                                         return true;
@@ -420,7 +422,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
                                                 className="bx bx-trash bx-sm cursor-pointer text-danger"
                                                 onClick={(e) => {
                                                     e.preventDefault();
-                                                    removeFile(expenseToEdit ? file.documentId : idx);
+                                                    removeFile(requestToEdit ? file.documentId : idx);
                                                 }}
                                             ></i>
                                         </a>
@@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
                     >
                         {createPending
                             ? "Please Wait..."
-                            : expenseToEdit
+                            : requestToEdit
                                 ? "Update"
                                 : "Submit"}
                     </button>

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -1,20 +1,139 @@
 import React, { useState } from "react";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { EXPENSE_DRAFT, ITEMS_PER_PAGE } from "../../utils/constants";
-import { useDebounce } from "../../utils/appUtils";
+import {
-import { formatDate } from "../../utils/dateUtils";
+  formatCurrency,
+  getColorNameFromHex,
+  useDebounce,
+} from "../../utils/appUtils";
 import { usePaymentRequestList } from "../../hooks/useExpense";
-import ExpenseSkeleton, {
+import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
-  ExpenseTableSkeleton,
+import Avatar from "../../components/common/Avatar";
-} from "../Expenses/ExpenseSkeleton";
+import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
+import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
+
+const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
+  const { setManageRequest } = usePaymentRequestContext();
+  const groupByField = (items, field) => {
+    return items.reduce((acc, item) => {
+      let key;
+      let displayField;
+
+      switch (field) {
+        case "transactionDate":
+          key = item?.transactionDate?.split("T")[0];
+          displayField = "Transaction Date";
+          break;
+        case "status":
+          key = item?.status?.displayName || "Unknown";
+          displayField = "Status";
+          break;
+        case "submittedBy":
+          key = `${item?.createdBy?.firstName ?? ""} ${
+            item.createdBy?.lastName ?? ""
+          }`.trim();
+          displayField = "Submitted By";
+          break;
+        case "project":
+          key = item?.project?.name || "Unknown Project";
+          displayField = "Project";
+          break;
+        case "paymentMode":
+          key = item?.paymentMode?.name || "Unknown Mode";
+          displayField = "Payment Mode";
+          break;
+        case "expensesType":
+          key = item?.expensesType?.name || "Unknown Type";
+          displayField = "Expense Category";
+          break;
+        case "createdAt":
+          key = item?.createdAt?.split("T")[0] || "Unknown Date";
+          displayField = "Created Date";
+          break;
+        default:
+          key = "Others";
+          displayField = "Others";
+      }
+
+      const groupKey = `${field}_${key}`; // unique key for object property
+      if (!acc[groupKey]) {
+        acc[groupKey] = { key, displayField, items: [] };
+      }
+
+      acc[groupKey].items.push(item);
+      return acc;
+    }, {});
+  };
 
-const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
   const paymentRequestColumns = [
-    { key: "paymentRequestUID", label: "Request ID", align: "text-start mx-2" },
+    {
-    { key: "title", label: "Request Title", align: "text-start" },
+      key: "paymentRequestUID",
-    { key: "payee", label: "Payee", align: "text-start" },
+      label: "Request ID",
-    { key: "createdAt", label: "Submitted On", align: "text-start" },
+      align: "text-start mx-2",
-    { key: "amount", label: "Amount", align: "text-start" },
+      getValue: (e) => e.paymentRequestUID || "N/A",
-    { key: "expenseStatus", label: "Status", align: "text-start" },
+    },
+    {
+      key: "title",
+      label: "Request Title",
+      align: "text-start",
+      getValue: (e) => e.title || "N/A",
+    },
+    // { key: "payee", label: "Payee", align: "text-start" },
+    {
+      key: "SubmittedBy",
+      label: "Submitted By",
+      align: "text-start",
+      getValue: (e) =>
+        `${e.createdBy?.firstName ?? ""} ${
+          e.createdBy?.lastName ?? ""
+        }`.trim() || "N/A",
+      customRender: (e) => (
+        <div
+          className="d-flex align-items-center cursor-pointer"
+          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
+        >
+          <Avatar
+            size="xs"
+            classAvatar="m-0"
+            firstName={e.createdBy?.firstName}
+            lastName={e.createdBy?.lastName}
+          />
+          <span className="text-truncate">
+            {`${e.createdBy?.firstName ?? ""} ${
+              e.createdBy?.lastName ?? ""
+            }`.trim() || "N/A"}
+          </span>
+        </div>
+      ),
+    },
+    {
+      key: "createdAt",
+      label: "Submitted On",
+      align: "text-start",
+      getValue: (e) => formatUTCToLocalTime(e?.createdAt),
+    },
+    {
+      key: "amount",
+      label: " Amount",
+      align: "text-start",
+      getValue: (e) => (
+        <>{formatCurrency(e?.amount, e.currency.currencyCode)}</>
+      ),
+      align: "text-end px-3",
+    },
+    {
+      key: "expenseStatus",
+      label: "Status",
+      align: "text-center",
+      getValue: (e) => (
+        <span
+          className={`badge bg-label-${
+            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+          }`}
+        >
+          {e?.expenseStatus?.name || "Unknown"}
+        </span>
+      ),
+    },
   ];
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -40,16 +159,37 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
     );
   }
   const header = [
-    "Expense ID",
+    "Request ID",
-    "Expense Category",
+    "Request Title",
-    "Payment Mode",
+    "Submitted By",
-    "Sumitted By",
+    "Submitted On",
-    "Submitted",
     "Amount",
     "Status",
     "Action",
   ];
   if (isLoading) return <ExpenseTableSkeleton headers={header} />;
+
+  const grouped = groupBy
+    ? groupByField(data?.data ?? [], groupBy)
+    : { All: data?.data ?? [] };
+  const IsGroupedByDate = [
+    { key: "transactionDate", displayField: "Transaction Date" },
+    { key: "createdAt", displayField: "created Date" },
+  ]?.includes(groupBy);
+
+  const canEditExpense = (paymentRequest) => {
+    return (
+      (paymentRequest?.status?.id === EXPENSE_DRAFT ||
+        EXPENSE_REJECTEDBY.includes(paymentRequest?.status?.id)) &&
+      paymentRequest?.createdBy?.id === SelfId
+    );
+  };
+  const canDetetExpense = (expense) => {
+    return (
+      expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
+    );
+  };
+
   return (
     <div className="card page-min-h table-responsive px-sm-4">
       <div className="card-datatable" id="payment-request-table">
@@ -66,70 +206,105 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
           </thead>
 
           <tbody>
-            {isLoading || isFetching ? (
+            {Object.keys(grouped).length > 0 ? (
-              <tr>
+              Object.values(grouped).map(({ key, displayField, items }) => (
-                <td
+                <React.Fragment key={key}>
-                  colSpan={paymentRequestColumns.length + 1}
+                  <tr className="tr-group text-dark">
-                  className="text-center py-4"
+                    <td colSpan={8} className="text-start">
-                >
+                      <div className="d-flex align-items-center">
-                  Loading Payment Requests...
+                        {" "}
-                </td>
+                        <small className="fs-6 py-1">
-              </tr>
+                          {displayField} :{" "}
-            ) : paymentRequestData.length > 0 ? (
+                        </small>{" "}
-              paymentRequestData.map((row) => (
+                        <small className="fs-6  ms-3">
-                <tr key={row.id}>
+                          {IsGroupedByDate ? formatUTCToLocalTime(key) : key}
-                  <td>{row.paymentRequestUID}</td>
+                        </small>
-                  <td>{row.title}</td>
+                      </div>
-                  <td>{row.payee}</td>
+                    </td>
-                  <td>{formatDate(row.createdAt)}</td>
+                  </tr>
-                  <td>
+                  {items?.map((paymentRequest) => (
-                    {row.currency?.symbol}
+                    <tr key={paymentRequest.id}>
-                    {row.amount}
+                      {paymentRequestColumns.map(
-                  </td>
+                        (col) =>
-                  <td>
+                          (col.isAlwaysVisible || groupBy !== col.key) && (
-                    <span
+                            <td
-                      className="badge"
+                              key={col.key}
-                      style={{
+                              className={`d-table-cell ${col.align ?? ""}`}
-                        backgroundColor: row.expenseStatus?.color || "#6c757d",
+                            >
-                      }}
+                              {col?.customRender
-                    >
+                                ? col?.customRender(paymentRequest)
-                      {row.expenseStatus?.displayName || "Unknown"}
+                                : col?.getValue(paymentRequest)}
-                    </span>
+                            </td>
-                  </td>
-                  <td className="text-center">
-                    <div className="d-flex justify-content-center gap-2">
-                      <i
-                        className="bx bx-show text-primary cursor-pointer"
-                        title="View"
-                        onClick={() =>
-                          console.log(
-                            "View clicked for:",
-                            row.paymentRequestUID
                           )
-                        }
+                      )}
-                      ></i>
+                      <td className="sticky-action-column bg-white">
+                        <div className="d-flex justify-content-center gap-2">
+                          <i
+                            className="bx bx-show text-primary cursor-pointer"
+                            onClick={() =>
+                              setViewExpense({
+                                expenseId: paymentRequest.id,
+                                view: true,
+                              })
+                            }
+                          ></i>
 
-                      <i
+                          <div className="dropdown z-2">
-                        className="bx bx-edit text-secondary cursor-pointer"
+                            <button
-                        title="Edit"
+                              type="button"
-                        onClick={() =>
+                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                          setManagePaymentRequestModal({
+                              data-bs-toggle="dropdown"
-                            IsOpen: true,
+                              aria-expanded="false"
-                            expenseId: row.id, // Pass ID for editing
+                            >
-                          })
+                              <i
-                        }
+                                className="bx bx-dots-vertical-rounded text-muted p-0"
-                      ></i>
+                                data-bs-toggle="tooltip"
-                    </div>
+                                data-bs-offset="0,8"
-                  </td>
+                                data-bs-placement="top"
-                </tr>
+                                data-bs-custom-class="tooltip-dark"
+                                title="More Action"
+                              ></i>
+                            </button>
+                            <ul className="dropdown-menu dropdown-menu-end w-auto">
+                              <li
+                                onClick={() =>
+                                  setManageRequest({
+                                    IsOpen: true,
+                                    RequestId: paymentRequest.id,
+                                  })
+                                }
+                              >
+                                <a className="dropdown-item px-2 cursor-pointer py-1">
+                                  <i className="bx bx-edit text-primary  bx-xs me-2"></i>
+                                  <span className="align-left ">Modify</span>
+                                </a>
+                              </li>
+
+                              <li
+                                onClick={() => {
+                                  setIsDeleteModalOpen(true);
+                                  setDeletingId(paymentRequest.id);
+                                }}
+                              >
+                                <a className="dropdown-item  px-2 cursor-pointer py-1">
+                                  <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                                  <span className="align-left">Delete</span>
+                                </a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
               ))
             ) : (
               <tr>
-                <td
+                <td colSpan={8} className="text-center border-0 ">
-                  colSpan={paymentRequestColumns.length + 1}
+                  <div className="py-8">
-                  className="text-center py-4"
+                    <p>No Request Found</p>
-                >
+                  </div>
-                  No Payment Requests Found
                 </td>
               </tr>
             )}

src/components/common/Tooltip.jsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+const Tooltip = ({ text, placement = "top", children }) => {
+  useEffect(() => {
+
+    const el = document.querySelector(`[data-tooltip-id="${text}"]`);
+    if (el) {
+      new window.bootstrap.Tooltip(el);
+    }
+  }, [text]);
+
+  return (
+    <span
+      data-bs-toggle="tooltip"
+      data-bs-placement={placement}
+      title={text}
+      data-tooltip-id={text}
+      style={{ cursor: "pointer", display: "inline-flex", alignItems: "center" }}
+    >
+      {children}
+    </span>
+  );
+};
+export default Tooltip;

src/components/master/ManageExpenseCategory.jsx

@@ -3,18 +3,25 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
-  useCreateExpenseType,
+  useCreateExpenseCategory,
-  useUpdateExpenseType,
+  useUpdateExpenseCategory,
 } from "../../hooks/masterHook/useMaster";
 import Label from "../common/Label";
+import Tooltip from "../common/Tooltip";
+
+
+
+
+
 
 const ExpnseSchema = z.object({
   name: z.string().min(1, { message: "Name is required" }),
   noOfPersonsRequired: z.boolean().default(false),
+  isAttachmentRequried: z.boolean().default(false),
   description: z.string().min(1, { message: "Description is required" }),
 });
 
-const ManageExpenseType = ({ data = null, onClose }) => {
+const ManageExpenseCategory = ({ data = null, onClose }) => {
   const {
     register,
     handleSubmit,
@@ -22,12 +29,12 @@ const ManageExpenseType = ({ data = null, onClose }) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ExpnseSchema),
-    defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
+    defaultValues: { name: "", noOfPersonsRequired: false,isAttachmentRequried:false, description: "" },
   });
-  const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
+  const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseCategory(
     () => onClose?.()
   );
-  const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
+  const { mutate: CreateExpenseType, isPending } = useCreateExpenseCategory(() =>
     onClose?.()
   );
 
@@ -47,6 +54,7 @@ const ManageExpenseType = ({ data = null, onClose }) => {
       reset({
         name: data.name ?? "",
         noOfPersonsRequired: data.noOfPersonsRequired ?? false,
+        isAttachmentRequried:data.isAttachmentRequried ?? false,
         description: data.description ?? "",
       });
     }
@@ -76,14 +84,37 @@ const ManageExpenseType = ({ data = null, onClose }) => {
           <p className="danger-text">{errors.description.message}</p>
         )}
       </div>
-      <div className="col-12 col-md-12 d-flex align-items-center">
+      <div className="col-12 d-flex flex-wrap gap-4 align-items-center">
-        <label className="from-label">No. of Persons Required </label>{" "}
+      <label className="form-label d-flex align-items-center gap-2 mb-0">
+        <Tooltip
+        text="These checkboxes let you specify if the task needs multiple persons."
+        placement="top"
+      >
+        <i className="bx bx-info-circle "></i>
+      </Tooltip> No. of Persons Required?
         <input
           type="checkbox"
-          className="form-check-input  ms-2"
+          className="form-check-input ms-2"
           {...register("noOfPersonsRequired")}
         />
-      </div>
+      </label>
+
+      <label className="form-label d-flex align-items-center gap-2 mb-0">
+       <Tooltip
+        text="These checkboxes let you if file attachments are mandatory."
+        placement="top"
+      >
+        <i className="bx bx-info-circle "></i>
+      </Tooltip> Attachment Required?
+        <input
+          type="checkbox"
+          className="form-check-input ms-2"
+          {...register("isAttachmentRequired")}
+        />
+      </label>
+
+      
+    </div>
       <div className="col-12 text-end">
         <button
           type="reset"
@@ -112,4 +143,4 @@ const ManageExpenseType = ({ data = null, onClose }) => {
   );
 };
 
-export default ManageExpenseType;
+export default ManageExpenseCategory;

src/components/master/MasterModal.jsx

@@ -9,7 +9,7 @@ import CreateCategory from "./CreateContactCategory";
 import CreateContactTag from "./CreateContactTag";
 import EditContactCategory from "./EditContactCategory";
 import EditContactTag from "./EditContactTag";
-import ManageExpenseType from "./ManageExpenseType";
+import ManageExpenseCategory from "./ManageExpenseCategory";
 import ManagePaymentMode from "./ManagePaymentMode";
 import ManageExpenseStatus from "./ManageExpenseStatus";
 import ManageDocumentCategory from "./ManageDocumentCategory";
@@ -43,8 +43,8 @@ const MasterModal = ({ modaldata, closeModal }) => {
     ),
     "Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
     "Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
-    "Expense Type": <ManageExpenseType onClose={closeModal} />,
+    "Expense Category": <ManageExpenseCategory onClose={closeModal} />,
-    "Edit-Expense Type": <ManageExpenseType data={item} onClose={closeModal} />,
+    "Edit-Expense Category": <ManageExpenseCategory data={item} onClose={closeModal} />,
     "Payment Mode": <ManagePaymentMode onClose={closeModal} />,
     "Edit-Payment Mode": <ManagePaymentMode data={item} onClose={closeModal} />,
     "Expense Status": <ManageExpenseStatus onClose={closeModal} />,

src/hooks/masterHook/useMaster.js

@@ -150,15 +150,15 @@ export const useContactTags = () => {
   return { contactTags, loading, error };
 };
 
-export const useExpenseType = () => {
+export const useExpenseCategory = () => {
   const {
     data: ExpenseTypes = [],
     isLoading: loading,
     error,
   } = useQuery({
-    queryKey: ["Expense Type"],
+    queryKey: ["Expense Category"],
     queryFn: async () => {
-      const res = await MasterRespository.getExpenseType();
+      const res = await MasterRespository.getExpenseCategory
       return res.data;
     },
     onError: (error) => {
@@ -293,8 +293,8 @@ const fetchMasterData = async (masterType) => {
       return (await MasterRespository.getContactCategory()).data;
     case "Contact Tag":
       return (await MasterRespository.getContactTag()).data;
-    case "Expense Type":
+    case "Expense Category":
-      return (await MasterRespository.getExpenseType()).data;
+      return (await MasterRespository.getExpenseCategory()).data;
     case "Payment Mode":
       return (await MasterRespository.getPaymentMode()).data;
     case "Expense Status":
@@ -596,17 +596,17 @@ export const useUpdateContactTag = (onSuccessCallback) => {
 };
 
 // ----------------------Expense Type------------------
-export const useCreateExpenseType = (onSuccessCallback) => {
+export const useCreateExpenseCategory= (onSuccessCallback) => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (payload) => {
-      const resp = await MasterRespository.createExpenseType(payload);
+      const resp = await MasterRespository.createExpenseCategory(payload);
       return resp.data;
     },
     onSuccess: (data) => {
       queryClient.invalidateQueries({
-        queryKey: ["masterData", "Expense Type"],
+        queryKey: ["masterData", "Expense Category"],
       });
       showToast("Expense Type added successfully", "success");
       if (onSuccessCallback) onSuccessCallback(data);
@@ -616,17 +616,17 @@ export const useCreateExpenseType = (onSuccessCallback) => {
     },
   });
 };
-export const useUpdateExpenseType = (onSuccessCallback) => {
+export const useUpdateExpenseCategory = (onSuccessCallback) => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ id, payload }) => {
-      const response = await MasterRespository.updateExpenseType(id, payload);
+      const response = await MasterRespository.updateExpenseCategory(id, payload);
       return response.data;
     },
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({
-        queryKey: ["masterData", "Expense Type"],
+        queryKey: ["masterData", "Expense Category"],
       });
       showToast("Expense Type updated successfully.", "success");
 

src/hooks/useExpense.js

@@ -281,6 +281,16 @@ export const usePaymentRequestList = (
     keepPreviousData: true,
   });
 };
+export const usePaymentRequestDetail =(RequestId)=>{
+  return useQuery({
+    queryKey:['paymentRequest',RequestId],
+    queryFn:async()=>{
+      const resp = await ExpenseRepository.GetPaymentRequest(RequestId);
+      return resp.data;
+    },
+    enabled:!!RequestId
+  })
+}
 
 // ---------------------------Put Post Payment Request---------------------------------------
 export const useCreatePaymentRequest = (onSuccessCallBack) => {

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -1,89 +1,123 @@
-import React, { useState } 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";
 
+export const PaymentRequestContext = createContext();
+export const usePaymentRequestContext = () => {
+  const context = useContext(PaymentRequestContext);
+  if (!context) {
+    throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
+  }
+  return context;
+};
 const PaymentRequestPage = () => {
-  const [ManagePaymentRequestModal, setManagePaymentRequestModal] = useState({
+  const [ManageRequest, setManageRequest] = useState({
     IsOpen: null,
-    expenseId: null,
+    RequestId: null,
   });
+  const { setOffcanvasContent, setShowTrigger } = useFab();
 
   const [search, setSearch] = useState("");
 
-  return (
+  const contextValue = {
-    <div className="container-fluid">
+    // setViewExpense,
-      {/* Breadcrumb */}
+    setManageRequest,
-      <Breadcrumb
+    // setDocumentView,
-        data={[
+    // filterData,
-          { label: "Home", link: "/" },
+    // removeFilterChip
-          { label: "Finance", link: "/Payment Request" },
+  };
-          { label: "Payment Request" },
+
-        ]}
+  useEffect(() => {
+
+    setShowTrigger(true);
+    setOffcanvasContent(
+      "Expense Filters",
+      <ExpenseFilterPanel
+   
       />
+    );
 
-      {/* Top Bar */}
+    return () => {
-      <div className="card my-3 px-sm-4 px-0">
+      setShowTrigger(false);
-        <div className="card-body py-2 px-3">
+      setOffcanvasContent("", null);
-          <div className="row align-items-center">
+    };
-            <div className="col-6">
+  },[]);
-              <input
-                type="search"
-                className="form-control form-control-sm w-auto"
-                placeholder="Search Payment Req.."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
 
-            <div className="col-6 text-end mt-2 mt-sm-0">
+  return (
-              <button
+    <PaymentRequestContext.Provider value={contextValue}>
-                className="btn btn-sm btn-primary"
+      <div className="container-fluid">
-                type="button"
+        {/* Breadcrumb */}
-                onClick={() =>
+        <Breadcrumb
-                  setManagePaymentRequestModal({
+          data={[
-                    IsOpen: true,
+            { label: "Home", link: "/" },
-                    expenseId: null,
+            { label: "Finance", link: "/Payment Request" },
-                  })
+            { label: "Payment Request" },
-                }
+          ]}
-              >
+        />
-                <i className="bx bx-plus-circle me-2"></i>
+
-                <span className="d-none d-md-inline-block">
+        {/* Top Bar */}
-                  Add Payment Request
+        <div className="card my-3 px-sm-4 px-0">
-                </span>
+          <div className="card-body py-2 px-3">
-              </button>
+            <div className="row align-items-center">
+              <div className="col-6">
+                <input
+                  type="search"
+                  className="form-control form-control-sm w-auto"
+                  placeholder="Search Payment Req.."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                />
+              </div>
+
+              <div className="col-6 text-end mt-2 mt-sm-0">
+                <button
+                  className="btn btn-sm btn-primary"
+                  type="button"
+                  onClick={() =>
+                    setManageRequest({
+                      IsOpen: true,
+                      expenseId: null,
+                    })
+                  }
+                >
+                  <i className="bx bx-plus-circle me-2"></i>
+                  <span className="d-none d-md-inline-block">
+                    Add Payment Request
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-
-      {/* Add/Edit Modal */}
-      {ManagePaymentRequestModal.IsOpen && (
-        <GlobalModel
-          isOpen
-          size="lg"
-          closeModal={() =>
-            setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
-          }
-        >
-          <ManagePaymentRequestModal
-            key={ManagePaymentRequestModal.expenseId ?? "new"}
-            expenseToEdit={ManagePaymentRequestModal.expenseId}
-            closeModal={() =>
-              setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
-            }
-          />
-        </GlobalModel>
-      )}
-
-      {/* Payment Request List */}
-      <div className="card">
         <PaymentRequestList
-          search={search}
+            search={search}
-          setManagePaymentRequestModal={setManagePaymentRequestModal}
+          />
-        />
+
+        {/* Add/Edit Modal */}
+        {ManageRequest.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="lg"
+            closeModal={() =>
+              setManageRequest({ IsOpen: null, expenseId: null })
+            }
+          >
+            <ManagePaymentRequest
+              key={ManageRequest.RequestId ?? "new"}
+              requestToEdit={ManageRequest.RequestId}
+              closeModal={() =>
+                setManageRequest({ IsOpen: null, RequestId: null })
+              }
+            />
+          </GlobalModel>
+        )}
+        
       </div>
-    </div>
+    </PaymentRequestContext.Provider>
   );
 };
 

src/repositories/ExpsenseRepository.jsx

@@ -23,6 +23,8 @@ const ExpenseRepository = {
   },
   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}`),
+
   //#endregion
 
 

src/repositories/MastersRepository.jsx

@@ -49,8 +49,8 @@ export const MasterRespository = {
   "Work Category": (id) => api.delete(`api/master/work-category/${id}`),
   "Contact Category": (id) => api.delete(`/api/master/contact-category/${id}`),
   "Contact Tag": (id) => api.delete(`/api/master/contact-tag/${id}`),
-  "Expense Type": (id, isActive) =>
+  "Expense Category": (id, isActive) =>
-    api.delete(`/api/Master/expenses-type/delete/${id}`, (isActive = false)),
+    api.delete(`/api/Master/expenses-category/delete/${id}`, (isActive = false)),
   "Payment Mode": (id, isActive) =>
     api.delete(`/api/Master/payment-mode/delete/${id}`, (isActive = false)),
   "Expense Status": (id, isActive) =>
@@ -82,10 +82,10 @@ export const MasterRespository = {
 
   getAuditStatus: () => api.get("/api/Master/work-status"),
 
-  getExpenseType: () => api.get("/api/Master/expenses-types"),
+  getExpenseCategory: () => api.get("/api/Master/expenses-categories"),
-  createExpenseType: (data) => api.post("/api/Master/expenses-type", data),
+  createExpenseCategory: (data) => api.post("/api/Master/expenses-category", data),
-  updateExpenseType: (id, data) =>
+  updateExpenseCategory: (id, data) =>
-    api.put(`/api/Master/expenses-type/edit/${id}`, data),
+    api.put(`/api/Master/expenses-category/edit/${id}`, data),
 
   getPaymentMode: () => api.get("/api/Master/payment-modes"),
   createPaymentMode: (data) => api.post(`/api/Master/payment-mode`, data),