@hed-hog/finance 0.0.300 → 0.0.301

package/hedhog/frontend/app/reports/aging-default/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 { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -115,6 +110,36 @@ export default function AgingDefaultReportPage() {
       value: totals.bucket90plus,
     },
   ];
+  const summaryCards = [
+    {
+      key: 'totalDefault',
+      title: t('cards.totalDefault'),
+      value: <Money value={totals.total} />,
+      icon: AlertTriangle,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-red-500/10 text-red-700',
+      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
+    },
+    {
+      key: 'lateClients',
+      title: t('cards.lateClients'),
+      value: totals.clients,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'over90Days',
+      title: t('cards.over90Days'),
+      value: <Money value={totals.bucket90plus} />,
+      layout: 'compact' as const,
+      valueClassName: 'text-destructive',
+    },
+    {
+      key: 'defaultRate',
+      title: t('cards.defaultRate'),
+      value: `${toPercent(Number(data.kpis?.inadimplencia || 0)).toFixed(1)}%`,
+      layout: 'compact' as const,
+    },
+  ];
 
   return (
     <Page>
@@ -134,7 +159,7 @@ export default function AgingDefaultReportPage() {
           onValueChange={setHorizonte}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.horizon')} />
           </SelectTrigger>
           <SelectContent>
@@ -150,7 +175,7 @@ export default function AgingDefaultReportPage() {
           onValueChange={(value) => setCenario(value as Scenario)}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.scenario')} />
           </SelectTrigger>
           <SelectContent>
@@ -171,102 +196,49 @@ export default function AgingDefaultReportPage() {
         ) : 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.totalDefault')}
-            </CardTitle>
-            <AlertTriangle className="h-4 w-4 text-destructive" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totals.total} />
-            </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.lateClients')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totals.clients}</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.over90Days')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-destructive">
-              <Money value={totals.bucket90plus} />
-            </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.defaultRate')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {toPercent(Number(data.kpis?.inadimplencia || 0)).toFixed(1)}%
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={4} />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('chart.title')}</CardTitle>
-          <CardDescription>{t('chart.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={280}>
-            <BarChart data={chartData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
-              <YAxis
-                tick={{ fontSize: 12 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) =>
-                  new Intl.NumberFormat('pt-BR', {
-                    style: 'currency',
-                    currency: 'BRL',
-                  }).format(value)
-                }
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
-              <Bar
-                dataKey="value"
-                radius={[4, 4, 0, 0]}
-                fill="hsl(var(--primary))"
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
+      <FinancePageSection
+        title={t('chart.title')}
+        description={t('chart.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <ResponsiveContainer width="100%" height={280}>
+          <BarChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+            />
+            <Tooltip
+              formatter={(value: number) =>
+                new Intl.NumberFormat('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                }).format(value)
+              }
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+              }}
+            />
+            <Bar
+              dataKey="value"
+              radius={[4, 4, 0, 0]}
+              fill="hsl(var(--primary))"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </FinancePageSection>
 
-      <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>
@@ -361,8 +333,8 @@ export default function AgingDefaultReportPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }

package/hedhog/frontend/app/reports/cash-position/page.tsx.ejs

@@ -1,15 +1,10 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 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 { Money } from '@/components/ui/money';
 import {
   Select,
@@ -167,6 +162,51 @@ export default function CashPositionReportPage() {
         .slice(0, 12),
     [filteredExtratos]
   );
+  const summaryCards = [
+    {
+      key: 'currentBalance',
+      title: t('cards.currentBalance'),
+      value: <Money value={totals.saldoAtual} />,
+      icon: Wallet,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'reconciledBalance',
+      title: t('cards.reconciledBalance'),
+      value: <Money value={totals.saldoConciliado} />,
+      icon: Wallet,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'inflows',
+      title: t('cards.inflows'),
+      value: <Money value={totals.entradas} />,
+      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: 'outflows',
+      title: t('cards.outflows'),
+      value: <Money value={totals.saidas} />,
+      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: 'netMovement',
+      title: t('cards.netMovement'),
+      value: <Money value={totals.movimentacaoLiquida} showSign />,
+      icon: totals.movimentacaoLiquida >= 0 ? TrendingUp : TrendingDown,
+      layout: 'compact' as const,
+      valueClassName:
+        totals.movimentacaoLiquida >= 0 ? 'text-green-600' : 'text-red-600',
+    },
+  ];
 
   return (
     <Page>
@@ -192,7 +232,7 @@ export default function CashPositionReportPage() {
           onValueChange={setHorizonte}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.horizon')} />
           </SelectTrigger>
           <SelectContent>
@@ -209,7 +249,7 @@ export default function CashPositionReportPage() {
           onValueChange={(value) => setCenario(value as Scenario)}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.scenario')} />
           </SelectTrigger>
           <SelectContent>
@@ -249,130 +289,55 @@ export default function CashPositionReportPage() {
         ) : null}
       </div>
 
-      <div className="grid gap-4 md:grid-cols-5">
-        <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={totals.saldoAtual} />
-            </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.reconciledBalance')}
-            </CardTitle>
-            <Wallet className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totals.saldoConciliado} />
-            </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.inflows')}
-            </CardTitle>
-            <TrendingUp className="h-4 w-4 text-green-600" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              <Money value={totals.entradas} />
-            </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>
-            <TrendingDown className="h-4 w-4 text-red-600" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              <Money value={totals.saidas} />
-            </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.netMovement')}
-            </CardTitle>
-            {totals.movimentacaoLiquida >= 0 ? (
-              <TrendingUp className="h-4 w-4 text-green-600" />
-            ) : (
-              <TrendingDown className="h-4 w-4 text-red-600" />
-            )}
-          </CardHeader>
-          <CardContent>
-            <div
-              className={`text-2xl font-bold ${totals.movimentacaoLiquida >= 0 ? 'text-green-600' : 'text-red-600'}`}
-            >
-              <Money value={totals.movimentacaoLiquida} showSign />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid
+        items={summaryCards}
+        className="grid gap-4 md:grid-cols-2 xl:grid-cols-5"
+      />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('chart.title')}</CardTitle>
-          <CardDescription>{t('chart.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={320}>
-            <AreaChart data={chartData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="label" tick={{ fontSize: 12 }} />
-              <YAxis
-                tick={{ fontSize: 12 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) =>
-                  new Intl.NumberFormat('pt-BR', {
-                    style: 'currency',
-                    currency: 'BRL',
-                  }).format(value)
-                }
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
-              <Area
-                type="monotone"
-                dataKey="saldoAcumulado"
-                name={t('chart.balanceLabel')}
-                stroke="hsl(var(--primary))"
-                fill="hsl(var(--primary))"
-                fillOpacity={0.2}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <FinancePageSection
+        title={t('chart.title')}
+        description={t('chart.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <ResponsiveContainer width="100%" height={320}>
+          <AreaChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis dataKey="label" tick={{ fontSize: 12 }} />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+            />
+            <Tooltip
+              formatter={(value: number) =>
+                new Intl.NumberFormat('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                }).format(value)
+              }
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="saldoAcumulado"
+              name={t('chart.balanceLabel')}
+              stroke="hsl(var(--primary))"
+              fill="hsl(var(--primary))"
+              fillOpacity={0.2}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </FinancePageSection>
+
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -425,8 +390,8 @@ export default function CashPositionReportPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }