@hed-hog/finance 0.0.275 → 0.0.276

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

@@ -1,492 +1,492 @@
-'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 { 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 {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { ArrowRight, Plus } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-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;
-  ativo: boolean;
-};
-
-type Transfer = {
-  id: string;
-  contaOrigemId: string;
-  contaDestinoId: string;
-  data: string;
-  valor: number;
-  descricao: string;
-};
-
-const transferFormSchema = z
-  .object({
-    sourceAccountId: z.string().trim().min(1, 'Conta de origem é obrigatória'),
-    destinationAccountId: z
-      .string()
-      .trim()
-      .min(1, 'Conta de destino é obrigatória'),
-    date: z.string().trim().min(1, 'Data é obrigatória'),
-    amount: z.number().min(0.01, 'Valor deve ser maior que zero'),
-    description: z.string().optional(),
-  })
-  .refine((values) => values.sourceAccountId !== values.destinationAccountId, {
-    message: 'As contas de origem e destino devem ser diferentes',
-    path: ['destinationAccountId'],
-  });
-
-type TransferFormValues = z.infer<typeof transferFormSchema>;
-
-function NovaTransferenciaSheet({
-  contasBancarias,
-  t,
-  onCreated,
-}: {
-  contasBancarias: BankAccount[];
-  t: ReturnType<typeof useTranslations>;
-  onCreated: () => Promise<void> | void;
-}) {
-  const { request, showToastHandler } = useApp();
-  const [open, setOpen] = useState(false);
-
-  const form = useForm<TransferFormValues>({
-    resolver: zodResolver(transferFormSchema),
-    defaultValues: {
-      sourceAccountId: '',
-      destinationAccountId: '',
-      date: new Date().toISOString().slice(0, 10),
-      amount: 0,
-      description: '',
-    },
-  });
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    form.reset({
-      sourceAccountId: '',
-      destinationAccountId: '',
-      date: new Date().toISOString().slice(0, 10),
-      amount: 0,
-      description: '',
-    });
-  }, [form, open]);
-
-  const handleSubmit = async (values: TransferFormValues) => {
-    try {
-      await request({
-        url: '/finance/transfers',
-        method: 'POST',
-        data: {
-          source_account_id: Number(values.sourceAccountId),
-          destination_account_id: Number(values.destinationAccountId),
-          date: values.date,
-          amount: values.amount,
-          description: values.description?.trim() || undefined,
-        },
-      });
-
-      await onCreated();
-      setOpen(false);
-      showToastHandler?.('success', 'Transferência cadastrada com sucesso');
-    } catch {
-      showToastHandler?.('error', 'Erro ao cadastrar transferência');
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <Button onClick={() => setOpen(true)}>
-        <Plus className="mr-2 h-4 w-4" />
-        {t('newTransfer.action')}
-      </Button>
-      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{t('newTransfer.title')}</SheetTitle>
-          <SheetDescription>{t('newTransfer.description')}</SheetDescription>
-        </SheetHeader>
-
-        <Form {...form}>
-          <form
-            className="space-y-4 px-4"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
-            <FormField
-              control={form.control}
-              name="sourceAccountId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('fields.sourceAccount')}</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder={t('common.select')} />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {contasBancarias.map((conta) => (
-                        <SelectItem key={conta.id} value={conta.id}>
-                          {conta.banco} - {conta.descricao}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="destinationAccountId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('fields.destinationAccount')}</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder={t('common.select')} />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {contasBancarias.map((conta) => (
-                        <SelectItem key={conta.id} value={conta.id}>
-                          {conta.banco} - {conta.descricao}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="grid grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="date"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.date')}</FormLabel>
-                    <FormControl>
-                      <Input type="date" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.value')}</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="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('fields.description')}</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder={t('fields.descriptionPlaceholder')}
-                      {...field}
-                      value={field.value || ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end gap-2 pt-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setOpen(false)}
-              >
-                {t('common.cancel')}
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {t('newTransfer.submit')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default function TransferenciasPage() {
-  const t = useTranslations('finance.TransfersPage');
-  const { request } = useApp();
-  const [search, setSearch] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [accountFilter, setAccountFilter] = useState('all');
-
-  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 { data: transferencias = [], refetch: refetchTransferencias } =
-    useQuery<Transfer[]>({
-      queryKey: ['finance-transfers', debouncedSearch, accountFilter],
-      queryFn: async () => {
-        const params = new URLSearchParams();
-
-        const trimmedSearch = debouncedSearch.trim();
-        if (trimmedSearch) {
-          params.set('search', trimmedSearch);
-        }
-
-        if (accountFilter !== 'all') {
-          params.set('bank_account_id', accountFilter);
-        }
-
-        const query = params.toString();
-        const response = await request({
-          url: query ? `/finance/transfers?${query}` : '/finance/transfers',
-          method: 'GET',
-        });
-
-        return (response?.data || []) as Transfer[];
-      },
-    });
-
-  const handleTransferCreated = async () => {
-    await Promise.all([refetchTransferencias(), refetchContasBancarias()]);
-  };
-
-  const totalTransferido = transferencias.reduce((acc, t) => acc + t.valor, 0);
-
-  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={
-          <NovaTransferenciaSheet
-            contasBancarias={contasBancarias}
-            t={t}
-            onCreated={handleTransferCreated}
-          />
-        }
-      />
-
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <Select value={accountFilter} onValueChange={setAccountFilter}>
-          <SelectTrigger className="w-full sm:w-[280px]">
-            <SelectValue placeholder={t('common.select')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">Todas as contas</SelectItem>
-            {contasBancarias.map((conta) => (
-              <SelectItem key={conta.id} value={conta.id}>
-                {conta.banco} - {conta.descricao}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <div className="flex-1">
-          <FilterBar
-            searchPlaceholder="Buscar na descrição..."
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
-      </div>
-
-      <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.totalTransferred')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalTransferido} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.transferCount', { count: transferencias.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.activeAccounts')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {contasBancarias.filter((conta) => conta.ativo).length}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.available')}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('table.headers.date')}</TableHead>
-                <TableHead>{t('table.headers.source')}</TableHead>
-                <TableHead className="text-center">→</TableHead>
-                <TableHead>{t('table.headers.destination')}</TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.value')}
-                </TableHead>
-                <TableHead>{t('table.headers.description')}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {transferencias.map((transferencia) => {
-                const contaOrigem = contasBancarias.find(
-                  (conta) => conta.id === transferencia.contaOrigemId
-                );
-                const contaDestino = contasBancarias.find(
-                  (conta) => conta.id === transferencia.contaDestinoId
-                );
-
-                return (
-                  <TableRow key={transferencia.id}>
-                    <TableCell>{formatarData(transferencia.data)}</TableCell>
-                    <TableCell>
-                      <div>
-                        <p className="font-medium">{contaOrigem?.banco}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {contaOrigem?.descricao}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <ArrowRight className="h-4 w-4 text-muted-foreground mx-auto" />
-                    </TableCell>
-                    <TableCell>
-                      <div>
-                        <p className="font-medium">{contaDestino?.banco}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {contaDestino?.descricao}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-right font-semibold">
-                      <Money value={transferencia.valor} />
-                    </TableCell>
-                    <TableCell className="text-muted-foreground">
-                      {transferencia.descricao}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </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 { 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ArrowRight, Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+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;
+  ativo: boolean;
+};
+
+type Transfer = {
+  id: string;
+  contaOrigemId: string;
+  contaDestinoId: string;
+  data: string;
+  valor: number;
+  descricao: string;
+};
+
+const transferFormSchema = z
+  .object({
+    sourceAccountId: z.string().trim().min(1, 'Conta de origem é obrigatória'),
+    destinationAccountId: z
+      .string()
+      .trim()
+      .min(1, 'Conta de destino é obrigatória'),
+    date: z.string().trim().min(1, 'Data é obrigatória'),
+    amount: z.number().min(0.01, 'Valor deve ser maior que zero'),
+    description: z.string().optional(),
+  })
+  .refine((values) => values.sourceAccountId !== values.destinationAccountId, {
+    message: 'As contas de origem e destino devem ser diferentes',
+    path: ['destinationAccountId'],
+  });
+
+type TransferFormValues = z.infer<typeof transferFormSchema>;
+
+function NovaTransferenciaSheet({
+  contasBancarias,
+  t,
+  onCreated,
+}: {
+  contasBancarias: BankAccount[];
+  t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<void> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<TransferFormValues>({
+    resolver: zodResolver(transferFormSchema),
+    defaultValues: {
+      sourceAccountId: '',
+      destinationAccountId: '',
+      date: new Date().toISOString().slice(0, 10),
+      amount: 0,
+      description: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      sourceAccountId: '',
+      destinationAccountId: '',
+      date: new Date().toISOString().slice(0, 10),
+      amount: 0,
+      description: '',
+    });
+  }, [form, open]);
+
+  const handleSubmit = async (values: TransferFormValues) => {
+    try {
+      await request({
+        url: '/finance/transfers',
+        method: 'POST',
+        data: {
+          source_account_id: Number(values.sourceAccountId),
+          destination_account_id: Number(values.destinationAccountId),
+          date: values.date,
+          amount: values.amount,
+          description: values.description?.trim() || undefined,
+        },
+      });
+
+      await onCreated();
+      setOpen(false);
+      showToastHandler?.('success', 'Transferência cadastrada com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Erro ao cadastrar transferência');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <Button onClick={() => setOpen(true)}>
+        <Plus className="mr-2 h-4 w-4" />
+        {t('newTransfer.action')}
+      </Button>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('newTransfer.title')}</SheetTitle>
+          <SheetDescription>{t('newTransfer.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="sourceAccountId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('fields.sourceAccount')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('common.select')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {contasBancarias.map((conta) => (
+                        <SelectItem key={conta.id} value={conta.id}>
+                          {conta.banco} - {conta.descricao}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="destinationAccountId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('fields.destinationAccount')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('common.select')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {contasBancarias.map((conta) => (
+                        <SelectItem key={conta.id} value={conta.id}>
+                          {conta.banco} - {conta.descricao}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="date"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.date')}</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="amount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.value')}</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="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('fields.description')}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder={t('fields.descriptionPlaceholder')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('newTransfer.submit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function TransferenciasPage() {
+  const t = useTranslations('finance.TransfersPage');
+  const { request } = useApp();
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [accountFilter, setAccountFilter] = useState('all');
+
+  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 { data: transferencias = [], refetch: refetchTransferencias } =
+    useQuery<Transfer[]>({
+      queryKey: ['finance-transfers', debouncedSearch, accountFilter],
+      queryFn: async () => {
+        const params = new URLSearchParams();
+
+        const trimmedSearch = debouncedSearch.trim();
+        if (trimmedSearch) {
+          params.set('search', trimmedSearch);
+        }
+
+        if (accountFilter !== 'all') {
+          params.set('bank_account_id', accountFilter);
+        }
+
+        const query = params.toString();
+        const response = await request({
+          url: query ? `/finance/transfers?${query}` : '/finance/transfers',
+          method: 'GET',
+        });
+
+        return (response?.data || []) as Transfer[];
+      },
+    });
+
+  const handleTransferCreated = async () => {
+    await Promise.all([refetchTransferencias(), refetchContasBancarias()]);
+  };
+
+  const totalTransferido = transferencias.reduce((acc, t) => acc + t.valor, 0);
+
+  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={
+          <NovaTransferenciaSheet
+            contasBancarias={contasBancarias}
+            t={t}
+            onCreated={handleTransferCreated}
+          />
+        }
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Select value={accountFilter} onValueChange={setAccountFilter}>
+          <SelectTrigger className="w-full sm:w-[280px]">
+            <SelectValue placeholder={t('common.select')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Todas as contas</SelectItem>
+            {contasBancarias.map((conta) => (
+              <SelectItem key={conta.id} value={conta.id}>
+                {conta.banco} - {conta.descricao}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="flex-1">
+          <FilterBar
+            searchPlaceholder="Buscar na descrição..."
+            searchValue={search}
+            onSearchChange={setSearch}
+          />
+        </div>
+      </div>
+
+      <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.totalTransferred')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalTransferido} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.transferCount', { count: transferencias.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.activeAccounts')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {contasBancarias.filter((conta) => conta.ativo).length}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.available')}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.date')}</TableHead>
+                <TableHead>{t('table.headers.source')}</TableHead>
+                <TableHead className="text-center">→</TableHead>
+                <TableHead>{t('table.headers.destination')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+                <TableHead>{t('table.headers.description')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {transferencias.map((transferencia) => {
+                const contaOrigem = contasBancarias.find(
+                  (conta) => conta.id === transferencia.contaOrigemId
+                );
+                const contaDestino = contasBancarias.find(
+                  (conta) => conta.id === transferencia.contaDestinoId
+                );
+
+                return (
+                  <TableRow key={transferencia.id}>
+                    <TableCell>{formatarData(transferencia.data)}</TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{contaOrigem?.banco}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {contaOrigem?.descricao}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <ArrowRight className="h-4 w-4 text-muted-foreground mx-auto" />
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{contaDestino?.banco}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {contaDestino?.descricao}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right font-semibold">
+                      <Money value={transferencia.valor} />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {transferencia.descricao}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}