src/components/Expenses/ExpenseFilterPanel.jsx

@@ -23,11 +23,11 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   const groupByList = useMemo(() => [
     { id: "transactionDate", name: "Transaction Date" },
     { id: "status", name: "Status" },
-    { id: "submittedBy", name: "Submitted By" },
+    { id: "paidBy", name: "Paid By" },
     { id: "project", name: "Project" },
     { id: "paymentMode", name: "Payment Mode" },
     { id: "expensesType", name: "Expense Type" },
-    {id: "createdAt",name:"Submitted Date"}
+    {id: "createdAt",name:"Submitted"}
   ], []);
 
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);

src/components/Expenses/ExpenseList.jsx

@@ -4,18 +4,14 @@ import Avatar from "../common/Avatar";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 import Pagination from "../common/Pagination";
-import {
+import { APPROVE_EXPENSE, EXPENSE_DRAFT, EXPENSE_REJECTEDBY } from "../../utils/constants";
-  APPROVE_EXPENSE,
-  EXPENSE_DRAFT,
-  EXPENSE_REJECTEDBY,
-} from "../../utils/constants";
 import { getColorNameFromHex, useDebounce } from "../../utils/appUtils";
 import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
 
-const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
+const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { setViewExpense, setManageExpenseModal } = useExpenseContext();
@@ -66,9 +62,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         case "status":
           key = item.status?.displayName || "Unknown";
           break;
-        case "submittedBy":
+        case "paidBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
+          key = `${item.paidBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
+            item.paidBy?.lastName ?? ""
           }`.trim();
           break;
         case "project":
@@ -106,23 +102,23 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       align: "text-start",
     },
     {
-      key: "Submitted By",
+      key: "paidBy",
-      label: "Submitted By",
+      label: "Paid By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""}`.trim() ||
+        `${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() ||
         "N/A",
       customRender: (e) => (
         <div className="d-flex align-items-center">
           <Avatar
             size="xs"
             classAvatar="m-0"
-            firstName={e.createdBy?.firstName}
+            firstName={e.paidBy?.firstName}
-            lastName={e.createdBy?.lastName}
+            lastName={e.paidBy?.lastName}
           />
           <span>
-            {`${e.createdBy?.firstName ?? ""} ${
+            {`${e.paidBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
+              e.paidBy?.lastName ?? ""
             }`.trim() || "N/A"}
           </span>
         </div>
@@ -168,19 +164,18 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     ? groupByField(data?.data ?? [], groupBy)
     : { All: data?.data ?? [] };
   const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
-  const canEditExpense = (expense) => {
+const canEditExpense = (expense) => {
   return (
     (expense.status.id === EXPENSE_DRAFT ||
       EXPENSE_REJECTEDBY.includes(expense.status.id)) &&
     expense.createdBy?.id === SelfId
   );
-  };
+};
+
+const canDetetExpense = (expense)=>{
+  return (expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId )
+}
 
-  const canDetetExpense = (expense) => {
-    return (
-      expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId
-    );
-  };
                               
   return (
     <>
@@ -282,7 +277,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       })
     }
   ></i>
-                              )}
+)}
  
                                   {canDetetExpense(expense) && (
                                         <i
@@ -293,6 +288,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                     }}
                                   ></i>
                                   )}
+
                             </div>
                           </td>
                         </tr>

src/components/Expenses/ViewExpense.jsx

@@ -113,6 +113,9 @@ const ViewExpense = ({ ExpenseId }) => {
           <hr />
         </div>
         <div className="text-start mb-2">
+          {/* <label className="form-label me-2 mb-0 fw-semibold">
+          Description :
+        </label> */}
           <div className="text-muted">{data?.description}</div>
         </div>
         {/* Row 1 */}
@@ -272,8 +275,92 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         )}
+
+        {/* {data.reviewedBy && (
+          <div className="col-md-6 mb-3 text-start">
+            <div className="d-flex align-items-center">
+              <label
+                className="form-label me-2 mb-0 fw-semibold"
+                style={{ minWidth: "130px" }}
+              >
+                Reviewed By :
+              </label>
+              <div className="d-flex align-items-center">
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0"
+                  firstName={data.reviewedBy?.firstName}
+                  lastName={data.reviewedBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data.reviewedBy?.firstName ?? ""} ${
+                    data.reviewedBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {data.approvedBy && (
+          <div className="col-md-6 mb-3 text-start">
+            <div className="d-flex align-items-center">
+              <label
+                className="form-label me-2 mb-0 fw-semibold"
+                style={{ minWidth: "130px" }}
+              >
+                Approved By :{" "}
+              </label>
+              <div className="d-flex align-items-center">
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0"
+                  firstName={data.approvedBy?.firstName}
+                  lastName={data.approvedBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data.approvedBy?.firstName ?? ""} ${
+                    data.approvedBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+        {data.processedBy && (
+          <div className="col-md-6 mb-3 text-start">
+            <div className="d-flex align-items-center">
+              <label
+                className="form-label me-2 mb-0 fw-semibold"
+                style={{ minWidth: "130px" }}
+              >
+                Processed By :{" "}
+              </label>
+              <div className="d-flex align-items-center">
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0"
+                  firstName={data.processedBy?.firstName}
+                  lastName={data.processedBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data.processedBy?.firstName ?? ""} ${
+                    data.processedBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
+                </span>
+              </div>
+            </div>
+          </div>
+        )} */}
       </div>
     
+
+      {/* <div className="text-start">
+        <label className="form-label me-2 mb-0 fw-semibold">
+          Description :
+        </label>
+        <div className="text-muted">{data?.description}</div>
+      </div> */}
       <div className="col-12  text-start">
         <label className="form-label me-2 mb-0 fw-semibold">Attachment :</label>
 

src/data/menuData.json

@@ -60,13 +60,6 @@
                 "available": true,
                 "link": "/directory"
             },
-      {
-        "text": "Expense",
-        "icon": "bx bx-receipt",
-        "available": true,
-        "link": "/expenses"
-      },
-
              {
                 "text": "Image Gallary",
                 "icon": "bx bx-images",