feat(expenses): add monthly totals and pagination support for expenses

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

@@ -8,6 +8,7 @@ import {
   useExpenses,
   useCreateNonPeriodicExpense,
   usePayExpense,
+  useMonthlyTotals,
 } from "@/lib/queries";
 import type {
   PeriodicExpense,
@@ -15,16 +16,24 @@ import type {
   CreatePeriodicExpenseInput,
   CreateNonPeriodicExpenseInput,
   PayExpenseInput,
+  PaginatedResponse,
+  MonthlyTotals,
 } from "@/lib/api";
 
 interface ExpensesContextValue {
   periodicExpenses: PeriodicExpense[];
   isLoadingPeriodic: boolean;
 
-  expenses: Expense[];
+  expenses: PaginatedResponse<Expense>;
   isLoadingExpenses: boolean;
   statusFilter: string;
   setStatusFilter: (status: string) => void;
+  page: number;
+  setPage: (page: number) => void;
+  pageSize: number;
+
+  monthlyTotals: MonthlyTotals | undefined;
+  isLoadingTotals: boolean;
 
   createPeriodicExpense: (data: CreatePeriodicExpenseInput) => Promise<PeriodicExpense>;
   updatePeriodicExpense: (id: number, data: CreatePeriodicExpenseInput) => Promise<void>;
@@ -38,9 +47,15 @@ const ExpensesContext = createContext<ExpensesContextValue | null>(null);
 
 export function ExpensesProvider({ children }: { children: ReactNode }) {
   const [statusFilter, setStatusFilter] = useState("PENDING");
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
 
   const { data: periodicExpenses = [], isLoading: isLoadingPeriodic } = usePeriodicExpenses();
-  const { data: expenses = [], isLoading: isLoadingExpenses } = useExpenses(statusFilter);
+  const { data: expenses = { data: [], total: 0, page: 1, pageSize: 10 }, isLoading: isLoadingExpenses } =
+    useExpenses(statusFilter, page, pageSize);
+
+  const now = new Date();
+  const { data: monthlyTotals, isLoading: isLoadingTotals } = useMonthlyTotals(now.getFullYear(), now.getMonth() + 1);
 
   const createPeriodicMutation = useCreatePeriodicExpense();
   const updatePeriodicMutation = useUpdatePeriodicExpense();
@@ -100,6 +115,11 @@ export function ExpensesProvider({ children }: { children: ReactNode }) {
         isLoadingExpenses,
         statusFilter,
         setStatusFilter,
+        page,
+        setPage,
+        pageSize,
+        monthlyTotals,
+        isLoadingTotals,
         createPeriodicExpense,
         updatePeriodicExpense: updatePeriodicExpenseFn,
         deletePeriodicExpense: deletePeriodicExpenseFn,