# Task Management UI Skill Build complete task management interfaces with proper forms, modals, filters, and list views. ## Core Components ### Task List Page ```typescript \/\/ app\/tasks\/page.tsx 'use client'; import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Plus, Filter } from 'lucide-react'; import TaskCard from '@\/components\/tasks\/task-card'; import TaskFormModal from '@\/components\/tasks\/task-form-modal'; import TaskFilters from '@\/components\/tasks\/task-filters'; import { getTasks } from '@\/lib\/api\/tasks'; export default function TasksPage() { const [tasks, setTasks] = useState([]); const [isModalOpen, setIsModalOpen] = useState(false); const [filters, setFilters] = useState({ status: 'all', priority: 'all', tag: '' }); useEffect(() => { loadTasks(); }, [filters]); const loadTasks = async () => { const data = await getTasks(filters); setTasks(data); }; const filteredTasks = tasks.filter(task => { if (filters.status !== 'all' && task.status !== filters.status) return false; if (filters.priority !== 'all' && task.priority !== filters.priority) return false; if (filters.tag && !task.tags?.includes(filters.tag)) return false; return true; }); return (

{\/* Header *\/}

Tasks<\/h1>
{filteredTasks.length} task{filteredTasks.length !== 1 ? 's' : ''} <\/p> <\/div>
setIsModalOpen(true)} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary\/90 transition-colors" > New Task<\/span> <\/motion.button> <\/div> <\/div> {\/* Task List \/} {filteredTasks.length === 0 ? (

<\/div>
No tasks found<\/h3>
Try changing your filters or create a new task <\/p> <\/div> <\/motion.div> ) : (
{filteredTasks.map((task, index) => ( ))} <\/div> )} <\/AnimatePresence> {\/ Create Task Modal \/} setIsModalOpen(false)} onSuccess={loadTasks} \/> <\/div> ); } ``` ### Task Card Component ```typescript \/\/ components\/tasks\/task-card.tsx 'use client'; import { motion } from 'framer-motion'; import { Calendar, Tag, MoreVertical, Check } from 'lucide-react'; import { format } from 'date-fns'; interface TaskCardProps { task: any; index: number; onUpdate: () => void; } const priorityColors = { low: 'bg-blue-500\/10 text-blue-500 border-blue-500\/20', medium: 'bg-yellow-500\/10 text-yellow-500 border-yellow-500\/20', high: 'bg-red-500\/10 text-red-500 border-red-500\/20', }; const statusColors = { pending: 'bg-gray-500\/10 text-gray-500', active: 'bg-blue-500\/10 text-blue-500', completed: 'bg-green-500\/10 text-green-500', }; export default function TaskCard({ task, index, onUpdate }: TaskCardProps) { const handleToggleComplete = async () => { \/\/ Toggle task completion await fetch(`\/api\/tasks\/${task.id}`, { method: 'PATCH', body: JSON.stringify({ status: task.status === 'completed' ? 'active' : 'completed' }) }); onUpdate(); }; return ( {\/ Header *\/}

{task.title} <\/h3> {task.description && (
{task.description} <\/p> )} <\/div> <\/div>

{task ? 'Edit Task' : 'Create New Task'} <\/h2>

{task.title} <\/h3> {task.description && ( {task.description} <\/p> )} <\/div> <\/div>

{task ? 'Edit Task' : 'Create New Task'} <\/h2>

{task.title} <\/h3> {task.description && (
{task.description} <\/p> )} <\/div> <\/div>

task-management-ui