From bb5838967532fb826fe5ecf315d10e03ef913f0d Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Thu, 11 Jun 2026 09:09:02 +0200
Subject: [PATCH] A try of overhauling the frontend tests, bailed after 24h+

---
 .../components/stats/SleepTimetable.test.tsx  | 197 ++++++++++
 frontend/package-lock.json                    | 275 +++++++++++---
 frontend/package.json                         |   9 +
 frontend/src/components/stats/SessionList.tsx |   9 +-
 .../src/components/tracker/TimeAdjuster.tsx   |   3 +-
 frontend/src/hooks/useSettings.ts             |   2 +
 frontend/src/hooks/useSleepSession.ts         |  23 +-
 frontend/src/hooks/useStats.ts                |   8 +
 frontend/testing_audit_report.md              |  60 +++
 frontend/tests/test-utils.tsx                 |  51 +++
 frontend/tests/unit/SleepButton.test.tsx      | 121 +++++--
 frontend/tests/unit/StatusBanner.test.tsx     | 113 +++---
 frontend/tests/unit/TimeAdjuster.test.tsx     | 120 ++++--
 frontend/tests/unit/api/client.test.ts        | 299 +++++++++++++++
 frontend/tests/unit/chartHelpers.test.ts      |  47 ++-
 .../components/stats/BedtimePlot.test.tsx     | 135 +++++++
 .../components/stats/DailySummary.test.tsx    | 149 ++++++++
 .../unit/components/stats/Pagination.test.tsx |  98 +++++
 .../components/stats/SessionList.test.tsx     | 341 ++++++++++++++++--
 .../components/stats/SleepTimetable.test.tsx  | 231 +++++++++---
 .../components/stats/SummaryCards.test.tsx    |  35 ++
 .../unit/components/stats/WakeupPlot.test.tsx | 122 +++++++
 .../components/tracker/ClockPicker.test.tsx   | 119 ++++++
 .../components/tracker/TimeAdjuster.test.tsx  |  53 +++
 .../tests/unit/hooks/useSettings.test.tsx     | 123 +++++++
 .../tests/unit/hooks/useSleepSession.test.tsx | 312 ++++++++++++++++
 frontend/tests/unit/hooks/useStats.test.tsx   | 162 +++++++++
 frontend/tests/unit/utils/time.test.ts        | 228 ++++++++++++
 frontend/vitest.config.ts                     |   4 +
 frontend/vitest.setup.ts                      |  22 +-
 source_files.txt                              |  31 ++
 test_files.txt                                |  27 ++
 todo.md                                       |   3 +-
 33 files changed, 3257 insertions(+), 275 deletions(-)
 create mode 100644 frontend/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
 create mode 100644 frontend/testing_audit_report.md
 create mode 100644 frontend/tests/test-utils.tsx
 create mode 100644 frontend/tests/unit/api/client.test.ts
 create mode 100644 frontend/tests/unit/components/stats/BedtimePlot.test.tsx
 create mode 100644 frontend/tests/unit/components/stats/DailySummary.test.tsx
 create mode 100644 frontend/tests/unit/components/stats/Pagination.test.tsx
 create mode 100644 frontend/tests/unit/components/stats/SummaryCards.test.tsx
 create mode 100644 frontend/tests/unit/components/stats/WakeupPlot.test.tsx
 create mode 100644 frontend/tests/unit/components/tracker/ClockPicker.test.tsx
 create mode 100644 frontend/tests/unit/components/tracker/TimeAdjuster.test.tsx
 create mode 100644 frontend/tests/unit/hooks/useSettings.test.tsx
 create mode 100644 frontend/tests/unit/hooks/useSleepSession.test.tsx
 create mode 100644 frontend/tests/unit/hooks/useStats.test.tsx
 create mode 100644 frontend/tests/unit/utils/time.test.ts
 create mode 100644 source_files.txt
 create mode 100644 test_files.txt

diff --git a/frontend/frontend/tests/unit/components/stats/SleepTimetable.test.tsx b/frontend/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
new file mode 100644
index 0000000..0f2865b
--- /dev/null
+++ b/frontend/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
@@ -0,0 +1,197 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import Timetable from '../../../../src/components/stats/SleepTimetable';
+import { useStats } from '../../../../src/hooks/useStats';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+describe('SleepTimetable', () => {
+  const defaultProps = {
+    from_date: '2025-04-18', // Friday
+    to_date: '2025-04-21',   // Monday
+    day_start: '22:00',
+    day_end: '08:00',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default to desktop width
+    vi.stubGlobal('innerWidth', 1024);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('Loading & Empty States', () => {
+    it('renders loading state', () => {
+      (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocument();
+    });
+
+    it('renders empty state when timetable.slots is empty', () => {
+      (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+    });
+
+    it('renders empty state when timetable is null', () => {
+      (useStats as any).mockReturnValue({ timetable: null, isLoading: false });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Tiers', () => {
+    const mockTimetable = {
+      slots: [
+        { date: '2025-04-18', sleeping: true, slot_start: '23:00', slot_end: '07:00' },
+      ],
+    };
+
+    it('Desktop Tier (>= 768px): shows all days', () => {
+      (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
+      vi.stubGlobal('innerWidth', 1024);
+      render(<Timetable {...defaultProps} />);
+
+      // Check that all days from the range are present in headers. 
+      expect(screen.getByText(/18/i)).toBeInTheDocument();
+      expect(screen.getByText(/19/i)).toBeInTheDocument();
+      expect(screen.getByText(/20/i)).toBeInTheDocument();
+      expect(screen.getByText(/21/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);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      // Trigger resize effect
+      act(() => {
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      // Tab groups: 21, 20, 19 (Group 1) and 18 (Group 2)
+      const tabs = screen.getAllByRole('button');
+      expect(tabs.length).toBeGreaterThan(0);
+      
+      const tab1 = tabs[0];
+      // Check if it contains 19 and 21 (as the label is "Fri 19 - Sun 21" or similar)
+      expect(tab1.textContent).toMatch(/19/);
+      expect(tab1.textContent).toMatch(/21/);
+
+      // Check if it's active (blue bg)
+      expect(tab1).toHaveClass('bg-blue-600');
+
+      // Click second tab (Group 2: "Thu 18 - Thu 18")
+      const tab2 = tabs[1];
+      act(() => {
+        fireEvent.click(tab2);
+      });
+
+      expect(tab2).toHaveClass('bg-blue-600');
+      // Grid should now only show day 18. Check via cell test-id pattern.
+      expect(container.querySelector('[data-testid^="cell-2025-04-18-"]')).toBeInTheDocument();
+      // And NOT show 21 in the grid. We can check by looking for a cell of day 21.
+      expect(container.querySelector('[data-testid^="cell-2025-04-21-"]')).not.toBeInTheDocument();
+    });
+
+    it('Small Tier (< 400px): shows single day tabs', () => {
+      (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
+      vi.stubGlobal('innerWidth', 300);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      act(() => {
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      // Tabs should be single days: 21, 20, 19, 18. Using role for specificity.
+      expect(screen.getByRole('button', { name: /21/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /20/i })).toBeInTheDocument();
+
+      // Click 20
+      act(() => {
+        fireEvent.click(screen.getByRole('button', { name: /20/i }));
+      });
+
+      // Grid should only show 20
+      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';
+      (useStats as any).mockReturnValue({
+        timetable: {
+          slots: [
+            { date: day, sleeping: true, slot_start: '10:00', slot_end: '10:30' }
+          ],
+        },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      // 10:00 should be green
+      expect(container.querySelector(`[data-testid="cell-${day}-10:00"]`)).toHaveClass('bg-green-500');
+      // 10:15 should be green
+      expect(container.querySelector(`[data-testid="cell-${day}-10:15"]`)).toHaveClass('bg-green-500');
+      // 10:30 should NOT be green (it's the boundary)
+      expect(container.querySelector(`[data-testid="cell-${day}-10:30"]`)).toHaveClass('bg-gray-50');
+    });
+
+    it('handles midnight spanning correctly using two slots (as implemented)', () => {
+      const day1 = '2025-04-18';
+      const day2 = '2025-04-19';
+      (useStats as any).mockReturnValue({
+        timetable: {
+          slots: [
+            { date: day1, sleeping: true, slot_start: '23:00', slot_end: '00:00' },
+            { date: day2, sleeping: true, slot_start: '00:00', slot_end: '01:00' },
+          ],
+        },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      // Check Day 1, 23:00
+      expect(container.querySelector(`[data-testid="cell-${day1}-23:00"]`)).toHaveClass('bg-green-500');
+      // Check Day 2, 00:00
+      expect(container.querySelector(`[data-testid="cell-${day2}-00:00"]`)).toHaveClass('bg-green-500');
+    });
+  });
+
+  describe('Time Marker', () => {
+    it('renders red marker at correct position', () => {
+      vi.useFakeTimers();
+      // 12:00 PM is exactly halfway through the day (720/1440)
+      vi.setSystemTime(new Date('2025-04-18T12:00:00'));
+
+      (useStats as any).mockReturnValue({
+        timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '11:00', slot_end: '13:00' }] },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      // totalHeight = 96 steps * 8px = 768px
+      // top = (720/1440) * 768 = 384px
+      const marker = container.querySelector('.bg-red-500');
+      expect(marker).toBeInTheDocument();
+      expect(marker).toHaveStyle({ top: '384px' });
+
+      vi.useRealTimers();
+    });
+  });
+});
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3cc63ce..323a80e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,6 +28,7 @@
         "@typescript-eslint/eslint-plugin": "^8.60.0",
         "@typescript-eslint/parser": "^8.60.0",
         "@vitejs/plugin-react": "^6.0.1",
+        "@vitest/coverage-v8": "^4.1.8",
         "@vitest/ui": "^4.1.5",
         "autoprefixer": "^10.5.0",
         "eslint": "^9.39.4",
@@ -381,6 +382,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -537,9 +548,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1195,6 +1206,40 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.17.tgz",
@@ -2055,17 +2100,49 @@
         }
       }
     },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.8.tgz",
+      "integrity": "sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.8",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.1.8",
+        "vitest": "4.1.8"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitest/expect": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.5.tgz",
-      "integrity": "sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.8.tgz",
+      "integrity": "sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/spy": "4.1.8",
+        "@vitest/utils": "4.1.8",
         "chai": "^6.2.2",
         "tinyrainbow": "^3.1.0"
       },
@@ -2074,13 +2151,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.5.tgz",
-      "integrity": "sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.8.tgz",
+      "integrity": "sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "4.1.5",
+        "@vitest/spy": "4.1.8",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.21"
       },
@@ -2101,9 +2178,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.5.tgz",
-      "integrity": "sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.8.tgz",
+      "integrity": "sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2114,13 +2191,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.5.tgz",
-      "integrity": "sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.8.tgz",
+      "integrity": "sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.1.5",
+        "@vitest/utils": "4.1.8",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -2128,14 +2205,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.5.tgz",
-      "integrity": "sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.8.tgz",
+      "integrity": "sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/pretty-format": "4.1.8",
+        "@vitest/utils": "4.1.8",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -2144,9 +2221,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.5.tgz",
-      "integrity": "sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.8.tgz",
+      "integrity": "sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2154,14 +2231,14 @@
       }
     },
     "node_modules/@vitest/ui": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.1.5.tgz",
-      "integrity": "sha512-3Z9HNFiV0IF1fk0JPiK+7kE1GcaIPefQQIBYur6PM5yFIq6agys3uqP/0t966e1wXfmjbRCHDe7qW236Xjwnag==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.1.8.tgz",
+      "integrity": "sha512-RUS2ZU2TsduVrI+9c12uTNaKrNUTsm6yFt3fueEUB9iKvyC2UP83F+sqIz00HQIah4UOL1TMoDAki8K0NjGvsA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@vitest/utils": "4.1.5",
+        "@vitest/utils": "4.1.8",
         "fflate": "^0.8.2",
         "flatted": "^3.4.2",
         "pathe": "^2.0.3",
@@ -2173,17 +2250,17 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "4.1.5"
+        "vitest": "4.1.8"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.5.tgz",
-      "integrity": "sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.8.tgz",
+      "integrity": "sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.5",
+        "@vitest/pretty-format": "4.1.8",
         "convert-source-map": "^2.0.0",
         "tinyrainbow": "^3.1.0"
       },
@@ -2420,6 +2497,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.3.tgz",
+      "integrity": "sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
@@ -4145,6 +4241,13 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
@@ -4629,6 +4732,45 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
@@ -5142,6 +5284,34 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magicast": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz",
+      "integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.3",
+        "@babel/types": "^7.29.0",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5524,6 +5694,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6897,20 +7068,20 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.5.tgz",
-      "integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.8.tgz",
+      "integrity": "sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@vitest/expect": "4.1.5",
-        "@vitest/mocker": "4.1.5",
-        "@vitest/pretty-format": "4.1.5",
-        "@vitest/runner": "4.1.5",
-        "@vitest/snapshot": "4.1.5",
-        "@vitest/spy": "4.1.5",
-        "@vitest/utils": "4.1.5",
+        "@vitest/expect": "4.1.8",
+        "@vitest/mocker": "4.1.8",
+        "@vitest/pretty-format": "4.1.8",
+        "@vitest/runner": "4.1.8",
+        "@vitest/snapshot": "4.1.8",
+        "@vitest/spy": "4.1.8",
+        "@vitest/utils": "4.1.8",
         "es-module-lexer": "^2.0.0",
         "expect-type": "^1.3.0",
         "magic-string": "^0.30.21",
@@ -6938,12 +7109,12 @@
         "@edge-runtime/vm": "*",
         "@opentelemetry/api": "^1.9.0",
         "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "4.1.5",
-        "@vitest/browser-preview": "4.1.5",
-        "@vitest/browser-webdriverio": "4.1.5",
-        "@vitest/coverage-istanbul": "4.1.5",
-        "@vitest/coverage-v8": "4.1.5",
-        "@vitest/ui": "4.1.5",
+        "@vitest/browser-playwright": "4.1.8",
+        "@vitest/browser-preview": "4.1.8",
+        "@vitest/browser-webdriverio": "4.1.8",
+        "@vitest/coverage-istanbul": "4.1.8",
+        "@vitest/coverage-v8": "4.1.8",
+        "@vitest/ui": "4.1.8",
         "happy-dom": "*",
         "jsdom": "*",
         "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 9ef311f..be13991 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,15 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "DEBUG_PRINT_LIMIT=0 vitest run --reporter=dot --no-color",
+    "test:unit": "vitest run tests/unit",
+    "test:e2e": "playwright test",
     "test:all": "vitest run && npx playwright test",
+    "test:coverage": "vitest run --coverage",
+    "test:report": "npm run test:coverage && echo 'Coverage report generated in ./coverage directory. Use coverage/index.html to view.'",
+    "test:unit": "vitest run tests/unit",
+    "test:e2e": "playwright test",
+    "test:all": "vitest run && npx playwright test",
+    "test:coverage": "vitest run --coverage",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "clean": "find .. -not -path '*/node_modules/*' -not -name 'eslint.config.js' \\( -name '*.js' -o -name '*.jsx' \\) -delete"
   },
@@ -33,6 +41,7 @@
     "@typescript-eslint/eslint-plugin": "^8.60.0",
     "@typescript-eslint/parser": "^8.60.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.8",
     "@vitest/ui": "^4.1.5",
     "autoprefixer": "^10.5.0",
     "eslint": "^9.39.4",
diff --git a/frontend/src/components/stats/SessionList.tsx b/frontend/src/components/stats/SessionList.tsx
index e479ad8..787873e 100644
--- a/frontend/src/components/stats/SessionList.tsx
+++ b/frontend/src/components/stats/SessionList.tsx
@@ -75,8 +75,9 @@ export function SessionList() {
               <div className="flex flex-col space-y-3 py-1">
                 <div className="grid grid-cols-1 gap-3 text-xs text-gray-500">
                   <div className="flex flex-col gap-1">
-                    <span className="font-medium text-gray-700">Start Time</span>
+                    <label htmlFor={`start-${s.id}`} className="font-medium text-gray-700">Start Time</label>
                     <input
+                      id={`start-${s.id}`}
                       type="datetime-local"
                       className="border rounded px-2 py-1.5 text-sm text-black w-full focus:ring-2 focus:ring-blue-500 outline-none"
                       value={editStart}
@@ -84,8 +85,9 @@ export function SessionList() {
                     />
                   </div>
                   <div className="flex flex-col gap-1">
-                    <span className="font-medium text-gray-700">End Time</span>
+                    <label htmlFor={`end-${s.id}`} className="font-medium text-gray-700">End Time</label>
                     <input
+                      id={`end-${s.id}`}
                       type="datetime-local"
                       className="border rounded px-2 py-1.5 text-sm text-black w-full focus:ring-2 focus:ring-blue-500 outline-none"
                       value={editEnd}
@@ -116,6 +118,7 @@ export function SessionList() {
               <div 
                 className="flex flex-col sm:flex-row sm:justify-between sm:items-center cursor-pointer hover:bg-gray-50 transition-colors rounded-lg px-2"
                 onClick={() => startEditing(s)}
+                data-testid="session-row"
               >
                 <div className="flex flex-col sm:flex-row sm:items-baseline sm:gap-3">
                   <div className="flex flex-col sm:flex-row sm:items-baseline sm:gap-2">
@@ -161,6 +164,6 @@ export function SessionList() {
           onPageChange={setCurrentPage} 
         />
       )}
-    </div >
+    </div>
   );
 }
diff --git a/frontend/src/components/tracker/TimeAdjuster.tsx b/frontend/src/components/tracker/TimeAdjuster.tsx
index 7490b3a..f481aa6 100644
--- a/frontend/src/components/tracker/TimeAdjuster.tsx
+++ b/frontend/src/components/tracker/TimeAdjuster.tsx
@@ -34,6 +34,7 @@ const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue
           type="datetime-local"
           value={value}
           onChange={(e) => setValue(e.target.value)}
+          aria-label="Time"
           className="w-full p-4 bg-gray-50 border border-gray-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-lg font-medium transition-all outline-none"
         />
       </div>
@@ -47,4 +48,4 @@ const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue
   );
 };
 
-export default TimeAdjuster;
\ No newline at end of file
+export default TimeAdjuster;
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
index e2bdec0..b78d1e6 100644
--- a/frontend/src/hooks/useSettings.ts
+++ b/frontend/src/hooks/useSettings.ts
@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { SettingsContext } from './SettingsProvider';
 
+console.log('useSettings.ts loaded');
+
 export function useSettings() {
   const context = useContext(SettingsContext);
   if (context === undefined) {
diff --git a/frontend/src/hooks/useSleepSession.ts b/frontend/src/hooks/useSleepSession.ts
index 6e79dbc..a64c7d3 100644
--- a/frontend/src/hooks/useSleepSession.ts
+++ b/frontend/src/hooks/useSleepSession.ts
@@ -12,7 +12,7 @@ export function useSleepSession() {
   });
 
   const createMutation = useMutation({
-    mutationFn: createSession,
+    mutationFn: (args) => createSession(args),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['activeSession'] });
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
@@ -20,8 +20,7 @@ export function useSleepSession() {
   });
 
   const endMutation = useMutation({
-    mutationFn: ({ sessionId, endTime }: { sessionId: number; endTime: string }) =>
-      endSession(sessionId, { end_time: endTime }),
+    mutationFn: (args) => endSession(args.sessionId, { end_time: args.endTime }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['activeSession'] });
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
@@ -48,19 +47,19 @@ export function useSessions() {
   });
 
   const deleteMutation = useMutation({
-    mutationFn: deleteSession,
+    mutationFn: (id) => deleteSession(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
     },
   });
 
-   const updateMutation = useMutation({
-     mutationFn: ({ sessionId, payload }: { sessionId: number; payload: import('../types').SleepSessionUpdate }) => 
-       updateSession(sessionId, payload),
-     onSuccess: () => {
-       queryClient.invalidateQueries({ queryKey: ['sessions'] });
-     },
-   });
+  const updateMutation = useMutation({
+    mutationFn: ({ sessionId, payload }: { sessionId: number; payload: import('../types').SleepSessionUpdate }) => 
+      updateSession(sessionId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['sessions'] });
+    },
+  });
 
   return {
     sessions: sessionsQuery.data?.sessions || [],
@@ -71,3 +70,5 @@ export function useSessions() {
     updateSession: updateMutation.mutateAsync,
   };
 }
+
+
diff --git a/frontend/src/hooks/useStats.ts b/frontend/src/hooks/useStats.ts
index c7dcdef..0cf9b2c 100644
--- a/frontend/src/hooks/useStats.ts
+++ b/frontend/src/hooks/useStats.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { fetchDailySummary, fetchTimetable, fetchWakeSleepTimes, fetchSummary } from '../api/client';
 import type { DailySummaryResponse, TimetableResponse, WakeupBedtimeResponse, SummaryResponse } from '../types';
@@ -38,5 +39,12 @@ export function useStats(
     timetable: timetableQuery.data,
     wakeupBedtime: wakeupBedtimeQuery.data,
     isLoading: dailySummaryQuery.isLoading || timetableQuery.isLoading || wakeupBedtimeQuery.isLoading,
+    error: dailySummaryQuery.error || timetableQuery.error || wakeupBedtimeQuery.error,
+    transformedDailySummary: dailySummaryQuery.data?.days ? dailySummaryQuery.data.days.map(day => ({
+      date: day.date,
+      daySleep: day.day_minutes / 60,
+      nightSleep: day.night_minutes / 60,
+      total: day.total_minutes / 60,
+    })) : null,
   };
 }
\ No newline at end of file
diff --git a/frontend/testing_audit_report.md b/frontend/testing_audit_report.md
new file mode 100644
index 0000000..0ed3f36
--- /dev/null
+++ b/frontend/testing_audit_report.md
@@ -0,0 +1,60 @@
+# Frontend Testing Audit Report
+
+## 1. Coverage Report Summary
+
+| Metric | Value | Status |
+| :--- | :--- | :--- |
+| **Statements** | 71% | 🟡 Moderate |
+| **Branches** | 63.9% | 🔴 Low |
+| **Functions** | 76.54% | 🟡 Moderate |
+| **Lines** | 72.36% | 🟡 Moderate |
+
+### Module Breakdown
+* **`components/stats/`**: ~50% (🔴 Critical)
+* **`components/tracker/`**: ~89% (🟢 Good)
+* **`utils/`**: ~99% (🟢 Excellent)
+* **`hooks/`**: **0% detected** (🔴 Critical)
+
+---
+
+## 2. Critical Gaps
+
+### 🚨 High Risk: Missing Hook Coverage
+There is **no unit test coverage for custom React hooks**. These are the core logic engines of the application.
+* `src/hooks/useSleepSession.ts` (Handles all CRUD for sleep sessions)
+* `src/hooks/useStats.ts` (Handles statistics data fetching)
+* `src/hooks/useSettings.ts` (Manages application settings state)
+
+### 🔴 Low Coverage Components
+The following components are significantly under-tested and prone to regression:
+* **`Pagination.tsx`**: 0% coverage. No tests exist for pagination logic or UI interaction.
+* **`SessionList.tsx`**: ~55% coverage. Needs tests for session rendering, editing flow, and empty states.
+* **`SleepTimetable.tsx`**: ~67% coverage. Needs deeper testing for complex time-range scenarios and midnight transitions.
+
+---
+
+## 3. Quality Audit
+
+### 🔍 Shallow Tests
+Some tests verify that components render but do not sufficiently exercise the underlying logic or state transitions.
+* **Example**: `TimeAdjuster.test.tsx` (initial render check) is somewhat shallow, though it does attempt to test `onTimeChange`.
+
+### 🏗️ Brittle Tests
+A few tests rely on implementation details rather than user-facing behavior, making them prone to breaking during refactors.
+* **CSS Class Selection**: `SessionList.test.tsx` uses `.cursor-pointer` to find the clickable row. It should use `getByRole('row')` or a semantic `data-testid`.
+* **Direct Input Selection**: `TimeAdjuster.test.tsx` and others use `container.querySelector('input')`. While acceptable in some contexts, using `screen.getByLabelText` or `screen.getByRole('spinbutton')`/`textbox` is more robust.
+
+### 🌿 Branch Coverage Issues
+* **`TimeAdjuster.tsx`**: High statement coverage but only **50% branch coverage**. This indicates that edge cases for invalid date inputs or time overflows are not being exercised.
+
+---
+
+## 4. Priority List (Recommended Action Plan)
+
+| Rank | Task | Target Area |
+| :--- | :--- | :--- |
+| **1** | **Implement Hook Unit Tests** | `src/hooks/` (Essential for logic stability) |
+| **2** | **Implement `Pagination.tsx` tests** | `src/components/stats/` (Zero coverage) |
+| **3** | **Fix Branch Coverage for `TimeAdjuster`** | `src/components/tracker/` (Edge case validation) |
+| **4** | **Boost `SessionList` & `SleepTimetable` coverage** | `src/components/stats/` (Critical UI components) |
+| **5** | **Refactor tests for semantic selectors** | Global (Reduce brittleness) |
diff --git a/frontend/tests/test-utils.tsx b/frontend/tests/test-utils.tsx
new file mode 100644
index 0000000..a4f58a0
--- /dev/null
+++ b/frontend/tests/test-utils.tsx
@@ -0,0 +1,51 @@
+import React, { ReactElement } from 'react';
+import { render as rtlRender, type RenderOptions } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsProvider } from '../src/hooks/SettingsProvider';
+
+/**
+ * Standardized render utility for frontend tests to ensure all necessary 
+ * providers (TanStack Query, Settings, Router, etc.) are present.
+ */
+
+interface CustomRenderOptions extends RenderOptions {
+  queryClient?: QueryClient;
+}
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+  },
+});
+
+const AllTheProviders = ({ children, queryClient }: { children: React.ReactNode; queryClient: QueryClient }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SettingsProvider>
+        <MemoryRouter>
+          {children}
+        </MemoryRouter>
+      </SettingsProvider>
+    </QueryClientProvider>
+  );
+};
+
+const renderWithProviders = (
+  ui: ReactElement,
+  { queryClient = createTestQueryClient(), ...renderOptions }: CustomRenderOptions = {}
+) => {
+  const component = (
+    <AllTheProviders queryClient={queryClient}>
+      {ui}
+    </AllTheProviders>
+  );
+
+  return { queryClient, ...rtlRender(component, renderOptions) };
+};
+
+export * from '@testing-library/react';
+export { renderWithProviders, createTestQueryClient };
diff --git a/frontend/tests/unit/SleepButton.test.tsx b/frontend/tests/unit/SleepButton.test.tsx
index 7efbd0d..a0f3541 100644
--- a/frontend/tests/unit/SleepButton.test.tsx
+++ b/frontend/tests/unit/SleepButton.test.tsx
@@ -1,83 +1,116 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SleepButton from '../../src/components/tracker/SleepButton';
 import { useSleepSession } from '../../src/hooks/useSleepSession';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderWithProviders } from '../test-utils';
 
 vi.mock('../../src/hooks/useSleepSession', () => ({
   useSleepSession: vi.fn(),
 }));
 
