@hed-hog/finance 0.0.278 → 0.0.285

package/hedhog/frontend/app/reports/top-customers/page.tsx.ejs

@@ -0,0 +1,427 @@
+'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 { Input } from '@/components/ui/input';
+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 { Crown, PieChartIcon, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type FormEvent, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  getDefaultDateRange,
+  type GroupBy,
+  useTopCustomersReport,
+} from '../_lib/use-finance-reports';
+
+const rankingColors = [
+  '#2563EB',
+  '#DC2626',
+  '#059669',
+  '#D97706',
+  '#7C3AED',
+  '#0F766E',
+  '#BE123C',
+  '#1D4ED8',
+  '#15803D',
+  '#B45309',
+];
+
+const currencyFormatter = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL',
+});
+
+export default function TopCustomersReportPage() {
+  const t = useTranslations('finance.TopCustomersReportPage');
+  const defaults = getDefaultDateRange();
+  const [filters, setFilters] = useState({
+    from: defaults.from,
+    to: defaults.to,
+    groupBy: 'year' as GroupBy,
+    search: '',
+  });
+  const [appliedFilters, setAppliedFilters] = useState(filters);
+  const { data: viewData, isFetching } = useTopCustomersReport({
+    from: appliedFilters.from,
+    to: appliedFilters.to,
+    groupBy: appliedFilters.groupBy,
+    search: appliedFilters.search,
+    topN: 20,
+  });
+
+  const handleSubmitFilters = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setAppliedFilters(filters);
+  };
+
+  const renderSolidTooltip = ({
+    active,
+    payload,
+    label,
+  }: {
+    active?: boolean;
+    payload?: Array<{
+      name?: string;
+      value?: number | string;
+      color?: string;
+      dataKey?: string;
+    }>;
+    label?: string | number;
+  }) => {
+    if (!active || !payload || payload.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="min-w-52 rounded-md border bg-popover px-3 py-2 shadow-xl">
+        <p className="mb-1 text-sm font-semibold text-popover-foreground">
+          {String(label ?? payload[0]?.name ?? '')}
+        </p>
+        {payload.map((row, index) => (
+          <div
+            key={`${row.dataKey ?? row.name ?? 'item'}-${index}`}
+            className="flex items-center justify-between gap-3 text-sm"
+          >
+            <div className="flex items-center gap-2 text-popover-foreground">
+              <span
+                className="inline-block h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: row.color || 'hsl(var(--chart-1))' }}
+              />
+              <span>{row.name ?? row.dataKey ?? 'Valor'}</span>
+            </div>
+            <span className="font-semibold text-popover-foreground">
+              {currencyFormatter.format(Number(row.value || 0))}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  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') },
+        ]}
+      />
+
+      <form
+        onSubmit={handleSubmitFilters}
+        className="flex w-full flex-col gap-3 lg:flex-row"
+      >
+        <Input
+          type="search"
+          value={filters.search}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              search: event.target.value,
+            }))
+          }
+          placeholder={t('filters.searchPlaceholder')}
+          className="w-full lg:flex-[2.4]"
+          aria-label={t('filters.searchAria')}
+        />
+        <Input
+          id="from"
+          type="date"
+          value={filters.from}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              from: event.target.value,
+            }))
+          }
+          max={filters.to}
+          className="w-full lg:w-[170px]"
+          aria-label={t('filters.fromAria')}
+          placeholder={t('filters.fromPlaceholder')}
+        />
+        <Input
+          id="to"
+          type="date"
+          value={filters.to}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              to: event.target.value,
+            }))
+          }
+          min={filters.from}
+          className="w-full lg:w-[170px]"
+          aria-label={t('filters.toAria')}
+          placeholder={t('filters.toPlaceholder')}
+        />
+        <Select
+          value={filters.groupBy}
+          onValueChange={(value) =>
+            setFilters((current) => ({
+              ...current,
+              groupBy: value as GroupBy,
+            }))
+          }
+        >
+          <SelectTrigger
+            className="w-full lg:w-[150px]"
+            aria-label={t('filters.groupByAria')}
+          >
+            <SelectValue placeholder={t('filters.groupByPlaceholder')} />
+          </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>
+        <Button
+          type="submit"
+          className="w-full lg:w-auto"
+          disabled={isFetching}
+        >
+          {t('filters.submit')}
+        </Button>
+      </form>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <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.total')}
+            </CardTitle>
+            <div className="rounded-full bg-blue-500/10 p-1.5">
+              <Users 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={viewData.total} />
+            </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.top5Concentration')}
+            </CardTitle>
+            <div className="rounded-full bg-purple-500/10 p-1.5">
+              <PieChartIcon className="h-4 w-4 text-purple-600" />
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
+              {viewData.top5Percent.toFixed(1)}%
+            </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.leader')}
+            </CardTitle>
+            <div className="rounded-full bg-amber-500/10 p-1.5">
+              <Crown className="h-4 w-4 text-amber-500" />
+            </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-sm font-medium">
+              {viewData.leader?.customer || '-'}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {viewData.leader ? <Money value={viewData.leader.value} /> : '-'}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-3 xl:grid-cols-5">
+        <Card className="xl:col-span-3">
+          <CardHeader className="pb-3">
+            <CardTitle>{t('bars.title')}</CardTitle>
+            <CardDescription>{t('bars.description')}</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={360}>
+              <BarChart
+                data={viewData.topCustomers}
+                layout="vertical"
+                margin={{ left: 60, right: 16 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  type="number"
+                  tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+                />
+                <YAxis dataKey="customer" type="category" width={190} />
+                <Tooltip
+                  cursor={{ fill: 'hsl(var(--muted) / 0.35)' }}
+                  content={renderSolidTooltip}
+                />
+                <Bar dataKey="value" radius={[0, 6, 6, 0]}>
+                  {viewData.topCustomers.map((entry, index) => (
+                    <Cell
+                      key={entry.customer}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
+                    />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+            <div className="mt-4 grid grid-cols-2 gap-2 text-sm sm:grid-cols-3">
+              {viewData.topCustomers.slice(0, 6).map((item, index) => (
+                <div key={item.customer} className="flex items-center gap-2">
+                  <span
+                    className="inline-block h-2.5 w-2.5 rounded-full"
+                    style={{
+                      backgroundColor:
+                        rankingColors[index % rankingColors.length],
+                    }}
+                  />
+                  <span className="truncate text-foreground/90">
+                    #{index + 1} {item.customer}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="xl:col-span-2">
+          <CardHeader className="pb-3">
+            <CardTitle>{t('pie.title')}</CardTitle>
+            <CardDescription>{t('pie.description')}</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={340}>
+              <PieChart>
+                <Pie
+                  data={viewData.pieData}
+                  dataKey="value"
+                  nameKey="customer"
+                  innerRadius={55}
+                  outerRadius={100}
+                  paddingAngle={2}
+                  cy="42%"
+                >
+                  {viewData.pieData.map((entry, index) => (
+                    <Cell
+                      key={entry.customer}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
+                    />
+                  ))}
+                </Pie>
+                <Legend
+                  iconType="circle"
+                  verticalAlign="bottom"
+                  wrapperStyle={{
+                    fontSize: 12,
+                    lineHeight: '20px',
+                    paddingTop: 12,
+                  }}
+                />
+                <Tooltip cursor={false} content={renderSolidTooltip} />
+              </PieChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.customer')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.participation')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {viewData.topCustomers.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                viewData.topCustomers.map((item) => {
+                  const participation =
+                    viewData.total > 0
+                      ? (item.value / viewData.total) * 100
+                      : 0;
+
+                  return (
+                    <TableRow key={item.customer}>
+                      <TableCell>{item.customer}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={item.value} />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {participation.toFixed(2)}%
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}