@hed-hog/finance 0.0.300 → 0.0.302

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

@@ -4,8 +4,19 @@ 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 { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -16,7 +27,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { FilterBar } from '@/components/ui/filter-bar';
 import {
   Form,
   FormControl,
@@ -27,6 +37,7 @@ import {
 } 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';
@@ -63,9 +74,11 @@ import {
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  AlertTriangle,
   Download,
   Edit,
   Eye,
+  FileText,
   Loader2,
   MoreHorizontal,
   Paperclip,
@@ -73,6 +86,7 @@ import {
   Send,
   Trash2,
   Upload,
+  Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -628,485 +642,520 @@ function NovoTituloSheet({
           {t('newTitle.action')}
         </Button>
       </SheetTrigger>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl gap-0">
+        <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="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;
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody className="pt-0">
+              <FinanceSheetSection className="pt-0 mt-0">
+                <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+                  <div className="grid gap-2">
+                    <FormLabel>{t('common.upload.label')}</FormLabel>
+                    <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
                       }
+                    />
 
-                      clearUploadedFile();
-                      void uploadRelatedFile(file);
-                    }}
-                    disabled={
-                      isUploadingFile ||
-                      isExtractingFileData ||
-                      form.formState.isSubmitting
-                    }
-                  />
-
-                  <div className="grid w-full grid-cols-2 gap-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          className={
-                            uploadedFileId ? 'w-full' : 'col-span-2 w-full'
-                          }
-                          onClick={handleSelectFile}
-                          aria-label={
-                            uploadedFileId
-                              ? t('common.upload.change')
-                              : t('common.upload.upload')
-                          }
-                          disabled={
-                            isUploadingFile ||
-                            isExtractingFileData ||
-                            form.formState.isSubmitting
-                          }
-                        >
-                          {uploadedFileId ? (
-                            <Upload className="h-4 w-4" />
-                          ) : (
-                            <>
-                              <Upload className="mr-2 h-4 w-4" />
-                              {t('common.upload.upload')}
-                            </>
-                          )}
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {uploadedFileId
-                          ? t('common.upload.change')
-                          : t('common.upload.upload')}
-                      </TooltipContent>
-                    </Tooltip>
-
-                    {uploadedFileId && (
+                    <div className="grid w-full grid-cols-2 gap-2">
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Button
                             type="button"
                             variant="outline"
-                            className="w-full"
-                            onClick={clearUploadedFile}
-                            aria-label={t('common.upload.remove')}
+                            className={
+                              uploadedFileId ? 'w-full' : 'col-span-2 w-full'
+                            }
+                            onClick={handleSelectFile}
+                            aria-label={
+                              uploadedFileId
+                                ? t('common.upload.change')
+                                : t('common.upload.upload')
+                            }
                             disabled={
                               isUploadingFile ||
                               isExtractingFileData ||
                               form.formState.isSubmitting
                             }
                           >
-                            <Trash2 className="h-4 w-4" />
+                            {uploadedFileId ? (
+                              <Upload className="h-4 w-4" />
+                            ) : (
+                              <>
+                                <Upload className="mr-2 h-4 w-4" />
+                                {t('common.upload.upload')}
+                              </>
+                            )}
                           </Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                          {t('common.upload.remove')}
+                          {uploadedFileId
+                            ? t('common.upload.change')
+                            : t('common.upload.upload')}
                         </TooltipContent>
                       </Tooltip>
-                    )}
-                  </div>
 
-                  <div className="space-y-1">
-                    {uploadedFileId && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {t('common.upload.selectedPrefix')} {uploadedFileName}
-                      </p>
-                    )}
+                      {uploadedFileId && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              className="w-full"
+                              onClick={clearUploadedFile}
+                              aria-label={t('common.upload.remove')}
+                              disabled={
+                                isUploadingFile ||
+                                isExtractingFileData ||
+                                form.formState.isSubmitting
+                              }
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {t('common.upload.remove')}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
 
-                    {isUploadingFile && !isExtractingFileData && (
-                      <div className="space-y-1">
-                        <Progress value={uploadProgress} className="h-2" />
-                        <p className="text-xs text-muted-foreground">
-                          {t('common.upload.uploadingProgress', {
-                            progress: uploadProgress,
-                          })}
+                    <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>
-                      </div>
-                    )}
+                      )}
 
