@hed-hog/finance 0.0.278 → 0.0.285

package/hedhog/frontend/app/reports/overview-results/page.tsx.ejs

@@ -0,0 +1,355 @@
+'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 { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+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 { Target, TrendingDown, TrendingUp } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import type { TooltipProps } from 'recharts';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  formatReportBucketLabel,
+  getDefaultDateRange,
+  type GroupBy,
+  useOverviewResultsReport,
+} from '../_lib/use-finance-reports';
+
+const LINE_COLORS = {
+  faturamento: '#2563eb',
+  despesasEmprestimos: '#ea580c',
+  diferenca: '#16a34a',
+};
+
+const currencyFormatter = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL',
+});
+
+function renderSolidTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-lg border bg-popover px-3 py-2 shadow-xl text-popover-foreground text-sm">
+      <p className="mb-1 font-semibold text-popover-foreground">{label}</p>
+      {payload.map((entry) => (
+        <div key={entry.dataKey} className="flex items-center gap-2 py-0.5">
+          <span
+            className="inline-block h-2.5 w-2.5 rounded-sm shrink-0"
+            style={{ background: entry.color }}
+          />
+          <span className="text-muted-foreground">{entry.name}:</span>
+          <span className="font-semibold text-popover-foreground">
+            {typeof entry.value === 'number'
+              ? currencyFormatter.format(entry.value)
+              : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function OverviewResultsReportPage() {
+  const t = useTranslations('finance.OverviewResultsReportPage');
+  const locale = useLocale();
+  const defaults = getDefaultDateRange();
+  const [from, setFrom] = useState(defaults.from);
+  const [to, setTo] = useState(defaults.to);
+  const [groupBy, setGroupBy] = useState<GroupBy>('year');
+  const { data } = useOverviewResultsReport({
+    from,
+    to,
+    groupBy,
+  });
+
+  const rows = useMemo(
+    () =>
+      data.rows.map((row) => ({
+        ...row,
+        label: formatReportBucketLabel(row.period, groupBy, locale),
+      })),
+    [data.rows, groupBy, locale]
+  );
+  const totals = data.totals;
+
+  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') },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('filters.title')}</CardTitle>
+          <CardDescription>{t('filters.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-3">
+          <div className="space-y-2">
+            <Label htmlFor="from">{t('filters.from')}</Label>
+            <Input
+              id="from"
+              type="date"
+              value={from}
+              onChange={(event) => setFrom(event.target.value)}
+              max={to}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="to">{t('filters.to')}</Label>
+            <Input
+              id="to"
+              type="date"
+              value={to}
+              onChange={(event) => setTo(event.target.value)}
+              min={from}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>{t('filters.groupBy')}</Label>
+            <Select
+              value={groupBy}
+              onValueChange={(value) => setGroupBy(value as GroupBy)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="day">{t('groupBy.day')}</SelectItem>
+                <SelectItem value="week">{t('groupBy.week')}</SelectItem>
+                <SelectItem value="month">{t('groupBy.month')}</SelectItem>
+                <SelectItem value="year">{t('groupBy.year')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-3 md:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
+            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t('cards.revenue')}
+            </CardTitle>
+            <div className="rounded-full bg-blue-500/10 p-1.5">
+              <TrendingUp className="h-4 w-4 text-blue-600" />
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
+              <Money value={totals.faturamento} />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
+            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t('cards.expensesAndLoans')}
+            </CardTitle>
+            <div className="rounded-full bg-orange-500/10 p-1.5">
+              <TrendingDown className="h-4 w-4 text-orange-600" />
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
+              <Money value={totals.despesasEmprestimos} />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
+            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t('cards.resultDifference')}
+            </CardTitle>
+            <div
+              className={`rounded-full p-1.5 ${totals.diferenca >= 0 ? 'bg-green-500/10' : 'bg-red-500/10'}`}
+            >
+              {totals.diferenca >= 0 ? (
+                <TrendingUp className="h-4 w-4 text-green-600" />
+              ) : (
+                <TrendingDown className="h-4 w-4 text-red-600" />
+              )}
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div
+              className={`text-xl font-bold ${totals.diferenca >= 0 ? 'text-green-600' : 'text-red-600'}`}
+            >
+              <Money value={totals.diferenca} showSign />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
+            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t('cards.margin')}
+            </CardTitle>
+            <div className="rounded-full bg-violet-500/10 p-1.5">
+              <Target className="h-4 w-4 text-violet-600" />
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">{totals.margem.toFixed(1)}%</div>
+            <Badge
+              className="mt-1"
+              variant={totals.margem >= 0 ? 'default' : 'destructive'}
+            >
+              {totals.margem >= 0 ? t('status.positive') : t('status.negative')}
+            </Badge>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('chart.title')}</CardTitle>
+          <CardDescription>{t('chart.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={360}>
+            <LineChart data={rows}>
+              <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 content={renderSolidTooltip} />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="faturamento"
+                name={t('chart.revenueLabel')}
+                stroke={LINE_COLORS.faturamento}
+                strokeWidth={3}
+                dot={false}
+              />
+              <Line
+                type="monotone"
+                dataKey="despesasEmprestimos"
+                name={t('chart.expensesLabel')}
+                stroke={LINE_COLORS.despesasEmprestimos}
+                strokeWidth={3}
+                dot={false}
+              />
+              <Line
+                type="monotone"
+                dataKey="diferenca"
+                name={t('chart.differenceLabel')}
+                stroke={LINE_COLORS.diferenca}
+                strokeWidth={2}
+                strokeDasharray="6 4"
+                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.period')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.revenue')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.expensesAndLoans')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.investorContribution')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.difference')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                rows.map((row) => (
+                  <TableRow key={row.period}>
+                    <TableCell>{row.label}</TableCell>
+                    <TableCell className="text-right">
+                      <Money value={row.faturamento} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Money value={row.despesasEmprestimos} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Money value={row.aporteInvestidor} />
+                    </TableCell>
+                    <TableCell
+                      className={`text-right font-semibold ${row.diferenca >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      <Money value={row.diferenca} showSign />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}