@hed-hog/finance 0.0.300 → 0.0.301

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

@@ -1,35 +1,46 @@
 'use client';
 
-import {
-  CategoryFieldWithCreate,
-  CostCenterFieldWithCreate,
-} from '@/app/(app)/(libraries)/finance/_components/finance-entity-field-with-create';
-import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
+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 {
+  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';
 import {
   DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { FilterBar } from '@/components/ui/filter-bar';
-import {
-  Form,
-  FormControl,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Label } from '@/components/ui/label';
-import { Money } from '@/components/ui/money';
-import { Progress } from '@/components/ui/progress';
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -61,19 +72,22 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Download,
-  Edit,
-  Eye,
-  Loader2,
-  MoreHorizontal,
-  Paperclip,
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  AlertTriangle,
+  Download,
+  Edit,
+  Eye,
+  FileText,
+  Loader2,
+  MoreHorizontal,
+  Paperclip,
   Plus,
-  Send,
-  Trash2,
-  Upload,
-} from 'lucide-react';
+  Send,
+  Trash2,
+  Upload,
+  Wallet,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -628,14 +642,21 @@ function NovoTituloSheet({
           {t('newTitle.action')}
         </Button>
       </SheetTrigger>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{t('newTitle.title')}</SheetTitle>
-          <SheetDescription>{t('newTitle.description')}</SheetDescription>
-        </SheetHeader>
-        <Form {...form}>
-          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-3">
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('newTitle.title')}</SheetTitle>
+          <SheetDescription>{t('newTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('sections.main.title')}
+                description={t('sections.main.description')}
+              >
               <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
                 <div className="grid gap-2">
                   <FormLabel>{t('common.upload.label')}</FormLabel>
@@ -916,12 +937,11 @@ function NovoTituloSheet({
                     {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>
-                )}
+                {autoRedistributeInstallments && (
+                  <p className="text-xs text-muted-foreground">
+                    {t('installmentsEditor.autoRedistributeHint')}
+                  </p>
+                )}
 
                 <div className="space-y-2">
                   {installmentFields.map((installment, index) => (
@@ -1021,17 +1041,23 @@ function NovoTituloSheet({
                 )}
               </div>
 
-              <CategoryFieldWithCreate
-                form={form}
-                name="categoriaId"
-                label={t('fields.category')}
-                selectPlaceholder={t('common.select')}
-                categories={categorias}
-                categoryKind="receita"
-                onCreated={onOptionsUpdated}
-              />
-
-              <CostCenterFieldWithCreate
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.classification.title')}
+                description={t('sections.classification.description')}
+              >
+                <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')}
@@ -1065,15 +1091,20 @@ function NovoTituloSheet({
                         </SelectItem>
                       </SelectContent>
                     </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
+                <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
                   <FormItem>
                     <FormLabel>{t('fields.description')}</FormLabel>
                     <FormControl>
@@ -1083,33 +1114,39 @@ function NovoTituloSheet({
                         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>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={
+                    form.formState.isSubmitting ||
+                    isUploadingFile ||
+                    isExtractingFileData
+                  }
+                >
+                  {(isUploadingFile || isExtractingFileData) && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  {isExtractingFileData
+                    ? t('common.upload.fillingWithAi')
+                    : isUploadingFile
+                      ? t('common.upload.uploadingFile')
+                      : t('common.save')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
@@ -1536,9 +1573,9 @@ function EditarTituloSheet({
     }
   };
 
-  const handleSubmit = async (values: NewTitleFormValues) => {
-    if (!titulo?.id) {
-      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    if (!titulo?.id) {
+      showToastHandler?.('error', t('messages.invalidTitleForEdit'));
       return;
     }
 
@@ -1575,20 +1612,31 @@ function EditarTituloSheet({
       showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
     } catch {
-      showToastHandler?.('error', t('messages.updateError'));
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{t('table.actions.edit')}</SheetTitle>
-          <SheetDescription>{t('editTitle.description')}</SheetDescription>
-        </SheetHeader>
-        <Form {...form}>
-          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-3">
+      showToastHandler?.('error', t('messages.updateError'));
+    }
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('table.actions.edit')}</SheetTitle>
+          <SheetDescription>{t('editTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('sections.main.title')}
+                description={t('sections.main.description')}
+              >
               <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
                 <div className="grid gap-2">
                   <FormLabel>{t('common.upload.label')}</FormLabel>
@@ -1871,8 +1919,14 @@ function EditarTituloSheet({
                   </Label>
                 </div>
 
-                <div className="space-y-2">
-                  {installmentFields.map((installment, index) => (
+                {autoRedistributeInstallments && (
+                  <p className="text-xs text-muted-foreground">
+                    {t('installmentsEditor.autoRedistributeHint')}
+                  </p>
+                )}
+
+                <div className="space-y-2">
+                  {installmentFields.map((installment, index) => (
                     <div
                       key={installment.id}
                       className="grid grid-cols-1 items-start gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
@@ -1969,10 +2023,16 @@ function EditarTituloSheet({
                 )}
               </div>
 
-              <CategoryFieldWithCreate
-                form={form}
-                name="categoriaId"
-                label={t('fields.category')}
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.classification.title')}
+                description={t('sections.classification.description')}
+              >
+                <CategoryFieldWithCreate
+                form={form}
+                name="categoriaId"
+                label={t('fields.category')}
                 selectPlaceholder={t('common.select')}
                 categories={categorias}
                 categoryKind="receita"
@@ -2013,15 +2073,20 @@ function EditarTituloSheet({
                         </SelectItem>
                       </SelectContent>
                     </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.notes.title')}
+                description={t('sections.notes.description')}
+              >
+                <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
                   <FormItem>
                     <FormLabel>{t('fields.description')}</FormLabel>
                     <FormControl>
@@ -2031,33 +2096,39 @@ function EditarTituloSheet({
                         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>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={
+                    form.formState.isSubmitting ||
+                    isUploadingFile ||
+                    isExtractingFileData
+                  }
+                >
+                  {(isUploadingFile || isExtractingFileData) && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  {isExtractingFileData
+                    ? t('common.upload.fillingWithAi')
+                    : isUploadingFile
+                      ? t('common.upload.uploadingFile')
+                      : t('common.save')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
@@ -2077,21 +2148,20 @@ export default function TitulosReceberPage() {
     centrosCusto,
   } = data;
 
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
-  const [page, setPage] = useState(1);
-  const pageSize = 10;
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const [search, setSearch] = useState('');
+  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;
@@ -2131,9 +2201,74 @@ export default function TitulosReceberPage() {
     },
     placeholderData: (old) => old,
   });
-
-  const titulosReceber = paginatedTitlesResponse?.data || [];
-  const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
+
+  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(
     () =>
@@ -2229,9 +2364,9 @@ export default function TitulosReceberPage() {
 
   return (
     <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
         breadcrumbs={[
           { label: t('breadcrumbs.home'), href: '/' },
           { label: t('breadcrumbs.finance'), href: '/finance' },
@@ -2260,181 +2395,186 @@ export default function TitulosReceberPage() {
               }}
               onOptionsUpdated={refetchFinanceData}
             />
-          </>
-        }
-      />
-
-      <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')}
-      />
-
-      <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>
-
-      <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>
-        </div>
-      </div>
-    </Page>
-  );
-}
+          </>
+        }
+      />
+
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <div className="min-w-0">
+        <SearchBar
+          searchQuery={search}
+          onSearchChange={setSearch}
+          onSearch={() => undefined}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={[
+            {
+              id: 'status',
+              type: 'select',
+              value: statusFilter,
+              onChange: setStatusFilter,
+              placeholder: t('filters.status'),
+              options: [
+                { value: 'all', label: t('statuses.all') },
+                { value: '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>
+
+      <FinancePageSection
+        title={t('list.title')}
+        description={t('list.description')}
+      >
+        {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>
+      </FinancePageSection>
+    </Page>
+  );
+}