Implementing Recurring Expense status column.

This commit is contained in:
Kartik Sharma 2025-11-06 12:29:35 +05:30
parent 41377167e6
commit 35956cc9bb

View File

@ -4,6 +4,7 @@ import {
EXPENSE_REJECTEDBY, EXPENSE_REJECTEDBY,
FREQUENCY_FOR_RECURRING, FREQUENCY_FOR_RECURRING,
ITEMS_PER_PAGE, ITEMS_PER_PAGE,
PAYEE_RECURRING_EXPENSE,
} from "../../utils/constants"; } from "../../utils/constants";
import { formatCurrency, useDebounce } from "../../utils/appUtils"; import { formatCurrency, useDebounce } from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatUTCToLocalTime } from "../../utils/dateUtils";
@ -16,7 +17,7 @@ import { useRecurringExpenseContext } from "../../pages/RecurringExpense/Recurri
import { useRecurringExpenseList } from "../../hooks/useExpense"; import { useRecurringExpenseList } from "../../hooks/useExpense";
const RecurringExpenseList = ({ search, filterStatuses }) => { const RecurringExpenseList = ({ search, filterStatuses }) => {
const { setManageRequest, setVieRequest , setViewRecurring} = useRecurringExpenseContext(); const { setManageRequest, setVieRequest, setViewRecurring } = useRecurringExpenseContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen,] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen,] = useState(false);
const [deletingId, setDeletingId] = useState(null); const [deletingId, setDeletingId] = useState(null);
@ -25,6 +26,13 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id (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 = [ const recurringExpenseColumns = [
{ {
key: "expenseCategory", key: "expenseCategory",
@ -73,7 +81,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
key: "status", key: "status",
label: "Status", label: "Status",
align: "text-start", 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 <i
className="bx bx-show text-primary cursor-pointer" className="bx bx-show text-primary cursor-pointer"
onClick={() => onClick={() =>
setViewRecurring({ setViewRecurring({
recurringId: recurringExpense?.id, recurringId: recurringExpense?.id,
view: true, view: true,
}) })
} }
></i> ></i>
@ -261,9 +279,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${ className={`page-item ${currentPage === index + 1 ? "active" : ""
currentPage === index + 1 ? "active" : "" }`}
}`}
> >
<button <button
className="page-link" className="page-link"