feat(dashboard): confirmação de pagamento com conta e data para faturas e boletos

- widget de faturas abre modal com seleção de conta de origem e data antes de pagar
- widget de boletos ganha a mesma paridade: modal com conta de pagamento e data
- toggleTransactionSettlementAction aceita paymentAccountId e paymentDate opcionais
- DashboardBill expõe accountId para inicializar o modal com a conta já vinculada

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/features/dashboard/invoices/invoices-queries.ts

@@ -1,5 +1,11 @@
 import { and, eq, ilike, inArray, isNotNull, sql } from "drizzle-orm";
-import { cards, invoices, payers, transactions } from "@/db/schema";
+import {
+	cards,
+	financialAccounts,
+	invoices,
+	payers,
+	transactions,
+} from "@/db/schema";
 import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
 import { db } from "@/shared/lib/db";
 import {
@@ -31,6 +37,13 @@ type RawDashboardInvoice = {
 	totalAmount: string | number | null;
 	transactionCount: string | number | null;
 	invoiceCreatedAt: Date | null;
+	cardAccountId: string | null;
+};
+
+export type InvoicePaymentAccountOption = {
+	value: string;
+	label: string;
+	logo: string | null;
 };
 
 type RawInvoiceBreakdownRow = {
@@ -63,11 +76,13 @@ export type DashboardInvoice = {
 	totalAmount: number;
 	paidAt: string | null;
 	pagadorBreakdown: InvoicePagadorBreakdown[];
+	defaultPaymentAccountId: string | null;
 };
 
 type DashboardInvoicesSnapshot = {
 	invoices: DashboardInvoice[];
 	totalPending: number;
+	paymentAccountOptions: InvoicePaymentAccountOption[];
 };
 
 const isInvoiceStatus = (value: unknown): value is InvoicePaymentStatus =>
@@ -148,7 +163,7 @@ export async function fetchDashboardInvoices(
 		}
 	}
 
-	const [rows, breakdownRows] = (await Promise.all([
+	const [rows, breakdownRows, accountRows] = (await Promise.all([
 		db
 			.select({
 				invoiceId: invoices.id,
@@ -159,6 +174,7 @@ export async function fetchDashboardInvoices(
 				period: invoices.period,
 				paymentStatus: invoices.paymentStatus,
 				invoiceCreatedAt: invoices.createdAt,
+				cardAccountId: cards.accountId,
 				totalAmount: sql<number | null>`
         COALESCE(SUM(${transactions.amount}), 0)
       `,
@@ -190,6 +206,7 @@ export async function fetchDashboardInvoices(
 				cards.status,
 				cards.logo,
 				cards.dueDay,
+				cards.accountId,
 				invoices.period,
 				invoices.paymentStatus,
 			),
@@ -218,7 +235,29 @@ export async function fetchDashboardInvoices(
 				payers.name,
 				payers.avatarUrl,
 			),
-	])) as [RawDashboardInvoice[], RawInvoiceBreakdownRow[]];
+		db
+			.select({
+				id: financialAccounts.id,
+				name: financialAccounts.name,
+				logo: financialAccounts.logo,
+			})
+			.from(financialAccounts)
+			.where(eq(financialAccounts.userId, userId)),
+	])) as [
+		RawDashboardInvoice[],
+		RawInvoiceBreakdownRow[],
+		{ id: string; name: string; logo: string | null }[],
+	];
+
+	const paymentAccountOptions: InvoicePaymentAccountOption[] = accountRows
+		.map((account) => ({
+			value: account.id,
+			label: account.name,
+			logo: account.logo,
+		}))
+		.sort((a, b) =>
+			a.label.localeCompare(b.label, "pt-BR", { sensitivity: "base" }),
+		);
 
 	const groupedBreakdown = new Map<
 		string,
@@ -336,6 +375,7 @@ export async function fetchDashboardInvoices(
 			pagadorBreakdown: (
 				breakdownMap.get(`${row.cardId}:${resolvedPeriod}`) ?? []
 			).sort((a, b) => b.amount - a.amount),
+			defaultPaymentAccountId: row.cardAccountId ?? null,
 		});
 	}
 
@@ -399,5 +439,6 @@ export async function fetchDashboardInvoices(
 	return {
 		invoices: invoiceList,
 		totalPending,
+		paymentAccountOptions,
 	};
 }

src/features/dashboard/invoices/use-invoices-widget-controller.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import {
 	getCurrentDateString,
 	type InvoiceDialogState,
@@ -20,27 +21,62 @@ type InvoicesWidgetController = Omit<
 > & {
 	selectedInvoice: DashboardInvoice | null;
 	modalState: InvoiceDialogState;
+	paymentAccountId: string;
+	setPaymentAccountId: (accountId: string) => void;
+	paymentDate: Date;
+	setPaymentDate: (date: Date) => void;
 };
 
 export function useInvoicesWidgetController(
 	invoices: DashboardInvoice[],
 ): InvoicesWidgetController {
+	const [paymentAccountId, setPaymentAccountId] = useState<string>("");
+	const [paymentDate, setPaymentDate] = useState<Date>(() => new Date());
+
+	const paymentAccountIdRef = useRef(paymentAccountId);
+	const paymentDateRef = useRef(paymentDate);
+	paymentAccountIdRef.current = paymentAccountId;
+	paymentDateRef.current = paymentDate;
+
 	const controller = usePaymentDialogController({
 		items: invoices,
 		getItemId: (invoice) => invoice.id,
 		isItemConfirmed: (invoice) => isInvoicePaid(invoice.paymentStatus),
-		executeConfirm: (invoice) =>
-			updateInvoicePaymentStatusAction({
+		executeConfirm: (invoice) => {
+			const accountId = paymentAccountIdRef.current || undefined;
+			const date = paymentDateRef.current;
+			const isoDate = date.toISOString().split("T")[0];
+
+			return updateInvoicePaymentStatusAction({
 				cardId: invoice.cardId,
 				period: invoice.period,
 				status: INVOICE_PAYMENT_STATUS.PAID,
-			}),
+				paymentAccountId: accountId,
+				paymentDate: isoDate,
+			});
+		},
 		applyConfirmedState: (invoice) =>
 			markInvoiceAsPaid(invoice, getCurrentDateString()),
 	});
 
+	const selectedInvoiceId = controller.selectedItem?.id ?? null;
+	const selectedDefaultAccountId =
+		controller.selectedItem?.defaultPaymentAccountId ?? "";
+
+	useEffect(() => {
+		if (!selectedInvoiceId) {
+			return;
+		}
+		setPaymentAccountId(selectedDefaultAccountId);
+		setPaymentDate(new Date());
+	}, [selectedInvoiceId, selectedDefaultAccountId]);
+
 	return {
 		...controller,
 		selectedInvoice: controller.selectedItem,
+		paymentAccountId,
+		setPaymentAccountId,
+		paymentDate,
+		setPaymentDate,
 	};
 }