-                    {isExtractingFileData && (
-                      <p className="flex items-center gap-2 text-xs text-primary">
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        {t('common.upload.processingAi')}
-                      </p>
-                    )}
+                      {isUploadingFile && !isExtractingFileData && (
+                        <div className="space-y-1">
+                          <Progress value={uploadProgress} className="h-2" />
+                          <p className="text-xs text-muted-foreground">
+                            {t('common.upload.uploadingProgress', {
+                              progress: uploadProgress,
+                            })}
+                          </p>
+                        </div>
+                      )}
 
-                    {!isExtractingFileData &&
-                      extractionConfidence !== null &&
-                      extractionConfidence < 70 && (
-                        <p className="text-xs text-destructive">
-                          {t('common.upload.lowConfidence', {
-                            confidence: Math.round(extractionConfidence),
-                          })}
+                      {isExtractingFileData && (
+                        <p className="flex items-center gap-2 text-xs text-primary">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          {t('common.upload.processingAi')}
                         </p>
                       )}
 
-                    {!isExtractingFileData && extractionWarnings.length > 0 && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {extractionWarnings[0]}
-                      </p>
-                    )}
+                      {!isExtractingFileData &&
+                        extractionConfidence !== null &&
+                        extractionConfidence < 70 && (
+                          <p className="text-xs text-destructive">
+                            {t('common.upload.lowConfidence', {
+                              confidence: Math.round(extractionConfidence),
+                            })}
+                          </p>
+                        )}
+
+                      {!isExtractingFileData &&
+                        extractionWarnings.length > 0 && (
+                          <p className="truncate text-xs text-muted-foreground">
+                            {extractionWarnings[0]}
+                          </p>
+                        )}
+                    </div>
                   </div>
+
+                  <FormField
+                    control={form.control}
+                    name="documento"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.document')}</FormLabel>
+                        <FormControl>
+                          <Input placeholder="FAT-00000" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                 </div>
 
-                <FormField
-                  control={form.control}
-                  name="documento"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.document')}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="FAT-00000" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+                <PersonFieldWithCreate
+                  form={form}
+                  name="clienteId"
+                  label={t('fields.client')}
+                  entityLabel="cliente"
+                  selectPlaceholder={t('common.select')}
                 />
-              </div>
 
-              <PersonFieldWithCreate
-                form={form}
-                name="clienteId"
-                label={t('fields.client')}
-                entityLabel="cliente"
-                selectPlaceholder={t('common.select')}
-              />
+                <div className="grid gap-4 xl:grid-cols-2">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="competencia"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('fields.competency')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="month"
+                              {...field}
+                              value={field.value || ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="vencimento"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('fields.dueDate')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="date"
+                              {...field}
+                              value={field.value || ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="valor"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{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>
 
-              <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>
+                <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-receivable"
+                      checked={autoRedistributeInstallments}
+                      onCheckedChange={(checked) =>
+                        setAutoRedistributeInstallments(checked === true)
+                      }
+                    />
+                    <Label
+                      htmlFor="auto-redistribute-installments-receivable"
+                      className="text-xs text-muted-foreground"
+                    >
+                      {t('installmentsEditor.autoRedistributeLabel')}
+                    </Label>
+                  </div>
+                  {autoRedistributeInstallments && (
+                    <p className="text-xs text-muted-foreground">
+                      {t('installmentsEditor.autoRedistributeHint')}
+                    </p>
                   )}
-                />
 
-                <FormField
-                  control={form.control}
-                  name="vencimento"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.dueDate')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="date"
-                          {...field}
-                          value={field.value || ''}
+                  <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>
+                          )}
                         />
-                      </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"
+                        <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>
+                          )}
                         />
