Add stats

frontend/src/components/stats/WakeupPlot.tsx

@@ -42,6 +42,21 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
     }).reverse();
   }, [wakeupBedtime, wakeup_ref]);
 
+  const stats = useMemo(() => {
+    if (!wakeupBedtime?.days) return null;
+    const validMinutes = wakeupBedtime.days
+      .map((day) => day.wakeup_minutes)
+      .filter((m): m is number => m !== null);
+
+    if (validMinutes.length === 0) return null;
+
+    const min = Math.min(...validMinutes);
+    const max = Math.max(...validMinutes);
+    const avg = validMinutes.reduce((sum, m) => sum + m, 0) / validMinutes.length;
+
+    return { min, max, avg };
+  }, [wakeupBedtime]);
+
   if (isLoading) return <div className="text-center p-4">Loading plot...</div>;
   if (!chartData.length) {
     return <div className="text-center p-4 text-gray-500">No data available for this period.</div>;
@@ -67,8 +82,8 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
              domain={['dataMin - 30', 'dataMax + 30']}
            />
            <Tooltip
-             formatter={(value: any) => [
-               formatMinutesAfter(Number(value), wakeup_ref),
+             formatter={(value: number) => [
+               formatMinutesAfter(value, wakeup_ref),
                'Wakeup',
              ]}
              labelFormatter={(label) => label}
@@ -83,7 +98,23 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
           />
         </LineChart>
       </ResponsiveContainer>
-    </div >
+      {stats && (
+        <div className="mt-4 pt-4 border-t border-gray-100 grid grid-cols-3 gap-2 text-center">
+          <div>
+            <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Earliest</p>
+            <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.min, wakeup_ref)}</p>
+          </div>
+          <div>
+            <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Latest</p>
+            <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.max, wakeup_ref)}</p>
+          </div>
+           <div>
+             <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Average</p>
+             <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.avg), wakeup_ref)}</p>
+           </div>
+        </div>
+      )}
+    </div>
   );
 };