Implementing Recurring Expense status column.

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -4,6 +4,7 @@ import {
   EXPENSE_REJECTEDBY,
   FREQUENCY_FOR_RECURRING,
   ITEMS_PER_PAGE,
+  PAYEE_RECURRING_EXPENSE,
 } from "../../utils/constants";
 import { formatCurrency, useDebounce } from "../../utils/appUtils";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
@@ -16,7 +17,7 @@ import { useRecurringExpenseContext } from "../../pages/RecurringExpense/Recurri
 import { useRecurringExpenseList } from "../../hooks/useExpense";
 
 const RecurringExpenseList = ({ search, filterStatuses }) => {
-  const { setManageRequest, setVieRequest , setViewRecurring} = useRecurringExpenseContext();
+  const { setManageRequest, setVieRequest, setViewRecurring } = useRecurringExpenseContext();
   const navigate = useNavigate();
   const [IsDeleteModalOpen, setIsDeleteModalOpen,] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
@@ -25,6 +26,13 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
     (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
   );
 
+  const statusColorMap = {
+    "da462422-13b2-45cc-a175-910a225f6fc8": "primary",      // Active
+    "306856fb-5655-42eb-bf8b-808bb5e84725": "success",      // Completed
+    "3ec864d2-8bf5-42fb-ba70-5090301dd816": "danger",       // De-Activated
+    "8bfc9346-e092-4a80-acbf-515ae1ef6868": "warning",      // Paused
+  };
+
   const recurringExpenseColumns = [
     {
       key: "expenseCategory",
@@ -73,7 +81,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       key: "status",
       label: "Status",
       align: "text-start",
-      getValue: (e) => e?.status?.name || "N/A",
+      getValue: (e) => {
+        const color = statusColorMap[e?.status?.id] || "secondary";
+        const label = PAYEE_RECURRING_EXPENSE.find(
+          (s) => s.id === e?.status?.id
+        )?.label;
+        return (
+          <span className={`badge bg-label-${color}`}>
+            {label || e?.status?.name || "N/A"}
+          </span>
+        );
+      },
     },
   ];
 
@@ -192,10 +210,10 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                         <i
                           className="bx bx-show text-primary cursor-pointer"
                           onClick={() =>
-                              setViewRecurring({
-                                  recurringId: recurringExpense?.id,
-                                  view: true,
-                              })
+                            setViewRecurring({
+                              recurringId: recurringExpense?.id,
+                              view: true,
+                            })
                           }
                         ></i>
 
@@ -261,9 +279,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${
-                      currentPage === index + 1 ? "active" : ""
-                    }`}
+                    className={`page-item ${currentPage === index + 1 ? "active" : ""
+                      }`}
                   >
                     <button
                       className="page-link"