-                      </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 md:grid-cols-2 xl:grid-cols-3">
+                  <CategoryFieldWithCreate
+                    form={form}
+                    name="categoriaId"
+                    label={t('fields.category')}
+                    selectPlaceholder={t('common.select')}
+                    categories={categorias}
+                    categoryKind="receita"
+                    onCreated={onOptionsUpdated}
+                  />
 
+                  <CostCenterFieldWithCreate
+                    form={form}
+                    name="centroCustoId"
+                    label={t('fields.costCenter')}
+                    selectPlaceholder={t('common.select')}
+                    costCenters={centrosCusto}
+                    onCreated={onOptionsUpdated}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="canal"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.channel')}</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder={t('common.select')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="boleto">
+                              {t('channels.boleto')}
+                            </SelectItem>
+                            <SelectItem value="pix">PIX</SelectItem>
+                            <SelectItem value="cartao">
+                              {t('channels.card')}
+                            </SelectItem>
+                            <SelectItem value="transferencia">
+                              {t('channels.transfer')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
                 <FormField
                   control={form.control}
-                  name="installmentsCount"
+                  name="descricao"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        {t('installmentsEditor.countLabel')}
-                      </FormLabel>
+                      <FormLabel>{t('fields.description')}</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
-                            );
-                          }}
+                        <Textarea
+                          placeholder={t('newTitle.descriptionPlaceholder')}
+                          {...field}
+                          value={field.value || ''}
                         />
                       </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-receivable"
