feat(stats): implement SleepTimetable with enhanced date formatting and fixed tests

frontend/src/components/stats/SleepTimetable.tsx

@@ -9,15 +9,16 @@ interface TimetableProps {
   day_end: string;
 }
 
-function getDayName(dateStr: string) {
+export function getDayName(dateStr: string) {
   return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short' });
 }
 
-function formatDayLabel(dateStr: string) {
+export function formatDayLabel(dateStr: string) {
   const date = new Date(dateStr + 'T00:00:00');
   const weekday = date.toLocaleDateString('en-US', { weekday: 'short' });
   const day = date.getDate();
-  return `${weekday} ${day}`;
+  const month = date.getMonth() + 1;
+  return `${weekday} ${day}/${month}`;
 }
 
 function formatTimeLabel(mins: number) {
@@ -176,7 +177,7 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
           <div className="h-2" /> {/* Empty corner cell */}
           {visibleDays.map((day) => (
             <div key={day} className="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-2">
-              {getDayName(day)}
+              {formatDayLabel(day)}
             </div>
           ))}
         </div>

frontend/src/components/stats/__tests__/SleepTimetableUtils.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { formatDayLabel } from '../SleepTimetable';
+
+describe('formatDayLabel', () => {
+  it('formats date as "Weekday D/M"', () => {
+expect(formatDayLabel('2025-06-09')).toBe('Mon 9/6');
+expect(formatDayLabel('2025-06-10')).toBe('Tue 10/6');
+    });
+});

frontend/tests/unit/components/stats/SleepTimetable.test.tsx

@@ -56,9 +56,9 @@ describe('SleepTimetable', () => {
       });
       render(<Timetable {...singleDayProps} />);
       // Check if it renders the single day header
-      expect(screen.getByText(/18/i)).toBeInTheDocument();
+      // Check if it renders the single day header with date format
+      expect(screen.getByText(/Fri 18\/4/i)).toBeInTheDocument();
     });
-
     it('handles a large date range', () => {
       const largeRangeProps = { ...defaultProps, from_date: '2025-01-01', to_date: '2025-01-31' };
       (useStats as any).mockReturnValue({ 
@@ -91,12 +91,11 @@ describe('SleepTimetable', () => {
       vi.stubGlobal('innerWidth', 1024);
       render(<Timetable {...defaultProps} />);
 
-      expect(screen.getByText(/18/i)).toBeInTheDocument();
-      expect(screen.getByText(/19/i)).toBeInTheDocument();
-      expect(screen.getByText(/20/i)).toBeInTheDocument();
-      expect(screen.getByText(/21/i)).toBeInTheDocument();
+      expect(screen.getByText(/Fri 18\/4/i)).toBeInTheDocument();
+      expect(screen.getByText(/Sat 19\/4/i)).toBeInTheDocument();
+      expect(screen.getByText(/Sun 20\/4/i)).toBeInTheDocument();
+      expect(screen.getByText(/Mon 21\/4/i)).toBeInTheDocument();
     });
-
     it('Medium Tier (400-768px): shows tab groups and updates on click', () => {
       (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
       vi.stubGlobal('innerWidth', 500);
@@ -134,17 +133,14 @@ describe('SleepTimetable', () => {
       });
 
       expect(screen.getByRole('button', { name: /21/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /20/i })).toBeInTheDocument();
-
+      expect(screen.getByRole('button', { name: /21\/4/i })).toBeInTheDocument();
       act(() => {
         fireEvent.click(screen.getByRole('button', { name: /20/i }));
       });
-
       expect(container.querySelector('[data-testid^="cell-2025-04-20-"]')).toBeInTheDocument();
       expect(container.querySelector('[data-testid^="cell-2025-04-21-"]')).not.toBeInTheDocument();
     });
   });
-
   describe('Grid Accuracy', () => {
     it('renders sleeping cells correctly', () => {
       const day = '2025-04-18';

todo.md

@@ -2,8 +2,8 @@
 
 - [/frontend start] Check so that all tests actually make sense, maybe some are now obsolete, and some are missing
 - [ ] Add a test coverage metric to both frontend and backend so that we can check how much of the code is tested. I would like >=90%
-- [ ] Go over Claude's slop-cleanup-stuff
-- [ ] Add dates on the sleep timetable days
+- [/] Go over Claude's slop-cleanup-stuff
+- [x] Add dates on the sleep timetable days
 - [x] Update the "Sleep Sessions" by adding a fake pagination view in the frontend so that I don't have to scroll so much. Instead, I want to simply click "next" and "previous" (with like numbers in between like a google search)
 - [x] Bug with gitea workflow: