@hed-hog/finance 0.0.300 → 0.0.301

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,14 @@ 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
+        title={t('table.title')}
+        description={t('table.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -464,7 +447,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 +468,8 @@ export default function TransferenciasPage() {
               })}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }

package/hedhog/frontend/app/planning/cash-flow-forecast/page.tsx.ejs

@@ -1,14 +1,10 @@
 '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 { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -73,6 +69,42 @@ export default function FluxoCaixaPage() {
   const totalEntradas = entradasPrevistas.reduce((acc, e) => acc + e.valor, 0);
   const totalSaidas = saidasPrevistas.reduce((acc, s) => acc + s.valor, 0);
   const saldoFinal = kpis.saldoCaixa + totalEntradas - totalSaidas;
+  const summaryCards = [
+    {
+      key: 'currentBalance',
+      title: t('cards.currentBalance'),
+      value: <Money value={kpis.saldoCaixa} />,
+      icon: Wallet,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'expectedInflows',
+      title: t('cards.expectedInflows'),
+      value: <Money value={totalEntradas} />,
+      icon: TrendingUp,
+      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: 'expectedOutflows',
+      title: t('cards.expectedOutflows'),
+      value: <Money value={totalSaidas} />,
+      icon: TrendingDown,
+      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: 'projectedBalance',
+      title: t('cards.projectedBalance'),
+      value: <Money value={saldoFinal} />,
+      layout: 'compact' as const,
+      valueClassName: saldoFinal >= 0 ? 'text-green-600' : 'text-red-600',
+    },
+  ];
 
   return (
     <Page>
@@ -98,7 +130,7 @@ export default function FluxoCaixaPage() {
           onValueChange={setHorizonte}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.horizon')} />
           </SelectTrigger>
           <SelectContent>
@@ -116,7 +148,7 @@ export default function FluxoCaixaPage() {
           }
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.scenario')} />
           </SelectTrigger>
           <SelectContent>
@@ -137,106 +169,50 @@ export default function FluxoCaixaPage() {
         ) : null}
       </div>
 
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.currentBalance')}
-            </CardTitle>
-            <Wallet className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={kpis.saldoCaixa} />
-            </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.expectedInflows')}
-            </CardTitle>
-            <TrendingUp 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.expectedOutflows')}
-            </CardTitle>
-            <TrendingDown 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.projectedBalance')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div
-              className={`text-2xl font-bold ${saldoFinal >= 0 ? 'text-green-600' : 'text-red-600'}`}
-            >
-              <Money value={saldoFinal} />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={4} />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('projection.title')}</CardTitle>
-          <CardDescription>{t('projection.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={350}>
-            <AreaChart data={chartData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="data" tick={{ fontSize: 12 }} />
-              <YAxis
-                tick={{ fontSize: 12 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) => formatarMoeda(value)}
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
-              <Legend />
-              <Area
-                type="monotone"
-                dataKey="saldoPrevisto"
-                name={t('projection.predictedBalance')}
-                stroke="hsl(var(--primary))"
-                fill="hsl(var(--primary))"
-                fillOpacity={0.2}
-              />
-              <Area
-                type="monotone"
-                dataKey="saldoRealizado"
-                name={t('projection.actualBalance')}
-                stroke="hsl(var(--chart-2))"
-                fill="hsl(var(--chart-2))"
-                fillOpacity={0.2}
-                connectNulls
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
+      <FinancePageSection
+        title={t('projection.title')}
+        description={t('projection.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <ResponsiveContainer width="100%" height={350}>
+          <AreaChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis dataKey="data" tick={{ fontSize: 12 }} />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+            />
+            <Tooltip
+              formatter={(value: number) => formatarMoeda(value)}
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+              }}
+            />
+            <Legend />
+            <Area
+              type="monotone"
+              dataKey="saldoPrevisto"
+              name={t('projection.predictedBalance')}
+              stroke="hsl(var(--primary))"
+              fill="hsl(var(--primary))"
+              fillOpacity={0.2}
+            />
+            <Area
+              type="monotone"
+              dataKey="saldoRealizado"
+              name={t('projection.actualBalance')}
+              stroke="hsl(var(--chart-2))"
+              fill="hsl(var(--chart-2))"
+              fillOpacity={0.2}
+              connectNulls
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </FinancePageSection>
 
       <Tabs defaultValue="entradas">
         <TabsList>