From 25d44d6b273908ecb2e37b20e86a376eb0828921 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Sun, 16 Nov 2025 17:35:55 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionar=20suporte=20para=20exibir=20l?=
 =?UTF-8?q?ogo=20do=20cart=C3=A3o=20nas=20parcelas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Inclui a propriedade `cartaoLogo` no tipo `InstallmentGroup` para
  armazenar o logo do cartão.
- Atualiza a função `fetchInstallmentAnalysis` para buscar e incluir
  o logo do cartão nos dados retornados.
- Modifica o componente `InstallmentGroupCard` para renderizar o logo
  do cartão, se disponível, ao lado do nome do cartão.
---
 .../installment-group-card.tsx                | 45 +++++++++++--------
 .../expenses/installment-analysis.ts          |  3 ++
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/components/dashboard/installment-analysis/installment-group-card.tsx b/components/dashboard/installment-analysis/installment-group-card.tsx
index a4889b1..5d162cd 100644
--- a/components/dashboard/installment-analysis/installment-group-card.tsx
+++ b/components/dashboard/installment-analysis/installment-group-card.tsx
@@ -6,7 +6,11 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Progress } from "@/components/ui/progress";
 import { cn } from "@/lib/utils/ui";
-import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/react";
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiCheckboxCircleFill,
+} from "@remixicon/react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useState } from "react";
@@ -66,15 +70,20 @@ export function InstallmentGroupCard({
             <div className="flex items-start justify-between gap-3">
               <div className="min-w-0 flex-1">
                 <p className="text-sm font-bold">{group.name}</p>
-                <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-                  {group.cartaoName && (
-                    <>
-                      <span>{group.cartaoName}</span>
-                      <span>•</span>
-                    </>
-                  )}
-                  <span>{group.paymentMethod}</span>
-                </div>
+                {group.cartaoName && (
+                  <div className="mt-0.5 flex items-center gap-1">
+                    {group.cartaoLogo && (
+                      <img
+                        src={`/logos/${group.cartaoLogo}`}
+                        alt={group.cartaoName}
+                        className="h-5 w-auto object-contain rounded"
+                      />
+                    )}
+                    <span className="text-xs text-muted-foreground">
+                      {group.cartaoName}
+                    </span>
+                  </div>
+                )}
               </div>
 
               <div className="flex shrink-0 flex-col items-end gap-0.5">
@@ -101,7 +110,7 @@ export function InstallmentGroupCard({
                   {unpaidCount} {unpaidCount === 1 ? "pendente" : "pendentes"}
                 </span>
               </div>
-              <Progress value={progress} className="h-1.5" />
+              <Progress value={progress} className="h-2" />
             </div>
 
             {/* Badges de status */}
@@ -117,7 +126,7 @@ export function InstallmentGroupCard({
             <button
               type="button"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="mt-3 flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+              className="mt-2 flex items-center gap-1 text-xs font-medium text-primary hover:underline"
             >
               {isExpanded ? (
                 <>
@@ -136,7 +145,7 @@ export function InstallmentGroupCard({
 
         {/* Lista de parcelas expandida */}
         {isExpanded && (
-          <div className="ml-9 mt-2 flex flex-col gap-2 border-l-2 border-muted pl-4">
+          <div className="px-8 mt-2 flex flex-col gap-2">
             {group.pendingInstallments.map((installment) => {
               const isSelected = selectedInstallments.has(installment.id);
               const isPaid = installment.isSettled;
@@ -153,7 +162,7 @@ export function InstallmentGroupCard({
                     "flex items-center gap-3 rounded-md border p-2 transition-colors",
                     isSelected && !isPaid && "border-primary/50 bg-primary/5",
                     isPaid &&
-                      "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+                      "border-green-400 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
                   )}
                 >
                   <Checkbox
@@ -169,7 +178,7 @@ export function InstallmentGroupCard({
                     <div className="min-w-0">
                       <p
                         className={cn(
-                          "text-sm font-medium",
+                          "text-xs font-medium",
                           isPaid &&
                             "text-green-700 dark:text-green-400 line-through decoration-green-600/50"
                         )}
@@ -179,15 +188,15 @@ export function InstallmentGroupCard({
                         {isPaid && (
                           <Badge
                             variant="outline"
-                            className="ml-2 text-xs border-green-700 text-green-700 dark:text-green-400"
+                            className="ml-1 text-xs border-none border-green-700 text-green-700 dark:text-green-400"
                           >
-                            Paga
+                            <RiCheckboxCircleFill /> Pago
                           </Badge>
                         )}
                       </p>
                       <p
                         className={cn(
-                          "text-xs",
+                          "text-xs mt-1",
                           isPaid
                             ? "text-green-700 dark:text-green-500"
                             : "text-muted-foreground"
diff --git a/lib/dashboard/expenses/installment-analysis.ts b/lib/dashboard/expenses/installment-analysis.ts
index d2906e7..94d78b4 100644
--- a/lib/dashboard/expenses/installment-analysis.ts
+++ b/lib/dashboard/expenses/installment-analysis.ts
@@ -42,6 +42,7 @@ export type InstallmentGroup = {
   cartaoId: string | null;
   cartaoName: string | null;
   cartaoDueDay: string | null;
+  cartaoLogo: string | null;
   totalInstallments: number;
   paidInstallments: number;
   pendingInstallments: InstallmentDetail[];
@@ -75,6 +76,7 @@ export async function fetchInstallmentAnalysis(
       cartaoId: lancamentos.cartaoId,
       cartaoName: cartoes.name,
       cartaoDueDay: cartoes.dueDay,
+      cartaoLogo: cartoes.logo,
     })
     .from(lancamentos)
     .leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
@@ -132,6 +134,7 @@ export async function fetchInstallmentAnalysis(
         cartaoId: row.cartaoId,
         cartaoName: row.cartaoName,
         cartaoDueDay: row.cartaoDueDay,
+        cartaoLogo: row.cartaoLogo,
         totalInstallments: row.installmentCount ?? 0,
         paidInstallments: 0,
         pendingInstallments: [installmentDetail],