From c2527df19167bc53fdc13030c36e7f15a59e1ff9 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Thu, 22 Jan 2026 18:28:39 +0000
Subject: [PATCH] =?UTF-8?q?feat(lancamentos):=20exibe=20resumo=20de=20parc?=
 =?UTF-8?q?elas=20e=20recorr=C3=AAncia=20no=20formul=C3=A1rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adiciona cálculo e exibição do valor por parcela no select (ex: "3x de R$ 33,33")
- Mostra resumo dentro do trigger do select ao invés de texto externo
- Exibe valores calculados nas opções do dropdown quando há valor preenchido
- Renomeia label "Lançamento fixo" para "Repetirá"
- Aumenta opções de recorrência de 24 para 47 meses
- Reduz espaçamento e altura do textarea de anotação para layout mais compacto

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../lancamento-dialog/condition-section.tsx   | 86 ++++++++++++++++---
 .../lancamento-dialog/note-section.tsx        |  3 +-
 2 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx
index 443b94a..309224c 100644
--- a/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx
+++ b/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx
@@ -10,21 +10,72 @@ import {
 } from "@/components/ui/select";
 import { LANCAMENTO_CONDITIONS } from "@/lib/lancamentos/constants";
 import { cn } from "@/lib/utils/ui";
+import { useMemo } from "react";
 import { ConditionSelectContent } from "../../select-items";
 import type { ConditionSectionProps } from "./lancamento-dialog-types";
 
+function formatCurrency(value: number): string {
+  return value.toLocaleString("pt-BR", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
 export function ConditionSection({
   formState,
   onFieldChange,
   showInstallments,
   showRecurrence,
 }: ConditionSectionProps) {
+  const amount = useMemo(() => {
+    const value = Number(formState.amount);
+    return Number.isNaN(value) || value <= 0 ? null : value;
+  }, [formState.amount]);
+
+  const getInstallmentLabel = (count: number) => {
+    if (amount) {
+      const installmentValue = amount / count;
+      return `${count}x de R$ ${formatCurrency(installmentValue)}`;
+    }
+    return `${count}x`;
+  };
+
+  const getRecurrenceLabel = (count: number) => {
+    return `${count} meses`;
+  };
+
+  const installmentSummary = useMemo(() => {
+    if (!showInstallments || !formState.installmentCount || !amount) {
+      return null;
+    }
+
+    const count = Number(formState.installmentCount);
+    if (Number.isNaN(count) || count <= 0) {
+      return null;
+    }
+
+    return getInstallmentLabel(count);
+  }, [showInstallments, formState.installmentCount, amount]);
+
+  const recurrenceSummary = useMemo(() => {
+    if (!showRecurrence || !formState.recurrenceCount) {
+      return null;
+    }
+
+    const count = Number(formState.recurrenceCount);
+    if (Number.isNaN(count) || count <= 0) {
+      return null;
+    }
+
+    return `Por ${count} meses`;
+  }, [showRecurrence, formState.recurrenceCount]);
+
   return (
     <div className="flex w-full flex-col gap-2 md:flex-row">
       <div
         className={cn(
-          "space-y-2 w-full",
-          showInstallments || showRecurrence ? "md:w-1/2" : "md:w-full"
+          "space-y-1 w-full",
+          showInstallments || showRecurrence ? "md:w-1/2" : "md:w-full",
         )}
       >
         <Label htmlFor="condition">Condição</Label>
@@ -50,40 +101,47 @@ export function ConditionSection({
       </div>
 
       {showInstallments ? (
-        <div className="space-y-2 w-full md:w-1/2">
+        <div className="space-y-1 w-full md:w-1/2">
           <Label htmlFor="installmentCount">Parcelado em</Label>
           <Select
             value={formState.installmentCount}
             onValueChange={(value) => onFieldChange("installmentCount", value)}
           >
             <SelectTrigger id="installmentCount" className="w-full">
-              <SelectValue placeholder="Selecione" />
+              <SelectValue placeholder="Selecione">
+                {installmentSummary}
+              </SelectValue>
             </SelectTrigger>
             <SelectContent>
-              {[...Array(24)].map((_, index) => (
-                <SelectItem key={index + 2} value={String(index + 2)}>
-                  {index + 2}x
-                </SelectItem>
-              ))}
+              {[...Array(24)].map((_, index) => {
+                const count = index + 2;
+                return (
+                  <SelectItem key={count} value={String(count)}>
+                    {getInstallmentLabel(count)}
+                  </SelectItem>
+                );
+              })}
             </SelectContent>
           </Select>
         </div>
       ) : null}
 
       {showRecurrence ? (
-        <div className="space-y-2 w-full md:w-1/2">
-          <Label htmlFor="recurrenceCount">Lançamento fixo</Label>
+        <div className="space-y-1 w-full md:w-1/2">
+          <Label htmlFor="recurrenceCount">Repetirá</Label>
           <Select
             value={formState.recurrenceCount}
             onValueChange={(value) => onFieldChange("recurrenceCount", value)}
           >
             <SelectTrigger id="recurrenceCount" className="w-full">
-              <SelectValue placeholder="Selecione" />
+              <SelectValue placeholder="Selecione">
+                {recurrenceSummary}
+              </SelectValue>
             </SelectTrigger>
             <SelectContent>
-              {[...Array(24)].map((_, index) => (
+              {[...Array(47)].map((_, index) => (
                 <SelectItem key={index + 2} value={String(index + 2)}>
-                  Por {index + 2} meses
+                  {index + 2} meses
                 </SelectItem>
               ))}
             </SelectContent>
diff --git a/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx
index 9f4a6fa..a19815e 100644
--- a/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx
+++ b/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx
@@ -6,7 +6,7 @@ import type { NoteSectionProps } from "./lancamento-dialog-types";
 
 export function NoteSection({ formState, onFieldChange }: NoteSectionProps) {
   return (
-    <div className="space-y-2">
+    <div className="space-y-1">
       <Label htmlFor="note">Anotação</Label>
       <Textarea
         id="note"
@@ -14,6 +14,7 @@ export function NoteSection({ formState, onFieldChange }: NoteSectionProps) {
         onChange={(event) => onFieldChange("note", event.target.value)}
         placeholder="Adicione observações sobre o lançamento"
         rows={2}
+        className="min-h-[36px] resize-none"
       />
     </div>
   );