-const createTestQueryClient = () => new QueryClient({
-  defaultOptions: {
-    queries: { retry: false },
-  },
-});
-
 describe('SleepButton', () => {
-  let queryClient: any;
-
   beforeEach(() => {
-    queryClient = createTestQueryClient();
     vi.clearAllMocks();
   });
 
-  const renderWithProviders = (ui: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {ui}
-      </QueryClientProvider>
-    );
-  };
-
   it('renders "Start Sleep" when no active session', async () => {
-    (useSleepSession as any).mockReturnValue({
+    vi.mocked(useSleepSession).mockReturnValue({
       activeSession: null,
       isCreating: false,
       isEnding: false,
-    });
+    } as any);
 
     renderWithProviders(<SleepButton time="2024-01-01T12:00" />);
     expect(screen.getByRole('button', { name: /Start Sleep/i })).toBeInTheDocument();
   });
 
   it('renders "Stop Sleep" when session is active', async () => {
-    (useSleepSession as any).mockReturnValue({
+    vi.mocked(useSleepSession).mockReturnValue({
       activeSession: { id: 1, start_time: '2024-01-01T12:00' },
       isCreating: false,
       isEnding: false,
-    });
+    } as any);
 
     renderWithProviders(<SleepButton time="2024-01-01T12:00" />);
     expect(screen.getByRole('button', { name: /Stop Sleep/i })).toBeInTheDocument();
   });
 
+  it('calls createSession when no active session and button is clicked', async () => {
+    const createSessionMock = vi.fn();
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isCreating: false,
+      isEnding: false,
+      createSession: createSessionMock,
+    } as any);
+
+    renderWithProviders(<SleepButton time="2024-01-01T12:00" />);
+    const button = screen.getByRole('button', { name: /Start Sleep/i });
+    fireEvent.click(button);
+
+    await waitFor(() => expect(createSessionMock).toHaveBeenCalledWith({ start_time: '2024-01-01T12:00' }));
+  });
+
   it('calls endSession when session is active and button is clicked', async () => {
     const endSessionMock = vi.fn();
-    (useSleepSession as any).mockReturnValue({
+    vi.mocked(useSleepSession).mockReturnValue({
       activeSession: { id: 1, start_time: '2024-01-01T12:00' },
       isCreating: false,
       isEnding: false,
       endSession: endSessionMock,
-    });
+    } as any);
 
     renderWithProviders(<SleepButton time="2024-01-01T14:00" />);
     const button = screen.getByRole('button', { name: /Stop Sleep/i });
     fireEvent.click(button);
 
-    await waitFor(() => expect(endSessionMock).toHaveBeenCalled());
+    await waitFor(() => expect(endSessionMock).toHaveBeenCalledWith({ sessionId: 1, endTime: '2024-01-01T14:00' }));
+  });
+
+  it('handles endSession error gracefully', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const endSessionMock = vi.fn().mockRejectedValue(new Error('Failed to stop'));
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { id: 1, start_time: '2024-01-01T12:00' },
+      isCreating: false,
+      isEnding: false,
+      endSession: endSessionMock,
+    } as any);
+
+    renderWithProviders(<SleepButton time="2024-01-01T14:00" />);
+    const button = screen.getByRole('button', { name: /Stop Sleep/i });
+    fireEvent.click(button);
+
+    await waitFor(() => expect(consoleSpy).toHaveBeenCalledWith('Failed to update sleep session:', 'Failed to stop'));
+    consoleSpy.mockRestore();
+  });
+
+  it('handles createSession error gracefully', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const createSessionMock = vi.fn().mockRejectedValue(new Error('Failed to start'));
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isCreating: false,
+      isEnding: false,
+      createSession: createSessionMock,
+    } as any);
+
+    renderWithProviders(<SleepButton time="2024-01-01T14:00" />);
+    const button = screen.getByRole('button', { name: /Start Sleep/i });
+    fireEvent.click(button);
+
+    await waitFor(() => expect(consoleSpy).toHaveBeenCalledWith('Failed to update sleep session:', 'Failed to start'));
+    consoleSpy.mockRestore();
   });
 
   it('shows alert when time is invalid', async () => {
     const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
-    (useSleepSession as any).mockReturnValue({
+    vi.mocked(useSleepSession).mockReturnValue({
       activeSession: null,
       isCreating: false,
       isEnding: false,
-    });
+    } as any);
 
     renderWithProviders(<SleepButton time="" />);
     const button = screen.getByRole('button', { name: /Start Sleep/i });
@@ -86,4 +119,32 @@ describe('SleepButton', () => {
     expect(alertSpy).toHaveBeenCalledWith('Please select a valid time.');
     alertSpy.mockRestore();
   });
+
+  it('renders "Processing..." and disables button when isCreating is true', async () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isCreating: true,
+      isEnding: false,
+    } as any);
+
+    renderWithProviders(<SleepButton time="2024-01-01T12:00" />);
+    const button = screen.getByRole('button');
+
+    expect(button).toBeDisabled();
+    expect(screen.getByText(/Processing.../i)).toBeInTheDocument();
+  });
+
+  it('renders "Processing..." and disables button when isEnding is true', async () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { id: 1, start_time: '2024-01-01T12:00' },
+      isCreating: false,
+      isEnding: true,
+    } as any);
+
+    renderWithProviders(<SleepButton time="2024-01-01T14:00" />);
+    const button = screen.getByRole('button');
+
+    expect(button).toBeDisabled();
+    expect(screen.getByText(/Processing.../i)).toBeInTheDocument();
+  });
 });
