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

apps/frontend/src/features/dashboard/DashboardPage.tsx

@@ -1,7 +1,7 @@
 import { Minus, RefreshCw, TrendingDown, TrendingUp } from "lucide-react";
 import { RelativeTime } from "@/lib/time";
 import type { Quote } from "@/lib/api";
-import { useQuotes, useFetchQuotes } from "@/lib/queries";
+import { useQuotes, useFetchQuotes, useMonthlyPayedTotal } from "@/lib/queries";
 import { useNavigate } from "@tanstack/react-router";
 import {
   Tooltip,
@@ -101,6 +101,9 @@ export function DashboardPage() {
   const belo = quotes?.find((q) => q.type === "BELO");
   const blue = quotes?.find((q) => q.type === "BLUE");
 
+  const now = new Date();
+  const { data: monthlyExpenses } = useMonthlyPayedTotal(now.getFullYear(), now.getMonth() + 1);
+
   const isFetching = isLoading || isPending;
 
   return (
@@ -124,7 +127,7 @@ export function DashboardPage() {
         </div>
         <div className="rounded-lg border p-4">
           <p className="text-sm text-muted-foreground">Gastos del mes</p>
-          <p className="text-2xl font-bold">$0.00</p>
+          <p className="text-2xl font-bold">${priceFormatter.format(monthlyExpenses?.total ?? 0)}</p>
         </div>
         <QuoteCard quote={belo} title="BELO" to="/quotes/belo" variant="minimal" />
         <QuoteCard quote={blue} title="BLUE" variant="minimal" />