@hed-hog/finance 0.0.300 → 0.0.302

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>
@@ -246,82 +222,74 @@ export default function FluxoCaixaPage() {
           <TabsTrigger value="saidas">{t('tabs.expectedOutflows')}</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="entradas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('table.headers.category')}</TableHead>
-                    <TableHead>{t('table.headers.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('table.headers.value')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {entradasPrevistas.map((entrada, i) => (
-                    <TableRow key={i}>
-                      <TableCell className="font-medium">
-                        {entrada.categoria}
-                      </TableCell>
-                      <TableCell>{formatarData(entrada.vencimento)}</TableCell>
-                      <TableCell className="text-right text-green-600 font-semibold">
-                        <Money value={entrada.valor} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                  <TableRow className="bg-muted/50">
-                    <TableCell className="font-bold" colSpan={2}>
-                      {t('table.total')}
-                    </TableCell>
-                    <TableCell className="text-right font-bold text-green-600">
-                      <Money value={totalEntradas} />
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
+        <TabsContent value="entradas">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.category')}</TableHead>
+                <TableHead>{t('table.headers.dueDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {entradasPrevistas.map((entrada, i) => (
+                <TableRow key={i}>
+                  <TableCell className="font-medium">
+                    {entrada.categoria}
+                  </TableCell>
+                  <TableCell>{formatarData(entrada.vencimento)}</TableCell>
+                  <TableCell className="text-right text-green-600 font-semibold">
+                    <Money value={entrada.valor} />
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow className="bg-muted/50">
+                <TableCell className="font-bold" colSpan={2}>
+                  {t('table.total')}
+                </TableCell>
+                <TableCell className="text-right font-bold text-green-600">
+                  <Money value={totalEntradas} />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </TabsContent>
 
-        <TabsContent value="saidas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('table.headers.category')}</TableHead>
-                    <TableHead>{t('table.headers.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('table.headers.value')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {saidasPrevistas.map((saida, i) => (
-                    <TableRow key={i}>
-                      <TableCell className="font-medium">
-                        {saida.categoria}
-                      </TableCell>
-                      <TableCell>{formatarData(saida.vencimento)}</TableCell>
-                      <TableCell className="text-right text-red-600 font-semibold">
-                        <Money value={saida.valor} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                  <TableRow className="bg-muted/50">
-                    <TableCell className="font-bold" colSpan={2}>
-                      {t('table.total')}
-                    </TableCell>
-                    <TableCell className="text-right font-bold text-red-600">
-                      <Money value={totalSaidas} />
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
+        <TabsContent value="saidas">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.category')}</TableHead>
+                <TableHead>{t('table.headers.dueDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {saidasPrevistas.map((saida, i) => (
+                <TableRow key={i}>
+                  <TableCell className="font-medium">
+                    {saida.categoria}
+                  </TableCell>
+                  <TableCell>{formatarData(saida.vencimento)}</TableCell>
+                  <TableCell className="text-right text-red-600 font-semibold">
+                    <Money value={saida.valor} />
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow className="bg-muted/50">
+                <TableCell className="font-bold" colSpan={2}>
+                  {t('table.total')}
+                </TableCell>
+                <TableCell className="text-right font-bold text-red-600">
+                  <Money value={totalSaidas} />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </TabsContent>
       </Tabs>
     </Page>

package/hedhog/frontend/app/planning/receivables-calendar/page.tsx.ejs

@@ -1,5 +1,6 @@
 '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 {
@@ -9,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Table,
@@ -48,6 +50,48 @@ export default function RecebiveisPage() {
   const totalLiquido = recebiveis.reduce((acc, r) => acc + r.liquido, 0);
   const taxasPercentual =
     totalBruto > 0 ? ((totalTaxas / totalBruto) * 100).toFixed(2) : '0.00';
+  const summaryCards = [
+    {
+      key: 'totalGross',
+      title: t('cards.totalGross'),
+      value: <Money value={totalBruto} />,
+      description: t('cards.receivablesCount', { count: recebiveis.length }),
+      icon: CalendarDays,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'fees',
+      title: t('cards.fees'),
+      value: (
+        <span>
+          - <Money value={totalTaxas} />
+        </span>
+      ),
+      description: t('cards.percentOfGross', {
+        percent: taxasPercentual,
+      }),
+      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: 'totalNet',
+      title: t('cards.totalNet'),
+      value: <Money value={totalLiquido} />,
+      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: 'confirmed',
+      title: t('cards.confirmed'),
+      value: recebiveis.filter((r) => r.status === 'confirmado').length,
+      description: t('cards.ofTotal', { total: recebiveis.length }),
+      layout: 'compact' as const,
+    },
+  ];
 
   return (
     <Page>
@@ -61,68 +105,7 @@ export default function RecebiveisPage() {
         ]}
       />
 
-      <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.totalGross')}
-            </CardTitle>
-            <CalendarDays className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalBruto} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.receivablesCount', { count: recebiveis.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.fees')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              - <Money value={totalTaxas} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.percentOfGross', {
-                percent: taxasPercentual,
-              })}
-            </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.totalNet')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              <Money value={totalLiquido} />
-            </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.confirmed')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {recebiveis.filter((r) => r.status === 'confirmado').length}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.ofTotal', { total: recebiveis.length })}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={4} />
 
       <div className="grid gap-6 lg:grid-cols-3">
         {adquirentes.map((adquirente) => {
@@ -164,12 +147,11 @@ export default function RecebiveisPage() {
         })}
       </div>
 
-      <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>
@@ -220,8 +202,8 @@ export default function RecebiveisPage() {
               })}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }