@hed-hog/finance 0.0.274 → 0.0.276

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

@@ -1,408 +1,408 @@
-'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 { useApp } from '@hed-hog/next-app-provider';
-import {
-  Check,
-  Lightbulb,
-  Loader2,
-  Target,
-  TrendingDown,
-  TrendingUp,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, 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 { request, showToastHandler } = useApp();
-  const { data, isFetching, refetch } = useFinanceData();
-  const { cenarios, kpis } = data;
-
-  const [cenarioAtivo, setCenarioAtivo] = useState('base');
-  const [isSaving, setIsSaving] = useState(false);
-  const [premissas, setPremissas] = useState({
-    atrasoMedio: 5,
-    taxaInadimplencia: 3,
-    crescimentoReceita: 5,
-  });
-
-  useEffect(() => {
-    if (!cenarios?.length) {
-      return;
-    }
-
-    const selected = cenarios.find((c) => c.id === cenarioAtivo);
-    if (selected) {
-      return;
-    }
-
-    const defaultScenario = cenarios.find((c) => c.padrao) || cenarios[0];
-
-    if (!defaultScenario) {
-      return;
-    }
-
-    setCenarioAtivo(defaultScenario.id);
-    setPremissas({
-      atrasoMedio: defaultScenario.atrasoMedio,
-      taxaInadimplencia: defaultScenario.taxaInadimplencia,
-      crescimentoReceita: defaultScenario.crescimentoReceita,
-    });
-  }, [cenarios, cenarioAtivo]);
-
-  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]}
-                  disabled={isSaving || isFetching}
-                  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]}
-                  disabled={isSaving || isFetching}
-                  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
-                  disabled={isSaving || isFetching}
-                  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"
-                disabled={isSaving || isFetching || !cenarioSelecionado}
-                onClick={() => {
-                  if (cenarioSelecionado) {
-                    setPremissas({
-                      atrasoMedio: cenarioSelecionado.atrasoMedio,
-                      taxaInadimplencia: cenarioSelecionado.taxaInadimplencia,
-                      crescimentoReceita: cenarioSelecionado.crescimentoReceita,
-                    });
-                  }
-                }}
-              >
-                {t('assumptions.restore')}
-              </Button>
-              <Button
-                disabled={isSaving || isFetching || !cenarioSelecionado}
-                onClick={async () => {
-                  if (!cenarioSelecionado || isSaving) {
-                    return;
-                  }
-
-                  try {
-                    setIsSaving(true);
-
-                    await request({
-                      url: `/finance/scenarios/${cenarioSelecionado.id}`,
-                      method: 'PATCH',
-                      data: {
-                        atrasoMedio: premissas.atrasoMedio,
-                        taxaInadimplencia: premissas.taxaInadimplencia,
-                        crescimentoReceita: premissas.crescimentoReceita,
-                        setAsDefault: true,
-                      },
-                    });
-
-                    await refetch();
-                    showToastHandler?.('success', 'Cenário salvo com sucesso');
-                  } catch {
-                    showToastHandler?.('error', 'Erro ao salvar cenário');
-                  } finally {
-                    setIsSaving(false);
-                  }
-                }}
-              >
-                {isSaving ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    {t('assumptions.apply')}
-                  </>
-                ) : (
-                  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>
-  );
-}
+'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 { useApp } from '@hed-hog/next-app-provider';
+import {
+  Check,
+  Lightbulb,
+  Loader2,
+  Target,
+  TrendingDown,
+  TrendingUp,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, 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 { request, showToastHandler } = useApp();
+  const { data, isFetching, refetch } = useFinanceData();
+  const { cenarios, kpis } = data;
+
+  const [cenarioAtivo, setCenarioAtivo] = useState('base');
+  const [isSaving, setIsSaving] = useState(false);
+  const [premissas, setPremissas] = useState({
+    atrasoMedio: 5,
+    taxaInadimplencia: 3,
+    crescimentoReceita: 5,
+  });
+
+  useEffect(() => {
+    if (!cenarios?.length) {
+      return;
+    }
+
+    const selected = cenarios.find((c) => c.id === cenarioAtivo);
+    if (selected) {
+      return;
+    }
+
+    const defaultScenario = cenarios.find((c) => c.padrao) || cenarios[0];
+
+    if (!defaultScenario) {
+      return;
+    }
+
+    setCenarioAtivo(defaultScenario.id);
+    setPremissas({
+      atrasoMedio: defaultScenario.atrasoMedio,
+      taxaInadimplencia: defaultScenario.taxaInadimplencia,
+      crescimentoReceita: defaultScenario.crescimentoReceita,
+    });
+  }, [cenarios, cenarioAtivo]);
+
+  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]}
+                  disabled={isSaving || isFetching}
+                  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]}
+                  disabled={isSaving || isFetching}
+                  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
+                  disabled={isSaving || isFetching}
+                  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"
+                disabled={isSaving || isFetching || !cenarioSelecionado}
+                onClick={() => {
+                  if (cenarioSelecionado) {
+                    setPremissas({
+                      atrasoMedio: cenarioSelecionado.atrasoMedio,
+                      taxaInadimplencia: cenarioSelecionado.taxaInadimplencia,
+                      crescimentoReceita: cenarioSelecionado.crescimentoReceita,
+                    });
+                  }
+                }}
+              >
+                {t('assumptions.restore')}
+              </Button>
+              <Button
+                disabled={isSaving || isFetching || !cenarioSelecionado}
+                onClick={async () => {
+                  if (!cenarioSelecionado || isSaving) {
+                    return;
+                  }
+
+                  try {
+                    setIsSaving(true);
+
+                    await request({
+                      url: `/finance/scenarios/${cenarioSelecionado.id}`,
+                      method: 'PATCH',
+                      data: {
+                        atrasoMedio: premissas.atrasoMedio,
+                        taxaInadimplencia: premissas.taxaInadimplencia,
+                        crescimentoReceita: premissas.crescimentoReceita,
+                        setAsDefault: true,
+                      },
+                    });
+
+                    await refetch();
+                    showToastHandler?.('success', 'Cenário salvo com sucesso');
+                  } catch {
+                    showToastHandler?.('error', 'Erro ao salvar cenário');
+                  } finally {
+                    setIsSaving(false);
+                  }
+                }}
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    {t('assumptions.apply')}
+                  </>
+                ) : (
+                  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>
+  );
+}