feat(dashboard): add monthly totals data to DashboardPage and update pending payments display

This commit is contained in:
Jose Selesan
2026-05-29 19:13:22 -03:00
parent f6c03e3c91
commit 801f04df12

View File

@@ -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, useMonthlyPayedTotal } from "@/lib/queries";
import { useQuotes, useFetchQuotes, useMonthlyPayedTotal, useMonthlyTotals } from "@/lib/queries";
import { useNavigate } from "@tanstack/react-router";
import {
Tooltip,
@@ -103,6 +103,7 @@ export function DashboardPage() {
const now = new Date();
const { data: monthlyExpenses } = useMonthlyPayedTotal(now.getFullYear(), now.getMonth() + 1);
const { data: monthlyTotals } = useMonthlyTotals(now.getFullYear(), now.getMonth() + 1);
const isFetching = isLoading || isPending;
@@ -122,8 +123,8 @@ export function DashboardPage() {
</div>
<div className="grid gap-4 md:grid-cols-4">
<div className="rounded-lg border p-4">
<p className="text-sm text-muted-foreground">Total ingresos</p>
<p className="text-2xl font-bold">$0.00</p>
<p className="text-sm text-muted-foreground">Pagos pendientes</p>
<p className="text-2xl font-bold">${priceFormatter.format(monthlyTotals?.pending ?? 0)}</p>
</div>
<div className="rounded-lg border p-4">
<p className="text-sm text-muted-foreground">Gastos del mes</p>