"use client"; import { Calendar, CheckCircle2, Circle, Clock, Filter, MoreVertical, Plus, Search, SortAsc, User, X, } from "lucide-react"; import { useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york/ui/avatar"; 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 { Checkbox } from "@/registry/new-york/ui/checkbox"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; 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"; export type TaskStatus = "todo" | "in_progress" | "done" | "cancelled"; export type TaskPriority = "low" | "medium" | "high" | "urgent"; export interface TaskAssignee { id: string; name: string; avatar?: string; } export interface Task { id: string; title: string; description?: string; status: TaskStatus; priority: TaskPriority; assignees?: TaskAssignee[]; dueDate?: Date; tags?: string[]; projectId?: string; createdAt: Date; updatedAt: Date; } export interface TaskListProps { tasks?: Task[]; onTaskSelect?: (taskId: string) => void; onTaskUpdate?: (taskId: string, updates: Partial) => Promise; onTaskDelete?: (taskId: string) => Promise; onBulkAction?: (taskIds: string[], action: string) => Promise; onCreateTask?: () => void; className?: string; showSearch?: boolean; showFilters?: boolean; showBulkActions?: boolean; itemsPerPage?: number; } function formatDate(date: Date): string { const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const tomorrow = new Date(today); tomorrow.setDate(tomorrow.getDate() + 1); const dateOnly = new Date( date.getFullYear(), date.getMonth(), date.getDate() ); if (dateOnly.getTime() === today.getTime()) { return "Today"; } if (dateOnly.getTime() === tomorrow.getTime()) { return "Tomorrow"; } const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}`; } function getStatusIcon(status: TaskStatus) { switch (status) { case "done": return CheckCircle2; case "in_progress": return Clock; default: return Circle; } } function getStatusColor(status: TaskStatus): string { switch (status) { case "done": return "text-green-600"; case "in_progress": return "text-blue-600"; case "cancelled": return "text-muted-foreground"; default: return "text-muted-foreground"; } } function getPriorityColor(priority: TaskPriority): string { switch (priority) { case "urgent": return "bg-red-500"; case "high": return "bg-orange-500"; case "medium": return "bg-yellow-500"; default: return "bg-gray-500"; } } function getPriorityLabel(priority: TaskPriority): string { return priority.charAt(0).toUpperCase() + priority.slice(1); } function isOverdue(date?: Date): boolean { if (!date) return false; const now = new Date(); now.setHours(0, 0, 0, 0); const dueDate = new Date(date); dueDate.setHours(0, 0, 0, 0); return dueDate < now; } interface TaskItemProps { task: Task; isSelected: boolean; onSelect: (taskId: string, selected: boolean) => void; onTaskClick: (taskId: string) => void; onStatusChange: (taskId: string, status: TaskStatus) => void; onDelete: (taskId: string) => void; } function TaskItem({ task, isSelected, onSelect, onTaskClick, onStatusChange, onDelete, }: TaskItemProps) { const overdue = isOverdue(task.dueDate); return (

onSelect(task.id, checked === true)} onClick={(e) => e.stopPropagation()} />

onStatusChange(task.id, "todo")}> Mark as To Do onStatusChange(task.id, "in_progress")} > Mark as In Progress onStatusChange(task.id, "done")}> Mark as Done onDelete(task.id)} variant="destructive" > Delete

); } export default function TaskList({ tasks = [], onTaskSelect, onTaskUpdate, onTaskDelete, onBulkAction, onCreateTask, className, showSearch = true, showFilters = true, showBulkActions = true, itemsPerPage = 20, }: TaskListProps) { const [searchQuery, setSearchQuery] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [priorityFilter, setPriorityFilter] = useState("all"); const [sortBy, setSortBy] = useState("updated"); const [selectedTasks, setSelectedTasks] = useState>(new Set()); const [currentPage, setCurrentPage] = useState(1); const filteredTasks = useMemo(() => { let filtered = [...tasks]; if (searchQuery.trim()) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (task) => task.title.toLowerCase().includes(query) || task.description?.toLowerCase().includes(query) || task.tags?.some((tag) => tag.toLowerCase().includes(query)) ); } if (statusFilter !== "all") { filtered = filtered.filter((task) => task.status === statusFilter); } if (priorityFilter !== "all") { filtered = filtered.filter((task) => task.priority === priorityFilter); } filtered.sort((a, b) => { switch (sortBy) { case "title": return a.title.localeCompare(b.title); case "priority": { const priorityOrder = { urgent: 4, high: 3, medium: 2, low: 1 }; return ( (priorityOrder[b.priority] || 0) - (priorityOrder[a.priority] || 0) ); } case "dueDate": if (!(a.dueDate || b.dueDate)) return 0; if (!a.dueDate) return 1; if (!b.dueDate) return -1; return a.dueDate.getTime() - b.dueDate.getTime(); case "updated": default: return b.updatedAt.getTime() - a.updatedAt.getTime(); } }); return filtered; }, [tasks, searchQuery, statusFilter, priorityFilter, sortBy]); const paginatedTasks = useMemo(() => { const start = (currentPage - 1) * itemsPerPage; return filteredTasks.slice(start, start + itemsPerPage); }, [filteredTasks, currentPage, itemsPerPage]); const totalPages = Math.ceil(filteredTasks.length / itemsPerPage); const handleTaskSelect = (taskId: string, selected: boolean) => { setSelectedTasks((prev) => { const next = new Set(prev); if (selected) { next.add(taskId); } else { next.delete(taskId); } return next; }); }; const handleSelectAll = (checked: boolean) => { if (checked) { setSelectedTasks(new Set(paginatedTasks.map((t) => t.id))); } else { setSelectedTasks(new Set()); } }; const handleStatusChange = async (taskId: string, status: TaskStatus) => { await onTaskUpdate?.(taskId, { status }); }; const handleDelete = async (taskId: string) => { await onTaskDelete?.(taskId); setSelectedTasks((prev) => { const next = new Set(prev); next.delete(taskId); return next; }); }; const handleBulkAction = async (action: string) => { if (selectedTasks.size === 0) return; await onBulkAction?.(Array.from(selectedTasks), action); setSelectedTasks(new Set()); }; const allSelected = paginatedTasks.length > 0 && paginatedTasks.every((t) => selectedTasks.has(t.id)); const someSelected = paginatedTasks.some((t) => selectedTasks.has(t.id)); return (

Tasks {filteredTasks.length} task {filteredTasks.length !== 1 ? "s" : ""}

{onCreateTask && ( )}

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search tasks…" type="search" value={searchQuery} /> {searchQuery && ( )} )} {showFilters && (

)} {showBulkActions && selectedTasks.size > 0 && (

{selectedTasks.size} selected

)}

{paginatedTasks.length === 0 ? (

{searchQuery || statusFilter !== "all" || priorityFilter !== "all" ? "No tasks match your filters" : "No tasks yet"}

{onCreateTask ? "Create your first task to get started" : "Tasks will appear here"}

{onCreateTask && ( )}

) : (

{showBulkActions && (

Select all

)} {paginatedTasks.map((task) => ( {})} task={task} /> ))} {totalPages > 1 && (

Page {currentPage} of {totalPages}

)}

)} ); }

{task.title}

Redesign homepage hero section

Complete API documentation for v2.0

Implement OAuth 2.0 authentication flow

Example Usage

Redesign homepage hero section

Complete API documentation for v2.0

Implement OAuth 2.0 authentication flow