diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx index f83d3767..492c419f 100644 --- a/src/components/RecurringExpense/RecurringExpenseList.jsx +++ b/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 ( + + {label || e?.status?.name || "N/A"} + + ); + }, }, ]; @@ -192,10 +210,10 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { - setViewRecurring({ - recurringId: recurringExpense?.id, - view: true, - }) + setViewRecurring({ + recurringId: recurringExpense?.id, + view: true, + }) } > @@ -261,9 +279,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => { {[...Array(totalPages)].map((_, index) => (