@hed-hog/finance 0.0.300 → 0.0.302

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';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,6 +20,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Form,
   FormControl,
@@ -45,6 +46,11 @@ import {
   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 {
@@ -469,7 +475,7 @@ function NovaContaSheet({
         }
       }}
     >
-      <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')}
@@ -477,37 +483,25 @@ function NovaContaSheet({
           <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">
+          <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="agencia"
+                  name="banco"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('fields.branch')}</FormLabel>
+                      <FormLabel>{t('fields.bank')}</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder="0000"
+                          placeholder={t('fields.bankPlaceholder')}
                           {...field}
-                          value={field.value || ''}
                         />
                       </FormControl>
                       <FormMessage />
@@ -515,15 +509,114 @@ function NovaContaSheet({
                   )}
                 />
 
+                <div className="grid gap-4 md:grid-cols-2">
+                  <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 gap-4 md:grid-cols-2">
+                  <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="conta"
+                  name="descricao"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('fields.account')}</FormLabel>
+                      <FormLabel>{t('fields.description')}</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder="00000-0"
+                          placeholder={t('fields.descriptionPlaceholder')}
                           {...field}
                           value={field.value || ''}
                         />
@@ -532,150 +625,78 @@ function NovaContaSheet({
                     </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>
-                  )}
-                />
+              </FinanceSheetSection>
 
-                <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}
+              <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"
                         />
-                      </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>
-                )}
-              />
-
-              <FormItem>
-                <FormLabel>{t('fields.logo')}</FormLabel>
-                <div className="flex items-start gap-4 rounded-lg border p-3">
-                  <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}
                       />
-                    ) : (
-                      <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 ? (
+                      <div className="flex flex-wrap gap-2">
                         <Button
                           type="button"
-                          variant="ghost"
-                          onClick={() => void handleRemoveLogo()}
+                          variant="outline"
+                          onClick={handleSelectLogo}
                           disabled={isUploadingLogo}
                         >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('fields.logoRemove')}
+                          <Upload className="mr-2 h-4 w-4" />
+                          {t('fields.logoAction')}
                         </Button>
-                      ) : null}
-                    </div>
 
-                    <p className="text-xs text-muted-foreground">
-                      {t('fields.logoHint')}
-                    </p>
+                        {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>
 
-                    {isUploadingLogo ? (
                       <p className="text-xs text-muted-foreground">
-                        {t('fields.logoUploading', {
-                          progress: logoUploadProgress,
-                        })}
+                        {t('fields.logoHint')}
                       </p>
-                    ) : null}
+
+                      {isUploadingLogo ? (
+                        <p className="text-xs text-muted-foreground">
+                          {t('fields.logoUploading', {
+                            progress: logoUploadProgress,
+                          })}
+                        </p>
+                      ) : null}
+                    </div>
                   </div>
-                </div>
-              </FormItem>
-            </div>
+                </FormItem>
+              </FinanceSheetSection>
+            </FinanceSheetBody>
 
-            <div className="flex justify-end gap-2 pt-4">
+            <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>
@@ -748,6 +769,44 @@ export default function ContasBancariasPage() {
   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);
@@ -829,174 +888,162 @@ 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>
+      <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <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">
-                    <BankAccountLogo account={conta} icon={TipoIcon} />
-                    <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>
-                        )}
+      <FinancePageSection
+        contentClassName="p-0"
+        className="border-none shadow-none"
+      >
+        {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>
-                      <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>
+                      {!conta.ativo ? (
+                        <Badge
+                          variant="outline"
+                          className="text-muted-foreground"
+                        >
+                          {t('status.inactive')}
+                        </Badge>
+                      ) : null}
                     </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 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>
+                  </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>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </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>
   );
 }