@hed-hog/finance 0.0.274 → 0.0.276

package/hedhog/frontend/app/cash-and-banks/statements/page.tsx.ejs

@@ -1,986 +1,986 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  ArrowDownRight,
-  ArrowUpRight,
-  Download,
-  Plus,
-  Upload,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { formatarData } from '../../_lib/formatters';
-
-type BankAccount = {
-  id: string;
-  banco: string;
-  descricao: string;
-  saldoAtual: number;
-};
-
-type Statement = {
-  id: string;
-  contaBancariaId: string;
-  data: string;
-  descricao: string;
-  valor: number;
-  tipo: 'entrada' | 'saida';
-  statusConciliacao:
-    | 'importado'
-    | 'pendente'
-    | 'conciliado'
-    | 'estornado'
-    | 'ajustado';
-};
-
-const bankAccountFormSchema = z.object({
-  banco: z.string().trim().min(1, 'Banco é obrigatório'),
-  agencia: z.string().optional(),
-  conta: z.string().optional(),
-  tipo: z.string().min(1, 'Tipo é obrigatório'),
-  descricao: z.string().optional(),
-  saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
-});
-
-const importStatementSchema = z.object({
-  bankAccountId: z.string().trim().min(1, 'Conta bancária é obrigatória'),
-  file: z.instanceof(File, { message: 'Arquivo é obrigatório' }).refine(
-    (value) => {
-      const fileName = value.name.toLowerCase();
-      return fileName.endsWith('.csv') || fileName.endsWith('.ofx');
-    },
-    { message: 'Apenas arquivos CSV ou OFX são permitidos' }
-  ),
-});
-
-type ImportStatementFormValues = z.infer<typeof importStatementSchema>;
-type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
-
-function NovaContaBancariaSheet({
-  open,
-  onOpenChange,
-  onCreated,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCreated: (createdBankAccountId?: string) => Promise<void> | void;
-}) {
-  const tBank = useTranslations('finance.BankAccountsPage');
-  const { request, showToastHandler } = useApp();
-
-  const form = useForm<BankAccountFormValues>({
-    resolver: zodResolver(bankAccountFormSchema),
-    defaultValues: {
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      saldoInicial: 0,
-    },
-  });
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    form.reset({
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      saldoInicial: 0,
-    });
-  }, [form, open]);
-
-  const handleSubmit = async (values: BankAccountFormValues) => {
-    try {
-      const response = await request<{ id?: string | number }>({
-        url: '/finance/bank-accounts',
-        method: 'POST',
-        data: {
-          bank: values.banco,
-          branch: values.agencia || undefined,
-          account: values.conta || undefined,
-          type: values.tipo,
-          description: values.descricao?.trim() || undefined,
-          initial_balance: values.saldoInicial,
-        },
-      });
-
-      const createdBankAccountId = response?.data?.id;
-
-      await onCreated(
-        createdBankAccountId !== undefined
-          ? String(createdBankAccountId)
-          : undefined
-      );
-      onOpenChange(false);
-      showToastHandler?.(
-        'success',
-        tBank.has('messages.createSuccess')
-          ? tBank('messages.createSuccess')
-          : 'Conta bancária cadastrada com sucesso'
-      );
-    } catch {
-      showToastHandler?.(
-        'error',
-        tBank.has('messages.createError')
-          ? tBank('messages.createError')
-          : 'Erro ao cadastrar conta bancária'
-      );
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{tBank('newAccount.title')}</SheetTitle>
-          <SheetDescription>{tBank('newAccount.description')}</SheetDescription>
-        </SheetHeader>
-
-        <Form {...form}>
-          <form
-            className="space-y-4 px-4"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
-            <FormField
-              control={form.control}
-              name="banco"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{tBank('fields.bank')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={tBank('fields.bankPlaceholder')}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="grid grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="agencia"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{tBank('fields.branch')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="0000"
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="conta"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{tBank('fields.account')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="00000-0"
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="tipo"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{tBank('fields.type')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={tBank('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="corrente">
-                          {tBank('types.corrente')}
-                        </SelectItem>
-                        <SelectItem value="poupanca">
-                          {tBank('types.poupanca')}
-                        </SelectItem>
-                        <SelectItem value="investimento">
-                          {tBank('types.investimento')}
-                        </SelectItem>
-                        <SelectItem value="caixa">
-                          {tBank('types.caixa')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="saldoInicial"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{tBank('fields.initialBalance')}</FormLabel>
-                    <FormControl>
-                      <InputMoney
-                        ref={field.ref}
-                        name={field.name}
-                        value={field.value}
-                        onBlur={field.onBlur}
-                        onValueChange={(value) => field.onChange(value ?? 0)}
-                        placeholder="0,00"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="descricao"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{tBank('fields.description')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={tBank('fields.descriptionPlaceholder')}
-                      {...field}
-                      value={field.value || ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end gap-2 pt-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-              >
-                {tBank('common.cancel')}
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {tBank('common.save')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function ImportarExtratoSheet({
-  contasBancarias,
-  t,
-  defaultBankAccountId,
-  onImported,
-  onBankAccountCreated,
-}: {
-  contasBancarias: BankAccount[];
-  t: ReturnType<typeof useTranslations>;
-  defaultBankAccountId?: string;
-  onImported: () => Promise<any> | void;
-  onBankAccountCreated: (createdBankAccountId?: string) => Promise<void> | void;
-}) {
-  const { request, showToastHandler } = useApp();
-  const [open, setOpen] = useState(false);
-  const [openNovaContaSheet, setOpenNovaContaSheet] = useState(false);
-
-  const form = useForm<ImportStatementFormValues>({
-    resolver: zodResolver(importStatementSchema),
-    defaultValues: {
-      bankAccountId: defaultBankAccountId || '',
-    },
-  });
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    form.reset({
-      bankAccountId: defaultBankAccountId || '',
-      file: undefined as unknown as File,
-    });
-  }, [defaultBankAccountId, form, open]);
-
-  const handleSubmit = async (values: ImportStatementFormValues) => {
-    const formData = new FormData();
-    formData.append('bank_account_id', values.bankAccountId);
-    formData.append('file', values.file);
-
-    try {
-      await request({
-        url: '/finance/statements/import',
-        method: 'POST',
-        data: formData,
-      });
-
-      await onImported();
-      showToastHandler?.('success', 'Extrato importado com sucesso');
-      setOpen(false);
-    } catch {
-      showToastHandler?.('error', 'Não foi possível importar o extrato');
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <Button onClick={() => setOpen(true)}>
-        <Upload className="mr-2 h-4 w-4" />
-        {t('importDialog.action')}
-      </Button>
-
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{t('importDialog.title')}</SheetTitle>
-          <SheetDescription>{t('importDialog.description')}</SheetDescription>
-        </SheetHeader>
-
-        <Form {...form}>
-          <form
-            className="space-y-4 px-4"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
-            <FormField
-              control={form.control}
-              name="bankAccountId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('importDialog.bankAccount')}</FormLabel>
-                  <div className="flex items-center gap-2">
-                    <div className="flex-1">
-                      <Select
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <SelectValue
-                              placeholder={t('importDialog.selectAccount')}
-                            />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {contasBancarias.map((conta) => (
-                            <SelectItem key={conta.id} value={conta.id}>
-                              {conta.banco} - {conta.descricao}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      onClick={() => setOpenNovaContaSheet(true)}
-                      aria-label="Nova conta bancária"
-                    >
-                      <Plus className="h-4 w-4" />
-                    </Button>
-                  </div>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <NovaContaBancariaSheet
-              open={openNovaContaSheet}
-              onOpenChange={setOpenNovaContaSheet}
-              onCreated={async (createdBankAccountId) => {
-                await onBankAccountCreated(createdBankAccountId);
-
-                if (createdBankAccountId) {
-                  form.setValue('bankAccountId', createdBankAccountId, {
-                    shouldDirty: true,
-                    shouldValidate: true,
-                  });
-                }
-              }}
-            />
-
-            <FormField
-              control={form.control}
-              name="file"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('importDialog.file')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="file"
-                      accept=".ofx,.csv"
-                      onChange={(event) => {
-                        const selectedFile = event.target.files?.[0];
-                        field.onChange(selectedFile);
-                      }}
-                    />
-                  </FormControl>
-                  <p className="text-xs text-muted-foreground">
-                    {t('importDialog.acceptedFormats')}
-                  </p>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end gap-2 pt-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setOpen(false)}
-              >
-                {t('common.cancel')}
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {t('importDialog.submit')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default function ExtratosPage() {
-  const t = useTranslations('finance.StatementsPage');
-  const { request, showToastHandler } = useApp();
-  const pathname = usePathname();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const bankAccountIdFromUrl = searchParams.get('bank_account_id');
-
-  const [contaFilter, setContaFilter] = useState<string>('');
-  const [search, setSearch] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [extratoSelecionado, setExtratoSelecionado] =
-    useState<Statement | null>(null);
-
-  useEffect(() => {
-    const timeoutId = window.setTimeout(() => {
-      setDebouncedSearch(search);
-    }, 300);
-
-    return () => {
-      window.clearTimeout(timeoutId);
-    };
-  }, [search]);
-
-  const { data: contasBancarias = [], refetch: refetchContasBancarias } =
-    useQuery<BankAccount[]>({
-      queryKey: ['finance-bank-accounts'],
-      queryFn: async () => {
-        const response = await request({
-          url: '/finance/bank-accounts',
-          method: 'GET',
-        });
-
-        return (response?.data || []) as BankAccount[];
-      },
-    });
-
-  const handleBankAccountCreated = async (createdBankAccountId?: string) => {
-    await refetchContasBancarias();
-
-    if (!createdBankAccountId) {
-      return;
-    }
-
-    setContaFilter(createdBankAccountId);
-
-    const params = new URLSearchParams(searchParams.toString());
-    params.set('bank_account_id', createdBankAccountId);
-    router.replace(`${pathname}?${params.toString()}`);
-  };
-
-  useEffect(() => {
-    const firstAccount = contasBancarias[0];
-
-    if (!firstAccount) {
-      return;
-    }
-
-    const hasAccountFromUrl =
-      !!bankAccountIdFromUrl &&
-      contasBancarias.some((account) => account.id === bankAccountIdFromUrl);
-
-    const nextAccountId = hasAccountFromUrl
-      ? (bankAccountIdFromUrl as string)
-      : firstAccount.id;
-
-    if (contaFilter !== nextAccountId) {
-      setContaFilter(nextAccountId);
-    }
-
-    if (bankAccountIdFromUrl !== nextAccountId) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set('bank_account_id', nextAccountId);
-      router.replace(`${pathname}?${params.toString()}`);
-    }
-  }, [
-    bankAccountIdFromUrl,
-    contaFilter,
-    contasBancarias,
-    pathname,
-    router,
-    searchParams,
-  ]);
-
-  const { data: extratos = [], refetch: refetchExtratos } = useQuery<
-    Statement[]
-  >({
-    queryKey: ['finance-statements', contaFilter, debouncedSearch],
-    queryFn: async () => {
-      if (!contaFilter) {
-        return [];
-      }
-
-      const params = new URLSearchParams();
-      params.set('bank_account_id', contaFilter);
-
-      const trimmedSearch = debouncedSearch.trim();
-      if (trimmedSearch) {
-        params.set('search', trimmedSearch);
-      }
-
-      const response = await request({
-        url: `/finance/statements?${params.toString()}`,
-        method: 'GET',
-      });
-
-      return (response?.data || []) as Statement[];
-    },
-  });
-
-  const conta = contasBancarias.find((item) => item.id === contaFilter);
-  const contaExtratoSelecionado = extratoSelecionado
-    ? contasBancarias.find(
-        (item) => item.id === extratoSelecionado.contaBancariaId
-      )
-    : undefined;
-  const totalEntradas = extratos
-    .filter((e) => e.tipo === 'entrada')
-    .reduce((acc, e) => acc + e.valor, 0);
-  const totalSaidas = extratos
-    .filter((e) => e.tipo === 'saida')
-    .reduce((acc, e) => acc + e.valor, 0);
-
-  const handleExport = async () => {
-    if (!contaFilter) {
-      showToastHandler?.('error', 'Selecione uma conta bancária para exportar');
-      return;
-    }
-
-    try {
-      const params = new URLSearchParams();
-      params.set('bank_account_id', contaFilter);
-
-      const trimmedSearch = search.trim();
-      if (trimmedSearch) {
-        params.set('search', trimmedSearch);
-      }
-
-      const response = await request<Blob>({
-        url: `/finance/statements/export?${params.toString()}`,
-        method: 'GET',
-        responseType: 'blob',
-      });
-
-      const contentDisposition =
-        response.headers?.['content-disposition'] ||
-        response.headers?.['Content-Disposition'];
-      const fileNameMatch =
-        typeof contentDisposition === 'string'
-          ? contentDisposition.match(/filename\*?=(?:UTF-8'')?"?([^";]+)"?/i)
-          : null;
-      const fileName = fileNameMatch?.[1]
-        ? decodeURIComponent(fileNameMatch[1])
-        : `extrato-bancario-${contaFilter}.csv`;
-
-      const blob = new Blob([response.data], {
-        type: 'text/csv;charset=utf-8;',
-      });
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
-
-      link.href = url;
-      link.setAttribute('download', fileName);
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      window.URL.revokeObjectURL(url);
-    } catch {
-      showToastHandler?.('error', 'Não foi possível exportar o extrato');
-    }
-  };
-
-  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={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => void handleExport()}>
-              <Download className="mr-2 h-4 w-4" />
-              {t('actions.export')}
-            </Button>
-            <ImportarExtratoSheet
-              contasBancarias={contasBancarias}
-              t={t}
-              defaultBankAccountId={contaFilter}
-              onImported={refetchExtratos}
-              onBankAccountCreated={handleBankAccountCreated}
-            />
-          </div>
-        }
-      />
-
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <Select
-          value={contaFilter}
-          onValueChange={(value) => {
-            setContaFilter(value);
-
-            const params = new URLSearchParams(searchParams.toString());
-            params.set('bank_account_id', value);
-            router.replace(`${pathname}?${params.toString()}`);
-          }}
-        >
-          <SelectTrigger className="w-full sm:w-[280px]">
-            <SelectValue placeholder={t('filters.selectAccount')} />
-          </SelectTrigger>
-          <SelectContent>
-            {contasBancarias.map((conta) => (
-              <SelectItem key={conta.id} value={conta.id}>
-                {conta.banco} - {conta.descricao}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="flex-1">
-          <FilterBar
-            searchPlaceholder={t('filters.searchPlaceholder')}
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.inflows')}
-            </CardTitle>
-            <ArrowUpRight className="h-4 w-4 text-green-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              <Money value={totalEntradas} />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.outflows')}
-            </CardTitle>
-            <ArrowDownRight className="h-4 w-4 text-red-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              <Money value={totalSaidas} />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.accountBalance')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={conta?.saldoAtual || 0} />
-            </div>
-            <p className="text-xs text-muted-foreground">{conta?.descricao}</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>
-            {t('table.foundTransactions', { count: extratos.length })}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
-            <Table className="min-w-[760px] table-fixed">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[110px]">
-                    {t('table.headers.date')}
-                  </TableHead>
-                  <TableHead>{t('table.headers.description')}</TableHead>
-                  <TableHead className="w-[130px] text-right">
-                    {t('table.headers.value')}
-                  </TableHead>
-                  <TableHead className="w-[110px]">
-                    {t('table.headers.type')}
-                  </TableHead>
-                  <TableHead className="w-[140px]">
-                    {t('table.headers.reconciliation')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {extratos.map((extrato) => (
-                  <TableRow
-                    key={extrato.id}
-                    className="cursor-pointer"
-                    onClick={() => setExtratoSelecionado(extrato)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        setExtratoSelecionado(extrato);
-                      }
-                    }}
-                    role="button"
-                    tabIndex={0}
-                  >
-                    <TableCell>{formatarData(extrato.data)}</TableCell>
-                    <TableCell className="truncate" title={extrato.descricao}>
-                      {extrato.descricao}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <span
-                        className={
-                          extrato.tipo === 'entrada'
-                            ? 'text-green-600'
-                            : 'text-red-600'
-                        }
-                      >
-                        <Money value={extrato.valor} />
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      {extrato.tipo === 'entrada' ? (
-                        <span className="flex items-center gap-1 text-green-600">
-                          <ArrowUpRight className="h-4 w-4" />
-                          {t('types.inflow')}
-                        </span>
-                      ) : (
-                        <span className="flex items-center gap-1 text-red-600">
-                          <ArrowDownRight className="h-4 w-4" />
-                          {t('types.outflow')}
-                        </span>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        status={extrato.statusConciliacao}
-                        type="conciliacao"
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Dialog
-        open={!!extratoSelecionado}
-        onOpenChange={(open) => {
-          if (!open) {
-            setExtratoSelecionado(null);
-          }
-        }}
-      >
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>{t('table.title')}</DialogTitle>
-            <DialogDescription>{t('header.description')}</DialogDescription>
-          </DialogHeader>
-
-          {extratoSelecionado ? (
-            <div className="space-y-4 rounded-md border p-4">
-              <div className="text-center">
-                <p className="text-sm text-muted-foreground">
-                  {t('table.headers.reconciliation')}
-                </p>
-                <div className="mt-1 flex justify-center">
-                  <StatusBadge
-                    status={extratoSelecionado.statusConciliacao}
-                    type="conciliacao"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <div>
-                  <p className="text-xs text-muted-foreground">
-                    {t('table.headers.date')}
-                  </p>
-                  <p className="font-medium">
-                    {formatarData(extratoSelecionado.data)}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">
-                    {t('table.headers.type')}
-                  </p>
-                  <p className="font-medium">
-                    {extratoSelecionado.tipo === 'entrada'
-                      ? t('types.inflow')
-                      : t('types.outflow')}
-                  </p>
-                </div>
-                <div className="sm:col-span-2">
-                  <p className="text-xs text-muted-foreground">
-                    {t('table.headers.description')}
-                  </p>
-                  <p className="font-medium wrap-break-word">
-                    {extratoSelecionado.descricao}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">
-                    {t('table.headers.value')}
-                  </p>
-                  <p
-                    className={`font-medium ${
-                      extratoSelecionado.tipo === 'entrada'
-                        ? 'text-green-600'
-                        : 'text-red-600'
-                    }`}
-                  >
-                    <Money value={extratoSelecionado.valor} />
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">
-                    {t('importDialog.bankAccount')}
-                  </p>
-                  <p className="font-medium">
-                    {contaExtratoSelecionado
-                      ? `${contaExtratoSelecionado.banco} - ${contaExtratoSelecionado.descricao}`
-                      : '-'}
-                  </p>
-                </div>
-                <div className="sm:col-span-2">
-                  <p className="text-xs text-muted-foreground">ID</p>
-                  <p className="font-mono text-xs break-all">
-                    {extratoSelecionado.id}
-                  </p>
-                </div>
-              </div>
-            </div>
-          ) : null}
-
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setExtratoSelecionado(null)}
-            >
-              {t('common.cancel')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  Download,
+  Plus,
+  Upload,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { formatarData } from '../../_lib/formatters';
+
+type BankAccount = {
+  id: string;
+  banco: string;
+  descricao: string;
+  saldoAtual: number;
+};
+
+type Statement = {
+  id: string;
+  contaBancariaId: string;
+  data: string;
+  descricao: string;
+  valor: number;
+  tipo: 'entrada' | 'saida';
+  statusConciliacao:
+    | 'importado'
+    | 'pendente'
+    | 'conciliado'
+    | 'estornado'
+    | 'ajustado';
+};
+
+const bankAccountFormSchema = z.object({
+  banco: z.string().trim().min(1, 'Banco é obrigatório'),
+  agencia: z.string().optional(),
+  conta: z.string().optional(),
+  tipo: z.string().min(1, 'Tipo é obrigatório'),
+  descricao: z.string().optional(),
+  saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
+});
+
+const importStatementSchema = z.object({
+  bankAccountId: z.string().trim().min(1, 'Conta bancária é obrigatória'),
+  file: z.instanceof(File, { message: 'Arquivo é obrigatório' }).refine(
+    (value) => {
+      const fileName = value.name.toLowerCase();
+      return fileName.endsWith('.csv') || fileName.endsWith('.ofx');
+    },
+    { message: 'Apenas arquivos CSV ou OFX são permitidos' }
+  ),
+});
+
+type ImportStatementFormValues = z.infer<typeof importStatementSchema>;
+type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
+
+function NovaContaBancariaSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (createdBankAccountId?: string) => Promise<void> | void;
+}) {
+  const tBank = useTranslations('finance.BankAccountsPage');
+  const { request, showToastHandler } = useApp();
+
+  const form = useForm<BankAccountFormValues>({
+    resolver: zodResolver(bankAccountFormSchema),
+    defaultValues: {
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    });
+  }, [form, open]);
+
+  const handleSubmit = async (values: BankAccountFormValues) => {
+    try {
+      const response = await request<{ id?: string | number }>({
+        url: '/finance/bank-accounts',
+        method: 'POST',
+        data: {
+          bank: values.banco,
+          branch: values.agencia || undefined,
+          account: values.conta || undefined,
+          type: values.tipo,
+          description: values.descricao?.trim() || undefined,
+          initial_balance: values.saldoInicial,
+        },
+      });
+
+      const createdBankAccountId = response?.data?.id;
+
+      await onCreated(
+        createdBankAccountId !== undefined
+          ? String(createdBankAccountId)
+          : undefined
+      );
+      onOpenChange(false);
+      showToastHandler?.(
+        'success',
+        tBank.has('messages.createSuccess')
+          ? tBank('messages.createSuccess')
+          : 'Conta bancária cadastrada com sucesso'
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        tBank.has('messages.createError')
+          ? tBank('messages.createError')
+          : 'Erro ao cadastrar conta bancária'
+      );
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{tBank('newAccount.title')}</SheetTitle>
+          <SheetDescription>{tBank('newAccount.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="banco"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{tBank('fields.bank')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={tBank('fields.bankPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="agencia"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.branch')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="0000"
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="conta"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.account')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="00000-0"
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="tipo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.type')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={tBank('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="corrente">
+                          {tBank('types.corrente')}
+                        </SelectItem>
+                        <SelectItem value="poupanca">
+                          {tBank('types.poupanca')}
+                        </SelectItem>
+                        <SelectItem value="investimento">
+                          {tBank('types.investimento')}
+                        </SelectItem>
+                        <SelectItem value="caixa">
+                          {tBank('types.caixa')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="saldoInicial"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.initialBalance')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        ref={field.ref}
+                        name={field.name}
+                        value={field.value}
+                        onBlur={field.onBlur}
+                        onValueChange={(value) => field.onChange(value ?? 0)}
+                        placeholder="0,00"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="descricao"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{tBank('fields.description')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={tBank('fields.descriptionPlaceholder')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {tBank('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {tBank('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function ImportarExtratoSheet({
+  contasBancarias,
+  t,
+  defaultBankAccountId,
+  onImported,
+  onBankAccountCreated,
+}: {
+  contasBancarias: BankAccount[];
+  t: ReturnType<typeof useTranslations>;
+  defaultBankAccountId?: string;
+  onImported: () => Promise<any> | void;
+  onBankAccountCreated: (createdBankAccountId?: string) => Promise<void> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+  const [openNovaContaSheet, setOpenNovaContaSheet] = useState(false);
+
+  const form = useForm<ImportStatementFormValues>({
+    resolver: zodResolver(importStatementSchema),
+    defaultValues: {
+      bankAccountId: defaultBankAccountId || '',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      bankAccountId: defaultBankAccountId || '',
+      file: undefined as unknown as File,
+    });
+  }, [defaultBankAccountId, form, open]);
+
+  const handleSubmit = async (values: ImportStatementFormValues) => {
+    const formData = new FormData();
+    formData.append('bank_account_id', values.bankAccountId);
+    formData.append('file', values.file);
+
+    try {
+      await request({
+        url: '/finance/statements/import',
+        method: 'POST',
+        data: formData,
+      });
+
+      await onImported();
+      showToastHandler?.('success', 'Extrato importado com sucesso');
+      setOpen(false);
+    } catch {
+      showToastHandler?.('error', 'Não foi possível importar o extrato');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <Button onClick={() => setOpen(true)}>
+        <Upload className="mr-2 h-4 w-4" />
+        {t('importDialog.action')}
+      </Button>
+
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('importDialog.title')}</SheetTitle>
+          <SheetDescription>{t('importDialog.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="bankAccountId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('importDialog.bankAccount')}</FormLabel>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1">
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t('importDialog.selectAccount')}
+                            />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {contasBancarias.map((conta) => (
+                            <SelectItem key={conta.id} value={conta.id}>
+                              {conta.banco} - {conta.descricao}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => setOpenNovaContaSheet(true)}
+                      aria-label="Nova conta bancária"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <NovaContaBancariaSheet
+              open={openNovaContaSheet}
+              onOpenChange={setOpenNovaContaSheet}
+              onCreated={async (createdBankAccountId) => {
+                await onBankAccountCreated(createdBankAccountId);
+
+                if (createdBankAccountId) {
+                  form.setValue('bankAccountId', createdBankAccountId, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  });
+                }
+              }}
+            />
+
+            <FormField
+              control={form.control}
+              name="file"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('importDialog.file')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="file"
+                      accept=".ofx,.csv"
+                      onChange={(event) => {
+                        const selectedFile = event.target.files?.[0];
+                        field.onChange(selectedFile);
+                      }}
+                    />
+                  </FormControl>
+                  <p className="text-xs text-muted-foreground">
+                    {t('importDialog.acceptedFormats')}
+                  </p>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('importDialog.submit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function ExtratosPage() {
+  const t = useTranslations('finance.StatementsPage');
+  const { request, showToastHandler } = useApp();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const bankAccountIdFromUrl = searchParams.get('bank_account_id');
+
+  const [contaFilter, setContaFilter] = useState<string>('');
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [extratoSelecionado, setExtratoSelecionado] =
+    useState<Statement | null>(null);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 300);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [search]);
+
+  const { data: contasBancarias = [], refetch: refetchContasBancarias } =
+    useQuery<BankAccount[]>({
+      queryKey: ['finance-bank-accounts'],
+      queryFn: async () => {
+        const response = await request({
+          url: '/finance/bank-accounts',
+          method: 'GET',
+        });
+
+        return (response?.data || []) as BankAccount[];
+      },
+    });
+
+  const handleBankAccountCreated = async (createdBankAccountId?: string) => {
+    await refetchContasBancarias();
+
+    if (!createdBankAccountId) {
+      return;
+    }
+
+    setContaFilter(createdBankAccountId);
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('bank_account_id', createdBankAccountId);
+    router.replace(`${pathname}?${params.toString()}`);
+  };
+
+  useEffect(() => {
+    const firstAccount = contasBancarias[0];
+
+    if (!firstAccount) {
+      return;
+    }
+
+    const hasAccountFromUrl =
+      !!bankAccountIdFromUrl &&
+      contasBancarias.some((account) => account.id === bankAccountIdFromUrl);
+
+    const nextAccountId = hasAccountFromUrl
+      ? (bankAccountIdFromUrl as string)
+      : firstAccount.id;
+
+    if (contaFilter !== nextAccountId) {
+      setContaFilter(nextAccountId);
+    }
+
+    if (bankAccountIdFromUrl !== nextAccountId) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('bank_account_id', nextAccountId);
+      router.replace(`${pathname}?${params.toString()}`);
+    }
+  }, [
+    bankAccountIdFromUrl,
+    contaFilter,
+    contasBancarias,
+    pathname,
+    router,
+    searchParams,
+  ]);
+
+  const { data: extratos = [], refetch: refetchExtratos } = useQuery<
+    Statement[]
+  >({
+    queryKey: ['finance-statements', contaFilter, debouncedSearch],
+    queryFn: async () => {
+      if (!contaFilter) {
+        return [];
+      }
+
+      const params = new URLSearchParams();
+      params.set('bank_account_id', contaFilter);
+
+      const trimmedSearch = debouncedSearch.trim();
+      if (trimmedSearch) {
+        params.set('search', trimmedSearch);
+      }
+
+      const response = await request({
+        url: `/finance/statements?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return (response?.data || []) as Statement[];
+    },
+  });
+
+  const conta = contasBancarias.find((item) => item.id === contaFilter);
+  const contaExtratoSelecionado = extratoSelecionado
+    ? contasBancarias.find(
+        (item) => item.id === extratoSelecionado.contaBancariaId
+      )
+    : undefined;
+  const totalEntradas = extratos
+    .filter((e) => e.tipo === 'entrada')
+    .reduce((acc, e) => acc + e.valor, 0);
+  const totalSaidas = extratos
+    .filter((e) => e.tipo === 'saida')
+    .reduce((acc, e) => acc + e.valor, 0);
+
+  const handleExport = async () => {
+    if (!contaFilter) {
+      showToastHandler?.('error', 'Selecione uma conta bancária para exportar');
+      return;
+    }
+
+    try {
+      const params = new URLSearchParams();
+      params.set('bank_account_id', contaFilter);
+
+      const trimmedSearch = search.trim();
+      if (trimmedSearch) {
+        params.set('search', trimmedSearch);
+      }
+
+      const response = await request<Blob>({
+        url: `/finance/statements/export?${params.toString()}`,
+        method: 'GET',
+        responseType: 'blob',
+      });
+
+      const contentDisposition =
+        response.headers?.['content-disposition'] ||
+        response.headers?.['Content-Disposition'];
+      const fileNameMatch =
+        typeof contentDisposition === 'string'
+          ? contentDisposition.match(/filename\*?=(?:UTF-8'')?"?([^";]+)"?/i)
+          : null;
+      const fileName = fileNameMatch?.[1]
+        ? decodeURIComponent(fileNameMatch[1])
+        : `extrato-bancario-${contaFilter}.csv`;
+
+      const blob = new Blob([response.data], {
+        type: 'text/csv;charset=utf-8;',
+      });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch {
+      showToastHandler?.('error', 'Não foi possível exportar o extrato');
+    }
+  };
+
+  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={
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => void handleExport()}>
+              <Download className="mr-2 h-4 w-4" />
+              {t('actions.export')}
+            </Button>
+            <ImportarExtratoSheet
+              contasBancarias={contasBancarias}
+              t={t}
+              defaultBankAccountId={contaFilter}
+              onImported={refetchExtratos}
+              onBankAccountCreated={handleBankAccountCreated}
+            />
+          </div>
+        }
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Select
+          value={contaFilter}
+          onValueChange={(value) => {
+            setContaFilter(value);
+
+            const params = new URLSearchParams(searchParams.toString());
+            params.set('bank_account_id', value);
+            router.replace(`${pathname}?${params.toString()}`);
+          }}
+        >
+          <SelectTrigger className="w-full sm:w-[280px]">
+            <SelectValue placeholder={t('filters.selectAccount')} />
+          </SelectTrigger>
+          <SelectContent>
+            {contasBancarias.map((conta) => (
+              <SelectItem key={conta.id} value={conta.id}>
+                {conta.banco} - {conta.descricao}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="flex-1">
+          <FilterBar
+            searchPlaceholder={t('filters.searchPlaceholder')}
+            searchValue={search}
+            onSearchChange={setSearch}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.inflows')}
+            </CardTitle>
+            <ArrowUpRight className="h-4 w-4 text-green-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totalEntradas} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.outflows')}
+            </CardTitle>
+            <ArrowDownRight className="h-4 w-4 text-red-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              <Money value={totalSaidas} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.accountBalance')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={conta?.saldoAtual || 0} />
+            </div>
+            <p className="text-xs text-muted-foreground">{conta?.descricao}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>
+            {t('table.foundTransactions', { count: extratos.length })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <Table className="min-w-[760px] table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[110px]">
+                    {t('table.headers.date')}
+                  </TableHead>
+                  <TableHead>{t('table.headers.description')}</TableHead>
+                  <TableHead className="w-[130px] text-right">
+                    {t('table.headers.value')}
+                  </TableHead>
+                  <TableHead className="w-[110px]">
+                    {t('table.headers.type')}
+                  </TableHead>
+                  <TableHead className="w-[140px]">
+                    {t('table.headers.reconciliation')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {extratos.map((extrato) => (
+                  <TableRow
+                    key={extrato.id}
+                    className="cursor-pointer"
+                    onClick={() => setExtratoSelecionado(extrato)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setExtratoSelecionado(extrato);
+                      }
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <TableCell>{formatarData(extrato.data)}</TableCell>
+                    <TableCell className="truncate" title={extrato.descricao}>
+                      {extrato.descricao}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <span
+                        className={
+                          extrato.tipo === 'entrada'
+                            ? 'text-green-600'
+                            : 'text-red-600'
+                        }
+                      >
+                        <Money value={extrato.valor} />
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      {extrato.tipo === 'entrada' ? (
+                        <span className="flex items-center gap-1 text-green-600">
+                          <ArrowUpRight className="h-4 w-4" />
+                          {t('types.inflow')}
+                        </span>
+                      ) : (
+                        <span className="flex items-center gap-1 text-red-600">
+                          <ArrowDownRight className="h-4 w-4" />
+                          {t('types.outflow')}
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        status={extrato.statusConciliacao}
+                        type="conciliacao"
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog
+        open={!!extratoSelecionado}
+        onOpenChange={(open) => {
+          if (!open) {
+            setExtratoSelecionado(null);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('table.title')}</DialogTitle>
+            <DialogDescription>{t('header.description')}</DialogDescription>
+          </DialogHeader>
+
+          {extratoSelecionado ? (
+            <div className="space-y-4 rounded-md border p-4">
+              <div className="text-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('table.headers.reconciliation')}
+                </p>
+                <div className="mt-1 flex justify-center">
+                  <StatusBadge
+                    status={extratoSelecionado.statusConciliacao}
+                    type="conciliacao"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.date')}
+                  </p>
+                  <p className="font-medium">
+                    {formatarData(extratoSelecionado.data)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.type')}
+                  </p>
+                  <p className="font-medium">
+                    {extratoSelecionado.tipo === 'entrada'
+                      ? t('types.inflow')
+                      : t('types.outflow')}
+                  </p>
+                </div>
+                <div className="sm:col-span-2">
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.description')}
+                  </p>
+                  <p className="font-medium wrap-break-word">
+                    {extratoSelecionado.descricao}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.value')}
+                  </p>
+                  <p
+                    className={`font-medium ${
+                      extratoSelecionado.tipo === 'entrada'
+                        ? 'text-green-600'
+                        : 'text-red-600'
+                    }`}
+                  >
+                    <Money value={extratoSelecionado.valor} />
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('importDialog.bankAccount')}
+                  </p>
+                  <p className="font-medium">
+                    {contaExtratoSelecionado
+                      ? `${contaExtratoSelecionado.banco} - ${contaExtratoSelecionado.descricao}`
+                      : '-'}
+                  </p>
+                </div>
+                <div className="sm:col-span-2">
+                  <p className="text-xs text-muted-foreground">ID</p>
+                  <p className="font-mono text-xs break-all">
+                    {extratoSelecionado.id}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setExtratoSelecionado(null)}
+            >
+              {t('common.cancel')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}