@hed-hog/finance 0.0.223 → 0.0.225

package/hedhog/frontend/app/planning/scenarios/page.tsx.ejs

@@ -0,0 +1,338 @@
+'use client';
+
+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 { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import { Slider } from '@/components/ui/slider';
+import {
+  Check,
+  Lightbulb,
+  Target,
+  TrendingDown,
+  TrendingUp,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { formatarMoeda } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+export default function CenariosPage() {
+  const t = useTranslations('finance.ScenariosPage');
+  const { data } = useFinanceData();
+  const { cenarios, kpis } = data;
+
+  const [cenarioAtivo, setCenarioAtivo] = useState('1');
+  const [premissas, setPremissas] = useState({
+    atrasoMedio: 5,
+    taxaInadimplencia: 3,
+    crescimentoReceita: 5,
+  });
+
+  const cenarioSelecionado = cenarios.find((c) => c.id === cenarioAtivo);
+
+  const impactoSaldo =
+    kpis.saldoCaixa * (1 + premissas.crescimentoReceita / 100);
+  const impactoInadimplencia =
+    kpis.inadimplencia * (1 + premissas.taxaInadimplencia / 10);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <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 ${
+                          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>
+                    <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>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Lightbulb className="h-4 w-4" />
+              {t('assumptions.title')}
+            </CardTitle>
+            <CardDescription>
+              {t('assumptions.description', {
+                scenario: cenarioSelecionado?.nome ?? '',
+              })}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>{t('assumptions.averageDelay')}</Label>
+                  <span className="text-sm font-medium">
+                    {t('cards.days', { value: premissas.atrasoMedio })}
+                  </span>
+                </div>
+                <Slider
+                  value={[premissas.atrasoMedio]}
+                  onValueChange={([value]) =>
+                    setPremissas({
+                      ...premissas,
+                      atrasoMedio: value ?? premissas.atrasoMedio,
+                    })
+                  }
+                  max={30}
+                  step={1}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>{t('assumptions.defaultRate')}</Label>
+                  <span className="text-sm font-medium">
+                    {premissas.taxaInadimplencia}%
+                  </span>
+                </div>
+                <Slider
+                  value={[premissas.taxaInadimplencia]}
+                  onValueChange={([value]) =>
+                    setPremissas({
+                      ...premissas,
+                      taxaInadimplencia: value ?? premissas.taxaInadimplencia,
+                    })
+                  }
+                  max={15}
+                  step={0.5}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>{t('assumptions.revenueGrowth')}</Label>
+                  <span
+                    className={`text-sm font-medium ${
+                      premissas.crescimentoReceita >= 0
+                        ? 'text-green-600'
+                        : 'text-red-600'
+                    }`}
+                  >
+                    {premissas.crescimentoReceita > 0 && '+'}
+                    {premissas.crescimentoReceita}%
+                  </span>
+                </div>
+                <Slider
+                  value={[premissas.crescimentoReceita + 10]} // Offset para permitir valores negativos
+                  onValueChange={([value]) =>
+                    setPremissas({
+                      ...premissas,
+                      crescimentoReceita:
+                        (value ?? premissas.crescimentoReceita + 10) - 10,
+                    })
+                  }
+                  max={25}
+                  step={1}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  if (cenarioSelecionado) {
+                    setPremissas({
+                      atrasoMedio: cenarioSelecionado.atrasoMedio,
+                      taxaInadimplencia: cenarioSelecionado.taxaInadimplencia,
+                      crescimentoReceita: cenarioSelecionado.crescimentoReceita,
+                    });
+                  }
+                }}
+              >
+                {t('assumptions.restore')}
+              </Button>
+              <Button>{t('assumptions.apply')}</Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('impact.title')}</CardTitle>
+            <CardDescription>{t('impact.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">
+                  {t('impact.projectedBalance30d')}
+                </p>
+                <p className="text-3xl font-bold">
+                  <Money value={impactoSaldo} />
+                </p>
+                <p
+                  className={`text-sm ${
+                    impactoSaldo >= kpis.saldoCaixa
+                      ? 'text-green-600'
+                      : 'text-red-600'
+                  }`}
+                >
+                  {impactoSaldo >= kpis.saldoCaixa ? '+' : ''}
+                  {t('impact.vsCurrent', {
+                    value: formatarMoeda(impactoSaldo - kpis.saldoCaixa),
+                  })}
+                </p>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">
+                  {t('impact.projectedDefault')}
+                </p>
+                <p className="text-3xl font-bold text-red-600">
+                  <Money value={impactoInadimplencia} />
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t('impact.vsCurrent', {
+                    value: formatarMoeda(
+                      impactoInadimplencia - kpis.inadimplencia
+                    ),
+                  })}
+                </p>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">
+                  {t('impact.cashFlowForecast')}
+                </p>
+                <p
+                  className={`text-3xl font-bold ${
+                    premissas.crescimentoReceita >= 0
+                      ? 'text-green-600'
+                      : 'text-red-600'
+                  }`}
+                >
+                  {premissas.crescimentoReceita >= 0
+                    ? t('impact.positive')
+                    : t('impact.negative')}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t('impact.withGrowth', {
+                    value: premissas.crescimentoReceita,
+                  })}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}