@hed-hog/finance 0.0.252 → 0.0.256

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

@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  CategoryFieldWithCreate,
+  CostCenterFieldWithCreate,
+} from '@/app/(app)/(libraries)/finance/_components/finance-entity-field-with-create';
 import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/finance/_components/person-field-with-create';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
@@ -51,7 +55,12 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Download,
@@ -62,10 +71,13 @@ import {
   Paperclip,
   Plus,
   Send,
+  Trash2,
+  Upload,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useRef, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
@@ -168,69 +180,74 @@ const redistributeRemainingInstallments = (
   });
 };
 
-const newTitleFormSchema = z
-  .object({
-    documento: z.string().trim().min(1, 'Documento é obrigatório'),
-    clienteId: z.string().min(1, 'Cliente é obrigatório'),
-    competencia: z.string().optional(),
-    vencimento: z.string().min(1, 'Vencimento é obrigatório'),
-    valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
-    installmentsCount: z.coerce
-      .number({ invalid_type_error: 'Quantidade de parcelas inválida' })
-      .int('Quantidade de parcelas inválida')
-      .min(1, 'Mínimo de 1 parcela')
-      .max(120, 'Máximo de 120 parcelas'),
-    installments: z
-      .array(
-        z.object({
-          dueDate: z.string().min(1, 'Vencimento da parcela é obrigatório'),
-          amount: z
-            .number()
-            .min(0.01, 'Valor da parcela deve ser maior que zero'),
-        })
-      )
-      .min(1, 'Informe ao menos uma parcela'),
-    categoriaId: z.string().optional(),
-    centroCustoId: z.string().optional(),
-    canal: z.string().optional(),
-    descricao: z.string().optional(),
-  })
-  .superRefine((values, ctx) => {
-    if (values.installments.length !== values.installmentsCount) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ['installments'],
-        message: 'Quantidade de parcelas não confere com o detalhamento',
-      });
-    }
+const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
+  z
+    .object({
+      documento: z.string().trim().min(1, t('validation.documentRequired')),
+      clienteId: z.string().min(1, t('validation.clientRequired')),
+      competencia: z.string().optional(),
+      vencimento: z.string().min(1, t('validation.dueDateRequired')),
+      valor: z.number().min(0.01, t('validation.amountGreaterThanZero')),
+      installmentsCount: z.coerce
+        .number({ invalid_type_error: t('validation.invalidInstallmentCount') })
+        .int(t('validation.invalidInstallmentCount'))
+        .min(1, t('validation.installmentsMin'))
+        .max(120, t('validation.installmentsMax')),
+      installments: z
+        .array(
+          z.object({
+            dueDate: z
+              .string()
+              .min(1, t('validation.installmentDueDateRequired')),
+            amount: z
+              .number()
+              .min(0.01, t('validation.installmentAmountGreaterThanZero')),
+          })
+        )
+        .min(1, t('validation.installmentsRequired')),
+      categoriaId: z.string().optional(),
+      centroCustoId: z.string().optional(),
+      canal: z.string().optional(),
+      descricao: z.string().optional(),
+    })
+    .superRefine((values, ctx) => {
+      if (values.installments.length !== values.installmentsCount) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['installments'],
+          message: t('validation.installmentsCountMismatch'),
+        });
+      }
 
-    const installmentsTotalCents = values.installments.reduce(
-      (acc, installment) => acc + Math.round((installment.amount || 0) * 100),
-      0
-    );
-    const totalCents = Math.round((values.valor || 0) * 100);
+      const installmentsTotalCents = values.installments.reduce(
+        (acc, installment) => acc + Math.round((installment.amount || 0) * 100),
+        0
+      );
+      const totalCents = Math.round((values.valor || 0) * 100);
 
-    if (installmentsTotalCents !== totalCents) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ['installments'],
-        message: 'A soma das parcelas deve ser igual ao valor total',
-      });
-    }
-  });
+      if (installmentsTotalCents !== totalCents) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['installments'],
+          message: t('validation.installmentsSumMismatch'),
+        });
+      }
+    });
 