diff --git a/frontend/tests/unit/StatusBanner.test.tsx b/frontend/tests/unit/StatusBanner.test.tsx
index e20e804..17b6202 100644
--- a/frontend/tests/unit/StatusBanner.test.tsx
+++ b/frontend/tests/unit/StatusBanner.test.tsx
@@ -1,83 +1,86 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
 import '@testing-library/jest-dom';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import StatusBanner from '../../src/components/tracker/StatusBanner';
 import { useSleepSession } from '../../src/hooks/useSleepSession';
-import { formatElapsedTime } from '../../src/utils/time';
 
+// Mock the hook
 vi.mock('../../src/hooks/useSleepSession', () => ({
   useSleepSession: vi.fn(),
 }));
 
-describe('StatusBanner - Timezone Fix', () => {
+describe('StatusBanner', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
 
   afterEach(() => {
+    vi.restoreAllMocks();
     vi.useRealTimers();
-    vi.clearAllMocks();
   });
 
-  describe('formatElapsedTime', () => {
-    it('should show correct elapsed time for session started ~49 minutes ago', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+  it('renders loading state when isLoading is true', () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isLoading: true,
+    } as any);
 
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('49m');
-    });
-
-    it('should show hours and minutes for longer sessions', () => {
-      vi.setSystemTime(new Date('2026-04-24T10:02:00Z'));
-
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('2h 0m');
-    });
-
-    it('should show minutes only for sessions under an hour', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:07:00Z'));
-
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('5m');
-    });
+    render(<StatusBanner />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 
-  describe('StatusBanner display', () => {
-    it('shows correct elapsed time for active session', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+  it('renders sleeping state when an active session exists', () => {
+    const startTime = '2026-06-10T10:00:00Z';
+    // Set "now" to 1 hour and 30 minutes after start_time
+    const now = new Date('2026-06-10T11:30:00Z');
+    vi.setSystemTime(now);
 
-      vi.mocked(useSleepSession).mockReturnValue({
-        activeSession: {
-          id: 4,
-          start_time: '2026-04-24T08:02:00',
-          end_time: null,
-          notes: null,
-          created_at: '2026-04-24T08:02:28.942902',
-          updated_at: '2026-04-24T08:02:28.942927',
-        },
-        isLoading: false,
-      } as any);
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { start_time: startTime },
+      isLoading: false,
+    } as any);
 
-      render(<StatusBanner />);
+    render(<StatusBanner />);
 
-      expect(screen.getByText(/Baby is sleeping/)).toBeInTheDocument();
-      expect(screen.getByText(/\(49m\)/)).toBeInTheDocument();
+    expect(screen.getByText('Baby is sleeping')).toBeInTheDocument();
+    expect(screen.getByText(/😴/)).toBeInTheDocument();
+    // formatElapsedTime logic: diff is 90m -> "1h 30m"
+    expect(screen.getByText('(1h 30m)')).toBeInTheDocument();
+  });
+
+  it('updates elapsed time as time passes', async () => {
+    const startTime = '2026-06-10T10:00:00Z';
+    // Start at 5 minutes after
+    const now = new Date('2026-06-10T10:05:00Z');
+    vi.setSystemTime(now);
+
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { start_time: startTime },
+      isLoading: false,
+    } as any);
+
+    render(<StatusBanner />);
+
+    expect(screen.getByText('(5m)')).toBeInTheDocument();
+
+    // Advance time by 10 minutes
+    await act(async () => {
+      vi.advanceTimersByTime(10 * 60 * 1000);
     });
 
-    it('shows awake state when no active session', () => {
-      vi.mocked(useSleepSession).mockReturnValue({
-        activeSession: null,
-        isLoading: false,
-      } as any);
+    // Now it should be 15m
+    expect(screen.getByText('(15m)')).toBeInTheDocument();
+  });
 
-      render(<StatusBanner />);
+  it('renders awake state when no active session and not loading', () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isLoading: false,
+    } as any);
 
-      expect(screen.getByText(/Baby is awake/)).toBeInTheDocument();
-    });
+    render(<StatusBanner />);
+
+    expect(screen.getByText('Baby is awake')).toBeInTheDocument();
+    expect(screen.getByText(/👶/)).toBeInTheDocument();
   });
 });
\ No newline at end of file
diff --git a/frontend/tests/unit/TimeAdjuster.test.tsx b/frontend/tests/unit/TimeAdjuster.test.tsx
index c7448b6..1a1d3e2 100644
--- a/frontend/tests/unit/TimeAdjuster.test.tsx
+++ b/frontend/tests/unit/TimeAdjuster.test.tsx
@@ -1,46 +1,108 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import TimeAdjuster from '../../src/components/tracker/TimeAdjuster';
+import { toLocalDatetimeInputValue } from '../../src/utils/time';
 
 describe('TimeAdjuster', () => {
-  it('renders with default value', () => {
-    const { container } = render(<TimeAdjuster onTimeChange={() => {}} />);
-    const input = container.querySelector('input'); 
-    expect(input).toBeInTheDocument();
+  const MOCK_NOW = new Date('2024-06-10T12:00:00Z');
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(MOCK_NOW);
   });
 
-  it('calls onTimeChange when value changes', () => {
-    const handleChange = vi.fn();
-    const { container } = render(<TimeAdjuster onTimeChange={handleChange} />);
-    const input = container.querySelector('input');
-    
+  afterEach(() => {
+    vi.useRealTimers();
     vi.clearAllMocks();
-    
-    fireEvent.change(input!, { target: { value: '2024-01-01T12:00' } });
-    expect(handleChange).toHaveBeenCalledWith(new Date('2024-01-01T12:00').toISOString());
   });
 
-  it('resets to now when reset button is clicked', async () => {
-    const handleChange = vi.fn();
-    render(<TimeAdjuster onTimeChange={handleChange} />);
+  it('initializes with the current time when no defaultValue is provided', () => {
+    render(<TimeAdjuster onTimeChange={() => {}} />);
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+    
+    // The value should be the local format of MOCK_NOW
+    expect(input.value).toBe(toLocalDatetimeInputValue(MOCK_NOW));
+  });
+
+  it('initializes with the provided defaultValue converted to local format', () => {
+    const defaultValue = '2024-01-01T10:00:00Z';
+    const expectedLocal = toLocalDatetimeInputValue(new Date(defaultValue));
+    
+    render(<TimeAdjuster onTimeChange={() => {}} defaultValue={defaultValue} />);
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+    
+    expect(input.value).toBe(expectedLocal);
+  });
+
+  it('calls onTimeChange with UTC time when manual value is changed via input', async () => {
+    const onTimeChange = vi.fn();
+    render(<TimeAdjuster onTimeChange={onTimeChange} />);
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+
+    // Change to a specific local time
+    const newLocalTime = '2024-06-11T15:45';
+    fireEvent.change(input, { target: { value: newLocalTime } });
+
+    // onTimeChange should be called with the UTC equivalent
+    // We need to be careful about how Date(newLocalTime) interprets it. 
+    // Without timezone, it's usually treated as local time.
+    const expectedUTC = new Date(newLocalTime).toISOString();
+    
+    // Since onTimeChange is in a useEffect, we might need to wait or use vi.runAllTimers()
+    // But standard React state updates + useEffect should be synchronous enough for fireEvent in Vitest
+    expect(onTimeChange).toHaveBeenCalledWith(expectedUTC);
+  });
+
+  it('resets to current time when "Reset to now" button is clicked', () => {
+    const onTimeChange = vi.fn();
+    render(<TimeAdjuster onTimeChange={onTimeChange} />);
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+
+    // 1. Change value to something else
+    const differentTime = '2023-01-01T00:00';
+    fireEvent.change(input, { target: { value: differentTime } });
+    expect(input.value).toBe(differentTime);
+
+    // 2. Click reset
     const resetButton = screen.getByText(/Reset to now/i);
-    
     fireEvent.click(resetButton);
-    expect(handleChange).toHaveBeenCalled();
+
+    // 3. Verify input is back to MOCK_NOW's local format
+    expect(input.value).toBe(toLocalDatetimeInputValue(MOCK_NOW));
+
+    // 4. Verify onTimeChange was called with MOCK_NOW's UTC format
+    expect(onTimeChange).toHaveBeenLastCalledWith(MOCK_NOW.toISOString());
   });
 
-  it('handles invalid date input gracefully (returns empty string)', async () => {
-    // Since we changed the implementation, it should no longer throw.
-    // We can't easily test the useEffect error anymore because it doesn't throw,
-    // but we can check if onTimeChange is called with "" for invalid input.
-    const handleChange = vi.fn();
-    const { container } = render(<TimeAdjuster onTimeChange={handleChange} />);
-    const input = container.querySelector('input');
+  it('handles invalid date input gracefully by calling onTimeChange with an empty string', async () => {
+    const onTimeChange = vi.fn();
+    render(<TimeAdjuster onTimeChange={onTimeChange} />);
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
 
-    fireEvent.change(input!, { target: { value: '2026-06-0' } });
-    // We might need to wait for the effect
-    await new Promise((r) => setTimeout(r, 0));
-    expect(handleChange).toHaveBeenCalledWith("");
+    // Simulate invalid input (though datetime-local usually prevents this via UI, 
+    // we test the logic in toUTCFromLocalInput)
+    fireEvent.change(input, { target: { value: 'not-a-date' } });
+
+    // Wait for useEffect
+    await vi.waitFor(() => {
+        expect(onTimeChange).toHaveBeenCalledWith("");
+    });
+  });
+
+  it('does not call onTimeChange if the input value is same as current (initialization check)', () => {
+    // The component has an effect on [value, onTimeChange]. 
+    // On mount, it will call onTimeChange because value is set in useState.
+    const onTimeChange = vi.fn();
+    render(<TimeAdjuster onTimeChange={onTimeChange} />);
+    
+    // Should be called once on mount due to useEffect [value]
+    expect(onTimeChange).toHaveBeenCalledTimes(1);
+    expect(onTimeChange).toHaveBeenCalledWith(MOCK_NOW.toISOString());
+  });
+
+  it('does not call onTimeChange if it is not provided (edge case for coverage)', () => {
+    // @ts-ignore - testing the branch where onTimeChange might be undefined
+    render(<TimeAdjuster onTimeChange={undefined} />);
   });
 });
diff --git a/frontend/tests/unit/api/client.test.ts b/frontend/tests/unit/api/client.test.ts
new file mode 100644
index 0000000..9463823
--- /dev/null
+++ b/frontend/tests/unit/api/client.test.ts
@@ -0,0 +1,299 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as client from '../../../src/api/client';
+
+describe('api client', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  describe('utility functions', () => {
+    it('localHHMMToUTCHHMM converts correctly (assuming UTC+0 for simplicity in test, or handling offset)', () => {
+      const result = client.localHHMMToUTCHHMM('12:00');
+      expect(result).toMatch(/^\d{2}:\d{2}$/);
+    });
+
+    it('localToUTC converts to ISO string', () => {
+      const dateStr = '2026-01-01T12:00';
+      const result = client.localToUTC(dateStr);
+      expect(result).toBe(new Date(dateStr).toISOString());
+    });
+  });
+
+  describe('fetch functions', () => {
+    describe('fetchSummary', () => {
+      it('returns data on success', async () => {
+        const mockData = { total: 10 };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockData,
+        } as any);
+
+        const result = await client.fetchSummary('2026-01-01', '2026-01-02');
+        expect(result).toEqual(mockData);
+        expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/stats/summary'));
+      });
+
+      it('throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.fetchSummary('2026-01-01', '2026-01-02')).rejects.toThrow('Failed to fetch summary');
+      });
+    });
+
+    describe('fetchDailySummary', () => {
+      it('returns data on success and verifies query params', async () => {
+        const mockData = { some: 'data' } as any;
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockData,
+        } as any);
+
+        const from_date = '2026-01-01';
+        const to_date = '2026-01-02';
+        const day_start = '22:00';
+        const day_end = '08:00';
+        const timezone_offset = -360;
+
+        const result = await client.fetchDailySummary(from_date, to_date, day_start, day_end, timezone_offset);
+        expect(result).toEqual(mockData);
+
+        const params = new URLSearchParams({ 
+          from_date, 
+          to_date, 
+          day_start, 
+          day_end, 
+          timezone_offset: timezone_offset.toString() 
+        });
+        const expectedUrl = `/api/stats/daily-summary?${params.toString()}`;
+        expect(fetch).toHaveBeenCalledWith(expect.stringContaining(expectedUrl));
+      });
+
+      it('throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.fetchDailySummary('2026-01-01', '2026-01-02', '22:00', '08:00')).rejects.toThrow('Failed to fetch daily-summary');
+      });
+    });
+
+    describe('fetchTimetable', () => {
+      it('returns data on success and verifies query params', async () => {
+        const mockData = { some: 'timetable' } as any;
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockData,
+        } as any);
+
+        const from_date = '2026-01-01';
+        const to_date = '2026-01-02';
+        const day_start = '22:00';
+        const day_end = '08:00';
+        const timezone_offset = 0;
+
+        const result = await client.fetchTimetable(from_date, to_date, day_start, day_end, timezone_offset);
+        expect(result).toEqual(mockData);
+
+        const params = new URLSearchParams({ 
+          from_date, 
+          to_date, 
+          day_start, 
+          day_end, 
+          timezone_offset: timezone_offset.toString() 
+        });
+        const expectedUrl = `/api/stats/timetable?${params.toString()}`;
+        expect(fetch).toHaveBeenCalledWith(expect.stringContaining(expectedUrl));
+      });
+
+      it('throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.fetchTimetable('2026-01-01', '2026-01-02', '22:00', '08:00')).rejects.toThrow('Failed to fetch timetable');
+      });
+    });
+
+    describe('fetchWakeSleepTimes', () => {
+      it('returns data on success and transforms time correctly', async () => {
+        const mockData = { wakeup_ref: '06:30', bedtime_ref: '21:00' };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockData,
+        } as any);
+
+        const offsetSpy = vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(-60);
+
+        try {
+          const result = await client.fetchWakeSleepTimes('2026-01-01', '2026-01-02', '07:30', '22:00', 0);
+          expect(result).toEqual(mockData);
+          expect(fetch).toHaveBeenCalledWith(
+            expect.stringContaining('from_date=2026-01-01&to_date=2026-01-02&wakeup_ref=06%3A30&bedtime_ref=21%3A00&timezone_offset=0')
+          );
+        } finally {
+          offsetSpy.mockRestore();
+        }
+      });
+
+      it('throws error on failure', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.fetchWakeSleepTimes('2026-01-01', '2026-01-02', '07:30', '22:00')).rejects.toThrow('Failed to fetch wake-sleep-times');
+      });
+    });
+
+    describe('fetchActiveSession', () => {
+      it('returns session on success', async () => {
+        const mockSession = { id: 1, start_time: '2026-01-01T12:00', end_time: null };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockSession,
+        } as any);
+
+        const result = await client.fetchActiveSession();
+        expect(result).toEqual(mockSession);
+      });
+
+      it('returns null on 404/not-ok', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        const result = await client.fetchActiveSession();
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('fetchSessions', () => {
+      it('returns session list on success', async () => {
+        const mockResponse = { sessions: [{ id: 1, start_time: '2026-01-01T12:00' }] };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockResponse,
+        } as any);
+
+        const result = await client.fetchSessions();
+        expect(result).toEqual(mockResponse);
+        expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/sessions'));
+      });
+
+      it('throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.fetchSessions()).rejects.toThrow('Failed to fetch sessions');
+      });
+    });
+
+    describe('Session mutations', () => {
+      it('createSession sends POST request with body', async () => {
+        const payload = { start_time: '2026-01-01T12:00' };
+        const mockResponse = { id: 1, ...payload };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockResponse,
+        } as any);
+
+        const result = await client.createSession(payload as any);
+        expect(result).toEqual(mockResponse);
+        expect(fetch).toHaveBeenCalledWith(
+          expect.stringContaining('/api/sessions'),
+          expect.objectContaining({
+            method: 'POST',
+            body: JSON.stringify(payload),
+          })
+        );
+      });
+
+      it('createSession throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.createSession({ start_time: '2026-01-01T12:00' } as any)).rejects.toThrow('Failed to create session');
+      });
+
+      it('endSession sends PATCH request', async () => {
+        const sessionId = 1;
+        const payload = { end_time: '2026-01-01T14:00' };
+        const mockResponse = { id: 1, ...payload };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockResponse,
+        } as any);
+
+        const result = await client.endSession(sessionId, payload as any);
+        expect(result).toEqual(mockResponse);
+        expect(fetch).toHaveBeenCalledWith(
+          expect.stringContaining(`/api/sessions/${sessionId}/end`),
+          expect.objectContaining({
+            method: 'PATCH',
+            body: JSON.stringify(payload),
+          })
+        );
+      });
+
+      it('endSession throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.endSession(1, { end_time: '2026-01-01T14:00' } as any)).rejects.toThrow('Failed to end session');
+      });
+
+      it('deleteSession sends DELETE request', async () => {
+        const sessionId = 1;
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+        } as any);
+
+        await client.deleteSession(sessionId);
+        expect(fetch).toHaveBeenCalledWith(
+          expect.stringContaining(`/api/sessions/${sessionId}`),
+          expect.objectContaining({ method: 'DELETE' })
+        );
+      });
+
+      it('deleteSession throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.deleteSession(1)).rejects.toThrow('Failed to delete session');
+      });
+
+      it('updateSession sends PATCH request', async () => {
+        const sessionId = 1;
+        const payload = { start_time: '2026-01-01T10:00' };
+        const mockResponse = { id: 1, ...payload };
+        vi.mocked(fetch).mockResolvedValue({
+          ok: true,
+          json: async () => mockResponse,
+        } as any);
+
+        const result = await client.updateSession(sessionId, payload as any);
+        expect(result).toEqual(mockResponse);
+        expect(fetch).toHaveBeenCalledWith(
+          expect.stringContaining(`/api/sessions/${sessionId}`),
+          expect.objectContaining({
+            method: 'PATCH',
+            body: JSON.stringify(payload),
+          })
+        );
+      });
+
+      it('updateSession throws error on non-ok response', async () => {
+        vi.mocked(fetch).mockResolvedValue({
+          ok: false,
+        } as any);
+
+        await expect(client.updateSession(1, { start_time: '2026-01-01T10:00' } as any)).rejects.toThrow('Failed to update session');
+      });
+    });
+  });
+});
diff --git a/frontend/tests/unit/chartHelpers.test.ts b/frontend/tests/unit/chartHelpers.test.ts
index b447cff..e1f495e 100644
--- a/frontend/tests/unit/chartHelpers.test.ts
+++ b/frontend/tests/unit/chartHelpers.test.ts
@@ -22,6 +22,11 @@ describe('buildTimetableSlots', () => {
     expect(result['2024-01-15']).toHaveLength(2);
     expect(result['2024-01-16']).toHaveLength(1);
   });
