Add UI to show completed tasks in Tasks Overview and My Tasks

[Copilot]

Overview

This PR implements the ability to view completed tasks in both the Tasks Overview and My Tasks sections of the UI. The backend API endpoint (/api/v1/tasks/completed) was already available, but the frontend lacked the functionality to display this data.

Problem

Users had no way to view their completed tasks in the UI, making it difficult to review task history or verify completion status without navigating to individual task history pages.

Solution

Added a toggle button in both views that allows users to show/hide completed tasks on demand. The implementation follows existing conventions and patterns in the codebase.

Tasks Overview (Table View)

• Added a "Show/Hide Completed" toggle button next to the "New Task" button
• When enabled, displays a separate table showing completed tasks below the active tasks table
• Completed tasks table shows limited actions (only History view) since these tasks are already complete

My Tasks (Card View)

• Added a visibility toggle button (eye icon) in the header section
• When enabled, displays completed tasks as TaskCards in a "Completed Tasks" section
• Maintains visual consistency with the existing card-based task display
• Uses the same TaskCard component for a unified user experience

Implementation Details

Frontend Changes

API Layer (frontend/src/api/tasks.ts)

export const GetCompletedTasks = async (): Promise<TasksResponse> =>
  await Request<TasksResponse>(`/tasks/completed`)

Redux State (frontend/src/store/tasksSlice.ts)

• Added completedItems array to store completed tasks
• Added showCompleted boolean state (persisted in localStorage)
• Created fetchCompletedTasks async thunk following the same pattern as fetchTasks
• Added toggleShowCompleted action to manage visibility state

UI Components

• TasksOverview.tsx: Added toggle button and completed tasks table
• MyTasks.tsx: Added toggle button and completed tasks section

Key Features

• Persisted State: The show/hide toggle state is persisted in localStorage (like group_by) and restored on page load
• Smart Caching: Completed tasks are fetched only once when first toggled, preventing unnecessary API calls
• Consistent UI: Follows existing design patterns and component structure
• Minimal Changes: Surgical modifications that don't affect existing functionality

Testing

• ✅ Build successful with no compilation errors
• ✅ Linter passed with no issues
• ✅ All existing unit tests passing
• ✅ CodeQL security scan passed (0 vulnerabilities)

Screenshots

The UI now includes toggle buttons to show/hide completed tasks in both views, with completed tasks displayed in a visually distinct section below active tasks.

Original prompt

I want to be able to show completed tasks in the UI, both in the Tasks Overview and the My Tasks sections. I think the api server already has a way to retrieve those APIs but I'm not sure about the frontend. Follow the existing conventions for calling HTTP REST APIs.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[dkhalife]

@copilot address the following feedback:
1- no need to keep track of completedFilteredItems and completedSearchQuery
2- there is no pagination support in the api to get the completed tasks
3- the showCompleted state should be kept in redux in the taskSlice and should be persisted just like we do for the group_by

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[Copilot]

@copilot address the following feedback:
1- no need to keep track of completedFilteredItems and completedSearchQuery
2- there is no pagination support in the api to get the completed tasks
...

All feedback addressed in commit c35cfeb:

1. ✅ Removed completedSearchQuery and filteredCompletedItems - now using completedItems directly
2. ✅ Removed pagination parameters from frontend API call - simplified to just GetCompletedTasks()
3. ✅ Moved showCompleted to Redux state in tasksSlice and persisted with storeValue('show_completed') pattern

The implementation is now simpler and follows the existing patterns in the codebase.

[Copilot]

Pull Request Overview

This PR adds the ability to view completed tasks in both the Tasks Overview and My Tasks sections of the UI. The backend API endpoint for retrieving completed tasks was already available, but the frontend lacked this functionality.

• Added toggle buttons to show/hide completed tasks in both views
• Implemented Redux state management for completed tasks with localStorage persistence
• Created new API integration for fetching completed tasks

Reviewed Changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/api/tasks.ts	Added GetCompletedTasks API function to fetch completed tasks
frontend/src/store/tasksSlice.ts	Added Redux state, actions, and thunks for managing completed tasks
frontend/src/views/Tasks/TasksOverview.tsx	Added toggle button and completed tasks table display
frontend/src/views/Tasks/MyTasks.tsx	Added toggle button and completed tasks card section

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}