@hed-hog/finance 0.0.261 → 0.0.266

package/hedhog/frontend/app/reports/aging-default/page.tsx.ejs

@@ -0,0 +1,368 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+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 { AlertTriangle, Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+type Scenario = 'base' | 'pessimista' | 'otimista';
+
+function toPercent(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return value <= 1 ? value * 100 : value;
+}
+
+export default function AgingDefaultReportPage() {
+  const t = useTranslations('finance.AgingDefaultReportPage');
+
+  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 agingInadimplencia = data.agingInadimplencia || [];
+
+  const totals = useMemo(() => {
+    const bucket0to30 = agingInadimplencia.reduce(
+      (acc: number, item: any) => acc + Number(item.bucket0_30 || 0),
+      0
+    );
+    const bucket31to60 = agingInadimplencia.reduce(
+      (acc: number, item: any) => acc + Number(item.bucket31_60 || 0),
+      0
+    );
+    const bucket61to90 = agingInadimplencia.reduce(
+      (acc: number, item: any) => acc + Number(item.bucket61_90 || 0),
+      0
+    );
+    const bucket90plus = agingInadimplencia.reduce(
+      (acc: number, item: any) => acc + Number(item.bucket90plus || 0),
+      0
+    );
+    const total = agingInadimplencia.reduce(
+      (acc: number, item: any) => acc + Number(item.total || 0),
+      0
+    );
+
+    return {
+      bucket0to30,
+      bucket31to60,
+      bucket61to90,
+      bucket90plus,
+      total,
+      clients: agingInadimplencia.length,
+    };
+  }, [agingInadimplencia]);
+
+  const chartData = [
+    {
+      name: t('chart.range0to30'),
+      value: totals.bucket0to30,
+    },
+    {
+      name: t('chart.range31to60'),
+      value: totals.bucket31to60,
+    },
+    {
+      name: t('chart.range61to90'),
+      value: totals.bucket61to90,
+    },
+    {
+      name: t('chart.range90plus'),
+      value: totals.bucket90plus,
+    },
+  ];
+
+  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="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.totalDefault')}
+            </CardTitle>
+            <AlertTriangle className="h-4 w-4 text-destructive" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totals.total} />
+            </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.lateClients')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totals.clients}</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.over90Days')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-destructive">
+              <Money value={totals.bucket90plus} />
+            </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.defaultRate')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {toPercent(Number(data.kpis?.inadimplencia || 0)).toFixed(1)}%
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('chart.title')}</CardTitle>
+          <CardDescription>{t('chart.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={280}>
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="name" 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',
+                }}
+              />
+              <Bar
+                dataKey="value"
+                radius={[4, 4, 0, 0]}
+                fill="hsl(var(--primary))"
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.client')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range0to30')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range31to60')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range61to90')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range90plus')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.total')}
+                </TableHead>
+                <TableHead>{t('table.headers.risk')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {agingInadimplencia.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={7}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                agingInadimplencia.map((item: any) => {
+                  const riskVariant =
+                    item.bucket90plus > 0
+                      ? 'destructive'
+                      : item.bucket61_90 > 0
+                        ? 'secondary'
+                        : 'outline';
+
+                  return (
+                    <TableRow key={item.clienteId}>
+                      <TableCell className="font-medium">
+                        {item.cliente}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {item.bucket0_30 > 0 ? (
+                          <Money value={item.bucket0_30} />
+                        ) : (
+                          '-'
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {item.bucket31_60 > 0 ? (
+                          <Money value={item.bucket31_60} />
+                        ) : (
+                          '-'
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {item.bucket61_90 > 0 ? (
+                          <Money value={item.bucket61_90} />
+                        ) : (
+                          '-'
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {item.bucket90plus > 0 ? (
+                          <span className="text-destructive font-medium">
+                            <Money value={item.bucket90plus} />
+                          </span>
+                        ) : (
+                          '-'
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right font-semibold">
+                        <Money value={item.total} />
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={riskVariant}>
+                          {item.bucket90plus > 0
+                            ? t('risk.high')
+                            : item.bucket61_90 > 0
+                              ? t('risk.medium')
+                              : t('risk.low')}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}