TF-1: Add search and filter controls to tasks page

[Copilot]

Implements search bar and filter dropdown for the /tasks page per TF-1 requirements.

Changes

New client component (components/tasks-page-client.tsx)

• Search input with icon and clear button (conditionally rendered)
• Filter dropdown with Status (todo, in_progress, review, done) and Priority (high, medium, low) checkboxes
• Client-side filtering using useMemo for real-time updates
• "No results" message when filters yield empty set
• All filter options default to selected

Modified server component (app/(dashboard)/tasks/page.tsx)

• Delegates rendering to TasksPageClient with initialTasks prop

Implementation

const filteredTasks = useMemo(() => {
  return initialTasks.filter((task) => {
    if (!selectedStatuses.has(task.status)) return false
    if (!selectedPriorities.has(task.priority)) return false
    
    if (searchText) {
      const searchLower = searchText.toLowerCase()
      return task.name.toLowerCase().includes(searchLower) 
        || task.description?.toLowerCase().includes(searchLower)
    }
    return true
  })
}, [initialTasks, searchText, selectedStatuses, selectedPriorities])

Screenshots

Search and filter UI

Filter dropdown expanded

Search results

Empty state

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TF-1 Tasks: Search and Filter</issue_title>
<issue_description> Implement the work described in Jira ticket TF-1, including looking at any Figma files mentioned. When finished, transition the ticket to "In Reivew".

To do the work use the following prompt chain which describes steps for best implementing the feature:

1. Open the repository on GitHub: https://github.com/bitovi/ai-enablement-prompts.
2. Execute the prompt writing-code/generate-feature/generate-feature.md</issue_description>

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

• Fixes TF-1 Tasks: Search and Filter #245

---

💡 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.