'use client'; import { CheckCircle, FileTextIcon, Loader2, PauseIcon, PlayIcon, Trash2Icon, } from 'lucide-react'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; interface Task { id: string; title: string; assignee: string; status: 'pending' | 'in-progress' | 'completed' | 'blocked'; priority: 'low' | 'medium' | 'high' | 'urgent'; dueDate: string; notes: string; } type TaskActionType = 'start' | 'pause' | 'complete' | 'delete' | 'view'; const tasks: Task[] = [ { id: 'TASK-001', title: 'Implement User Authentication', assignee: 'Sarah Chen', status: 'in-progress', priority: 'high', dueDate: '2024-03-25', notes: 'OAuth 2.0 integration with Google and GitHub providers', }, { id: 'TASK-002', title: 'Design Dashboard UI', assignee: 'Michael Torres', status: 'completed', priority: 'medium', dueDate: '2024-03-20', notes: 'Finalize dashboard layout with responsive grid system', }, { id: 'TASK-003', title: 'API Performance Optimization', assignee: 'Emma Rodriguez', status: 'pending', priority: 'urgent', dueDate: '2024-03-22', notes: 'Reduce API response time by implementing caching strategy', }, { id: 'TASK-004', title: 'Write Unit Tests', assignee: 'James Wilson', status: 'in-progress', priority: 'medium', dueDate: '2024-03-28', notes: 'Achieve 80% code coverage for authentication module', }, { id: 'TASK-005', title: 'Database Migration', assignee: 'Olivia Martinez', status: 'blocked', priority: 'high', dueDate: '2024-03-24', notes: 'Waiting for infrastructure team approval before proceeding', }, { id: 'TASK-006', title: 'Update Documentation', assignee: 'Lucas Anderson', status: 'pending', priority: 'low', dueDate: '2024-03-30', notes: 'Document new API endpoints and authentication flow', }, { id: 'TASK-007', title: 'Security Audit', assignee: 'Sophia Taylor', status: 'completed', priority: 'urgent', dueDate: '2024-03-19', notes: 'Conducted comprehensive security review and vulnerability assessment', }, ]; function getStatusBadge(status: Task['status']) { switch (status) { case 'pending': return ( Pending ); case 'in-progress': return ( In Progress ); case 'completed': return ( Completed ); case 'blocked': return ( Blocked ); default: return {status}; } } export default function Table02() { const [pendingAction, setPendingAction] = useState<{ id: string; type: TaskActionType; } | null>(null); const isTaskActionPending = (action: TaskActionType, taskId: string) => pendingAction?.id === taskId && pendingAction.type === action; const isTaskBusy = (taskId: string) => pendingAction?.id === taskId; const handleAction = (task: Task, actionType: TaskActionType) => { setPendingAction({ id: task.id, type: actionType }); setTimeout(() => { setPendingAction(null); console.log(`Action "${actionType}" completed for task:`, task.title); }, 1000); }; const renderTaskRow = (task: Task) => { const busy = isTaskBusy(task.id); const startPending = isTaskActionPending('start', task.id); const pausePending = isTaskActionPending('pause', task.id); const completePending = isTaskActionPending('complete', task.id); const deletePending = isTaskActionPending('delete', task.id); return ( {task.title} {task.assignee} {getStatusBadge(task.status)} {task.dueDate} } > {task.notes} {task.notes}

{(task.status === 'pending' || task.status === 'blocked') && ( handleAction(task, 'start')} size="icon" variant="outline" /> } > {startPending ? ( ) : ( )} Start )} {task.status === 'in-progress' && ( <> handleAction(task, 'pause')} size="icon" variant="outline" /> } > {pausePending ? ( ) : ( )} Pause handleAction(task, 'complete')} size="icon" variant="outline" /> } > {completePending ? ( ) : ( )} Complete )} handleAction(task, 'delete')} size="icon" variant="outline" /> } > {deletePending ? ( ) : ( )} Delete handleAction(task, 'view')} size="icon" variant="outline" /> } > View Details

); }; return (

Title Assignee Status Due Date Notes Actions {tasks.map(renderTaskRow)}

); }