@hed-hog/finance 0.0.300 → 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 {
@@ -469,34 +475,41 @@ 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')}
           </SheetTitle>
           <SheetDescription>{t('newAccount.description')}</SheetDescription>
         </SheetHeader>
-        <Form {...form}>
-          <form className="p-4" onSubmit={form.handleSubmit(handleSubmit)}>
-            <div className="grid gap-4">
-              <FormField
-                control={form.control}
-                name="banco"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.bank')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('fields.bankPlaceholder')}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="grid grid-cols-2 gap-4">
+        <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 gap-4 md:grid-cols-2">
                 <FormField
                   control={form.control}
                   name="agencia"
@@ -534,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"
@@ -593,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
@@ -606,76 +619,82 @@ function NovaContaSheet({
                         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}
-                    />
-
-                    <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>
-            </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>
@@ -745,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);
@@ -829,174 +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">
-                    <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>
-                        )}
-                      </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 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>
+      <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>
   );
 }