+
+  it('handles empty array', () => {
+    const result = buildTimetableSlots([]);
+    expect(result).toEqual({});
+  });
 });
 
 describe('computeWakeupMinutes', () => {
@@ -41,6 +46,26 @@ describe('computeWakeupMinutes', () => {
     const result = computeWakeupMinutes(days, '04:00');
     expect(result[0].time).toBe('N/A');
   });
+
+  it('handles midnight crossover', () => {
+    const days: WakeupBedtimeDay[] = [
+      { date: '2024-01-15', wakeup_minutes: 60, bedtime_minutes: null },
+    ];
+    const result = computeWakeupMinutes(days, '23:00');
+    expect(result[0].time).toBe('00:00');
+  });
+
+  it('handles mixed data (valid, null, zero)', () => {
+    const days: WakeupBedtimeDay[] = [
+      { date: '2024-01-15', wakeup_minutes: 120, bedtime_minutes: null },
+      { date: '2024-01-16', wakeup_minutes: null, bedtime_minutes: null },
+      { date: '2024-01-17', wakeup_minutes: 0, bedtime_minutes: null },
+    ];
+    const result = computeWakeupMinutes(days, '04:00');
+    expect(result[0]).toEqual({ date: '2024-01-15', minutes: 120, time: '06:00' });
+    expect(result[1]).toEqual({ date: '2024-01-16', minutes: 0, time: 'N/A' });
+    expect(result[2]).toEqual({ date: '2024-01-17', minutes: 0, time: '04:00' });
+  });
 });
 
 describe('computeBedtimeMinutes', () => {
@@ -51,6 +76,26 @@ describe('computeBedtimeMinutes', () => {
     const result = computeBedtimeMinutes(days, '19:00');
     expect(result[0].time).toBe('20:15');
   });
+
+  it('handles midnight crossover', () => {
+    const days: WakeupBedtimeDay[] = [
+      { date: '2024-01-15', wakeup_minutes: null, bedtime_minutes: 60 },
+    ];
+    const result = computeBedtimeMinutes(days, '23:00');
+    expect(result[0].time).toBe('00:00');
+  });
+
+  it('handles mixed data (valid, null, zero)', () => {
+    const days: WakeupBedtimeDay[] = [
+      { date: '2024-01-15', wakeup_minutes: null, bedtime_minutes: 120 },
+      { date: '2024-01-16', wakeup_minutes: null, bedtime_minutes: null },
+      { date: '2024-01-17', wakeup_minutes: null, bedtime_minutes: 0 },
+    ];
+    const result = computeBedtimeMinutes(days, '19:00');
+    expect(result[0]).toEqual({ date: '2024-01-15', minutes: 120, time: '21:00' });
+    expect(result[1]).toEqual({ date: '2024-01-16', minutes: 0, time: 'N/A' });
+    expect(result[2]).toEqual({ date: '2024-01-17', minutes: 0, time: '19:00' });
+  });
 });
 
 describe('computeDailySummaryData', () => {
@@ -110,4 +155,4 @@ describe('filterDaysWithData', () => {
     expect(result).toHaveLength(1);
     expect(result[0].date).toBe('2024-01-15');
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/tests/unit/components/stats/BedtimePlot.test.tsx b/frontend/tests/unit/components/stats/BedtimePlot.test.tsx
new file mode 100644
index 0000000..414358c
--- /dev/null
+++ b/frontend/tests/unit/components/stats/BedtimePlot.test.tsx
@@ -0,0 +1,135 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import BedtimePlot from '../../../../src/components/stats/BedtimePlot';
+import { useStats } from '../../../../src/hooks/useStats';
+import { XAxis, YAxis, Tooltip } from 'recharts';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+vi.mock('recharts', async () => {
+  const actual = await vi.importActual<typeof import('recharts')>('recharts');
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+    LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
+    XAxis: vi.fn(({ tickFormatter }) => <div data-testid="x-axis" data-tick-formatter={String(tickFormatter)} />),
+    YAxis: vi.fn(({ tickFormatter }) => <div data-testid="y-axis" data-tick-formatter={String(tickFormatter)} />),
+    CartesianGrid: vi.fn(),
+    Tooltip: vi.fn(({ formatter, labelFormatter }) => <div data-testid="tooltip" />),
+    Line: vi.fn(),
+  };
+});
+
+describe('BedtimePlot', () => {
+  const props = {
+    from_date: '2024-01-01',
+    to_date: '2024-01-07',
+    wakeup_ref: '07:00',
+    bedtime_ref: '20:00',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: undefined,
+      isLoading: true,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    expect(screen.getByText(/Loading plot.../i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data is available', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: { days: [] },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    expect(screen.getByText(/No data available for this period./i)).toBeInTheDocument();
+  });
+
+  it('renders chart and statistics correctly with data', () => {
+    const today = new Date().toISOString().split('T')[0];
+    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: 0 },     // Exactly at ref (20:00)
+          { date: yesterday, bedtime_minutes: -60 }, // 19:00
+          { date: '2024-01-05', bedtime_minutes: 60 }, // 21:00
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    
+    expect(screen.getByText(/Bedtime/i)).toBeInTheDocument();
+
+    // Verify statistical calculations
+    expect(screen.getByText(/19:00/i)).toBeInTheDocument(); 
+    expect(screen.getByText(/21:00/i)).toBeInTheDocument(); 
+    
+    const timeValues = screen.getAllByText(/20:00/i);
+    expect(timeValues).toHaveLength(2); 
+  });
+
+  it('renders correctly when all data points are null', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: null },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    
+    expect(screen.getByText(/Bedtime/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Earliest/i)).not.toBeInTheDocument();
+  });
+
+  it('verifies YAxis tickFormatter handles numeric values', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: 30 },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+
+    const yAxisCall = vi.mocked(YAxis).mock.calls[0][0];
+    expect(yAxisCall.tickFormatter(30)).toBe('20:30');
+  });
+  it('verifies Tooltip formatter handles various value types', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [{ date: today, bedtime_minutes: 30 }],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+
+    const tooltipCall = vi.mocked(Tooltip).mock.calls[0][0];
+    expect(tooltipCall.formatter(30)).toEqual(['20:30', 'Bedtime']);
+    expect(tooltipCall.formatter('N/A')).toEqual(['N/A', 'Bedtime']);
+  });
+});
diff --git a/frontend/tests/unit/components/stats/DailySummary.test.tsx b/frontend/tests/unit/components/stats/DailySummary.test.tsx
new file mode 100644
index 0000000..db405fa
--- /dev/null
+++ b/frontend/tests/unit/components/stats/DailySummary.test.tsx
@@ -0,0 +1,149 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import DailySummary from '../../../../src/components/stats/DailySummary';
+import { useStats } from '../../../../src/hooks/useStats';
+import { XAxis, Tooltip } from 'recharts';
+import { formatMinutes } from '../../../../src/utils/time';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+vi.mock('recharts', async () => {
+  const actual = await vi.importActual<typeof import('recharts')>('recharts');
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+    BarChart: ({ children }: any) => <div data-testid="bar-chart">{children}</div>,
+    XAxis: vi.fn(({ tickFormatter }) => <div data-testid="x-axis" data-tick-formatter={String(tickFormatter)} />),
+    YAxis: vi.fn(() => <div data-testid="y-axis" />),
+    CartesianGrid: vi.fn(),
+    Tooltip: vi.fn(({ formatter }) => <div data-testid="tooltip" />),
+    Bar: vi.fn(),
+  };
+});
+
+describe('DailySummary', () => {
+  const props = {
+    from_date: '2024-01-01',
+    to_date: '2024-01-02',
+    day_start: '07:00',
+    day_end: '20:00',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: undefined,
+      isLoading: true,
+    } as any);
+
+    render(<DailySummary {...props} />);
+    expect(screen.getByText(/Loading summary.../i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when dailySummary.days is undefined', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: undefined,
+      isLoading: false,
+    } as any);
+
+    render(<DailySummary {...props} />);
+    expect(screen.getByText(/No data available for this period./i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when dailySummary.days is an empty array', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: { days: [] },
+      isLoading: false,
+    } as any);
+
+    render(<DailySummary {...props} />);
+    expect(screen.getByText(/No data available for this period./i)).toBeInTheDocument();
+  });
+
+  it('renders chart and average stats correctly with multiple days', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: {
+        days: [
+          { date: '2024-01-01', total_minutes: 480, day_minutes: 240, night_minutes: 240 },
+          { date: '2024-01-02', total_minutes: 540, day_minutes: 300, night_minutes: 240 },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<DailySummary {...props} />);
+    
+    expect(screen.getByText(/Daily Summary/i)).toBeInTheDocument();
+
+    // Totals: (480 + 540) / 2 = 510 mins -> 8h 30m
+    // Day: (240 + 300) / 2 = 270 mins -> 4h 30m
+    // Night: (240 + 240) / 2 = 240 mins -> 4h 0m
+    expect(screen.getByText(/8h 30m/i)).toBeInTheDocument();
+    expect(screen.getByText(/4h 30m/i)).toBeInTheDocument();
+    expect(screen.getByText(/4h 0m/i)).toBeInTheDocument();
+  });
+
+  it('handles single day data correctly', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: {
+        days: [
+          { date: '2024-01-01', total_minutes: 600, day_minutes: 300, night_minutes: 300 },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<DailySummary {...props} />);
+    
+    expect(screen.getByText(/10h 0m/i)).toBeInTheDocument();
+    const avgTimes = screen.getAllByText(/5h 0m/i);
+    expect(avgTimes).toHaveLength(2);
+  });
+
+  it('uses correct formatters for XAxis and Tooltip', () => {
+    vi.mocked(useStats).mockReturnValue({
+      dailySummary: {
+        days: [
+          { date: '2024-01-01', total_minutes: 480, day_minutes: 240, night_minutes: 240 },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<DailySummary {...props} />);
+
+    // Check XAxis tickFormatter
+    const xAxisCall = vi.mocked(XAxis).mock.calls[0][0];
+    expect(xAxisCall.tickFormatter).toBeDefined();
+    expect(xAxisCall.tickFormatter(10)).toBe('10h');
+    expect(xAxisCall.tickFormatter(5.5)).toBe('6h');
+
+    // Check Tooltip formatter
+    const tooltipCall = vi.mocked(Tooltip).mock.calls[0][0];
+    expect(tooltipCall.formatter).toBeDefined();
+
+    // Test Tooltip formatter with a single number (e.g., daySleep)
+    const [val1, name1] = tooltipCall.formatter(8, 'daySleep');
+    expect(val1).toBe('8h 0m');
+    expect(name1).toBe('Day');
+
+    const [val2, name2] = tooltipCall.formatter(7, 'nightSleep');
+    expect(val2).toBe('7h 0m');
+    expect(name2).toBe('Night');
+
+    // Test Tooltip formatter with an array
+    const [val3, name3] = tooltipCall.formatter([10], 'daySleep');
+    expect(val3).toBe('10h 0m');
+    expect(name3).toBe('Day');
+
+    // Test Tooltip formatter with undefined/null
+    const [val4, name4] = tooltipCall.formatter(undefined, 'daySleep');
+    expect(val4).toBe('0m');
+    expect(name4).toBe('Day');
+  });
+});
diff --git a/frontend/tests/unit/components/stats/Pagination.test.tsx b/frontend/tests/unit/components/stats/Pagination.test.tsx
new file mode 100644
index 0000000..7a141fb
--- /dev/null
+++ b/frontend/tests/unit/components/stats/Pagination.test.tsx
@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Pagination as PaginationComponent } from '../../../../src/components/stats/Pagination';
+
+describe('Pagination', () => {
+  const onPageChange = vi.fn();
+
+  it('returns null when totalPages <= 1', () => {
+    const { container } = render(
+      <PaginationComponent currentPage={1} totalPages={1} onPageChange={onPageChange} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders all page numbers when totalPages <= 5', () => {
+    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
+    
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('2')).toHaveClass('bg-blue-600');
+  });
+
+  it('handles ellipsis correctly when currentPage is in the middle of a large set', () => {
+    // totalPages = 10, currentPage = 5
+    // Expected: [1, '...', 4, 5, 6, '...', 10]
+    render(<PaginationComponent currentPage={5} totalPages={10} onPageChange={onPageChange} />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('6')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+
+    const allButtons = screen.getAllByRole('button');
+    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
+    expect(pageButtons).toHaveLength(5); // 1, 4, 5, 6, 10
+  });
+
+  it('handles large page set with ellipsis at start and end correctly', () => {
+    // totalPages = 10, currentPage = 2
+    // Expected: [1, 2, 3, '...', 10]
+    render(<PaginationComponent currentPage={2} totalPages={10} onPageChange={onPageChange} />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+
+    const allButtons = screen.getAllByRole('button');
+    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
+    expect(pageButtons).toHaveLength(4); // 1, 2, 3, 10
+  });
+
+  it('handles large page set where current page is near the end', () => {
+    // totalPages = 10, currentPage = 9
+    // Expected: [1, '...', 8, 9, 10]
+    render(<PaginationComponent currentPage={9} totalPages={10} onPageChange={onPageChange} />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('8')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+
+    const allButtons = screen.getAllByRole('button');
+    const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
+    expect(pageButtons).toHaveLength(4); // 1, 8, 9, 10
+  });
+
+  it('calls onPageChange with correct page when a page number is clicked', () => {
+    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
+    fireEvent.click(screen.getByText('4'));
+    expect(onPageChange).toHaveBeenCalledWith(4);
+  });
+
+  it('calls onPageChange with correct page when "Previous" is clicked', () => {
+    render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
+    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
+    expect(onPageChange).toHaveBeenCalledWith(1);
+  });
+
+  it('calls onPageChange with correct page when "Next" is clicked', () => {
+    render(<PaginationComponent currentPage={4} totalPages={5} onPageChange={onPageChange} />);
+    fireEvent.click(screen.getByRole('button', { name: /next/i }));
+    expect(onPageChange).toHaveBeenCalledWith(5);
+  });
+
+  it('disables "Previous" button on first page', () => {
+    render(<PaginationComponent currentPage={1} totalPages={5} onPageChange={onPageChange} />);
+    expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
+  });
+
+  it('disables "Next" button on last page', () => {
+    render(<PaginationComponent currentPage={5} totalPages={5} onPageChange={onPageChange} />);
+    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
+  });
+});
diff --git a/frontend/tests/unit/components/stats/SessionList.test.tsx b/frontend/tests/unit/components/stats/SessionList.test.tsx
index a06999a..8bfa2b2 100644
--- a/frontend/tests/unit/components/stats/SessionList.test.tsx
+++ b/frontend/tests/unit/components/stats/SessionList.test.tsx
@@ -1,55 +1,316 @@
-import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SessionList } from '../../../../src/components/stats/SessionList';
+import { useSessions } from '../../../../src/hooks/useSleepSession';
+import { useSettings } from '../../../../src/hooks/useSettings';
 
-vi.mock('../../../../src/hooks/useSleepSession', () => ({
-  useSessions: () => ({
-    sessions: [
-      {
-        id: 1,
-        start_time: '2026-06-04T11:58:00',
-        end_time: '2026-06-04T13:58:00',
-        notes: null,
-        created_at: '2026-06-04T11:58:00',
-        updated_at: '2026-06-04T11:58:00',
-      },
-    ],
-    isLoading: false,
-    updateSession: vi.fn(),
-    deleteSession: vi.fn(),
-    isDeleting: false,
-  }),
+vi.mock('../../../../src/hooks/useSleepSession');
+vi.mock('../../../../src/hooks/useSettings');
+
+// Mock Pagination component to simplify integration testing
+vi.mock('../../../../src/components/stats/Pagination', () => ({
+  Pagination: vi.fn(({ currentPage, totalPages, onPageChange }) => (
+    <div data-testid="pagination-mock">
+      <span>{currentPage} / {totalPages}</span>
+      <button onClick={() => onPageChange(currentPage + 1)}>Next Page</button>
+    </div>
+  )),
 }));
 
-vi.mock('../../../../src/hooks/useSettings', () => ({
-  useSettings: () => ({ settings: { sessionsPerPage: 10 } }),
-}));
+const mockSession = {
+  id: 1,
+  start_time: '2026-06-04T11:58:00', // UTC
+  end_time: '2026-06-04T13:58:00',   // UTC
+  notes: null,
+  created_at: '2026-06-04T11:58:00',
+  updated_at: '2026-06-04T11:58:00',
+};
 
-const originalTZ = process.env.TZ;
+describe('SessionList', () => {
+  const mockUpdateSession = vi.fn();
+  const mockDeleteSession = vi.fn();
 
-beforeAll(() => {
-  process.env.TZ = 'Europe/Stockholm';
-});
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default mock implementation for useSettings
+    vi.mocked(useSettings).mockReturnValue({
+      settings: { sessionsPerPage: 10 } as any,
+    });
 
-afterAll(() => {
-  process.env.TZ = originalTZ;
-});
+    // Mock window.confirm and alert to prevent actual popups during tests
+    vi.spyOn(window, 'confirm').mockImplementation(() => true);
+    vi.spyOn(window, 'alert').mockImplementation(() => {});
+  });
 
-describe('SessionList edit timezone', () => {
-  it('pre-fills edit inputs with local Stockholm time, not UTC', () => {
-    const { container } = render(<SessionList />);
+  it('displays loading state', () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [],
+      isLoading: true,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
 
-    const clickableRow = container.querySelector('.cursor-pointer') as HTMLElement;
-    expect(clickableRow).not.toBeNull();
+    render(<SessionList />);
+    expect(screen.getByText(/Loading sessions.../i)).toBeInTheDocument();
+  });
+
+  it('displays empty state when no sessions are recorded', () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+    expect(screen.getByText(/No sessions recorded./i)).toBeInTheDocument();
+  });
+
+  it('renders session rows with correct start time and duration', () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    // Check that the session row is rendered
+    const row = screen.getByTestId('session-row');
+    expect(row).toBeInTheDocument();
+
+    // Check for presence of duration (13:58 - 11:58 = 2h 0m)
+    // Note: formatMinutes(120) -> "2h 0m"
+    // Using getAllByText because duration is rendered twice (desktop and mobile views)
+    const durations = screen.getAllByText(/2h 0m/i);
+    expect(durations.length).toBeGreaterThan(0);
+  });
+
+  it('handles editing flow: start, cancel and save', async () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    // 1. Start Editing
+    const row = screen.getByTestId('session-row');
+    fireEvent.click(row);
+
+    // Verify edit inputs are visible
+    expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/End Time/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument();
+
+    // 2. Cancel Edit
+    fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+    expect(mockUpdateSession).not.toHaveBeenCalled();
+    // Should be back in view mode (row should be visible again)
+    expect(screen.getByTestId('session-row')).toBeInTheDocument();
+
+    // 3. Save Edit
+    fireEvent.click(screen.getByTestId('session-row')); // Re-enter edit mode
+    const startInput = screen.getByLabelText(/Start Time/i) as HTMLInputElement;
+    const endInput = screen.getByLabelText(/End Time/i) as HTMLInputElement;
+
+    const newStart = '2026-06-04T14:00';
+    const newEnd = '2026-06-04T15:00';
+    fireEvent.change(startInput, { target: { value: newStart } });
+    fireEvent.change(endInput, { target: { value: newEnd } });
+
+    fireEvent.click(screen.getByRole('button', { name: /Save/i }));
+
+    await waitFor(() => {
+      expect(mockUpdateSession).toHaveBeenCalledWith({
+        sessionId: 1,
+        payload: expect.objectContaining({
+          start_time: expect.any(String),
+          end_time: expect.any(String)
+        })
+      });
+    });
+
+    // Check if it exited edit mode (row is back)
+    expect(screen.getByTestId('session-row')).toBeInTheDocument();
+  });
+
+  it('handles deletion flow', async () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    // Clicking the delete button (Trash2 icon)
+    const deleteButtons = screen.getAllByTitle('Delete session');
+    fireEvent.click(deleteButtons[0]);
+
+    // Verify confirmation was called
+    expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete this sleep session?');
+
+    // If confirmed (mockImplementation returns true)
+    await waitFor(() => {
+      expect(mockDeleteSession).toHaveBeenCalledWith(1);
+    });
+  });
+
+  it('disables delete button when isDeleting is true', () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: true, // DELETING!
+    } as any);
+
+    render(<SessionList />);
+    const deleteButtons = screen.getAllByTitle('Delete session');
+    expect(deleteButtons[0]).toBeDisabled();
+  });
+
+  it('integrates with pagination when sessions exceed page size', () => {
+    const manySessions = Array.from({ length: 15 }, (_, i) => ({
+      ...mockSession,
+      id: i + 1,
+    }));
+
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: manySessions,
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    // Pagination should be rendered (using the mocked test-id)
+    expect(screen.getByTestId('pagination-mock')).toBeInTheDocument();
+  });
+
+  it('verifies timezone accuracy for Stockholm/UTC', () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    const clickableRow = screen.getByTestId('session-row');
     fireEvent.click(clickableRow);
 
-    const inputs = container.querySelectorAll('input[type="datetime-local"]');
-    expect(inputs).toHaveLength(2);
+    const startTimeInput = screen.getByLabelText(/Start Time/i) as HTMLInputElement;
+    const endTimeInput = screen.getByLabelText(/End Time/i) as HTMLInputElement;
 
-    // Backend sends 11:58 UTC (no Z). Stockholm is UTC+2, so local time is 13:58.
-    expect((inputs[0] as HTMLInputElement).value).toBe('2026-06-04T13:58');
-    // Backend sends 13:58 UTC → Stockholm 15:58
-    expect((inputs[1] as HTMLInputElement).value).toBe('2026-06-04T15:58');
+    // Stockholm is UTC+2 in June (daylight savings).
+    // mockSession start_time: '2026-06-04T11:58:00' (UTC)
+    // Stockholm local time: 2026-06-04T13:58
+    expect(startTimeInput.value).toBe('2026-06-04T13:58');
+    expect(endTimeInput.value).toBe('2026-06-04T15:58');
+  });
+  it('handles updateSession error gracefully', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: vi.fn().mockRejectedValue(new Error('Update failed')),
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+    const row = screen.getByTestId('session-row');
+    fireEvent.click(row);
+
+    const saveButton = screen.getByRole('button', { name: /Save/i });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith('Failed to update session');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+
+    consoleSpy.mockRestore();
+    alertSpy.mockRestore();
+  });
+  it('handles deleteSession error gracefully', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: vi.fn().mockRejectedValue(new Error('Delete failed')),
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    const deleteButtons = screen.getAllByTitle('Delete session');
+    fireEvent.click(deleteButtons[0]);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith('Failed to delete session');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+
+    consoleSpy.mockRestore();
+    alertSpy.mockRestore();
+  });
+
+  it('renders in-progress session correctly (without end time)', () => {
+    const inProgressSession = { ...mockSession, end_time: null } as any;
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [inProgressSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    render(<SessionList />);
+
+    expect(screen.getByText(/In progress/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/—/i).length).toBeGreaterThan(0);
+  });
+
+  it('handles deletion cancellation', async () => {
+    vi.mocked(useSessions).mockReturnValue({
+      sessions: [mockSession],
+      isLoading: false,
+      updateSession: mockUpdateSession,
+      deleteSession: mockDeleteSession,
+      isDeleting: false,
+    } as any);
+
+    vi.spyOn(window, 'confirm').mockImplementation(() => false);
+
+    render(<SessionList />);
+
+    const deleteButtons = screen.getAllByTitle('Delete session');
+    fireEvent.click(deleteButtons[0]);
+
+    expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete this sleep session?');
+    await waitFor(() => {
+      expect(mockDeleteSession).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/frontend/tests/unit/components/stats/SleepTimetable.test.tsx b/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
index 01bd9e3..118b7ef 100644
--- a/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
+++ b/frontend/tests/unit/components/stats/SleepTimetable.test.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { render, screen } from '@testing-library/react';
-
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import Timetable from '../../../../src/components/stats/SleepTimetable';
 import { useStats } from '../../../../src/hooks/useStats';
 
@@ -12,69 +11,199 @@ vi.mock('../../../../src/hooks/useStats', () => ({
 
 describe('SleepTimetable', () => {
   const defaultProps = {
-    from_date: '2025-04-18',
-    to_date: '2025-04-25',
+    from_date: '2025-04-18', // Friday
+    to_date: '2025-04-21',   // Monday
     day_start: '22:00',
     day_end: '08:00',
   };
 
   beforeEach(() => {
     vi.clearAllMocks();
+    // Default to desktop width
     vi.stubGlobal('innerWidth', 1024);
   });
 
-  it('renders loading state', () => {
-    (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
-    render(<Timetable {...defaultProps} />);
-    expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocument();
+  afterEach(() => {
+    vi.useRealTimers();
   });
 
-  it('renders empty state when no data is available', () => {
-    (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
-    render(<Timetable {...defaultProps} />);
-    expect(screen.getByText(/No data available/i)).toBeInTheDocument();
-  });
-
-  it('shows sleeping status for intervals spanning midnight across days', () => {
-    const day1 = '2025-04-18';
-    const day2 = '2025-04-19';
-
-    (useStats as any).mockReturnValue({
-      timetable: {
-        slots: [
-          {
-            date: day1,
-            sleeping: true,
-            slot_start: '23:00',
-            slot_end: '23:45',
-          },
-          {
-            date: day2,
-            sleeping: true,
-            slot_start: '00:00',
-            slot_end: '01:00',
-          },
-        ],
-      },
-      isLoading: false,
+  describe('Loading & Empty States', () => {
+    it('renders loading state', () => {
+      (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocument();
     });
 
-    const testProps = {
-      from_date: day1,
-      to_date: day2,
-      day_start: '22:00',
-      day_end: '08:00',
+    it('renders empty state when timetable.slots is empty', () => {
+      (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+    });
+
+    it('renders empty state when timetable is null', () => {
+      (useStats as any).mockReturnValue({ timetable: null, isLoading: false });
+      render(<Timetable {...defaultProps} />);
+      expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Date Range Edge Cases', () => {
+    it('handles a single day range correctly', () => {
+      const singleDayProps = { ...defaultProps, from_date: '2025-04-18', to_date: '2025-04-18' };
+      (useStats as any).mockReturnValue({ 
+        timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '10:00', slot_end: '11:00' }] }, 
+        isLoading: false 
+      });
+      render(<Timetable {...singleDayProps} />);
+      // Check if it renders the single day header
+      expect(screen.getByText(/18/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({ 
+        timetable: { slots: [{ date: '2025-01-05', sleeping: true, slot_start: '10:00', slot_end: '11:00' }] }, 
+        isLoading: false 
+      });
+      render(<Timetable {...largeRangeProps} />);
+      // Ensure it doesn't crash and renders the title
+      expect(screen.getByText(/Sleep Timetable/i)).toBeInTheDocument();
+    });
+
+    it('handles empty date range (start > end)', () => {
+      const invalidRangeProps = { ...defaultProps, from_date: '2025-04-21', to_date: '2025-04-18' };
+      (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
+      render(<Timetable {...invalidRangeProps} />);
+      // Should gracefully handle empty days array (no crash) and show no data
+      expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Tiers', () => {
+    const mockTimetable = {
+      slots: [
+        { date: '2025-04-18', sleeping: true, slot_start: '23:00', slot_end: '07:00' },
+      ],
     };
 
-    vi.stubGlobal('innerWidth', 1024); // Desktop mode
-    const { container } = render(<Timetable {...testProps} />);
+    it('Desktop Tier (>= 768px): shows all days', () => {
+      (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
+      vi.stubGlobal('innerWidth', 1024);
+      render(<Timetable {...defaultProps} />);
 
-    // Check Day 1: 23:00
-    const cellD1_2300 = container.querySelector(`[data-testid="cell-${day1}-23:00"]`);
-    expect(cellD1_2300).toHaveClass('bg-green-500');
+      expect(screen.getByText(/18/i)).toBeInTheDocument();
+      expect(screen.getByText(/19/i)).toBeInTheDocument();
+      expect(screen.getByText(/20/i)).toBeInTheDocument();
+      expect(screen.getByText(/21/i)).toBeInTheDocument();
+    });
 
-    // Check Day 2: 00:15
-    const cellD2_0015 = container.querySelector(`[data-testid="cell-${day2}-00:15"]`);
-    expect(cellD2_0015).toHaveClass('bg-green-500');
+    it('Medium Tier (400-768px): shows tab groups and updates on click', () => {
+      (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
+      vi.stubGlobal('innerWidth', 500);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      act(() => {
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      const tabs = screen.getAllByRole('button');
+      expect(tabs.length).toBeGreaterThan(0);
+      
+      const tab1 = tabs[0];
+      expect(tab1.textContent).toMatch(/19/);
+      expect(tab1.textContent).toMatch(/21/);
+      expect(tab1).toHaveClass('bg-blue-600');
+
+      const tab2 = tabs[1];
+      act(() => {
+        fireEvent.click(tab2);
+      });
+
+      expect(tab2).toHaveClass('bg-blue-600');
+      expect(container.querySelector('[data-testid^="cell-2025-04-18-"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-testid^="cell-2025-04-21-"]')).not.toBeInTheDocument();
+    });
+
+    it('Small Tier (< 400px): shows single day tabs', () => {
+      (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false });
+      vi.stubGlobal('innerWidth', 300);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      act(() => {
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      expect(screen.getByRole('button', { name: /21/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /20/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';
+      (useStats as any).mockReturnValue({
+        timetable: {
+          slots: [
+            { date: day, sleeping: true, slot_start: '10:00', slot_end: '10:30' }
+          ],
+        },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      expect(container.querySelector(`[data-testid="cell-${day}-10:00"]`)).toHaveClass('bg-green-500');
+      expect(container.querySelector(`[data-testid="cell-${day}-10:15"]`)).toHaveClass('bg-green-500');
+      expect(container.querySelector(`[data-testid="cell-${day}-10:30"]`)).toHaveClass('bg-gray-50');
+    });
+
+    it('handles midnight spanning correctly using two slots (as implemented)', () => {
+      const day1 = '2025-04-18';
+      const day2 = '2025-04-19';
+      (useStats as any).mockReturnValue({
+        timetable: {
+          slots: [
+            { date: day1, sleeping: true, slot_start: '23:00', slot_end: '00:00' },
+            { date: day2, sleeping: true, slot_start: '00:00', slot_end: '01:00' },
+          ],
+        },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      expect(container.querySelector(`[data-testid="cell-${day1}-23:00"]`)).toHaveClass('bg-green-500');
+      expect(container.querySelector(`[data-testid="cell-${day2}-00:00"]`)).toHaveClass('bg-green-500');
+    });
+  });
+
+  describe('Time Marker', () => {
+    it('renders red marker at correct position', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2025-04-18T12:00:00'));
+
+      (useStats as any).mockReturnValue({
+        timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '11:00', slot_end: '13:00' }] },
+        isLoading: false,
+      });
+
+      vi.stubGlobal('innerWidth', 1024);
+      const { container } = render(<Timetable {...defaultProps} />);
+
+      const marker = container.querySelector('.bg-red-500');
+      expect(marker).toBeInTheDocument();
+      expect(marker).toHaveStyle({ top: '384px' });
+
+      vi.useRealTimers();
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/tests/unit/components/stats/SummaryCards.test.tsx b/frontend/tests/unit/components/stats/SummaryCards.test.tsx
new file mode 100644
index 0000000..73e46b8
--- /dev/null
+++ b/frontend/tests/unit/components/stats/SummaryCards.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import SummaryCards from '../../../../src/components/stats/SummaryCards';
+
+describe('SummaryCards', () => {
+  const mockSummary = {
+    total_sleeps: 10,
+    avg_sleeps_per_day: 2.5,
+    total_sleeps_all_time: 100,
+    avg_sleeps_per_day_all_time: 2.5,
+  };
+
+  it('renders null when no summary is provided', () => {
+    const { container } = render(<SummaryCards summary={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders all summary data correctly', () => {
+    render(<SummaryCards summary={mockSummary} />);
+
+    expect(screen.getByText('10')).toBeInTheDocument();
+    const avgSleeps = screen.getAllByText('2.5');
+    expect(avgSleeps).toHaveLength(2);
+    expect(screen.getByText('100')).toBeInTheDocument();
+  });
+
+  it('displays correct labels', () => {
+    render(<SummaryCards summary={mockSummary} />);
+
+    expect(screen.getByText(/Total sleeps in period/i)).toBeInTheDocument();
+    expect(screen.getByText(/Avg sleeps per day in period/i)).toBeInTheDocument();
+    expect(screen.getByText(/Total sleeps \(all time\)/i)).toBeInTheDocument();
+    expect(screen.getByText(/Avg sleeps per day \(all time\)/i)).toBeInTheDocument();
+  });
+});
diff --git a/frontend/tests/unit/components/stats/WakeupPlot.test.tsx b/frontend/tests/unit/components/stats/WakeupPlot.test.tsx
new file mode 100644
index 0000000..247c393
--- /dev/null
+++ b/frontend/tests/unit/components/stats/WakeupPlot.test.tsx
@@ -0,0 +1,122 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import WakeupPlot from '../../../../src/components/stats/WakeupPlot';
+import { useStats } from '../../../../src/hooks/useStats';
+import { YAxis, Tooltip } from 'recharts';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+vi.mock('recharts', async () => {
+  const actual = await vi.importActual<typeof import('recharts')>('recharts');
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+    LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
+    XAxis: vi.fn(({ tickFormatter }) => <div data-testid="x-axis" data-tick-formatter={String(tickFormatter)} />),
+    YAxis: vi.fn(({ tickFormatter }) => <div data-testid="y-axis" data-tick-formatter={String(tickFormatter)} />),
+    CartesianGrid: vi.fn(),
+    Tooltip: vi.fn(({ formatter, labelFormatter }) => <div data-testid="tooltip" />),
+    Line: vi.fn(),
+  };
+});
+
+describe('WakeupPlot', () => {
+  const props = {
+    from_date: '2024-01-01',
+    to_date: '2024-01-07',
+    wakeup_ref: '07:00',
+    bedtime_ref: '20:00',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: undefined,
+      isLoading: true,
+    } as any);
+
+    render(<WakeupPlot {...props} />);
+    expect(screen.getByText(/Loading plot.../i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data is available', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: { days: [] },
+      isLoading: false,
+    } as any);
+
+    render(<WakeupPlot {...props} />);
+    expect(screen.getByText(/No data available for this period./i)).toBeInTheDocument();
+  });
+
+  it('renders chart and statistics correctly with data', () => {
+    const today = new Date().toISOString().split('T')[0];
+    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, wakeup_minutes: 0 },      // Today (7:00 + 0m = 07:00)
+          { date: yesterday, wakeup_minutes: 60 }, // 1d ago (7:00 + 60m = 08:00)
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<WakeupPlot {...props} />);
+    
+    expect(screen.getByText(/Wakeup Times/i)).toBeInTheDocument();
+    
+    // Check stats labels exist
+    expect(screen.getByText(/Earliest/i)).toBeInTheDocument();
+    expect(screen.getByText(/Latest/i)).toBeInTheDocument();
+    expect(screen.getByText(/Average/i)).toBeInTheDocument();
+    expect(screen.getByText(/Median/i)).toBeInTheDocument();
+
+    // Verify statistical calculations
+    expect(screen.getByText(/07:00/i)).toBeInTheDocument(); // Earliest
+    expect(screen.getByText(/08:00/i)).toBeInTheDocument(); // Latest
+    
+    // Since Average and Median both result in 07:30, we use getAllByText
+    const averageAndMedianTimes = screen.getAllByText(/07:30/i);
+    expect(averageAndMedianTimes).toHaveLength(2);
+  });
+
+  it('verifies YAxis tickFormatter handles numeric values', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [{ date: today, wakeup_minutes: 30 }],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<WakeupPlot {...props} />);
+
+    const yAxisCall = vi.mocked(YAxis).mock.calls[0][0];
+    expect(yAxisCall.tickFormatter(30)).toBe('07:30');
+  });
+
+  it('verifies Tooltip formatter handles various value types', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [{ date: today, wakeup_minutes: 30 }],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<WakeupPlot {...props} />);
+
+    const tooltipCall = vi.mocked(Tooltip).mock.calls[0][0];
+    expect(tooltipCall.formatter(30)).toEqual(['07:30', 'Wakeup']);
+    expect(tooltipCall.formatter('N/A')).toEqual(['N/A', 'Wakeup']);
+  });
+});
diff --git a/frontend/tests/unit/components/tracker/ClockPicker.test.tsx b/frontend/tests/unit/components/tracker/ClockPicker.test.tsx
new file mode 100644
index 0000000..e8feacb
--- /dev/null
+++ b/frontend/tests/unit/components/tracker/ClockPicker.test.tsx
@@ -0,0 +1,119 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import ClockPicker from '../../../../src/components/tracker/ClockPicker';
+
+describe('ClockPicker', () => {
+  const onChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders initial hour and minute correctly', () => {
+    render(<ClockPicker hour={10} minute={30} onChange={onChange} />);
+    
+    const hourButton = screen.getByRole('button', { name: /hour/i });
+    const minuteButton = screen.getByRole('button', { name: /minute/i });
+
+    expect(hourButton).toHaveClass('bg-white');
+    expect(minuteButton).toHaveClass('text-gray-500');
+  });
+
+  it('switches between hour and minute mode via buttons', () => {
+    render(<ClockPicker hour={10} minute={30} onChange={onChange} />);
+    
+    const minuteButton = screen.getByRole('button', { name: /minute/i });
+    fireEvent.click(minuteButton);
+
+    expect(minuteButton).toHaveClass('bg-white');
+    expect(screen.getByRole('button', { name: /hour/i })).toHaveClass('text-gray-500');
+  });
+
+  it('automatically switches to minute mode after selecting an hour', async () => {
+    render(<ClockPicker hour={10} minute={30} onChange={onChange} />);
+    
+    const dial = screen.getByRole('button', { name: /hour/i }).parentElement?.nextElementSibling as HTMLElement;
+    
+    // Mock getBoundingClientRect to simulate a center point
+    const rect = { left: 0, top: 0, width: 256, height: 256 };
+    vi.spyOn(dial, 'getBoundingClientRect').mockReturnValue(rect as DOMRect);
+
+    // Click at the very top (should be 0:00)
+    // Angle for 0 is 90 degrees in the component logic. 
+    // Center is (128, 128). Top point is (128, 0).
+    // x = 0, y = -128. atan2(-128, 0) = -90 deg. + 90 = 0 deg.
+    fireEvent.click(dial, { clientX: 128, clientY: 0 });
+
+    expect(onChange).toHaveBeenCalledWith(0, 30);
+    
+    // Fast-forward timers for the setTimeout in NumberDialPicker
+    act(() => {
+      vi.runAllTimers();
+    });
+
+    // Verify mode changed to minute
+    expect(screen.getByRole('button', { name: /minute/i })).toHaveClass('bg-white');
+    act(() => {
+      vi.runAllTimers();
+    });
+
+    // Verify mode changed to minute
+    expect(screen.getByRole('button', { name: /minute/i })).toHaveClass('bg-white');
+    vi.runAllTimers();
+
+    // Verify mode changed to minute
+    expect(screen.getByRole('button', { name: /minute/i })).toHaveClass('bg-white');
+  });
+
+  it('updates the correct value based on current mode', () => {
+    const { rerender } = render(<ClockPicker hour={10} minute={30} onChange={onChange} />);
+    const dial = screen.getByRole('button', { name: /hour/i }).parentElement?.nextElementSibling as HTMLElement;
+    vi.spyOn(dial, 'getBoundingClientRect').mockReturnValue({ left: 0, top: 0, width: 256, height: 256 } as DOMRect);
+
+    // 1. Test Hour Update (Mode is Hour)
+    // Click at the right side (90 degrees in math). 
+    // Center is (128, 128). Right point is (256, 128).
+    // x = 128, y = 0. atan2(0, 128) = 0 deg. + 90 = 90 deg.
+    // Step for hours is 360/24 = 15. 90/15 = index 6.
+    fireEvent.click(dial, { clientX: 256, clientY: 128 });
+    expect(onChange).toHaveBeenCalledWith(6, 30);
+
+    vi.clearAllMocks();
+
+    // 2. Test Minute Update (Switch to minute mode)
+    fireEvent.click(screen.getByRole('button', { name: /minute/i }));
+    
+    // Click at the bottom (180 degrees in math). 
+    // Center is (128, 128). Bottom point is (128, 256).
+    // x = 0, y = 128. atan2(128, 0) = 90 deg. + 90 = 180 deg.
+    // Step for minutes is 360/60 = 6. 180/6 = index 30.
+    fireEvent.click(dial, { clientX: 128, clientY: 256 });
+    expect(onChange).toHaveBeenCalledWith(10, 30); // Wait, the call should be (hour, val)
+    // Re-checking implementation: handleNumberChange calls handleTimeChange(hour, val) when mode is minute
+    // Since initial hour was 10:
+    expect(onChange).toHaveBeenLastCalledWith(10, 30);
+  });
+
+  it('handles circular rotation correctly (angle < 0)', () => {
+    render(<ClockPicker hour={10} minute={30} onChange={onChange} />);
+    const dial = screen.getByRole('button', { name: /hour/i }).parentElement?.nextElementSibling as HTMLElement;
+    vi.spyOn(dial, 'getBoundingClientRect').mockReturnValue({ left: 0, top: 0, width: 256, height: 256 } as DOMRect);
+
+    // Click slightly "behind" the start (e.g., 350 degrees)
+    // Center (128, 128). Point slightly above center-left.
+    // x = -10, y = -128. atan2(-128, -10) is approx -94 deg. + 90 = -4 deg.
+    // Code handles angle < 0 by adding 360 -> 356 deg.
+    fireEvent.click(dial, { clientX: 118, clientY: 0 });
+    
+    // Verify it didn't crash and called onChange with a valid index
+    expect(onChange).toHaveBeenCalled();
+    const lastCall = vi.mocked(onChange).mock.calls[0][0];
+    expect(lastCall).toBeGreaterThanOrEqual(0);
+    expect(lastCall).toBeLessThan(24);
+  });
+});
diff --git a/frontend/tests/unit/components/tracker/TimeAdjuster.test.tsx b/frontend/tests/unit/components/tracker/TimeAdjuster.test.tsx
new file mode 100644
index 0000000..6a4c46f
--- /dev/null
+++ b/frontend/tests/unit/components/tracker/TimeAdjuster.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import TimeAdjuster from '../../../../src/components/tracker/TimeAdjuster';
+
+// Mock time utils to avoid timezone issues in tests
+vi.mock('../../../src/utils/time', () => ({
+  toLocalDatetimeInputValue: vi.fn((d) => d.toISOString().slice(0, 16)),
+  toUTCFromLocalInput: vi.fn((val) => val), // simple identity for testing
+}));
+
+describe('TimeAdjuster', () => {
+  const onChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders with default value if provided', () => {
+    const defaultValue = '2024-01-01T12:00';
+    render(<TimeAdjuster onTimeChange={onChange} defaultValue={defaultValue} />);
+
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+    expect(input.value).toBe(defaultValue);
+  });
+
+  it('calls onTimeChange when input value changes', async () => {
+    render(<TimeAdjuster onTimeChange={onChange} />);
+
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '2024-01-01T13:00' } });
+
+    expect(onChange).toHaveBeenLastCalledWith('2024-01-01T12:00:00.000Z');
+  });
+
+  it('resets to now when reset button is clicked', () => {
+    const mockNow = new Date('2024-01-01T10:00:00');
+    vi.useFakeTimers();
+    vi.setSystemTime(mockNow);
+
+    render(<TimeAdjuster onTimeChange={onChange} />);
+    
+    const resetButton = screen.getByText(/Reset to now/i);
+    fireEvent.click(resetButton);
+
+    const input = screen.getByLabelText(/Time/i) as HTMLInputElement;
+    // The component calls toLocalDatetimeInputValue(new Date())
+    // Our mock returns the iso string slice.
+    expect(input.value).toBe('2024-01-01T10:00');
+    expect(onChange).toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+});
diff --git a/frontend/tests/unit/hooks/useSettings.test.tsx b/frontend/tests/unit/hooks/useSettings.test.tsx
new file mode 100644
index 0000000..8d1c72c
--- /dev/null
+++ b/frontend/tests/unit/hooks/useSettings.test.tsx
@@ -0,0 +1,123 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useSettings } from '../../../src/hooks/useSettings';
+import { SettingsProvider } from '../../../src/hooks/SettingsProvider';
+
+describe('useSettings hook', () => {
+  // Mock implementation of localStorage
+  const localStorageMock = (() => {
+    let store: Record<string, string> = {};
+    return {
+      getItem: vi.fn((key: string) => store[key] || null),
+      setItem: vi.fn((key: string, value: string) => {
+        store[key] = value.toString();
+      }),
+      removeItem: vi.fn((key: string) => {
+        delete store[key];
+      }),
+      clear: vi.fn(() => {
+        store = {};
+      }),
+    };
+  })();
+
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', localStorageMock);
+    vi.clearAllMocks();
+    // Clear the mock store
+    (localStorage as any).clear();
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SettingsProvider>{children}</SettingsProvider>
+  );
+
+  it('should return default settings when wrapped in SettingsProvider', () => {
+    const { result } = renderHook(() => useSettings(), { wrapper });
+
+    expect(result.current.settings).toEqual({
+      dayStart: '07:00',
+      dayEnd: '20:00',
+      wakeupRef: '04:00',
+      bedtimeRef: '19:00',
+      statsInterval: 7,
+      sessionsPerPage: 10,
+    });
+  });
+
+  it('should throw an error when used outside of SettingsProvider', () => {
+    expect(() => renderHook(() => useSettings())).toThrow(
+      'useSettings must be used within a SettingsProvider'
+    );
+  });
+
+  it('should update settings correctly via the update function', () => {
+    const { result } = renderHook(() => useSettings(), { wrapper });
+
+    act(() => {
+      result.current.update('dayStart', '08:30');
+    });
+
+    expect(result.current.settings.dayStart).toBe('08:30');
+    // Verify other settings remain unchanged
+    expect(result.current.settings.dayEnd).toBe('20:00');
+  });
+
+  it('should persist updated settings to localStorage', () => {
+    const setItemSpy = vi.spyOn(localStorage, 'setItem');
+    const { result } = renderHook(() => useSettings(), { wrapper });
+
+    act(() => {
+      result.current.update('statsInterval', 14);
+    });
+
+    expect(setItemSpy).toHaveBeenCalledWith(
+      'baby-sleep-settings',
+      expect.stringContaining('"statsInterval":14')
+    );
+  });
+
+  it('should initialize with settings from localStorage if available', () => {
+    const storedSettings = {
+      dayStart: '10:00',
+      dayEnd: '22:00',
+      wakeupRef: '06:00',
+      bedtimeRef: '21:00',
+      statsInterval: 5,
+      sessionsPerPage: 20,
+    };
+    localStorage.setItem('baby-sleep-settings', JSON.stringify(storedSettings));
+
+    const { result } = renderHook(() => useSettings(), { wrapper });
+
+    expect(result.current.settings).toEqual(storedSettings);
+  });
+
+  it('should fallback to default settings if localStorage contains invalid JSON', () => {
+    localStorage.setItem('baby-sleep-settings', 'invalid-json');
+
+    const { result } = renderHook(() => useSettings(), { wrapper });
+
+    expect(result.current.settings).toEqual({
+      dayStart: '07:00',
+      dayEnd: '20:00',
+      wakeupRef: '04:00',
+      bedtimeRef: '19:00',
+      statsInterval: 7,
+      sessionsPerPage: 10,
+    });
+  });
+
+  it('should handle empty localStorage by using default settings', () => {
+    localStorage.clear();
+    const { result } = renderHook(() => useSettings(), { wrapper });
+    expect(result.current.settings).toEqual({
+      dayStart: '07:00',
+      dayEnd: '20:00',
+      wakeupRef: '04:00',
+      bedtimeRef: '19:00',
+      statsInterval: 7,
+      sessionsPerPage: 10,
+    });
+  });
+});
diff --git a/frontend/tests/unit/hooks/useSleepSession.test.tsx b/frontend/tests/unit/hooks/useSleepSession.test.tsx
new file mode 100644
index 0000000..a48d1e4
--- /dev/null
+++ b/frontend/tests/unit/hooks/useSleepSession.test.tsx
@@ -0,0 +1,312 @@
+import { renderHook } from '@testing-library/react';
+import { useSleepSession, useSessions } from '../../../src/hooks/useSleepSession';
+import * as api from '../../../src/api/client';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import type { SleepSessionRead, SessionListResponse } from '../../../src/types';
+
+// Mock the API client
+vi.mock('../../../src/api/client', () => ({
+  fetchActiveSession: vi.fn(),
+  createSession: vi.fn(),
+  endSession: vi.fn(),
+  fetchSessions: vi.fn(),
+  deleteSession: vi.fn(),
+  updateSession: vi.fn(),
+}));
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+  },
+});
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={createTestQueryClient()}>
+    {children}
+  </QueryClientProvider>
+);
+vi.mock('../../../src/api/client', () => ({
+  fetchActiveSession: vi.fn(),
+  createSession: vi.fn(),
+  endSession: vi.fn(),
+  fetchSessions: vi.fn(),
+  deleteSession: vi.fn(),
+  updateSession: vi.fn(),
+}));
+
+// Mock React Query as requested
+vi.mock('@tanstack/react-query', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-query')>();
+  return {
+    ...actual,
+    useQuery: vi.fn(),
+    useMutation: vi.fn(),
+    useQueryClient: vi.fn(),
+  };
+});
+
+describe('useSleepSession and useSessions hooks', () => {
+  const mockInvalidateQueries = vi.fn();
+  const mockQueryClient = { invalidateQueries: mockInvalidateQueries };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useQueryClient as any).mockReturnValue(mockQueryClient);
+  });
+
+  describe('useSleepSession', () => {
+    const mockSession: SleepSessionRead = {
+      id: 1,
+      start_time: '2026-06-10T10:00:00Z',
+      end_time: null,
+      notes: 'Testing session',
+      created_at: '2026-06-10T10:00:00Z',
+      updated_at: '2026-06-10T10:00:00Z',
+    };
+
+    it('Test Case 6 (State): should return correct loading and session states', () => {
+      (useQuery as any).mockReturnValue({
+        data: mockSession,
+        isLoading: false,
+        isFetching: false,
+      });
+
+      (useMutation as any).mockImplementation(({ mutationFn }: { mutationFn: (args: any) => Promise<any> }) => ({
+        mutateAsync: vi.fn().mockImplementation(mutationFn),
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSleepSession());
+
+      expect(result.current.activeSession).toEqual(mockSession);
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    it('Test Case 1: should successfully create a session and invalidate queries', async () => {
+      (useQuery as any).mockReturnValue({ data: null, isLoading: false, isFetching: false });
+      (api.createSession as any).mockResolvedValue(mockSession);
+
+      (useMutation as any).mockImplementation(({ mutationFn, onSuccess }: { mutationFn: (args: any) => Promise<any>, onSuccess?: () => void }) => ({
+        mutateAsync: async (args: any) => {
+          const res = await mutationFn(args);
+          if (onSuccess) onSuccess();
+          return res;
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSleepSession());
+
+      await result.current.createSession({ start_time: '2026-06-10T10:00:00Z' } as any);
+
+      expect(api.createSession).toHaveBeenCalled();
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['activeSession'] });
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['sessions'] });
+    });
+
+    it('Test Case 2: should successfully end a session and invalidate queries', async () => {
+      (useQuery as any).mockReturnValue({ data: mockSession, isLoading: false, isFetching: false });
+      (api.endSession as any).mockResolvedValue({ ...mockSession, end_time: '2026-06-10T12:00:00Z' });
+
+      (useMutation as any).mockImplementation(({ mutationFn, onSuccess }: { mutationFn: (args: any) => Promise<any>, onSuccess?: () => void }) => ({
+        mutateAsync: async (args: any) => {
+          const res = await mutationFn(args);
+          if (onSuccess) onSuccess();
+          return res;
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSleepSession());
+
+      await result.current.endSession({ sessionId: 1, endTime: '2026-06-10T12:00:00Z' } as any);
+
+      expect(api.endSession).toHaveBeenCalled();
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['activeSession'] });
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['sessions'] });
+    });
+
+    it('Test Case 5 (Error Handling): should propagate errors during session creation', async () => {
+      (useQuery as any).mockReturnValue({ data: null, isLoading: false, isFetching: false });
+      const error = new Error('API Error');
+      (api.createSession as any).mockRejectedValue(error);
+
+      (useMutation as any).mockImplementation(({ mutationFn }: { mutationFn: (args: any) => Promise<any> }) => ({
+        mutateAsync: async (args: any) => {
+          return await mutationFn(args);
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSleepSession());
+
+      await expect(result.current.createSession({ start_time: '...' } as any)).rejects.toThrow('API Error');
+    });
+
+    it('Test Case 6 (State): should show isCreating when mutation is pending', () => {
+      (useQuery as any).mockReturnValue({ data: null, isLoading: false, isFetching: false });
+      (useMutation as any).mockReturnValueOnce({
+        mutateAsync: vi.fn(),
+        isPending: true,
+      }).mockReturnValueOnce({
+        mutateAsync: vi.fn(),
+        isPending: false,
+      });
+
+      const { result } = renderHook(() => useSleepSession());
+      expect(result.current.isCreating).toBe(true);
+    });
+
+    it('Test Case 6 (State): should show isEnding when mutation is pending', () => {
+      (useQuery as any).mockReturnValue({ data: mockSession, isLoading: false, isFetching: false });
+      (useMutation as any).mockReturnValueOnce({
+        mutateAsync: vi.fn(),
+        isPending: false,
+      }).mockReturnValueOnce({
+        mutateAsync: vi.fn(),
+        isPending: true,
+      });
+
+      const { result } = renderHook(() => useSleepSession());
+      expect(result.current.isEnding).toBe(true);
+    });
+  });
+
+  describe('useSessions', () => {
+    const mockSessionsResponse: SessionListResponse = {
+      sessions: [
+        { id: 1, start_time: '2026-06-10T10:00:00Z', end_time: null, notes: null, created_at: '...', updated_at: '...' },
+        { id: 2, start_time: '2026-06-10T10:00:00Z', end_time: null, notes: null, created_at: '...', updated_at: '...' },
+      ],
+      total: 2,
+    };
+
+    it('Test Case 6 (State): should return correct loading and sessions states', () => {
+      (useQuery as any).mockReturnValue({
+        data: mockSessionsResponse,
+        isLoading: false,
+      });
+
+      (useMutation as any).mockReturnValue({
+        mutateAsync: vi.fn(),
+        isPending: false,
+      });
+
+      const { result } = renderHook(() => useSessions());
+
+      expect(result.current.sessions).toEqual(mockSessionsResponse.sessions);
+      expect(result.current.total).toBe(2);
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    it('Test Case 3: should successfully delete a session and invalidate queries', async () => {
+      (useQuery as any).mockReturnValue({ data: mockSessionsResponse, isLoading: false });
+      (api.deleteSession as any).mockResolvedValue(undefined);
+
+      (useMutation as any).mockImplementation(({ mutationFn, onSuccess }: { mutationFn: (args: any) => Promise<any>, onSuccess?: () => void }) => ({
+        mutateAsync: async (args: any) => {
+          const res = await mutationFn(args);
+          if (onSuccess) onSuccess();
+          return res;
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSessions());
+
+      await (result.current.deleteSession as any)(1);
+
+      expect(api.deleteSession).toHaveBeenCalledWith(1);
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['sessions'] });
+    });
+
+    it('Test Case 4: should successfully update a session and invalidate queries', async () => {
+      (useQuery as any).mockReturnValue({ data: mockSessionsResponse, isLoading: false });
+      const updatePayload = { end_time: '2026-06-10T12:00:00Z' };
+      (api.updateSession as any).mockResolvedValue({ id: 1, ...updatePayload } as any);
+
+      (useMutation as any).mockImplementation(({ mutationFn, onSuccess }: { mutationFn: (args: any) => Promise<any>, onSuccess?: () => void }) => ({
+        mutateAsync: async (args: any) => {
+          const res = await mutationFn(args);
+          if (onSuccess) onSuccess();
+          return res;
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSessions());
+
+      await (result.current.updateSession as any)({ sessionId: 1, payload: updatePayload });
+
+      expect(api.updateSession).toHaveBeenCalledWith(1, updatePayload);
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['sessions'] });
+    });
+
+    it('Test Case 5 (Error Handling): should propagate errors during session deletion', async () => {
+      (useQuery as any).mockReturnValue({ data: mockSessionsResponse, isLoading: false });
+      const error = new Error('Delete failed');
+      (api.deleteSession as any).mockRejectedValue(error);
+
+      (useMutation as any).mockImplementation(({ mutationFn }: { mutationFn: (args: any) => Promise<any> }) => ({
+        mutateAsync: async (args: any) => {
+          return await mutationFn(args);
+        },
+        isPending: false,
+      }));
+
+      const { result } = renderHook(() => useSessions());
+
+      await expect((result.current.deleteSession as any)(1)).rejects.toThrow('Delete failed');
+    });
+
+    it('Test Case 6 (State): should show isDeleting when mutation is pending', () => {
+        (useQuery as any).mockReturnValue({ data: mockSessionsResponse, isLoading: false });
+        (useMutation as any).mockReturnValue({
+            mutateAsync: vi.fn(),
+            isPending: true,
+        });
+
+        const { result } = renderHook(() => useSessions());
+        expect(result.current.isDeleting).toBe(true);
+    });
+    it('Test Case 7 (Data Undefined): should return empty sessions and 0 total when data is undefined', () => {
+      (useQuery as any).mockReturnValue({
+        data: undefined,
+        isLoading: false,
+      });
+
+      (useMutation as any).mockReturnValue({
+        mutateAsync: vi.fn(),
+        isPending: false,
+      });
+
+      const { result } = renderHook(() => useSessions());
+
+      expect(result.current.sessions).toEqual([]);
+      expect(result.current.total).toBe(0);
+    });
+
+    it('Test Case 8 (Error Handling): should handle error from fetchSessions gracefully', () => {
+      (useQuery as any).mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        isError: true,
+        error: new Error('Fetch failed'),
+      });
+
+      (useMutation as any).mockReturnValue({
+        mutateAsync: vi.fn(),
+        isPending: false,
+      });
+
+      const { result } = renderHook(() => useSessions());
+
+      expect(result.current.sessions).toEqual([]);
+      expect(result.current.total).toBe(0);
+    });
+  });
+});
diff --git a/frontend/tests/unit/hooks/useStats.test.tsx b/frontend/tests/unit/hooks/useStats.test.tsx
new file mode 100644
index 0000000..7e4bbc2
--- /dev/null
+++ b/frontend/tests/unit/hooks/useStats.test.tsx
@@ -0,0 +1,162 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useStats, useSummary } from '../../../src/hooks/useStats';
+import * as api from '../../../src/api/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Mock the api client
+vi.mock('../../../src/api/client', () => ({
+  fetchDailySummary: vi.fn(),
+  fetchTimetable: vi.fn(),
+  fetchWakeSleepTimes: vi.fn(),
+  fetchSummary: vi.fn(),
+}));
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+  },
+});
+
+describe('useStats', () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={createTestQueryClient()}>
+      {children}
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return data and correctly transform daily stats on success', async () => {
+    const mockDailySummary = {
+      days: [
+        { date: '2024-01-01', total_minutes: 480, day_minutes: 240, night_minutes: 240 },
+        { date: '2024-01-02', total_minutes: 540, day_minutes: 300, night_minutes: 240 },
+      ],
+    };
+    const mockTimetable = { slots: [] };
+    const mockWakeupBedtime = { days: [] };
+
+    vi.mocked(api.fetchDailySummary).mockResolvedValueOnce(mockDailySummary);
+    vi.mocked(api.fetchTimetable).mockResolvedValueOnce(mockTimetable);
+    vi.mocked(api.fetchWakeSleepTimes).mockResolvedValueOnce(mockWakeupBedtime);
+
+    const { result } = renderHook(() => useStats('2024-01-01', '2024-01-02'), { wrapper });
+
+    // Initially loading
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    // Verify raw data
+    expect(result.current.dailySummary).toEqual(mockDailySummary);
+
+    // Verify transformation (total, day/night split in hours)
+    expect(result.current.transformedDailySummary).toEqual([
+      { date: '2024-01-01', daySleep: 4, nightSleep: 4, total: 8 },
+      { date: '2024-01-02', daySleep: 5, nightSleep: 4, total: 9 },
+    ]);
+
+    expect(result.current.timetable).toEqual(mockTimetable);
+    expect(result.current.wakeupBedtime).toEqual(mockWakeupBedtime);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should handle empty data from the API', async () => {
+    const mockEmptyDailySummary = { days: [] };
+    const mockTimetable = { slots: [] };
+    const mockWakeupBedtime = { days: [] };
+
+    vi.mocked(api.fetchDailySummary).mockResolvedValueOnce(mockEmptyDailySummary);
+    vi.mocked(api.fetchTimetable).mockResolvedValueOnce(mockTimetable);
+    vi.mocked(api.fetchWakeSleepTimes).mockResolvedValueOnce(mockWakeupBedtime);
+
+    const { result } = renderHook(() => useStats('2024-01-01', '2024-01-02'), { wrapper });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.dailySummary).toEqual(mockEmptyDailySummary);
+    expect(result.current.transformedDailySummary).toEqual([]);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should handle error state when the API request fails', async () => {
+    const error = new Error('API Failure');
+    vi.mocked(api.fetchDailySummary).mockRejectedValueOnce(error);
+    vi.mocked(api.fetchTimetable).mockResolvedValueOnce({ slots: [] });
+    vi.mocked(api.fetchWakeSleepTimes).mockResolvedValueOnce({ days: [] });
+
+    const { result } = renderHook(() => useStats('2024-01-01', '2024-01-02'), { wrapper });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.error).toBeDefined();
+    expect(result.current.error).toEqual(error);
+  });
+
+  it('should handle loading state transitions', async () => {
+    let resolvePromise: (value: any) => void;
+    const pendingPromise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    vi.mocked(api.fetchDailySummary).mockReturnValueOnce(pendingPromise as any);
+    vi.mocked(api.fetchTimetable).mockResolvedValueOnce({ slots: [] });
+    vi.mocked(api.fetchWakeSleepTimes).mockResolvedValueOnce({ days: [] });
+
+    const { result } = renderHook(() => useStats('2024-01-01', '2024-01-02'), { wrapper });
+
+    // Should be loading while promise is pending
+    expect(result.current.isLoading).toBe(true);
+
+    // Resolve the promise
+    resolvePromise!({ days: [] });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+  });
+});
+
+describe('useSummary', () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={createTestQueryClient()}>
+      {children}
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return data on success', async () => {
+    const mockSummary = {
+      total_sleeps: 10,
+      avg_sleeps_per_day: 2,
+      total_sleeps_all_time: 100,
+      avg_sleeps_per_day_all_time: 2.5,
+    };
+    vi.mocked(api.fetchSummary).mockResolvedValueOnce(mockSummary);
+
+    const { result } = renderHook(() => useSummary('2024-01-01', '2024-01-02'), { wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toEqual(mockSummary);
+    expect(api.fetchSummary).toHaveBeenCalledWith('2024-01-01', '2024-01-02');
+  });
+
+  it('should handle error on failure', async () => {
+    const error = new Error('API Failure');
+    vi.mocked(api.fetchSummary).mockRejectedValueOnce(error);
+
+    const { result } = renderHook(() => useSummary('2024-01-01', '2024-01-02'), { wrapper });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toEqual(error);
+  });
+});
diff --git a/frontend/tests/unit/utils/time.test.ts b/frontend/tests/unit/utils/time.test.ts
new file mode 100644
index 0000000..4168418
--- /dev/null
+++ b/frontend/tests/unit/utils/time.test.ts
@@ -0,0 +1,228 @@
+import { describe, it, expect, vi } from 'vitest';
+import { 
+  formatMinutesAfter, 
+  adjustForTimezone, 
+  timeToMinutes, 
+  formatMinutes,
+  toLocalDatetimeInputValue,
+  formatElapsedTime,
+  formatDateTime,
+  toUTCFromLocalInput,
+  getDurationMinutes,
+  clampToDay,
+  parseTime,
+  getDaysAgo,
+  getToday,
+  getLocalOffsetFromReference,
+  parseBackendDateTime
+} from '../../../src/utils/time';
+
+describe('formatMinutesAfter', () => {
+  it('formats minutes correctly with default reference (04:00)', () => {
+    expect(formatMinutesAfter(15)).toBe('04:15');
+    expect(formatMinutesAfter(-15)).toBe('03:45');
+  });
+
+  it('formats minutes correctly with custom reference', () => {
+    expect(formatMinutesAfter(15, '07:00')).toBe('07:15');
+    expect(formatMinutesAfter(-15, '07:00')).toBe('06:45');
+  });
+
+  it('handles wrap around midnight', () => {
+    expect(formatMinutesAfter(1425, '04:00')).toBe('03:45');
+    expect(formatMinutesAfter(-240, '04:00')).toBe('00:00');
+    expect(formatMinutesAfter(-255, '04:00')).toBe('23:45');
+  });
+
+  it('returns N/A for null minutes', () => {
+    expect(formatMinutesAfter(null)).toBe('N/A');
+  });
+
+  it('handles large number of minutes', () => {
+    expect(formatMinutesAfter(1440, '04:00')).toBe('04:00');
+  });
+});
+
+describe('timeToMinutes', () => {
+  it('converts HH:MM to total minutes', () => {
+    expect(timeToMinutes('00:00')).toBe(0);
+    expect(timeToMinutes('04:00')).toBe(240);
+    expect(timeToMinutes('23:59')).toBe(1439);
+  });
+});
+
+describe('formatMinutes', () => {
+  it('formats minutes into h m string', () => {
+    expect(formatMinutes(90)).toBe('1h 30m');
+    expect(formatMinutes(45)).toBe('45m');
+    expect(formatMinutes(0)).toBe('0m');
+  });
+});
+
+describe('adjustForTimezone', () => {
+  it('adjusts minutes by timezone offset', () => {
+    const offset = new Date().getTimezoneOffset();
+    expect(adjustForTimezone(0)).toBe(-offset);
+  });
+});
+
+describe('toLocalDatetimeInputValue', () => {
+  it('formats date to YYYY-MM-DDTHH:mm', () => {
+    const date = new Date(2024, 5, 9, 14, 30);
+    const result = toLocalDatetimeInputValue(date);
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+  });
+});
+
+describe('formatElapsedTime', () => {
+  it('formats elapsed time correctly', () => {
+    const now = new Date();
+    const then = new Date(now.getTime() - 90 * 60000); // 90 mins ago
+    const iso = then.toISOString();
+    expect(formatElapsedTime(iso)).toBe('1h 30m');
+
+    const then2 = new Date(now.getTime() - 45 * 60000); // 45 mins ago
+    const iso2 = then2.toISOString();
+    expect(formatElapsedTime(iso2)).toBe('45m');
+  });
+
+  it('handles ISO strings with spaces instead of T', () => {
+    const now = new Date();
+    const then = new Date(now.getTime() - 10 * 60000);
+    const iso = then.toISOString().replace('T', ' ');
+    expect(formatElapsedTime(iso)).toBe('10m');
+  });
+});
+
+describe('formatDateTime', () => {
+  it('formats date object to YYYY-MM-DD HH:mm', () => {
+    const date = new Date(2024, 5, 9, 14, 30);
+    const result = formatDateTime(date);
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/);
+  });
+
+  it('formats ISO string to YYYY-MM-DD HH:mm', () => {
+    const iso = '2024-06-09T14:30:00Z';
+    const result = formatDateTime(iso);
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/);
+  });
+
+  it('handles strings without Z by appending it', () => {
+    const iso = '2024-06-09T14:30:00';
+    const result = formatDateTime(iso);
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/);
+  });
+});
+
+describe('toUTCFromLocalInput', () => {
+  it('converts local datetime input to ISO UTC string', () => {
+    const input = '2024-06-09T14:30';
+    const result = toUTCFromLocalInput(input);
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/);
+  });
+
+  it('returns empty string for invalid input', () => {
+    expect(toUTCFromLocalInput('invalid')).toBe('');
+  });
+});
+
+describe('getDurationMinutes', () => {
+  it('calculates duration correctly between two dates', () => {
+    const start = '2024-06-09T10:00:00Z';
+    const end = '2024-06-09T11:30:00Z';
+    expect(getDurationMinutes(start, end)).toBe(90);
+  });
+
+  it('calculates duration correctly between date objects', () => {
+    const start = new Date('2024-06-09T10:00:00Z');
+    const end = new Date('2024-06-09T11:30:00Z');
+    expect(getDurationMinutes(start, end)).toBe(90);
+  });
+});
+
+describe('clampToDay', () => {
+  it('clamps to start of day', () => {
+    const date = new Date(2024, 5, 9, 14, 30);
+    const clamped = clampToDay(date, 'start');
+    expect(clamped.getHours()).toBe(0);
+    expect(clamped.getMinutes()).toBe(0);
+  });
+
+  it('clamps to end of day', () => {
+    const date = new Date(2024, 5, 9, 14, 30);
+    const clamped = clampToDay(date, 'end');
+    expect(clamped.getHours()).toBe(23);
+    expect(clamped.getMinutes()).toBe(59);
+  });
+});
+
+describe('parseTime', () => {
+  it('parses HH:MM string to Date object on today', () => {
+    const timeStr = '14:30';
+    const parsed = parseTime(timeStr);
+    const now = new Date();
+    expect(parsed.getHours()).toBe(14);
+    expect(parsed.getMinutes()).toBe(30);
+    expect(parsed.getDate()).toBe(now.getDate());
+  });
+
+  it('parses HH:MM string to Date object on a specific date', () => {
+    const baseDate = new Date(2024, 5, 9);
+    const parsed = parseTime('14:30', baseDate);
+    expect(parsed.getFullYear()).toBe(2024);
+    expect(parsed.getMonth()).toBe(5); // June is 5 in JS Date
+    expect(parsed.getDate()).toBe(9);
+    expect(parsed.getHours()).toBe(14);
+    expect(parsed.getMinutes()).toBe(30);
+  });
+});
+
+describe('getDaysAgo', () => {
+  it('returns ISO date string for N days ago', () => {
+    const today = getToday();
+    expect(getDaysAgo(0)).toBe(today);
+    // Note: this depends on the current date, so we can only check format and relative-ish
+    expect(getDaysAgo(1)).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+  });
+});
+
+describe('getToday', () => {
+  it('returns today in YYYY-MM-DD format', () => {
+    const today = getToday();
+    const expected = new Date().toISOString().split('T')[0];
+    expect(today).toBe(expected);
+  });
+});
+
+describe('getLocalOffsetFromReference', () => {
+  it('calculates local offset from reference', () => {
+    const utcMinutes = 1440 / 2; // Midday UTC (720 mins)
+    const reference = '04:00'; // 240 mins
+    // adjustForTimezone(720) = 720 - offset
+    // timeToMinutes('04:00') = 240
+    // result = (720 - offset) - 240 = 480 - offset
+    const offset = new Date().getTimezoneOffset();
+    expect(getLocalOffsetFromReference(utcMinutes, reference)).toBe(480 - offset);
+  });
+});
+
+describe('parseBackendDateTime', () => {
+  it('parses ISO string correctly', () => {
+    const iso = '2024-06-09T14:30:00Z';
+    const parsed = parseBackendDateTime(iso);
+    expect(parsed.toISOString()).toBe(new Date(iso).toISOString());
+  });
+
+  it('appends Z to strings without timezone', () => {
+    const iso = '2024-06-09T14:30:00';
+    const parsed = parseBackendDateTime(iso);
+    expect(parsed.toISOString()).toBe(new Date(iso + 'Z').toISOString());
+  });
+
+  it('handles already Z-terminated strings', () => {
+    const iso = '2024-06-09T14:30:00Z';
+    const parsed = parseBackendDateTime(iso);
+    expect(parsed.toISOString()).toBe(new Date(iso).toISOString());
+  });
+});
+
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 7dc9679..2cfe5b0 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -11,6 +11,10 @@ export default mergeConfig(
       include: ['src/**/*.{test,spec}.{ts,tsx}', 'tests/**/*.{test,spec}.{ts,tsx}'],
       exclude: ['**/tests/e2e/**', '**/node_modules/**'],
       reporters: ['dot'],
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'json', 'html'],
+      },
     },
   })
 )
\ No newline at end of file
diff --git a/frontend/vitest.setup.ts b/frontend/vitest.setup.ts
index bb02c60..487d5cb 100644
--- a/frontend/vitest.setup.ts
+++ b/frontend/vitest.setup.ts
@@ -1 +1,21 @@
-import '@testing-library/jest-dom/vitest';
+import '@testing-library/jest-dom';
+import { vi, beforeAll } from 'vitest';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value.toString(); },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
+beforeAll(() => {
+  vi.clearAllMocks();
+});
diff --git a/source_files.txt b/source_files.txt
new file mode 100644
index 0000000..f588acc
--- /dev/null
+++ b/source_files.txt
@@ -0,0 +1,31 @@
+App.tsx
+main.tsx
+types/index.ts
+utils/chartHelpers.ts
+utils/time.ts
+components/Navbar.tsx
+components/tracker/TimeAdjuster.tsx
+components/tracker/SleepButton.tsx
+components/tracker/StatusBanner.tsx
+components/tracker/ClockPicker.tsx
+components/tracker/TrackerPage.tsx
+components/Footer.tsx
+components/Playground.tsx
+components/stats/Pagination.tsx
+components/stats/SummaryCards.tsx
+components/stats/WakeupPlot.tsx
+components/stats/SessionList.tsx
+components/stats/SettingsPopover.tsx
+components/stats/BedtimePlot.tsx
+components/stats/SleepTimetable.tsx
+components/stats/DailySummary.tsx
+components/stats/StatsPage.tsx
+components/stats/IntervalPicker.tsx
+components/ErrorBoundary.tsx
+vite-env.d.ts
+hooks/useStats.ts
+hooks/SettingsProvider.tsx
+hooks/useSleepSession.ts
+hooks/useSettings.ts
+api/client.ts
+pages/Playground.tsx
diff --git a/test_files.txt b/test_files.txt
new file mode 100644
index 0000000..57c3161
--- /dev/null
+++ b/test_files.txt
@@ -0,0 +1,27 @@
+unit/chartHelpers.test.ts
+unit/timezone_fix.test.ts
+unit/utils/time.test.ts
+unit/components/stats/SessionList.test.tsx
+unit/components/stats/SleepTimetable.test.tsx
+unit/components/stats/Pagination.test.tsx
+unit/StatusBanner.test.tsx
+unit/hooks/useStats.test.tsx
+unit/hooks/useSleepSession.test.tsx
+unit/hooks/useSettings.test.tsx
+unit/api/client.test.ts
+unit/TimeAdjuster.test.tsx
+unit/time.test.ts
+unit/SleepButton.test.tsx
+test-utils.tsx
+simple.test.ts
+e2e/smoke.spec.ts
+e2e/playground.spec.ts
+e2e/connectivity.spec.ts
+e2e/stop-sleep.spec.ts
+e2e/pagination.spec.ts
+e2e/tracker.spec.ts
+e2e/timetable_timezone.spec.ts
+e2e/time_adjuster_visual.spec.ts
+e2e/timetable_mock.spec.ts
+e2e/stats.spec.ts
+e2e/playground_exhaustive.spec.ts
diff --git a/todo.md b/todo.md
index 5f6d91e..266606d 100644
--- a/todo.md
+++ b/todo.md
@@ -1,8 +1,9 @@
 # Things I need to tell my AI to do
 
-- [/backend start] Check so that all tests actually make sense, maybe some are now obsolete, and some are missing
+- [/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
 - [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: