@hed-hog/finance 0.0.300 → 0.0.302

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

@@ -1,14 +1,9 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Dialog,
   DialogContent,
@@ -659,6 +654,35 @@ export default function ExtratosPage() {
   const totalSaidas = extratos
     .filter((e) => e.tipo === 'saida')
     .reduce((acc, e) => acc + e.valor, 0);
+  const summaryCards = [
+    {
+      key: 'inflows',
+      title: t('cards.inflows'),
+      value: <Money value={totalEntradas} />,
+      icon: ArrowUpRight,
+      layout: 'compact' as const,
+      valueClassName: 'text-green-600',
+      iconContainerClassName: 'bg-green-500/10 text-green-700',
+      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+    },
+    {
+      key: 'outflows',
+      title: t('cards.outflows'),
+      value: <Money value={totalSaidas} />,
+      icon: ArrowDownRight,
+      layout: 'compact' as const,
+      valueClassName: 'text-red-600',
+      iconContainerClassName: 'bg-red-500/10 text-red-700',
+      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
+    },
+    {
+      key: 'balance',
+      title: t('cards.accountBalance'),
+      value: <Money value={conta?.saldoAtual || 0} />,
+      description: conta?.descricao,
+      layout: 'compact' as const,
+    },
+  ];
 
   const handleExport = async () => {
     if (!contaFilter) {
@@ -749,7 +773,7 @@ export default function ExtratosPage() {
             router.replace(`${pathname}?${params.toString()}`);
           }}
         >
-          <SelectTrigger className="w-full sm:w-[280px]">
+          <SelectTrigger className="w-full sm:w-70">
             <SelectValue placeholder={t('filters.selectAccount')} />
           </SelectTrigger>
           <SelectContent>
@@ -769,141 +793,99 @@ export default function ExtratosPage() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.inflows')}
-            </CardTitle>
-            <ArrowUpRight className="h-4 w-4 text-green-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              <Money value={totalEntradas} />
-            </div>
-          </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.outflows')}
-            </CardTitle>
-            <ArrowDownRight className="h-4 w-4 text-red-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              <Money value={totalSaidas} />
-            </div>
-          </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.accountBalance')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={conta?.saldoAtual || 0} />
-            </div>
-            <p className="text-xs text-muted-foreground">{conta?.descricao}</p>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={3} />
 
-      {extratos.length > 0 ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('table.title')}</CardTitle>
-            <CardDescription>
-              {t('table.foundTransactions', { count: extratos.length })}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto">
-              <Table className="min-w-[760px] table-fixed">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[110px]">
-                      {t('table.headers.date')}
-                    </TableHead>
-                    <TableHead>{t('table.headers.description')}</TableHead>
-                    <TableHead className="w-[130px] text-right">
-                      {t('table.headers.value')}
-                    </TableHead>
-                    <TableHead className="w-[110px]">
-                      {t('table.headers.type')}
-                    </TableHead>
-                    <TableHead className="w-[140px]">
-                      {t('table.headers.reconciliation')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {extratos.map((extrato) => (
-                    <TableRow
-                      key={extrato.id}
-                      className="cursor-pointer"
-                      onClick={() => setExtratoSelecionado(extrato)}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                          event.preventDefault();
-                          setExtratoSelecionado(extrato);
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.foundTransactions', { count: extratos.length })}
+        contentClassName="p-4 sm:p-5"
+      >
+        {extratos.length > 0 ? (
+          <div className="overflow-x-auto">
+            <Table className="min-w-190 table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-27.5">
+                    {t('table.headers.date')}
+                  </TableHead>
+                  <TableHead>{t('table.headers.description')}</TableHead>
+                  <TableHead className="w-32.5 text-right">
+                    {t('table.headers.value')}
+                  </TableHead>
+                  <TableHead className="w-27.5">
+                    {t('table.headers.type')}
+                  </TableHead>
+                  <TableHead className="w-35">
+                    {t('table.headers.reconciliation')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {extratos.map((extrato) => (
+                  <TableRow
+                    key={extrato.id}
+                    className="cursor-pointer"
+                    onClick={() => setExtratoSelecionado(extrato)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setExtratoSelecionado(extrato);
+                      }
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <TableCell>{formatarData(extrato.data)}</TableCell>
+                    <TableCell className="truncate" title={extrato.descricao}>
+                      {extrato.descricao}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <span
+                        className={
+                          extrato.tipo === 'entrada'
+                            ? 'text-green-600'
+                            : 'text-red-600'
                         }
-                      }}
-                      role="button"
-                      tabIndex={0}
-                    >
-                      <TableCell>{formatarData(extrato.data)}</TableCell>
-                      <TableCell className="truncate" title={extrato.descricao}>
-                        {extrato.descricao}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <span
-                          className={
-                            extrato.tipo === 'entrada'
-                              ? 'text-green-600'
-                              : 'text-red-600'
-                          }
-                        >
-                          <Money value={extrato.valor} />
+                      >
+                        <Money value={extrato.valor} />
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      {extrato.tipo === 'entrada' ? (
+                        <span className="flex items-center gap-1 text-green-600">
+                          <ArrowUpRight className="h-4 w-4" />
+                          {t('types.inflow')}
                         </span>
-                      </TableCell>
-                      <TableCell>
-                        {extrato.tipo === 'entrada' ? (
-                          <span className="flex items-center gap-1 text-green-600">
-                            <ArrowUpRight className="h-4 w-4" />
-                            {t('types.inflow')}
-                          </span>
-                        ) : (
-                          <span className="flex items-center gap-1 text-red-600">
-                            <ArrowDownRight className="h-4 w-4" />
-                            {t('types.outflow')}
-                          </span>
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          status={extrato.statusConciliacao}
-                          type="conciliacao"
-                        />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
-      ) : (
-        <EmptyState
-          icon={<Upload className="h-12 w-12" />}
-          title={t('empty.title')}
-          description={t('empty.description')}
-          actionLabel={t('importDialog.action')}
-          onAction={() => setIsImportSheetOpen(true)}
-        />
-      )}
+                      ) : (
+                        <span className="flex items-center gap-1 text-red-600">
+                          <ArrowDownRight className="h-4 w-4" />
+                          {t('types.outflow')}
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        status={extrato.statusConciliacao}
+                        type="conciliacao"
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <div className="p-2 sm:p-4">
+            <EmptyState
+              icon={<Upload className="h-12 w-12" />}
+              title={t('empty.title')}
+              description={t('empty.description')}
+              actionLabel={t('importDialog.action')}
+              onAction={() => setIsImportSheetOpen(true)}
+            />
+          </div>
+        )}
+      </FinancePageSection>
 
       <Dialog
         open={!!extratoSelecionado}

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

@@ -1,14 +1,9 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { FilterBar } from '@/components/ui/filter-bar';
 import {
   Form,
@@ -347,6 +342,25 @@ export default function TransferenciasPage() {
   };
 
   const totalTransferido = transferencias.reduce((acc, t) => acc + t.valor, 0);
+  const summaryCards = [
+    {
+      key: 'transferred',
+      title: t('cards.totalTransferred'),
+      value: <Money value={totalTransferido} />,
+      description: t('cards.transferCount', { count: transferencias.length }),
+      icon: ArrowRight,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-blue-500/10 text-blue-700',
+      accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+    },
+    {
+      key: 'activeAccounts',
+      title: t('cards.activeAccounts'),
+      value: contasBancarias.filter((conta) => conta.ativo).length,
+      description: t('cards.available'),
+      layout: 'compact' as const,
+    },
+  ];
 
   return (
     <Page>
@@ -369,7 +383,7 @@ export default function TransferenciasPage() {
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
         <Select value={accountFilter} onValueChange={setAccountFilter}>
-          <SelectTrigger className="w-full sm:w-[280px]">
+          <SelectTrigger className="w-full sm:w-70">
             <SelectValue placeholder={t('common.select')} />
           </SelectTrigger>
           <SelectContent>
@@ -391,45 +405,13 @@ export default function TransferenciasPage() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalTransferred')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalTransferido} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.transferCount', { count: transferencias.length })}
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.activeAccounts')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {contasBancarias.filter((conta) => conta.ativo).length}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.available')}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={2} />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <FinancePageSection
+        contentClassName="p-0"
+        className="border-none shadow-none"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -464,7 +446,7 @@ export default function TransferenciasPage() {
                       </div>
                     </TableCell>
                     <TableCell className="text-center">
-                      <ArrowRight className="h-4 w-4 text-muted-foreground mx-auto" />
+                      <ArrowRight className="mx-auto h-4 w-4 text-muted-foreground" />
                     </TableCell>
                     <TableCell>
                       <div>
@@ -485,8 +467,8 @@ export default function TransferenciasPage() {
               })}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }