@hed-hog/finance 0.0.299 → 0.0.301

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

@@ -1,6 +1,6 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
+'use client';
+
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -13,13 +13,14 @@ import {
 } 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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Form,
   FormControl,
@@ -38,13 +39,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  FinancePageSection,
+  FinanceSheetBody,
+  FinanceSheetSection,
+} from '../../_components/finance-layout';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -59,10 +65,11 @@ import {
   TrendingUp,
   Upload,
   Wallet,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -72,6 +79,7 @@ const bankAccountFormSchema = z.object({
   conta: z.string().optional(),
   tipo: z.string().min(1, 'Tipo é obrigatório'),
   descricao: z.string().optional(),
+  logoFileId: z.number().int().nullable().optional(),
   saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
 });
 
@@ -85,11 +93,48 @@ type BankAccount = {
   agencia: string;
   conta: string;
   tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
+  logoFileId: number | null;
   saldoAtual: number;
   saldoConciliado: number;
   ativo: boolean;
 };
 
+type UploadedFilePayload = {
+  id?: number | string | null;
+};
+
+function BankAccountLogo({
+  account,
+  icon: Icon,
+}: {
+  account: BankAccount;
+  icon: LucideIcon;
+}) {
+  const [hasImageError, setHasImageError] = useState(false);
+  const apiBaseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  const logoUrl =
+    account.logoFileId && account.logoFileId > 0
+      ? `${apiBaseUrl}/file/open/${account.logoFileId}?v=${account.logoFileId}`
+      : null;
+
+  if (!logoUrl || hasImageError) {
+    return (
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+        <Icon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={logoUrl}
+      alt={account.banco}
+      className="h-10 w-10 rounded-lg border bg-muted object-cover"
+      onError={() => setHasImageError(true)}
+    />
+  );
+}
+
 function NovaContaSheet({
   t,
   onCreated,
@@ -119,6 +164,21 @@ function NovaContaSheet({
   const updateErrorMessage = t.has('messages.updateError')
     ? t('messages.updateError')
     : 'Erro ao atualizar conta bancária';
+  const logoUploadSuccessMessage = t.has('messages.logoUploadSuccess')
+    ? t('messages.logoUploadSuccess')
+    : 'Logo enviado com sucesso';
+  const logoUploadErrorMessage = t.has('messages.logoUploadError')
+    ? t('messages.logoUploadError')
+    : 'Erro ao enviar logo';
+  const logoRemoveSuccessMessage = t.has('messages.logoRemoveSuccess')
+    ? t('messages.logoRemoveSuccess')
+    : 'Logo removido com sucesso';
+  const logoInvalidTypeMessage = t.has('messages.logoInvalidType')
+    ? t('messages.logoInvalidType')
+    : 'Selecione um arquivo de imagem válido';
+  const logoTooLargeMessage = t.has('messages.logoTooLarge')
+    ? t('messages.logoTooLarge')
+    : 'O logo deve ter no máximo 5 MB';
 
   const form = useForm<BankAccountFormValues>({
     resolver: zodResolver(bankAccountFormSchema),
@@ -128,38 +188,204 @@ function NovaContaSheet({
       conta: '',
       tipo: '',
       descricao: '',
+      logoFileId: null,
       saldoInicial: 0,
     },
   });
 
+  const [logoFileId, setLogoFileId] = useState<number | null>(null);
+  const [persistedLogoFileId, setPersistedLogoFileId] = useState<number | null>(
+    null
+  );
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [isUploadingLogo, setIsUploadingLogo] = useState(false);
+  const [logoUploadProgress, setLogoUploadProgress] = useState(0);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+
+  const getLogoUrl = (fileId?: number | null) => {
+    if (typeof fileId !== 'number' || fileId <= 0) {
+      return null;
+    }
+
+    return `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}/file/open/${fileId}`;
+  };
+
+  const deleteFileById = async (fileId?: number | null) => {
+    if (!fileId || fileId <= 0) {
+      return;
+    }
+
+    try {
+      await request({
+        url: '/file',
+        method: 'DELETE',
+        data: { ids: [fileId] },
+      });
+    } catch {
+      // Ignore cleanup failures to keep the form stable.
+    }
+  };
+
+  const cleanupUnsavedLogo = async () => {
+    if (logoFileId && logoFileId !== persistedLogoFileId) {
+      await deleteFileById(logoFileId);
+    }
+  };
+
+  const handleSelectLogo = () => {
+    if (!logoInputRef.current || isUploadingLogo) {
+      return;
+    }
+
+    logoInputRef.current.value = '';
+    logoInputRef.current.click();
+  };
+
+  const handleLogoUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+      showToastHandler?.('error', logoInvalidTypeMessage);
+      event.target.value = '';
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      showToastHandler?.('error', logoTooLargeMessage);
+      event.target.value = '';
+      return;
+    }
+
+    setIsUploadingLogo(true);
+    setLogoUploadProgress(0);
+
+    try {
+      const previousUploadedLogoId = logoFileId;
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'finance/bank-account/logo');
+
+      const { data } = await request<UploadedFilePayload>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (progressEvent) => {
+          if (!progressEvent.total) {
+            return;
+          }
+
+          const progress = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setLogoUploadProgress(progress);
+        },
+      });
+
+      const nextLogoFileId = Number(data?.id);
+
+      if (!nextLogoFileId) {
+        throw new Error('Logo upload failed');
+      }
+
+      if (
+        previousUploadedLogoId &&
+        previousUploadedLogoId !== persistedLogoFileId
+      ) {
+        await deleteFileById(previousUploadedLogoId);
+      }
+
+      setLogoFileId(nextLogoFileId);
+      setLogoPreviewUrl(`${getLogoUrl(nextLogoFileId)}?ts=${Date.now()}`);
+      setLogoUploadProgress(100);
+      form.setValue('logoFileId', nextLogoFileId, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+      showToastHandler?.('success', logoUploadSuccessMessage);
+    } catch {
+      showToastHandler?.('error', logoUploadErrorMessage);
+      setLogoUploadProgress(0);
+    } finally {
+      setIsUploadingLogo(false);
+      event.target.value = '';
+    }
+  };
+
+  const handleRemoveLogo = async () => {
+    if (isUploadingLogo) {
+      return;
+    }
+
+    if (logoFileId && logoFileId !== persistedLogoFileId) {
+      await deleteFileById(logoFileId);
+    }
+
+    setLogoFileId(null);
+    setLogoPreviewUrl(null);
+    setLogoUploadProgress(0);
+    form.setValue('logoFileId', null, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+    showToastHandler?.('success', logoRemoveSuccessMessage);
+  };
+
   useEffect(() => {
     if (!open) {
       return;
     }
 
     if (editingAccount) {
+      const currentLogoFileId = editingAccount.logoFileId ?? null;
+
+      setLogoFileId(currentLogoFileId);
+      setPersistedLogoFileId(currentLogoFileId);
+      setLogoPreviewUrl(
+        currentLogoFileId
+          ? `${getLogoUrl(currentLogoFileId)}?ts=${Date.now()}`
+          : null
+      );
+      setLogoUploadProgress(0);
+
       form.reset({
         banco: editingAccount.banco,
         agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
         conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
         tipo: editingAccount.tipo,
         descricao: editingAccount.descricao,
+        logoFileId: currentLogoFileId,
         saldoInicial: editingAccount.saldoAtual,
       });
       return;
     }
 
+    setLogoFileId(null);
+    setPersistedLogoFileId(null);
+    setLogoPreviewUrl(null);
+    setLogoUploadProgress(0);
+
     form.reset({
       banco: '',
       agencia: '',
       conta: '',
       tipo: '',
       descricao: '',
+      logoFileId: null,
       saldoInicial: 0,
     });
   }, [editingAccount, form, open]);
 
   const handleSubmit = async (values: BankAccountFormValues) => {
+    const nextLogoFileId = values.logoFileId ?? null;
+    const previousPersistedLogoId = persistedLogoFileId;
+
     try {
       if (editingAccount) {
         await request({
@@ -171,6 +397,7 @@ function NovaContaSheet({
             account: values.conta || undefined,
             type: values.tipo,
             description: values.descricao?.trim() || undefined,
+            logo_file_id: nextLogoFileId,
           },
         });
       } else {
@@ -183,13 +410,36 @@ function NovaContaSheet({
             account: values.conta || undefined,
             type: values.tipo,
             description: values.descricao?.trim() || undefined,
+            logo_file_id: nextLogoFileId,
             initial_balance: values.saldoInicial,
           },
         });
       }
 
       await onCreated();
-      form.reset();
+
+      if (
+        previousPersistedLogoId &&
+        previousPersistedLogoId !== nextLogoFileId
+      ) {
+        await deleteFileById(previousPersistedLogoId);
+      }
+
+      setPersistedLogoFileId(nextLogoFileId);
+      setLogoFileId(nextLogoFileId);
+      setLogoPreviewUrl(
+        nextLogoFileId ? `${getLogoUrl(nextLogoFileId)}?ts=${Date.now()}` : null
+      );
+      setLogoUploadProgress(0);
+      form.reset({
+        banco: '',
+        agencia: '',
+        conta: '',
+        tipo: '',
+        descricao: '',
+        logoFileId: null,
+        saldoInicial: 0,
+      });
       onOpenChange(false);
       onEditingAccountChange(null);
       showToastHandler?.(
@@ -205,6 +455,7 @@ function NovaContaSheet({
   };
 
   const handleCancel = () => {
+    void cleanupUnsavedLogo();
     form.reset();
     onEditingAccountChange(null);
     onOpenChange(false);
@@ -214,40 +465,51 @@ function NovaContaSheet({
     <Sheet
       open={open}
       onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          void cleanupUnsavedLogo();
+        }
+
         onOpenChange(nextOpen);
         if (!nextOpen) {
           onEditingAccountChange(null);
         }
       }}
     >
-      <SheetContent className="w-full sm:max-w-lg">
+      <SheetContent className="flex h-full w-full flex-col sm:max-w-2xl">
         <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>
-                )}
-              />
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('sections.accountData.title')}
+                description={t('sections.accountData.description')}
+              >
+                <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">
+              <div className="grid gap-4 md:grid-cols-2">
                 <FormField
                   control={form.control}
                   name="agencia"
@@ -285,7 +547,7 @@ function NovaContaSheet({
                 />
               </div>
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid gap-4 md:grid-cols-2">
                 <FormField
                   control={form.control}
                   name="tipo"
@@ -344,11 +606,11 @@ function NovaContaSheet({
                 />
               </div>
 
-              <FormField
-                control={form.control}
-                name="descricao"
-                render={({ field }) => (
-                  <FormItem>
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
                     <FormLabel>{t('fields.description')}</FormLabel>
                     <FormControl>
                       <Input
@@ -357,17 +619,89 @@ function NovaContaSheet({
                         value={field.value || ''}
                       />
                     </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="flex justify-end gap-2 pt-4">
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              </FinanceSheetSection>
+
+              <FinanceSheetSection
+                title={t('sections.logo.title')}
+                description={t('sections.logo.description')}
+              >
+                <FormItem>
+                  <FormLabel>{t('fields.logo')}</FormLabel>
+                  <div className="flex flex-col gap-4 rounded-xl border border-dashed border-border/70 bg-muted/20 p-4 sm:flex-row sm:items-start">
+                    <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                      {logoPreviewUrl ? (
+                        <img
+                          src={logoPreviewUrl}
+                          alt={t('fields.logo')}
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <Landmark className="h-8 w-8 text-muted-foreground" />
+                      )}
+                    </div>
+
+                    <div className="flex-1 space-y-2">
+                      <input
+                        ref={logoInputRef}
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={handleLogoUpload}
+                      />
+
+                      <div className="flex flex-wrap gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={handleSelectLogo}
+                          disabled={isUploadingLogo}
+                        >
+                          <Upload className="mr-2 h-4 w-4" />
+                          {t('fields.logoAction')}
+                        </Button>
+
+                        {logoFileId ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => void handleRemoveLogo()}
+                            disabled={isUploadingLogo}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            {t('fields.logoRemove')}
+                          </Button>
+                        ) : null}
+                      </div>
+
+                      <p className="text-xs text-muted-foreground">
+                        {t('fields.logoHint')}
+                      </p>
+
+                      {isUploadingLogo ? (
+                        <p className="text-xs text-muted-foreground">
+                          {t('fields.logoUploading', {
+                            progress: logoUploadProgress,
+                          })}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                </FormItem>
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="flex justify-end gap-2 border-t px-4 py-4 sm:px-6">
               <Button type="button" variant="outline" onClick={handleCancel}>
                 {t('common.cancel')}
               </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={form.formState.isSubmitting || isUploadingLogo}
+              >
                 {t('common.save')}
               </Button>
             </div>
@@ -430,9 +764,47 @@ export default function ContasBancariasPage() {
     .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 saldoConciliadoTotal = accounts
+    .filter((c) => c.ativo)
+    .reduce((acc, c) => acc + c.saldoConciliado, 0);
+  const activeAccountsCount = accounts.filter((c) => c.ativo).length;
+  const inactiveAccountsCount = accounts.length - activeAccountsCount;
+  const summaryCards = [
+    {
+      key: 'balance',
+      title: t('cards.totalBalance'),
+      value: <Money value={saldoTotal} />,
+      description: t('cards.activeAccounts', {
+        count: activeAccountsCount,
+      }),
+      icon: Landmark,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'reconciled',
+      title: t('cards.reconciledBalance'),
+      value: <Money value={saldoConciliadoTotal} />,
+      description: `${t('cards.difference')}: ${new Intl.NumberFormat(
+        currentLocaleCode === 'pt' ? 'pt-BR' : 'en-US',
+        {
+          style: 'currency',
+          currency: 'BRL',
+        }
+      ).format(saldoTotal - saldoConciliadoTotal)}`,
+      icon: RefreshCw,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'accounts',
+      title: t('cards.accountsOverview'),
+      value: activeAccountsCount,
+      description: t('cards.inactiveAccounts', {
+        count: inactiveAccountsCount,
+      }),
+      icon: Building2,
+      layout: 'compact' as const,
+    },
+  ];
 
   const handleCreate = () => {
     setEditingAccount(null);
@@ -514,173 +886,163 @@ export default function ContasBancariasPage() {
         </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>
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <FinancePageSection
+        title={t('list.title')}
+        description={t('list.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        {accounts.length > 0 ? (
+          <div className="grid gap-4 md:grid-cols-2 xl: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 ? 'border-border/60 opacity-70' : ''}
+                >
+                  <CardHeader className="space-y-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex min-w-0 items-center gap-3">
+                        <BankAccountLogo account={conta} icon={TipoIcon} />
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <CardTitle className="text-base">
+                              {conta.banco}
+                            </CardTitle>
+                            {conta.descricao ? (
+                              <span className="text-xs text-muted-foreground">
+                                {conta.descricao}
+                              </span>
+                            ) : null}
+                          </div>
+                          <CardDescription className="space-y-0.5">
+                            {conta.agencia !== '-' ? (
+                              <span className="block">
+                                {t('accountCard.bankAccount', {
+                                  agency: conta.agencia,
+                                  account: conta.conta,
+                                })}
+                              </span>
+                            ) : null}
+                            <span className="block">{tipo.label}</span>
+                          </CardDescription>
+                        </div>
+                      </div>
+                      {!conta.ativo ? (
+                        <Badge
+                          variant="outline"
+                          className="text-muted-foreground"
+                        >
+                          {t('status.inactive')}
+                        </Badge>
+                      ) : null}
+                    </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>
+                      ) : null}
+                      <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 inline-flex shrink-0 overflow-hidden rounded-md border bg-background shadow-sm">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="rounded-none border-0 px-3 hover:bg-muted"
+                            onClick={() => handleEdit(conta)}
+                            aria-label={t('common.edit')}
+                            title={t('common.edit')}
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="rounded-none border-0 border-l px-3 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                            onClick={() => setAccountIdToDelete(conta.id)}
+                            aria-label={deleteDialogTitle}
+                            title={deleteDialogTitle}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="p-6 sm:p-8">
+            <EmptyState
+              icon={<Landmark className="h-12 w-12" />}
+              title={t('empty.title')}
+              description={t('empty.description')}
+              actionLabel={t('newAccount.action')}
+              onAction={handleCreate}
+            />
+          </div>
+        )}
+      </FinancePageSection>
     </Page>
   );
 }