-                    checked={autoRedistributeInstallments}
-                    onCheckedChange={(checked) =>
-                      setAutoRedistributeInstallments(checked === true)
-                    }
-                  />
-                  <Label
-                    htmlFor="auto-redistribute-installments-receivable"
-                    className="text-xs text-muted-foreground"
-                  >
-                    {t('installmentsEditor.autoRedistributeLabel')}
-                  </Label>
-                </div>
-                {autoRedistributeInstallments && (
-                  <p className="text-xs text-muted-foreground">
-                    A redistribuição ocorre ao parar de digitar e ao sair do
-                    campo.
-                  </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'
-                  }`}
+              </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={() => setOpen(false)}
                 >
-                  {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>
-                )}
+                  {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>
-
-              <CategoryFieldWithCreate
-                form={form}
-                name="categoriaId"
-                label={t('fields.category')}
-                selectPlaceholder={t('common.select')}
-                categories={categorias}
-                categoryKind="receita"
-                onCreated={onOptionsUpdated}
-              />
-
-              <CostCenterFieldWithCreate
-                form={form}
-                name="centroCustoId"
-                label={t('fields.costCenter')}
-                selectPlaceholder={t('common.select')}
-                costCenters={centrosCusto}
-                onCreated={onOptionsUpdated}
-              />
-
-              <FormField
-                control={form.control}
-                name="canal"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.channel')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="boleto">
-                          {t('channels.boleto')}
-                        </SelectItem>
-                        <SelectItem value="pix">PIX</SelectItem>
-                        <SelectItem value="cartao">
-                          {t('channels.card')}
-                        </SelectItem>
-                        <SelectItem value="transferencia">
-                          {t('channels.transfer')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.description')}</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder={t('newTitle.descriptionPlaceholder')}
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="flex flex-col gap-2 py-4">
-              <Button
-                type="submit"
-                disabled={
-                  form.formState.isSubmitting ||
-                  isUploadingFile ||
-                  isExtractingFileData
-                }
-              >
-                {(isUploadingFile || isExtractingFileData) && (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                )}
-                {isExtractingFileData
-                  ? t('common.upload.fillingWithAi')
-                  : isUploadingFile
-                    ? t('common.upload.uploadingFile')
-                    : t('common.save')}
-              </Button>
             </div>
           </form>
         </Form>
@@ -1579,482 +1628,527 @@ function EditarTituloSheet({
     }
   };
 
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
+      <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="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;
+          <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 lg: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
                       }
+                    />
 
-                      clearUploadedFile();
-                      void uploadRelatedFile(file);
-                    }}
-                    disabled={
-                      isUploadingFile ||
-                      isExtractingFileData ||
-                      form.formState.isSubmitting
-                    }
-                  />
-
-                  <div className="grid w-full grid-cols-2 gap-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          className={
-                            uploadedFileId ? 'w-full' : 'col-span-2 w-full'
-                          }
-                          onClick={handleSelectFile}
-                          aria-label={
-                            uploadedFileId
-                              ? t('common.upload.change')
-                              : t('common.upload.upload')
-                          }
-                          disabled={
-                            isUploadingFile ||
-                            isExtractingFileData ||
-                            form.formState.isSubmitting
-                          }
-                        >
-                          {uploadedFileId ? (
-                            <Upload className="h-4 w-4" />
-                          ) : (
-                            <>
-                              <Upload className="mr-2 h-4 w-4" />
-                              {t('common.upload.upload')}
-                            </>
-                          )}
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {uploadedFileId
-                          ? t('common.upload.change')
-                          : t('common.upload.upload')}
-                      </TooltipContent>
-                    </Tooltip>
-
-                    {uploadedFileId && (
+                    <div className="grid w-full grid-cols-2 gap-2">
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Button
                             type="button"
                             variant="outline"
-                            className="w-full"
-                            onClick={clearUploadedFile}
-                            aria-label={t('common.upload.remove')}
+                            className={
+                              uploadedFileId ? 'w-full' : 'col-span-2 w-full'
+                            }
+                            onClick={handleSelectFile}
+                            aria-label={
+                              uploadedFileId
+                                ? t('common.upload.change')
+                                : t('common.upload.upload')
+                            }
                             disabled={
                               isUploadingFile ||
                               isExtractingFileData ||
                               form.formState.isSubmitting
                             }
                           >
-                            <Trash2 className="h-4 w-4" />
+                            {uploadedFileId ? (
+                              <Upload className="h-4 w-4" />
+                            ) : (
+                              <>
+                                <Upload className="mr-2 h-4 w-4" />
+                                {t('common.upload.upload')}
+                              </>
+                            )}
                           </Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                          {t('common.upload.remove')}
+                          {uploadedFileId
+                            ? t('common.upload.change')
+                            : t('common.upload.upload')}
                         </TooltipContent>
                       </Tooltip>
-                    )}
-                  </div>
 
-                  <div className="space-y-1">
-                    {(uploadedFileId || uploadedFileName) && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {t('common.upload.selectedPrefix')} {uploadedFileName}
-                      </p>
-                    )}
+                      {uploadedFileId && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              className="w-full"
+                              onClick={clearUploadedFile}
+                              aria-label={t('common.upload.remove')}
+                              disabled={
+                                isUploadingFile ||
+                                isExtractingFileData ||
+                                form.formState.isSubmitting
+                              }
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {t('common.upload.remove')}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
 
-                    {isUploadingFile && !isExtractingFileData && (
-                      <div className="space-y-1">
-                        <Progress value={uploadProgress} className="h-2" />
-                        <p className="text-xs text-muted-foreground">
-                          {t('common.upload.uploadingProgress', {
-                            progress: uploadProgress,
-                          })}
+                    <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>
-                      </div>
-                    )}
+                      )}
 
-                    {isExtractingFileData && (
-                      <p className="flex items-center gap-2 text-xs text-primary">
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        {t('common.upload.processingAi')}
-                      </p>
-                    )}
+                      {isUploadingFile && !isExtractingFileData && (
+                        <div className="space-y-1">
+                          <Progress value={uploadProgress} className="h-2" />
+                          <p className="text-xs text-muted-foreground">
+                            {t('common.upload.uploadingProgress', {
+                              progress: uploadProgress,
+                            })}
+                          </p>
+                        </div>
+                      )}
 
-                    {!isExtractingFileData &&
-                      extractionConfidence !== null &&
-                      extractionConfidence < 70 && (
-                        <p className="text-xs text-destructive">
-                          {t('common.upload.lowConfidence', {
-                            confidence: Math.round(extractionConfidence),
-                          })}
+                      {isExtractingFileData && (
+                        <p className="flex items-center gap-2 text-xs text-primary">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          {t('common.upload.processingAi')}
                         </p>
                       )}
 
-                    {!isExtractingFileData && extractionWarnings.length > 0 && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {extractionWarnings[0]}
-                      </p>
-                    )}
+                      {!isExtractingFileData &&
+                        extractionConfidence !== null &&
+                        extractionConfidence < 70 && (
+                          <p className="text-xs text-destructive">
+                            {t('common.upload.lowConfidence', {
+                              confidence: Math.round(extractionConfidence),
+                            })}
+                          </p>
+                        )}
+
+                      {!isExtractingFileData &&
+                        extractionWarnings.length > 0 && (
+                          <p className="truncate text-xs text-muted-foreground">
+                            {extractionWarnings[0]}
+                          </p>
+                        )}
+                    </div>
                   </div>
+
+                  <FormField
+                    control={form.control}
+                    name="documento"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.document')}</FormLabel>
+                        <FormControl>
+                          <Input placeholder="FAT-00000" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                 </div>
 
-                <FormField
-                  control={form.control}
-                  name="documento"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.document')}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="FAT-00000" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+                <PersonFieldWithCreate
+                  form={form}
+                  name="clienteId"
+                  label={t('fields.client')}
+                  entityLabel="cliente"
+                  selectPlaceholder={t('common.select')}
                 />
-              </div>
 
-              <PersonFieldWithCreate
-                form={form}
-                name="clienteId"
-                label={t('fields.client')}
-                entityLabel="cliente"
-                selectPlaceholder={t('common.select')}
-              />
+                <div className="grid gap-4 xl:grid-cols-2">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="competencia"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('fields.competency')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="month"
+                              {...field}
+                              value={field.value || ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="vencimento"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('fields.dueDate')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="date"
+                              {...field}
+                              value={field.value || ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
 
-              <div className="grid 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>
+                  <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>
+                </div>
+
+                <div className="space-y-3 rounded-md border p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-medium">
+                      {t('installmentsEditor.title')}
+                    </p>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setIsInstallmentsEdited(false);
+                        replaceInstallments(
+                          buildEqualInstallments(
+                            form.getValues('installmentsCount'),
+                            form.getValues('valor'),
+                            form.getValues('vencimento')
+                          )
+                        );
+                      }}
+                    >
+                      {t('installmentsEditor.recalculate')}
+                    </Button>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="auto-redistribute-installments-edit-receivable"
+                      checked={autoRedistributeInstallments}
+                      onCheckedChange={(checked) =>
+                        setAutoRedistributeInstallments(checked === true)
+                      }
+                    />
+                    <Label
+                      htmlFor="auto-redistribute-installments-edit-receivable"
+                      className="text-xs text-muted-foreground"
+                    >
+                      {t('installmentsEditor.autoRedistributeLabel')}
+                    </Label>
+                  </div>
+
+                  {autoRedistributeInstallments && (
+                    <p className="text-xs text-muted-foreground">
+                      {t('installmentsEditor.autoRedistributeHint')}
+                    </p>
                   )}
-                />
 
-                <FormField
-                  control={form.control}
-                  name="vencimento"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.dueDate')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="date"
-                          {...field}
-                          value={field.value || ''}
+                  <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>
+                          )}
                         />
-                      </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"
+                        <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>
+                          )}
                         />
-                      </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 md:grid-cols-2 xl:grid-cols-3">
+                  <CategoryFieldWithCreate
+                    form={form}
+                    name="categoriaId"
+                    label={t('fields.category')}
+                    selectPlaceholder={t('common.select')}
+                    categories={categorias}
+                    categoryKind="receita"
+                    onCreated={onOptionsUpdated}
+                  />
+
+                  <CostCenterFieldWithCreate
+                    form={form}
+                    name="centroCustoId"
+                    label={t('fields.costCenter')}
+                    selectPlaceholder={t('common.select')}
+                    costCenters={centrosCusto}
+                    onCreated={onOptionsUpdated}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="canal"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('fields.channel')}</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder={t('common.select')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="boleto">
+                              {t('channels.boleto')}
+                            </SelectItem>
+                            <SelectItem value="pix">PIX</SelectItem>
+                            <SelectItem value="cartao">
+                              {t('channels.card')}
+                            </SelectItem>
+                            <SelectItem value="transferencia">
+                              {t('channels.transfer')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </FinanceSheetSection>
 
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
                 <FormField
                   control={form.control}
-                  name="installmentsCount"
+                  name="descricao"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        {t('installmentsEditor.countLabel')}
-                      </FormLabel>
+                      <FormLabel>{t('fields.description')}</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);
-                          }}
+                        <Textarea
+                          placeholder={t('newTitle.descriptionPlaceholder')}
+                          {...field}
+                          value={field.value || ''}
                         />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
-              </div>
-
-              <div className="space-y-3 rounded-md border p-3">
-                <div className="flex items-center justify-between gap-2">
-                  <p className="text-sm font-medium">
-                    {t('installmentsEditor.title')}
-                  </p>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setIsInstallmentsEdited(false);
-                      replaceInstallments(
-                        buildEqualInstallments(
-                          form.getValues('installmentsCount'),
-                          form.getValues('valor'),
-                          form.getValues('vencimento')
-                        )
-                      );
-                    }}
-                  >
-                    {t('installmentsEditor.recalculate')}
-                  </Button>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <Checkbox
-                    id="auto-redistribute-installments-edit-receivable"
-                    checked={autoRedistributeInstallments}
-                    onCheckedChange={(checked) =>
-                      setAutoRedistributeInstallments(checked === true)
-                    }
-                  />
-                  <Label
-                    htmlFor="auto-redistribute-installments-edit-receivable"
-                    className="text-xs text-muted-foreground"
-                  >
-                    {t('installmentsEditor.autoRedistributeLabel')}
-                  </Label>
-                </div>
-
-                <div className="space-y-2">
-                  {installmentFields.map((installment, index) => (
-                    <div
-                      key={installment.id}
-                      className="grid grid-cols-1 items-start gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
-                    >
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        #{index + 1}
-                      </div>
-
-                      <FormField
-                        control={form.control}
-                        name={`installments.${index}.dueDate` as const}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('installmentsEditor.dueDateLabel')}
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                type="date"
-                                {...field}
-                                value={field.value || ''}
-                                onChange={(event) => {
-                                  setIsInstallmentsEdited(true);
-                                  field.onChange(event);
-                                }}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name={`installments.${index}.amount` as const}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('installmentsEditor.amountLabel')}
-                            </FormLabel>
-                            <FormControl>
-                              <InputMoney
-                                ref={field.ref}
-                                name={field.name}
-                                value={field.value}
-                                onBlur={() => {
-                                  field.onBlur();
-
-                                  if (!autoRedistributeInstallments) {
-                                    return;
-                                  }
-
-                                  clearScheduledRedistribution(index);
-                                  runInstallmentRedistribution(index);
-                                }}
-                                onValueChange={(value) => {
-                                  setIsInstallmentsEdited(true);
-                                  field.onChange(value ?? 0);
-
-                                  if (!autoRedistributeInstallments) {
-                                    return;
-                                  }
-
-                                  scheduleInstallmentRedistribution(index);
-                                }}
-                                placeholder="0,00"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  ))}
-                </div>
-
-                <p
-                  className={`text-xs ${
-                    installmentsDiffCents === 0
-                      ? 'text-muted-foreground'
-                      : 'text-destructive'
-                  }`}
+              </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
+                  }
                 >
-                  {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>
-                )}
+                  {(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>
-
-              <CategoryFieldWithCreate
-                form={form}
-                name="categoriaId"
-                label={t('fields.category')}
-                selectPlaceholder={t('common.select')}
-                categories={categorias}
-                categoryKind="receita"
-                onCreated={onOptionsUpdated}
-              />
-
-              <CostCenterFieldWithCreate
-                form={form}
-                name="centroCustoId"
-                label={t('fields.costCenter')}
-                selectPlaceholder={t('common.select')}
-                costCenters={centrosCusto}
-                onCreated={onOptionsUpdated}
-              />
-
-              <FormField
-                control={form.control}
-                name="canal"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.channel')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="boleto">
-                          {t('channels.boleto')}
-                        </SelectItem>
-                        <SelectItem value="pix">PIX</SelectItem>
-                        <SelectItem value="cartao">
-                          {t('channels.card')}
-                        </SelectItem>
-                        <SelectItem value="transferencia">
-                          {t('channels.transfer')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.description')}</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder={t('newTitle.descriptionPlaceholder')}
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="flex flex-col gap-2 py-4">
-              <Button
-                type="submit"
-                disabled={
-                  form.formState.isSubmitting ||
-                  isUploadingFile ||
-                  isExtractingFileData
-                }
-              >
-                {(isUploadingFile || isExtractingFileData) && (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                )}
-                {isExtractingFileData
-                  ? t('common.upload.fillingWithAi')
-                  : isUploadingFile
-                    ? t('common.upload.uploadingFile')
-                    : t('common.save')}
-              </Button>
             </div>
           </form>
         </Form>
@@ -2080,18 +2174,14 @@ export default function TitulosReceberPage() {
   const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
 
   const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
   const [page, setPage] = useState(1);
   const pageSize = 10;
 
   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;
@@ -2133,6 +2223,73 @@ export default function TitulosReceberPage() {
   });
 
   const titulosReceber = paginatedTitlesResponse?.data || [];
+  const visibleTitlesTotal = useMemo(
+    () =>
+      titulosReceber.reduce(
+        (acc, title) => acc + Number(title?.valorTotal || 0),
+        0
+      ),
+    [titulosReceber]
+  );
+  const visiblePendingTitles = useMemo(
+    () =>
+      titulosReceber.filter((title) =>
+        ['aberto', 'parcial', 'vencido'].includes(String(title?.status || ''))
+      ).length,
+    [titulosReceber]
+  );
+  const visibleOverdueTitles = useMemo(
+    () =>
+      titulosReceber.filter(
+        (title) =>
+          title?.status === 'vencido' ||
+          (Array.isArray(title?.parcelas) &&
+            title.parcelas.some(
+              (installment: any) => installment.status === 'vencido'
+            ))
+      ).length,
+    [titulosReceber]
+  );
+  const summaryCards = useMemo(
+    () => [
+      {
+        key: 'visible',
+        title: t('summary.cards.visible.title'),
+        value: titulosReceber.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,
+      titulosReceber.length,
+      visibleOverdueTitles,
+      visiblePendingTitles,
+      visibleTitlesTotal,
+    ]
+  );
   const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
 
   const editingTitle = useMemo(
@@ -2264,177 +2421,179 @@ export default function TitulosReceberPage() {
         }
       />
 
-      <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: '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')}
-      />
+      <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.headers.document')}</TableHead>
-              <TableHead>{t('table.headers.client')}</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.channel')}</TableHead>
-              <TableHead>{t('table.headers.status')}</TableHead>
-              <TableHead className="w-[50px]" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {titulosReceber.map((titulo) => {
-              const cliente = getPessoaById(titulo.clienteId);
-              const canal =
-                canalBadge[titulo.canal as keyof typeof canalBadge] ||
-                canalBadge.transferencia;
-              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-receivable/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>{cliente?.nome}</TableCell>
-                  <TableCell>{titulo.competencia}</TableCell>
-                  <TableCell>
-                    {proximaParcela
-                      ? formatarData(proximaParcela.vencimento)
-                      : '-'}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <Money value={titulo.valorTotal} />
-                  </TableCell>
-                  <TableCell>
-                    <Badge className={canal.className} variant="outline">
-                      {canal.label}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <StatusBadge status={titulo.status} />
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                          <span className="sr-only">
-                            {t('table.actions.srActions')}
-                          </span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link
-                            href={`/finance/accounts-receivable/installments/${titulo.id}`}
-                          >
-                            <Eye className="mr-2 h-4 w-4" />
-                            {t('table.actions.viewDetails')}
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          disabled={titulo.status !== 'rascunho'}
-                          onClick={() => setEditingTitleId(titulo.id)}
-                        >
-                          <Edit className="mr-2 h-4 w-4" />
-                          {t('table.actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          disabled={
-                            !['aberto', 'parcial'].includes(titulo.status)
-                          }
-                        >
-                          <Download className="mr-2 h-4 w-4" />
-                          {t('table.actions.registerReceipt')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Send className="mr-2 h-4 w-4" />
-                          {t('table.actions.sendCollection')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
+      <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: '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>
 
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
-          {t('footer.showing', {
-            filtered: titulosReceber.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>
+      <FinancePageSection className="border-none shadow-none p-0">
+        {titulosReceber.length > 0 ? (
+          <div className="overflow-x-auto">
+            <Table className="min-w-[760px]">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.document')}</TableHead>
+                  <TableHead>{t('table.headers.client')}</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.channel')}</TableHead>
+                  <TableHead>{t('table.headers.status')}</TableHead>
+                  <TableHead className="w-[50px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {titulosReceber.map((titulo) => {
+                  const cliente = getPessoaById(titulo.clienteId);
+                  const canal =
+                    canalBadge[titulo.canal as keyof typeof canalBadge] ||
+                    canalBadge.transferencia;
+                  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-receivable/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>{cliente?.nome}</TableCell>
+                      <TableCell>{titulo.competencia}</TableCell>
+                      <TableCell>
+                        {proximaParcela
+                          ? formatarData(proximaParcela.vencimento)
+                          : '-'}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Money value={titulo.valorTotal} />
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={canal.className} variant="outline">
+                          {canal.label}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={titulo.status} />
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <MoreHorizontal className="h-4 w-4" />
+                              <span className="sr-only">
+                                {t('table.actions.srActions')}
+                              </span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem asChild>
+                              <Link
+                                href={`/finance/accounts-receivable/installments/${titulo.id}`}
+                              >
+                                <Eye className="mr-2 h-4 w-4" />
+                                {t('table.actions.viewDetails')}
+                              </Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              disabled={titulo.status !== 'rascunho'}
+                              onClick={() => setEditingTitleId(titulo.id)}
+                            >
+                              <Edit className="mr-2 h-4 w-4" />
+                              {t('table.actions.edit')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              disabled={
+                                !['aberto', 'parcial'].includes(titulo.status)
+                              }
+                            >
+                              <Download className="mr-2 h-4 w-4" />
+                              {t('table.actions.registerReceipt')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <Send className="mr-2 h-4 w-4" />
+                              {t('table.actions.sendCollection')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </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={() => void refetchTitles()}
+            />
+          </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>
-      </div>
+      </FinancePageSection>
     </Page>
   );
 }