feat(lancamentos): filtros de status e anexo; feedback visual de fatura paga

- Novos filtros no drawer: somente pagos, somente não pagos, com anexo - Filtros de tipo/condição/pagamento agora usam slugs na URL (sem acentos) - Coluna de liquidação: lançamentos de cartão com fatura paga exibem ícone verde com tooltip — diferenciando do estado pendente - EstabelecimentoInput: popover respeita largura do input ao abrir - slugify extraído para shared/utils/string.ts - INVOICE_PAYMENT_CATEGORY_NAME adicionado em categories/constants.ts - SETTLED_FILTER_VALUES adicionado em transactions/constants.ts - establishment-logo.tsx removido (não utilizado) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 11:01:45 +00:00 · 2026-04-11 17:50:59 +00:00
parent ffead579fa
commit dfb4126b12
12 changed files with 201 additions and 34 deletions
--- a/src/features/transactions/actions/export-actions.ts
+++ b/src/features/transactions/actions/export-actions.ts
@@ -31,6 +31,8 @@ const exportTransactionsSchema: z.ZodType<TransactionsExportContext> = z.object(
 			categoryFilter: z.string().nullable(),
 			accountCardFilter: z.string().nullable(),
 			searchFilter: z.string().nullable(),
+			settledFilter: z.string().nullable(),
+			attachmentFilter: z.string().nullable(),
 		}),
 		accountId: z.string().min(1).nullable().optional(),
 		cardId: z.string().min(1).nullable().optional(),
