Improve chart readability and drilldowns

src/pages/ProductDetails.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
 import { Package, DollarSign, ReceiptText, Warehouse } from 'lucide-react';
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { AreaChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import BackButton from '../components/BackButton';
 import DateRangePicker from '../components/DateRangePicker';
 import RefreshStatus from '../components/RefreshStatus';
@@ -9,6 +9,7 @@ import type { DateRange, ProductDetailsAnalytics } from '../types';
 import { fetchProductDetailsAnalytics } from '../dataService';
 import { parseProductName } from '../productParsing';
 import { formatColorLabel } from '../displayFormatters';
+import { averageRecentValues, formatDateBucketLabel, formatDateBucketLongLabel, getAutoDateBucket, getMovingAverageWindow, getRangeDayCount, getDateBucketKey, type DateBucket } from '../chartUtils';
 
 const CHART_GRID_COLOR = 'var(--chart-grid)';
 const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -18,6 +19,11 @@ const VARIANT_BAR_COLOR = '#52DFA0';
 
 type ProductChartMetric = 'quantity' | 'revenue' | 'ticket';
 
+type ProductMetricChartPoint = ProductDetailsAnalytics['chartData'][number] & {
+  selectedValue: number;
+  movingAverage?: number;
+};
+
 const formatDateKey = (date: Date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -29,26 +35,31 @@ type CustomTooltipProps = {
   active?: boolean;
   payload?: Array<{
     value: number;
-    payload?: ProductDetailsAnalytics['chartData'][number] & { selectedValue?: number };
+    dataKey?: string;
+    payload?: ProductMetricChartPoint;
   }>;
   label?: string;
   metric: ProductChartMetric;
   formatCurrency: (value: number) => string;
   formatNumber: (value: number) => string;
+  isHourly: boolean;
+  dateBucket: DateBucket;
 };
 
-const CustomTooltip = ({ active, payload, label, metric, formatCurrency, formatNumber }: CustomTooltipProps) => {
+const CustomTooltip = ({ active, payload, label, metric, formatCurrency, formatNumber, isHourly, dateBucket }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
-    const point = payload[0].payload;
-    const value = payload[0].value;
+    const primaryPayload = payload.find(item => item.dataKey === 'selectedValue') || payload[0];
+    const point = primaryPayload.payload;
+    const value = primaryPayload.value;
     const displayValue = metric === 'quantity' ? `${formatNumber(value)} un.` : formatCurrency(value);
+    const displayLabel = isHourly ? String(label || '') : formatDateBucketLongLabel(String(label || ''), dateBucket);
 
     return (
       <div
         className="rounded-xl border p-3 shadow-lg"
         style={{ backgroundColor: 'var(--chart-tooltip-bg)', borderColor: 'var(--chart-tooltip-border)' }}
       >
-        <p className="font-bold mb-1" style={{ color: CHART_DETAIL_BAR_COLOR }}>{label}</p>
+        <p className="font-bold mb-1" style={{ color: CHART_DETAIL_BAR_COLOR }}>{displayLabel}</p>
         <p className="m-0 font-semibold" style={{ color: 'var(--chart-tooltip-text)' }}>{displayValue}</p>
         {point && (
           <div className="mt-2 space-y-1 text-xs" style={{ color: 'var(--chart-axis)' }}>
@@ -118,6 +129,7 @@ const ProductDetails = () => {
   const [details, setDetails] = useState<ProductDetailsAnalytics | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [chartMetric, setChartMetric] = useState<ProductChartMetric>('quantity');
+  const [selectedProductBucket, setSelectedProductBucket] = useState<string | null>(null);
 
   useEffect(() => {
     let isMounted = true;
@@ -171,22 +183,34 @@ const ProductDetails = () => {
   const { productInfo, chartData, totalSold, totalRevenue, totalOrders = 0, averageTicket = 0, variantBreakdown = [] } = details;
   const isRefreshing = isLoading && Boolean(details);
   const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
+  const isHourlyChart = isSingleDayRange && chartData.some(point => /h$|:/.test(point.date));
+  const dateBucket = isHourlyChart ? 'day' : getAutoDateBucket(dateRange);
+  const periodDays = getRangeDayCount(dateRange);
+  const dailyAverageSold = totalSold / periodDays;
+  const projectedStockDays = dailyAverageSold > 0 ? productInfo.stock / dailyAverageSold : null;
+  const stockActionLabel = projectedStockDays === null
+    ? 'Sem venda no período'
+    : projectedStockDays <= 7
+      ? 'Reposição crítica'
+      : projectedStockDays <= 21
+        ? 'Planejar reposição'
+        : 'Estoque confortável';
   const metricConfig = {
     quantity: {
       label: 'Unidades',
-      title: `Volume por ${isSingleDayRange ? 'Horário' : 'Data'}`,
+      title: `Volume por ${isHourlyChart ? 'Horário' : 'Data'}`,
       subtitle: 'Quantidade vendida no período selecionado.',
       tickFormatter: (value: number) => formatNumber(value)
     },
     revenue: {
       label: 'Receita',
-      title: `Receita por ${isSingleDayRange ? 'Horário' : 'Data'}`,
+      title: `Receita por ${isHourlyChart ? 'Horário' : 'Data'}`,
       subtitle: 'Faturamento do produto no período selecionado.',
       tickFormatter: (value: number) => value >= 1000 ? `${formatNumber(value / 1000)}k` : formatCurrency(value)
     },
     ticket: {
       label: 'Ticket médio',
-      title: `Ticket médio por ${isSingleDayRange ? 'Horário' : 'Data'}`,
+      title: `Ticket médio por ${isHourlyChart ? 'Horário' : 'Data'}`,
       subtitle: 'Receita média por pedido neste produto.',
       tickFormatter: (value: number) => value >= 1000 ? `${formatNumber(value / 1000)}k` : formatCurrency(value)
     }
@@ -197,14 +221,62 @@ const ProductDetails = () => {
     tickFormatter: (value: number) => string;
   }>;
   const selectedMetric = metricConfig[chartMetric];
-  const metricChartData = chartData.map(point => ({
-    ...point,
-    selectedValue: chartMetric === 'quantity'
-      ? (point.quantitySold ?? point.value)
-      : chartMetric === 'revenue'
-        ? (point.revenue ?? 0)
-        : (point.averageTicket ?? 0)
-  }));
+  const metricChartData = (() => {
+    const bucketMap = new Map<string, ProductMetricChartPoint>();
+
+    chartData.forEach(point => {
+      const sourceKey = isHourlyChart ? point.date : getDateBucketKey(point.date, dateBucket);
+      const current = bucketMap.get(sourceKey) || {
+        date: sourceKey,
+        value: 0,
+        quantitySold: 0,
+        revenue: 0,
+        orderCount: 0,
+        averageTicket: 0,
+        selectedValue: 0
+      };
+      const quantity = point.quantitySold ?? point.value ?? 0;
+      const revenue = point.revenue ?? 0;
+      const orderCount = point.orderCount ?? 0;
+
+      current.value = (current.value || 0) + quantity;
+      current.quantitySold = (current.quantitySold || 0) + quantity;
+      current.revenue = (current.revenue || 0) + revenue;
+      current.orderCount = (current.orderCount || 0) + orderCount;
+      current.averageTicket = current.orderCount ? current.revenue / current.orderCount : 0;
+      bucketMap.set(sourceKey, current);
+    });
+
+    const rows = [...bucketMap.values()]
+      .filter(point => (point.quantitySold || point.value || point.revenue || point.orderCount))
+      .sort((a, b) => a.date.localeCompare(b.date))
+      .map(point => ({
+        ...point,
+        selectedValue: chartMetric === 'quantity'
+          ? (point.quantitySold ?? point.value)
+          : chartMetric === 'revenue'
+            ? (point.revenue ?? 0)
+            : (point.averageTicket ?? 0)
+      }));
+
+    const movingAverageWindow = isHourlyChart ? 0 : getMovingAverageWindow(dateBucket);
+    if (movingAverageWindow > 1) {
+      const values = rows.map(point => point.selectedValue);
+      rows.forEach((point, index) => {
+        point.movingAverage = averageRecentValues(values, index, movingAverageWindow);
+      });
+    }
+
+    return rows;
+  })();
+  const selectedProductPoint = selectedProductBucket
+    ? metricChartData.find(point => point.date === selectedProductBucket)
+    : null;
+  const selectedProductBucketLabel = selectedProductPoint
+    ? isHourlyChart
+      ? selectedProductPoint.date
+      : formatDateBucketLongLabel(selectedProductPoint.date, dateBucket)
+    : '';
   const maxVariantQuantity = Math.max(...variantBreakdown.map(variant => variant.quantitySold), 0);
 
   return (
@@ -237,6 +309,7 @@ const ProductDetails = () => {
           <div>
             <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Unidades Vendidas</p>
             <p className="text-3xl font-bold text-dark-text">{formatNumber(totalSold)}</p>
+            <p className="mt-1 text-xs font-semibold text-dark-muted">{formatNumber(dailyAverageSold)} un./dia</p>
           </div>
           <div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
             <Package size={24} />
@@ -264,6 +337,9 @@ const ProductDetails = () => {
           <div>
             <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Estoque</p>
             <p className="text-3xl font-bold text-dark-text">{formatNumber(productInfo.stock)}</p>
+            <p className="mt-1 text-xs font-semibold text-dark-muted">
+              {projectedStockDays === null ? stockActionLabel : `${formatNumber(projectedStockDays)} dias · ${stockActionLabel}`}
+            </p>
           </div>
           <div className="p-3 bg-purple-500/10 rounded-xl text-purple-400">
             <Warehouse size={24} />
@@ -275,7 +351,15 @@ const ProductDetails = () => {
         <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
           <div>
             <h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">{selectedMetric.title}</h3>
-            <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">{selectedMetric.subtitle}</p>
+            <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">
+              {isHourlyChart
+                ? selectedMetric.subtitle
+                : dateBucket === 'day'
+                  ? `${selectedMetric.subtitle} Média móvel de 7 dias.`
+                  : dateBucket === 'week'
+                    ? 'Valores agrupados por semana com média móvel de 4 semanas.'
+                    : 'Valores agrupados por mês com média móvel de 3 meses.'}
+            </p>
           </div>
           <div className="flex w-fit rounded-xl border border-dark-border bg-dark-input p-1">
             {(Object.keys(metricConfig) as ProductChartMetric[]).map(metric => (
@@ -301,7 +385,13 @@ const ProductDetails = () => {
         ) : (
         <div className="h-[400px] w-full">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={metricChartData} margin={{ top: 5, right: 30, left: 20, bottom: isSingleDayRange ? 24 : 80 }}>
+            <AreaChart
+              data={metricChartData}
+              margin={{ top: 5, right: 30, left: 20, bottom: 28 }}
+              onClick={(event) => {
+                if (event?.activeLabel) setSelectedProductBucket(String(event.activeLabel));
+              }}
+            >
               <defs>
                 <linearGradient id="productVolumeGradient" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.38} />
@@ -311,13 +401,13 @@ const ProductDetails = () => {
               <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
               <XAxis 
                 dataKey="date" stroke={CHART_AXIS_COLOR} fontSize={10} tickLine={false} axisLine={false}
-                interval={isSingleDayRange ? 2 : 0}
-                angle={isSingleDayRange ? 0 : -45}
-                textAnchor={isSingleDayRange ? 'middle' : 'end'}
-                height={isSingleDayRange ? 24 : 80}
+                minTickGap={18}
+                tickFormatter={(value) => (
+                  isHourlyChart ? String(value) : formatDateBucketLabel(String(value), dateBucket)
+                )}
               />
               <YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => selectedMetric.tickFormatter(Number(value))} />
-              <Tooltip content={<CustomTooltip metric={chartMetric} formatCurrency={formatCurrency} formatNumber={formatNumber} />} cursor={{ fill: CHART_CURSOR_COLOR }} />
+              <Tooltip content={<CustomTooltip metric={chartMetric} formatCurrency={formatCurrency} formatNumber={formatNumber} isHourly={isHourlyChart} dateBucket={dateBucket} />} cursor={{ fill: CHART_CURSOR_COLOR }} />
               <Area
                 type="monotone"
                 dataKey="selectedValue"
@@ -327,10 +417,61 @@ const ProductDetails = () => {
                 dot={{ r: 3, strokeWidth: 2, fill: 'var(--color-dark-card)', stroke: CHART_DETAIL_BAR_COLOR }}
                 activeDot={{ r: 5, strokeWidth: 2, fill: CHART_DETAIL_BAR_COLOR, stroke: 'var(--color-dark-card)' }}
               />
+              {!isHourlyChart && metricChartData.some(point => point.movingAverage !== undefined) && (
+                <Line
+                  type="monotone"
+                  dataKey="movingAverage"
+                  name="Média móvel"
+                  stroke="var(--chart-label)"
+                  strokeWidth={2.5}
+                  strokeDasharray="6 5"
+                  dot={false}
+                  activeDot={false}
+                />
+              )}
             </AreaChart>
           </ResponsiveContainer>
         </div>
         )}
+        {selectedProductPoint && (
+          <div className="mt-4 rounded-xl border border-dark-border bg-dark-input/45 p-4">
+            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+              <div>
+                <h4 className="text-sm font-bold text-dark-text">{selectedProductBucketLabel}</h4>
+                <p className="mt-1 text-xs font-semibold text-dark-muted">Detalhe do ponto selecionado.</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setSelectedProductBucket(null)}
+                className="h-8 rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-muted transition-colors hover:text-dark-text"
+              >
+                Limpar
+              </button>
+            </div>
+            <div className="mt-4 grid gap-3 md:grid-cols-5">
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Unidades</div>
+                <div className="mt-1 text-sm font-bold text-dark-text">{formatNumber(selectedProductPoint.quantitySold ?? selectedProductPoint.value ?? 0)}</div>
+              </div>
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Receita</div>
+                <div className="mt-1 text-sm font-bold text-dark-text">{formatCurrency(selectedProductPoint.revenue ?? 0)}</div>
+              </div>
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Pedidos</div>
+                <div className="mt-1 text-sm font-bold text-dark-text">{formatNumber(selectedProductPoint.orderCount ?? 0)}</div>
+              </div>
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Ticket</div>
+                <div className="mt-1 text-sm font-bold text-dark-text">{formatCurrency(selectedProductPoint.averageTicket ?? 0)}</div>
+              </div>
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Cobertura</div>
+                <div className="mt-1 text-sm font-bold text-dark-text">{projectedStockDays === null ? '-' : `${formatNumber(projectedStockDays)} dias`}</div>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">