diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx index 77d02d13..1d3bd14d 100644 --- a/src/components/RecurringExpense/RecurringExpenseList.jsx +++ b/src/components/RecurringExpense/RecurringExpenseList.jsx @@ -18,7 +18,7 @@ import Error from "../common/Error"; import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage"; import { useRecurringExpenseList } from "../../hooks/useExpense"; -const RecurringExpenseList = ({ search }) => { +const RecurringExpenseList = ({ search, filterStatuses }) => { const { setManageRequest, setVieRequest } = useRecurringExpenseContext(); const navigate = useNavigate(); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -149,6 +149,10 @@ const RecurringExpenseList = ({ search }) => { ); }; + const filteredData = recurringExpenseData.filter((item) => + filterStatuses.includes(item?.status?.id) + ); + const handleDelete = (id) => { setDeletingId(id); DeleteExpense( @@ -191,8 +195,8 @@ const RecurringExpenseList = ({ search }) => { - {recurringExpenseData.length > 0 ? ( - recurringExpenseData.map((recurringExpense) => ( + {filteredData.length > 0 ? ( + filteredData.map((recurringExpense) => ( {recurringExpenseColumns.map((col) => ( { @@ -20,7 +22,10 @@ const RecurringExpensePage = () => { }); const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null }) const { setOffcanvasContent, setShowTrigger } = useFab(); - // const [filters, setFilters] = useState(defaultPaymentRequestFilter); + + const [selectedStatuses, setSelectedStatuses] = useState( + PAYEE_RECURRING_EXPENSE.map((s) => s.id) + ); const [search, setSearch] = useState(""); @@ -43,6 +48,15 @@ const RecurringExpensePage = () => { }; }, []); + const handleStatusChange = (id) => { + setSelectedStatuses((prev) => + prev.includes(id) + ? prev.filter((s) => s !== id) + : [...prev, id] + ); + }; + + return (
@@ -56,19 +70,47 @@ const RecurringExpensePage = () => { {/* Top Bar */}
-
-
-
+
+
+ {/* Left side: Search + Filter */} +
setSearch(e.target.value)} + onChange={(e) => setSearch(e.target.value)} /> + +
+ +
    + {PAYEE_RECURRING_EXPENSE.map(({ id, label }) => ( +
  • +
    + handleStatusChange(id)} + /> + +
    +
  • + ))} +
+
-
+ {/* Right side: Add Button */} +
- {/* */} - + + {/* Add/Edit Modal */} {ManageRequest.IsOpen && ( diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx index 731c4dee..67aa189e 100644 --- a/src/utils/constants.jsx +++ b/src/utils/constants.jsx @@ -186,4 +186,23 @@ export const FREQUENCY_FOR_RECURRING = { 5: "Weekly" }; +export const PAYEE_RECURRING_EXPENSE = [ + { + id: "da462422-13b2-45cc-a175-910a225f6fc8", + label: "Active", + }, + { + id: "306856fb-5655-42eb-bf8b-808bb5e84725", + label: "Completed", + }, + { + id: "3ec864d2-8bf5-42fb-ba70-5090301dd816", + label: "De-Activited", + }, + { + id: "8bfc9346-e092-4a80-acbf-515ae1ef6868", + label: "Paused", + }, +]; +