@hed-hog/finance 0.0.252 → 0.0.256

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

@@ -1,16 +1,14 @@
 'use client';
 
+import {
+  CategoryFieldWithCreate,
+  CostCenterFieldWithCreate,
+} from '@/app/(app)/(libraries)/finance/_components/finance-entity-field-with-create';
+import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
 import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/finance/_components/person-field-with-create';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { FilterBar } from '@/components/ui/filter-bar';
 import {
   Form,
@@ -50,20 +48,14 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  CheckCircle,
-  Download,
-  Edit,
-  Eye,
-  Loader2,
-  MoreHorizontal,
-  Paperclip,
-  Plus,
-  Undo,
-  XCircle,
-} from 'lucide-react';
+import { Loader2, Paperclip, Plus, Trash2, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -71,6 +63,14 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
+import {
+  canApproveTitle,
+  canCancelTitle,
+  canEditTitle,
+  canReverseTitle,
+  canSettleTitle,
+  getFirstActiveSettlementId,
+} from '../../_lib/title-action-rules';
 import { useFinanceData } from '../../_lib/use-finance-data';
 
 const INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS = 300;
@@ -170,69 +170,87 @@ const redistributeRemainingInstallments = (
   });
 };
 
-const newTitleFormSchema = z
-  .object({
-    documento: z.string().trim().min(1, 'Documento é obrigatório'),
-    fornecedorId: z.string().min(1, 'Fornecedor é 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(),
-    metodo: 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')),
+      fornecedorId: z.string().min(1, t('validation.supplierRequired')),
+      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(),
+      metodo: 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<ReturnType<typeof getNewTitleFormSchema>>;
+
+const getSettleTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    installmentId: z.string().min(1, t('validation.installmentRequired')),
+    amount: z.number().min(0.01, t('validation.amountGreaterThanZero')),
+    description: z.string().optional(),
   });
 
-type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
+type SettleTitleFormValues = z.infer<
+  ReturnType<typeof getSettleTitleFormSchema>
+>;
 
 function NovoTituloSheet({
   categorias,
   centrosCusto,
   t,
   onCreated,
+  onCategoriesUpdated,
+  onCostCentersUpdated,
 }: {
   categorias: any[];
   centrosCusto: any[];
   t: ReturnType<typeof useTranslations>;
   onCreated: () => Promise<any> | void;
+  onCategoriesUpdated?: () => Promise<any> | void;
+  onCostCentersUpdated?: () => Promise<any> | void;
 }) {
   const { request, showToastHandler } = useApp();
   const [open, setOpen] = useState(false);
@@ -251,6 +269,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) {
@@ -270,6 +289,8 @@ function NovoTituloSheet({
     }
   };
 
+  const newTitleFormSchema = useMemo(() => getNewTitleFormSchema(t), [t]);
+
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
@@ -421,9 +442,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'));
     }
   };
 
@@ -439,6 +460,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);
@@ -466,7 +506,7 @@ function NovoTituloSheet({
       });
 
       if (!data?.id) {
-        throw new Error('Arquivo inválido');
+        throw new Error(t('messages.invalidFile'));
       }
 
       setUploadedFileId(data.id);
@@ -474,7 +514,7 @@ function NovoTituloSheet({
         normalizeFilenameForDisplay(data.filename || file.name)
       );
       setUploadProgress(100);
-      showToastHandler?.('success', 'Arquivo relacionado com sucesso');
+      showToastHandler?.('success', t('messages.attachSuccess'));
 
       setIsExtractingFileData(true);
       try {
@@ -563,17 +603,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);
       }
@@ -583,7 +617,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);
     }
@@ -604,11 +638,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) => {
@@ -617,11 +653,7 @@ function NovoTituloSheet({
                         return;
                       }
 
-                      setUploadedFileId(null);
-                      setUploadedFileName('');
-                      setExtractionConfidence(null);
-                      setExtractionWarnings([]);
-                      setUploadProgress(0);
+                      clearUploadedFile();
                       void uploadRelatedFile(file);
                     }}
                     disabled={
@@ -630,67 +662,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="NF-00000" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
                   )}
+                />
               </div>
 
-              <FormField
-                control={form.control}
-                name="documento"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.document')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="NF-00000" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
               <PersonFieldWithCreate
                 form={form}
                 name="fornecedorId"
