Add hourly detail charts for single-day ranges

src/pages/ClientDetails.tsx

@@ -15,6 +15,13 @@ const CHART_DETAIL_BAR_COLOR = 'var(--chart-detail-bar)';
 const WEEKDAY_BAR_COLOR = '#25C2FF';
 const HOUR_BAR_COLOR = '#52DFA0';
 
+const formatDateKey = (date: Date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 type CustomTooltipProps = {
   active?: boolean;
   payload?: Array<{ value: number }>;
@@ -239,6 +246,7 @@ const ClientDetails = () => {
   const hasWeekdayPattern = purchaseWeekdays.some(day => day.value > 0);
   const hasHourPattern = purchaseHours.some(hour => hour.value > 0);
   const isRefreshing = isLoading && Boolean(details);
+  const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
 
   return (
     <div className="space-y-6">
@@ -323,7 +331,9 @@ const ClientDetails = () => {
       </div>
 
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
-        <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Gasto por Data</h3>
+        <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">
+          Gasto por {isSingleDayRange ? 'Horário' : 'Data'}
+        </h3>
         {chartData.length === 0 ? (
           <div className="flex h-[320px] items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
             Nenhum gasto no período selecionado.
@@ -331,7 +341,7 @@ const ClientDetails = () => {
         ) : (
           <div className="h-[320px] w-full">
             <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
+              <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: isSingleDayRange ? 24 : 80 }}>
                 <defs>
                   <linearGradient id="clientSpendGradient" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="5%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.38} />
@@ -345,10 +355,10 @@ const ClientDetails = () => {
                   fontSize={10}
                   tickLine={false}
                   axisLine={false}
-                  interval={0}
-                  angle={-45}
-                  textAnchor="end"
-                  height={80}
+                  interval={isSingleDayRange ? 2 : 0}
+                  angle={isSingleDayRange ? 0 : -45}
+                  textAnchor={isSingleDayRange ? 'middle' : 'end'}
+                  height={isSingleDayRange ? 24 : 80}
                 />
                 <YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => formatCurrency(Number(value))} />
                 <Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />