ref: change ui

src/views/tasks/TasksBoardView.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="flex h-full flex-col">
-    <div class="mb-3 flex items-center justify-end">
+    <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+      <div class="flex flex-wrap items-center gap-3">
+        <IconField class="sm:w-[280px]">
+          <InputIcon class="pi pi-search" />
+          <InputText v-model.trim="taskSearch" placeholder="Search tasks..." class="search-input w-full" />
+        </IconField>
+        <Select
+          v-model="assigneeFilter"
+          :options="assigneeOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="Assignee"
+          showClear
+          class="w-[180px]"
+        />
+      </div>
       <Button v-if="auth.can('tasks', 'create')" label="New Task" icon="pi pi-plus" @click="openCreate" />
     </div>
 
@@ -87,6 +102,26 @@ const members = ref<{ userId: string; displayName: string }[]>([])
 const draggingId = ref<string | null>(null)
 const dragOverStatus = ref<TaskStatus | null>(null)
 
+const taskSearch = ref('')
+const assigneeFilter = ref<string | null>(null)
+
+const assigneeOptions = computed(() =>
+  members.value.map((m) => ({ label: m.displayName, value: m.userId })),
+)
+
+const filteredTasks = computed(() => {
+  const q = taskSearch.value.toLowerCase()
+  return tasks.value.filter((t) => {
+    if (assigneeFilter.value && t.assigneeId !== assigneeFilter.value) return false
+    if (!q) return true
+    return (
+      t.title.toLowerCase().includes(q) ||
+      (t.description ?? '').toLowerCase().includes(q) ||
+      (t.assigneeName ?? '').toLowerCase().includes(q)
+    )
+  })
+})
+
 const dialogVisible = ref(false)
 const editingTask = ref<Task | null>(null)
 
@@ -103,7 +138,7 @@ const columns = [
 ]
 
 function tasksIn(status: TaskStatus) {
-  return tasks.value.filter((t) => t.status === status)
+  return filteredTasks.value.filter((t) => t.status === status)
 }
 
 async function load() {