-type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
+type NewTitleFormValues = z.infer<ReturnType<typeof getNewTitleFormSchema>>;
 
 function NovoTituloSheet({
   categorias,
   centrosCusto,
   t,
   onCreated,
+  onOptionsUpdated,
 }: {
   categorias: any[];
   centrosCusto: any[];
   t: ReturnType<typeof useTranslations>;
   onCreated: () => Promise<any> | void;
+  onOptionsUpdated?: () => Promise<any> | void;
 }) {
   const { request, showToastHandler } = useApp();
   const [open, setOpen] = useState(false);
@@ -249,6 +266,7 @@ function NovoTituloSheet({
   >(null);
   const [extractionWarnings, setExtractionWarnings] = useState<string[]>([]);
   const [uploadProgress, setUploadProgress] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const normalizeFilenameForDisplay = (filename: string) => {
     if (!filename) {
@@ -268,6 +286,8 @@ function NovoTituloSheet({
     }
   };
 
+  const newTitleFormSchema = useMemo(() => getNewTitleFormSchema(t), [t]);
+
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
@@ -419,9 +439,9 @@ function NovoTituloSheet({
       setIsInstallmentsEdited(false);
       setAutoRedistributeInstallments(true);
       setOpen(false);
-      showToastHandler?.('success', 'Título criado com sucesso');
+      showToastHandler?.('success', t('messages.createSuccess'));
     } catch {
-      showToastHandler?.('error', 'Erro ao criar título');
+      showToastHandler?.('error', t('messages.createError'));
     }
   };
 
@@ -437,6 +457,25 @@ function NovoTituloSheet({
     setOpen(false);
   };
 
+  const clearUploadedFile = () => {
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSelectFile = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  };
+
   const uploadRelatedFile = async (file: File) => {
     setIsUploadingFile(true);
     setUploadProgress(0);
@@ -464,7 +503,7 @@ function NovoTituloSheet({
       });
 
       if (!data?.id) {
-        throw new Error('Arquivo inválido');
+        throw new Error(t('messages.invalidFile'));
       }
 
       setUploadedFileId(data.id);
@@ -472,7 +511,7 @@ function NovoTituloSheet({
         normalizeFilenameForDisplay(data.filename || file.name)
       );
       setUploadProgress(100);
-      showToastHandler?.('success', 'Arquivo relacionado com sucesso');
+      showToastHandler?.('success', t('messages.attachSuccess'));
 
       setIsExtractingFileData(true);
       try {
@@ -561,17 +600,11 @@ function NovoTituloSheet({
           });
         }
 
-        showToastHandler?.(
-          'success',
-          'Dados da fatura extraídos e preenchidos automaticamente'
-        );
+        showToastHandler?.('success', t('messages.aiExtractSuccess'));
       } catch {
         setExtractionConfidence(null);
         setExtractionWarnings([]);
-        showToastHandler?.(
-          'error',
-          'Não foi possível extrair os dados automaticamente'
-        );
+        showToastHandler?.('error', t('messages.aiExtractError'));
       } finally {
         setIsExtractingFileData(false);
       }
@@ -581,7 +614,7 @@ function NovoTituloSheet({
       setExtractionConfidence(null);
       setExtractionWarnings([]);
       setUploadProgress(0);
-      showToastHandler?.('error', 'Não foi possível enviar o arquivo');
+      showToastHandler?.('error', t('messages.uploadError'));
     } finally {
       setIsUploadingFile(false);
     }
@@ -602,11 +635,13 @@ function NovoTituloSheet({
         </SheetHeader>
         <Form {...form}>
           <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-4">
-              <div className="grid gap-2">
-                <FormLabel>Arquivo da fatura (opcional)</FormLabel>
-                <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <div className="grid gap-3">
+              <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
+                <div className="grid gap-2">
+                  <FormLabel>{t('common.upload.label')}</FormLabel>
                   <Input
+                    ref={fileInputRef}
+                    className="hidden"
                     type="file"
                     accept=".pdf,.png,.jpg,.jpeg,.xml,.txt"
                     onChange={(event) => {
@@ -615,11 +650,7 @@ function NovoTituloSheet({
                         return;
                       }
 
-                      setUploadedFileId(null);
-                      setUploadedFileName('');
-                      setExtractionConfidence(null);
-                      setExtractionWarnings([]);
-                      setUploadProgress(0);
+                      clearUploadedFile();
                       void uploadRelatedFile(file);
                     }}
                     disabled={
@@ -628,67 +659,128 @@ function NovoTituloSheet({
                       form.formState.isSubmitting
                     }
                   />
-                </div>
-                {isUploadingFile && (
-                  <div className="space-y-1">
-                    <Progress value={uploadProgress} className="h-2" />
-                    <p className="text-xs text-muted-foreground">
-                      Upload em andamento: {uploadProgress}%
-                    </p>
-                  </div>
-                )}
-                {uploadedFileId && (
-                  <p className="text-xs text-muted-foreground">
-                    Arquivo relacionado: {uploadedFileName}
-                  </p>
-                )}
-                {isExtractingFileData && (
-                  <div className="rounded-md border border-primary/30 bg-primary/5 p-3">
-                    <div className="flex items-center gap-2 text-sm font-medium text-primary">
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Analisando documento com IA
-                    </div>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      Os campos serão preenchidos automaticamente em instantes.
-                      Revise os dados antes de salvar.
-                    </p>
+
+                  <div className="grid w-full grid-cols-2 gap-2">
+                    <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')
+                          }
+                          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')}
+                            </>
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {uploadedFileId
+                          ? t('common.upload.change')
+                          : t('common.upload.upload')}
+                      </TooltipContent>
+                    </Tooltip>
+
+                    {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>
-                )}
-                {!isExtractingFileData &&
-                  extractionConfidence !== null &&
-                  extractionConfidence < 70 && (
-                    <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
-                      <div className="text-sm font-medium text-destructive">
-                        Confiança da extração:{' '}
-                        {Math.round(extractionConfidence)}%
+
+                  <div className="space-y-1">
+                    {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>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        Revise principalmente valor e vencimento antes de
-                        salvar.
+                    )}
+
+                    {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>
-                      {extractionWarnings.length > 0 && (
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {extractionWarnings[0]}
+                    )}
+
+                    {!isExtractingFileData &&
+                      extractionConfidence !== null &&
+                      extractionConfidence < 70 && (
+                        <p className="text-xs text-destructive">
+                          {t('common.upload.lowConfidence', {
+                            confidence: Math.round(extractionConfidence),
+                          })}
                         </p>
                       )}
-                    </div>
+
+                    {!isExtractingFileData && extractionWarnings.length > 0 && (
+                      <p className="truncate text-xs text-muted-foreground">
+                        {extractionWarnings[0]}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <FormField
+                  control={form.control}
+                  name="documento"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.document')}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="FAT-00000" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
                   )}
+                />
               </div>
 
-              <FormField
-                control={form.control}
-                name="documento"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.document')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="FAT-00000" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
               <PersonFieldWithCreate
                 form={form}
                 name="clienteId"
@@ -697,7 +789,7 @@ function NovoTituloSheet({
                 selectPlaceholder={t('common.select')}
               />
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-2 items-start gap-3">
                 <FormField
                   control={form.control}
                   name="competencia"
@@ -735,55 +827,61 @@ function NovoTituloSheet({
                 />
               </div>
 
-              <FormField
-                control={form.control}
-                name="valor"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{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 className="grid grid-cols-1 items-start gap-3 sm:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="valor"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{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>
+                  )}
+                />
 
-              <FormField
-                control={form.control}
-                name="installmentsCount"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Quantidade de Parcelas</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>
-                )}
-              />
+                <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 className="space-y-3 rounded-md border p-3">
                 <div className="flex items-center justify-between gap-2">
-                  <p className="text-sm font-medium">Parcelas</p>
+                  <p className="text-sm font-medium">
+                    {t('installmentsEditor.title')}
+                  </p>
                   <Button
                     type="button"
                     variant="outline"
@@ -799,7 +897,7 @@ function NovoTituloSheet({
                       );
                     }}
                   >
-                    Recalcular automaticamente
+                    {t('installmentsEditor.recalculate')}
                   </Button>
                 </div>
 
@@ -815,7 +913,7 @@ function NovoTituloSheet({
                     htmlFor="auto-redistribute-installments-receivable"
                     className="text-xs text-muted-foreground"
                   >
-                    Redistribuir automaticamente o restante ao editar parcela
+                    {t('installmentsEditor.autoRedistributeLabel')}
                   </Label>
                 </div>
                 {autoRedistributeInstallments && (
@@ -829,7 +927,7 @@ function NovoTituloSheet({
                   {installmentFields.map((installment, index) => (
                     <div
                       key={installment.id}
-                      className="grid grid-cols-1 gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
+                      className="grid grid-cols-1 items-start gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
                     >
                       <div className="flex items-center text-sm text-muted-foreground">
                         #{index + 1}
@@ -841,7 +939,7 @@ function NovoTituloSheet({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="text-xs">
-                              Vencimento
+                              {t('installmentsEditor.dueDateLabel')}
                             </FormLabel>
                             <FormControl>
                               <Input
@@ -864,7 +962,9 @@ function NovoTituloSheet({
                         name={`installments.${index}.amount` as const}
                         render={({ field }) => (
                           <FormItem>
-                            <FormLabel className="text-xs">Valor</FormLabel>
+                            <FormLabel className="text-xs">
+                              {t('installmentsEditor.amountLabel')}
+                            </FormLabel>
                             <FormControl>
                               <InputMoney
                                 ref={field.ref}
@@ -908,8 +1008,11 @@ function NovoTituloSheet({
                       : 'text-destructive'
                   }`}
                 >
-                  Soma das parcelas: {installmentsTotal.toFixed(2)}
-                  {installmentsDiffCents > 0 && ' (ajuste necessário)'}
+                  {t('installmentsEditor.totalPrefix', {
+                    total: installmentsTotal.toFixed(2),
+                  })}
+                  {installmentsDiffCents > 0 &&
+                    ` ${t('installmentsEditor.adjustmentNeeded')}`}
                 </p>
                 {form.formState.errors.installments?.message && (
                   <p className="text-xs text-destructive">
@@ -918,56 +1021,23 @@ function NovoTituloSheet({
                 )}
               </div>
 
-              <FormField
-                control={form.control}
+              <CategoryFieldWithCreate
+                form={form}
                 name="categoriaId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.category')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {categorias
-                          .filter((c) => c.natureza === 'receita')
-                          .map((c) => (
-                            <SelectItem key={c.id} value={String(c.id)}>
-                              {c.codigo} - {c.nome}
-                            </SelectItem>
-                          ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                label={t('fields.category')}
+                selectPlaceholder={t('common.select')}
+                categories={categorias}
+                categoryKind="receita"
+                onCreated={onOptionsUpdated}
               />
 
-              <FormField
-                control={form.control}
+              <CostCenterFieldWithCreate
+                form={form}
                 name="centroCustoId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.costCenter')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {centrosCusto.map((c) => (
-                          <SelectItem key={c.id} value={String(c.id)}>
-                            {c.codigo} - {c.nome}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                label={t('fields.costCenter')}
+                selectPlaceholder={t('common.select')}
+                costCenters={centrosCusto}
+                onCreated={onOptionsUpdated}
               />
 
               <FormField
@@ -978,7 +1048,7 @@ function NovoTituloSheet({
                     <FormLabel>{t('fields.channel')}</FormLabel>
                     <Select value={field.value} onValueChange={field.onChange}>
                       <FormControl>
-                        <SelectTrigger>
+                        <SelectTrigger className="w-full">
                           <SelectValue placeholder={t('common.select')} />
                         </SelectTrigger>
                       </FormControl>
@@ -1019,10 +1089,7 @@ function NovoTituloSheet({
               />
             </div>
 
-            <div className="flex justify-end gap-2 pt-4">
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                {t('common.cancel')}
-              </Button>
+            <div className="flex flex-col gap-2 py-4">
               <Button
                 type="submit"
                 disabled={
@@ -1035,9 +1102,9 @@ function NovoTituloSheet({
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 )}
                 {isExtractingFileData
-                  ? 'Preenchendo com IA...'
+                  ? t('common.upload.fillingWithAi')
                   : isUploadingFile
-                    ? 'Enviando arquivo...'
+                    ? t('common.upload.uploadingFile')
                     : t('common.save')}
               </Button>
             </div>
@@ -1048,87 +1115,1154 @@ function NovoTituloSheet({
   );
 }
 
-export default function TitulosReceberPage() {
-  const t = useTranslations('finance.ReceivableInstallmentsPage');
+function EditarTituloSheet({
+  open,
+  onOpenChange,
+  titulo,
+  categorias,
+  centrosCusto,
+  t,
+  onUpdated,
+  onOptionsUpdated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  titulo?: any;
+  categorias: any[];
+  centrosCusto: any[];
+  t: ReturnType<typeof useTranslations>;
+  onUpdated: () => Promise<any> | void;
+  onOptionsUpdated?: () => Promise<any> | void;
+}) {
   const { request, showToastHandler } = useApp();
-  const { data, refetch } = useFinanceData();
-  const { titulosReceber, pessoas, categorias, centrosCusto } = data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
-
-  const canalBadge = {
-    boleto: {
-      label: t('channels.boleto'),
-      className: 'bg-blue-100 text-blue-700',
-    },
-    pix: { label: 'PIX', className: 'bg-green-100 text-green-700' },
-    cartao: {
-      label: t('channels.card'),
-      className: 'bg-purple-100 text-purple-700',
-    },
-    transferencia: {
-      label: t('channels.transfer'),
-      className: 'bg-orange-100 text-orange-700',
-    },
-  };
-
-  const filteredTitulos = titulosReceber.filter((titulo) => {
-    const matchesSearch =
-      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
-      getPessoaById(titulo.clienteId)
-        ?.nome.toLowerCase()
-        .includes(search.toLowerCase());
-
-    const matchesStatus = !statusFilter || titulo.status === statusFilter;
+  const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
+  const [isExtractingFileData, setIsExtractingFileData] = useState(false);
+  const [isInstallmentsEdited, setIsInstallmentsEdited] = useState(false);
+  const [autoRedistributeInstallments, setAutoRedistributeInstallments] =
+    useState(true);
+  const [extractionConfidence, setExtractionConfidence] = useState<
+    number | null
+  >(null);
+  const [extractionWarnings, setExtractionWarnings] = useState<string[]>([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const redistributionTimeoutRef = useRef<
+    Record<number, ReturnType<typeof setTimeout>>
+  >({});
 
-    return matchesSearch && matchesStatus;
-  });
+  const normalizeFilenameForDisplay = (filename: string) => {
+    if (!filename) {
+      return filename;
+    }
 
-  const handleOpenAttachment = async (fileId?: string) => {
-    if (!fileId) {
-      return;
+    if (!/Ã.|Â.|â[\u0080-\u00BF]/.test(filename)) {
+      return filename;
     }
 
     try {
-      const response = await request<{ url?: string }>({
-        url: `/file/open/${fileId}`,
-        method: 'PUT',
-      });
-
-      const url = response?.data?.url;
-      if (!url) {
-        showToastHandler?.('error', 'Não foi possível abrir o anexo');
-        return;
-      }
-
-      window.open(url, '_blank', 'noopener,noreferrer');
+      const bytes = Uint8Array.from(filename, (char) => char.charCodeAt(0));
+      const decoded = new TextDecoder('utf-8').decode(bytes);
+      return /Ã.|Â.|â[\u0080-\u00BF]/.test(decoded) ? filename : decoded;
     } catch {
-      showToastHandler?.('error', 'Não foi possível abrir o anexo');
+      return filename;
     }
   };
 
-  return (
-    <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          { label: t('breadcrumbs.current') },
-        ]}
-        actions={
-          <NovoTituloSheet
-            categorias={categorias}
-            centrosCusto={centrosCusto}
-            t={t}
-            onCreated={refetch}
-          />
-        }
-      />
+  const newTitleFormSchema = useMemo(() => getNewTitleFormSchema(t), [t]);
+
+  const form = useForm<NewTitleFormValues>({
+    resolver: zodResolver(newTitleFormSchema),
+    defaultValues: {
+      documento: '',
+      clienteId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
+      categoriaId: '',
+      centroCustoId: '',
+      canal: '',
+      descricao: '',
+    },
+  });
+
+  const { fields: installmentFields, replace: replaceInstallments } =
+    useFieldArray({
+      control: form.control,
+      name: 'installments',
+    });
+
+  const watchedInstallmentsCount = form.watch('installmentsCount');
+  const watchedTotalValue = form.watch('valor');
+  const watchedDueDate = form.watch('vencimento');
+  const watchedInstallments = form.watch('installments');
+
+  const toDateInput = (value?: string) => {
+    if (!value) {
+      return '';
+    }
+
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      return value;
+    }
+
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+      return '';
+    }
+
+    return parsed.toISOString().slice(0, 10);
+  };
+
+  useEffect(() => {
+    if (!open || !titulo) {
+      return;
+    }
+
+    const installments = Array.isArray(titulo.parcelas) ? titulo.parcelas : [];
+    const normalizedInstallments =
+      installments.length > 0
+        ? installments.map((installment: any) => ({
+            dueDate: toDateInput(installment.vencimento),
+            amount: Number(installment.valor || 0),
+          }))
+        : [
+            {
+              dueDate: toDateInput(titulo?.vencimento),
+              amount: Number(titulo?.valorTotal || 0),
+            },
+          ];
+
+    form.reset({
+      documento: titulo.documento || '',
+      clienteId: titulo.clienteId || '',
+      competencia: titulo.competencia || '',
+      vencimento:
+        normalizedInstallments[0]?.dueDate || toDateInput(titulo?.vencimento),
+      valor: Number(titulo.valorTotal || 0),
+      installmentsCount: normalizedInstallments.length,
+      installments: normalizedInstallments,
+      categoriaId: titulo.categoriaId || '',
+      centroCustoId: titulo.centroCustoId || '',
+      canal: installments[0]?.canal || '',
+      descricao: titulo.descricao || '',
+    });
+
+    const attachmentSource = Array.isArray(titulo.anexosDetalhes)
+      ? titulo.anexosDetalhes
+      : Array.isArray(titulo.anexos)
+        ? titulo.anexos
+        : [];
+    const firstAttachment = attachmentSource[0] as any;
+    const firstAttachmentIdRaw =
+      firstAttachment && typeof firstAttachment === 'object'
+        ? (firstAttachment.id ??
+          firstAttachment.file_id ??
+          firstAttachment.fileId)
+        : undefined;
+    const parsedAttachmentId = Number(firstAttachmentIdRaw);
+
+    setUploadedFileId(
+      Number.isFinite(parsedAttachmentId) ? parsedAttachmentId : null
+    );
+    setUploadedFileName(
+      normalizeFilenameForDisplay(
+        typeof firstAttachment === 'string'
+          ? firstAttachment
+          : firstAttachment?.filename ||
+              firstAttachment?.originalname ||
+              firstAttachment?.name ||
+              firstAttachment?.nome ||
+              firstAttachment?.file_name ||
+              firstAttachment?.fileName ||
+              ''
+      )
+    );
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+
+    setIsInstallmentsEdited(true);
+  }, [form, open, titulo]);
+
+  useEffect(() => {
+    if (isInstallmentsEdited || !open) {
+      return;
+    }
+
+    replaceInstallments(
+      buildEqualInstallments(
+        watchedInstallmentsCount,
+        watchedTotalValue,
+        watchedDueDate
+      )
+    );
+  }, [
+    isInstallmentsEdited,
+    open,
+    replaceInstallments,
+    watchedDueDate,
+    watchedInstallmentsCount,
+    watchedTotalValue,
+  ]);
+
+  const installmentsTotal = (watchedInstallments || []).reduce(
+    (acc, installment) => acc + Number(installment?.amount || 0),
+    0
+  );
+  const installmentsDiffCents = Math.abs(
+    Math.round(installmentsTotal * 100) -
+      Math.round((watchedTotalValue || 0) * 100)
+  );
+
+  const clearScheduledRedistribution = (index: number) => {
+    const timeout = redistributionTimeoutRef.current[index];
+    if (!timeout) {
+      return;
+    }
+
+    clearTimeout(timeout);
+    delete redistributionTimeoutRef.current[index];
+  };
+
+  const runInstallmentRedistribution = (index: number) => {
+    if (!autoRedistributeInstallments) {
+      return;
+    }
+
+    const currentInstallments = form.getValues('installments');
+    const editedInstallmentAmount = Number(
+      currentInstallments[index]?.amount || 0
+    );
+
+    const redistributedInstallments = redistributeRemainingInstallments(
+      currentInstallments,
+      index,
+      editedInstallmentAmount,
+      form.getValues('valor')
+    );
+
+    replaceInstallments(redistributedInstallments);
+  };
+
+  const scheduleInstallmentRedistribution = (index: number) => {
+    clearScheduledRedistribution(index);
+
+    redistributionTimeoutRef.current[index] = setTimeout(() => {
+      runInstallmentRedistribution(index);
+      delete redistributionTimeoutRef.current[index];
+    }, INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS);
+  };
+
+  useEffect(() => {
+    if (autoRedistributeInstallments) {
+      return;
+    }
+
+    Object.values(redistributionTimeoutRef.current).forEach(clearTimeout);
+    redistributionTimeoutRef.current = {};
+  }, [autoRedistributeInstallments]);
+
+  useEffect(() => {
+    return () => {
+      Object.values(redistributionTimeoutRef.current).forEach(clearTimeout);
+      redistributionTimeoutRef.current = {};
+    };
+  }, []);
+
+  const clearUploadedFile = () => {
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSelectFile = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  };
+
+  const uploadRelatedFile = async (file: File) => {
+    setIsUploadingFile(true);
+    setUploadProgress(0);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'finance/titles');
+
+      const { data } = await request<{ id: number; filename: string }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (event) => {
+          if (!event.total) {
+            return;
+          }
+
+          const progress = Math.round((event.loaded * 100) / event.total);
+          setUploadProgress(progress);
+        },
+      });
+
+      if (!data?.id) {
+        throw new Error(t('messages.invalidFile'));
+      }
+
+      setUploadedFileId(data.id);
+      setUploadedFileName(
+        normalizeFilenameForDisplay(data.filename || file.name)
+      );
+      setUploadProgress(100);
+      showToastHandler?.('success', t('messages.attachSuccess'));
+
+      setIsExtractingFileData(true);
+      try {
+        const extraction = await request<{
+          documento?: string | null;
+          clienteId?: string;
+          competencia?: string;
+          vencimento?: string;
+          valor?: number | null;
+          categoriaId?: string;
+          centroCustoId?: string;
+          canal?: string;
+          descricao?: string | null;
+          confidence?: number | null;
+          confidenceLevel?: 'low' | 'high' | null;
+          warnings?: string[];
+        }>({
+          url: '/finance/accounts-receivable/installments/extract-from-file',
+          method: 'POST',
+          data: {
+            file_id: data.id,
+          },
+        });
+
+        const extracted = extraction.data || {};
+        setExtractionConfidence(
+          typeof extracted.confidence === 'number' ? extracted.confidence : null
+        );
+        setExtractionWarnings(
+          Array.isArray(extracted.warnings)
+            ? extracted.warnings.filter(Boolean)
+            : []
+        );
+
+        if (extracted.documento) {
+          form.setValue('documento', extracted.documento, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.clienteId) {
+          form.setValue('clienteId', extracted.clienteId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.competencia) {
+          form.setValue('competencia', extracted.competencia, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.vencimento) {
+          form.setValue('vencimento', extracted.vencimento, {
+            shouldValidate: true,
+          });
+        }
+
+        if (typeof extracted.valor === 'number' && extracted.valor > 0) {
+          form.setValue('valor', extracted.valor, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.categoriaId) {
+          form.setValue('categoriaId', extracted.categoriaId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.centroCustoId) {
+          form.setValue('centroCustoId', extracted.centroCustoId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.canal) {
+          form.setValue('canal', extracted.canal, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.descricao) {
+          form.setValue('descricao', extracted.descricao, {
+            shouldValidate: true,
+          });
+        }
+
+        showToastHandler?.('success', t('messages.aiExtractSuccess'));
+      } catch {
+        setExtractionConfidence(null);
+        setExtractionWarnings([]);
+        showToastHandler?.('error', t('messages.aiExtractError'));
+      } finally {
+        setIsExtractingFileData(false);
+      }
+    } catch {
+      setUploadedFileId(null);
+      setUploadedFileName('');
+      setExtractionConfidence(null);
+      setExtractionWarnings([]);
+      setUploadProgress(0);
+      showToastHandler?.('error', t('messages.uploadError'));
+    } finally {
+      setIsUploadingFile(false);
+    }
+  };
+
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    if (!titulo?.id) {
+      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/accounts-receivable/installments/${titulo.id}`,
+        method: 'PATCH',
+        data: {
+          document_number: values.documento,
+          person_id: Number(values.clienteId),
+          competence_date: values.competencia
+            ? `${values.competencia}-01`
+            : undefined,
+          due_date: values.vencimento,
+          total_amount: values.valor,
+          finance_category_id: values.categoriaId
+            ? Number(values.categoriaId)
+            : undefined,
+          cost_center_id: values.centroCustoId
+            ? Number(values.centroCustoId)
+            : undefined,
+          payment_channel: values.canal || undefined,
+          description: values.descricao?.trim() || undefined,
+          installments: values.installments.map((installment, index) => ({
+            installment_number: index + 1,
+            due_date: installment.dueDate || values.vencimento,
+            amount: installment.amount,
+          })),
+          attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
+        },
+      });
+
+      await onUpdated();
+      showToastHandler?.('success', t('messages.updateSuccess'));
+      onOpenChange(false);
+    } catch {
+      showToastHandler?.('error', t('messages.updateError'));
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('table.actions.edit')}</SheetTitle>
+          <SheetDescription>{t('editTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
+            <div className="grid gap-3">
+              <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
+                <div className="grid gap-2">
+                  <FormLabel>{t('common.upload.label')}</FormLabel>
+                  <Input
+                    ref={fileInputRef}
+                    className="hidden"
+                    type="file"
+                    accept=".pdf,.png,.jpg,.jpeg,.xml,.txt"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) {
+                        return;
+                      }
+
+                      clearUploadedFile();
+                      void uploadRelatedFile(file);
+                    }}
+                    disabled={
+                      isUploadingFile ||
+                      isExtractingFileData ||
+                      form.formState.isSubmitting
+                    }
+                  />
+
+                  <div className="grid w-full grid-cols-2 gap-2">
+                    <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')
+                          }
+                          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')}
+                            </>
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {uploadedFileId
+                          ? t('common.upload.change')
+                          : t('common.upload.upload')}
+                      </TooltipContent>
+                    </Tooltip>
+
+                    {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">
+                    {(uploadedFileId || uploadedFileName) && (
+                      <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>
+                    )}
+                  </div>
+                </div>
+
+                <FormField
+                  control={form.control}
+                  name="documento"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.document')}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="FAT-00000" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <PersonFieldWithCreate
+                form={form}
+                name="clienteId"
+                label={t('fields.client')}
+                entityLabel="cliente"
+                selectPlaceholder={t('common.select')}
+              />
+
+              <div className="grid grid-cols-2 items-start gap-3">
+                <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 grid-cols-1 items-start gap-3 sm:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="valor"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{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>
+                  )}
+                />
+
+                <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
+                            );
+                            setIsInstallmentsEdited(false);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="space-y-3 rounded-md border p-3">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="text-sm font-medium">
+                    {t('installmentsEditor.title')}
+                  </p>
+                  <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>
+
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="auto-redistribute-installments-edit-receivable"
+                    checked={autoRedistributeInstallments}
+                    onCheckedChange={(checked) =>
+                      setAutoRedistributeInstallments(checked === true)
+                    }
+                  />
+                  <Label
+                    htmlFor="auto-redistribute-installments-edit-receivable"
+                    className="text-xs text-muted-foreground"
+                  >
+                    {t('installmentsEditor.autoRedistributeLabel')}
+                  </Label>
+                </div>
+
+                <div className="space-y-2">
+                  {installmentFields.map((installment, index) => (
+                    <div
+                      key={installment.id}
+                      className="grid grid-cols-1 items-start gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
+                    >
+                      <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>
+                        )}
+                      />
+                    </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>
+
+              <CategoryFieldWithCreate
+                form={form}
+                name="categoriaId"
+                label={t('fields.category')}
+                selectPlaceholder={t('common.select')}
+                categories={categorias}
+                categoryKind="receita"
+                onCreated={onOptionsUpdated}
+              />
+
+              <CostCenterFieldWithCreate
+                form={form}
+                name="centroCustoId"
+                label={t('fields.costCenter')}
+                selectPlaceholder={t('common.select')}
+                costCenters={centrosCusto}
+                onCreated={onOptionsUpdated}
+              />
+
+              <FormField
+                control={form.control}
+                name="canal"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.channel')}</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('channels.boleto')}
+                        </SelectItem>
+                        <SelectItem value="pix">PIX</SelectItem>
+                        <SelectItem value="cartao">
+                          {t('channels.card')}
+                        </SelectItem>
+                        <SelectItem value="transferencia">
+                          {t('channels.transfer')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <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>
+                )}
+              />
+            </div>
+
+            <div className="flex flex-col gap-2 py-4">
+              <Button
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting ||
+                  isUploadingFile ||
+                  isExtractingFileData
+                }
+              >
+                {(isUploadingFile || isExtractingFileData) && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                {isExtractingFileData
+                  ? t('common.upload.fillingWithAi')
+                  : isUploadingFile
+                    ? t('common.upload.uploadingFile')
+                    : t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function TitulosReceberPage() {
+  const t = useTranslations('finance.ReceivableInstallmentsPage');
+  const { request, showToastHandler } = useApp();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { data, refetch: refetchFinanceData } = useFinanceData();
+  const {
+    titulosReceber: allTitulosReceber,
+    pessoas,
+    categorias,
+    centrosCusto,
+  } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
+
+  const normalizedStatusFilter =
+    statusFilter && statusFilter !== 'all' ? statusFilter : undefined;
+
+  const {
+    data: paginatedTitlesResponse,
+    refetch: refetchTitles,
+    isFetching: isFetchingTitles,
+  } = useQuery<{
+    data: any[];
+    total: number;
+    page: number;
+    pageSize: number;
+    prev: number | null;
+    next: number | null;
+    lastPage: number;
+  }>({
+    queryKey: [
+      'finance-receivable-installments-list',
+      search,
+      normalizedStatusFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/accounts-receivable/installments',
+        method: 'GET',
+        params: {
+          page,
+          pageSize,
+          search: search.trim() || undefined,
+          status: normalizedStatusFilter,
+        },
+      });
+
+      return response.data as {
+        data: any[];
+        total: number;
+        page: number;
+        pageSize: number;
+        prev: number | null;
+        next: number | null;
+        lastPage: number;
+      };
+    },
+    placeholderData: (old) => old,
+  });
+
+  const titulosReceber = paginatedTitlesResponse?.data || [];
+  const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
+
+  const editingTitle = useMemo(
+    () =>
+      titulosReceber.find((item) => item.id === editingTitleId) ||
+      allTitulosReceber.find((item) => item.id === editingTitleId),
+    [allTitulosReceber, editingTitleId, titulosReceber]
+  );
+
+  useEffect(() => {
+    const editId = searchParams.get('editId');
+    if (!editId || editingTitleId) {
+      return;
+    }
+
+    const foundTitle =
+      titulosReceber.find((item) => item.id === editId) ||
+      allTitulosReceber.find((item) => item.id === editId);
+    if (!foundTitle) {
+      return;
+    }
+
+    if (foundTitle.status !== 'rascunho') {
+      showToastHandler?.('error', t('messages.editDraftOnly'));
+      router.replace(pathname, { scroll: false });
+      return;
+    }
+
+    setEditingTitleId(editId);
+  }, [
+    allTitulosReceber,
+    editingTitleId,
+    pathname,
+    router,
+    searchParams,
+    showToastHandler,
+    titulosReceber,
+  ]);
+
+  const closeEditSheet = (isOpen: boolean) => {
+    if (isOpen) {
+      return;
+    }
+
+    setEditingTitleId(null);
+
+    if (searchParams.get('editId')) {
+      router.replace(pathname, { scroll: false });
+    }
+  };
+
+  useEffect(() => {
+    setPage(1);
+  }, [search, normalizedStatusFilter]);
+
+  const canalBadge = {
+    boleto: {
+      label: t('channels.boleto'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+    pix: { label: 'PIX', className: 'bg-green-100 text-green-700' },
+    cartao: {
+      label: t('channels.card'),
+      className: 'bg-purple-100 text-purple-700',
+    },
+    transferencia: {
+      label: t('channels.transfer'),
+      className: 'bg-orange-100 text-orange-700',
+    },
+  };
+
+  const handleOpenAttachment = async (fileId?: string) => {
+    if (!fileId) {
+      return;
+    }
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
+      });
+
+      const url = response?.data?.url;
+      if (!url) {
+        showToastHandler?.('error', t('messages.openAttachmentError'));
+        return;
+      }
+
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      showToastHandler?.('error', t('messages.openAttachmentError'));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        actions={
+          <>
+            <NovoTituloSheet
+              categorias={categorias}
+              centrosCusto={centrosCusto}
+              t={t}
+              onCreated={async () => {
+                await Promise.all([refetchTitles(), refetchFinanceData()]);
+              }}
+              onOptionsUpdated={refetchFinanceData}
+            />
+            <EditarTituloSheet
+              open={!!editingTitleId && !!editingTitle}
+              onOpenChange={closeEditSheet}
+              titulo={editingTitle}
+              categorias={categorias}
+              centrosCusto={centrosCusto}
+              t={t}
+              onUpdated={async () => {
+                await Promise.all([refetchTitles(), refetchFinanceData()]);
+              }}
+              onOptionsUpdated={refetchFinanceData}
+            />
+          </>
+        }
+      />
 
       <FilterBar
         searchPlaceholder={t('filters.searchPlaceholder')}
@@ -1150,8 +2284,8 @@ export default function TitulosReceberPage() {
             ],
           },
         ]}
-        activeFilters={statusFilter && statusFilter !== 'all' ? 1 : 0}
-        onClearFilters={() => setStatusFilter('')}
+        activeFilters={normalizedStatusFilter ? 1 : 0}
+        onClearFilters={() => setStatusFilter('all')}
       />
 
       <div className="rounded-md border">
@@ -1171,7 +2305,7 @@ export default function TitulosReceberPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredTitulos.map((titulo) => {
+            {titulosReceber.map((titulo) => {
               const cliente = getPessoaById(titulo.clienteId);
               const canal =
                 canalBadge[titulo.canal as keyof typeof canalBadge] ||
@@ -1202,7 +2336,7 @@ export default function TitulosReceberPage() {
                             titulo.anexosDetalhes?.[0]?.id;
                           void handleOpenAttachment(firstAttachmentId);
                         }}
-                        aria-label="Abrir anexo"
+                        aria-label={t('table.actions.openAttachment')}
                       >
                         <Paperclip className="h-3 w-3" />
                       </Button>
@@ -1245,7 +2379,10 @@ export default function TitulosReceberPage() {
                             {t('table.actions.viewDetails')}
                           </Link>
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={titulo.status !== 'rascunho'}
+                          onClick={() => setEditingTitleId(titulo.id)}
+                        >
                           <Edit className="mr-2 h-4 w-4" />
                           {t('table.actions.edit')}
                         </DropdownMenuItem>
@@ -1275,15 +2412,25 @@ export default function TitulosReceberPage() {
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
           {t('footer.showing', {
-            filtered: filteredTitulos.length,
-            total: titulosReceber.length,
+            filtered: titulosReceber.length,
+            total: paginatedTitlesResponse?.total || 0,
           })}
         </p>
         <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" disabled>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!paginatedTitlesResponse?.prev || isFetchingTitles}
+            onClick={() => setPage((current) => Math.max(1, current - 1))}
+          >
             {t('footer.previous')}
           </Button>
-          <Button variant="outline" size="sm" disabled>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!paginatedTitlesResponse?.next || isFetchingTitles}
+            onClick={() => setPage((current) => current + 1)}
+          >
             {t('footer.next')}
           </Button>
         </div>