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";
@@ -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>
+        );
+      },
     },
   ];
 
@@ -261,8 +279,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${
+                    className={`page-item ${currentPage === index + 1 ? "active" : ""
-                      currentPage === index + 1 ? "active" : ""
                       }`}
                   >
                     <button