@hed-hog/finance 0.0.279 → 0.0.285

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -9,7 +10,6 @@ import {
   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,
@@ -28,11 +28,13 @@ import {
 } from '@/components/ui/table';
 import { Crown, PieChartIcon, Users } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { type FormEvent, useState } from 'react';
 import {
   Bar,
   BarChart,
+  CartesianGrid,
   Cell,
+  Legend,
   Pie,
   PieChart,
   ResponsiveContainer,
@@ -41,43 +43,95 @@ import {
   YAxis,
 } from 'recharts';
 import {
-  aggregateTopCustomers,
   getDefaultDateRange,
-} from '../_lib/report-aggregations';
-import { type GroupBy } from '../_lib/report-mocks';
+  type GroupBy,
+  useTopCustomersReport,
+} from '../_lib/use-finance-reports';
 
-const pieColors = [
-  'hsl(var(--chart-1))',
-  'hsl(var(--chart-2))',
-  'hsl(var(--chart-3))',
-  'hsl(var(--chart-4))',
-  'hsl(var(--chart-5))',
-  '#0EA5E9',
-  '#06B6D4',
-  '#22C55E',
-  '#F59E0B',
-  '#A855F7',
+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 [from, setFrom] = useState(defaults.from);
-  const [to, setTo] = useState(defaults.to);
-  const [groupBy, setGroupBy] = useState<GroupBy>('year');
+  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 data = useMemo(
-    () =>
-      aggregateTopCustomers({
-        from,
-        to,
-        groupBy,
-        topN: 20,
-      }),
-    [from, to, groupBy]
-  );
+  const handleSubmitFilters = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setAppliedFilters(filters);
+  };
 
-  const leader = data.topCustomers[0];
+  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>
@@ -91,164 +145,225 @@ export default function TopCustomersReportPage() {
         ]}
       />
 
-      <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>
+      <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-4 md:grid-cols-3">
+      <div className="grid gap-3 md:grid-cols-3">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
+          <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>
-            <Users className="h-4 w-4 text-muted-foreground" />
+            <div className="rounded-full bg-blue-500/10 p-1.5">
+              <Users className="h-4 w-4 text-blue-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={data.total} />
+          <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-2">
-            <CardTitle className="text-sm font-medium">
+          <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>
-            <PieChartIcon className="h-4 w-4 text-muted-foreground" />
+            <div className="rounded-full bg-purple-500/10 p-1.5">
+              <PieChartIcon className="h-4 w-4 text-purple-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {data.top5Percent.toFixed(1)}%
+          <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-2">
-            <CardTitle className="text-sm font-medium">
+          <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>
-            <Crown className="h-4 w-4 text-amber-500" />
+            <div className="rounded-full bg-amber-500/10 p-1.5">
+              <Crown className="h-4 w-4 text-amber-500" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-lg font-semibold">
-              {leader?.customer || '-'}
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-sm font-medium">
+              {viewData.leader?.customer || '-'}
             </div>
-            <div className="text-muted-foreground text-sm">
-              {leader ? <Money value={leader.value} /> : '-'}
+            <div className="text-xs text-muted-foreground">
+              {viewData.leader ? <Money value={viewData.leader.value} /> : '-'}
             </div>
           </CardContent>
         </Card>
       </div>
 
-      <div className="grid gap-4 xl:grid-cols-5">
+      <div className="grid gap-3 xl:grid-cols-5">
         <Card className="xl:col-span-3">
-          <CardHeader>
+          <CardHeader className="pb-3">
             <CardTitle>{t('bars.title')}</CardTitle>
             <CardDescription>{t('bars.description')}</CardDescription>
           </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={560}>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={360}>
               <BarChart
-                data={[...data.topCustomers].reverse()}
+                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
-                  formatter={(value: number) =>
-                    new Intl.NumberFormat('pt-BR', {
-                      style: 'currency',
-                      currency: 'BRL',
-                    }).format(value)
-                  }
-                />
-                <Bar
-                  dataKey="value"
-                  radius={[0, 6, 6, 0]}
-                  fill="hsl(var(--chart-2))"
+                  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>
+          <CardHeader className="pb-3">
             <CardTitle>{t('pie.title')}</CardTitle>
             <CardDescription>{t('pie.description')}</CardDescription>
           </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={380}>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={340}>
               <PieChart>
                 <Pie
-                  data={data.pieData}
+                  data={viewData.pieData}
                   dataKey="value"
                   nameKey="customer"
-                  innerRadius={65}
-                  outerRadius={120}
+                  innerRadius={55}
+                  outerRadius={100}
                   paddingAngle={2}
+                  cy="42%"
                 >
-                  {data.pieData.map((entry, index) => (
+                  {viewData.pieData.map((entry, index) => (
                     <Cell
                       key={entry.customer}
-                      fill={pieColors[index % pieColors.length]}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
                     />
                   ))}
                 </Pie>
-                <Tooltip
-                  formatter={(value: number) =>
-                    new Intl.NumberFormat('pt-BR', {
-                      style: 'currency',
-                      currency: 'BRL',
-                    }).format(value)
-                  }
+                <Legend
+                  iconType="circle"
+                  verticalAlign="bottom"
+                  wrapperStyle={{
+                    fontSize: 12,
+                    lineHeight: '20px',
+                    paddingTop: 12,
+                  }}
                 />
+                <Tooltip cursor={false} content={renderSolidTooltip} />
               </PieChart>
             </ResponsiveContainer>
           </CardContent>
@@ -274,7 +389,7 @@ export default function TopCustomersReportPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {data.topCustomers.length === 0 ? (
+              {viewData.topCustomers.length === 0 ? (
                 <TableRow>
                   <TableCell
                     colSpan={3}
@@ -284,9 +399,11 @@ export default function TopCustomersReportPage() {
                   </TableCell>
                 </TableRow>
               ) : (
-                data.topCustomers.map((item) => {
+                viewData.topCustomers.map((item) => {
                   const participation =
-                    data.total > 0 ? (item.value / data.total) * 100 : 0;
+                    viewData.total > 0
+                      ? (item.value / viewData.total) * 100
+                      : 0;
 
                   return (
                     <TableRow key={item.customer}>