Add hourly seller chart for single-day ranges

src/pages/Dashboard.tsx

@@ -37,6 +37,8 @@ const formatDateLabel = (value: string) => {
   return new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
 };
 
+const formatHourKey = (hour: number) => `${String(hour).padStart(2, '0')}h`;
+
 const formatDateKey = (date: Date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -319,7 +321,7 @@ const Dashboard = () => {
     return () => clearInterval(intervalId);
   }, [dateRange, loadDashboardMetrics, refreshInterval]);
 
-  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller, sellerRevenueByDate } = useMemo(() => {
+  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller, sellerRevenueByDate, sellerRevenueByHour } = useMemo(() => {
     if (serverMetrics) return applyDashboardColors(serverMetrics);
     return buildDashboardMetrics(ordersData, dateRange);
   }, [dateRange, ordersData, serverMetrics]);
@@ -340,10 +342,21 @@ const Dashboard = () => {
   const sellerMetricConfig = sellerMetricOptions.find(option => option.key === sellerMetric) || sellerMetricOptions[0];
 
   const sellerTimeSeries = useMemo(() => {
-    if (!sellerRevenueByDate.length && revenueBySeller.length) {
+    const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
+    const isHourly = isSingleDayRange && sellerRevenueByHour.length > 0;
+    const activeTrendPoints = isHourly
+      ? sellerRevenueByHour.map(point => ({
+        ...point,
+        date: formatHourKey(point.hour)
+      }))
+      : sellerRevenueByDate;
+
+    if (!activeTrendPoints.length && revenueBySeller.length) {
       const startDate = formatDateKey(dateRange.start);
       const endDate = formatDateKey(dateRange.end);
-      const chartDates = startDate === endDate ? [endDate] : [startDate, endDate];
+      const chartDates = isSingleDayRange && isHourly
+        ? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
+        : startDate === endDate ? [endDate] : [startDate, endDate];
       const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
 
       revenueBySeller.forEach(seller => {
@@ -395,13 +408,13 @@ const Dashboard = () => {
         return row;
       });
 
-      return { sellers, chartData, isFallback: true };
+      return { sellers, chartData, isFallback: true, isHourly };
     }
 
     const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
     const valuesByDate = new Map<string, Map<string, { revenue: number; orders: number }>>();
 
-    sellerRevenueByDate.forEach(point => {
+    activeTrendPoints.forEach(point => {
       const id = point.id || point.name;
       const existing = sellersById.get(id);
       sellersById.set(id, {
@@ -439,19 +452,23 @@ const Dashboard = () => {
         seriesKey: `seller_${index}`
       }));
 
-    const chartData: SellerTimeSeriesChartData[] = [...valuesByDate.entries()]
-      .sort(([dateA], [dateB]) => dateA.localeCompare(dateB))
-      .map(([date, values]) => {
+    const chartKeys = isHourly
+      ? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
+      : [...valuesByDate.keys()].sort((dateA, dateB) => dateA.localeCompare(dateB));
+
+    const chartData: SellerTimeSeriesChartData[] = chartKeys
+      .map(date => {
+        const values = valuesByDate.get(date);
         const row: SellerTimeSeriesChartData = { date };
         sellers.forEach(seller => {
-          const value = values.get(seller.id);
+          const value = values?.get(seller.id);
           row[seller.seriesKey] = value ? getSellerMetricValue(sellerMetric, value.revenue, value.orders) : 0;
         });
         return row;
       });
 
-    return { sellers, chartData, isFallback: false };
-  }, [dateRange.end, dateRange.start, ordersBySeller, revenueBySeller, sellerColorMap, sellerMetric, sellerRevenueByDate]);
+    return { sellers, chartData, isFallback: false, isHourly };
+  }, [dateRange.end, dateRange.start, ordersBySeller, revenueBySeller, sellerColorMap, sellerMetric, sellerRevenueByDate, sellerRevenueByHour]);
 
   const focusedSeller = focusedSellerId ? sellerTimeSeries.sellers.find(seller => seller.id === focusedSellerId) : null;
   const effectiveFocusedSellerId = focusedSeller?.id || null;
@@ -530,6 +547,8 @@ const Dashboard = () => {
             <p className="mt-1 text-sm font-medium text-dark-muted">
               {focusedSeller
                 ? `Foco em ${focusedSeller.name}`
+                : sellerTimeSeries.isHourly
+                  ? 'Evolução por horário no dia selecionado.'
                 : sellerTimeSeries.isFallback
                   ? sellerMetricConfig.fallbackDescription
                   : sellerMetricConfig.trendDescription}
@@ -584,7 +603,8 @@ const Dashboard = () => {
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
-                    minTickGap={18}
+                    minTickGap={sellerTimeSeries.isHourly ? 10 : 18}
+                    interval={sellerTimeSeries.isHourly ? 2 : undefined}
                     tickFormatter={formatDateTick}
                   />
                   <YAxis