"use client"; import { Search, X } from "lucide-react"; import { useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; import type { TaskPriority, TaskStatus } from "./task-list"; export interface TaskFilter { status?: TaskStatus[]; priority?: TaskPriority[]; assigneeIds?: string[]; dueDateRange?: { start?: Date; end?: Date }; tags?: string[]; projectIds?: string[]; search?: string; } export interface SavedFilter { id: string; name: string; filter: TaskFilter; } export interface TaskFiltersProps { onFilterChange?: (filter: TaskFilter) => void; savedFilters?: SavedFilter[]; onSaveFilter?: (name: string, filter: TaskFilter) => Promise; onLoadFilter?: (filterId: string) => void; onDeleteFilter?: (filterId: string) => Promise; availableAssignees?: Array<{ id: string; name: string }>; availableProjects?: Array<{ id: string; name: string }>; availableTags?: string[]; className?: string; showSavedFilters?: boolean; } export default function TaskFilters({ onFilterChange, savedFilters = [], onSaveFilter, onLoadFilter, onDeleteFilter, availableAssignees = [], availableProjects = [], availableTags = [], className, showSavedFilters = true, }: TaskFiltersProps) { const [search, setSearch] = useState(""); const [status, setStatus] = useState([]); const [priority, setPriority] = useState([]); const [assignees, setAssignees] = useState([]); const [projects, setProjects] = useState([]); const [tags, setTags] = useState([]); const [dueDateStart, setDueDateStart] = useState(""); const [dueDateEnd, setDueDateEnd] = useState(""); const activeFilters = useMemo(() => { const count = (status.length > 0 ? 1 : 0) + (priority.length > 0 ? 1 : 0) + (assignees.length > 0 ? 1 : 0) + (projects.length > 0 ? 1 : 0) + (tags.length > 0 ? 1 : 0) + (dueDateStart || dueDateEnd ? 1 : 0) + (search.trim() ? 1 : 0); return count; }, [ status, priority, assignees, projects, tags, dueDateStart, dueDateEnd, search, ]); const currentFilter: TaskFilter = useMemo( () => ({ status: status.length > 0 ? (status as TaskStatus[]) : undefined, priority: priority.length > 0 ? (priority as TaskPriority[]) : undefined, assigneeIds: assignees.length > 0 ? assignees : undefined, projectIds: projects.length > 0 ? projects : undefined, tags: tags.length > 0 ? tags : undefined, dueDateRange: dueDateStart || dueDateEnd ? { start: dueDateStart ? new Date(dueDateStart) : undefined, end: dueDateEnd ? new Date(dueDateEnd) : undefined, } : undefined, search: search.trim() || undefined, }), [ status, priority, assignees, projects, tags, dueDateStart, dueDateEnd, search, ] ); const handleFilterChange = () => { onFilterChange?.(currentFilter); }; const handleClearAll = () => { setSearch(""); setStatus([]); setPriority([]); setAssignees([]); setProjects([]); setTags([]); setDueDateStart(""); setDueDateEnd(""); onFilterChange?.({}); }; const toggleArrayItem = ( array: T[], item: T, setter: (value: T[]) => void ) => { if (array.includes(item)) { setter(array.filter((i) => i !== item)); } else { setter([...array, item]); } }; return (

Filters {activeFilters > 0 ? `${activeFilters} active filter${activeFilters !== 1 ? "s" : ""}` : "No active filters"}

{ setSearch(e.target.value); handleFilterChange(); }} onKeyDown={(e) => { if (e.key === "Enter") { handleFilterChange(); } }} placeholder="Search tasks…" type="search" value={search} /> {search && ( )}

Status

{( ["todo", "in_progress", "done", "cancelled"] as TaskStatus[] ).map((s) => ( ))}

Priority

{(["low", "medium", "high", "urgent"] as TaskPriority[]).map( (p) => ( ) )}

{availableAssignees.length > 0 && (

Assignees {assignees.length > 0 && (

{assignees.map((id) => { const assignee = availableAssignees.find( (a) => a.id === id ); return assignee ? ( {assignee.name} ) : null; })}

)}

)} {availableProjects.length > 0 && (

Projects {projects.length > 0 && (

{projects.map((id) => { const project = availableProjects.find((p) => p.id === id); return project ? ( {project.name} ) : null; })}

)}

Due Date From { setDueDateStart(e.target.value); handleFilterChange(); }} type="date" value={dueDateStart} />

Due Date To { setDueDateEnd(e.target.value); handleFilterChange(); }} type="date" value={dueDateEnd} />

{activeFilters > 0 && ( <>

{activeFilters} active filter{activeFilters !== 1 ? "s" : ""}

)}

); }

Example Usage