feat(expenses): enhance expenses management with filtering and search capabilities

apps/frontend/src/features/expenses/ExpensesProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from "react";
 import {
   usePeriodicExpenses,
   useCreatePeriodicExpense,
@@ -37,6 +37,10 @@ interface ExpensesContextValue {
   page: number;
   setPage: (page: number) => void;
   pageSize: number;
+  periodicExpenseFilter: number | undefined;
+  setPeriodicExpenseFilter: (id: number | undefined) => void;
+  searchInput: string;
+  setSearchInput: (value: string) => void;
 
   monthlyTotals: MonthlyTotals | undefined;
   isLoadingTotals: boolean;
@@ -59,10 +63,29 @@ export function ExpensesProvider({ children }: { children: ReactNode }) {
   const [statusFilter, setStatusFilter] = useState("PENDING");
   const [page, setPage] = useState(1);
   const pageSize = 10;
+  const [periodicExpenseFilter, setPeriodicExpenseFilter] = useState<number | undefined>(undefined);
+  const [searchInput, setSearchInput] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      setSearchQuery(searchInput);
+    }, 300);
+    return () => {
+      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    };
+  }, [searchInput]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [periodicExpenseFilter, searchQuery]);
 
   const { data: periodicExpenses = [], isLoading: isLoadingPeriodic } = usePeriodicExpenses();
   const { data: expenses = { data: [], total: 0, page: 1, pageSize: 10 }, isLoading: isLoadingExpenses } =
-    useExpenses(statusFilter, page, pageSize);
+    useExpenses(statusFilter, page, pageSize, periodicExpenseFilter, searchQuery || undefined);
 
   const now = new Date();
   const { data: monthlyTotals, isLoading: isLoadingTotals } = useMonthlyTotals(now.getFullYear(), now.getMonth() + 1);
@@ -145,6 +168,10 @@ export function ExpensesProvider({ children }: { children: ReactNode }) {
         page,
         setPage,
         pageSize,
+        periodicExpenseFilter,
+        setPeriodicExpenseFilter,
+        searchInput,
+        setSearchInput,
         monthlyTotals,
         isLoadingTotals,
         totalPending,