@hed-hog/finance 0.0.363 → 0.0.365

package/hedhog/frontend/app/accounts-payable/installments/page.tsx.ejs

@@ -18,6 +18,11 @@ import {
 } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 import { DateRangePicker } from '@/components/ui/date-range-picker';
 import {
   Form,
@@ -49,6 +54,7 @@ import {
   SheetTrigger,
 } from '@/components/ui/sheet';
 import { StatusBadge } from '@/components/ui/status-badge';
+import { Switch } from '@/components/ui/switch';
 import {
   Table,
   TableBody,
@@ -71,6 +77,8 @@ import { formatDistanceToNow } from 'date-fns';
 import { enUS, ptBR } from 'date-fns/locale';
 import {
   AlertTriangle,
+  ChevronDown,
+  ChevronUp,
   FileText,
   Loader2,
   Paperclip,
@@ -202,7 +210,7 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
   z
     .object({
       tipoTitulo: z.enum(['parcelado', 'recorrente']).default('parcelado'),
-      documento: z.string().trim().min(1, t('validation.documentRequired')),
+      documento: z.string().trim().optional(),
       fornecedorId: z.string().min(1, t('validation.supplierRequired')),
       competencia: z.string().optional(),
       vencimento: z.string().min(1, t('validation.dueDateRequired')),
@@ -221,6 +229,8 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
             amount: z
               .number()
               .min(0.01, t('validation.installmentAmountGreaterThanZero')),
+            paga: z.boolean().optional(),
+            dataPagamento: z.string().optional(),
           })
         )
         .min(1, t('validation.installmentsRequired')),
@@ -231,12 +241,65 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
           numOcorrencias: z.coerce.number().int().min(1).max(600).optional(),
         })
         .optional(),
