Adding filter in Recurring Expense and search functionality is also working.

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 }) => {
                         </thead>
 
                         <tbody>
-                            {recurringExpenseData.length > 0 ? (
+                            {filteredData.length > 0 ? (
-                                recurringExpenseData.map((recurringExpense) => (
+                                filteredData.map((recurringExpense) => (
                                     <tr key={recurringExpense.id} className="align-middle" style={{ height: "40px" }}>
                                         {recurringExpenseColumns.map((col) => (
                                             <td

src/components/RecurringExpense/RecurringExpenseSchema.js

@@ -89,16 +89,22 @@ export const defaultRecurringExpense = {
 };
 
 
-// export const SearchPaymentRequestSchema = z.object({
+export const SearchRecurringExpenseSchema = z.object({
-//   projectIds: z.array(z.string()).optional(),
+  title: z.array(z.string()).optional(),
-//   statusIds: z.array(z.string()).optional(),
+  description: z.array(z.string()).optional(),
-//   createdByIds: z.array(z.string()).optional(),
+  payee: z.array(z.string()).optional(),
-//   currencyIds: z.array(z.string()).optional(),
+  notifyTo: z.array(z.string()).optional(),
-//   expenseCategoryIds: z.array(z.string()).optional(),
+  currencyId: z.array(z.string()).optional(),
-//   payees: z.array(z.string()).optional(),
+  amount: z.array(z.string()).optional(),
-//   startDate: z.string().optional(),
+  strikeDate: z.string().optional(),
-//   endDate: z.string().optional(),
+  projectId: z.string().optional(),
-// });
+  paymentBufferDays: z.string().optional(),
+  numberOfIteration: z.string().optional(),
+  expenseCategoryId: z.string().optional(),
+  statusId: z.string().optional(),
+  frequency: z.string().optional(),
+  isVariable: z.string().optional(),
+});
 
 // export const defaultPaymentRequestFilter = {
 //   projectIds: [],

src/pages/RecurringExpense/RecurringExpensePage.jsx

@@ -4,6 +4,8 @@ import GlobalModel from "../../components/common/GlobalModel";
 import { useFab } from "../../Context/FabContext";
 import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
 import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
+import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
+import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
 
 export const RecurringExpenseContext = createContext();
 export const useRecurringExpenseContext = () => {
@@ -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 (
         <RecurringExpenseContext.Provider value={contextValue}>
             <div className="container-fluid">
@@ -56,19 +70,47 @@ const RecurringExpensePage = () => {
 
                 {/* Top Bar */}
                 <div className="card my-3 px-sm-4 px-0">
-                    <div className="card-body py-2 px-3">
+                    <div className="card-body py-2 px-1">
-                        <div className="row align-items-center">
+                        <div className="d-flex flex-wrap align-items-center justify-content-between">
-                            <div className="col-6">
+                            {/* Left side: Search + Filter */}
+                            <div className="d-flex align-items-center gap-2 flex-wrap">
                                 <input
                                     type="search"
                                     className="form-control form-control-sm w-auto"
-                                    placeholder="Search Recurring Expense.."
+                                    placeholder="Search Recurring Expense..."
                                     value={search}
-                                //   onChange={(e) => setSearch(e.target.value)}
+                                    onChange={(e) => setSearch(e.target.value)}
                                 />
+
+                                <div className="dropdown">
+                                    <a
+                                        className="dropdown-toggle hide-arrow cursor-pointer p-1"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                        title="Filter"
+                                    >
+                                        <i className="bx bx-slider-alt ms-1"></i>
+                                    </a>
+                                    <ul className="dropdown-menu p-2 text-capitalize">
+                                        {PAYEE_RECURRING_EXPENSE.map(({ id, label }) => (
+                                            <li key={id}>
+                                                <div className="form-check">
+                                                    <input
+                                                        className="form-check-input"
+                                                        type="checkbox"
+                                                        checked={selectedStatuses.includes(id)}
+                                                        onChange={() => handleStatusChange(id)}
+                                                    />
+                                                    <label className="form-check-label">{label}</label>
+                                                </div>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
                             </div>
 
-                            <div className="col-6 text-end mt-2 mt-sm-0">
+                            {/* Right side: Add Button */}
+                            <div className="mt-2 mt-sm-0">
                                 <button
                                     className="btn btn-sm btn-primary"
                                     type="button"
@@ -88,11 +130,8 @@ const RecurringExpensePage = () => {
                         </div>
                     </div>
                 </div>
-                {/* <PaymentRequestList
+
-          search={search}
+                <RecurringExpenseList filterStatuses={selectedStatuses} search={search} />
-          filters={filters}
-        /> */}
-                <RecurringExpenseList />
 
                 {/* Add/Edit Modal */}
                 {ManageRequest.IsOpen && (

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",
+  },
+];
+