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
-									label={transaction.cartaoName ? "Cartão" : "Conta"}
-									value={transaction.cartaoName ?? transaction.contaName ?? "—"}
-								/>
+								<li className="min-w-0 flex items-center justify-between gap-3">
+									<span className="text-muted-foreground">
+										{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
-									label="Categoria"
-									value={transaction.categoriaName ?? "—"}
-								/>
+								<li className="min-w-0 flex items-center justify-between gap-3">
+									<span className="text-muted-foreground">Categoria</span>
+									{(() => {
+										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 && (