{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Tables",
  "description": "Data table with columns, rows, and optional actions or badges.",
  "files": [
    {
      "path": "contents/blocks/dashboard-ui/tables/1/index.tsx",
      "content": "\"use client\";\n\nimport { CheckCircle, FileTextIcon, Loader2, PauseIcon, PlayIcon, Trash2Icon } 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 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: \"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          variant=\"outline\"\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          Pending\n        </Badge>\n      );\n    case \"in-progress\":\n      return (\n        <Badge\n          variant=\"outline\"\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          In Progress\n        </Badge>\n      );\n    case \"completed\":\n      return (\n        <Badge\n          variant=\"outline\"\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          Completed\n        </Badge>\n      );\n    case \"blocked\":\n      return (\n        <Badge\n          variant=\"outline\"\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          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 key={task.id} className=\"hover:bg-muted/50\">\n        <TableCell className=\"h-16 px-4 font-medium\">{task.title}</TableCell>\n        <TableCell className=\"text-muted-foreground h-16 px-4 text-sm\">{task.assignee}</TableCell>\n        <TableCell className=\"h-16 px-4\">{getStatusBadge(task.status)}</TableCell>\n\n        <TableCell className=\"text-muted-foreground h-16 px-4 text-sm\">{task.dueDate}</TableCell>\n        <TableCell className=\"text-muted-foreground h-16 max-w-[300px] px-4 text-sm\">\n          <TooltipProvider>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <span className=\"block cursor-help truncate\">{task.notes}</span>\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 asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"h-8 w-8\"\n                      onClick={() => handleAction(task, \"start\")}\n                      disabled={busy}>\n                      {startPending ? (\n                        <Loader2 className=\"size-4 animate-spin\" />\n                      ) : (\n                        <PlayIcon className=\"size-4\" />\n                      )}\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Start</TooltipContent>\n                </Tooltip>\n              )}\n              {task.status === \"in-progress\" && (\n                <>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8\"\n                        onClick={() => handleAction(task, \"pause\")}\n                        disabled={busy}>\n                        {pausePending ? (\n                          <Loader2 className=\"size-4 animate-spin\" />\n                        ) : (\n                          <PauseIcon className=\"size-4\" />\n                        )}\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent>Pause</TooltipContent>\n                  </Tooltip>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8\"\n                        onClick={() => handleAction(task, \"complete\")}\n                        disabled={busy}>\n                        {completePending ? (\n                          <Loader2 className=\"size-4 animate-spin\" />\n                        ) : (\n                          <CheckCircle className=\"size-4\" />\n                        )}\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent>Complete</TooltipContent>\n                  </Tooltip>\n                </>\n              )}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"text-destructive hover:bg-destructive h-8 w-8 hover:text-white\"\n                    onClick={() => handleAction(task, \"delete\")}\n                    disabled={busy}>\n                    {deletePending ? (\n                      <Loader2 className=\"size-4 animate-spin\" />\n                    ) : (\n                      <Trash2Icon className=\"size-4\" />\n                    )}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>Delete</TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"h-8 w-8\"\n                    onClick={() => handleAction(task, \"view\")}\n                    disabled={busy}>\n                    <FileTextIcon className=\"size-4\" />\n                  </Button>\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=\"container mx-auto px-4 py-6 lg:py-10\">\n      <div className=\"rounded-lg border\">\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\">Status</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\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>{tasks.map(renderTaskRow)}</TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/table.tsx"
    }
  ],
  "type": "registry:block"
}