@hed-hog/finance 0.0.274 → 0.0.276

package/hedhog/frontend/app/planning/cash-flow-forecast/page.tsx.ejs

@@ -1,329 +1,329 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Money } from '@/components/ui/money';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import {
-  Download,
-  Loader2,
-  TrendingDown,
-  TrendingUp,
-  Wallet,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  Legend,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { formatarData, formatarMoeda } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-export default function FluxoCaixaPage() {
-  const t = useTranslations('finance.CashFlowForecastPage');
-
-  const [horizonte, setHorizonte] = useState<string | null>(null);
-  const [cenario, setCenario] = useState<
-    'base' | 'pessimista' | 'otimista' | null
-  >(null);
-
-  const { data, isFetching } = useFinanceData({
-    horizonteDias: horizonte ? Number(horizonte) : undefined,
-    cenario: cenario || undefined,
-  });
-
-  const { fluxoCaixaPrevisto, kpis, entradasPrevistas, saidasPrevistas } = data;
-  const selectedHorizon = horizonte || String(data.defaultHorizonDays || 90);
-  const selectedScenario = cenario || data.defaultScenario || 'base';
-
-  const chartData = fluxoCaixaPrevisto.map((item) => ({
-    ...item,
-    data: formatarData(item.data),
-  }));
-
-  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;
-
-  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') },
-        ]}
-        actions={
-          <Button variant="outline">
-            <Download className="mr-2 h-4 w-4" />
-            {t('actions.export')}
-          </Button>
-        }
-      />
-
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <Select
-          value={selectedHorizon}
-          onValueChange={setHorizonte}
-          disabled={isFetching}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder={t('filters.horizon')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="30">{t('filters.days30')}</SelectItem>
-            <SelectItem value="60">{t('filters.days60')}</SelectItem>
-            <SelectItem value="90">{t('filters.days90')}</SelectItem>
-            <SelectItem value="180">{t('filters.days180')}</SelectItem>
-            <SelectItem value="365">{t('filters.days365')}</SelectItem>
-          </SelectContent>
-        </Select>
-        <Select
-          value={selectedScenario}
-          onValueChange={(value) =>
-            setCenario(value as 'base' | 'pessimista' | 'otimista')
-          }
-          disabled={isFetching}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder={t('filters.scenario')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="base">{t('scenarios.base')}</SelectItem>
-            <SelectItem value="pessimista">
-              {t('scenarios.pessimistic')}
-            </SelectItem>
-            <SelectItem value="otimista">
-              {t('scenarios.optimistic')}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-        {isFetching ? (
-          <div className="text-muted-foreground flex items-center gap-2 text-sm">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Atualizando dados...
-          </div>
-        ) : 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>
-
-      <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>
-
-      <Tabs defaultValue="entradas">
-        <TabsList>
-          <TabsTrigger value="entradas">
-            {t('tabs.expectedInflows')}
-          </TabsTrigger>
-          <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>
-
-        <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>
-      </Tabs>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Download,
+  Loader2,
+  TrendingDown,
+  TrendingUp,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatarData, formatarMoeda } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+export default function FluxoCaixaPage() {
+  const t = useTranslations('finance.CashFlowForecastPage');
+
+  const [horizonte, setHorizonte] = useState<string | null>(null);
+  const [cenario, setCenario] = useState<
+    'base' | 'pessimista' | 'otimista' | null
+  >(null);
+
+  const { data, isFetching } = useFinanceData({
+    horizonteDias: horizonte ? Number(horizonte) : undefined,
+    cenario: cenario || undefined,
+  });
+
+  const { fluxoCaixaPrevisto, kpis, entradasPrevistas, saidasPrevistas } = data;
+  const selectedHorizon = horizonte || String(data.defaultHorizonDays || 90);
+  const selectedScenario = cenario || data.defaultScenario || 'base';
+
+  const chartData = fluxoCaixaPrevisto.map((item) => ({
+    ...item,
+    data: formatarData(item.data),
+  }));
+
+  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;
+
+  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') },
+        ]}
+        actions={
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            {t('actions.export')}
+          </Button>
+        }
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Select
+          value={selectedHorizon}
+          onValueChange={setHorizonte}
+          disabled={isFetching}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder={t('filters.horizon')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="30">{t('filters.days30')}</SelectItem>
+            <SelectItem value="60">{t('filters.days60')}</SelectItem>
+            <SelectItem value="90">{t('filters.days90')}</SelectItem>
+            <SelectItem value="180">{t('filters.days180')}</SelectItem>
+            <SelectItem value="365">{t('filters.days365')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select
+          value={selectedScenario}
+          onValueChange={(value) =>
+            setCenario(value as 'base' | 'pessimista' | 'otimista')
+          }
+          disabled={isFetching}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder={t('filters.scenario')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="base">{t('scenarios.base')}</SelectItem>
+            <SelectItem value="pessimista">
+              {t('scenarios.pessimistic')}
+            </SelectItem>
+            <SelectItem value="otimista">
+              {t('scenarios.optimistic')}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        {isFetching ? (
+          <div className="text-muted-foreground flex items-center gap-2 text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Atualizando dados...
+          </div>
+        ) : 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>
+
+      <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>
+
+      <Tabs defaultValue="entradas">
+        <TabsList>
+          <TabsTrigger value="entradas">
+            {t('tabs.expectedInflows')}
+          </TabsTrigger>
+          <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>
+
+        <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>
+      </Tabs>
+    </Page>
+  );
+}