"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ListChecks, Plus, Calendar, AlertCircle, User } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const initialTasks = [ { id: 1, title: "Review PR #3421", status: "In Progress", priority: "High", assignee: "Sarah Chen", due: "Today", initials: "SC" }, { id: 2, title: "Sprint planning prep", status: "To Do", priority: "Medium", assignee: "Alex Lee", due: "Tomorrow", initials: "AL" }, { id: 3, title: "Update API documentation", status: "To Do", priority: "Low", assignee: "Mike J.", due: "Jun 15", initials: "MJ" }, { id: 4, title: "Fix login bug #231", status: "In Progress", priority: "High", assignee: "Sarah Chen", due: "Today", initials: "SC" }, { id: 5, title: "Deploy v2.1 to staging", status: "Done", priority: "High", assignee: "Alex Lee", due: "Jun 11", initials: "AL" }, { id: 6, title: "Write unit tests for auth", status: "Done", priority: "Medium", assignee: "Emily D.", due: "Jun 10", initials: "ED" }, ] const priorityStyles: Record = { High: "bg-red-500/10 text-red-600 border-red-200 dark:border-red-800", Medium: "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800", Low: "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800", } export default function Tasks() { const [tasks, setTasks] = useState(initialTasks) const [showCreate, setShowCreate] = useState(false) const tabs = ["To Do", "In Progress", "Done"] return (

Tasks

Manage your work tasks and assignments.

{showCreate && ( Create Task Add a new task to your board.

Title

Status

Priority

Due Date

)} {tabs.map((tab) => ( {tab} ({tasks.filter((t) => t.status === tab).length}) ))} {tabs.map((tab) => ( {tasks .filter((t) => t.status === tab) .map((task) => (

{task.title}

{task.assignee} {task.due}

{task.priority} ))} {tasks.filter((t) => t.status === tab).length === 0 && (

No tasks in this column.

)} ))}

) }