refactor: adicionar logos de cartões e corrigir contagem de parcelas pendentes

- Exibir logo do cartão ao lado do nome da parcela na análise
- Corrigir contagem de "X pendentes" para excluir parcelas já pagas
- Adicionar cartaoLogo à query e tipo InstallmentGroup

components/dashboard/installment-analysis/installment-group-card.tsx

@@ -6,9 +6,10 @@ 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, RiCreditCardLine } from "@remixicon/react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
+import Image from "next/image";
 import { useState } from "react";
 import type { InstallmentGroup } from "./types";
 
@@ -31,6 +32,8 @@ export function InstallmentGroupCard({
     (i) => !i.isSettled
   );
 
+  const unpaidCount = unpaidInstallments.length;
+
   const isFullySelected =
     selectedInstallments.size === unpaidInstallments.length &&
     unpaidInstallments.length > 0;
@@ -63,7 +66,22 @@ export function InstallmentGroupCard({
           <div className="min-w-0 flex-1">
             <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="flex items-center gap-2">
+                  {group.cartaoLogo ? (
+                    <Image
+                      src={group.cartaoLogo}
+                      alt={group.cartaoName || "Cartão"}
+                      width={24}
+                      height={24}
+                      className="size-6 shrink-0 rounded"
+                    />
+                  ) : (
+                    <div className="flex size-6 shrink-0 items-center justify-center rounded bg-muted">
+                      <RiCreditCardLine className="size-4 text-muted-foreground" />
+                    </div>
+                  )}
+                  <p className="text-sm font-bold">{group.name}</p>
+                </div>
                 <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
                   {group.cartaoName && (
                     <>
@@ -96,10 +114,8 @@ export function InstallmentGroupCard({
                   {group.paidInstallments} de {group.totalInstallments} pagas
                 </span>
                 <span>
-                  {group.pendingInstallments.length}{" "}
-                  {group.pendingInstallments.length === 1
-                    ? "pendente"
-                    : "pendentes"}
+                  {unpaidCount}{" "}
+                  {unpaidCount === 1 ? "pendente" : "pendentes"}
                 </span>
               </div>
               <Progress value={progress} className="h-1.5" />
@@ -109,8 +125,7 @@ export function InstallmentGroupCard({
             <div className="mt-2 flex flex-wrap gap-2">
               {isPartiallySelected && (
                 <Badge variant="secondary" className="text-xs">
-                  {selectedInstallments.size} de{" "}
-                  {group.pendingInstallments.length} selecionadas
+                  {selectedInstallments.size} de {unpaidCount} selecionadas
                 </Badge>
               )}
             </div>