From ea7ffaaffdf4bdcef5308ec5413db1cc21764b19 Mon Sep 17 00:00:00 2001
From: Gabriel Santana de Menezes <gabrielufmscc@gmail.com>
Date: Sun, 17 May 2026 19:22:44 -0400
Subject: [PATCH] Add multi-select task filters for projects and statuses

---
 .../repository/TaskRepositoryImpl.java        |  12 +-
 .../controllers/task/ListMyTasksRequest.java  |   2 +-
 .../task/TaskControllerMapper.java            |   2 +-
 .../usecase/repository/TaskRepository.java    |   4 +-
 .../task/listall/ListMyTasksInput.java        |   2 +-
 .../task/listall/ListMyTasksUseCase.java      |   2 +-
 .../src/components/MultiSelectDropdown.tsx    | 132 ++++++++++++++++++
 frontend/src/components/TaskFilterBar.tsx     |  62 +++-----
 frontend/src/components/taskFilters.ts        |  15 ++
 frontend/src/pages/TaskBoardPage.tsx          |   6 +-
 frontend/src/pages/TaskListPage.tsx           |   6 +-
 frontend/src/services/taskService.ts          |   4 +-
 12 files changed, 190 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/components/MultiSelectDropdown.tsx
 create mode 100644 frontend/src/components/taskFilters.ts

diff --git a/backend/src/main/java/net/beetechgroup/beetask/frameworks/persistence/repository/TaskRepositoryImpl.java b/backend/src/main/java/net/beetechgroup/beetask/frameworks/persistence/repository/TaskRepositoryImpl.java
index 93cf234..a108c03 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/frameworks/persistence/repository/TaskRepositoryImpl.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/frameworks/persistence/repository/TaskRepositoryImpl.java
@@ -53,7 +53,7 @@ public class TaskRepositoryImpl implements TaskRepository, PanacheRepository<Tas
     }
 
     @Override