+      jaFoiPago: z.boolean().default(false),
+      pagamento: z
+        .object({
+          dataPagamento: z.string().optional(),
+          contaBancariaId: z.string().optional(),
+          valorPago: z.number().optional(),
+          juros: z.number().min(0).optional(),
+          multa: z.number().min(0).optional(),
+          desconto: z.number().min(0).optional(),
+        })
+        .optional(),
       categoriaId: z.string().optional(),
       centroCustoId: z.string().optional(),
       metodo: z.string().optional(),
       descricao: z.string().optional(),
     })
     .superRefine((values, ctx) => {
+      if (values.jaFoiPago && values.tipoTitulo !== 'recorrente') {
+        if (!values.pagamento?.contaBancariaId) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['pagamento', 'contaBancariaId'],
+            message: t('validation.bankAccountRequired'),
+          });
+        }
+
+        if (values.installmentsCount === 1) {
+          if (!values.pagamento?.dataPagamento) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['pagamento', 'dataPagamento'],
+              message: t('validation.paymentDateRequired'),
+            });
+          }
+
+          const valorPago = values.pagamento?.valorPago ?? values.valor;
+          if (
+            !(valorPago > 0) ||
+            Math.round(valorPago * 100) > Math.round(values.valor * 100)
+          ) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['pagamento', 'valorPago'],
+              message: t('validation.paidAmountInvalid'),
+            });
+          }
+        } else {
+          values.installments.forEach((installment, index) => {
+            if (installment.paga && !installment.dataPagamento) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: ['installments', index, 'dataPagamento'],
+                message: t('validation.installmentPaymentDateRequired'),
+              });
+            }
+          });
+        }
+      }
+
       if (values.tipoTitulo === 'recorrente') {
         if (
           !values.recorrencia?.dataFim &&
@@ -276,6 +339,35 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
 
 type NewTitleFormValues = z.infer<ReturnType<typeof getNewTitleFormSchema>>;
 
+const getNewTitleDefaultValues = (): NewTitleFormValues => ({
+  tipoTitulo: 'parcelado',
+  documento: '',
+  fornecedorId: '',
+  competencia: '',
+  vencimento: '',
+  valor: 0,
+  installmentsCount: 1,
+  installments: [{ dueDate: '', amount: 0, paga: false, dataPagamento: '' }],
+  recorrencia: {
+    frequencia: 'monthly',
+    dataFim: '',
+    numOcorrencias: undefined,
+  },
+  jaFoiPago: false,
+  pagamento: {
+    dataPagamento: '',
+    contaBancariaId: '',
+    valorPago: undefined,
+    juros: undefined,
+    multa: undefined,
+    desconto: undefined,
+  },
+  categoriaId: '',
+  centroCustoId: '',
+  metodo: '',
+  descricao: '',
+});
+
 type PayableInstallmentDraftPayload = {
   mode: 'create' | 'edit';
   titleId: string | null;
@@ -305,6 +397,7 @@ type SettleTitleFormValues = z.infer<
 function NovoTituloSheet({
   categorias,
   centrosCusto,
+  contasBancarias,
   t,
   onCreated,
   onCategoriesUpdated,
@@ -314,6 +407,7 @@ function NovoTituloSheet({
 }: {
   categorias: any[];
   centrosCusto: any[];
+  contasBancarias: any[];
   t: ReturnType<typeof useTranslations>;
   onCreated: () => Promise<any> | void;
   onCategoriesUpdated?: () => Promise<any> | void;
@@ -331,6 +425,12 @@ function NovoTituloSheet({
   const [isInstallmentsEdited, setIsInstallmentsEdited] = useState(false);
   const [autoRedistributeInstallments, setAutoRedistributeInstallments] =
     useState(true);
+  const [isConditionOpen, setIsConditionOpen] = useState(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const paidAmountEditedRef = useRef(false);
+  const competenciaEditedRef = useRef(false);
+  const paymentDateEditedRef = useRef(false);
+  const submitAndNewRef = useRef(false);
   const redistributionTimeoutRef = useRef<
     Record<number, ReturnType<typeof setTimeout>>
   >({});
@@ -370,25 +470,7 @@ function NovoTituloSheet({
 
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
-    defaultValues: {
-      tipoTitulo: 'parcelado',
-      documento: '',
-      fornecedorId: '',
-      competencia: '',
-      vencimento: '',
-      valor: 0,
-      installmentsCount: 1,
-      installments: [{ dueDate: '', amount: 0 }],
-      recorrencia: {
-        frequencia: 'monthly',
-        dataFim: '',
-        numOcorrencias: undefined,
-      },
-      categoriaId: '',
-      centroCustoId: '',
-      metodo: '',
-      descricao: '',
-    },
+    defaultValues: getNewTitleDefaultValues(),
   });
 
   const { fields: installmentFields, replace: replaceInstallments } =
@@ -422,12 +504,23 @@ function NovoTituloSheet({
         installments: watchedFormValues.installments?.map((installment) => ({
           dueDate: installment?.dueDate ?? '',
           amount: Number(installment?.amount ?? 0),
-        })) ?? [{ dueDate: '', amount: 0 }],
+          paga: installment?.paga ?? false,
+          dataPagamento: installment?.dataPagamento ?? '',
+        })) ?? [{ dueDate: '', amount: 0, paga: false, dataPagamento: '' }],
         recorrencia: {
           frequencia: watchedFormValues.recorrencia?.frequencia ?? 'monthly',
           dataFim: watchedFormValues.recorrencia?.dataFim ?? '',
           numOcorrencias: watchedFormValues.recorrencia?.numOcorrencias,
         },
+        jaFoiPago: watchedFormValues.jaFoiPago ?? false,
+        pagamento: {
+          dataPagamento: watchedFormValues.pagamento?.dataPagamento ?? '',
+          contaBancariaId: watchedFormValues.pagamento?.contaBancariaId ?? '',
+          valorPago: watchedFormValues.pagamento?.valorPago,
+          juros: watchedFormValues.pagamento?.juros,
+          multa: watchedFormValues.pagamento?.multa,
+          desconto: watchedFormValues.pagamento?.desconto,
+        },
         categoriaId: watchedFormValues.categoriaId ?? '',
         centroCustoId: watchedFormValues.centroCustoId ?? '',
         metodo: watchedFormValues.metodo ?? '',
@@ -449,10 +542,13 @@ function NovoTituloSheet({
       (watchedFormValues.descricao ?? '').trim() ||
       (watchedFormValues.valor ?? 0) > 0 ||
       (watchedFormValues.installmentsCount ?? 1) !== 1 ||
+      (watchedFormValues.jaFoiPago ?? false) ||
+      (watchedFormValues.pagamento?.contaBancariaId ?? '').trim() ||
       (watchedFormValues.installments ?? []).some(
         (installment) =>
           (installment?.dueDate ?? '').trim() ||
-          Number(installment?.amount ?? 0) > 0
+          Number(installment?.amount ?? 0) > 0 ||
+          (installment?.paga ?? false)
       ) ||
       uploadedFileId != null ||
       uploadedFileName.trim()
@@ -488,12 +584,19 @@ function NovoTituloSheet({
 
   const tipoTitulo = form.watch('tipoTitulo');
   const isRecorrente = tipoTitulo === 'recorrente';
+  const jaFoiPago = form.watch('jaFoiPago');
 
   const watchedInstallmentsCount = form.watch('installmentsCount');
   const watchedTotalValue = form.watch('valor');
   const watchedDueDate = form.watch('vencimento');
   const watchedInstallments = form.watch('installments');
 
+  const condicao = isRecorrente
+    ? 'recorrente'
+    : (watchedInstallmentsCount ?? 1) > 1
+      ? 'parcelado'
+      : 'avista';
+
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -502,7 +605,8 @@ function NovoTituloSheet({
     const storedDraft = loadDraft();
 
     if (storedDraft?.payload.mode === 'create') {
-      form.reset(storedDraft.payload.values);
+      const draftValues = storedDraft.payload.values;
+      form.reset({ ...getNewTitleDefaultValues(), ...draftValues });
       setUploadedFileId(storedDraft.payload.uploadedFileId ?? null);
       setUploadedFileName(storedDraft.payload.uploadedFileName ?? '');
       setExtractionConfidence(null);
@@ -514,28 +618,25 @@ function NovoTituloSheet({
       setAutoRedistributeInstallments(
         storedDraft.payload.autoRedistributeInstallments ?? true
       );
+      setIsConditionOpen(
+        (draftValues.installmentsCount ?? 1) > 1 ||
+          draftValues.tipoTitulo === 'recorrente'
+      );
+      setIsDetailsOpen(
+        Boolean(
+          (draftValues.categoriaId ?? '').trim() ||
+            (draftValues.centroCustoId ?? '').trim() ||
+            (draftValues.metodo ?? '').trim() ||
+            (draftValues.descricao ?? '').trim()
+        )
+      );
+      paidAmountEditedRef.current = true;
+      competenciaEditedRef.current = true;
+      paymentDateEditedRef.current = true;
       return;
     }
 
-    form.reset({
-      tipoTitulo: 'parcelado',
-      documento: '',
-      fornecedorId: '',
-      competencia: '',
-      vencimento: '',
-      valor: 0,
-      installmentsCount: 1,
-      installments: [{ dueDate: '', amount: 0 }],
-      recorrencia: {
-        frequencia: 'monthly',
-        dataFim: '',
-        numOcorrencias: undefined,
-      },
-      categoriaId: '',
-      centroCustoId: '',
-      metodo: '',
-      descricao: '',
-    });
+    form.reset(getNewTitleDefaultValues());
     setUploadedFileId(null);
     setUploadedFileName('');
     setExtractionConfidence(null);
@@ -543,8 +644,48 @@ function NovoTituloSheet({
     setUploadProgress(0);
     setIsInstallmentsEdited(false);
     setAutoRedistributeInstallments(true);
+    setIsConditionOpen(false);
+    setIsDetailsOpen(false);
+    paidAmountEditedRef.current = false;
+    competenciaEditedRef.current = false;
+    paymentDateEditedRef.current = false;
   }, [form, isOpen, loadDraft]);
 
+  useEffect(() => {
+    if (
+      !isOpen ||
+      !jaFoiPago ||
+      condicao !== 'avista' ||
+      paidAmountEditedRef.current
+    ) {
+      return;
+    }
+
+    const currentPaidAmount = form.getValues('pagamento.valorPago');
+    if (currentPaidAmount !== watchedTotalValue) {
+      form.setValue('pagamento.valorPago', watchedTotalValue ?? 0);
+    }
+  }, [condicao, form, isOpen, jaFoiPago, watchedTotalValue]);
+
+  useEffect(() => {
+    if (!isOpen || !watchedDueDate) {
+      return;
+    }
+
+    if (!competenciaEditedRef.current) {
+      const nextCompetencia = watchedDueDate.slice(0, 7);
+      if (form.getValues('competencia') !== nextCompetencia) {
+        form.setValue('competencia', nextCompetencia);
+      }
+    }
+
+    if (!paymentDateEditedRef.current) {
+      if (form.getValues('pagamento.dataPagamento') !== watchedDueDate) {
+        form.setValue('pagamento.dataPagamento', watchedDueDate);
+      }
+    }
+  }, [form, isOpen, watchedDueDate]);
+
   useEffect(() => {
     if (isInstallmentsEdited || !isOpen) {
       return;
@@ -631,13 +772,17 @@ function NovoTituloSheet({
   }, []);
 
   const handleSubmit = async (values: NewTitleFormValues) => {
+    const saveAndNew = submitAndNewRef.current;
+    submitAndNewRef.current = false;
+
     try {
       const recorrente = values.tipoTitulo === 'recorrente';
+      const pagoNoCadastro = values.jaFoiPago && !recorrente;
       await request({
         url: '/finance/accounts-payable/installments',
         method: 'POST',
         data: {
-          document_number: values.documento,
+          document_number: values.documento?.trim() || undefined,
           person_id: Number(values.fornecedorId),
           competence_date: values.competencia
             ? `${values.competencia}-01`
@@ -651,6 +796,10 @@ function NovoTituloSheet({
             ? Number(values.centroCustoId)
             : undefined,
           payment_channel: values.metodo || undefined,
+          bank_account_id:
+            pagoNoCadastro && values.pagamento?.contaBancariaId
+              ? Number(values.pagamento.contaBancariaId)
+              : undefined,
           description: values.descricao?.trim() || undefined,
           ...(recorrente
             ? {
@@ -666,6 +815,28 @@ function NovoTituloSheet({
                   installment_number: index + 1,
                   due_date: installment.dueDate || values.vencimento,
                   amount: installment.amount,
+                  ...(pagoNoCadastro
+                    ? values.installmentsCount === 1
+                      ? {
+                          paid: true,
+                          paid_at:
+                            values.pagamento?.dataPagamento || undefined,
+                          paid_amount:
+                            values.pagamento?.valorPago || installment.amount,
+                          interest: values.pagamento?.juros || undefined,
+                          penalty: values.pagamento?.multa || undefined,
+                          discount: values.pagamento?.desconto || undefined,
+                        }
+                      : installment.paga
+                        ? {
+                            paid: true,
+                            paid_at:
+                              installment.dataPagamento ||
+                              installment.dueDate ||
+                              values.vencimento,
+                          }
+                        : {}
+                    : {}),
                 })),
               }),
           attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
@@ -674,14 +845,35 @@ function NovoTituloSheet({
 
       clearDraft();
       await onCreated();
-      form.reset();
+
+      const defaults = getNewTitleDefaultValues();
+      const keptDueDate = saveAndNew ? values.vencimento : '';
+      form.reset({
+        ...defaults,
+        vencimento: keptDueDate,
+        competencia: keptDueDate ? keptDueDate.slice(0, 7) : '',
+        pagamento: {
+          ...defaults.pagamento,
+          dataPagamento: keptDueDate,
+        },
+      });
       setUploadedFileId(null);
       setUploadedFileName('');
       setExtractionConfidence(null);
       setExtractionWarnings([]);
+      setUploadProgress(0);
       setIsInstallmentsEdited(false);
       setAutoRedistributeInstallments(true);
-      handleOpenChange(false);
+      setIsConditionOpen(false);
+      setIsDetailsOpen(false);
+      paidAmountEditedRef.current = false;
+      competenciaEditedRef.current = false;
+      paymentDateEditedRef.current = false;
+
+      if (!saveAndNew) {
+        handleOpenChange(false);
+      }
+
       showToastHandler?.('success', t('messages.createSuccess'));
     } catch (error) {
       showToastHandler?.(
@@ -865,6 +1057,67 @@ function NovoTituloSheet({
     }
   };
 
+  const formattedDueDateLabel = watchedDueDate
+    ? formatarData(`${watchedDueDate}T00:00:00`)
+    : '-';
+
+  const conditionSummary = isRecorrente
+    ? t('sections.paymentCondition.summary.recurring', {
+        frequency: t(
+          `recurrenceEditor.frequencies.${
+            form.watch('recorrencia.frequencia') || 'monthly'
+          }` as Parameters<typeof t>[0]
+        ),
+      })
+    : condicao === 'parcelado'
+      ? t('sections.paymentCondition.summary.installments', {
+          count: watchedInstallmentsCount ?? 1,
+          date: formattedDueDateLabel,
+        })
+      : t('sections.paymentCondition.summary.cash', {
+          date: formattedDueDateLabel,
+        });
+
+  const renderMetodoField = () => (
+    <FormField
+      control={form.control}
+      name="metodo"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+          <Select value={field.value} onValueChange={field.onChange}>
+            <FormControl>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder={t('common.select')} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem value="boleto">
+                {t('paymentMethods.boleto')}
+              </SelectItem>
+              <SelectItem value="pix">PIX</SelectItem>
+              <SelectItem value="transferencia">
+                {t('paymentMethods.transfer')}
+              </SelectItem>
+              <SelectItem value="cartao">{t('paymentMethods.card')}</SelectItem>
+              <SelectItem value="debito_automatico">
+                D&#233;bito autom&#225;tico
+              </SelectItem>
+              <SelectItem value="debito_em_conta">
+                D&#233;bito em conta
+              </SelectItem>
+              <SelectItem value="dinheiro">
+                {t('paymentMethods.cash')}
+              </SelectItem>
+              <SelectItem value="cheque">{t('paymentMethods.check')}</SelectItem>
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+
   return (
     <Sheet open={isOpen} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>
@@ -875,7 +1128,7 @@ function NovoTituloSheet({
       </SheetTrigger>
       <ResizableSheetContent
         sheetId="finance-payable-create-title"
-        defaultWidth={896}
+        defaultWidth={1024}
         className="flex h-full w-full flex-col overflow-hidden p-0 gap-0"
       >
         <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
@@ -888,10 +1141,12 @@ function NovoTituloSheet({
             onSubmit={form.handleSubmit(handleSubmit, handleInvalidSubmit)}
           >
             <FinanceSheetBody className="pt-0">
-              <FinanceSheetSection className="pt-0 mt-0">
-                <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
-                  <div className="grid gap-2">
-                    <FormLabel>{t('common.upload.label')}</FormLabel>
+              <FinanceSheetSection
+                className="pt-0 mt-0"
+                title={t('sections.main.title')}
+                description={t('sections.main.description')}
+                actions={
+                  <div className="flex items-center gap-1">
                     <Input
                       ref={fileInputRef}
                       className="hidden"
@@ -913,113 +1168,95 @@ function NovoTituloSheet({
                       }
                     />
 
-                    <div className="grid w-full grid-cols-2 gap-2">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          onClick={handleSelectFile}
+                          aria-label={
+                            uploadedFileId
+                              ? t('common.upload.change')
+                              : t('common.upload.label')
+                          }
+                          disabled={
+                            isUploadingFile ||
+                            isExtractingFileData ||
+                            form.formState.isSubmitting
+                          }
+                        >
+                          {isUploadingFile || isExtractingFileData ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Upload className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {isUploadingFile && !isExtractingFileData
+                          ? t('common.upload.uploadingProgress', {
+                              progress: uploadProgress,
+                            })
+                          : isExtractingFileData
+                            ? t('common.upload.processingAi')
+                            : uploadedFileId
+                              ? `${t('common.upload.selectedPrefix')} ${uploadedFileName} — ${t('common.upload.change')}`
+                              : t('common.upload.label')}
+                      </TooltipContent>
+                    </Tooltip>
+
+                    {uploadedFileId && (
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Button
                             type="button"
                             variant="outline"
-                            className={
-                              uploadedFileId ? 'w-full' : 'col-span-2 w-full'
-                            }
-                            onClick={handleSelectFile}
-                            aria-label={
-                              uploadedFileId
-                                ? t('common.upload.change')
-                                : t('common.upload.upload')
-                            }
+                            size="icon"
+                            onClick={clearUploadedFile}
+                            aria-label={t('common.upload.remove')}
                             disabled={
                               isUploadingFile ||
                               isExtractingFileData ||
                               form.formState.isSubmitting
                             }
                           >
-                            {uploadedFileId ? (
-                              <Upload className="h-4 w-4" />
-                            ) : (
-                              <>
-                                <Upload className="mr-2 h-4 w-4" />
-                                {t('common.upload.upload')}
-                              </>
-                            )}
+                            <Trash2 className="h-4 w-4" />
                           </Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                          {uploadedFileId
-                            ? t('common.upload.change')
-                            : t('common.upload.upload')}
+                          {t('common.upload.remove')}
                         </TooltipContent>
                       </Tooltip>
+                    )}
+                  </div>
+                }
+              >
+                {!isExtractingFileData &&
+                  extractionConfidence !== null &&
+                  extractionConfidence < 70 && (
+                    <p className="text-xs text-destructive">
+                      {t('common.upload.lowConfidence', {
+                        confidence: Math.round(extractionConfidence),
+                      })}
+                    </p>
+                  )}
 
-                      {uploadedFileId && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              className="w-full"
-                              onClick={clearUploadedFile}
-                              aria-label={t('common.upload.remove')}
-                              disabled={
-                                isUploadingFile ||
-                                isExtractingFileData ||
-                                form.formState.isSubmitting
-                              }
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {t('common.upload.remove')}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </div>
-
-                    <div className="space-y-1 rounded-lg border border-dashed border-border/70 bg-muted/20 p-3">
-                      {uploadedFileId && (
-                        <p className="truncate text-xs text-muted-foreground">
-                          {t('common.upload.selectedPrefix')} {uploadedFileName}
-                        </p>
-                      )}
-
-                      {isUploadingFile && !isExtractingFileData && (
-                        <div className="space-y-1">
-                          <Progress value={uploadProgress} className="h-2" />
-                          <p className="text-xs text-muted-foreground">
-                            {t('common.upload.uploadingProgress', {
-                              progress: uploadProgress,
-                            })}
-                          </p>
-                        </div>
-                      )}
-
-                      {isExtractingFileData && (
-                        <p className="flex items-center gap-2 text-xs text-primary">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                          {t('common.upload.processingAi')}
-                        </p>
-                      )}
-
-                      {!isExtractingFileData &&
-                        extractionConfidence !== null &&
-                        extractionConfidence < 70 && (
-                          <p className="text-xs text-destructive">
-                            {t('common.upload.lowConfidence', {
-                              confidence: Math.round(extractionConfidence),
-                            })}
-                          </p>
-                        )}
+                {!isExtractingFileData && extractionWarnings.length > 0 && (
+                  <p className="truncate text-xs text-muted-foreground">
+                    {extractionWarnings[0]}
+                  </p>
+                )}
 
-                      {!isExtractingFileData &&
-                        extractionWarnings.length > 0 && (
-                          <p className="truncate text-xs text-muted-foreground">
-                            {extractionWarnings[0]}
-                          </p>
-                        )}
-                    </div>
-                  </div>
+                <PersonPickerField
+                  form={form}
+                  name="fornecedorId"
+                  label={t('fields.supplier')}
+                  entityLabel="fornecedor"
+                  selectPlaceholder={t('common.select')}
+                />
 
+                <div className="grid gap-4 md:grid-cols-3">
                   <FormField
                     control={form.control}
                     name="documento"
@@ -1027,227 +1264,124 @@ function NovoTituloSheet({
                       <FormItem>
                         <FormLabel>{t('fields.document')}</FormLabel>
                         <FormControl>
-                          <Input placeholder="NF-00000" {...field} />
+                          <Input
+                            placeholder="NF-00000"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="vencimento"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.dueDate')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="valor"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {isRecorrente
+                            ? t('fields.totalValueRecurring')
+                            : t('fields.totalValue')}
+                        </FormLabel>
+                        <FormControl>
+                          <InputMoney
+                            ref={field.ref}
+                            name={field.name}
+                            value={field.value}
+                            onBlur={field.onBlur}
+                            onValueChange={(value) => field.onChange(value ?? 0)}
+                            placeholder="0,00"
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
                 </div>
+              </FinanceSheetSection>
 
-                <PersonPickerField
-                  form={form}
-                  name="fornecedorId"
-                  label={t('fields.supplier')}
-                  entityLabel="fornecedor"
-                  selectPlaceholder={t('common.select')}
-                />
+              {!isRecorrente && (
+                <div className="space-y-4 rounded-lg border border-border/60 bg-muted/10 p-4">
+                  <FormField
+                    control={form.control}
+                    name="jaFoiPago"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
+                        <div className="space-y-1">
+                          <FormLabel>{t('paidToggle.label')}</FormLabel>
+                          <p className="text-xs text-muted-foreground">
+                            {t('paidToggle.hint')}
+                          </p>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value === true}
+                            onCheckedChange={(checked) => {
+                              const isPaid = checked === true;
+                              field.onChange(isPaid);
+
+                              if (!isPaid) {
+                                return;
+                              }
 
-                <FormField
-                  control={form.control}
-                  name="tipoTitulo"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('titleType.label')}</FormLabel>
-                      <div className="flex gap-2">
-                        <Button
-                          type="button"
-                          variant={
-                            field.value === 'parcelado' ? 'default' : 'outline'
-                          }
-                          size="sm"
-                          onClick={() => field.onChange('parcelado')}
-                        >
-                          {t('titleType.installment')}
-                        </Button>
-                        <Button
-                          type="button"
-                          variant={
-                            field.value === 'recorrente' ? 'default' : 'outline'
-                          }
-                          size="sm"
-                          onClick={() => field.onChange('recorrente')}
-                        >
-                          {t('titleType.recurring')}
-                        </Button>
-                      </div>
-                    </FormItem>
-                  )}
-                />
+                              if (!form.getValues('pagamento.dataPagamento')) {
+                                form.setValue(
+                                  'pagamento.dataPagamento',
+                                  form.getValues('vencimento') ||
+                                    new Date().toISOString().slice(0, 10)
+                                );
+                              }
 
-                <div className="grid gap-4 xl:grid-cols-2">
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="competencia"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('fields.competency')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              type="month"
-                              {...field}
-                              value={field.value || ''}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <FormField
-                      control={form.control}
-                      name="vencimento"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('fields.dueDate')}</FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              {...field}
-                              value={field.value || ''}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <FormField
-                      control={form.control}
-                      name="valor"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {isRecorrente
-                              ? t('fields.totalValueRecurring')
-                              : t('fields.totalValue')}
-                          </FormLabel>
-                          <FormControl>
-                            <InputMoney
-                              ref={field.ref}
-                              name={field.name}
-                              value={field.value}
-                              onBlur={field.onBlur}
-                              onValueChange={(value) =>
-                                field.onChange(value ?? 0)
+                              if (!paidAmountEditedRef.current) {
+                                form.setValue(
+                                  'pagamento.valorPago',
+                                  form.getValues('valor') ?? 0
+                                );
                               }
-                              placeholder="0,00"
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    {!isRecorrente && (
-                      <FormField
-                        control={form.control}
-                        name="installmentsCount"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              {t('installmentsEditor.countLabel')}
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                type="number"
-                                min={1}
-                                max={120}
-                                value={field.value}
-                                onChange={(event) => {
-                                  const nextValue = Number(
-                                    event.target.value || 1
-                                  );
-                                  field.onChange(
-                                    Number.isNaN(nextValue) ? 1 : nextValue
-                                  );
-                                }}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    )}
-                  </div>
-                </div>
-              </FinanceSheetSection>
-
-              <FinanceSheetSection
-                title={t('sections.installments.title')}
-                description={t('sections.installments.description')}
-              >
-                {!isRecorrente && (
-                  <div className="space-y-3">
-                    <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-                      <div className="flex items-center gap-2">
-                        <Checkbox
-                          id="auto-redistribute-installments-payable"
-                          checked={autoRedistributeInstallments}
-                          onCheckedChange={(checked) =>
-                            setAutoRedistributeInstallments(checked === true)
-                          }
-                        />
-                        <Label
-                          htmlFor="auto-redistribute-installments-payable"
-                          className="text-xs text-muted-foreground"
-                        >
-                          {t('installmentsEditor.autoRedistributeLabel')}
-                        </Label>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          setIsInstallmentsEdited(false);
-                          replaceInstallments(
-                            buildEqualInstallments(
-                              form.getValues('installmentsCount'),
-                              form.getValues('valor'),
-                              form.getValues('vencimento')
-                            )
-                          );
-                        }}
-                      >
-                        {t('installmentsEditor.recalculate')}
-                      </Button>
-                    </div>
-
-                    {autoRedistributeInstallments && (
-                      <p className="text-xs text-muted-foreground">
-                        {t('installmentsEditor.autoRedistributeHint')}
-                      </p>
+                            }}
+                          />
+                        </FormControl>
+                      </FormItem>
                     )}
+                  />
 
-                    <div className="space-y-2">
-                      {installmentFields.map((installment, index) => (
-                        <div
-                          key={installment.id}
-                          className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
-                        >
-                          <div className="flex items-center text-sm text-muted-foreground">
-                            #{index + 1}
-                          </div>
-
+                  {jaFoiPago && (
+                    <div className="space-y-4">
+                      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                        {condicao === 'avista' && (
                           <FormField
                             control={form.control}
-                            name={`installments.${index}.dueDate` as const}
+                            name="pagamento.dataPagamento"
                             render={({ field }) => (
                               <FormItem>
-                                <FormLabel className="text-xs">
-                                  {t('installmentsEditor.dueDateLabel')}
-                                </FormLabel>
+                                <FormLabel>{t('payment.dateLabel')}</FormLabel>
                                 <FormControl>
                                   <Input
                                     type="date"
                                     {...field}
                                     value={field.value || ''}
                                     onChange={(event) => {
-                                      setIsInstallmentsEdited(true);
+                                      paymentDateEditedRef.current = true;
                                       field.onChange(event);
                                     }}
                                   />
@@ -1256,39 +1390,73 @@ function NovoTituloSheet({
                               </FormItem>
                             )}
                           />
+                        )}
+
+                        <FormField
+                          control={form.control}
+                          name="pagamento.contaBancariaId"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('payment.bankAccountLabel')}
+                              </FormLabel>
+                              <Select
+                                value={field.value || ''}
+                                onValueChange={field.onChange}
+                              >
+                                <FormControl>
+                                  <SelectTrigger className="w-full">
+                                    <SelectValue
+                                      placeholder={t(
+                                        'payment.bankAccountPlaceholder'
+                                      )}
+                                    />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {contasBancarias.map((conta: any) => (
+                                    <SelectItem
+                                      key={conta.id}
+                                      value={String(conta.id)}
+                                    >
+                                      {[
+                                        conta.descricao,
+                                        conta.banco &&
+                                        conta.banco !== conta.descricao
+                                          ? conta.banco
+                                          : null,
+                                      ]
+                                        .filter(Boolean)
+                                        .join(' — ')}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
 
+                        {renderMetodoField()}
+
+                        {condicao === 'avista' && (
                           <FormField
                             control={form.control}
-                            name={`installments.${index}.amount` as const}
+                            name="pagamento.valorPago"
                             render={({ field }) => (
                               <FormItem>
-                                <FormLabel className="text-xs">
-                                  {t('installmentsEditor.amountLabel')}
+                                <FormLabel>
+                                  {t('payment.paidAmountLabel')}
                                 </FormLabel>
                                 <FormControl>
                                   <InputMoney
                                     ref={field.ref}
                                     name={field.name}
                                     value={field.value}
-                                    onBlur={() => {
-                                      field.onBlur();
-
-                                      if (!autoRedistributeInstallments) {
-                                        return;
-                                      }
-
-                                      clearScheduledRedistribution(index);
-                                      runInstallmentRedistribution(index);
-                                    }}
+                                    onBlur={field.onBlur}
                                     onValueChange={(value) => {
-                                      setIsInstallmentsEdited(true);
-                                      field.onChange(value ?? 0);
-
-                                      if (!autoRedistributeInstallments) {
-                                        return;
-                                      }
-
-                                      scheduleInstallmentRedistribution(index);
+                                      paidAmountEditedRef.current = true;
+                                      field.onChange(value);
                                     }}
                                     placeholder="0,00"
                                   />
@@ -1297,125 +1465,186 @@ function NovoTituloSheet({
                               </FormItem>
                             )}
                           />
-                        </div>
-                      ))}
-                    </div>
+                        )}
+                      </div>
 
-                    <p
-                      className={`text-xs ${
-                        installmentsDiffCents === 0
-                          ? 'text-muted-foreground'
-                          : 'text-destructive'
-                      }`}
-                    >
-                      {t('installmentsEditor.totalPrefix', {
-                        total: installmentsTotal.toFixed(2),
-                      })}
-                      {installmentsDiffCents > 0 &&
-                        ` ${t('installmentsEditor.adjustmentNeeded')}`}
-                    </p>
-                    {form.formState.errors.installments?.message && (
-                      <p className="text-xs text-destructive">
-                        {form.formState.errors.installments.message}
-                      </p>
-                    )}
-                  </div>
-                )}
+                      {condicao === 'avista' ? (
+                        <div className="grid gap-4 md:grid-cols-3">
+                          <FormField
+                            control={form.control}
+                            name="pagamento.juros"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t('payment.interestLabel')}
+                                </FormLabel>
+                                <FormControl>
+                                  <InputMoney
+                                    ref={field.ref}
+                                    name={field.name}
+                                    value={field.value}
+                                    onBlur={field.onBlur}
+                                    onValueChange={(value) =>
+                                      field.onChange(value)
+                                    }
+                                    placeholder="0,00"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
 
-                {isRecorrente && (
-                  <div className="space-y-3 rounded-md border p-3">
-                    <p className="text-sm font-medium">
-                      {t('recurrenceEditor.title')}
-                    </p>
-                    <div className="grid gap-4 md:grid-cols-3">
-                      <FormField
-                        control={form.control}
-                        name="recorrencia.frequencia"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              {t('recurrenceEditor.frequencyLabel')}
-                            </FormLabel>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="w-full">
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="weekly">
-                                  {t('recurrenceEditor.frequencies.weekly')}
-                                </SelectItem>
-                                <SelectItem value="biweekly">
-                                  {t('recurrenceEditor.frequencies.biweekly')}
-                                </SelectItem>
-                                <SelectItem value="monthly">
-                                  {t('recurrenceEditor.frequencies.monthly')}
-                                </SelectItem>
-                                <SelectItem value="bimonthly">
-                                  {t('recurrenceEditor.frequencies.bimonthly')}
-                                </SelectItem>
-                                <SelectItem value="quarterly">
-                                  {t('recurrenceEditor.frequencies.quarterly')}
-                                </SelectItem>
-                                <SelectItem value="semiannual">
-                                  {t('recurrenceEditor.frequencies.semiannual')}
-                                </SelectItem>
-                                <SelectItem value="annual">
-                                  {t('recurrenceEditor.frequencies.annual')}
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                          <FormField
+                            control={form.control}
+                            name="pagamento.multa"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t('payment.penaltyLabel')}
+                                </FormLabel>
+                                <FormControl>
+                                  <InputMoney
+                                    ref={field.ref}
+                                    name={field.name}
+                                    value={field.value}
+                                    onBlur={field.onBlur}
+                                    onValueChange={(value) =>
+                                      field.onChange(value)
+                                    }
+                                    placeholder="0,00"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          <FormField
+                            control={form.control}
+                            name="pagamento.desconto"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t('payment.discountLabel')}
+                                </FormLabel>
+                                <FormControl>
+                                  <InputMoney
+                                    ref={field.ref}
+                                    name={field.name}
+                                    value={field.value}
+                                    onBlur={field.onBlur}
+                                    onValueChange={(value) =>
+                                      field.onChange(value)
+                                    }
+                                    placeholder="0,00"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      ) : (
+                        <p className="text-xs text-muted-foreground">
+                          {t('payment.installmentsHint')}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
 
-                      <FormField
-                        control={form.control}
-                        name="recorrencia.dataFim"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>
-                              {t('recurrenceEditor.endDateLabel')}
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                type="date"
-                                {...field}
-                                value={field.value || ''}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+              <Collapsible
+                open={isConditionOpen}
+                onOpenChange={setIsConditionOpen}
+                className="rounded-lg border border-border/60 bg-background"
+              >
+                <CollapsibleTrigger asChild>
+                  <div className="flex cursor-pointer items-center justify-between gap-3 px-4 py-3">
+                    <div className="min-w-0 space-y-0.5">
+                      <h3 className="text-sm font-semibold text-foreground">
+                        {t('sections.paymentCondition.title')}
+                      </h3>
+                      <p className="truncate text-xs text-muted-foreground">
+                        {conditionSummary}
+                      </p>
+                    </div>
+                    {isConditionOpen ? (
+                      <ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    )}
+                  </div>
+                </CollapsibleTrigger>
+
+                <CollapsibleContent className="space-y-4 border-t border-border/50 px-4 py-4">
+                  <div className="flex flex-wrap gap-2">
+                    <Button
+                      type="button"
+                      variant={condicao === 'avista' ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => {
+                        form.setValue('tipoTitulo', 'parcelado');
+                        form.setValue('installmentsCount', 1);
+                        setIsInstallmentsEdited(false);
+                      }}
+                    >
+                      {t('titleType.cash')}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant={condicao === 'parcelado' ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => {
+                        form.setValue('tipoTitulo', 'parcelado');
+                        if ((form.getValues('installmentsCount') ?? 1) < 2) {
+                          form.setValue('installmentsCount', 2);
+                        }
+                        setIsInstallmentsEdited(false);
+                      }}
+                    >
+                      {t('titleType.installment')}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant={
+                        condicao === 'recorrente' ? 'default' : 'outline'
+                      }
+                      size="sm"
+                      onClick={() => {
+                        form.setValue('tipoTitulo', 'recorrente');
+                        form.setValue('jaFoiPago', false);
+                      }}
+                    >
+                      {t('titleType.recurring')}
+                    </Button>
+                  </div>
 
+                  {condicao === 'parcelado' && (
+                    <div className="grid gap-4 md:grid-cols-3">
                       <FormField
                         control={form.control}
-                        name="recorrencia.numOcorrencias"
+                        name="installmentsCount"
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel>
-                              {t('recurrenceEditor.maxOccurrencesLabel')}
+                              {t('installmentsEditor.countLabel')}
                             </FormLabel>
                             <FormControl>
                               <Input
                                 type="number"
                                 min={1}
-                                max={600}
-                                {...field}
-                                value={field.value ?? ''}
-                                onChange={(e) =>
+                                max={120}
+                                value={field.value}
+                                onChange={(event) => {
+                                  const nextValue = Number(
+                                    event.target.value || 1
+                                  );
                                   field.onChange(
-                                    e.target.value === ''
-                                      ? undefined
-                                      : Number(e.target.value)
-                                  )
-                                }
+                                    Number.isNaN(nextValue) ? 1 : nextValue
+                                  );
+                                }}
                               />
                             </FormControl>
                             <FormMessage />
@@ -1423,108 +1652,429 @@ function NovoTituloSheet({
                         )}
                       />
                     </div>
-                    {form.formState.errors.recorrencia?.message && (
-                      <p className="text-xs text-destructive">
-                        {form.formState.errors.recorrencia.message}
+                  )}
+
+                  {condicao === 'parcelado' && (
+                    <div className="space-y-3">
+                      <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                        <div className="flex items-center gap-2">
+                          <Checkbox
+                            id="auto-redistribute-installments-payable"
+                            checked={autoRedistributeInstallments}
+                            onCheckedChange={(checked) =>
+                              setAutoRedistributeInstallments(checked === true)
+                            }
+                          />
+                          <Label
+                            htmlFor="auto-redistribute-installments-payable"
+                            className="text-xs text-muted-foreground"
+                          >
+                            {t('installmentsEditor.autoRedistributeLabel')}
+                          </Label>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setIsInstallmentsEdited(false);
+                            replaceInstallments(
+                              buildEqualInstallments(
+                                form.getValues('installmentsCount'),
+                                form.getValues('valor'),
+                                form.getValues('vencimento')
+                              )
+                            );
+                          }}
+                        >
+                          {t('installmentsEditor.recalculate')}
+                        </Button>
+                      </div>
+
+                      {autoRedistributeInstallments && (
+                        <p className="text-xs text-muted-foreground">
+                          {t('installmentsEditor.autoRedistributeHint')}
+                        </p>
+                      )}
+
+                      <div className="space-y-2">
+                        {installmentFields.map((installment, index) => (
+                          <div
+                            key={installment.id}
+                            className={`grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 ${
+                              jaFoiPago
+                                ? 'sm:grid-cols-[64px_1fr_150px_150px_72px]'
+                                : 'sm:grid-cols-[96px_1fr_180px]'
+                            }`}
+                          >
+                            <div className="flex items-center text-sm text-muted-foreground">
+                              #{index + 1}
+                            </div>
+
+                            <FormField
+                              control={form.control}
+                              name={`installments.${index}.dueDate` as const}
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel className="text-xs">
+                                    {t('installmentsEditor.dueDateLabel')}
+                                  </FormLabel>
+                                  <FormControl>
+                                    <Input
+                                      type="date"
+                                      {...field}
+                                      value={field.value || ''}
+                                      onChange={(event) => {
+                                        setIsInstallmentsEdited(true);
+                                        field.onChange(event);
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name={`installments.${index}.amount` as const}
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel className="text-xs">
+                                    {t('installmentsEditor.amountLabel')}
+                                  </FormLabel>
+                                  <FormControl>
+                                    <InputMoney
+                                      ref={field.ref}
+                                      name={field.name}
+                                      value={field.value}
+                                      onBlur={() => {
+                                        field.onBlur();
+
+                                        if (!autoRedistributeInstallments) {
+                                          return;
+                                        }
+
+                                        clearScheduledRedistribution(index);
+                                        runInstallmentRedistribution(index);
+                                      }}
+                                      onValueChange={(value) => {
+                                        setIsInstallmentsEdited(true);
+                                        field.onChange(value ?? 0);
+
+                                        if (!autoRedistributeInstallments) {
+                                          return;
+                                        }
+
+                                        scheduleInstallmentRedistribution(
+                                          index
+                                        );
+                                      }}
+                                      placeholder="0,00"
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            {jaFoiPago && (
+                              <FormField
+                                control={form.control}
+                                name={
+                                  `installments.${index}.dataPagamento` as const
+                                }
+                                render={({ field }) => (
+                                  <FormItem>
+                                    <FormLabel className="text-xs">
+                                      {t(
+                                        'installmentsEditor.paymentDateLabel'
+                                      )}
+                                    </FormLabel>
+                                    <FormControl>
+                                      <Input
+                                        type="date"
+                                        {...field}
+                                        value={field.value || ''}
+                                        disabled={
+                                          !watchedInstallments?.[index]?.paga
+                                        }
+                                      />
+                                    </FormControl>
+                                    <FormMessage />
+                                  </FormItem>
+                                )}
+                              />
+                            )}
+
+                            {jaFoiPago && (
+                              <FormField
+                                control={form.control}
+                                name={`installments.${index}.paga` as const}
+                                render={({ field }) => (
+                                  <FormItem>
+                                    <FormLabel className="text-xs">
+                                      {t('installmentsEditor.paidLabel')}
+                                    </FormLabel>
+                                    <FormControl>
+                                      <div className="flex h-9 items-center">
+                                        <Checkbox
+                                          checked={field.value === true}
+                                          onCheckedChange={(checked) => {
+                                            const isPaid = checked === true;
+                                            field.onChange(isPaid);
+
+                                            if (
+                                              isPaid &&
+                                              !form.getValues(
+                                                `installments.${index}.dataPagamento`
+                                              )
+                                            ) {
+                                              form.setValue(
+                                                `installments.${index}.dataPagamento`,
+                                                form.getValues(
+                                                  `installments.${index}.dueDate`
+                                                ) || ''
+                                              );
+                                            }
+                                          }}
+                                        />
+                                      </div>
+                                    </FormControl>
+                                  </FormItem>
+                                )}
+                              />
+                            )}
+                          </div>
+                        ))}
+                      </div>
+
+                      <p
+                        className={`text-xs ${
+                          installmentsDiffCents === 0
+                            ? 'text-muted-foreground'
+                            : 'text-destructive'
+                        }`}
+                      >
+                        {t('installmentsEditor.totalPrefix', {
+                          total: installmentsTotal.toFixed(2),
+                        })}
+                        {installmentsDiffCents > 0 &&
+                          ` ${t('installmentsEditor.adjustmentNeeded')}`}
+                      </p>
+                      {form.formState.errors.installments?.message && (
+                        <p className="text-xs text-destructive">
+                          {form.formState.errors.installments.message}
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  {isRecorrente && (
+                    <div className="space-y-3 rounded-md border p-3">
+                      <p className="text-sm font-medium">
+                        {t('recurrenceEditor.title')}
+                      </p>
+                      <div className="grid gap-4 md:grid-cols-3">
+                        <FormField
+                          control={form.control}
+                          name="recorrencia.frequencia"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('recurrenceEditor.frequencyLabel')}
+                              </FormLabel>
+                              <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                              >
+                                <FormControl>
+                                  <SelectTrigger className="w-full">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  <SelectItem value="weekly">
+                                    {t('recurrenceEditor.frequencies.weekly')}
+                                  </SelectItem>
+                                  <SelectItem value="biweekly">
+                                    {t('recurrenceEditor.frequencies.biweekly')}
+                                  </SelectItem>
+                                  <SelectItem value="monthly">
+                                    {t('recurrenceEditor.frequencies.monthly')}
+                                  </SelectItem>
+                                  <SelectItem value="bimonthly">
+                                    {t(
+                                      'recurrenceEditor.frequencies.bimonthly'
+                                    )}
+                                  </SelectItem>
+                                  <SelectItem value="quarterly">
+                                    {t(
+                                      'recurrenceEditor.frequencies.quarterly'
+                                    )}
+                                  </SelectItem>
+                                  <SelectItem value="semiannual">
+                                    {t(
+                                      'recurrenceEditor.frequencies.semiannual'
+                                    )}
+                                  </SelectItem>
+                                  <SelectItem value="annual">
+                                    {t('recurrenceEditor.frequencies.annual')}
+                                  </SelectItem>
+                                </SelectContent>
+                              </Select>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="recorrencia.dataFim"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('recurrenceEditor.endDateLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="date"
+                                  {...field}
+                                  value={field.value || ''}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="recorrencia.numOcorrencias"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('recurrenceEditor.maxOccurrencesLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  min={1}
+                                  max={600}
+                                  {...field}
+                                  value={field.value ?? ''}
+                                  onChange={(e) =>
+                                    field.onChange(
+                                      e.target.value === ''
+                                        ? undefined
+                                        : Number(e.target.value)
+                                    )
+                                  }
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                      {form.formState.errors.recorrencia?.message && (
+                        <p className="text-xs text-destructive">
+                          {form.formState.errors.recorrencia.message}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible
+                open={isDetailsOpen}
+                onOpenChange={setIsDetailsOpen}
+                className="rounded-lg border border-border/60 bg-background"
+              >
+                <CollapsibleTrigger asChild>
+                  <div className="flex cursor-pointer items-center justify-between gap-3 px-4 py-3">
+                    <div className="min-w-0 space-y-0.5">
+                      <h3 className="text-sm font-semibold text-foreground">
+                        {t('sections.details.title')}
+                      </h3>
+                      <p className="truncate text-xs text-muted-foreground">
+                        {t('sections.details.description')}
                       </p>
+                    </div>
+                    {isDetailsOpen ? (
+                      <ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
                     )}
                   </div>
-                )}
-              </FinanceSheetSection>
+                </CollapsibleTrigger>
 
-              <FinanceSheetSection
-                title={t('sections.classification.title')}
-                description={t('sections.classification.description')}
-              >
-                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-                  <CategoryPickerField
-                    form={form}
-                    name="categoriaId"
-                    label={t('fields.category')}
-                    selectPlaceholder={t('common.select')}
-                    categories={categorias}
-                    categoryKind="despesa"
-                    onCreated={onCategoriesUpdated}
-                  />
+                <CollapsibleContent className="space-y-4 border-t border-border/50 px-4 py-4">
+                  <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                    <FormField
+                      control={form.control}
+                      name="competencia"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('fields.competency')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="month"
+                              {...field}
+                              value={field.value || ''}
+                              onChange={(event) => {
+                                competenciaEditedRef.current = true;
+                                field.onChange(event);
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-                  <CostCenterPickerField
-                    form={form}
-                    name="centroCustoId"
-                    label={t('fields.costCenter')}
-                    selectPlaceholder={t('common.select')}
-                    costCenters={centrosCusto}
-                    onCreated={onCostCentersUpdated}
-                  />
+                    <CategoryPickerField
+                      form={form}
+                      name="categoriaId"
+                      label={t('fields.category')}
+                      selectPlaceholder={t('common.select')}
+                      categories={categorias}
+                      categoryKind="despesa"
+                      onCreated={onCategoriesUpdated}
+                    />
+
+                    <CostCenterPickerField
+                      form={form}
+                      name="centroCustoId"
+                      label={t('fields.costCenter')}
+                      selectPlaceholder={t('common.select')}
+                      costCenters={centrosCusto}
+                      onCreated={onCostCentersUpdated}
+                    />
+
+                    {!jaFoiPago && renderMetodoField()}
+                  </div>
 
                   <FormField
                     control={form.control}
-                    name="metodo"
+                    name="descricao"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>{t('fields.paymentMethod')}</FormLabel>
-                        <Select
-                          value={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder={t('common.select')} />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            <SelectItem value="boleto">
-                              {t('paymentMethods.boleto')}
-                            </SelectItem>
-                            <SelectItem value="pix">PIX</SelectItem>
-                            <SelectItem value="transferencia">
-                              {t('paymentMethods.transfer')}
-                            </SelectItem>
-                            <SelectItem value="cartao">
-                              {t('paymentMethods.card')}
-                            </SelectItem>
-                            <SelectItem value="debito_automatico">
-                              D&#233;bito autom&#225;tico
-                            </SelectItem>
-                            <SelectItem value="debito_em_conta">
-                              D&#233;bito em conta
-                            </SelectItem>
-                            <SelectItem value="dinheiro">
-                              {t('paymentMethods.cash')}
-                            </SelectItem>
-                            <SelectItem value="cheque">
-                              {t('paymentMethods.check')}
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
+                        <FormLabel>{t('fields.description')}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder={t('newTitle.descriptionPlaceholder')}
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
-              </FinanceSheetSection>
-
-              <FinanceSheetSection
-                title={t('sections.notes.title')}
-                description={t('sections.notes.description')}
-              >
-                <FormField
-                  control={form.control}
-                  name="descricao"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.description')}</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          placeholder={t('newTitle.descriptionPlaceholder')}
-                          {...field}
-                          value={field.value || ''}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </FinanceSheetSection>
+                </CollapsibleContent>
+              </Collapsible>
             </FinanceSheetBody>
 
             <div className="border-t border-border/50 px-4 py-4 sm:px-6">
@@ -1539,6 +2089,23 @@ function NovoTituloSheet({
                 </Button>
                 <Button
                   type="submit"
+                  variant="outline"
+                  onClick={() => {
+                    submitAndNewRef.current = true;
+                  }}
+                  disabled={
+                    form.formState.isSubmitting ||
+                    isUploadingFile ||
+                    isExtractingFileData
+                  }
+                >
+                  {t('common.saveAndNew')}
+                </Button>
+                <Button
+                  type="submit"
+                  onClick={() => {
+                    submitAndNewRef.current = false;
+                  }}
                   disabled={
                     form.formState.isSubmitting ||
                     isUploadingFile ||
@@ -1625,25 +2192,7 @@ function EditarTituloSheet({
 
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
-    defaultValues: {
-      tipoTitulo: 'parcelado',
-      documento: '',
-      fornecedorId: '',
-      competencia: '',
-      vencimento: '',
-      valor: 0,
-      installmentsCount: 1,
-      installments: [{ dueDate: '', amount: 0 }],
-      recorrencia: {
-        frequencia: 'monthly',
-        dataFim: '',
-        numOcorrencias: undefined,
-      },
-      categoriaId: '',
-      centroCustoId: '',
-      metodo: '',
-      descricao: '',
-    },
+    defaultValues: getNewTitleDefaultValues(),
   });
 
   const { fields: installmentFields, replace: replaceInstallments } =
@@ -1680,12 +2229,16 @@ function EditarTituloSheet({
         installments: watchedFormValues.installments?.map((installment) => ({
           dueDate: installment?.dueDate ?? '',
           amount: Number(installment?.amount ?? 0),
-        })) ?? [{ dueDate: '', amount: 0 }],
+          paga: installment?.paga ?? false,
+          dataPagamento: installment?.dataPagamento ?? '',
+        })) ?? [{ dueDate: '', amount: 0, paga: false, dataPagamento: '' }],
         recorrencia: {
           frequencia: watchedFormValues.recorrencia?.frequencia ?? 'monthly',
           dataFim: watchedFormValues.recorrencia?.dataFim ?? '',
           numOcorrencias: watchedFormValues.recorrencia?.numOcorrencias,
         },
+        jaFoiPago: false,
+        pagamento: undefined,
         categoriaId: watchedFormValues.categoriaId ?? '',
         centroCustoId: watchedFormValues.centroCustoId ?? '',
         metodo: watchedFormValues.metodo ?? '',
@@ -1777,7 +2330,11 @@ function EditarTituloSheet({
       String(storedDraft.payload.titleId ?? '') === String(titulo.id ?? '');
 
     if (shouldRestoreDraft) {
-      form.reset(storedDraft.payload.values);
+      form.reset({
+        ...getNewTitleDefaultValues(),
+        ...storedDraft.payload.values,
+        jaFoiPago: false,
+      });
       setUploadedFileId(storedDraft.payload.uploadedFileId ?? null);
       setUploadedFileName(storedDraft.payload.uploadedFileName ?? '');
       setExtractionConfidence(null);
@@ -1806,8 +2363,12 @@ function EditarTituloSheet({
 
     const isRecurringTitle = Boolean(titulo.isRecurring);
     form.reset({
+      ...getNewTitleDefaultValues(),
       tipoTitulo: isRecurringTitle ? 'recorrente' : 'parcelado',
-      documento: titulo.documento || '',
+      documento:
+        titulo.documento && titulo.documento !== `TIT-${titulo.id}`
+          ? titulo.documento
+          : '',
       fornecedorId: titulo.fornecedorId || '',
       competencia: titulo.competencia || '',
       vencimento:
@@ -1962,7 +2523,7 @@ function EditarTituloSheet({
         url: `/finance/accounts-payable/installments/${titulo.id}`,
         method: 'PATCH',
         data: {
-          document_number: values.documento,
+          document_number: values.documento?.trim() || null,
           person_id: Number(values.fornecedorId),
           competence_date: values.competencia
             ? `${values.competencia}-01`
@@ -3335,6 +3896,7 @@ export default function TitulosPagarPage() {
             <NovoTituloSheet
               categorias={categorias}
               centrosCusto={centrosCusto}
+              contasBancarias={data.contasBancarias || []}
               t={t}
               open={isNewTitleSheetOpen}
               onOpenChange={setIsNewTitleSheetOpen}