--- a/src/features/transactions/components/shared/establishment-input.tsx
+++ b/src/features/transactions/components/shared/establishment-input.tsx
@@ -38,6 +38,13 @@ export function EstabelecimentoInput({
 }: EstabelecimentoInputProps) {
 	const [open, setOpen] = React.useState(false);
 	const [searchValue, setSearchValue] = React.useState("");
+	const [width, setWidth] = React.useState<number | undefined>();
+	const containerRef = React.useRef<HTMLDivElement>(null);
+
+	React.useEffect(() => {
+		if (!open || !containerRef.current) return;
+		setWidth(containerRef.current.offsetWidth);
+	}, [open]);

 	const handleSelect = (selectedValue: string) => {
 		onChange(selectedValue);
@@ -50,7 +57,6 @@ export function EstabelecimentoInput({
 		onChange(newValue);
 		setSearchValue(newValue);

-		// Open popover when user types and there are suggestions
 		if (newValue.length > 0 && estabelecimentos.length > 0) {
 			setOpen(true);
 		}
@@ -68,7 +74,7 @@ export function EstabelecimentoInput({
 	return (
 		<Popover open={open} onOpenChange={setOpen} modal>
 			<PopoverTrigger asChild>
-				<div className="relative">
+				<div ref={containerRef} className="relative w-full">
 					<Input
 						id={id}
 						value={value}
@@ -86,7 +92,8 @@ export function EstabelecimentoInput({
 			</PopoverTrigger>
 			{estabelecimentos.length > 0 && (
 				<PopoverContent
-					className="p-0 w-[--radix-popover-trigger-width]"
+					className="p-0"
+					style={width ? { width } : undefined}
 					align="start"
 					onOpenAutoFocus={(e) => e.preventDefault()}
 				>
--- a/src/features/transactions/components/shared/establishment-logo.tsx
+++ b/src/features/transactions/components/shared/establishment-logo.tsx
@@ -1,2 +0,0 @@
-// Re-export from shared — componente movido para src/shared/components/entity-avatar/
-export { EstablishmentLogo as EstabelecimentoLogo } from "@/shared/components/entity-avatar";
--- a/src/features/transactions/components/table/transactions-columns.tsx
+++ b/src/features/transactions/components/table/transactions-columns.tsx
@@ -210,7 +210,7 @@ function buildColumns({
 							<span className="flex items-center gap-1">
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<span className="line-clamp-2 max-w-[180px] font-medium truncate">
+										<span className="line-clamp-2 max-w-[180px] font-semibold truncate">
 											{name}
 										</span>
 									</TooltipTrigger>
@@ -570,12 +570,44 @@ function buildColumns({
 							paymentMethod === "Transferência bancária" ||
 							paymentMethod === "Pré-Pago | VR/VA";

-						if (!canToggleSettlement)
+						if (!canToggleSettlement) {
+							const invoicePaid = Boolean(row.original.isSettled);
 							return (
-								<span className="flex size-7 shrink-0 items-center justify-center">
-									<RiBankCard2Line className="size-4 text-muted-foreground/30" />
-								</span>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="inline-flex">
+											<Button
+												variant="ghost"
+												size="icon-sm"
+												disabled
+												className={cn(
+													"transition-colors",
+													invoicePaid
+														? "bg-success/10 text-success"
+														: "text-muted-foreground/30",
+												)}
+											>
+												{invoicePaid ? (
+													<RiCheckboxCircleFill className="size-4" />
+												) : (
+													<RiBankCard2Line className="size-4" />
+												)}
+												<span className="sr-only">
+													{invoicePaid
+														? "Fatura paga"
+														: "Lançamento de cartão de crédito"}
+												</span>
+											</Button>
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top" className="max-w-48 text-center">
+										{invoicePaid
+											? "Fatura paga"
+											: "Lançamentos de cartão de crédito são liquidados ao pagar a fatura"}
+									</TooltipContent>
+								</Tooltip>
 							);
+						}

 						const readOnly = row.original.readonly;
 						const loading = isSettlementLoading(row.original.id);
--- a/src/features/transactions/components/table/transactions-filters.tsx
+++ b/src/features/transactions/components/table/transactions-filters.tsx
@@ -15,6 +15,7 @@ import {
 } from "react";
 import {
 	PAYMENT_METHODS,
+	SETTLED_FILTER_VALUES,
 	TRANSACTION_CONDITIONS,
 	TRANSACTION_TYPES,
 } from "@/features/transactions/constants";
@@ -50,6 +51,8 @@ import {
 	SelectLabel,
 	SelectTrigger,
 } from "@/shared/components/ui/select";
+import { Switch } from "@/shared/components/ui/switch";
+import { slugify } from "@/shared/utils/string";
 import { cn } from "@/shared/utils/ui";
 import {
 	AccountCardSelectContent,
@@ -66,9 +69,6 @@ import type {

 const FILTER_EMPTY_VALUE = "__all";

-const buildStaticOptions = (values: readonly string[]) =>
-	values.map((value) => ({ value, label: value }));
-
 interface FilterSelectProps {
 	param: string;
 	placeholder: string;
@@ -263,7 +263,9 @@ export function TransactionsFilters({
 		searchParams.get("payment") ||
 		searchParams.get("payer") ||
 		searchParams.get("category") ||
-		searchParams.get("accountCard");
+		searchParams.get("accountCard") ||
+		searchParams.get("settled") ||
+		searchParams.get("hasAttachment");

 	const handleResetFilters = () => {
 		handleReset();
@@ -327,7 +329,10 @@ export function TransactionsFilters({
 									<FilterSelect
 										param="type"
 										placeholder="Todos"
-										options={buildStaticOptions(TRANSACTION_TYPES)}
+										options={TRANSACTION_TYPES.map((v) => ({
+											value: slugify(v),
+											label: v,
+										}))}
 										widthClass="w-full border-dashed"
 										disabled={isPending}
 										getParamValue={getParamValue}
@@ -345,7 +350,10 @@ export function TransactionsFilters({
 									<FilterSelect
 										param="condition"
 										placeholder="Todas"
-										options={buildStaticOptions(TRANSACTION_CONDITIONS)}
+										options={TRANSACTION_CONDITIONS.map((v) => ({
+											value: slugify(v),
+											label: v,
+										}))}
 										widthClass="w-full border-dashed"
 										disabled={isPending}
 										getParamValue={getParamValue}
@@ -363,7 +371,10 @@ export function TransactionsFilters({
 									<FilterSelect
 										param="payment"
 										placeholder="Todos"
-										options={buildStaticOptions(PAYMENT_METHODS)}
+										options={PAYMENT_METHODS.map((v) => ({
+											value: slugify(v),
+											label: v,
+										}))}
 										widthClass="w-full border-dashed"
 										disabled={isPending}
 										getParamValue={getParamValue}
@@ -547,6 +558,76 @@ export function TransactionsFilters({
 										</SelectContent>
 									</Select>
 								</div>
+
+								<div className="space-y-3">
+									<p className="text-sm font-medium">Status</p>
+									<div className="space-y-3">
+										<div className="flex items-center justify-between">
+											<label
+												htmlFor="filter-pago"
+												className="text-sm text-muted-foreground cursor-pointer"
+											>
+												Somente pagos
+											</label>
+											<Switch
+												id="filter-pago"
+												checked={
+													searchParams.get("settled") ===
+													SETTLED_FILTER_VALUES.PAID
+												}
+												disabled={isPending}
+												onCheckedChange={(checked) => {
+													handleFilterChange(
+														"settled",
+														checked ? SETTLED_FILTER_VALUES.PAID : null,
+													);
+												}}
+											/>
+										</div>
+										<div className="flex items-center justify-between">
+											<label
+												htmlFor="filter-nao-pago"
+												className="text-sm text-muted-foreground cursor-pointer"
+											>
+												Somente não pagos
+											</label>
+											<Switch
+												id="filter-nao-pago"
+												checked={
+													searchParams.get("settled") ===
+													SETTLED_FILTER_VALUES.UNPAID
+												}
+												disabled={isPending}
+												onCheckedChange={(checked) => {
+													handleFilterChange(
+														"settled",
+														checked ? SETTLED_FILTER_VALUES.UNPAID : null,
+													);
+												}}
+											/>
+										</div>
+									</div>
+								</div>
+
+								<div className="flex items-center justify-between">
+									<label
+										htmlFor="filter-has-attachment"
+										className="text-sm font-medium cursor-pointer"
+									>
+										Com anexo
+									</label>
+									<Switch
+										id="filter-has-attachment"
+										checked={searchParams.get("hasAttachment") === "true"}
+										disabled={isPending}
+										onCheckedChange={(checked) => {
+											handleFilterChange(
+												"hasAttachment",
+												checked ? "true" : null,
+											);
+										}}
+									/>
+								</div>
 							</div>

 							<DrawerFooter>
--- a/src/features/transactions/constants.ts
+++ b/src/features/transactions/constants.ts
@@ -19,3 +19,8 @@ export const PAYMENT_METHODS = [
 	"Pré-Pago | VR/VA",
 	"Transferência bancária",
 ] as const;
+
+export const SETTLED_FILTER_VALUES = {
+	PAID: "pago",
+	UNPAID: "nao-pago",
+} as const;
--- a/src/features/transactions/export-types.ts
+++ b/src/features/transactions/export-types.ts
@@ -6,6 +6,8 @@ export type TransactionExportFilters = {
 	categoryFilter: string | null;
 	accountCardFilter: string | null;
 	searchFilter: string | null;
+	settledFilter: string | null;
+	attachmentFilter: string | null;
 };

 export type TransactionsExportContext = {
--- a/src/features/transactions/hooks/use-transaction-attachments.ts
+++ b/src/features/transactions/hooks/use-transaction-attachments.ts
@@ -15,6 +15,7 @@ export function useTransactionAttachments(transactionId: string) {
 				`/api/transactions/${transactionId}/attachments`,
 			),
 		enabled: Boolean(transactionId),
-		staleTime: 30_000,
+		staleTime: 50 * 60 * 1000, // 50 min — presigned URLs duram 1h
+		gcTime: 60 * 60 * 1000, // 1h — mantém cache enquanto URL é válida
 	});
 }
--- a/src/features/transactions/page-helpers.ts
+++ b/src/features/transactions/page-helpers.ts
@@ -1,15 +1,17 @@
 import type { SQL } from "drizzle-orm";
-import { and, eq, ilike, isNotNull, or } from "drizzle-orm";
+import { and, eq, ilike, isNotNull, or, sql } from "drizzle-orm";
 import {
 	cards,
 	type categories,
 	financialAccounts,
 	type payers,
+	transactionAttachments,
 	transactions,
 } from "@/db/schema";
 import type { SelectOption } from "@/features/transactions/components/types";
 import {
 	PAYMENT_METHODS,
+	SETTLED_FILTER_VALUES,
 	TRANSACTION_CONDITIONS,
 	TRANSACTION_TYPES,
 } from "@/features/transactions/constants";
@@ -19,6 +21,7 @@ import {
 	PAYER_ROLE_THIRD_PARTY,
 } from "@/shared/lib/payers/constants";
 import { toDateOnlyString } from "@/shared/utils/date";
+import { slugify } from "@/shared/utils/string";

 type PayerRow = typeof payers.$inferSelect;
 type AccountRow = typeof financialAccounts.$inferSelect;
@@ -40,6 +43,8 @@ export type TransactionSearchFilters = {
 	categoryFilter: string | null;
 	accountCardFilter: string | null;
 	searchFilter: string | null;
+	settledFilter: string | null;
+	attachmentFilter: string | null;
 };

 type BaseSluggedOption = {
@@ -127,6 +132,8 @@ export const extractTransactionSearchFilters = (
 	categoryFilter: getSingleParam(params, "category"),
 	accountCardFilter: getSingleParam(params, "accountCard"),
 	searchFilter: getSingleParam(params, "q"),
+	settledFilter: getSingleParam(params, "settled"),
+	attachmentFilter: getSingleParam(params, "hasAttachment"),
 });

 export const resolveTransactionPagination = (
@@ -152,15 +159,17 @@ export const resolveTransactionPagination = (
 const normalizeLabel = (value: string | null | undefined) =>
 	value?.trim().length ? value.trim() : "Sem descrição";

-const slugify = (value: string) => {
-	const base = value
-		.normalize("NFD")
-		.replace(/[\u0300-\u036f]/g, "")
-		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, "-")
-		.replace(/^-+|-+$/g, "");
-	return base || "item";
-};
+const typeSlugToValue = Object.fromEntries(
+	TRANSACTION_TYPES.map((t) => [slugify(t), t]),
+) as Record<string, (typeof TRANSACTION_TYPES)[number]>;
+
+const conditionSlugToValue = Object.fromEntries(
+	TRANSACTION_CONDITIONS.map((c) => [slugify(c), c]),
+) as Record<string, (typeof TRANSACTION_CONDITIONS)[number]>;
+
+const paymentSlugToValue = Object.fromEntries(
+	PAYMENT_METHODS.map((m) => [slugify(m), m]),
+) as Record<string, (typeof PAYMENT_METHODS)[number]>;

 const createSlugGenerator = () => {
 	const seen = new Map<string, number>();
@@ -338,16 +347,20 @@ export const buildTransactionWhere = ({
 		where.push(eq(transactions.accountId, accountId));
 	}

-	if (isValidTransaction(filters.transactionFilter)) {
-		where.push(eq(transactions.transactionType, filters.transactionFilter));
+	const typeValue = typeSlugToValue[filters.transactionFilter ?? ""] ?? null;
+	if (isValidTransaction(typeValue)) {
+		where.push(eq(transactions.transactionType, typeValue));
 	}

-	if (isValidCondition(filters.conditionFilter)) {
-		where.push(eq(transactions.condition, filters.conditionFilter));
+	const conditionValue =
+		conditionSlugToValue[filters.conditionFilter ?? ""] ?? null;
+	if (isValidCondition(conditionValue)) {
+		where.push(eq(transactions.condition, conditionValue));
 	}

-	if (isValidPaymentMethod(filters.paymentFilter)) {
-		where.push(eq(transactions.paymentMethod, filters.paymentFilter));
+	const paymentValue = paymentSlugToValue[filters.paymentFilter ?? ""] ?? null;
+	if (isValidPaymentMethod(paymentValue)) {
+		where.push(eq(transactions.paymentMethod, paymentValue));
 	}

 	if (!payerId && filters.payerFilter) {
@@ -377,6 +390,18 @@ export const buildTransactionWhere = ({
 		}
 	}

+	if (filters.settledFilter === SETTLED_FILTER_VALUES.PAID) {
+		where.push(eq(transactions.isSettled, true));
+	} else if (filters.settledFilter === SETTLED_FILTER_VALUES.UNPAID) {
+		where.push(eq(transactions.isSettled, false));
+	}
+
+	if (filters.attachmentFilter === "true") {
+		where.push(
+			sql`EXISTS (SELECT 1 FROM ${transactionAttachments} WHERE ${transactionAttachments.transactionId} = ${transactions.id})`,
+		);
+	}
+
 	const searchPattern = buildSearchPattern(filters.searchFilter);
 	if (searchPattern) {
 		where.push(