COMPLETE - Add search and filter functionality to tasks page

app/(dashboard)/tasks/actions.ts

@@ -57,6 +57,48 @@ export async function getAllTasks() {
     }
 }
 
+// Search and filter tasks
+export async function searchAndFilterTasks(
+    searchQuery?: string,
+    statusFilters?: string[],
+    priorityFilters?: string[]
+) {
+    try {
+        const whereClause: Record<string, unknown> = {};
+
+        // Add search query filter
+        if (searchQuery && searchQuery.trim()) {
+            whereClause.OR = [
+                { name: { contains: searchQuery, mode: "insensitive" } },
+                { description: { contains: searchQuery, mode: "insensitive" } },
+            ];
+        }
+
+        // Add status filter
+        if (statusFilters && statusFilters.length > 0) {
+            whereClause.status = { in: statusFilters };
+        }
+
+        // Add priority filter
+        if (priorityFilters && priorityFilters.length > 0) {
+            whereClause.priority = { in: priorityFilters };
+        }
+
+        const tasks = await prisma.task.findMany({
+            where: whereClause,
+            include: {
+                assignee: { select: { id: true, name: true, email: true, password: true } },
+                creator: { select: { id: true, name: true, email: true, password: true } },
+            },
+            orderBy: { createdAt: "desc" },
+        });
+
+        return { tasks, error: null };
+    } catch (e) {
+        return { tasks: [], error: "Failed to search tasks." };
+    }
+}
+
 // Delete a task by ID
 export async function deleteTask(taskId: number) {
     try {

app/(dashboard)/tasks/page.tsx

@@ -1,18 +1,90 @@
-import { Suspense } from "react"
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Plus, Search } from "lucide-react"
+import { Plus } from "lucide-react"
 import Link from "next/link"
 import { TaskList } from "@/components/task-list"
+import { TaskSearchFilter } from "@/components/task-search-filter"
 import { poppins } from "@/lib/fonts"
-
 import { getAllTasks } from "@/app/(dashboard)/tasks/actions"
 
-export const revalidate = 0
+import type { Task as PrismaTask, User } from "@/app/generated/prisma/client";
+
+type TaskWithProfile = PrismaTask & {
+  assignee?: Pick<User, "name"> | null;
+};
+
+
+export default function TasksPage() {
+    const [tasks, setTasks] = useState<TaskWithProfile[]>([])
+    const [filteredTasks, setFilteredTasks] = useState<TaskWithProfile[]>([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+    const [searchQuery, setSearchQuery] = useState("")
+    const [statusFilters, setStatusFilters] = useState<string[]>(["todo", "in_progress", "review", "done"])
+    const [priorityFilters, setPriorityFilters] = useState<string[]>(["high", "medium", "low"])
+
+    // Load initial tasks
+    useEffect(() => {
+        async function loadTasks() {
+            const { tasks: initialTasks, error: fetchError } = await getAllTasks();
+            if (fetchError) {
+                setError(fetchError)
+            } else {
+                setTasks(initialTasks || [])
+                setFilteredTasks(initialTasks || [])
+            }
+            setLoading(false)
+        }
+        loadTasks()
+    }, [])
+
+    // Apply filters when search or filters change
+    const applyFilters = useCallback(() => {
+        if (!tasks.length) return
+
+        let filtered = tasks
+
+        // Apply search filter
+        if (searchQuery.trim()) {
+            const query = searchQuery.toLowerCase()
+            filtered = filtered.filter(task => 
+                task.name.toLowerCase().includes(query) ||
+                task.description?.toLowerCase().includes(query)
+            )
+        }
 
+        // Apply status filter
+        if (statusFilters.length > 0) {
+            filtered = filtered.filter(task => statusFilters.includes(task.status))
+        }
+
+        // Apply priority filter
+        if (priorityFilters.length > 0) {
+            filtered = filtered.filter(task => priorityFilters.includes(task.priority))
+        }
+
+        setFilteredTasks(filtered)
+    }, [tasks, searchQuery, statusFilters, priorityFilters])
+
+    useEffect(() => {
+        applyFilters()
+    }, [applyFilters])
+
+    const handleSearchChange = useCallback((search: string) => {
+        setSearchQuery(search)
+    }, [])
+
+    const handleFiltersChange = useCallback((newStatusFilters: string[], newPriorityFilters: string[]) => {
+        setStatusFilters(newStatusFilters)
+        setPriorityFilters(newPriorityFilters)
+    }, [])
+
+    if (loading) {
+        return <div className="p-8">Loading tasks...</div>
+    }
 
-export default async function TasksPage() {
-    const { tasks, error } = await getAllTasks();
     if (error) {
         console.error("Error fetching data:", error)
         return <p className="p-8">Could not load data. Please try again later.</p>
@@ -30,9 +102,15 @@ export default async function TasksPage() {
                 </Link>
             </div>
 
-            <Suspense fallback={<div>Loading tasks...</div>}>
-                <TaskList initialTasks={tasks || []} />
-            </Suspense>
+            <TaskSearchFilter
+                onSearchChange={handleSearchChange}
+                onFiltersChange={handleFiltersChange}
+                initialSearch={searchQuery}
+                initialStatusFilters={statusFilters}
+                initialPriorityFilters={priorityFilters}
+            />
+
+            <TaskList initialTasks={filteredTasks} />
         </div>
     )
 }

components/task-list.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useOptimistic, useTransition, useState, useEffect } from "react"
+import { useOptimistic, useTransition, useState } from "react"
 import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -69,6 +69,15 @@ export function TaskList({ initialTasks }: { initialTasks: TaskWithProfile[]; })
       .toUpperCase()
   }
 
+  if (optimisticTasks.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground text-lg mb-2">No tasks found</p>
+        <p className="text-muted-foreground text-sm">No tasks match your current search and filter criteria.</p>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-4">
       {optimisticTasks.map((task) => (

components/task-search-filter.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Search, X, Filter } from "lucide-react"
+
+interface TaskSearchFilterProps {
+  onSearchChange: (search: string) => void
+  onFiltersChange: (statusFilters: string[], priorityFilters: string[]) => void
+  initialSearch?: string
+  initialStatusFilters?: string[]
+  initialPriorityFilters?: string[]
+}
+
+const STATUS_OPTIONS = [
+  { value: "todo", label: "Todo" },
+  { value: "in_progress", label: "In Progress" },
+  { value: "review", label: "Review" },
+  { value: "done", label: "Done" },
+]
+
+const PRIORITY_OPTIONS = [
+  { value: "high", label: "High" },
+  { value: "medium", label: "Medium" },
+  { value: "low", label: "Low" },
+]
+
+export function TaskSearchFilter({ 
+  onSearchChange, 
+  onFiltersChange,
+  initialSearch = "",
+  initialStatusFilters = STATUS_OPTIONS.map(s => s.value),
+  initialPriorityFilters = PRIORITY_OPTIONS.map(p => p.value)
+}: TaskSearchFilterProps) {
+  const [search, setSearch] = useState(initialSearch)
+  const [statusFilters, setStatusFilters] = useState<string[]>(initialStatusFilters)
+  const [priorityFilters, setPriorityFilters] = useState<string[]>(initialPriorityFilters)
+  const [isFilterOpen, setIsFilterOpen] = useState(false)
+
+  // Notify parent when search changes
+  useEffect(() => {
+    onSearchChange(search)
+  }, [search, onSearchChange])
+
+  // Notify parent when filters change
+  useEffect(() => {
+    onFiltersChange(statusFilters, priorityFilters)
+  }, [statusFilters, priorityFilters, onFiltersChange])
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+  }
+
+  const clearSearch = () => {
+    setSearch("")
+  }
+
+  const toggleStatusFilter = (status: string) => {
+    setStatusFilters(prev => 
+      prev.includes(status) 
+        ? prev.filter(s => s !== status)
+        : [...prev, status]
+    )
+  }
+
+  const togglePriorityFilter = (priority: string) => {
+    setPriorityFilters(prev => 
+      prev.includes(priority) 
+        ? prev.filter(p => p !== priority)
+        : [...prev, priority]
+    )
+  }
+
+  return (
+    <div className="flex items-center space-x-2 mb-6">
+      {/* Search Input */}
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search tasks..."
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="pl-10 pr-10"
+        />
+        {search && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearSearch}
+            className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Filter Dropdown */}
+      <DropdownMenu open={isFilterOpen} onOpenChange={setIsFilterOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon">
+            <Filter className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <div className="p-2">
+            <div className="font-semibold text-sm mb-2">Status</div>
+            {STATUS_OPTIONS.map((status) => (
+              <div key={status.value} className="flex items-center space-x-2 py-1">
+                <Checkbox
+                  id={`status-${status.value}`}
+                  checked={statusFilters.includes(status.value)}
+                  onCheckedChange={() => toggleStatusFilter(status.value)}
+                />
+                <label 
+                  htmlFor={`status-${status.value}`}
+                  className="text-sm font-normal cursor-pointer flex-1"
+                >
+                  {status.label}
+                </label>
+              </div>
+            ))}
+
+            <DropdownMenuSeparator className="my-2" />
+
+            <div className="font-semibold text-sm mb-2">Priority</div>
+            {PRIORITY_OPTIONS.map((priority) => (
+              <div key={priority.value} className="flex items-center space-x-2 py-1">
+                <Checkbox
+                  id={`priority-${priority.value}`}
+                  checked={priorityFilters.includes(priority.value)}
+                  onCheckedChange={() => togglePriorityFilter(priority.value)}
+                />
+                <label 
+                  htmlFor={`priority-${priority.value}`}
+                  className="text-sm font-normal cursor-pointer flex-1"
+                >
+                  {priority.label}
+                </label>
+              </div>
+            ))}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}