import { Head, Link } from '@inertiajs/react'; import { Calendar, CheckCircle2, Circle, Filter, MoreVertical, Plus, Search, Tag, } from 'lucide-react'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { CreateTaskSheet } from '@/pages/tasks/components/CreateTaskSheet'; import { DeleteTaskDialog } from '@/pages/tasks/components/DeleteTaskDialog'; import { EditTaskSheet } from '@/pages/tasks/components/EditTaskSheet'; const DUMMY_TASKS = [ { id: 1, title: 'Draft homepage wireframes', project: 'Website Redesign', projectSlug: 'website-redesign', status: 'In Progress', priority: 'High', dueDate: 'Oct 24, 2024', color: 'bg-blue-500', }, { id: 2, title: 'Implement navigation', project: 'Website Redesign', projectSlug: 'website-redesign', status: 'Todo', priority: 'Medium', dueDate: 'Oct 26, 2024', color: 'bg-blue-500', }, { id: 3, title: 'Setup Vite + React', project: 'Tasko Mobile App', projectSlug: 'tasko-mobile-app', status: 'Completed', priority: 'High', dueDate: 'Oct 12, 2024', color: 'bg-purple-500', }, { id: 4, title: 'Define color palette', project: 'Website Redesign', projectSlug: 'website-redesign', status: 'Completed', priority: 'High', dueDate: 'Oct 15, 2024', color: 'bg-blue-500', }, ]; export default function Tasks() { const [searchQuery, setSearchQuery] = useState(''); const [selectedProject, setSelectedProject] = useState(null); const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); const [editingTask, setEditingTask] = useState(null); const [deletingTask, setDeletingTask] = useState(null); // Get unique projects for the filter const availableProjects = Array.from( new Set(DUMMY_TASKS.map((t) => t.project)), ); const filteredTasks = DUMMY_TASKS.filter((task) => { const matchesSearch = task.title .toLowerCase() .includes(searchQuery.toLowerCase()); const matchesProject = !selectedProject || task.project === selectedProject; return matchesSearch && matchesProject; }); const activeTasks = filteredTasks.filter((t) => t.status !== 'Completed'); const completedTasks = filteredTasks.filter( (t) => t.status === 'Completed', ); return ( <>
{/* Header Area */}

My Tasks

Manage all your assigned tasks across multiple projects.

{/* Filters & Actions */}
setSearchQuery(e.target.value)} className="h-10 w-full rounded-xl border border-transparent bg-neutral-50 pr-4 pl-10 text-sm outline-hidden transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:bg-neutral-800" />
Projects setSelectedProject(null)} className="cursor-pointer font-medium" > All Projects {availableProjects.map((project) => ( setSelectedProject(project) } className="cursor-pointer" > {project} ))}
{/* Task List */}
{/* Active Tasks Group */}

Active Tasks

{activeTasks.length > 0 ? ( activeTasks.map((task) => (

{task.title}

{task.project} • {' '} {task.dueDate}
{task.priority} setEditingTask(task) } className="cursor-pointer gap-2" > Edit Task setDeletingTask( task, ) } className="cursor-pointer gap-2 text-red-600" > Delete Task
)) ) : (

No active tasks found matching your filters.

)}
{/* Completed Tasks Group */}

Completed

{completedTasks.length > 0 ? ( completedTasks.map((task) => (

{task.title}

in {task.project}
)) ) : searchQuery || selectedProject ? (

No completed tasks match your filters.

) : null}
!open && setEditingTask(null)} projects={availableProjects} /> !open && setDeletingTask(null)} />
); } Tasks.layout = { breadcrumbs: [ { title: 'Tasks', href: tasks(), }, ], };