@hed-hog/finance 0.0.300 → 0.0.302

package/hedhog/frontend/app/planning/scenarios/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 { Button } from '@/components/ui/button';
@@ -84,109 +85,114 @@ export default function CenariosPage() {
         ]}
       />
 
-      <div className="grid gap-4 md:grid-cols-3">
-        {cenarios.map((cenario) => {
-          const isAtivo = cenario.id === cenarioAtivo;
-          const Icon =
-            cenario.nome === 'Otimista'
-              ? TrendingUp
-              : cenario.nome === 'Pessimista'
-                ? TrendingDown
-                : Target;
+      <FinancePageSection
+        contentClassName="p-0"
+        className="border-none shadow-none"
+      >
+        <div className="grid gap-4 md:grid-cols-3">
+          {cenarios.map((cenario) => {
+            const isAtivo = cenario.id === cenarioAtivo;
+            const Icon =
+              cenario.nome === 'Otimista'
+                ? TrendingUp
+                : cenario.nome === 'Pessimista'
+                  ? TrendingDown
+                  : Target;
 
-          return (
-            <Card
-              key={cenario.id}
-              className={`cursor-pointer transition-all ${
-                isAtivo
-                  ? 'border-primary ring-2 ring-primary/20'
-                  : 'hover:border-muted-foreground/50'
-              }`}
-              onClick={() => {
-                setCenarioAtivo(cenario.id);
-                setPremissas({
-                  atrasoMedio: cenario.atrasoMedio,
-                  taxaInadimplencia: cenario.taxaInadimplencia,
-                  crescimentoReceita: cenario.crescimentoReceita,
-                });
-              }}
-            >
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div
-                      className={`flex h-10 w-10 items-center justify-center rounded-lg ${
-                        cenario.nome === 'Otimista'
-                          ? 'bg-green-100'
-                          : cenario.nome === 'Pessimista'
-                            ? 'bg-red-100'
-                            : 'bg-blue-100'
-                      }`}
-                    >
-                      <Icon
-                        className={`h-5 w-5 ${
+            return (
+              <Card
+                key={cenario.id}
+                className={`cursor-pointer transition-all ${
+                  isAtivo
+                    ? 'border-primary ring-2 ring-primary/20'
+                    : 'hover:border-muted-foreground/50'
+                }`}
+                onClick={() => {
+                  setCenarioAtivo(cenario.id);
+                  setPremissas({
+                    atrasoMedio: cenario.atrasoMedio,
+                    taxaInadimplencia: cenario.taxaInadimplencia,
+                    crescimentoReceita: cenario.crescimentoReceita,
+                  });
+                }}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`flex h-10 w-10 items-center justify-center rounded-lg ${
                           cenario.nome === 'Otimista'
-                            ? 'text-green-600'
+                            ? 'bg-green-100'
                             : cenario.nome === 'Pessimista'
-                              ? 'text-red-600'
-                              : 'text-blue-600'
+                              ? 'bg-red-100'
+                              : 'bg-blue-100'
                         }`}
-                      />
+                      >
+                        <Icon
+                          className={`h-5 w-5 ${
+                            cenario.nome === 'Otimista'
+                              ? 'text-green-600'
+                              : cenario.nome === 'Pessimista'
+                                ? 'text-red-600'
+                                : 'text-blue-600'
+                          }`}
+                        />
+                      </div>
+                      <div>
+                        <CardTitle className="text-base">
+                          {cenario.nome}
+                        </CardTitle>
+                        <CardDescription>{cenario.descricao}</CardDescription>
+                      </div>
                     </div>
+                    {isAtivo && (
+                      <Badge className="bg-primary text-primary-foreground">
+                        <Check className="mr-1 h-3 w-3" />
+                        {t('cards.active')}
+                      </Badge>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-3 gap-4 text-center">
                     <div>
-                      <CardTitle className="text-base">
-                        {cenario.nome}
-                      </CardTitle>
-                      <CardDescription>{cenario.descricao}</CardDescription>
+                      <p className="text-xs text-muted-foreground">
+                        {t('cards.delay')}
+                      </p>
+                      <p className="font-semibold">
+                        {t('cards.days', { value: cenario.atrasoMedio })}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('cards.defaultRate')}
+                      </p>
+                      <p className="font-semibold">
+                        {cenario.taxaInadimplencia}%
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('cards.growth')}
+                      </p>
+                      <p
+                        className={`font-semibold ${
+                          cenario.crescimentoReceita >= 0
+                            ? 'text-green-600'
+                            : 'text-red-600'
+                        }`}
+                      >
+                        {cenario.crescimentoReceita > 0 && '+'}
+                        {cenario.crescimentoReceita}%
+                      </p>
                     </div>
                   </div>
-                  {isAtivo && (
-                    <Badge className="bg-primary text-primary-foreground">
-                      <Check className="mr-1 h-3 w-3" />
-                      {t('cards.active')}
-                    </Badge>
-                  )}
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-3 gap-4 text-center">
-                  <div>
-                    <p className="text-xs text-muted-foreground">
-                      {t('cards.delay')}
-                    </p>
-                    <p className="font-semibold">
-                      {t('cards.days', { value: cenario.atrasoMedio })}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground">
-                      {t('cards.defaultRate')}
-                    </p>
-                    <p className="font-semibold">
-                      {cenario.taxaInadimplencia}%
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground">
-                      {t('cards.growth')}
-                    </p>
-                    <p
-                      className={`font-semibold ${
-                        cenario.crescimentoReceita >= 0
-                          ? 'text-green-600'
-                          : 'text-red-600'
-                      }`}
-                    >
-                      {cenario.crescimentoReceita > 0 && '+'}
-                      {cenario.crescimentoReceita}%
-                    </p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </FinancePageSection>
 
       <div className="grid gap-6 lg:grid-cols-2">
         <Card>

package/hedhog/frontend/app/reports/actual-vs-forecast/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,
@@ -104,6 +99,47 @@ export default function ActualVsForecastPage() {
       acuracia,
     };
   }, [comparisonData]);
+  const summaryCards = [
+    {
+      key: 'forecast',
+      title: t('cards.totalForecast'),
+      value: <Money value={totals.previsto} />,
+      icon: Target,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'actual',
+      title: t('cards.totalActual'),
+      value: <Money value={totals.realizado} />,
+      icon: TrendingUp,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-blue-500/10 text-blue-700',
+      accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+    },
+    {
+      key: 'deviation',
+      title: t('cards.totalDeviation'),
+      value: <Money value={totals.desvio} showSign />,
+      icon: totals.desvio >= 0 ? TrendingUp : TrendingDown,
+      layout: 'compact' as const,
+      valueClassName: totals.desvio >= 0 ? 'text-green-600' : 'text-red-600',
+      iconContainerClassName:
+        totals.desvio >= 0
+          ? 'bg-green-500/10 text-green-700'
+          : 'bg-red-500/10 text-red-700',
+      accentClassName:
+        totals.desvio >= 0
+          ? 'from-green-500/20 via-emerald-500/10 to-transparent'
+          : 'from-red-500/20 via-rose-500/10 to-transparent',
+    },
+    {
+      key: 'accuracy',
+      title: t('cards.accuracy'),
+      value: `${totals.acuracia.toFixed(1)}%`,
+      icon: Target,
+      layout: 'compact' as const,
+    },
+  ];
 
   return (
     <Page>
@@ -129,7 +165,7 @@ export default function ActualVsForecastPage() {
           onValueChange={setHorizonte}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.horizon')} />
           </SelectTrigger>
           <SelectContent>
@@ -145,7 +181,7 @@ export default function ActualVsForecastPage() {
           onValueChange={(value) => setCenario(value as Scenario)}
           disabled={isFetching}
         >
-          <SelectTrigger className="w-[180px]">
+          <SelectTrigger className="w-45">
             <SelectValue placeholder={t('filters.scenario')} />
           </SelectTrigger>
           <SelectContent>
@@ -166,122 +202,61 @@ export default function ActualVsForecastPage() {
         ) : 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.totalForecast')}
-            </CardTitle>
-            <Target className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totals.previsto} />
-            </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.totalActual')}
-            </CardTitle>
-            <TrendingUp className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totals.realizado} />
-            </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.totalDeviation')}
-            </CardTitle>
-            {totals.desvio >= 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.desvio >= 0 ? 'text-green-600' : 'text-red-600'}`}
-            >
-              <Money value={totals.desvio} showSign />
-            </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.accuracy')}
-            </CardTitle>
-            <Target className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {totals.acuracia.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={340}>
-            <LineChart data={comparisonData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="dataLabel" 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',
-                }}
-              />
-              <Legend />
-              <Line
-                type="monotone"
-                dataKey="previsto"
-                name={t('chart.forecastLabel')}
-                stroke="hsl(var(--primary))"
-                strokeWidth={2}
-                dot={false}
-              />
-              <Line
-                type="monotone"
-                dataKey="realizado"
-                name={t('chart.actualLabel')}
-                stroke="hsl(var(--chart-2))"
-                strokeWidth={2}
-                dot={false}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
+      <FinancePageSection
+        title={t('chart.title')}
+        description={t('chart.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <ResponsiveContainer width="100%" height={340}>
+          <LineChart data={comparisonData}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis dataKey="dataLabel" 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',
+              }}
+            />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="previsto"
+              name={t('chart.forecastLabel')}
+              stroke="hsl(var(--primary))"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="realizado"
+              name={t('chart.actualLabel')}
+              stroke="hsl(var(--chart-2))"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </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>
@@ -354,8 +329,8 @@ export default function ActualVsForecastPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }