@hed-hog/finance 0.0.274 → 0.0.276

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

@@ -1,686 +1,686 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-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 { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Building2,
-  Eye,
-  Landmark,
-  Pencil,
-  PiggyBank,
-  Plus,
-  RefreshCw,
-  Trash2,
-  TrendingUp,
-  Upload,
-  Wallet,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-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'),
-});
-
-type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
-
-type BankAccount = {
-  id: string;
-  codigo: string;
-  descricao: string;
-  banco: string;
-  agencia: string;
-  conta: string;
-  tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
-  saldoAtual: number;
-  saldoConciliado: number;
-  ativo: boolean;
-};
-
-function NovaContaSheet({
-  t,
-  onCreated,
-  open,
-  onOpenChange,
-  editingAccount,
-  onEditingAccountChange,
-}: {
-  t: ReturnType<typeof useTranslations>;
-  onCreated: () => Promise<any> | void;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  editingAccount: BankAccount | null;
-  onEditingAccountChange: (account: BankAccount | null) => void;
-}) {
-  const { request, showToastHandler } = useApp();
-
-  const createSuccessMessage = t.has('messages.createSuccess')
-    ? t('messages.createSuccess')
-    : 'Conta bancária cadastrada com sucesso';
-  const createErrorMessage = t.has('messages.createError')
-    ? t('messages.createError')
-    : 'Erro ao cadastrar conta bancária';
-  const updateSuccessMessage = t.has('messages.updateSuccess')
-    ? t('messages.updateSuccess')
-    : 'Conta bancária atualizada com sucesso';
-  const updateErrorMessage = t.has('messages.updateError')
-    ? t('messages.updateError')
-    : 'Erro ao atualizar conta bancária';
-
-  const form = useForm<BankAccountFormValues>({
-    resolver: zodResolver(bankAccountFormSchema),
-    defaultValues: {
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      saldoInicial: 0,
-    },
-  });
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    if (editingAccount) {
-      form.reset({
-        banco: editingAccount.banco,
-        agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
-        conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
-        tipo: editingAccount.tipo,
-        descricao: editingAccount.descricao,
-        saldoInicial: editingAccount.saldoAtual,
-      });
-      return;
-    }
-
-    form.reset({
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      saldoInicial: 0,
-    });
-  }, [editingAccount, form, open]);
-
-  const handleSubmit = async (values: BankAccountFormValues) => {
-    try {
-      if (editingAccount) {
-        await request({
-          url: `/finance/bank-accounts/${editingAccount.id}`,
-          method: 'PATCH',
-          data: {
-            bank: values.banco,
-            branch: values.agencia || undefined,
-            account: values.conta || undefined,
-            type: values.tipo,
-            description: values.descricao?.trim() || undefined,
-          },
-        });
-      } else {
-        await request({
-          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,
-          },
-        });
-      }
-
-      await onCreated();
-      form.reset();
-      onOpenChange(false);
-      onEditingAccountChange(null);
-      showToastHandler?.(
-        'success',
-        editingAccount ? updateSuccessMessage : createSuccessMessage
-      );
-    } catch {
-      showToastHandler?.(
-        'error',
-        editingAccount ? updateErrorMessage : createErrorMessage
-      );
-    }
-  };
-
-  const handleCancel = () => {
-    form.reset();
-    onEditingAccountChange(null);
-    onOpenChange(false);
-  };
-
-  return (
-    <Sheet
-      open={open}
-      onOpenChange={(nextOpen) => {
-        onOpenChange(nextOpen);
-        if (!nextOpen) {
-          onEditingAccountChange(null);
-        }
-      }}
-    >
-      <SheetContent className="w-full sm:max-w-lg">
-        <SheetHeader>
-          <SheetTitle>
-            {editingAccount ? t('common.edit') : t('newAccount.title')}
-          </SheetTitle>
-          <SheetDescription>{t('newAccount.description')}</SheetDescription>
-        </SheetHeader>
-        <Form {...form}>
-          <form className="p-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-4">
-              <FormField
-                control={form.control}
-                name="banco"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.bank')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('fields.bankPlaceholder')}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={form.control}
-                  name="agencia"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.branch')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="0000"
-                          {...field}
-                          value={field.value || ''}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="conta"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('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>{t('fields.type')}</FormLabel>
-                      <Select
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <SelectValue placeholder={t('common.select')} />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="corrente">
-                            {t('types.corrente')}
-                          </SelectItem>
-                          <SelectItem value="poupanca">
-                            {t('types.poupanca')}
-                          </SelectItem>
-                          <SelectItem value="investimento">
-                            {t('types.investimento')}
-                          </SelectItem>
-                          <SelectItem value="caixa">
-                            {t('types.caixa')}
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="saldoInicial"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('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"
-                          disabled={!!editingAccount}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.description')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('fields.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}>
-                {t('common.save')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default function ContasBancariasPage() {
-  const t = useTranslations('finance.BankAccountsPage');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-
-  const deleteSuccessMessage = t.has('messages.deleteSuccess')
-    ? t('messages.deleteSuccess')
-    : 'Conta bancária inativada com sucesso';
-  const deleteErrorMessage = t.has('messages.deleteError')
-    ? t('messages.deleteError')
-    : 'Erro ao inativar conta bancária';
-  const deleteDialogTitle = t.has('deleteDialog.title')
-    ? t('deleteDialog.title')
-    : 'Inativar conta bancária';
-  const deleteDialogDescription = t.has('deleteDialog.description')
-    ? t('deleteDialog.description')
-    : 'Deseja realmente inativar esta conta bancária?';
-  const deleteDialogConfirm = t.has('deleteDialog.confirm')
-    ? t('deleteDialog.confirm')
-    : 'Inativar';
-
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [editingAccount, setEditingAccount] = useState<BankAccount | null>(
-    null
-  );
-  const [accountIdToDelete, setAccountIdToDelete] = useState<string | null>(
-    null
-  );
-  const { data: contasBancarias, refetch } = useQuery<BankAccount[]>({
-    queryKey: ['finance-bank-accounts', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request({
-        url: '/finance/bank-accounts',
-        method: 'GET',
-      });
-
-      return (response.data || []) as BankAccount[];
-    },
-    placeholderData: [],
-  });
-  const accounts = contasBancarias ?? [];
-
-  const tipoConfig = {
-    corrente: { label: t('types.corrente'), icon: Building2 },
-    poupanca: { label: t('types.poupanca'), icon: PiggyBank },
-    investimento: { label: t('types.investimento'), icon: TrendingUp },
-    caixa: { label: t('types.caixa'), icon: Wallet },
-  };
-
-  const saldoTotal = accounts
-    .filter((c) => c.ativo)
-    .reduce((acc, c) => acc + c.saldoAtual, 0);
-
-  const saldoConciliadoTotal = accounts
-    .filter((c) => c.ativo)
-    .reduce((acc, c) => acc + c.saldoConciliado, 0);
-
-  const handleCreate = () => {
-    setEditingAccount(null);
-    setSheetOpen(true);
-  };
-
-  const handleEdit = (account: BankAccount) => {
-    setEditingAccount(account);
-    setSheetOpen(true);
-  };
-
-  const handleDelete = async () => {
-    if (!accountIdToDelete) {
-      return;
-    }
-
-    try {
-      await request({
-        url: `/finance/bank-accounts/${accountIdToDelete}`,
-        method: 'DELETE',
-      });
-
-      await refetch();
-      showToastHandler?.('success', deleteSuccessMessage);
-      setAccountIdToDelete(null);
-    } catch {
-      showToastHandler?.('error', deleteErrorMessage);
-    }
-  };
-
-  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={
-          <Button onClick={handleCreate}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('newAccount.action')}
-          </Button>
-        }
-      />
-
-      <NovaContaSheet
-        t={t}
-        onCreated={refetch}
-        open={sheetOpen}
-        onOpenChange={setSheetOpen}
-        editingAccount={editingAccount}
-        onEditingAccountChange={setEditingAccount}
-      />
-
-      <AlertDialog
-        open={!!accountIdToDelete}
-        onOpenChange={(open) => {
-          if (!open) {
-            setAccountIdToDelete(null);
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{deleteDialogTitle}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {deleteDialogDescription}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete}>
-              {deleteDialogConfirm}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalBalance')}
-            </CardTitle>
-            <Landmark className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={saldoTotal} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.activeAccounts', {
-                count: accounts.filter((c) => c.ativo).length,
-              })}
-            </p>
-          </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.reconciledBalance')}
-            </CardTitle>
-            <RefreshCw className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={saldoConciliadoTotal} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.difference')}:{' '}
-              <Money value={saldoTotal - saldoConciliadoTotal} />
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {accounts.map((conta) => {
-          const tipo =
-            tipoConfig[conta.tipo as keyof typeof tipoConfig] ||
-            tipoConfig.corrente;
-          const TipoIcon = tipo.icon;
-          const diferenca = conta.saldoAtual - conta.saldoConciliado;
-
-          return (
-            <Card key={conta.id} className={!conta.ativo ? 'opacity-60' : ''}>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
-                      <TipoIcon className="h-5 w-5" />
-                    </div>
-                    <div>
-                      <div className="flex gap-4 items-center">
-                        <CardTitle className="text-base">
-                          {conta.banco}
-                        </CardTitle>
-                        {conta.descricao && (
-                          <span className="block text-muted-foreground text-xs">
-                            {conta.descricao}
-                          </span>
-                        )}
-                      </div>
-                      <CardDescription className="space-y-0.5">
-                        {conta.agencia !== '-' && (
-                          <span className="block">
-                            {t('accountCard.bankAccount', {
-                              agency: conta.agencia,
-                              account: conta.conta,
-                            })}
-                          </span>
-                        )}
-                      </CardDescription>
-                    </div>
-                  </div>
-                  {!conta.ativo && (
-                    <Badge variant="outline" className="text-muted-foreground">
-                      {t('status.inactive')}
-                    </Badge>
-                  )}
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  <div>
-                    <p className="text-sm text-muted-foreground">
-                      {t('accountCard.currentBalance')}
-                    </p>
-                    <p className="text-2xl font-bold">
-                      <Money value={conta.saldoAtual} />
-                    </p>
-                  </div>
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {t('accountCard.reconciledBalance')}
-                    </span>
-                    <Money value={conta.saldoConciliado} />
-                  </div>
-                  {diferenca !== 0 && (
-                    <div className="flex items-center justify-between text-sm">
-                      <span className="text-muted-foreground">
-                        {t('accountCard.difference')}
-                      </span>
-                      <span
-                        className={
-                          diferenca > 0 ? 'text-green-600' : 'text-red-600'
-                        }
-                      >
-                        <Money value={diferenca} showSign />
-                      </span>
-                    </div>
-                  )}
-                  <div className="flex flex-wrap gap-2 pt-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
-                      asChild
-                    >
-                      <Link
-                        href={`/finance/cash-and-banks/statements?bank_account_id=${conta.id}`}
-                      >
-                        <Eye className="mr-2 h-4 w-4" />
-                        {t('accountCard.statement')}
-                      </Link>
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
-                      asChild
-                    >
-                      <Link
-                        href={`/finance/cash-and-banks/bank-reconciliation?bank_account_id=${conta.id}`}
-                      >
-                        <RefreshCw className="mr-2 h-4 w-4" />
-                        {t('accountCard.reconcile')}
-                      </Link>
-                    </Button>
-                    <div className="ml-auto flex shrink-0 gap-2">
-                      <Button variant="outline" size="sm">
-                        <Upload className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleEdit(conta)}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setAccountIdToDelete(conta.id)}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Building2,
+  Eye,
+  Landmark,
+  Pencil,
+  PiggyBank,
+  Plus,
+  RefreshCw,
+  Trash2,
+  TrendingUp,
+  Upload,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+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'),
+});
+
+type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
+
+type BankAccount = {
+  id: string;
+  codigo: string;
+  descricao: string;
+  banco: string;
+  agencia: string;
+  conta: string;
+  tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
+  saldoAtual: number;
+  saldoConciliado: number;
+  ativo: boolean;
+};
+
+function NovaContaSheet({
+  t,
+  onCreated,
+  open,
+  onOpenChange,
+  editingAccount,
+  onEditingAccountChange,
+}: {
+  t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<any> | void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingAccount: BankAccount | null;
+  onEditingAccountChange: (account: BankAccount | null) => void;
+}) {
+  const { request, showToastHandler } = useApp();
+
+  const createSuccessMessage = t.has('messages.createSuccess')
+    ? t('messages.createSuccess')
+    : 'Conta bancária cadastrada com sucesso';
+  const createErrorMessage = t.has('messages.createError')
+    ? t('messages.createError')
+    : 'Erro ao cadastrar conta bancária';
+  const updateSuccessMessage = t.has('messages.updateSuccess')
+    ? t('messages.updateSuccess')
+    : 'Conta bancária atualizada com sucesso';
+  const updateErrorMessage = t.has('messages.updateError')
+    ? t('messages.updateError')
+    : 'Erro ao atualizar conta bancária';
+
+  const form = useForm<BankAccountFormValues>({
+    resolver: zodResolver(bankAccountFormSchema),
+    defaultValues: {
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (editingAccount) {
+      form.reset({
+        banco: editingAccount.banco,
+        agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
+        conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
+        tipo: editingAccount.tipo,
+        descricao: editingAccount.descricao,
+        saldoInicial: editingAccount.saldoAtual,
+      });
+      return;
+    }
+
+    form.reset({
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    });
+  }, [editingAccount, form, open]);
+
+  const handleSubmit = async (values: BankAccountFormValues) => {
+    try {
+      if (editingAccount) {
+        await request({
+          url: `/finance/bank-accounts/${editingAccount.id}`,
+          method: 'PATCH',
+          data: {
+            bank: values.banco,
+            branch: values.agencia || undefined,
+            account: values.conta || undefined,
+            type: values.tipo,
+            description: values.descricao?.trim() || undefined,
+          },
+        });
+      } else {
+        await request({
+          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,
+          },
+        });
+      }
+
+      await onCreated();
+      form.reset();
+      onOpenChange(false);
+      onEditingAccountChange(null);
+      showToastHandler?.(
+        'success',
+        editingAccount ? updateSuccessMessage : createSuccessMessage
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        editingAccount ? updateErrorMessage : createErrorMessage
+      );
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    onEditingAccountChange(null);
+    onOpenChange(false);
+  };
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        onOpenChange(nextOpen);
+        if (!nextOpen) {
+          onEditingAccountChange(null);
+        }
+      }}
+    >
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>
+            {editingAccount ? t('common.edit') : t('newAccount.title')}
+          </SheetTitle>
+          <SheetDescription>{t('newAccount.description')}</SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form className="p-4" onSubmit={form.handleSubmit(handleSubmit)}>
+            <div className="grid gap-4">
+              <FormField
+                control={form.control}
+                name="banco"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.bank')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('fields.bankPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="agencia"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.branch')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0000"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="conta"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('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>{t('fields.type')}</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder={t('common.select')} />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="corrente">
+                            {t('types.corrente')}
+                          </SelectItem>
+                          <SelectItem value="poupanca">
+                            {t('types.poupanca')}
+                          </SelectItem>
+                          <SelectItem value="investimento">
+                            {t('types.investimento')}
+                          </SelectItem>
+                          <SelectItem value="caixa">
+                            {t('types.caixa')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="saldoInicial"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('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"
+                          disabled={!!editingAccount}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('fields.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}>
+                {t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function ContasBancariasPage() {
+  const t = useTranslations('finance.BankAccountsPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+
+  const deleteSuccessMessage = t.has('messages.deleteSuccess')
+    ? t('messages.deleteSuccess')
+    : 'Conta bancária inativada com sucesso';
+  const deleteErrorMessage = t.has('messages.deleteError')
+    ? t('messages.deleteError')
+    : 'Erro ao inativar conta bancária';
+  const deleteDialogTitle = t.has('deleteDialog.title')
+    ? t('deleteDialog.title')
+    : 'Inativar conta bancária';
+  const deleteDialogDescription = t.has('deleteDialog.description')
+    ? t('deleteDialog.description')
+    : 'Deseja realmente inativar esta conta bancária?';
+  const deleteDialogConfirm = t.has('deleteDialog.confirm')
+    ? t('deleteDialog.confirm')
+    : 'Inativar';
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingAccount, setEditingAccount] = useState<BankAccount | null>(
+    null
+  );
+  const [accountIdToDelete, setAccountIdToDelete] = useState<string | null>(
+    null
+  );
+  const { data: contasBancarias, refetch } = useQuery<BankAccount[]>({
+    queryKey: ['finance-bank-accounts', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/bank-accounts',
+        method: 'GET',
+      });
+
+      return (response.data || []) as BankAccount[];
+    },
+    placeholderData: [],
+  });
+  const accounts = contasBancarias ?? [];
+
+  const tipoConfig = {
+    corrente: { label: t('types.corrente'), icon: Building2 },
+    poupanca: { label: t('types.poupanca'), icon: PiggyBank },
+    investimento: { label: t('types.investimento'), icon: TrendingUp },
+    caixa: { label: t('types.caixa'), icon: Wallet },
+  };
+
+  const saldoTotal = accounts
+    .filter((c) => c.ativo)
+    .reduce((acc, c) => acc + c.saldoAtual, 0);
+
+  const saldoConciliadoTotal = accounts
+    .filter((c) => c.ativo)
+    .reduce((acc, c) => acc + c.saldoConciliado, 0);
+
+  const handleCreate = () => {
+    setEditingAccount(null);
+    setSheetOpen(true);
+  };
+
+  const handleEdit = (account: BankAccount) => {
+    setEditingAccount(account);
+    setSheetOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!accountIdToDelete) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/bank-accounts/${accountIdToDelete}`,
+        method: 'DELETE',
+      });
+
+      await refetch();
+      showToastHandler?.('success', deleteSuccessMessage);
+      setAccountIdToDelete(null);
+    } catch {
+      showToastHandler?.('error', deleteErrorMessage);
+    }
+  };
+
+  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={
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('newAccount.action')}
+          </Button>
+        }
+      />
+
+      <NovaContaSheet
+        t={t}
+        onCreated={refetch}
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        editingAccount={editingAccount}
+        onEditingAccountChange={setEditingAccount}
+      />
+
+      <AlertDialog
+        open={!!accountIdToDelete}
+        onOpenChange={(open) => {
+          if (!open) {
+            setAccountIdToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{deleteDialogTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {deleteDialogDescription}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>
+              {deleteDialogConfirm}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalBalance')}
+            </CardTitle>
+            <Landmark className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={saldoTotal} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.activeAccounts', {
+                count: accounts.filter((c) => c.ativo).length,
+              })}
+            </p>
+          </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.reconciledBalance')}
+            </CardTitle>
+            <RefreshCw className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={saldoConciliadoTotal} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.difference')}:{' '}
+              <Money value={saldoTotal - saldoConciliadoTotal} />
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {accounts.map((conta) => {
+          const tipo =
+            tipoConfig[conta.tipo as keyof typeof tipoConfig] ||
+            tipoConfig.corrente;
+          const TipoIcon = tipo.icon;
+          const diferenca = conta.saldoAtual - conta.saldoConciliado;
+
+          return (
+            <Card key={conta.id} className={!conta.ativo ? 'opacity-60' : ''}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                      <TipoIcon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <div className="flex gap-4 items-center">
+                        <CardTitle className="text-base">
+                          {conta.banco}
+                        </CardTitle>
+                        {conta.descricao && (
+                          <span className="block text-muted-foreground text-xs">
+                            {conta.descricao}
+                          </span>
+                        )}
+                      </div>
+                      <CardDescription className="space-y-0.5">
+                        {conta.agencia !== '-' && (
+                          <span className="block">
+                            {t('accountCard.bankAccount', {
+                              agency: conta.agencia,
+                              account: conta.conta,
+                            })}
+                          </span>
+                        )}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  {!conta.ativo && (
+                    <Badge variant="outline" className="text-muted-foreground">
+                      {t('status.inactive')}
+                    </Badge>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('accountCard.currentBalance')}
+                    </p>
+                    <p className="text-2xl font-bold">
+                      <Money value={conta.saldoAtual} />
+                    </p>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {t('accountCard.reconciledBalance')}
+                    </span>
+                    <Money value={conta.saldoConciliado} />
+                  </div>
+                  {diferenca !== 0 && (
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        {t('accountCard.difference')}
+                      </span>
+                      <span
+                        className={
+                          diferenca > 0 ? 'text-green-600' : 'text-red-600'
+                        }
+                      >
+                        <Money value={diferenca} showSign />
+                      </span>
+                    </div>
+                  )}
+                  <div className="flex flex-wrap gap-2 pt-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
+                      asChild
+                    >
+                      <Link
+                        href={`/finance/cash-and-banks/statements?bank_account_id=${conta.id}`}
+                      >
+                        <Eye className="mr-2 h-4 w-4" />
+                        {t('accountCard.statement')}
+                      </Link>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
+                      asChild
+                    >
+                      <Link
+                        href={`/finance/cash-and-banks/bank-reconciliation?bank_account_id=${conta.id}`}
+                      >
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        {t('accountCard.reconcile')}
+                      </Link>
+                    </Button>
+                    <div className="ml-auto flex shrink-0 gap-2">
+                      <Button variant="outline" size="sm">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleEdit(conta)}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setAccountIdToDelete(conta.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </Page>
+  );
+}