refactor: ajustar feature de análise de parcelas

Melhorias na funcionalidade de análise de parcelas: - Cálculo correto de vencimento baseado no dia de vencimento do cartão - Identificação de parcelas pagas com indicador visual - Parcelas pagas não podem ser selecionadas - Remoção completa da funcionalidade de faturas (apenas parcelas) - Layout mais compacto com espaçamentos reduzidos - Botão "Análise" discreto ao lado do título do widget - Card de resumo simplificado - Tamanhos de fonte e ícones reduzidos - Progress bar mais fina (h-1.5)
2025-11-16 16:15:43 +00:00
parent 115cb8836c
commit 4411d992fa
8 changed files with 134 additions and 315 deletions
--- a/components/dashboard/installment-analysis/analysis-summary-panel.tsx
+++ b/components/dashboard/installment-analysis/analysis-summary-panel.tsx
@@ -2,25 +2,19 @@

 import MoneyValues from "@/components/money-values";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
 import { RiPieChartLine } from "@remixicon/react";

 type AnalysisSummaryPanelProps = {
  totalInstallments: number;
-  totalInvoices: number;
  grandTotal: number;
  selectedCount: number;
 };

 export function AnalysisSummaryPanel({
  totalInstallments,
-  totalInvoices,
  grandTotal,
  selectedCount,
 }: AnalysisSummaryPanelProps) {
-  const hasInstallments = totalInstallments > 0;
-  const hasInvoices = totalInvoices > 0;
-
  return (
    <Card className="border-primary/20">
      <CardHeader className="border-b">
@@ -29,9 +23,9 @@ export function AnalysisSummaryPanel({
          <CardTitle className="text-base">Resumo</CardTitle>
        </div>
      </CardHeader>
-      <CardContent className="flex flex-col gap-4 pt-6">
+      <CardContent className="flex flex-col gap-3 pt-4">
        {/* Total geral */}
-        <div className="flex flex-col items-center gap-2 rounded-lg bg-primary/10 p-4">
+        <div className="flex flex-col items-center gap-2 rounded-lg bg-primary/10 p-3">
          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            Total Selecionado
          </p>
@@ -40,67 +34,15 @@ export function AnalysisSummaryPanel({
            className="text-2xl font-bold text-primary"
          />
          <p className="text-xs text-muted-foreground">
-            {selectedCount} {selectedCount === 1 ? "item" : "itens"}
+            {selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}
          </p>
        </div>

-        <Separator />
-
-        {/* Breakdown */}
-        <div className="flex flex-col gap-3">
-          <p className="text-sm font-medium">Detalhamento</p>
-
-          {/* Parcelas */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="size-2 rounded-full bg-blue-500" />
-              <span className="text-sm text-muted-foreground">Parcelas</span>
-            </div>
-            <MoneyValues amount={totalInstallments} className="text-sm" />
-          </div>
-
-          {/* Faturas */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="size-2 rounded-full bg-purple-500" />
-              <span className="text-sm text-muted-foreground">Faturas</span>
-            </div>
-            <MoneyValues amount={totalInvoices} className="text-sm" />
-          </div>
-        </div>
-
-        <Separator />
-
-        {/* Percentuais */}
-        {grandTotal > 0 && (
-          <div className="flex flex-col gap-2">
-            <p className="text-sm font-medium">Distribuição</p>
-
-            {hasInstallments && (
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-muted-foreground">Parcelas</span>
-                <span className="font-medium">
-                  {((totalInstallments / grandTotal) * 100).toFixed(1)}%
-                </span>
-              </div>
-            )}
-
-            {hasInvoices && (
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-muted-foreground">Faturas</span>
-                <span className="font-medium">
-                  {((totalInvoices / grandTotal) * 100).toFixed(1)}%
-                </span>
-              </div>
-            )}
-          </div>
-        )}
-
        {/* Mensagem quando nada está selecionado */}
        {selectedCount === 0 && (
          <div className="rounded-lg bg-muted/50 p-3 text-center">
            <p className="text-xs text-muted-foreground">
-              Selecione parcelas ou faturas para ver o resumo
+              Selecione parcelas para ver o resumo
            </p>
          </div>
        )}
--- a/components/dashboard/installment-analysis/installment-analysis-page.tsx
+++ b/components/dashboard/installment-analysis/installment-analysis-page.tsx
@@ -7,7 +7,6 @@ import { Separator } from "@/components/ui/separator";
 import { useMemo, useState } from "react";
 import type { InstallmentAnalysisData } from "./types";
 import { InstallmentGroupCard } from "./installment-group-card";
-import { PendingInvoiceCard } from "./pending-invoice-card";
 import { AnalysisSummaryPanel } from "./analysis-summary-panel";
 import {
  RiCalculatorLine,
@@ -27,52 +26,38 @@ export function InstallmentAnalysisPage({
    Map<string, Set<string>>
  >(new Map());

-  // Estado para faturas selecionadas: Set<invoiceKey (cartaoId:period)>
-  const [selectedInvoices, setSelectedInvoices] = useState<Set<string>>(
-    new Set()
-  );
-
-  // Calcular se está tudo selecionado
+  // Calcular se está tudo selecionado (apenas parcelas não pagas)
  const isAllSelected = useMemo(() => {
    const allInstallmentsSelected = data.installmentGroups.every((group) => {
      const groupSelection = selectedInstallments.get(group.seriesId);
-      if (!groupSelection) return false;
-      return (
-        groupSelection.size === group.pendingInstallments.length &&
-        group.pendingInstallments.length > 0
+      const unpaidInstallments = group.pendingInstallments.filter(
+        (i) => !i.isSettled
      );
+      if (!groupSelection || unpaidInstallments.length === 0) return false;
+      return groupSelection.size === unpaidInstallments.length;
    });

-    const allInvoicesSelected =
-      data.pendingInvoices.length === selectedInvoices.size;
-
-    return (
-      allInstallmentsSelected &&
-      allInvoicesSelected &&
-      (data.installmentGroups.length > 0 || data.pendingInvoices.length > 0)
-    );
-  }, [selectedInstallments, selectedInvoices, data]);
+    return allInstallmentsSelected && data.installmentGroups.length > 0;
+  }, [selectedInstallments, data]);

  // Função para selecionar/desselecionar tudo
  const toggleSelectAll = () => {
    if (isAllSelected) {
      // Desmarcar tudo
      setSelectedInstallments(new Map());
-      setSelectedInvoices(new Set());
    } else {
-      // Marcar tudo
+      // Marcar tudo (exceto parcelas já pagas)
      const newInstallments = new Map<string, Set<string>>();
      data.installmentGroups.forEach((group) => {
-        const ids = new Set(group.pendingInstallments.map((i) => i.id));
-        newInstallments.set(group.seriesId, ids);
+        const unpaidIds = group.pendingInstallments
+          .filter((i) => !i.isSettled)
+          .map((i) => i.id);
+        if (unpaidIds.length > 0) {
+          newInstallments.set(group.seriesId, new Set(unpaidIds));
+        }
      });

-      const newInvoices = new Set(
-        data.pendingInvoices.map((inv) => `${inv.cartaoId}:${inv.period}`)
-      );
-
      setSelectedInstallments(newInstallments);
-      setSelectedInvoices(newInvoices);
    }
  };

@@ -112,92 +97,64 @@ export function InstallmentAnalysisPage({
    setSelectedInstallments(newMap);
  };

-  // Função para selecionar/desselecionar fatura
-  const toggleInvoiceSelection = (invoiceKey: string) => {
-    const newSet = new Set(selectedInvoices);
-    if (newSet.has(invoiceKey)) {
-      newSet.delete(invoiceKey);
-    } else {
-      newSet.add(invoiceKey);
-    }
-    setSelectedInvoices(newSet);
-  };
-
  // Calcular totais
-  const { totalInstallments, totalInvoices, grandTotal, selectedCount } =
-    useMemo(() => {
-      let installmentsSum = 0;
-      let installmentsCount = 0;
+  const { totalInstallments, grandTotal, selectedCount } = useMemo(() => {
+    let installmentsSum = 0;
+    let installmentsCount = 0;

-      selectedInstallments.forEach((installmentIds, seriesId) => {
-        const group = data.installmentGroups.find(
-          (g) => g.seriesId === seriesId
-        );
-        if (group) {
-          installmentIds.forEach((id) => {
-            const installment = group.pendingInstallments.find(
-              (i) => i.id === id
-            );
-            if (installment) {
-              installmentsSum += installment.amount;
-              installmentsCount++;
-            }
-          });
-        }
-      });
+    selectedInstallments.forEach((installmentIds, seriesId) => {
+      const group = data.installmentGroups.find(
+        (g) => g.seriesId === seriesId
+      );
+      if (group) {
+        installmentIds.forEach((id) => {
+          const installment = group.pendingInstallments.find(
+            (i) => i.id === id
+          );
+          if (installment && !installment.isSettled) {
+            installmentsSum += installment.amount;
+            installmentsCount++;
+          }
+        });
+      }
+    });

-      let invoicesSum = 0;
-      let invoicesCount = 0;
+    return {
+      totalInstallments: installmentsSum,
+      grandTotal: installmentsSum,
+      selectedCount: installmentsCount,
+    };
+  }, [selectedInstallments, data]);

-      selectedInvoices.forEach((key) => {
-        const [cartaoId, period] = key.split(":");
-        const invoice = data.pendingInvoices.find(
-          (inv) => inv.cartaoId === cartaoId && inv.period === period
-        );
-        if (invoice) {
-          invoicesSum += invoice.totalAmount;
-          invoicesCount++;
-        }
-      });
-
-      return {
-        totalInstallments: installmentsSum,
-        totalInvoices: invoicesSum,
-        grandTotal: installmentsSum + invoicesSum,
-        selectedCount: installmentsCount + invoicesCount,
-      };
-    }, [selectedInstallments, selectedInvoices, data]);
-
-  const hasNoData =
-    data.installmentGroups.length === 0 && data.pendingInvoices.length === 0;
+  const hasNoData = data.installmentGroups.length === 0;

  return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
      {/* Header */}
      <div className="flex items-center gap-3">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-          <RiCalculatorLine className="size-5 text-primary" />
+        <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10">
+          <RiCalculatorLine className="size-4 text-primary" />
        </div>
        <div>
-          <h1 className="text-2xl font-bold">Análise de Parcelas e Faturas</h1>
-          <p className="text-sm text-muted-foreground">
-            Veja quanto você gastaria pagando tudo que está em aberto
+          <h1 className="text-xl font-bold">Análise de Parcelas</h1>
+          <p className="text-xs text-muted-foreground">
+            Quanto você gastaria pagando tudo que está em aberto
          </p>
        </div>
      </div>

      {/* Card de resumo principal */}
      <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10">
-        <CardContent className="flex flex-col items-center justify-center gap-3 py-8">
-          <p className="text-sm font-medium text-muted-foreground">
+        <CardContent className="flex flex-col items-center justify-center gap-2 py-5">
+          <p className="text-xs font-medium text-muted-foreground">
            Se você pagar tudo que está selecionado:
          </p>
          <MoneyValues
            amount={grandTotal}
-            className="text-4xl font-bold text-primary"
+            className="text-3xl font-bold text-primary"
          />
-          <p className="text-sm text-muted-foreground">
-            {selectedCount} {selectedCount === 1 ? "item" : "itens"} selecionados
+          <p className="text-xs text-muted-foreground">
+            {selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"} selecionadas
          </p>
        </CardContent>
      </Card>
@@ -221,7 +178,7 @@ export function InstallmentAnalysisPage({
        </div>
      )}

-      <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
+      <div className="grid gap-4 lg:grid-cols-[1fr_280px]">
        {/* Conteúdo principal */}
        <div className="flex flex-col gap-6">
          {/* Seção de Lançamentos Parcelados */}
@@ -244,7 +201,9 @@ export function InstallmentAnalysisPage({
                    onToggleGroup={() =>
                      toggleGroupSelection(
                        group.seriesId,
-                        group.pendingInstallments.map((i) => i.id)
+                        group.pendingInstallments
+                          .filter((i) => !i.isSettled)
+                          .map((i) => i.id)
                      )
                    }
                    onToggleInstallment={(installmentId) =>
@@ -256,38 +215,13 @@ export function InstallmentAnalysisPage({
            </div>
          )}

-          {/* Seção de Faturas Pendentes */}
-          {data.pendingInvoices.length > 0 && (
-            <div className="flex flex-col gap-4">
-              <div className="flex items-center gap-2">
-                <Separator className="flex-1" />
-                <h2 className="text-lg font-semibold">Faturas Pendentes</h2>
-                <Separator className="flex-1" />
-              </div>
-
-              <div className="flex flex-col gap-3">
-                {data.pendingInvoices.map((invoice) => {
-                  const invoiceKey = `${invoice.cartaoId}:${invoice.period}`;
-                  return (
-                    <PendingInvoiceCard
-                      key={invoiceKey}
-                      invoice={invoice}
-                      isSelected={selectedInvoices.has(invoiceKey)}
-                      onToggle={() => toggleInvoiceSelection(invoiceKey)}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
          {/* Estado vazio */}
          {hasNoData && (
            <Card>
              <CardContent className="flex flex-col items-center justify-center gap-3 py-12">
                <RiCalculatorLine className="size-12 text-muted-foreground/50" />
                <div className="text-center">
-                  <p className="font-medium">Nenhuma parcela ou fatura pendente</p>
+                  <p className="font-medium">Nenhuma parcela pendente</p>
                  <p className="text-sm text-muted-foreground">
                    Você está em dia com seus pagamentos!
                  </p>
@@ -302,7 +236,6 @@ export function InstallmentAnalysisPage({
          <div className="lg:sticky lg:top-4 lg:self-start">
            <AnalysisSummaryPanel
              totalInstallments={totalInstallments}
-              totalInvoices={totalInvoices}
              grandTotal={grandTotal}
              selectedCount={selectedCount}
            />
--- a/components/dashboard/installment-analysis/installment-group-card.tsx
+++ b/components/dashboard/installment-analysis/installment-group-card.tsx
@@ -27,13 +27,17 @@ export function InstallmentGroupCard({
 }: InstallmentGroupCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);

+  const unpaidInstallments = group.pendingInstallments.filter(
+    (i) => !i.isSettled
+  );
+
  const isFullySelected =
-    selectedInstallments.size === group.pendingInstallments.length &&
-    group.pendingInstallments.length > 0;
+    selectedInstallments.size === unpaidInstallments.length &&
+    unpaidInstallments.length > 0;

  const isPartiallySelected =
    selectedInstallments.size > 0 &&
-    selectedInstallments.size < group.pendingInstallments.length;
+    selectedInstallments.size < unpaidInstallments.length;

  const progress =
    group.totalInstallments > 0
@@ -48,7 +52,7 @@ export function InstallmentGroupCard({

  return (
    <Card className={cn(isFullySelected && "border-primary/50")}>
-      <CardContent className="flex flex-col gap-3 py-4">
+      <CardContent className="flex flex-col gap-2 py-3">
        {/* Header do card */}
        <div className="flex items-start gap-3">
          <Checkbox
@@ -61,8 +65,8 @@ 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="font-medium">{group.name}</p>
-                <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                <p className="text-sm font-medium">{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>
@@ -73,7 +77,7 @@ export function InstallmentGroupCard({
                </div>
              </div>

-              <div className="flex shrink-0 flex-col items-end gap-1">
+              <div className="flex shrink-0 flex-col items-end gap-0.5">
                <MoneyValues
                  amount={group.totalPendingAmount}
                  className="text-sm font-semibold"
@@ -88,7 +92,7 @@ export function InstallmentGroupCard({
            </div>

            {/* Progress bar */}
-            <div className="mt-3">
+            <div className="mt-2">
              <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>
                  {group.paidInstallments} de {group.totalInstallments} pagas
@@ -100,7 +104,7 @@ export function InstallmentGroupCard({
                    : "pendentes"}
                </span>
              </div>
-              <Progress value={progress} className="h-2" />
+              <Progress value={progress} className="h-1.5" />
            </div>

            {/* Badges de status */}
@@ -139,6 +143,7 @@ export function InstallmentGroupCard({
          <div className="ml-9 mt-2 flex flex-col gap-2 border-l-2 border-muted pl-4">
            {group.pendingInstallments.map((installment) => {
              const isSelected = selectedInstallments.has(installment.id);
+              const isPaid = installment.isSettled;
              const dueDate = installment.dueDate
                ? format(installment.dueDate, "dd/MM/yyyy", { locale: ptBR })
                : format(installment.purchaseDate, "dd/MM/yyyy", {
@@ -150,20 +155,27 @@ export function InstallmentGroupCard({
                  key={installment.id}
                  className={cn(
                    "flex items-center gap-3 rounded-md border p-2 transition-colors",
-                    isSelected && "border-primary/50 bg-primary/5"
+                    isSelected && !isPaid && "border-primary/50 bg-primary/5",
+                    isPaid && "bg-muted/50 opacity-60"
                  )}
                >
                  <Checkbox
-                    checked={isSelected}
-                    onCheckedChange={() => onToggleInstallment(installment.id)}
+                    checked={isPaid ? false : isSelected}
+                    disabled={isPaid}
+                    onCheckedChange={() => !isPaid && onToggleInstallment(installment.id)}
                    aria-label={`Selecionar parcela ${installment.currentInstallment} de ${group.totalInstallments}`}
                  />

                  <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
                    <div className="min-w-0">
-                      <p className="text-sm font-medium">
+                      <p className={cn("text-sm font-medium", isPaid && "line-through")}>
                        Parcela {installment.currentInstallment}/
                        {group.totalInstallments}
+                        {isPaid && (
+                          <Badge variant="secondary" className="ml-2 text-xs">
+                            Paga
+                          </Badge>
+                        )}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Vencimento: {dueDate}
@@ -172,7 +184,7 @@ export function InstallmentGroupCard({

                    <MoneyValues
                      amount={installment.amount}
-                      className="shrink-0 text-sm"
+                      className={cn("shrink-0 text-sm", isPaid && "opacity-60")}
                    />
                  </div>
                </div>