@hed-hog/finance 0.0.235 → 0.0.237

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

@@ -1,883 +1,865 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { FilterBar } from '@/components/ui/filter-bar';
-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 { Money } from '@/components/ui/money';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  CheckCircle,
-  Download,
-  Edit,
-  Eye,
-  Loader2,
-  MoreHorizontal,
-  Paperclip,
-  Plus,
-  Undo,
-  XCircle,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { formatarData } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-const newTitleFormSchema = z.object({
-  documento: z.string().trim().min(1, 'Documento é obrigatório'),
-  fornecedorId: z.string().min(1, 'Fornecedor é obrigatório'),
-  competencia: z.string().optional(),
-  vencimento: z.string().min(1, 'Vencimento é obrigatório'),
-  valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
-  categoriaId: z.string().optional(),
-  centroCustoId: z.string().optional(),
-  metodo: z.string().optional(),
-  descricao: z.string().optional(),
-});
-
-type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
-
-function NovoTituloSheet({
-  pessoas,
-  categorias,
-  centrosCusto,
-  t,
-  onCreated,
-}: {
-  pessoas: any[];
-  categorias: any[];
-  centrosCusto: any[];
-  t: ReturnType<typeof useTranslations>;
-  onCreated: () => Promise<any> | void;
-}) {
-  const { request, showToastHandler } = useApp();
-  const [open, setOpen] = useState(false);
-  const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
-  const [uploadedFileName, setUploadedFileName] = useState('');
-  const [isUploadingFile, setIsUploadingFile] = useState(false);
-  const [isExtractingFileData, setIsExtractingFileData] = useState(false);
-  const [extractionConfidence, setExtractionConfidence] = useState<
-    number | null
-  >(null);
-  const [extractionWarnings, setExtractionWarnings] = useState<string[]>([]);
-  const [uploadProgress, setUploadProgress] = useState(0);
-
-  const normalizeFilenameForDisplay = (filename: string) => {
-    if (!filename) {
-      return filename;
-    }
-
-    if (!/Ã.|Â.|â[\u0080-\u00BF]/.test(filename)) {
-      return filename;
-    }
-
-    try {
-      const bytes = Uint8Array.from(filename, (char) => char.charCodeAt(0));
-      const decoded = new TextDecoder('utf-8').decode(bytes);
-      return /Ã.|Â.|â[\u0080-\u00BF]/.test(decoded) ? filename : decoded;
-    } catch {
-      return filename;
-    }
-  };
-
-  const form = useForm<NewTitleFormValues>({
-    resolver: zodResolver(newTitleFormSchema),
-    defaultValues: {
-      documento: '',
-      fornecedorId: '',
-      competencia: '',
-      vencimento: '',
-      valor: 0,
-      categoriaId: '',
-      centroCustoId: '',
-      metodo: '',
-      descricao: '',
-    },
-  });
-
-  const handleSubmit = async (values: NewTitleFormValues) => {
-    try {
-      await request({
-        url: '/finance/accounts-payable/installments',
-        method: 'POST',
-        data: {
-          document_number: values.documento,
-          person_id: Number(values.fornecedorId),
-          competence_date: values.competencia
-            ? `${values.competencia}-01`
-            : undefined,
-          due_date: values.vencimento,
-          total_amount: values.valor,
-          finance_category_id: values.categoriaId
-            ? Number(values.categoriaId)
-            : undefined,
-          cost_center_id: values.centroCustoId
-            ? Number(values.centroCustoId)
-            : undefined,
-          payment_channel: values.metodo || undefined,
-          description: values.descricao?.trim() || undefined,
-          attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
-        },
-      });
-
-      await onCreated();
-      form.reset();
-      setUploadedFileId(null);
-      setUploadedFileName('');
-      setExtractionConfidence(null);
-      setExtractionWarnings([]);
-      setOpen(false);
-      showToastHandler?.('success', 'Título criado com sucesso');
-    } catch {
-      showToastHandler?.('error', 'Erro ao criar título');
-    }
-  };
-
-  const handleCancel = () => {
-    form.reset();
-    setUploadedFileId(null);
-    setUploadedFileName('');
-    setExtractionConfidence(null);
-    setExtractionWarnings([]);
-    setUploadProgress(0);
-    setOpen(false);
-  };
-
-  const uploadRelatedFile = async (file: File) => {
-    setIsUploadingFile(true);
-    setUploadProgress(0);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('destination', 'finance/titles');
-
-      const { data } = await request<{ id: number; filename: string }>({
-        url: '/file',
-        method: 'POST',
-        data: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-        onUploadProgress: (event) => {
-          if (!event.total) {
-            return;
-          }
-
-          const progress = Math.round((event.loaded * 100) / event.total);
-          setUploadProgress(progress);
-        },
-      });
-
-      if (!data?.id) {
-        throw new Error('Arquivo inválido');
-      }
-
-      setUploadedFileId(data.id);
-      setUploadedFileName(
-        normalizeFilenameForDisplay(data.filename || file.name)
-      );
-      setUploadProgress(100);
-      showToastHandler?.('success', 'Arquivo relacionado com sucesso');
-
-      setIsExtractingFileData(true);
-      try {
-        const extraction = await request<{
-          documento?: string | null;
-          fornecedorId?: string;
-          competencia?: string;
-          vencimento?: string;
-          valor?: number | null;
-          categoriaId?: string;
-          centroCustoId?: string;
-          metodo?: string;
-          descricao?: string | null;
-          confidence?: number | null;
-          confidenceLevel?: 'low' | 'high' | null;
-          warnings?: string[];
-        }>({
-          url: '/finance/accounts-payable/installments/extract-from-file',
-          method: 'POST',
-          data: {
-            file_id: data.id,
-          },
-        });
-
-        const extracted = extraction.data || {};
-        setExtractionConfidence(
-          typeof extracted.confidence === 'number' ? extracted.confidence : null
-        );
-        setExtractionWarnings(
-          Array.isArray(extracted.warnings)
-            ? extracted.warnings.filter(Boolean)
-            : []
-        );
-
-        if (extracted.documento) {
-          form.setValue('documento', extracted.documento, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.fornecedorId) {
-          form.setValue('fornecedorId', extracted.fornecedorId, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.competencia) {
-          form.setValue('competencia', extracted.competencia, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.vencimento) {
-          form.setValue('vencimento', extracted.vencimento, {
-            shouldValidate: true,
-          });
-        }
-
-        if (typeof extracted.valor === 'number' && extracted.valor > 0) {
-          form.setValue('valor', extracted.valor, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.categoriaId) {
-          form.setValue('categoriaId', extracted.categoriaId, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.centroCustoId) {
-          form.setValue('centroCustoId', extracted.centroCustoId, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.metodo) {
-          form.setValue('metodo', extracted.metodo, {
-            shouldValidate: true,
-          });
-        }
-
-        if (extracted.descricao) {
-          form.setValue('descricao', extracted.descricao, {
-            shouldValidate: true,
-          });
-        }
-
-        showToastHandler?.(
-          'success',
-          'Dados da fatura extraídos e preenchidos automaticamente'
-        );
-      } catch {
-        setExtractionConfidence(null);
-        setExtractionWarnings([]);
-        showToastHandler?.(
-          'error',
-          'Não foi possível extrair os dados automaticamente'
-        );
-      } finally {
-        setIsExtractingFileData(false);
-      }
-    } catch {
-      setUploadedFileId(null);
-      setUploadedFileName('');
-      setExtractionConfidence(null);
-      setExtractionWarnings([]);
-      setUploadProgress(0);
-      showToastHandler?.('error', 'Não foi possível enviar o arquivo');
-    } finally {
-      setIsUploadingFile(false);
-    }
-  };
-
-  const parseDateToIso = (value: string) => {
-    const sanitized = value.trim();
-
-    if (/^\d{4}-\d{2}-\d{2}$/.test(sanitized)) {
-      return sanitized;
-    }
-
-    const br = sanitized.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-    if (br) {
-      return `${br[3]}-${br[2]}-${br[1]}`;
-    }
-
-    return '';
-  };
-
-  const parseMoneyToNumber = (value: string) => {
-    const normalized = value
-      .replace(/\s/g, '')
-      .replace(/\./g, '')
-      .replace(',', '.');
-
-    const parsed = Number(normalized);
-    return Number.isFinite(parsed) ? parsed : 0;
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button>
-          <Plus className="mr-2 h-4 w-4" />
-          {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-4">
-              <div className="grid gap-2">
-                <FormLabel>Arquivo da fatura (opcional)</FormLabel>
-                <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-                  <Input
-                    type="file"
-                    accept=".pdf,.png,.jpg,.jpeg,.xml,.txt"
-                    onChange={(event) => {
-                      const file = event.target.files?.[0];
-                      if (!file) {
-                        return;
-                      }
-
-                      setUploadedFileId(null);
-                      setUploadedFileName('');
-                      setExtractionConfidence(null);
-                      setExtractionWarnings([]);
-                      setUploadProgress(0);
-                      void uploadRelatedFile(file);
-                    }}
-                    disabled={
-                      isUploadingFile ||
-                      isExtractingFileData ||
-                      form.formState.isSubmitting
-                    }
-                  />
-                </div>
-                {isUploadingFile && (
-                  <div className="space-y-1">
-                    <Progress value={uploadProgress} className="h-2" />
-                    <p className="text-xs text-muted-foreground">
-                      Upload em andamento: {uploadProgress}%
-                    </p>
-                  </div>
-                )}
-                {uploadedFileId && (
-                  <p className="text-xs text-muted-foreground">
-                    Arquivo relacionado: {uploadedFileName}
-                  </p>
-                )}
-                {isExtractingFileData && (
-                  <div className="rounded-md border border-primary/30 bg-primary/5 p-3">
-                    <div className="flex items-center gap-2 text-sm font-medium text-primary">
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Analisando documento com IA
-                    </div>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      Os campos serão preenchidos automaticamente em instantes.
-                      Revise os dados antes de salvar.
-                    </p>
-                  </div>
-                )}
-                {!isExtractingFileData &&
-                  extractionConfidence !== null &&
-                  extractionConfidence < 70 && (
-                    <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
-                      <div className="text-sm font-medium text-destructive">
-                        Confiança da extração:{' '}
-                        {Math.round(extractionConfidence)}%
-                      </div>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        Revise principalmente valor e vencimento antes de
-                        salvar.
-                      </p>
-                      {extractionWarnings.length > 0 && (
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {extractionWarnings[0]}
-                        </p>
-                      )}
-                    </div>
-                  )}
-              </div>
-
-              <FormField
-                control={form.control}
-                name="documento"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.document')}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="NF-00000" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="fornecedorId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.supplier')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {pessoas
-                          .filter(
-                            (p) => p.tipo === 'fornecedor' || p.tipo === 'ambos'
-                          )
-                          .map((p) => (
-                            <SelectItem key={p.id} value={String(p.id)}>
-                              {p.nome}
-                            </SelectItem>
-                          ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="grid grid-cols-2 gap-4">
-                <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>
-
-              <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="categoriaId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.category')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {categorias
-                          .filter((c) => c.natureza === 'despesa')
-                          .map((c) => (
-                            <SelectItem key={c.id} value={String(c.id)}>
-                              {c.codigo} - {c.nome}
-                            </SelectItem>
-                          ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="centroCustoId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.costCenter')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {centrosCusto.map((c) => (
-                          <SelectItem key={c.id} value={String(c.id)}>
-                            {c.codigo} - {c.nome}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="metodo"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="boleto">
-                          {t('paymentMethods.boleto')}
-                        </SelectItem>
-                        <SelectItem value="pix">PIX</SelectItem>
-                        <SelectItem value="transferencia">
-                          {t('paymentMethods.transfer')}
-                        </SelectItem>
-                        <SelectItem value="cartao">
-                          {t('paymentMethods.card')}
-                        </SelectItem>
-                        <SelectItem value="dinheiro">
-                          {t('paymentMethods.cash')}
-                        </SelectItem>
-                        <SelectItem value="cheque">
-                          {t('paymentMethods.check')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.description')}</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder={t('newTitle.descriptionPlaceholder')}
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="flex justify-end gap-2 pt-4">
-              <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
-                  ? 'Preenchendo com IA...'
-                  : isUploadingFile
-                    ? 'Enviando arquivo...'
-                    : t('common.save')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default function TitulosPagarPage() {
-  const t = useTranslations('finance.PayableInstallmentsPage');
-  const { data, refetch } = useFinanceData();
-  const { titulosPagar, pessoas, categorias, centrosCusto } = data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-  const getCategoriaById = (id?: string) => categorias.find((c) => c.id === id);
-
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('');
-
-  const filteredTitulos = titulosPagar.filter((titulo) => {
-    const matchesSearch =
-      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
-      getPessoaById(titulo.fornecedorId)
-        ?.nome.toLowerCase()
-        .includes(search.toLowerCase());
-
-    const matchesStatus = !statusFilter || titulo.status === statusFilter;
-
-    return matchesSearch && matchesStatus;
-  });
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          { label: t('breadcrumbs.current') },
-        ]}
-        actions={
-          <NovoTituloSheet
-            pessoas={pessoas}
-            categorias={categorias}
-            centrosCusto={centrosCusto}
-            t={t}
-            onCreated={refetch}
-          />
-        }
-      />
-
-      <FilterBar
-        searchPlaceholder={t('filters.searchPlaceholder')}
-        searchValue={search}
-        onSearchChange={setSearch}
-        filters={[
-          {
-            id: 'status',
-            label: t('filters.status'),
-            value: statusFilter,
-            onChange: setStatusFilter,
-            options: [
-              { value: 'all', label: t('statuses.all') },
-              { value: 'rascunho', label: t('statuses.rascunho') },
-              { value: 'aprovado', label: t('statuses.aprovado') },
-              { 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={statusFilter && statusFilter !== 'all' ? 1 : 0}
-        onClearFilters={() => setStatusFilter('')}
-      />
-
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.headers.document')}</TableHead>
-              <TableHead>{t('table.headers.supplier')}</TableHead>
-              <TableHead>{t('table.headers.competency')}</TableHead>
-              <TableHead>{t('table.headers.dueDate')}</TableHead>
-              <TableHead className="text-right">
-                {t('table.headers.value')}
-              </TableHead>
-              <TableHead>{t('table.headers.category')}</TableHead>
-              <TableHead>{t('table.headers.status')}</TableHead>
-              <TableHead className="w-[50px]" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredTitulos.map((titulo) => {
-              const fornecedor = getPessoaById(titulo.fornecedorId);
-              const categoria = getCategoriaById(titulo.categoriaId);
-              const proximaParcela = titulo.parcelas.find(
-                (p: any) => p.status === 'aberto' || p.status === 'vencido'
-              );
-
-              return (
-                <TableRow key={titulo.id}>
-                  <TableCell className="font-medium">
-                    <Link
-                      href={`/finance/accounts-payable/installments/${titulo.id}`}
-                      className="hover:underline"
-                    >
-                      {titulo.documento}
-                    </Link>
-                    {titulo.anexos.length > 0 && (
-                      <Paperclip className="ml-1 inline h-3 w-3 text-muted-foreground" />
-                    )}
-                  </TableCell>
-                  <TableCell>{fornecedor?.nome}</TableCell>
-                  <TableCell>{titulo.competencia}</TableCell>
-                  <TableCell>
-                    {proximaParcela
-                      ? formatarData(proximaParcela.vencimento)
-                      : '-'}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <Money value={titulo.valorTotal} />
-                  </TableCell>
-                  <TableCell>{categoria?.nome}</TableCell>
-                  <TableCell>
-                    <StatusBadge status={titulo.status} />
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                          <span className="sr-only">
-                            {t('table.actions.srActions')}
-                          </span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link
-                            href={`/finance/accounts-payable/installments/${titulo.id}`}
-                          >
-                            <Eye className="mr-2 h-4 w-4" />
-                            {t('table.actions.viewDetails')}
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Edit className="mr-2 h-4 w-4" />
-                          {t('table.actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                          <CheckCircle className="mr-2 h-4 w-4" />
-                          {t('table.actions.approve')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Download className="mr-2 h-4 w-4" />
-                          {t('table.actions.settle')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Undo className="mr-2 h-4 w-4" />
-                          {t('table.actions.reverse')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem className="text-destructive">
-                          <XCircle className="mr-2 h-4 w-4" />
-                          {t('table.actions.cancel')}
-                        </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: filteredTitulos.length,
-            total: titulosPagar.length,
-          })}
-        </p>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" disabled>
-            {t('footer.previous')}
-          </Button>
-          <Button variant="outline" size="sm" disabled>
-            {t('footer.next')}
-          </Button>
-        </div>
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/finance/_components/person-field-with-create';
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { FilterBar } from '@/components/ui/filter-bar';
+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 { Money } from '@/components/ui/money';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CheckCircle,
+  Download,
+  Edit,
+  Eye,
+  Loader2,
+  MoreHorizontal,
+  Paperclip,
+  Plus,
+  Undo,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+const newTitleFormSchema = z.object({
+  documento: z.string().trim().min(1, 'Documento é obrigatório'),
+  fornecedorId: z.string().min(1, 'Fornecedor é obrigatório'),
+  competencia: z.string().optional(),
+  vencimento: z.string().min(1, 'Vencimento é obrigatório'),
+  valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
+  categoriaId: z.string().optional(),
+  centroCustoId: z.string().optional(),
+  metodo: z.string().optional(),
+  descricao: z.string().optional(),
+});
+
+type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
+
+function NovoTituloSheet({
+  categorias,
+  centrosCusto,
+  t,
+  onCreated,
+}: {
+  categorias: any[];
+  centrosCusto: any[];
+  t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<any> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+  const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
+  const [isExtractingFileData, setIsExtractingFileData] = useState(false);
+  const [extractionConfidence, setExtractionConfidence] = useState<
+    number | null
+  >(null);
+  const [extractionWarnings, setExtractionWarnings] = useState<string[]>([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const normalizeFilenameForDisplay = (filename: string) => {
+    if (!filename) {
+      return filename;
+    }
+
+    if (!/Ã.|Â.|â[\u0080-\u00BF]/.test(filename)) {
+      return filename;
+    }
+
+    try {
+      const bytes = Uint8Array.from(filename, (char) => char.charCodeAt(0));
+      const decoded = new TextDecoder('utf-8').decode(bytes);
+      return /Ã.|Â.|â[\u0080-\u00BF]/.test(decoded) ? filename : decoded;
+    } catch {
+      return filename;
+    }
+  };
+
+  const form = useForm<NewTitleFormValues>({
+    resolver: zodResolver(newTitleFormSchema),
+    defaultValues: {
+      documento: '',
+      fornecedorId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      categoriaId: '',
+      centroCustoId: '',
+      metodo: '',
+      descricao: '',
+    },
+  });
+
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    try {
+      await request({
+        url: '/finance/accounts-payable/installments',
+        method: 'POST',
+        data: {
+          document_number: values.documento,
+          person_id: Number(values.fornecedorId),
+          competence_date: values.competencia
+            ? `${values.competencia}-01`
+            : undefined,
+          due_date: values.vencimento,
+          total_amount: values.valor,
+          finance_category_id: values.categoriaId
+            ? Number(values.categoriaId)
+            : undefined,
+          cost_center_id: values.centroCustoId
+            ? Number(values.centroCustoId)
+            : undefined,
+          payment_channel: values.metodo || undefined,
+          description: values.descricao?.trim() || undefined,
+          attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
+        },
+      });
+
+      await onCreated();
+      form.reset();
+      setUploadedFileId(null);
+      setUploadedFileName('');
+      setExtractionConfidence(null);
+      setExtractionWarnings([]);
+      setOpen(false);
+      showToastHandler?.('success', 'Título criado com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Erro ao criar título');
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+    setOpen(false);
+  };
+
+  const uploadRelatedFile = async (file: File) => {
+    setIsUploadingFile(true);
+    setUploadProgress(0);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'finance/titles');
+
+      const { data } = await request<{ id: number; filename: string }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (event) => {
+          if (!event.total) {
+            return;
+          }
+
+          const progress = Math.round((event.loaded * 100) / event.total);
+          setUploadProgress(progress);
+        },
+      });
+
+      if (!data?.id) {
+        throw new Error('Arquivo inválido');
+      }
+
+      setUploadedFileId(data.id);
+      setUploadedFileName(
+        normalizeFilenameForDisplay(data.filename || file.name)
+      );
+      setUploadProgress(100);
+      showToastHandler?.('success', 'Arquivo relacionado com sucesso');
+
+      setIsExtractingFileData(true);
+      try {
+        const extraction = await request<{
+          documento?: string | null;
+          fornecedorId?: string;
+          competencia?: string;
+          vencimento?: string;
+          valor?: number | null;
+          categoriaId?: string;
+          centroCustoId?: string;
+          metodo?: string;
+          descricao?: string | null;
+          confidence?: number | null;
+          confidenceLevel?: 'low' | 'high' | null;
+          warnings?: string[];
+        }>({
+          url: '/finance/accounts-payable/installments/extract-from-file',
+          method: 'POST',
+          data: {
+            file_id: data.id,
+          },
+        });
+
+        const extracted = extraction.data || {};
+        setExtractionConfidence(
+          typeof extracted.confidence === 'number' ? extracted.confidence : null
+        );
+        setExtractionWarnings(
+          Array.isArray(extracted.warnings)
+            ? extracted.warnings.filter(Boolean)
+            : []
+        );
+
+        if (extracted.documento) {
+          form.setValue('documento', extracted.documento, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.fornecedorId) {
+          form.setValue('fornecedorId', extracted.fornecedorId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.competencia) {
+          form.setValue('competencia', extracted.competencia, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.vencimento) {
+          form.setValue('vencimento', extracted.vencimento, {
+            shouldValidate: true,
+          });
+        }
+
+        if (typeof extracted.valor === 'number' && extracted.valor > 0) {
+          form.setValue('valor', extracted.valor, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.categoriaId) {
+          form.setValue('categoriaId', extracted.categoriaId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.centroCustoId) {
+          form.setValue('centroCustoId', extracted.centroCustoId, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.metodo) {
+          form.setValue('metodo', extracted.metodo, {
+            shouldValidate: true,
+          });
+        }
+
+        if (extracted.descricao) {
+          form.setValue('descricao', extracted.descricao, {
+            shouldValidate: true,
+          });
+        }
+
+        showToastHandler?.(
+          'success',
+          'Dados da fatura extraídos e preenchidos automaticamente'
+        );
+      } catch {
+        setExtractionConfidence(null);
+        setExtractionWarnings([]);
+        showToastHandler?.(
+          'error',
+          'Não foi possível extrair os dados automaticamente'
+        );
+      } finally {
+        setIsExtractingFileData(false);
+      }
+    } catch {
+      setUploadedFileId(null);
+      setUploadedFileName('');
+      setExtractionConfidence(null);
+      setExtractionWarnings([]);
+      setUploadProgress(0);
+      showToastHandler?.('error', 'Não foi possível enviar o arquivo');
+    } finally {
+      setIsUploadingFile(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          {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-4">
+              <div className="grid gap-2">
+                <FormLabel>Arquivo da fatura (opcional)</FormLabel>
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                  <Input
+                    type="file"
+                    accept=".pdf,.png,.jpg,.jpeg,.xml,.txt"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) {
+                        return;
+                      }
+
+                      setUploadedFileId(null);
+                      setUploadedFileName('');
+                      setExtractionConfidence(null);
+                      setExtractionWarnings([]);
+                      setUploadProgress(0);
+                      void uploadRelatedFile(file);
+                    }}
+                    disabled={
+                      isUploadingFile ||
+                      isExtractingFileData ||
+                      form.formState.isSubmitting
+                    }
+                  />
+                </div>
+                {isUploadingFile && (
+                  <div className="space-y-1">
+                    <Progress value={uploadProgress} className="h-2" />
+                    <p className="text-xs text-muted-foreground">
+                      Upload em andamento: {uploadProgress}%
+                    </p>
+                  </div>
+                )}
+                {uploadedFileId && (
+                  <p className="text-xs text-muted-foreground">
+                    Arquivo relacionado: {uploadedFileName}
+                  </p>
+                )}
+                {isExtractingFileData && (
+                  <div className="rounded-md border border-primary/30 bg-primary/5 p-3">
+                    <div className="flex items-center gap-2 text-sm font-medium text-primary">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Analisando documento com IA
+                    </div>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Os campos serão preenchidos automaticamente em instantes.
+                      Revise os dados antes de salvar.
+                    </p>
+                  </div>
+                )}
+                {!isExtractingFileData &&
+                  extractionConfidence !== null &&
+                  extractionConfidence < 70 && (
+                    <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
+                      <div className="text-sm font-medium text-destructive">
+                        Confiança da extração:{' '}
+                        {Math.round(extractionConfidence)}%
+                      </div>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        Revise principalmente valor e vencimento antes de
+                        salvar.
+                      </p>
+                      {extractionWarnings.length > 0 && (
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {extractionWarnings[0]}
+                        </p>
+                      )}
+                    </div>
+                  )}
+              </div>
+
+              <FormField
+                control={form.control}
+                name="documento"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.document')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="NF-00000" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <PersonFieldWithCreate
+                form={form}
+                name="fornecedorId"
+                label={t('fields.supplier')}
+                entityLabel="fornecedor"
+                selectPlaceholder={t('common.select')}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <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>
+
+              <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="categoriaId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.category')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {categorias
+                          .filter((c) => c.natureza === 'despesa')
+                          .map((c) => (
+                            <SelectItem key={c.id} value={String(c.id)}>
+                              {c.codigo} - {c.nome}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="centroCustoId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.costCenter')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {centrosCusto.map((c) => (
+                          <SelectItem key={c.id} value={String(c.id)}>
+                            {c.codigo} - {c.nome}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="metodo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="boleto">
+                          {t('paymentMethods.boleto')}
+                        </SelectItem>
+                        <SelectItem value="pix">PIX</SelectItem>
+                        <SelectItem value="transferencia">
+                          {t('paymentMethods.transfer')}
+                        </SelectItem>
+                        <SelectItem value="cartao">
+                          {t('paymentMethods.card')}
+                        </SelectItem>
+                        <SelectItem value="dinheiro">
+                          {t('paymentMethods.cash')}
+                        </SelectItem>
+                        <SelectItem value="cheque">
+                          {t('paymentMethods.check')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder={t('newTitle.descriptionPlaceholder')}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <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
+                  ? 'Preenchendo com IA...'
+                  : isUploadingFile
+                    ? 'Enviando arquivo...'
+                    : t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function TitulosPagarPage() {
+  const t = useTranslations('finance.PayableInstallmentsPage');
+  const { request } = useApp();
+  const { data, refetch } = useFinanceData();
+  const { titulosPagar, pessoas } = data;
+
+  const { data: categoriasData } = useQuery<any[]>({
+    queryKey: ['finance-categories-options'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/categories',
+        method: 'GET',
+      });
+
+      return (response.data || []) as any[];
+    },
+    placeholderData: (old) => old,
+  });
+
+  const { data: centrosCustoData } = useQuery<any[]>({
+    queryKey: ['finance-cost-centers-options'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/cost-centers',
+        method: 'GET',
+      });
+
+      return (response.data || []) as any[];
+    },
+    placeholderData: (old) => old,
+  });
+
+  const categorias = categoriasData || [];
+  const centrosCusto = centrosCustoData || [];
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+  const getCategoriaById = (id?: string) => categorias.find((c) => c.id === id);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+
+  const filteredTitulos = titulosPagar.filter((titulo) => {
+    const matchesSearch =
+      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
+      getPessoaById(titulo.fornecedorId)
+        ?.nome.toLowerCase()
+        .includes(search.toLowerCase());
+
+    const matchesStatus = !statusFilter || titulo.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        actions={
+          <NovoTituloSheet
+            categorias={categorias}
+            centrosCusto={centrosCusto}
+            t={t}
+            onCreated={refetch}
+          />
+        }
+      />
+
+      <FilterBar
+        searchPlaceholder={t('filters.searchPlaceholder')}
+        searchValue={search}
+        onSearchChange={setSearch}
+        filters={[
+          {
+            id: 'status',
+            label: t('filters.status'),
+            value: statusFilter,
+            onChange: setStatusFilter,
+            options: [
+              { value: 'all', label: t('statuses.all') },
+              { value: 'rascunho', label: t('statuses.rascunho') },
+              { value: 'aprovado', label: t('statuses.aprovado') },
+              { 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={statusFilter && statusFilter !== 'all' ? 1 : 0}
+        onClearFilters={() => setStatusFilter('')}
+      />
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('table.headers.document')}</TableHead>
+              <TableHead>{t('table.headers.supplier')}</TableHead>
+              <TableHead>{t('table.headers.competency')}</TableHead>
+              <TableHead>{t('table.headers.dueDate')}</TableHead>
+              <TableHead className="text-right">
+                {t('table.headers.value')}
+              </TableHead>
+              <TableHead>{t('table.headers.category')}</TableHead>
+              <TableHead>{t('table.headers.status')}</TableHead>
+              <TableHead className="w-[50px]" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTitulos.map((titulo) => {
+              const fornecedor = getPessoaById(titulo.fornecedorId);
+              const categoria = getCategoriaById(titulo.categoriaId);
+              const proximaParcela = titulo.parcelas.find(
+                (p: any) => p.status === 'aberto' || p.status === 'vencido'
+              );
+
+              return (
+                <TableRow key={titulo.id}>
+                  <TableCell className="font-medium">
+                    <Link
+                      href={`/finance/accounts-payable/installments/${titulo.id}`}
+                      className="hover:underline"
+                    >
+                      {titulo.documento}
+                    </Link>
+                    {titulo.anexos.length > 0 && (
+                      <Paperclip className="ml-1 inline h-3 w-3 text-muted-foreground" />
+                    )}
+                  </TableCell>
+                  <TableCell>{fornecedor?.nome}</TableCell>
+                  <TableCell>{titulo.competencia}</TableCell>
+                  <TableCell>
+                    {proximaParcela
+                      ? formatarData(proximaParcela.vencimento)
+                      : '-'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Money value={titulo.valorTotal} />
+                  </TableCell>
+                  <TableCell>{categoria?.nome}</TableCell>
+                  <TableCell>
+                    <StatusBadge status={titulo.status} />
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">
+                            {t('table.actions.srActions')}
+                          </span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link
+                            href={`/finance/accounts-payable/installments/${titulo.id}`}
+                          >
+                            <Eye className="mr-2 h-4 w-4" />
+                            {t('table.actions.viewDetails')}
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Edit className="mr-2 h-4 w-4" />
+                          {t('table.actions.edit')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <CheckCircle className="mr-2 h-4 w-4" />
+                          {t('table.actions.approve')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Download className="mr-2 h-4 w-4" />
+                          {t('table.actions.settle')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Undo className="mr-2 h-4 w-4" />
+                          {t('table.actions.reverse')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">
+                          <XCircle className="mr-2 h-4 w-4" />
+                          {t('table.actions.cancel')}
+                        </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: filteredTitulos.length,
+            total: titulosPagar.length,
+          })}
+        </p>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" disabled>
+            {t('footer.previous')}
+          </Button>
+          <Button variant="outline" size="sm" disabled>
+            {t('footer.next')}
+          </Button>
+        </div>
+      </div>
+    </Page>
+  );
+}