-    public List<Task> findTasksByUserFiltered(String email, String text, Long projectId,
+    public List<Task> findTasksByUserFiltered(String email, String text, List<Long> projectIds,
                                               List<TaskStatus> statuses, List<Long> categoryIds) {
         StringBuilder query = new StringBuilder("user.email = ?1");
         List<Object> params = new ArrayList<>();
@@ -67,9 +67,9 @@ public class TaskRepositoryImpl implements TaskRepository, PanacheRepository<Tas
             params.add(pattern);
             idx += 2;
         }
-        if (Objects.nonNull(projectId)) {
-            query.append(" and project.id = ?").append(idx);
-            params.add(projectId);
+        if (Objects.nonNull(projectIds) && !projectIds.isEmpty()) {
+            query.append(" and project.id in ?").append(idx);
+            params.add(projectIds);
             idx++;
         }
         if (Objects.nonNull(statuses) && !statuses.isEmpty()) {
@@ -84,8 +84,8 @@ public class TaskRepositoryImpl implements TaskRepository, PanacheRepository<Tas
         }
 
         List<Task> tasks = find(query.toString(), params.toArray()).list().stream().map(TaskEntityMapper::toDomain).toList();
-        LOGGER.infof("Loaded %d tasks for user %s with filters (text=%s, projectId=%s, statuses=%s, categoryIds=%s)",
-                tasks.size(), email, text, projectId, statuses, categoryIds);
+        LOGGER.infof("Loaded %d tasks for user %s with filters (text=%s, projectIds=%s, statuses=%s, categoryIds=%s)",
+                tasks.size(), email, text, projectIds, statuses, categoryIds);
         return tasks;
     }
 
diff --git a/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/ListMyTasksRequest.java b/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/ListMyTasksRequest.java
index 7475e5b..024dcf4 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/ListMyTasksRequest.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/ListMyTasksRequest.java
@@ -11,7 +11,7 @@ public class ListMyTasksRequest {
     public String text;
 
     @QueryParam("projectId")
-    public Long projectId;
+    public List<Long> projectIds;
 
     @QueryParam("status")
     public List<TaskStatus> statuses;
diff --git a/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/TaskControllerMapper.java b/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/TaskControllerMapper.java
index c2291bb..5eb4650 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/TaskControllerMapper.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/interfaceadapters/controllers/task/TaskControllerMapper.java
@@ -12,7 +12,7 @@ import net.beetechgroup.beetask.usecase.task.update.UpdateTaskInput;
 public class TaskControllerMapper {
 
     public static ListMyTasksInput toListMyTasksInput(ListMyTasksRequest request, String email) {
-        return new ListMyTasksInput(email, request.text, request.projectId, request.statuses, request.categoryIds);
+        return new ListMyTasksInput(email, request.text, request.projectIds, request.statuses, request.categoryIds);
     }
 
     public static CreateTaskInput toCreateTaskInput(CreateTaskRequest request, String userEmail) {
diff --git a/backend/src/main/java/net/beetechgroup/beetask/usecase/repository/TaskRepository.java b/backend/src/main/java/net/beetechgroup/beetask/usecase/repository/TaskRepository.java
index 4478b5d..45f0833 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/usecase/repository/TaskRepository.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/usecase/repository/TaskRepository.java
@@ -13,7 +13,7 @@ public interface TaskRepository {
     List<Task> findTasksWorkedByUserInPeriod(String email, LocalDateTime start, LocalDateTime end);
     List<Task> findTasksFinishedByUserInPeriod(String email, LocalDateTime start, LocalDateTime end);
     List<Task> findTasksByUser(String email);
-    List<Task> findTasksByUserFiltered(String email, String text, Long projectId,
+    List<Task> findTasksByUserFiltered(String email, String text, List<Long> projectIds,
                                        List<TaskStatus> statuses, List<Long> categoryIds);
     List<Task> findTasksWorkedByOrgInPeriod(Long orgId, LocalDateTime start, LocalDateTime end);
     List<Task> findTasksFinishedByOrgInPeriod(Long orgId, LocalDateTime start, LocalDateTime end);
@@ -23,4 +23,4 @@ public interface TaskRepository {
     List<Task> findTasksFinishedByUserEmailsInPeriod(List<String> emails, LocalDateTime start, LocalDateTime end);
     long countByStatus(TaskStatus status);
     long sumAllCompletedTrackedMinutes();
-}
\ No newline at end of file
+}
diff --git a/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksInput.java b/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksInput.java
index c6dfbdc..1e1b9f4 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksInput.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksInput.java
@@ -4,5 +4,5 @@ import java.util.List;
 
 import net.beetechgroup.beetask.entities.task.TaskStatus;
 
-public record ListMyTasksInput(String email, String text, Long projectId,
+public record ListMyTasksInput(String email, String text, List<Long> projectIds,
                                 List<TaskStatus> statuses, List<Long> categoryIds) {}
diff --git a/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksUseCase.java b/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksUseCase.java
index cd413d7..ce7f75a 100644
--- a/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksUseCase.java
+++ b/backend/src/main/java/net/beetechgroup/beetask/usecase/task/listall/ListMyTasksUseCase.java
@@ -18,7 +18,7 @@ public class ListMyTasksUseCase {
 
     public List<CreateTaskOutput> execute(ListMyTasksInput input) {
         List<CreateTaskOutput> tasks = taskRepository.findTasksByUserFiltered(
-                        input.email(), input.text(), input.projectId(), input.statuses(), input.categoryIds())
+                        input.email(), input.text(), input.projectIds(), input.statuses(), input.categoryIds())
                 .stream().map(CreateTaskMapper::toCreateTaskOutput).toList();
         LOGGER.infof("Loaded %d tasks for user %s", tasks.size(), input.email());
         return tasks;
diff --git a/frontend/src/components/MultiSelectDropdown.tsx b/frontend/src/components/MultiSelectDropdown.tsx
new file mode 100644
index 0000000..27b274c
--- /dev/null
+++ b/frontend/src/components/MultiSelectDropdown.tsx
@@ -0,0 +1,132 @@
+import { Check, ChevronDown, X } from 'lucide-react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+
+import { cn } from '../lib/utils'
+
+export interface MultiSelectDropdownOption<T extends string | number> {
+  value: T
+  label: string
+  icon?: ReactNode
+}
+
+interface MultiSelectDropdownProps<T extends string | number> {
+  label: string
+  allLabel: string
+  options: MultiSelectDropdownOption<T>[]
+  selected: T[]
+  onChange: (selected: T[]) => void
+  className?: string
+}
+
+export function MultiSelectDropdown<T extends string | number>({
+  label,
+  allLabel,
+  options,
+  selected,
+  onChange,
+  className,
+}: MultiSelectDropdownProps<T>) {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [isOpen])
+
+  const toggleValue = (value: T) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((item) => item !== value))
+      return
+    }
+
+    onChange([...selected, value])
+  }
+
+  const getSummaryLabel = () => {
+    if (selected.length === 0) return allLabel
+    if (selected.length === 1) {
+      return options.find((option) => option.value === selected[0])?.label ?? allLabel
+    }
+    return `${selected.length} selecionados`
+  }
+
+  return (
+    <div ref={containerRef} className={cn('relative min-w-0', className)}>
+      <span className="mb-1.5 block text-[10px] font-black uppercase tracking-widest text-text-muted">
+        {label}
+      </span>
+
+      <button
+        type="button"
+        onClick={() => setIsOpen((current) => !current)}
+        className={cn(
+          'flex h-11 w-full items-center justify-between gap-3 rounded-xl border border-border-soft bg-app-bg px-3 text-left text-sm text-text-main outline-none transition-all',
+          'focus:border-brand focus:ring-2 focus:ring-brand/10',
+          isOpen && 'border-brand ring-2 ring-brand/10',
+        )}
+      >
+        <span className="truncate">{getSummaryLabel()}</span>
+        <ChevronDown
+          size={16}
+          className={cn('shrink-0 text-text-muted transition-transform', isOpen && 'rotate-180')}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-20 mt-2 w-full rounded-2xl border border-border-soft bg-surface p-2 shadow-xl">
+          <button
+            type="button"
+            onClick={() => onChange([])}
+            className={cn(
+              'flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm transition-colors',
+              selected.length === 0
+                ? 'bg-brand/10 font-bold text-brand'
+                : 'text-text-muted hover:bg-app-bg hover:text-text-main',
+            )}
+          >
+            <span className="truncate">{allLabel}</span>
+            {selected.length > 0 && <X size={14} className="shrink-0" />}
+          </button>
+
+          <div className="mt-2 max-h-64 overflow-y-auto">
+            {options.map((option) => {
+              const isSelected = selected.includes(option.value)
+
+              return (
+                <button
+                  key={String(option.value)}
+                  type="button"
+                  onClick={() => toggleValue(option.value)}
+                  className={cn(
+                    'flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm transition-colors',
+                    isSelected
+                      ? 'bg-brand text-white'
+                      : 'text-text-main hover:bg-app-bg',
+                  )}
+                >
+                  <span className="flex min-w-0 items-center gap-2">
+                    {option.icon}
+                    <span className="truncate">{option.label}</span>
+                  </span>
+                  <Check
+                    size={14}
+                    className={cn('shrink-0', isSelected ? 'opacity-100' : 'opacity-0')}
+                  />
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/TaskFilterBar.tsx b/frontend/src/components/TaskFilterBar.tsx
index 735a682..6b3ef13 100644
--- a/frontend/src/components/TaskFilterBar.tsx
+++ b/frontend/src/components/TaskFilterBar.tsx
@@ -1,24 +1,11 @@
 import { Filter, RefreshCw, Search } from 'lucide-react'
-import type { TaskStatus } from '../types/task'
 import { TASK_STATUS_LABELS, TASK_STATUS_OPTIONS } from '../types/task'
 import type { Project } from '../services/projectService'
 import type { Category } from '../types/category'
 import { MultiSelectChips } from './MultiSelectChips'
 import { CategoryIcon } from './CategoryIcon'
-
-export interface TaskFilters {
-  searchQuery: string
-  statuses: TaskStatus[]
-  categoryIds: number[]
-  projectId: number | 'ALL'
-}
-
-export const DEFAULT_TASK_FILTERS: TaskFilters = {
-  searchQuery: '',
-  statuses: [],
-  categoryIds: [],
-  projectId: 'ALL',
-}
+import { MultiSelectDropdown } from './MultiSelectDropdown'
+import type { TaskFilters } from './taskFilters'
 
 interface TaskFilterBarProps {
   filters: TaskFilters
@@ -57,25 +44,6 @@ export function TaskFilterBar({
           />
         </div>
 
-        {projects.length > 0 && (
-          <select
-            value={filters.projectId}
-            onChange={(e) =>
-              update({
-                projectId: e.target.value === 'ALL' ? 'ALL' : Number(e.target.value),
-              })
-            }
-            className="h-11 rounded-xl border border-border-soft bg-app-bg px-3 text-sm text-text-main outline-none transition-all focus:border-brand focus:ring-2 focus:ring-brand/10"
-          >
-            <option value="ALL">Todos os projetos</option>
-            {projects.map((p) => (
-              <option key={p.id} value={p.id}>
-                {p.name}
-              </option>
-            ))}
-          </select>
-        )}
-
         {onRefresh && (
           <button
             onClick={onRefresh}
@@ -87,11 +55,27 @@ export function TaskFilterBar({
         )}
       </div>
 
-      <div className="flex items-center gap-2">
-        <Filter size={16} className="shrink-0 text-text-muted" />
-        <span className="text-[10px] font-black uppercase tracking-widest text-text-muted whitespace-nowrap">Status</span>
-        <MultiSelectChips
-          options={TASK_STATUS_OPTIONS.map((s) => ({ value: s, label: TASK_STATUS_LABELS[s] }))}
+      <div className="grid gap-3 md:grid-cols-2">
+        {projects.length > 0 && (
+          <MultiSelectDropdown
+            label="Projetos"
+            allLabel="Todos os projetos"
+            options={projects.map((project) => ({
+              value: project.id,
+              label: project.name,
+            }))}
+            selected={filters.projectIds}
+            onChange={(projectIds) => update({ projectIds })}
+          />
+        )}
+
+        <MultiSelectDropdown
+          label="Status"
+          allLabel="Todos os status"
+          options={TASK_STATUS_OPTIONS.map((status) => ({
+            value: status,
+            label: TASK_STATUS_LABELS[status],
+          }))}
           selected={filters.statuses}
           onChange={(statuses) => update({ statuses })}
         />
diff --git a/frontend/src/components/taskFilters.ts b/frontend/src/components/taskFilters.ts
new file mode 100644
index 0000000..07d531e
--- /dev/null
+++ b/frontend/src/components/taskFilters.ts
@@ -0,0 +1,15 @@
+import type { TaskStatus } from '../types/task'
+
+export interface TaskFilters {
+  searchQuery: string
+  statuses: TaskStatus[]
+  categoryIds: number[]
+  projectIds: number[]
+}
+
+export const DEFAULT_TASK_FILTERS: TaskFilters = {
+  searchQuery: '',
+  statuses: [],
+  categoryIds: [],
+  projectIds: [],
+}
diff --git a/frontend/src/pages/TaskBoardPage.tsx b/frontend/src/pages/TaskBoardPage.tsx
index c01f696..d67b683 100644
--- a/frontend/src/pages/TaskBoardPage.tsx
+++ b/frontend/src/pages/TaskBoardPage.tsx
@@ -20,8 +20,8 @@ import type { Category } from '../types/category'
 import { cn } from '../lib/utils'
 import type { TaskResponse, TaskStatus } from '../types/task'
 import { TaskTimer } from '../components/TaskTimer'
-import { TaskFilterBar, DEFAULT_TASK_FILTERS } from '../components/TaskFilterBar'
-import type { TaskFilters } from '../components/TaskFilterBar'
+import { TaskFilterBar } from '../components/TaskFilterBar'
+import { DEFAULT_TASK_FILTERS, type TaskFilters } from '../components/taskFilters'
 import { CategoryBadge } from '../components/CategoryBadge'
 import { useAuth } from '../contexts/AuthContext'
 
@@ -47,7 +47,7 @@ export function TaskBoardPage() {
     try {
       const response = await taskService.getMyTasks({
         text: currentFilters.searchQuery || undefined,
-        projectId: currentFilters.projectId !== 'ALL' ? currentFilters.projectId : undefined,
+        projectIds: currentFilters.projectIds.length > 0 ? currentFilters.projectIds : undefined,
         statuses: currentFilters.statuses.length > 0 ? currentFilters.statuses : undefined,
         categoryIds: currentFilters.categoryIds.length > 0 ? currentFilters.categoryIds : undefined,
       })
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 5be4314..b827915 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -22,8 +22,8 @@ import type { Category } from '../types/category'
 import { cn } from '../lib/utils'
 import type { TaskResponse } from '../types/task'
 import { TaskTimer } from '../components/TaskTimer'
-import { TaskFilterBar, DEFAULT_TASK_FILTERS } from '../components/TaskFilterBar'
-import type { TaskFilters } from '../components/TaskFilterBar'
+import { TaskFilterBar } from '../components/TaskFilterBar'
+import { DEFAULT_TASK_FILTERS, type TaskFilters } from '../components/taskFilters'
 import { CategoryBadge } from '../components/CategoryBadge'
 import { useAuth } from '../contexts/AuthContext'
 
@@ -71,7 +71,7 @@ export function TaskListPage() {
     try {
       const response = await taskService.getMyTasks({
         text: currentFilters.searchQuery || undefined,
-        projectId: currentFilters.projectId !== 'ALL' ? currentFilters.projectId : undefined,
+        projectIds: currentFilters.projectIds.length > 0 ? currentFilters.projectIds : undefined,
         statuses: currentFilters.statuses.length > 0 ? currentFilters.statuses : undefined,
         categoryIds: currentFilters.categoryIds.length > 0 ? currentFilters.categoryIds : undefined,
       })
diff --git a/frontend/src/services/taskService.ts b/frontend/src/services/taskService.ts
index 657468e..3f64962 100644
--- a/frontend/src/services/taskService.ts
+++ b/frontend/src/services/taskService.ts
@@ -3,7 +3,7 @@ import type { TaskResponse, TaskStatus } from '../types/task'
 
 export interface GetMyTasksFilters {
   text?: string
-  projectId?: number
+  projectIds?: number[]
   statuses?: TaskStatus[]
   categoryIds?: number[]
 }
@@ -16,7 +16,7 @@ export const taskService = {
   async getMyTasks(filters?: GetMyTasksFilters): Promise<TaskResponse[]> {
     const params = new URLSearchParams()
     if (filters?.text) params.set('text', filters.text)
-    if (filters?.projectId) params.set('projectId', String(filters.projectId))
+    filters?.projectIds?.forEach((id) => params.append('projectId', String(id)))
     filters?.statuses?.forEach((s) => params.append('status', s))
     filters?.categoryIds?.forEach((id) => params.append('categoryId', String(id)))
     const query = params.toString()