@hed-hog/finance 0.0.260 → 0.0.262

package/hedhog/frontend/app/reports/cash-position/page.tsx.ejs

@@ -0,0 +1,432 @@
+'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,
+  TrendingDown,
+  TrendingUp,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  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 CashPositionReportPage() {
+  const t = useTranslations('finance.CashPositionReportPage');
+
+  const [horizonte, setHorizonte] = useState<string | null>(null);
+  const [cenario, setCenario] = useState<Scenario | null>(null);
+  const [bankAccountId, setBankAccountId] = useState<string>('all');
+
+  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 contas = data.contasBancarias || [];
+  const extratos = data.extratos || [];
+
+  const filteredExtratos = useMemo(() => {
+    if (bankAccountId === 'all') {
+      return extratos;
+    }
+
+    return extratos.filter((item: any) => {
+      const accountId =
+        item.bankAccountId || item.contaBancariaId || item.bank_account_id;
+      return String(accountId) === bankAccountId;
+    });
+  }, [extratos, bankAccountId]);
+
+  const totals = useMemo(() => {
+    const saldoAtual = contas.reduce(
+      (acc: number, conta: any) => acc + Number(conta.saldoAtual || 0),
+      0
+    );
+
+    const saldoConciliado = contas.reduce(
+      (acc: number, conta: any) => acc + Number(conta.saldoConciliado || 0),
+      0
+    );
+
+    const entradas = filteredExtratos
+      .filter((item: any) => item.tipo === 'entrada')
+      .reduce((acc: number, item: any) => acc + Number(item.valor || 0), 0);
+
+    const saidas = filteredExtratos
+      .filter((item: any) => item.tipo === 'saida')
+      .reduce((acc: number, item: any) => acc + Number(item.valor || 0), 0);
+
+    return {
+      saldoAtual,
+      saldoConciliado,
+      diferenca: saldoAtual - saldoConciliado,
+      entradas,
+      saidas,
+      movimentacaoLiquida: entradas - saidas,
+    };
+  }, [contas, filteredExtratos]);
+
+  const chartData = useMemo(() => {
+    const byDate = new Map<
+      string,
+      {
+        date: string;
+        label: string;
+        entradas: number;
+        saidas: number;
+      }
+    >();
+
+    for (const mov of filteredExtratos) {
+      const date = String(mov.data || '');
+      if (!date) {
+        continue;
+      }
+
+      if (!byDate.has(date)) {
+        byDate.set(date, {
+          date,
+          label: formatarData(date),
+          entradas: 0,
+          saidas: 0,
+        });
+      }
+
+      const row = byDate.get(date)!;
+      const value = Number(mov.valor || 0);
+
+      if (mov.tipo === 'entrada') {
+        row.entradas += value;
+      } else {
+        row.saidas += value;
+      }
+    }
+
+    const sorted = Array.from(byDate.values()).sort((a, b) =>
+      a.date.localeCompare(b.date)
+    );
+
+    let saldoAcumulado = 0;
+
+    return sorted.map((item) => {
+      saldoAcumulado += item.entradas - item.saidas;
+
+      return {
+        ...item,
+        saldoAcumulado,
+      };
+    });
+  }, [filteredExtratos]);
+
+  const latestMovements = useMemo(
+    () =>
+      [...filteredExtratos]
+        .sort((a: any, b: any) => String(b.data).localeCompare(String(a.data)))
+        .slice(0, 12),
+    [filteredExtratos]
+  );
+
+  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:flex-wrap 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>
+
+        <Select
+          value={bankAccountId}
+          onValueChange={setBankAccountId}
+          disabled={isFetching}
+        >
+          <SelectTrigger className="w-60">
+            <SelectValue placeholder={t('filters.bankAccount')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('filters.allBankAccounts')}</SelectItem>
+            {contas.map((conta: any) => (
+              <SelectItem key={conta.id} value={String(conta.id)}>
+                {conta.banco}
+              </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-5">
+        <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={totals.saldoAtual} />
+            </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.reconciledBalance')}
+            </CardTitle>
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totals.saldoConciliado} />
+            </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.inflows')}
+            </CardTitle>
+            <TrendingUp className="h-4 w-4 text-green-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totals.entradas} />
+            </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.outflows')}
+            </CardTitle>
+            <TrendingDown className="h-4 w-4 text-red-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              <Money value={totals.saidas} />
+            </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.netMovement')}
+            </CardTitle>
+            {totals.movimentacaoLiquida >= 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.movimentacaoLiquida >= 0 ? 'text-green-600' : 'text-red-600'}`}
+            >
+              <Money value={totals.movimentacaoLiquida} showSign />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('chart.title')}</CardTitle>
+          <CardDescription>{t('chart.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={320}>
+            <AreaChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="label" 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',
+                }}
+              />
+              <Area
+                type="monotone"
+                dataKey="saldoAcumulado"
+                name={t('chart.balanceLabel')}
+                stroke="hsl(var(--primary))"
+                fill="hsl(var(--primary))"
+                fillOpacity={0.2}
+              />
+            </AreaChart>
+          </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>{t('table.headers.description')}</TableHead>
+                <TableHead>{t('table.headers.type')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {latestMovements.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={4}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                latestMovements.map((mov: any) => (
+                  <TableRow key={mov.id}>
+                    <TableCell>{formatarData(mov.data)}</TableCell>
+                    <TableCell
+                      className="max-w-[320px] truncate"
+                      title={mov.descricao}
+                    >
+                      {mov.descricao}
+                    </TableCell>
+                    <TableCell>
+                      {mov.tipo === 'entrada' ? (
+                        <Badge variant="secondary" className="text-green-700">
+                          {t('types.inflow')}
+                        </Badge>
+                      ) : (
+                        <Badge variant="secondary" className="text-red-700">
+                          {t('types.outflow')}
+                        </Badge>
+                      )}
+                    </TableCell>
+                    <TableCell
+                      className={`text-right font-medium ${mov.tipo === 'entrada' ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      <Money value={mov.valor} />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -1310,6 +1310,188 @@
       "total": "Total"
     }
   },
+  "ActualVsForecastPage": {
+    "header": {
+      "title": "Actual vs Forecast",
+      "description": "Compare realized performance against financial projections"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Actual vs Forecast"
+    },
+    "actions": {
+      "export": "Export"
+    },
+    "filters": {
+      "horizon": "Horizon",
+      "scenario": "Scenario",
+      "days30": "30 days",
+      "days60": "60 days",
+      "days90": "90 days",
+      "days180": "180 days",
+      "days365": "365 days"
+    },
+    "scenarios": {
+      "base": "Base",
+      "pessimistic": "Pessimistic",
+      "optimistic": "Optimistic"
+    },
+    "messages": {
+      "updating": "Updating data..."
+    },
+    "cards": {
+      "totalForecast": "Total Forecast",
+      "totalActual": "Total Actual",
+      "totalDeviation": "Total Deviation",
+      "accuracy": "Accuracy"
+    },
+    "chart": {
+      "title": "Actual vs Forecast Trend",
+      "description": "Time-series comparison between forecast and actual values",
+      "forecastLabel": "Forecast",
+      "actualLabel": "Actual"
+    },
+    "table": {
+      "title": "Period breakdown",
+      "description": "Track deviation for each projection point",
+      "headers": {
+        "date": "Date",
+        "forecast": "Forecast",
+        "actual": "Actual",
+        "deviation": "Deviation",
+        "percentDeviation": "% Deviation",
+        "status": "Status"
+      },
+      "empty": "No data for the selected period."
+    },
+    "status": {
+      "above": "Above",
+      "below": "Below",
+      "onTarget": "On target"
+    }
+  },
+  "CashPositionReportPage": {
+    "header": {
+      "title": "Cash Position",
+      "description": "Track balances and cash movements by account"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Cash Position"
+    },
+    "actions": {
+      "export": "Export"
+    },
+    "filters": {
+      "horizon": "Horizon",
+      "scenario": "Scenario",
+      "bankAccount": "Bank account",
+      "allBankAccounts": "All accounts",
+      "days30": "30 days",
+      "days60": "60 days",
+      "days90": "90 days",
+      "days180": "180 days",
+      "days365": "365 days"
+    },
+    "scenarios": {
+      "base": "Base",
+      "pessimistic": "Pessimistic",
+      "optimistic": "Optimistic"
+    },
+    "messages": {
+      "updating": "Updating data..."
+    },
+    "cards": {
+      "currentBalance": "Current Balance",
+      "reconciledBalance": "Reconciled Balance",
+      "inflows": "Inflows",
+      "outflows": "Outflows",
+      "netMovement": "Net Movement"
+    },
+    "chart": {
+      "title": "Balance evolution",
+      "description": "Accumulated balance variation in the selected period",
+      "balanceLabel": "Accumulated balance"
+    },
+    "table": {
+      "title": "Latest movements",
+      "description": "Most recent entries according to applied filters",
+      "headers": {
+        "date": "Date",
+        "description": "Description",
+        "type": "Type",
+        "value": "Value"
+      },
+      "empty": "No movements found."
+    },
+    "types": {
+      "inflow": "Inflow",
+      "outflow": "Outflow"
+    }
+  },
+  "AgingDefaultReportPage": {
+    "header": {
+      "title": "Default Aging",
+      "description": "View receivables delinquency by due range"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Default Aging"
+    },
+    "filters": {
+      "horizon": "Horizon",
+      "scenario": "Scenario",
+      "days30": "30 days",
+      "days60": "60 days",
+      "days90": "90 days",
+      "days180": "180 days",
+      "days365": "365 days"
+    },
+    "scenarios": {
+      "base": "Base",
+      "pessimistic": "Pessimistic",
+      "optimistic": "Optimistic"
+    },
+    "messages": {
+      "updating": "Updating data..."
+    },
+    "cards": {
+      "totalDefault": "Total Default",
+      "lateClients": "Late clients",
+      "over90Days": "Over 90 days",
+      "defaultRate": "Default Rate"
+    },
+    "chart": {
+      "title": "Distribution by range",
+      "description": "Default concentration by delay range",
+      "range0to30": "0–30 days",
+      "range31to60": "31–60 days",
+      "range61to90": "61–90 days",
+      "range90plus": "> 90 days"
+    },
+    "table": {
+      "title": "Client breakdown",
+      "description": "Default aging by client",
+      "headers": {
+        "client": "Client",
+        "range0to30": "0–30 days",
+        "range31to60": "31–60 days",
+        "range61to90": "61–90 days",
+        "range90plus": "> 90 days",
+        "total": "Total",
+        "risk": "Risk"
+      },
+      "empty": "No default data found."
+    },
+    "risk": {
+      "high": "High",
+      "medium": "Medium",
+      "low": "Low"
+    }
+  },
   "ReceivablesCalendarPage": {
     "status": {
       "confirmado": "Confirmed",