Display overdue tasks count on dashboard with clickable navigation

css/styles.css

@@ -326,6 +326,18 @@ html, body {
     color: var(--primary-color);
 }
 
+.overview-item .value.overdue {
+    color: var(--danger-color);
+}
+
+.overview-item-clickable {
+    cursor: pointer;
+}
+
+.overview-item-clickable:hover {
+    background: var(--border-color);
+}
+
 .points-breakdown {
     display: grid;
     grid-template-columns: repeat(2, 1fr);

e2e/app.spec.ts

@@ -296,6 +296,84 @@ test.describe('Task Manager App', () => {
         });
     });
 
+    // ========================
+    // Dashboard Overdue Tasks
+    // ========================
+    test.describe('dashboard overdue tasks', () => {
+        test('should display overdue tasks count on dashboard', async ({ page }) => {
+            await expect(page.locator('#overdueTasksCount')).toBeVisible();
+            await expect(page.locator('#overdueTasksCount')).toHaveText('0');
+        });
+
+        test('should show overdue tasks count when there are overdue tasks', async ({ page }) => {
+            // Add a task with a past due date via localStorage
+            const yesterday = new Date();
+            yesterday.setDate(yesterday.getDate() - 1);
+            const dueDateStr = yesterday.toISOString().split('T')[0];
+
+            await page.evaluate((dueDate) => {
+                const data = JSON.parse(localStorage.getItem('taskManagerData') || '{}');
+                data.tasks = data.tasks || [];
+                data.tasks.push({
+                    id: 'overdue-test-1',
+                    title: 'Overdue Task',
+                    dueDate: dueDate,
+                    priority: 'medium',
+                    points: 10,
+                    repeatType: 'none',
+                    completed: false,
+                    createdDate: new Date().toISOString()
+                });
+                localStorage.setItem('taskManagerData', JSON.stringify(data));
+            }, dueDateStr);
+
+            await page.reload();
+            await page.waitForSelector('.header');
+
+            await expect(page.locator('#overdueTasksCount')).toHaveText('1');
+        });
+
+        test('should not count completed tasks as overdue', async ({ page }) => {
+            const yesterday = new Date();
+            yesterday.setDate(yesterday.getDate() - 1);
+            const dueDateStr = yesterday.toISOString().split('T')[0];
+
+            await page.evaluate((dueDate) => {
+                const data = JSON.parse(localStorage.getItem('taskManagerData') || '{}');
+                data.tasks = data.tasks || [];
+                data.tasks.push({
+                    id: 'completed-overdue-1',
+                    title: 'Completed Old Task',
+                    dueDate: dueDate,
+                    priority: 'medium',
+                    points: 10,
+                    repeatType: 'none',
+                    completed: true,
+                    completedDate: dueDate,
+                    createdDate: new Date().toISOString()
+                });
+                localStorage.setItem('taskManagerData', JSON.stringify(data));
+            }, dueDateStr);
+
+            await page.reload();
+            await page.waitForSelector('.header');
+
+            await expect(page.locator('#overdueTasksCount')).toHaveText('0');
+        });
+
+        test('clicking tasks due today count navigates to tasks tab', async ({ page }) => {
+            await page.click('#todayTasksItem');
+            await expect(page.locator('#tasks-tab')).toBeVisible();
+        });
+
+        test('clicking overdue tasks count navigates to tasks tab with overdue filter', async ({ page }) => {
+            await page.click('#overdueTasksItem');
+            await expect(page.locator('#tasks-tab')).toBeVisible();
+            const filterValue = await page.locator('#statusFilter').inputValue();
+            expect(filterValue).toBe('overdue');
+        });
+    });
+
     // ========================
     // Settings
     // ========================

index.html

@@ -78,10 +78,14 @@ <h1>📋 Task Manager</h1>
                     <div class="card dashboard-card">
                         <h2>Today's Overview</h2>
                         <div class="overview-stats">
-                            <div class="overview-item">
+                            <div class="overview-item overview-item-clickable" id="todayTasksItem">
                                 <span class="label">Tasks Due Today</span>
                                 <span class="value" id="todayTasksCount">0</span>
                             </div>
+                            <div class="overview-item overview-item-clickable" id="overdueTasksItem">
+                                <span class="label">Overdue Tasks</span>
+                                <span class="value overdue" id="overdueTasksCount">0</span>
+                            </div>
                             <div class="overview-item">
                                 <span class="label">Completed Today</span>
                                 <span class="value" id="completedTodayCount">0</span>

src/app.ts

@@ -185,6 +185,13 @@ class TaskManager {
             }
         });
 
+        // Dashboard overview click navigation
+        document.getElementById('todayTasksItem')!.addEventListener('click', () => this.switchTab('tasks'));
+        document.getElementById('overdueTasksItem')!.addEventListener('click', () => {
+            (document.getElementById('statusFilter') as HTMLSelectElement).value = 'overdue';
+            this.switchTab('tasks');
+        });
+
         // Date navigator
         document.getElementById('prevDayBtn')!.addEventListener('click', () => this.navigateDate(-1));
         document.getElementById('nextDayBtn')!.addEventListener('click', () => this.navigateDate(1));
@@ -272,6 +279,7 @@ class TaskManager {
 
         // Selected day's overview
         const todayTasks = tasks.filter(t => t.dueDate === today && !t.completed);
+        const overdueTasks = tasks.filter(t => !t.completed && !!t.dueDate && t.dueDate < today);
         const completedToday = tasks.filter(t => t.completedDate === today);
         const todayDay = this.selectedDate.getDay();
 
@@ -285,6 +293,7 @@ class TaskManager {
         });
 
         document.getElementById('todayTasksCount')!.textContent = String(todayTasks.length);
+        document.getElementById('overdueTasksCount')!.textContent = String(overdueTasks.length);
         document.getElementById('completedTodayCount')!.textContent = String(completedToday.length);
         document.getElementById('incompleteHabitsCount')!.textContent = String(incompleteHabits.length);