@hed-hog/finance 0.0.261 → 0.0.266

package/hedhog/frontend/app/reports/actual-vs-forecast/page.tsx.ejs

@@ -0,0 +1,361 @@
+'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 { 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 {
+  Download,
+  Loader2,
+  Target,
+  TrendingDown,
+  TrendingUp,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+type Scenario = 'base' | 'pessimista' | 'otimista';
+
+export default function ActualVsForecastPage() {
+  const t = useTranslations('finance.ActualVsForecastPage');
+
+  const [horizonte, setHorizonte] = useState<string | null>(null);
+  const [cenario, setCenario] = useState<Scenario | null>(null);
+
+  const { data, isFetching } = useFinanceData({
+    horizonteDias: horizonte ? Number(horizonte) : undefined,
+    cenario: cenario || undefined,
+  });
+
+  const selectedHorizon = horizonte || String(data.defaultHorizonDays || 90);
+  const selectedScenario = cenario || data.defaultScenario || 'base';
+
+  const comparisonData = useMemo(
+    () =>
+      data.fluxoCaixaPrevisto.map((item: any) => {
+        const previsto = Number(item.saldoPrevisto || 0);
+        const realizado = Number(item.saldoRealizado || 0);
+        const desvio = realizado - previsto;
+        const percentual =
+          previsto !== 0 ? (desvio / Math.abs(previsto)) * 100 : 0;
+
+        return {
+          data: item.data,
+          dataLabel: formatarData(item.data),
+          previsto,
+          realizado,
+          desvio,
+          percentual,
+        };
+      }),
+    [data.fluxoCaixaPrevisto]
+  );
+
+  const totals = useMemo(() => {
+    const previsto = comparisonData.reduce((acc, row) => acc + row.previsto, 0);
+    const realizado = comparisonData.reduce(
+      (acc, row) => acc + row.realizado,
+      0
+    );
+    const desvio = realizado - previsto;
+    const acuracia =
+      previsto !== 0
+        ? Math.max(0, 100 - (Math.abs(desvio) / Math.abs(previsto)) * 100)
+        : 100;
+
+    return {
+      previsto,
+      realizado,
+      desvio,
+      acuracia,
+    };
+  }, [comparisonData]);
+
+  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" disabled>
+            <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 Scenario)}
+          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" />
+            {t('messages.updating')}
+          </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.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>
+
+      <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>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.date')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.forecast')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.actual')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.deviation')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.percentDeviation')}
+                </TableHead>
+                <TableHead>{t('table.headers.status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {comparisonData.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={6}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                comparisonData.map((item, index) => {
+                  const statusVariant =
+                    item.desvio > 0
+                      ? 'default'
+                      : item.desvio < 0
+                        ? 'destructive'
+                        : 'secondary';
+
+                  return (
+                    <TableRow key={`${item.data}-${index}`}>
+                      <TableCell>{item.dataLabel}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={item.previsto} />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Money value={item.realizado} />
+                      </TableCell>
+                      <TableCell
+                        className={`text-right font-medium ${item.desvio >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                      >
+                        <Money value={item.desvio} showSign />
+                      </TableCell>
+                      <TableCell
+                        className={`text-right font-medium ${item.percentual >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                      >
+                        {item.percentual.toFixed(1)}%
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={statusVariant}>
+                          {item.desvio > 0
+                            ? t('status.above')
+                            : item.desvio < 0
+                              ? t('status.below')
+                              : t('status.onTarget')}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}