@hed-hog/finance 0.0.300 → 0.0.301

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

@@ -1,28 +1,39 @@
 '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)/contact/person/_components/person-field-with-create';
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { FilterBar } from '@/components/ui/filter-bar';
-import {
-  Form,
-  FormControl,
+import {
+  CategoryFieldWithCreate,
+  CostCenterFieldWithCreate,
+} from '@/app/(app)/(libraries)/finance/_components/finance-entity-field-with-create';
+import {
+  FinancePageSection,
+  FinanceSheetBody,
+  FinanceSheetSection,
+} from '@/app/(app)/(libraries)/finance/_components/finance-layout';
+import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
+import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Label } from '@/components/ui/label';
-import { Money } from '@/components/ui/money';
-import { Progress } from '@/components/ui/progress';
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -53,16 +64,18 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  FileText,
-  Loader2,
-  Paperclip,
-  Plus,
-  Trash2,
-  Upload,
-} from 'lucide-react';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  AlertTriangle,
+  FileText,
+  Loader2,
+  Paperclip,
+  Plus,
+  Trash2,
+  Upload,
+  Wallet,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -649,37 +662,44 @@ function NovoTituloSheet({
           {t('newTitle.action')}
         </Button>
       </SheetTrigger>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{t('newTitle.title')}</SheetTitle>
-          <SheetDescription>{t('newTitle.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
-                    }
-                  />
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('newTitle.title')}</SheetTitle>
+          <SheetDescription>{t('newTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('sections.main.title')}
+                description={t('sections.main.description')}
+              >
+                <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+                  <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>
@@ -744,12 +764,12 @@ function NovoTituloSheet({
                     )}
                   </div>
 
-                  <div className="space-y-1">
-                    {uploadedFileId && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {t('common.upload.selectedPrefix')} {uploadedFileName}
-                      </p>
-                    )}
+                    <div className="space-y-1 rounded-lg border border-dashed border-border/70 bg-muted/20 p-3">
+                      {uploadedFileId && (
+                        <p className="truncate text-xs text-muted-foreground">
+                          {t('common.upload.selectedPrefix')} {uploadedFileName}
+                        </p>
+                      )}
 
                     {isUploadingFile && !isExtractingFileData && (
                       <div className="space-y-1">
@@ -779,364 +799,388 @@ function NovoTituloSheet({
                         </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 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
-                            );
-                          }}
-                        />
-                      </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-payable"
-                    checked={autoRedistributeInstallments}
-                    onCheckedChange={(checked) =>
-                      setAutoRedistributeInstallments(checked === true)
-                    }
-                  />
-                  <Label
-                    htmlFor="auto-redistribute-installments-payable"
-                    className="text-xs text-muted-foreground"
-                  >
-                    {t('installmentsEditor.autoRedistributeLabel')}
-                  </Label>
-                </div>
-                {autoRedistributeInstallments && (
-                  <p className="text-xs text-muted-foreground">
-                    {t('installmentsEditor.autoRedistributeHint')}
-                  </p>
-                )}
-
-                <div className="space-y-2">
-                  {installmentFields.map((installment, index) => (
-                    <div
-                      key={installment.id}
-                      className="grid grid-cols-1 items-start gap-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="despesa"
-                onCreated={onCategoriesUpdated}
-              />
-
-              <CostCenterFieldWithCreate
-                form={form}
-                name="centroCustoId"
-                label={t('fields.costCenter')}
-                selectPlaceholder={t('common.select')}
-                costCenters={centrosCusto}
-                onCreated={onCostCentersUpdated}
-              />
-
-              <FormField
-                control={form.control}
-                name="metodo"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="boleto">
-                          {t('paymentMethods.boleto')}
-                        </SelectItem>
-                        <SelectItem value="pix">PIX</SelectItem>
-                        <SelectItem value="transferencia">
-                          {t('paymentMethods.transfer')}
-                        </SelectItem>
-                        <SelectItem value="cartao">
-                          {t('paymentMethods.card')}
-                        </SelectItem>
-                        <SelectItem value="dinheiro">
-                          {t('paymentMethods.cash')}
-                        </SelectItem>
-                        <SelectItem value="cheque">
-                          {t('paymentMethods.check')}
-                        </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>
+                      {!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 gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="competencia"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.competency')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="month"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="vencimento"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.dueDate')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="valor"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{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
+                              );
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.installments.title')}
+                description={t('sections.installments.description')}
+              >
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="auto-redistribute-installments-payable"
+                        checked={autoRedistributeInstallments}
+                        onCheckedChange={(checked) =>
+                          setAutoRedistributeInstallments(checked === true)
+                        }
+                      />
+                      <Label
+                        htmlFor="auto-redistribute-installments-payable"
+                        className="text-xs text-muted-foreground"
+                      >
+                        {t('installmentsEditor.autoRedistributeLabel')}
+                      </Label>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setIsInstallmentsEdited(false);
+                        replaceInstallments(
+                          buildEqualInstallments(
+                            form.getValues('installmentsCount'),
+                            form.getValues('valor'),
+                            form.getValues('vencimento')
+                          )
+                        );
+                      }}
+                    >
+                      {t('installmentsEditor.recalculate')}
+                    </Button>
+                  </div>
+
+                  {autoRedistributeInstallments && (
+                    <p className="text-xs text-muted-foreground">
+                      {t('installmentsEditor.autoRedistributeHint')}
+                    </p>
+                  )}
+
+                  <div className="space-y-2">
+                    {installmentFields.map((installment, index) => (
+                      <div
+                        key={installment.id}
+                        className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
+                      >
+                        <div className="flex items-center text-sm text-muted-foreground">
+                          #{index + 1}
+                        </div>
+
+                        <FormField
+                          control={form.control}
+                          name={`installments.${index}.dueDate` as const}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('installmentsEditor.dueDateLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="date"
+                                  {...field}
+                                  value={field.value || ''}
+                                  onChange={(event) => {
+                                    setIsInstallmentsEdited(true);
+                                    field.onChange(event);
+                                  }}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name={`installments.${index}.amount` as const}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('installmentsEditor.amountLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <InputMoney
+                                  ref={field.ref}
+                                  name={field.name}
+                                  value={field.value}
+                                  onBlur={() => {
+                                    field.onBlur();
+
+                                    if (!autoRedistributeInstallments) {
+                                      return;
+                                    }
+
+                                    clearScheduledRedistribution(index);
+                                    runInstallmentRedistribution(index);
+                                  }}
+                                  onValueChange={(value) => {
+                                    setIsInstallmentsEdited(true);
+                                    field.onChange(value ?? 0);
+
+                                    if (!autoRedistributeInstallments) {
+                                      return;
+                                    }
+
+                                    scheduleInstallmentRedistribution(index);
+                                  }}
+                                  placeholder="0,00"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </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>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.classification.title')}
+                description={t('sections.classification.description')}
+              >
+                <div className="grid gap-4 xl:grid-cols-3">
+                  <CategoryFieldWithCreate
+                    form={form}
+                    name="categoriaId"
+                    label={t('fields.category')}
+                    selectPlaceholder={t('common.select')}
+                    categories={categorias}
+                    categoryKind="despesa"
+                    onCreated={onCategoriesUpdated}
+                  />
+
+                  <CostCenterFieldWithCreate
+                    form={form}
+                    name="centroCustoId"
+                    label={t('fields.costCenter')}
+                    selectPlaceholder={t('common.select')}
+                    costCenters={centrosCusto}
+                    onCreated={onCostCentersUpdated}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="metodo"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder={t('common.select')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="boleto">
+                              {t('paymentMethods.boleto')}
+                            </SelectItem>
+                            <SelectItem value="pix">PIX</SelectItem>
+                            <SelectItem value="transferencia">
+                              {t('paymentMethods.transfer')}
+                            </SelectItem>
+                            <SelectItem value="cartao">
+                              {t('paymentMethods.card')}
+                            </SelectItem>
+                            <SelectItem value="dinheiro">
+                              {t('paymentMethods.cash')}
+                            </SelectItem>
+                            <SelectItem value="cheque">
+                              {t('paymentMethods.check')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
+                <FormField
+                  control={form.control}
+                  name="descricao"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.description')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder={t('newTitle.descriptionPlaceholder')}
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  {t('common.cancel')}
+                </Button>
+                <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>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
     </Sheet>
   );
 }
@@ -1401,9 +1445,9 @@ function EditarTituloSheet({
     };
   }, []);
 
-  const handleSubmit = async (values: NewTitleFormValues) => {
-    if (!titulo?.id) {
-      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    if (!titulo?.id) {
+      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
       return;
     }
 
@@ -1440,9 +1484,13 @@ function EditarTituloSheet({
       showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
     } catch {
-      showToastHandler?.('error', t('messages.updateError'));
-    }
-  };
+      showToastHandler?.('error', t('messages.updateError'));
+    }
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
 
   const clearUploadedFile = () => {
     setUploadedFileId(null);
@@ -1609,37 +1657,44 @@ function EditarTituloSheet({
 
   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
-                    }
-                  />
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('table.actions.edit')}</SheetTitle>
+          <SheetDescription>{t('editTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('sections.main.title')}
+                description={t('sections.main.description')}
+              >
+                <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+                  <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>
@@ -1704,12 +1759,12 @@ function EditarTituloSheet({
                     )}
                   </div>
 
-                  <div className="space-y-1">
-                    {(uploadedFileId || uploadedFileName) && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {t('common.upload.selectedPrefix')} {uploadedFileName}
-                      </p>
-                    )}
+                    <div className="space-y-1 rounded-lg border border-dashed border-border/70 bg-muted/20 p-3">
+                      {(uploadedFileId || uploadedFileName) && (
+                        <p className="truncate text-xs text-muted-foreground">
+                          {t('common.upload.selectedPrefix')} {uploadedFileName}
+                        </p>
+                      )}
 
                     {isUploadingFile && !isExtractingFileData && (
                       <div className="space-y-1">
@@ -1739,358 +1794,387 @@ function EditarTituloSheet({
                         </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 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-payable"
-                    checked={autoRedistributeInstallments}
-                    onCheckedChange={(checked) =>
-                      setAutoRedistributeInstallments(checked === true)
-                    }
-                  />
-                  <Label
-                    htmlFor="auto-redistribute-installments-edit-payable"
-                    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="despesa"
-                onCreated={onCategoriesUpdated}
-              />
-
-              <CostCenterFieldWithCreate
-                form={form}
-                name="centroCustoId"
-                label={t('fields.costCenter')}
-                selectPlaceholder={t('common.select')}
-                costCenters={centrosCusto}
-                onCreated={onCostCentersUpdated}
-              />
-
-              <FormField
-                control={form.control}
-                name="metodo"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="boleto">
-                          {t('paymentMethods.boleto')}
-                        </SelectItem>
-                        <SelectItem value="pix">PIX</SelectItem>
-                        <SelectItem value="transferencia">
-                          {t('paymentMethods.transfer')}
-                        </SelectItem>
-                        <SelectItem value="cartao">
-                          {t('paymentMethods.card')}
-                        </SelectItem>
-                        <SelectItem value="dinheiro">
-                          {t('paymentMethods.cash')}
-                        </SelectItem>
-                        <SelectItem value="cheque">
-                          {t('paymentMethods.check')}
-                        </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>
+                      {!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 gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="competencia"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.competency')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="month"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="vencimento"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.dueDate')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={field.value || ''}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="valor"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{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>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.installments.title')}
+                description={t('sections.installments.description')}
+              >
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="auto-redistribute-installments-edit-payable"
+                        checked={autoRedistributeInstallments}
+                        onCheckedChange={(checked) =>
+                          setAutoRedistributeInstallments(checked === true)
+                        }
+                      />
+                      <Label
+                        htmlFor="auto-redistribute-installments-edit-payable"
+                        className="text-xs text-muted-foreground"
+                      >
+                        {t('installmentsEditor.autoRedistributeLabel')}
+                      </Label>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setIsInstallmentsEdited(false);
+                        replaceInstallments(
+                          buildEqualInstallments(
+                            form.getValues('installmentsCount'),
+                            form.getValues('valor'),
+                            form.getValues('vencimento')
+                          )
+                        );
+                      }}
+                    >
+                      {t('installmentsEditor.recalculate')}
+                    </Button>
+                  </div>
+
+                  {autoRedistributeInstallments && (
+                    <p className="text-xs text-muted-foreground">
+                      {t('installmentsEditor.autoRedistributeHint')}
+                    </p>
+                  )}
+
+                  <div className="space-y-2">
+                    {installmentFields.map((installment, index) => (
+                      <div
+                        key={installment.id}
+                        className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
+                      >
+                        <div className="flex items-center text-sm text-muted-foreground">
+                          #{index + 1}
+                        </div>
+
+                        <FormField
+                          control={form.control}
+                          name={`installments.${index}.dueDate` as const}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('installmentsEditor.dueDateLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="date"
+                                  {...field}
+                                  value={field.value || ''}
+                                  onChange={(event) => {
+                                    setIsInstallmentsEdited(true);
+                                    field.onChange(event);
+                                  }}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name={`installments.${index}.amount` as const}
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('installmentsEditor.amountLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <InputMoney
+                                  ref={field.ref}
+                                  name={field.name}
+                                  value={field.value}
+                                  onBlur={() => {
+                                    field.onBlur();
+
+                                    if (!autoRedistributeInstallments) {
+                                      return;
+                                    }
+
+                                    clearScheduledRedistribution(index);
+                                    runInstallmentRedistribution(index);
+                                  }}
+                                  onValueChange={(value) => {
+                                    setIsInstallmentsEdited(true);
+                                    field.onChange(value ?? 0);
+
+                                    if (!autoRedistributeInstallments) {
+                                      return;
+                                    }
+
+                                    scheduleInstallmentRedistribution(index);
+                                  }}
+                                  placeholder="0,00"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </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>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.classification.title')}
+                description={t('sections.classification.description')}
+              >
+                <div className="grid gap-4 xl:grid-cols-3">
+                  <CategoryFieldWithCreate
+                    form={form}
+                    name="categoriaId"
+                    label={t('fields.category')}
+                    selectPlaceholder={t('common.select')}
+                    categories={categorias}
+                    categoryKind="despesa"
+                    onCreated={onCategoriesUpdated}
+                  />
+
+                  <CostCenterFieldWithCreate
+                    form={form}
+                    name="centroCustoId"
+                    label={t('fields.costCenter')}
+                    selectPlaceholder={t('common.select')}
+                    costCenters={centrosCusto}
+                    onCreated={onCostCentersUpdated}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="metodo"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder={t('common.select')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="boleto">
+                              {t('paymentMethods.boleto')}
+                            </SelectItem>
+                            <SelectItem value="pix">PIX</SelectItem>
+                            <SelectItem value="transferencia">
+                              {t('paymentMethods.transfer')}
+                            </SelectItem>
+                            <SelectItem value="cartao">
+                              {t('paymentMethods.card')}
+                            </SelectItem>
+                            <SelectItem value="dinheiro">
+                              {t('paymentMethods.cash')}
+                            </SelectItem>
+                            <SelectItem value="cheque">
+                              {t('paymentMethods.check')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
+                <FormField
+                  control={form.control}
+                  name="descricao"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.description')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder={t('newTitle.descriptionPlaceholder')}
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  {t('common.cancel')}
+                </Button>
+                <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>
+            </div>
+          </form>
         </Form>
       </SheetContent>
     </Sheet>
@@ -2138,12 +2222,12 @@ export default function TitulosPagarPage() {
   const centrosCusto = centrosCustoData || [];
 
   const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-  const getCategoriaById = (id?: string) => categorias.find((c) => c.id === id);
-
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
-  const [page, setPage] = useState(1);
-  const pageSize = 10;
+  const getCategoriaById = (id?: string) => categorias.find((c) => c.id === id);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
   const [isNewTitleSheetOpen, setIsNewTitleSheetOpen] = useState(false);
   const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
   const [approvingTitleId, setApprovingTitleId] = useState<string | null>(null);
@@ -2178,11 +2262,10 @@ export default function TitulosPagarPage() {
   const normalizedStatusFilter =
     statusFilter && statusFilter !== 'all' ? statusFilter : undefined;
 
-  const {
-    data: paginatedTitlesResponse,
-    refetch: refetchTitles,
-    isFetching: isFetchingTitles,
-  } = useQuery<{
+  const {
+    data: paginatedTitlesResponse,
+    refetch: refetchTitles,
+  } = useQuery<{
     data: any[];
     total: number;
     page: number;
@@ -2222,11 +2305,76 @@ export default function TitulosPagarPage() {
     },
     placeholderData: (old) => old,
   });
-
-  const titulosPagar = paginatedTitlesResponse?.data || [];
-
-  useEffect(() => {
-    const firstCandidate = settleCandidates[0];
+
+  const titulosPagar = paginatedTitlesResponse?.data || [];
+  const visibleTitlesTotal = useMemo(
+    () =>
+      titulosPagar.reduce(
+        (acc, title) => acc + Number(title?.valorTotal || 0),
+        0
+      ),
+    [titulosPagar]
+  );
+  const visiblePendingTitles = useMemo(
+    () =>
+      titulosPagar.filter((title) =>
+        ['aberto', 'parcial', 'vencido'].includes(String(title?.status || ''))
+      ).length,
+    [titulosPagar]
+  );
+  const visibleOverdueTitles = useMemo(
+    () =>
+      titulosPagar.filter(
+        (title) =>
+          title?.status === 'vencido' ||
+          (Array.isArray(title?.parcelas) &&
+            title.parcelas.some((installment: any) => installment.status === 'vencido'))
+      ).length,
+    [titulosPagar]
+  );
+  const summaryCards = useMemo(
+    () => [
+      {
+        key: 'visible',
+        title: t('summary.cards.visible.title'),
+        value: titulosPagar.length,
+        description: t('summary.cards.visible.description', {
+          total: paginatedTitlesResponse?.total || 0,
+        }),
+        icon: FileText,
+        layout: 'compact' as const,
+      },
+      {
+        key: 'value',
+        title: t('summary.cards.value.title'),
+        value: <Money value={visibleTitlesTotal} />,
+        description: t('summary.cards.value.description'),
+        icon: Wallet,
+        layout: 'compact' as const,
+      },
+      {
+        key: 'attention',
+        title: t('summary.cards.attention.title'),
+        value: visiblePendingTitles,
+        description: t('summary.cards.attention.description', {
+          overdue: visibleOverdueTitles,
+        }),
+        icon: AlertTriangle,
+        layout: 'compact' as const,
+      },
+    ],
+    [
+      paginatedTitlesResponse?.total,
+      t,
+      titulosPagar.length,
+      visibleOverdueTitles,
+      visiblePendingTitles,
+      visibleTitlesTotal,
+    ]
+  );
+
+  useEffect(() => {
+    const firstCandidate = settleCandidates[0];
 
     settleTitleForm.reset({
       installmentId: firstCandidate?.id || '',
@@ -2469,9 +2617,9 @@ export default function TitulosPagarPage() {
 
   return (
     <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
         breadcrumbs={[
           { label: t('breadcrumbs.home'), href: '/' },
           { label: t('breadcrumbs.finance'), href: '/finance' },
@@ -2504,319 +2652,332 @@ export default function TitulosPagarPage() {
               onCategoriesUpdated={refetchCategorias}
               onCostCentersUpdated={refetchCentrosCusto}
             />
-          </>
-        }
-      />
-
-      <FilterBar
-        searchPlaceholder={t('filters.searchPlaceholder')}
-        searchValue={search}
-        onSearchChange={setSearch}
-        filters={[
-          {
-            id: 'status',
-            label: t('filters.status'),
-            value: statusFilter,
-            onChange: setStatusFilter,
-            options: [
-              { value: 'all', label: t('statuses.all') },
-              { value: 'rascunho', label: t('statuses.rascunho') },
-              { value: 'aberto', label: t('statuses.aberto') },
-              { value: 'parcial', label: t('statuses.parcial') },
-              { value: 'liquidado', label: t('statuses.liquidado') },
-              { value: 'vencido', label: t('statuses.vencido') },
-              { value: 'cancelado', label: t('statuses.cancelado') },
-            ],
-          },
-        ]}
-        activeFilters={normalizedStatusFilter ? 1 : 0}
-        onClearFilters={() => setStatusFilter('all')}
-      />
-
-      <Sheet
-        open={isSettleSheetOpen}
-        onOpenChange={(open) => {
+          </>
+        }
+      />
+
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <div className="min-w-0">
+        <SearchBar
+          searchQuery={search}
+          onSearchChange={setSearch}
+          onSearch={() => undefined}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={[
+            {
+              id: 'status',
+              type: 'select',
+              value: statusFilter,
+              onChange: setStatusFilter,
+              placeholder: t('filters.status'),
+              options: [
+                { value: 'all', label: t('statuses.all') },
+                { value: 'rascunho', label: t('statuses.rascunho') },
+                { value: 'aberto', label: t('statuses.aberto') },
+                { value: 'parcial', label: t('statuses.parcial') },
+                { value: 'liquidado', label: t('statuses.liquidado') },
+                { value: 'vencido', label: t('statuses.vencido') },
+                { value: 'cancelado', label: t('statuses.cancelado') },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      <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', {
+          }
+        }}
+      >
+        <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl">
+          <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+            <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>
+
+          <Form {...settleTitleForm}>
+            <form
+              className="flex h-full flex-col overflow-hidden"
+              onSubmit={settleTitleForm.handleSubmit(handleSubmitSettleTitle)}
+            >
+              <FinanceSheetBody>
+                <FinanceSheetSection
+                  title={t('settleSheet.sections.payment.title')}
+                  description={t('settleSheet.sections.payment.description')}
+                >
+                  <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>
+                    )}
+                  />
+
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <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>
+                      )}
+                    />
+                  </div>
+                </FinanceSheetSection>
+              </FinanceSheetBody>
+
+              <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+                <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setIsSettleSheetOpen(false)}
+                  >
+                    {t('common.cancel')}
+                  </Button>
+                  <Button type="submit" disabled={isSettlingTitle}>
+                    {t('settleSheet.confirm')}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </SheetContent>
       </Sheet>
 
-      {titulosPagar.length > 0 ? (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('table.headers.document')}</TableHead>
-                <TableHead>{t('table.headers.supplier')}</TableHead>
-                <TableHead>{t('table.headers.competency')}</TableHead>
-                <TableHead>{t('table.headers.dueDate')}</TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.value')}
-                </TableHead>
-                <TableHead>{t('table.headers.category')}</TableHead>
-                <TableHead>{t('table.headers.status')}</TableHead>
-                <TableHead className="w-[50px]" />
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {titulosPagar.map((titulo) => {
-                const fornecedor = getPessoaById(titulo.fornecedorId);
-                const categoria = getCategoriaById(titulo.categoriaId);
-                const proximaParcela = titulo.parcelas.find(
-                  (p: any) => p.status === 'aberto' || p.status === 'vencido'
-                );
-
-                return (
-                  <TableRow key={titulo.id}>
-                    <TableCell className="font-medium">
-                      <Link
-                        href={`/finance/accounts-payable/installments/${titulo.id}`}
-                        className="hover:underline"
-                      >
-                        {titulo.documento}
-                      </Link>
-                      {titulo.anexos.length > 0 && (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="ml-1 inline-flex h-5 w-5 align-middle text-muted-foreground"
-                          onClick={(event) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            const firstAttachmentId =
-                              titulo.anexosDetalhes?.[0]?.id;
-                            void handleOpenAttachment(firstAttachmentId);
-                          }}
-                          aria-label={t('table.actions.openAttachment')}
-                        >
-                          <Paperclip className="h-3 w-3" />
-                        </Button>
-                      )}
-                    </TableCell>
-                    <TableCell>{fornecedor?.nome}</TableCell>
-                    <TableCell>{titulo.competencia}</TableCell>
-                    <TableCell>
-                      {proximaParcela
-                        ? formatarData(proximaParcela.vencimento)
-                        : '-'}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Money value={titulo.valorTotal} />
-                    </TableCell>
-                    <TableCell>{categoria?.nome}</TableCell>
-                    <TableCell>
-                      <StatusBadge status={titulo.status} />
-                    </TableCell>
-                    <TableCell>
-                      <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>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      ) : (
-        <EmptyState
-          icon={<FileText className="h-12 w-12" />}
-          title={t('empty.title')}
-          description={t('empty.description')}
-          actionLabel={t('newTitle.action')}
-          onAction={() => setIsNewTitleSheetOpen(true)}
-        />
-      )}
-
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
-          {t('footer.showing', {
-            filtered: titulosPagar.length,
-            total: paginatedTitlesResponse?.total || 0,
-          })}
-        </p>
-        <div className="flex items-center gap-2">
-          <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={!paginatedTitlesResponse?.next || isFetchingTitles}
-            onClick={() => setPage((current) => current + 1)}
-          >
-            {t('footer.next')}
-          </Button>
-        </div>
-      </div>
-    </Page>
-  );
-}
+      <FinancePageSection
+        title={t('list.title')}
+        description={t('list.description')}
+      >
+        {titulosPagar.length > 0 ? (
+          <div className="overflow-x-auto">
+            <Table className="min-w-[760px]">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.document')}</TableHead>
+                  <TableHead>{t('table.headers.supplier')}</TableHead>
+                  <TableHead>{t('table.headers.competency')}</TableHead>
+                  <TableHead>{t('table.headers.dueDate')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.headers.value')}
+                  </TableHead>
+                  <TableHead>{t('table.headers.category')}</TableHead>
+                  <TableHead>{t('table.headers.status')}</TableHead>
+                  <TableHead className="w-[50px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {titulosPagar.map((titulo) => {
+                  const fornecedor = getPessoaById(titulo.fornecedorId);
+                  const categoria = getCategoriaById(titulo.categoriaId);
+                  const proximaParcela = titulo.parcelas.find(
+                    (p: any) => p.status === 'aberto' || p.status === 'vencido'
+                  );
+
+                  return (
+                    <TableRow key={titulo.id} className="hover:bg-muted/30">
+                      <TableCell className="font-medium">
+                        <Link
+                          href={`/finance/accounts-payable/installments/${titulo.id}`}
+                          className="cursor-pointer hover:underline"
+                        >
+                          {titulo.documento}
+                        </Link>
+                        {titulo.anexos.length > 0 && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="ml-1 inline-flex h-5 w-5 align-middle text-muted-foreground"
+                            onClick={(event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              const firstAttachmentId =
+                                titulo.anexosDetalhes?.[0]?.id;
+                              void handleOpenAttachment(firstAttachmentId);
+                            }}
+                            aria-label={t('table.actions.openAttachment')}
+                          >
+                            <Paperclip className="h-3 w-3" />
+                          </Button>
+                        )}
+                      </TableCell>
+                      <TableCell>{fornecedor?.nome}</TableCell>
+                      <TableCell>{titulo.competencia}</TableCell>
+                      <TableCell>
+                        {proximaParcela
+                          ? formatarData(proximaParcela.vencimento)
+                          : '-'}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Money value={titulo.valorTotal} />
+                      </TableCell>
+                      <TableCell>{categoria?.nome}</TableCell>
+                      <TableCell>
+                        <StatusBadge status={titulo.status} />
+                      </TableCell>
+                      <TableCell>
+                        <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>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <div className="px-4 py-8 sm:px-6">
+            <EmptyState
+              icon={<FileText className="h-12 w-12" />}
+              title={t('empty.title')}
+              description={t('empty.description')}
+              actionLabel={t('newTitle.action')}
+              onAction={() => setIsNewTitleSheetOpen(true)}
+            />
+          </div>
+        )}
+
+        <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={paginatedTitlesResponse?.total || 0}
+            onPageChange={setPage}
+            onPageSizeChange={() => undefined}
+            pageSizeOptions={[10]}
+          />
+        </div>
+      </FinancePageSection>
+    </Page>
+  );
+}