Display overdue tasks count on dashboard with clickable navigation

[Copilot]

The dashboard's "Today's Overview" section only showed tasks due today — no visibility into overdue tasks. Both counts should also link to the tasks page.

Changes

Dashboard UI (index.html)

• Added "Overdue Tasks" stat item (#overdueTasksItem / #overdueTasksCount) to the overview grid
• Applied overview-item-clickable class to both "Tasks Due Today" and "Overdue Tasks" items

Styling (css/styles.css)

• .overview-item-clickable — cursor pointer + hover highlight
• .overview-item .value.overdue — red text via --danger-color to visually distinguish overdue count

Logic (src/app.ts)

• renderDashboard() — computes overdue tasks as incomplete tasks with a non-empty dueDate strictly before today:

  const overdueTasks = tasks.filter(t => !t.completed && !!t.dueDate && t.dueDate < today);

• setupEventListeners() — "Tasks Due Today" click navigates to tasks tab; "Overdue Tasks" click sets statusFilter to 'overdue' before switching, so filterTasks() picks it up on render:

  document.getElementById('overdueTasksItem')!.addEventListener('click', () => {
      (document.getElementById('statusFilter') as HTMLSelectElement).value = 'overdue';
      this.switchTab('tasks');
  });

Tests (e2e/app.spec.ts)

• 5 new e2e tests: overdue count renders, increments with overdue tasks, excludes completed tasks, and both clicks navigate correctly with/without filter applied

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Display overdue tasks on the dashboard</issue_title>
<issue_description>Currently the dashboard displays the number of tasks due today already. We should add the number of tasks that are overdue in the "Today's Overview" section on the dashboard.

Clicking on the number of tasks due today should take the user to the task page. Clicking the number of tasks overdue should also take the user to the tasks page but filter for Overdue tasks.

Add tests for the new functionality</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Display overdue tasks on the dashboard #22

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.