{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-02",
  "type": "registry:block",
  "title": "Table with Actions",
  "description": "A table with actions block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "badge",
    "button",
    "table",
    "tooltip"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/tables/table-02.tsx",
      "type": "registry:component",
      "target": "components/table-02.tsx",
      "content": "'use client';\n\nimport {\n  CheckCircle,\n  FileTextIcon,\n  Loader2,\n  PauseIcon,\n  PlayIcon,\n  Trash2Icon,\n} from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\n\ninterface Task {\n  id: string;\n  title: string;\n  assignee: string;\n  status: 'pending' | 'in-progress' | 'completed' | 'blocked';\n  priority: 'low' | 'medium' | 'high' | 'urgent';\n  dueDate: string;\n  notes: string;\n}\n\ntype TaskActionType = 'start' | 'pause' | 'complete' | 'delete' | 'view';\n\nconst tasks: Task[] = [\n  {\n    id: 'TASK-001',\n    title: 'Implement User Authentication',\n    assignee: 'Sarah Chen',\n    status: 'in-progress',\n    priority: 'high',\n    dueDate: '2024-03-25',\n    notes: 'OAuth 2.0 integration with Google and GitHub providers',\n  },\n  {\n    id: 'TASK-002',\n    title: 'Design Dashboard UI',\n    assignee: 'Michael Torres',\n    status: 'completed',\n    priority: 'medium',\n    dueDate: '2024-03-20',\n    notes: 'Finalize dashboard layout with responsive grid system',\n  },\n  {\n    id: 'TASK-003',\n    title: 'API Performance Optimization',\n    assignee: 'Emma Rodriguez',\n    status: 'pending',\n    priority: 'urgent',\n    dueDate: '2024-03-22',\n    notes: 'Reduce API response time by implementing caching strategy',\n  },\n  {\n    id: 'TASK-004',\n    title: 'Write Unit Tests',\n    assignee: 'James Wilson',\n    status: 'in-progress',\n    priority: 'medium',\n    dueDate: '2024-03-28',\n    notes: 'Achieve 80% code coverage for authentication module',\n  },\n  {\n    id: 'TASK-005',\n    title: 'Database Migration',\n    assignee: 'Olivia Martinez',\n    status: 'blocked',\n    priority: 'high',\n    dueDate: '2024-03-24',\n    notes: 'Waiting for infrastructure team approval before proceeding',\n  },\n  {\n    id: 'TASK-006',\n    title: 'Update Documentation',\n    assignee: 'Lucas Anderson',\n    status: 'pending',\n    priority: 'low',\n    dueDate: '2024-03-30',\n    notes: 'Document new API endpoints and authentication flow',\n  },\n  {\n    id: 'TASK-007',\n    title: 'Security Audit',\n    assignee: 'Sophia Taylor',\n    status: 'completed',\n    priority: 'urgent',\n    dueDate: '2024-03-19',\n    notes:\n      'Conducted comprehensive security review and vulnerability assessment',\n  },\n];\n\nfunction getStatusBadge(status: Task['status']) {\n  switch (status) {\n    case 'pending':\n      return (\n        <Badge\n          className=\"border-0 bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 dark:bg-amber-500/10 dark:text-amber-300 dark:hover:bg-amber-500/20\"\n          variant=\"outline\"\n        >\n          Pending\n        </Badge>\n      );\n    case 'in-progress':\n      return (\n        <Badge\n          className=\"border-0 bg-blue-500/15 text-blue-700 hover:bg-blue-500/25 dark:bg-blue-500/10 dark:text-blue-400 dark:hover:bg-blue-500/20\"\n          variant=\"outline\"\n        >\n          In Progress\n        </Badge>\n      );\n    case 'completed':\n      return (\n        <Badge\n          className=\"border-0 bg-green-500/15 text-green-700 hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:hover:bg-green-500/20\"\n          variant=\"outline\"\n        >\n          Completed\n        </Badge>\n      );\n    case 'blocked':\n      return (\n        <Badge\n          className=\"border-0 bg-rose-500/15 text-rose-700 hover:bg-rose-500/25 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20\"\n          variant=\"outline\"\n        >\n          Blocked\n        </Badge>\n      );\n    default:\n      return <Badge variant=\"secondary\">{status}</Badge>;\n  }\n}\n\nexport default function Table02() {\n  const [pendingAction, setPendingAction] = useState<{\n    id: string;\n    type: TaskActionType;\n  } | null>(null);\n\n  const isTaskActionPending = (action: TaskActionType, taskId: string) =>\n    pendingAction?.id === taskId && pendingAction.type === action;\n\n  const isTaskBusy = (taskId: string) => pendingAction?.id === taskId;\n\n  const handleAction = (task: Task, actionType: TaskActionType) => {\n    setPendingAction({ id: task.id, type: actionType });\n    setTimeout(() => {\n      setPendingAction(null);\n      console.log(`Action \"${actionType}\" completed for task:`, task.title);\n    }, 1000);\n  };\n\n  const renderTaskRow = (task: Task) => {\n    const busy = isTaskBusy(task.id);\n    const startPending = isTaskActionPending('start', task.id);\n    const pausePending = isTaskActionPending('pause', task.id);\n    const completePending = isTaskActionPending('complete', task.id);\n    const deletePending = isTaskActionPending('delete', task.id);\n\n    return (\n      <TableRow className=\"hover:bg-muted/50\" key={task.id}>\n        <TableCell className=\"h-16 px-4 font-medium\">{task.title}</TableCell>\n        <TableCell className=\"h-16 px-4 text-muted-foreground text-sm\">\n          {task.assignee}\n        </TableCell>\n        <TableCell className=\"h-16 px-4\">\n          {getStatusBadge(task.status)}\n        </TableCell>\n\n        <TableCell className=\"h-16 px-4 text-muted-foreground text-sm\">\n          {task.dueDate}\n        </TableCell>\n        <TableCell className=\"h-16 max-w-[300px] px-4 text-muted-foreground text-sm\">\n          <TooltipProvider>\n            <Tooltip>\n              <TooltipTrigger\n                render={<span className=\"block cursor-help truncate\" />}\n              >\n                {task.notes}\n              </TooltipTrigger>\n              <TooltipContent className=\"max-w-md\">{task.notes}</TooltipContent>\n            </Tooltip>\n          </TooltipProvider>\n        </TableCell>\n        <TableCell className=\"h-16 px-4\">\n          <TooltipProvider>\n            <div className=\"flex items-center gap-1\">\n              {(task.status === 'pending' || task.status === 'blocked') && (\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <Button\n                        aria-label=\"Start\"\n                        className=\"h-8 w-8\"\n                        disabled={busy}\n                        onClick={() => handleAction(task, 'start')}\n                        size=\"icon\"\n                        variant=\"outline\"\n                      />\n                    }\n                  >\n                    {startPending ? (\n                      <Loader2 className=\"size-4 animate-spin\" />\n                    ) : (\n                      <PlayIcon className=\"size-4\" />\n                    )}\n                  </TooltipTrigger>\n                  <TooltipContent>Start</TooltipContent>\n                </Tooltip>\n              )}\n              {task.status === 'in-progress' && (\n                <>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label=\"Pause\"\n                          className=\"h-8 w-8\"\n                          disabled={busy}\n                          onClick={() => handleAction(task, 'pause')}\n                          size=\"icon\"\n                          variant=\"outline\"\n                        />\n                      }\n                    >\n                      {pausePending ? (\n                        <Loader2 className=\"size-4 animate-spin\" />\n                      ) : (\n                        <PauseIcon className=\"size-4\" />\n                      )}\n                    </TooltipTrigger>\n                    <TooltipContent>Pause</TooltipContent>\n                  </Tooltip>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          aria-label=\"Complete\"\n                          className=\"h-8 w-8\"\n                          disabled={busy}\n                          onClick={() => handleAction(task, 'complete')}\n                          size=\"icon\"\n                          variant=\"outline\"\n                        />\n                      }\n                    >\n                      {completePending ? (\n                        <Loader2 className=\"size-4 animate-spin\" />\n                      ) : (\n                        <CheckCircle className=\"size-4\" />\n                      )}\n                    </TooltipTrigger>\n                    <TooltipContent>Complete</TooltipContent>\n                  </Tooltip>\n                </>\n              )}\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <Button\n                      aria-label=\"Delete\"\n                      className=\"h-8 w-8 text-destructive hover:bg-destructive hover:text-white\"\n                      disabled={busy}\n                      onClick={() => handleAction(task, 'delete')}\n                      size=\"icon\"\n                      variant=\"outline\"\n                    />\n                  }\n                >\n                  {deletePending ? (\n                    <Loader2 className=\"size-4 animate-spin\" />\n                  ) : (\n                    <Trash2Icon className=\"size-4\" />\n                  )}\n                </TooltipTrigger>\n                <TooltipContent>Delete</TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <Button\n                      aria-label=\"View details\"\n                      className=\"h-8 w-8\"\n                      disabled={busy}\n                      onClick={() => handleAction(task, 'view')}\n                      size=\"icon\"\n                      variant=\"outline\"\n                    />\n                  }\n                >\n                  <FileTextIcon className=\"size-4\" />\n                </TooltipTrigger>\n                <TooltipContent>View Details</TooltipContent>\n              </Tooltip>\n            </div>\n          </TooltipProvider>\n        </TableCell>\n      </TableRow>\n    );\n  };\n\n  return (\n    <div className=\"w-[95%] rounded-lg border bg-card\">\n      <Table>\n        <TableHeader>\n          <TableRow className=\"border-b hover:bg-transparent\">\n            <TableHead className=\"h-12 px-4 font-medium\">Title</TableHead>\n            <TableHead className=\"h-12 px-4 font-medium\">Assignee</TableHead>\n            <TableHead className=\"h-12 w-[120px] px-4 font-medium\">\n              Status\n            </TableHead>\n\n            <TableHead className=\"h-12 px-4 font-medium\">Due Date</TableHead>\n            <TableHead className=\"h-12 px-4 font-medium\">Notes</TableHead>\n            <TableHead className=\"h-12 w-[180px] px-4 font-medium\">\n              Actions\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>{tasks.map(renderTaskRow)}</TableBody>\n      </Table>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "tables"
  ]
}