@@ -699,7 +792,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"
@@ -737,55 +830,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"
@@ -801,7 +900,7 @@ function NovoTituloSheet({
                       );
                     }}
                   >
-                    Recalcular automaticamente
+                    {t('installmentsEditor.recalculate')}
                   </Button>
                 </div>
 
@@ -817,13 +916,12 @@ function NovoTituloSheet({
                     htmlFor="auto-redistribute-installments-payable"
                     className="text-xs text-muted-foreground"
                   >
-                    Redistribuir automaticamente o restante ao editar parcela
+                    {t('installmentsEditor.autoRedistributeLabel')}
                   </Label>
                 </div>
                 {autoRedistributeInstallments && (
                   <p className="text-xs text-muted-foreground">
-                    A redistribuição ocorre ao parar de digitar e ao sair do
-                    campo.
+                    {t('installmentsEditor.autoRedistributeHint')}
                   </p>
                 )}
 
@@ -831,7 +929,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}
@@ -843,7 +941,7 @@ function NovoTituloSheet({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="text-xs">
-                              Vencimento
+                              {t('installmentsEditor.dueDateLabel')}
                             </FormLabel>
                             <FormControl>
                               <Input
@@ -866,7 +964,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}
@@ -910,8 +1010,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">
@@ -920,56 +1023,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 className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {categorias
-                          .filter((c) => c.natureza === 'despesa')
-                          .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="despesa"
+                onCreated={onCategoriesUpdated}
               />
 
-              <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 className="w-full">
-                          <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={onCostCentersUpdated}
               />
 
               <FormField
@@ -1027,10 +1097,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={
@@ -1043,9 +1110,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>
@@ -1060,29 +1127,61 @@ function EditarTituloSheet({
   open,
   onOpenChange,
   titulo,
-  pessoas,
   categorias,
   centrosCusto,
   t,
   onUpdated,
+  onCategoriesUpdated,
+  onCostCentersUpdated,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   titulo?: any;
-  pessoas: any[];
   categorias: any[];
   centrosCusto: any[];
   t: ReturnType<typeof useTranslations>;
   onUpdated: () => Promise<any> | void;
+  onCategoriesUpdated?: () => Promise<any> | void;
+  onCostCentersUpdated?: () => Promise<any> | void;
 }) {
   const { request, showToastHandler } = useApp();
+  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>>
   >({});
 
+  const normalizeFilenameForDisplay = (filename: string) => {
+    if (!filename) {
+      return filename;
+    }
+
+    if (!/Ã.|Â.|â[\u0080-\u00BF]/.test(filename)) {
+      return filename;
+    }
+
+    try {
+      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 {
+      return filename;
+    }
+  };
+
+  const newTitleFormSchema = useMemo(() => getNewTitleFormSchema(t), [t]);
+
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
@@ -1162,6 +1261,40 @@ function EditarTituloSheet({
       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]);
 
@@ -1252,7 +1385,7 @@ function EditarTituloSheet({
 
   const handleSubmit = async (values: NewTitleFormValues) => {
     if (!titulo?.id) {
-      showToastHandler?.('error', 'Título inválido para edição');
+      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
       return;
     }
 
@@ -1281,69 +1414,345 @@ function EditarTituloSheet({
             due_date: installment.dueDate || values.vencimento,
             amount: installment.amount,
           })),
+          attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
         },
       });
 
       await onUpdated();
-      showToastHandler?.('success', 'Título atualizado com sucesso');
+      showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
     } catch {
-      showToastHandler?.('error', 'Não foi possível atualizar o título');
+      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>
-            Edite os dados do título enquanto estiver em rascunho.
-          </SheetDescription>
-        </SheetHeader>
-        <Form {...form}>
-          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-4">
-              <FormField
-                control={form.control}
-                name="documento"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.document')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="NF-00000" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+  const clearUploadedFile = () => {
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
 
-              <FormField
-                control={form.control}
-                name="fornecedorId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.supplier')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {pessoas.map((person) => (
-                          <SelectItem key={person.id} value={String(person.id)}>
-                            {person.nome}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
+    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;
+          fornecedorId?: string;
+          competencia?: string;
+          vencimento?: string;
+          valor?: number | null;
+          categoriaId?: string;
+          centroCustoId?: string;
+          metodo?: string;
+          descricao?: string | null;
+          confidence?: number | null;
+          confidenceLevel?: 'low' | 'high' | null;
+          warnings?: string[];
+        }>({
+          url: '/finance/accounts-payable/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.fornecedorId) {
+          form.setValue('fornecedorId', extracted.fornecedorId, {
+            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.metodo) {
+          form.setValue('metodo', extracted.metodo, {
+            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);
+    }
+  };
+
+  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="NF-00000" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <PersonFieldWithCreate
+                form={form}
+                name="fornecedorId"
+                label={t('fields.supplier')}
+                entityLabel="fornecedor"
+                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"
@@ -1381,56 +1790,62 @@ function EditarTituloSheet({
                 />
               </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
-                          );
-                          setIsInstallmentsEdited(false);
-                        }}
-                      />
-                    </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">Parcelas</p>
+                  <p className="text-sm font-medium">
+                    {t('installmentsEditor.title')}
+                  </p>
                   <Button
                     type="button"
                     variant="outline"
@@ -1446,7 +1861,7 @@ function EditarTituloSheet({
                       );
                     }}
                   >
-                    Recalcular automaticamente
+                    {t('installmentsEditor.recalculate')}
                   </Button>
                 </div>
 
@@ -1462,7 +1877,7 @@ function EditarTituloSheet({
                     htmlFor="auto-redistribute-installments-edit-payable"
                     className="text-xs text-muted-foreground"
                   >
-                    Redistribuir automaticamente o restante ao editar parcela
+                    {t('installmentsEditor.autoRedistributeLabel')}
                   </Label>
                 </div>
 
@@ -1470,7 +1885,7 @@ function EditarTituloSheet({
                   {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}
@@ -1482,7 +1897,7 @@ function EditarTituloSheet({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="text-xs">
-                              Vencimento
+                              {t('installmentsEditor.dueDateLabel')}
                             </FormLabel>
                             <FormControl>
                               <Input
@@ -1505,7 +1920,9 @@ function EditarTituloSheet({
                         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}
@@ -1549,8 +1966,11 @@ function EditarTituloSheet({
                       : '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">
@@ -1559,56 +1979,23 @@ function EditarTituloSheet({
                 )}
               </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 className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {categorias
-                          .filter((c) => c.natureza === 'despesa')
-                          .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="despesa"
+                onCreated={onCategoriesUpdated}
               />
 
-              <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 className="w-full">
-                          <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={onCostCentersUpdated}
               />
 
               <FormField
@@ -1666,16 +2053,23 @@ function EditarTituloSheet({
               />
             </div>
 
-            <div className="flex justify-end gap-2 pt-4">
+            <div className="flex flex-col gap-2 py-4">
               <Button
-                type="button"
-                variant="outline"
-                onClick={() => onOpenChange(false)}
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting ||
+                  isUploadingFile ||
+                  isExtractingFileData
+                }
               >
-                {t('common.cancel')}
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {t('common.save')}
+                {(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>
@@ -1691,10 +2085,10 @@ export default function TitulosPagarPage() {
   const pathname = usePathname();
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { data, refetch } = useFinanceData();
-  const { titulosPagar, pessoas } = data;
+  const { data, refetch: refetchFinanceData } = useFinanceData();
+  const { titulosPagar: allTitulosPagar, pessoas } = data;
 
-  const { data: categoriasData } = useQuery<any[]>({
+  const { data: categoriasData, refetch: refetchCategorias } = useQuery<any[]>({
     queryKey: ['finance-categories-options', currentLocaleCode],
     queryFn: async () => {
       const response = await request({
@@ -1707,7 +2101,9 @@ export default function TitulosPagarPage() {
     placeholderData: (old) => old,
   });
 
-  const { data: centrosCustoData } = useQuery<any[]>({
+  const { data: centrosCustoData, refetch: refetchCentrosCusto } = useQuery<
+    any[]
+  >({
     queryKey: ['finance-cost-centers-options'],
     queryFn: async () => {
       const response = await request({
@@ -1728,14 +2124,107 @@ export default function TitulosPagarPage() {
 
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('');
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
   const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
   const [approvingTitleId, setApprovingTitleId] = useState<string | null>(null);
   const [reversingTitleId, setReversingTitleId] = useState<string | null>(null);
   const [cancelingTitleId, setCancelingTitleId] = useState<string | null>(null);
+  const [titleToSettle, setTitleToSettle] = useState<any | null>(null);
+  const [isSettleSheetOpen, setIsSettleSheetOpen] = useState(false);
+  const [isSettlingTitle, setIsSettlingTitle] = useState(false);
+
+  const settleTitleFormSchema = useMemo(() => getSettleTitleFormSchema(t), [t]);
+
+  const settleTitleForm = useForm<SettleTitleFormValues>({
+    resolver: zodResolver(settleTitleFormSchema),
+    defaultValues: {
+      installmentId: '',
+      amount: 0,
+      description: '',
+    },
+  });
+
+  const settleCandidates = useMemo(
+    () =>
+      (titleToSettle?.parcelas || []).filter(
+        (installment: any) =>
+          installment.status === 'aberto' ||
+          installment.status === 'parcial' ||
+          installment.status === 'vencido'
+      ),
+    [titleToSettle]
+  );
+
+  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-payable-installments-list',
+      search,
+      normalizedStatusFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/accounts-payable/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 titulosPagar = paginatedTitlesResponse?.data || [];
+
+  useEffect(() => {
+    const firstCandidate = settleCandidates[0];
+
+    settleTitleForm.reset({
+      installmentId: firstCandidate?.id || '',
+      amount: Number(firstCandidate?.valorAberto || 0),
+      description: '',
+    });
+  }, [settleCandidates, settleTitleForm]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [search, normalizedStatusFilter]);
 
   const editingTitle = useMemo(
-    () => titulosPagar.find((item) => item.id === editingTitleId),
-    [editingTitleId, titulosPagar]
+    () =>
+      titulosPagar.find((item) => item.id === editingTitleId) ||
+      allTitulosPagar.find((item) => item.id === editingTitleId),
+    [allTitulosPagar, editingTitleId, titulosPagar]
   );
 
   useEffect(() => {
@@ -1744,16 +2233,15 @@ export default function TitulosPagarPage() {
       return;
     }
 
-    const foundTitle = titulosPagar.find((item) => item.id === editId);
+    const foundTitle =
+      titulosPagar.find((item) => item.id === editId) ||
+      allTitulosPagar.find((item) => item.id === editId);
     if (!foundTitle) {
       return;
     }
 
     if (foundTitle.status !== 'rascunho') {
-      showToastHandler?.(
-        'error',
-        'Apenas títulos em rascunho podem ser editados'
-      );
+      showToastHandler?.('error', t('messages.editDraftOnly'));
       router.replace(pathname, { scroll: false });
       return;
     }
@@ -1765,6 +2253,7 @@ export default function TitulosPagarPage() {
     router,
     searchParams,
     showToastHandler,
+    allTitulosPagar,
     titulosPagar,
   ]);
 
@@ -1792,15 +2281,15 @@ export default function TitulosPagarPage() {
         data: {},
       });
 
-      await refetch();
-      showToastHandler?.('success', 'Título cancelado com sucesso');
+      await Promise.all([refetchTitles(), refetchFinanceData()]);
+      showToastHandler?.('success', t('messages.cancelSuccess'));
     } catch (error: any) {
       const message = error?.response?.data?.message;
       showToastHandler?.(
         'error',
         typeof message === 'string' && message.trim()
           ? message
-          : 'Não foi possível cancelar o título'
+          : t('messages.cancelError')
       );
     } finally {
       setCancelingTitleId(null);
@@ -1819,84 +2308,123 @@ export default function TitulosPagarPage() {
         method: 'PATCH',
       });
 
-      await refetch();
-      showToastHandler?.('success', 'Título aprovado com sucesso');
+      await Promise.all([refetchTitles(), refetchFinanceData()]);
+      showToastHandler?.('success', t('messages.approveSuccess'));
     } catch (error: any) {
       const message = error?.response?.data?.message;
       showToastHandler?.(
         'error',
         typeof message === 'string' && message.trim()
           ? message
-          : 'Não foi possível aprovar o título'
+          : t('messages.approveError')
       );
     } finally {
       setApprovingTitleId(null);
     }
   };
 
-  const handleSettleTitle = (titleId: string) => {
-    router.push(
-      `/finance/accounts-payable/installments/${titleId}?action=settle`
+  const handleSettleTitle = (title: any) => {
+    const titleId = title?.id;
+
+    if (!titleId) {
+      return;
+    }
+
+    const availableInstallments = (title?.parcelas || []).filter(
+      (installment: any) =>
+        installment.status === 'aberto' ||
+        installment.status === 'parcial' ||
+        installment.status === 'vencido'
     );
+
+    if (availableInstallments.length === 0) {
+      showToastHandler?.('error', t('messages.noInstallmentForSettle'));
+      return;
+    }
+
+    setTitleToSettle(title);
+    setIsSettleSheetOpen(true);
+  };
+
+  const handleSubmitSettleTitle = async (values: SettleTitleFormValues) => {
+    if (!titleToSettle?.id || isSettlingTitle) {
+      return;
+    }
+
+    setIsSettlingTitle(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titleToSettle.id}/settlements`,
+        method: 'POST',
+        data: {
+          installment_id: Number(values.installmentId),
+          amount: values.amount,
+          description: values.description?.trim() || undefined,
+        },
+      });
+
+      await Promise.all([refetchTitles(), refetchFinanceData()]);
+      setIsSettleSheetOpen(false);
+      setTitleToSettle(null);
+      settleTitleForm.reset({
+        installmentId: '',
+        amount: 0,
+        description: '',
+      });
+      showToastHandler?.('success', t('messages.settleSuccess'));
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : t('messages.settleError')
+      );
+    } finally {
+      setIsSettlingTitle(false);
+    }
   };
 
-  const handleReverseTitle = async (title: any) => {
+  const handleReverseTitle = async (title: any, reason?: string) => {
     const titleId = title?.id;
 
     if (!titleId || reversingTitleId) {
       return;
     }
 
-    const settlementToReverse = (title?.parcelas || [])
-      .flatMap((parcela: any) => parcela?.liquidacoes || [])
-      .find((liquidacao: any) => {
-        return (
-          !!liquidacao?.settlementId &&
-          liquidacao?.status !== 'reversed' &&
-          liquidacao?.status !== 'estornado'
-        );
-      });
+    const settlementId = getFirstActiveSettlementId(title);
 
-    if (!settlementToReverse?.settlementId) {
-      showToastHandler?.('error', 'Nenhuma liquidação ativa para estornar');
+    if (!settlementId) {
+      showToastHandler?.('error', t('messages.noActiveSettlementToReverse'));
       return;
     }
 
     setReversingTitleId(titleId);
     try {
       await request({
-        url: `/finance/accounts-payable/installments/${titleId}/settlements/${settlementToReverse.settlementId}/reverse`,
-        method: 'PATCH',
-        data: {},
+        url: `/finance/settlements/${settlementId}/reverse`,
+        method: 'POST',
+        data: {
+          reason: reason?.trim() || t('messages.reverseDefaultReason'),
+          memo: reason?.trim() || t('messages.reverseDefaultReason'),
+        },
       });
 
-      await refetch();
-      showToastHandler?.('success', 'Estorno realizado com sucesso');
+      await Promise.all([refetchTitles(), refetchFinanceData()]);
+      showToastHandler?.('success', t('messages.reverseSuccess'));
     } catch (error: any) {
       const message = error?.response?.data?.message;
       showToastHandler?.(
         'error',
         typeof message === 'string' && message.trim()
           ? message
-          : 'Não foi possível estornar a liquidação'
+          : t('messages.reverseError')
       );
     } finally {
       setReversingTitleId(null);
     }
   };
 
-  const filteredTitulos = titulosPagar.filter((titulo) => {
-    const matchesSearch =
-      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
-      getPessoaById(titulo.fornecedorId)
-        ?.nome.toLowerCase()
-        .includes(search.toLowerCase());
-
-    const matchesStatus = !statusFilter || titulo.status === statusFilter;
-
-    return matchesSearch && matchesStatus;
-  });
-
   const handleOpenAttachment = async (fileId?: string) => {
     if (!fileId) {
       return;
@@ -1910,13 +2438,13 @@ export default function TitulosPagarPage() {
 
       const url = response?.data?.url;
       if (!url) {
-        showToastHandler?.('error', 'Não foi possível abrir o anexo');
+        showToastHandler?.('error', t('messages.openAttachmentError'));
         return;
       }
 
       window.open(url, '_blank', 'noopener,noreferrer');
     } catch {
-      showToastHandler?.('error', 'Não foi possível abrir o anexo');
+      showToastHandler?.('error', t('messages.openAttachmentError'));
     }
   };
 
@@ -1936,17 +2464,24 @@ export default function TitulosPagarPage() {
               categorias={categorias}
               centrosCusto={centrosCusto}
               t={t}
-              onCreated={refetch}
+              onCreated={async () => {
+                await Promise.all([refetchTitles(), refetchFinanceData()]);
+              }}
+              onCategoriesUpdated={refetchCategorias}
+              onCostCentersUpdated={refetchCentrosCusto}
             />
             <EditarTituloSheet
               open={!!editingTitleId && !!editingTitle}
               onOpenChange={closeEditSheet}
               titulo={editingTitle}
-              pessoas={pessoas}
               categorias={categorias}
               centrosCusto={centrosCusto}
               t={t}
-              onUpdated={refetch}
+              onUpdated={async () => {
+                await Promise.all([refetchTitles(), refetchFinanceData()]);
+              }}
+              onCategoriesUpdated={refetchCategorias}
+              onCostCentersUpdated={refetchCentrosCusto}
             />
           </>
         }
@@ -1973,10 +2508,135 @@ export default function TitulosPagarPage() {
             ],
           },
         ]}
-        activeFilters={statusFilter && statusFilter !== 'all' ? 1 : 0}
-        onClearFilters={() => setStatusFilter('')}
+        activeFilters={normalizedStatusFilter ? 1 : 0}
+        onClearFilters={() => setStatusFilter('all')}
       />
 
+      <Sheet
+        open={isSettleSheetOpen}
+        onOpenChange={(open) => {
+          setIsSettleSheetOpen(open);
+
+          if (!open) {
+            setTitleToSettle(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{t('settleSheet.title')}</SheetTitle>
+            <SheetDescription>
+              {t('settleSheet.description', {
+                document: titleToSettle?.documento || '-',
+              })}
+            </SheetDescription>
+          </SheetHeader>
+
+          <Form {...settleTitleForm}>
+            <form
+              className="space-y-4 px-4"
+              onSubmit={settleTitleForm.handleSubmit(handleSubmitSettleTitle)}
+            >
+              <FormField
+                control={settleTitleForm.control}
+                name="installmentId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('settleSheet.installmentLabel')}</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={(value) => {
+                        field.onChange(value);
+
+                        const selected = settleCandidates.find(
+                          (installment: any) => installment.id === value
+                        );
+
+                        if (selected) {
+                          settleTitleForm.setValue(
+                            'amount',
+                            Number(selected.valorAberto || 0),
+                            { shouldValidate: true }
+                          );
+                        }
+                      }}
+                    >
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t(
+                              'settleSheet.installmentPlaceholder'
+                            )}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {settleCandidates.map((installment: any) => (
+                          <SelectItem
+                            key={installment.id}
+                            value={installment.id}
+                          >
+                            {t('settleSheet.installmentOption', {
+                              number: installment.numero,
+                              amount: new Intl.NumberFormat('pt-BR', {
+                                style: 'currency',
+                                currency: 'BRL',
+                              }).format(Number(installment.valorAberto || 0)),
+                            })}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={settleTitleForm.control}
+                name="amount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('settleSheet.amountLabel')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        value={Number(field.value || 0)}
+                        onValueChange={(value) => {
+                          field.onChange(Number(value || 0));
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={settleTitleForm.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('settleSheet.descriptionLabel')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value || ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                className="w-full"
+                type="submit"
+                disabled={isSettlingTitle}
+              >
+                {t('settleSheet.confirm')}
+              </Button>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
       <div className="rounded-md border">
         <Table>
           <TableHeader>
@@ -1994,7 +2654,7 @@ export default function TitulosPagarPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredTitulos.map((titulo) => {
+            {titulosPagar.map((titulo) => {
               const fornecedor = getPessoaById(titulo.fornecedorId);
               const categoria = getCategoriaById(titulo.categoriaId);
               const proximaParcela = titulo.parcelas.find(
@@ -2023,7 +2683,7 @@ export default function TitulosPagarPage() {
                             titulo.anexosDetalhes?.[0]?.id;
                           void handleOpenAttachment(firstAttachmentId);
                         }}
-                        aria-label="Abrir anexo"
+                        aria-label={t('table.actions.openAttachment')}
                       >
                         <Paperclip className="h-3 w-3" />
                       </Button>
@@ -2044,78 +2704,52 @@ export default function TitulosPagarPage() {
                     <StatusBadge status={titulo.status} />
                   </TableCell>
                   <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                          <span className="sr-only">
-                            {t('table.actions.srActions')}
-                          </span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link
-                            href={`/finance/accounts-payable/installments/${titulo.id}`}
-                          >
-                            <Eye className="mr-2 h-4 w-4" />
-                            {t('table.actions.viewDetails')}
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          disabled={titulo.status !== 'rascunho'}
-                          onClick={() => setEditingTitleId(titulo.id)}
-                        >
-                          <Edit className="mr-2 h-4 w-4" />
-                          {t('table.actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          disabled={
-                            titulo.status !== 'rascunho' ||
-                            approvingTitleId === titulo.id
-                          }
-                          onClick={() => void handleApproveTitle(titulo.id)}
-                        >
-                          <CheckCircle className="mr-2 h-4 w-4" />
-                          {t('table.actions.approve')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          disabled={
-                            !['aberto', 'parcial', 'vencido'].includes(
-                              titulo.status
-                            )
-                          }
-                          onClick={() => handleSettleTitle(titulo.id)}
-                        >
-                          <Download className="mr-2 h-4 w-4" />
-                          {t('table.actions.settle')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          disabled={
-                            !['parcial', 'liquidado'].includes(titulo.status) ||
-                            reversingTitleId === titulo.id
-                          }
-                          onClick={() => void handleReverseTitle(titulo)}
-                        >
-                          <Undo className="mr-2 h-4 w-4" />
-                          {t('table.actions.reverse')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          className="text-destructive"
-                          disabled={
-                            ['cancelado', 'liquidado'].includes(
-                              titulo.status
-                            ) || cancelingTitleId === titulo.id
-                          }
-                          onClick={() => void handleCancelTitle(titulo.id)}
-                        >
-                          <XCircle className="mr-2 h-4 w-4" />
-                          {t('table.actions.cancel')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                    <FinanceTitleActionsMenu
+                      triggerVariant="ghost"
+                      detailHref={`/finance/accounts-payable/installments/${titulo.id}`}
+                      canEdit={canEditTitle(titulo.status)}
+                      canApprove={canApproveTitle(titulo.status)}
+                      canSettle={canSettleTitle(titulo.status)}
+                      canReverse={
+                        canReverseTitle(titulo.status) &&
+                        !!getFirstActiveSettlementId(titulo)
+                      }
+                      canCancel={canCancelTitle(titulo.status)}
+                      isApproving={approvingTitleId === titulo.id}
+                      isReversing={reversingTitleId === titulo.id}
+                      isCanceling={cancelingTitleId === titulo.id}
+                      labels={{
+                        menu: t.has('actions.title')
+                          ? t('actions.title')
+                          : t('table.actions.srActions'),
+                        srActions: t('table.actions.srActions'),
+                        viewDetails: t('table.actions.viewDetails'),
+                        edit: t('table.actions.edit'),
+                        approve: t('table.actions.approve'),
+                        settle: t('table.actions.settle'),
+                        reverse: t('table.actions.reverse'),
+                        cancel: t('table.actions.cancel'),
+                      }}
+                      dialogs={{
+                        cancelTitle: t('dialogs.cancel.title'),
+                        cancelDescription: t('dialogs.cancel.description'),
+                        cancelButton: t('dialogs.cancel.cancel'),
+                        confirmCancelButton: t('dialogs.cancel.confirm'),
+                        reverseTitle: t('dialogs.reverse.title'),
+                        reverseDescription: t('dialogs.reverse.description'),
+                        reverseReasonLabel: t('dialogs.reverse.reasonLabel'),
+                        reverseReasonPlaceholder: t(
+                          'dialogs.reverse.reasonPlaceholder'
+                        ),
+                        reverseButton: t('dialogs.reverse.cancel'),
+                        confirmReverseButton: t('dialogs.reverse.confirm'),
+                      }}
+                      onEdit={() => setEditingTitleId(titulo.id)}
+                      onApprove={() => void handleApproveTitle(titulo.id)}
+                      onSettle={() => handleSettleTitle(titulo)}
+                      onReverse={(reason) => handleReverseTitle(titulo, reason)}
+                      onCancel={() => handleCancelTitle(titulo.id)}
+                    />
                   </TableCell>
                 </TableRow>
               );
@@ -2127,15 +2761,25 @@ export default function TitulosPagarPage() {
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
           {t('footer.showing', {
-            filtered: filteredTitulos.length,
-            total: titulosPagar.length,
+            filtered: titulosPagar.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>