feat: aprimora detalhes de lancamentos

src/features/transactions/components/dialogs/transaction-details-dialog.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import Image from "next/image";
+import {
+	type ComponentType,
+	type CSSProperties,
+	useEffect,
+	useState,
+} from "react";
 import {
 	currencyFormatter,
 	formatCondition,
@@ -8,6 +14,11 @@ import {
 	formatPeriod,
 } from "@/features/transactions/formatting-helpers";
 import { TransactionTypeBadge } from "@/shared/components/transaction-type-badge";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@/shared/components/ui/avatar";
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import {
@@ -20,8 +31,11 @@ import {
 	DialogTitle,
 } from "@/shared/components/ui/dialog";
 import { Separator } from "@/shared/components/ui/separator";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import { getCategoryColorFromName } from "@/shared/utils/category-colors";
 import { parseLocalDateString } from "@/shared/utils/date";
-import { getPaymentMethodIcon } from "@/shared/utils/icons";
+import { getIconComponent, getPaymentMethodIcon } from "@/shared/utils/icons";
 import { AttachmentSection } from "../attachments/attachment-section";
 import { InstallmentTimeline } from "../shared/installment-timeline";
 import type { TransactionItem } from "../types";
@@ -64,9 +78,6 @@ export function TransactionDetailsDialog({
 		: 0;
 
 	const isBoleto = transaction.paymentMethod === "Boleto";
-	const shortTransactionId = `…${
-		transaction.id.split("-").at(-1) ?? transaction.id
-	}`;
 
 	const handleEdit = () => {
 		onOpenChange(false);
@@ -89,21 +100,21 @@ export function TransactionDetailsDialog({
 							<div className="flex items-start justify-between gap-3">
 								<div className="min-w-0">
 									<p className="text-xs uppercase tracking-wide text-muted-foreground">
-										Resumo
+										Total
 									</p>
 									<p className="mt-1 text-2xl font-semibold">
 										{currencyFormatter.format(valorTotal)}
 									</p>
 								</div>
 								<Badge
-									variant="secondary"
+									variant={transaction.isSettled ? "secondary" : "info"}
 									className={
 										transaction.isSettled
 											? "text-success bg-success/10"
-											: "text-muted-foreground"
+											: undefined
 									}
 								>
-									{transaction.isSettled ? "Pago" : "Pendente"}
+									{transaction.isSettled ? "Pago" : "Em aberto"}
 								</Badge>
 							</div>
 							<div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
@@ -125,7 +136,7 @@ export function TransactionDetailsDialog({
 							<ul className="min-w-0 grid gap-2 rounded-lg border p-3">
 								<DetailRow
 									label="ID"
-									value={shortTransactionId}
+									value={transaction.id}
 									valueClassName="font-mono"
 								/>
 
@@ -144,19 +155,94 @@ export function TransactionDetailsDialog({
 									</span>
 								</li>
 
-								<DetailRow
+								<li className="min-w-0 flex items-center justify-between gap-3">
-									label={transaction.cartaoName ? "Cartão" : "Conta"}
+									<span className="text-muted-foreground">
-									value={transaction.cartaoName ?? transaction.contaName ?? "—"}
+										{transaction.cartaoName ? "Cartão" : "Conta"}
+									</span>
+									{(() => {
+										const accountLabel =
+											transaction.cartaoName ?? transaction.contaName;
+										if (!accountLabel) {
+											return <span className="min-w-0 truncate">—</span>;
+										}
+										const logoSrc = resolveLogoSrc(
+											transaction.cartaoLogo ?? transaction.contaLogo,
+										);
+										return (
+											<span className="inline-flex min-w-0 items-center gap-2">
+												{logoSrc && (
+													<Image
+														src={logoSrc}
+														alt={`Logo de ${accountLabel}`}
+														width={20}
+														height={20}
+														className="shrink-0 rounded-full"
 													/>
+												)}
+												<span className="min-w-0 truncate">{accountLabel}</span>
+											</span>
+										);
+									})()}
+								</li>
 
-								<DetailRow
+								<li className="min-w-0 flex items-center justify-between gap-3">
-									label="Categoria"
+									<span className="text-muted-foreground">Categoria</span>
-									value={transaction.categoriaName ?? "—"}
+									{(() => {
+										if (!transaction.categoriaName) {
+											return <span className="min-w-0 truncate">—</span>;
+										}
+										const IconComponent = transaction.categoriaIcon
+											? (getIconComponent(
+													transaction.categoriaIcon,
+												) as ComponentType<{
+													className?: string;
+													style?: CSSProperties;
+												}> | null)
+											: null;
+										const color = getCategoryColorFromName(
+											transaction.categoriaName,
+										);
+										return (
+											<span className="inline-flex min-w-0 items-center gap-1.5">
+												{IconComponent ? (
+													<IconComponent
+														className="size-3.5 shrink-0"
+														style={{ color }}
 													/>
+												) : null}
+												<span className="min-w-0 truncate">
+													{transaction.categoriaName}
+												</span>
+											</span>
+										);
+									})()}
+								</li>
 
-								<li className="flex items-center justify-between">
+								<li className="min-w-0 flex items-center justify-between gap-3">
 									<span className="text-muted-foreground">Responsável</span>
-									<span>{transaction.pagadorName}</span>
+									{(() => {
+										const label = transaction.pagadorName?.trim() || "—";
+										if (label === "—") {
+											return <span className="min-w-0 truncate">—</span>;
+										}
+										const displayName = label.split(/\s+/)[0] ?? label;
+										const avatarSrc = getAvatarSrc(transaction.pagadorAvatar);
+										const initial = displayName.charAt(0).toUpperCase() || "?";
+										return (
+											<span className="inline-flex min-w-0 items-center gap-2">
+												<Avatar className="size-5">
+													<AvatarImage
+														src={avatarSrc}
+														alt={`Avatar de ${label}`}
+													/>
+													<AvatarFallback className="text-[10px] font-medium uppercase">
+														{initial}
+													</AvatarFallback>
+												</Avatar>
+												<span className="min-w-0 truncate">{label}</span>
+											</span>
+										);
+									})()}
 								</li>
 
 								{isBoleto && transaction.dueDate && (

src/features/transactions/components/shared/installment-timeline.tsx

@@ -1,4 +1,3 @@
-import { RiArrowDownFill, RiCheckLine } from "@remixicon/react";
 import {
 	calculateLastInstallmentDate,
 	formatCurrentInstallment,
@@ -25,68 +24,52 @@ export function InstallmentTimeline({
 		totalInstallments,
 	);
 
-	return (
+	const progress =
-		<div className="relative flex items-center justify-between px-4 py-4">
+		totalInstallments > 1
-			{/* Linha de conexão */}
+			? ((currentInstallment - 1) / (totalInstallments - 1)) * 100
-			<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
+			: 100;
-				<div
-					className="h-full bg-success transition-all duration-300"
-					style={{
-						width: `${
-							((currentInstallment - 1) / (totalInstallments - 1)) * 100
-						}%`,
-					}}
-				/>
-			</div>
 
-			{/* Ponto 1: Data de Compra */}
+	const remaining = totalInstallments - currentInstallment;
-			<div className="relative z-10 flex flex-col items-center gap-2">
+	const isLast = currentInstallment === totalInstallments;
-				<div className="flex size-4 items-center justify-center rounded-full border-2 border-success bg-success shadow-sm">
+
-					<RiCheckLine className="size-5 text-white" />
+	return (
-				</div>
+		<div className="flex flex-col gap-3 py-1">
-				<div className="flex flex-col items-center">
+			<div className="flex items-start justify-between text-xs">
-					<span className="text-xs font-medium text-foreground">
+				<div className="flex flex-col gap-0.5">
-						Data de Compra
+					<span className="text-muted-foreground">Compra</span>
-					</span>
+					<span className="font-medium text-foreground">
-					<span className="text-xs text-muted-foreground">
 						{formatPurchaseDate(purchaseDate)}
 					</span>
 				</div>
-			</div>
+				<div className="flex flex-col items-end gap-0.5">
-
+					<span className="text-muted-foreground">Quitação estimada</span>
-			{/* Ponto 2: Parcela Atual */}
+					<span className="font-medium text-foreground">
-			<div className="relative z-10 flex flex-col items-center gap-2">
-				<div
-					className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-warning bg-warning`}
-				>
-					<RiArrowDownFill className="size-5 text-white" />
-				</div>
-				<div className="flex flex-col items-center">
-					<span className="text-xs font-medium text-foreground">
-						Parcela Atual
-					</span>
-					<span className="text-xs text-muted-foreground">
-						{formatCurrentInstallment(currentInstallment, totalInstallments)}
-					</span>
-				</div>
-			</div>
-
-			{/* Ponto 3: Última Parcela */}
-			<div className="relative z-10 flex flex-col items-center gap-2">
-				<div
-					className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-success bg-success`}
-				>
-					<RiCheckLine className="size-5 text-white" />
-				</div>
-				<div className="flex flex-col items-center">
-					<span className="text-xs font-medium text-foreground">
-						Última Parcela
-					</span>
-					<span className="text-xs text-muted-foreground">
 						{formatLastInstallmentDate(lastInstallmentDate)}
 					</span>
 				</div>
 			</div>
+
+			<div className="relative h-1.5 rounded-full bg-border">
+				<div
+					className="absolute left-0 top-0 h-full rounded-full bg-success transition-all duration-300"
+					style={{ width: `${progress}%` }}
+				/>
+				<div
+					className="absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-success bg-background shadow-sm transition-all duration-300"
+					style={{ left: `clamp(6px, ${progress}%, calc(100% - 6px))` }}
+				/>
+			</div>
+
+			<div className="flex items-center justify-between text-xs">
+				<span className="font-semibold text-foreground">
+					{formatCurrentInstallment(currentInstallment, totalInstallments)}
+				</span>
+				<span className="text-muted-foreground">
+					{isLast
+						? "Última parcela"
+						: `${remaining} restante${remaining > 1 ? "s" : ""}`}
+				</span>
+			</div>
 		</div>
 	);
 }

src/features/transactions/components/table/transactions-columns.tsx

@@ -12,13 +12,17 @@ import {
 	RiHistoryLine,
 	RiMoreFill,
 	RiPencilLine,
-	RiRefund2Line,
+	RiRefundLine,
 	RiTimeLine,
 } from "@remixicon/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import Image from "next/image";
 import Link from "next/link";
 import { DEFAULT_LANCAMENTOS_COLUMN_ORDER } from "@/features/transactions/column-order";
+import {
+	CREDIT_CARD_PAYMENT_METHOD,
+	SETTLEABLE_PAYMENT_METHODS,
+} from "@/features/transactions/constants";
 import {
 	CategoryIconBadge,
 	EstablishmentLogo,
@@ -195,7 +199,7 @@ function buildColumns({
 
 				const isBoleto = paymentMethod === "Boleto" && dueDate;
 				const dueDateLabel =
-					isBoleto && dueDate ? `venc. ${formatDate(dueDate)}` : null;
+					isBoleto && dueDate ? `Venc. ${formatDate(dueDate)}` : null;
 				const hasNote = Boolean(note?.trim().length);
 				const isLastInstallment =
 					currentInstallment === installmentCount &&
@@ -499,20 +503,8 @@ function buildColumns({
 				return (
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<Link
+							<Link href={href} className="hover:underline">
-								href={href}
+								{content}
-								className="inline-flex items-center gap-2 hover:underline"
-							>
-								{logoSrc && (
-									<Image
-										src={logoSrc}
-										alt={`Logo de ${label}`}
-										width={30}
-										height={30}
-										className="rounded-full"
-									/>
-								)}
-								<span className="truncate">{label}</span>
 							</Link>
 						</TooltipTrigger>
 						<TooltipContent side="top">
@@ -555,27 +547,14 @@ function buildColumns({
 				<div className="flex items-center gap-2">
 					{(() => {
 						const paymentMethod = row.original.paymentMethod;
-						const showSettlementButton = [
+						const isCreditCard = paymentMethod === CREDIT_CARD_PAYMENT_METHOD;
-							"Pix",
+						const canToggleSettlement = (
-							"Boleto",
+							SETTLEABLE_PAYMENT_METHODS as readonly string[]
-							"Cartão de crédito",
+						).includes(paymentMethod);
-							"Dinheiro",
-							"Cartão de débito",
-							"Transferência bancária",
-							"Pré-Pago | VR/VA",
-						].includes(paymentMethod);
 
-						if (!showSettlementButton) return null;
+						if (!canToggleSettlement && !isCreditCard) return null;
 
-						const canToggleSettlement =
+						if (isCreditCard) {
-							paymentMethod === "Pix" ||
-							paymentMethod === "Boleto" ||
-							paymentMethod === "Dinheiro" ||
-							paymentMethod === "Cartão de débito" ||
-							paymentMethod === "Transferência bancária" ||
-							paymentMethod === "Pré-Pago | VR/VA";
-
-						if (!canToggleSettlement) {
 							const invoicePaid = Boolean(row.original.isSettled);
 							return (
 								<Tooltip>
@@ -703,7 +682,7 @@ function buildColumns({
 
 								return (
 									<DropdownMenuItem onSelect={() => handleRefund(item)}>
-										<RiRefund2Line className="size-4" />
+										<RiRefundLine className="size-4" />
 										Reembolso
 									</DropdownMenuItem>
 								);
@@ -719,7 +698,6 @@ function buildColumns({
 								</DropdownMenuItem>
 							)}
 
-							{/* Opções de Antecipação */}
 							{row.original.userId === currentUserId &&
 								row.original.condition === "Parcelado" &&
 								row.original.seriesId && (

src/features/transactions/constants.ts

@@ -20,6 +20,12 @@ export const PAYMENT_METHODS = [
 	"Transferência bancária",
 ] as const;
 
+export const CREDIT_CARD_PAYMENT_METHOD = "Cartão de crédito" as const;
+
+export const SETTLEABLE_PAYMENT_METHODS = PAYMENT_METHODS.filter(
+	(method) => method !== CREDIT_CARD_PAYMENT_METHOD,
+);
+
 export const SETTLED_FILTER_VALUES = {
 	PAID: "pago",
 	UNPAID: "nao-pago",