{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task-progress",
  "title": "Task Progress",
  "description": "Visual progress indicator for task completion goals with percentage and count display.",
  "registryDependencies": [
    "card",
    "progress",
    "task-list"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/tasks/task-progress.tsx",
      "content": "\"use client\";\n\nimport { CheckCircle2, Target, TrendingUp } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\";\nimport { Progress } from \"@/registry/new-york/ui/progress\";\nimport type { Task } from \"./task-list\";\n\nexport interface TaskProgressProps {\n  tasks?: Task[];\n  goal?: number;\n  period?: \"day\" | \"week\" | \"month\" | \"all\";\n  className?: string;\n  showBreakdown?: boolean;\n  showTrend?: boolean;\n}\n\nexport default function TaskProgress({\n  tasks = [],\n  goal,\n  period = \"all\",\n  className,\n  showBreakdown = true,\n  showTrend = true,\n}: TaskProgressProps) {\n  const stats = useMemo(() => {\n    const total = tasks.length;\n    const completed = tasks.filter((t) => t.status === \"done\").length;\n    const inProgress = tasks.filter((t) => t.status === \"in_progress\").length;\n    const todo = tasks.filter((t) => t.status === \"todo\").length;\n    const cancelled = tasks.filter((t) => t.status === \"cancelled\").length;\n    const completionRate = total > 0 ? (completed / total) * 100 : 0;\n\n    return {\n      total,\n      completed,\n      inProgress,\n      todo,\n      cancelled,\n      completionRate,\n    };\n  }, [tasks]);\n\n  const progressPercentage = goal\n    ? Math.min((stats.completed / goal) * 100, 100)\n    : stats.completionRate;\n\n  return (\n    <Card className={cn(\"w-full shadow-xs\", className)}>\n      <CardHeader>\n        <div className=\"flex flex-col gap-1\">\n          <CardTitle>Progress Overview</CardTitle>\n          <CardDescription>\n            {stats.completed} of {stats.total} tasks completed\n            {goal && ` (Goal: ${goal})`}\n          </CardDescription>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col gap-2\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-muted-foreground text-sm\">\n                Overall Progress\n              </span>\n              <span className=\"font-semibold text-sm\">\n                {Math.round(progressPercentage)}%\n              </span>\n            </div>\n            <Progress className=\"h-2\" value={progressPercentage} />\n            {goal && (\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">\n                  {stats.completed} / {goal} completed\n                </span>\n                {stats.completed >= goal && (\n                  <div className=\"flex items-center gap-1 text-green-600\">\n                    <Target className=\"size-3\" />\n                    Goal achieved!\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n\n          {showBreakdown && (\n            <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n              <div className=\"flex flex-col gap-2 rounded-lg border bg-card p-3\">\n                <div className=\"flex items-center gap-2\">\n                  <CheckCircle2 className=\"size-4 text-green-600\" />\n                  <span className=\"text-muted-foreground text-xs\">\n                    Completed\n                  </span>\n                </div>\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"font-semibold text-2xl\">\n                    {stats.completed}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    ({Math.round((stats.completed / stats.total) * 100) || 0}%)\n                  </span>\n                </div>\n              </div>\n\n              <div className=\"flex flex-col gap-2 rounded-lg border bg-card p-3\">\n                <div className=\"flex items-center gap-2\">\n                  <TrendingUp className=\"size-4 text-blue-600\" />\n                  <span className=\"text-muted-foreground text-xs\">\n                    In Progress\n                  </span>\n                </div>\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"font-semibold text-2xl\">\n                    {stats.inProgress}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    ({Math.round((stats.inProgress / stats.total) * 100) || 0}%)\n                  </span>\n                </div>\n              </div>\n\n              <div className=\"flex flex-col gap-2 rounded-lg border bg-card p-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Target className=\"size-4 text-muted-foreground\" />\n                  <span className=\"text-muted-foreground text-xs\">To Do</span>\n                </div>\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"font-semibold text-2xl\">{stats.todo}</span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    ({Math.round((stats.todo / stats.total) * 100) || 0}%)\n                  </span>\n                </div>\n              </div>\n\n              <div className=\"flex flex-col gap-2 rounded-lg border bg-card p-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Target className=\"size-4 text-muted-foreground\" />\n                  <span className=\"text-muted-foreground text-xs\">Total</span>\n                </div>\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"font-semibold text-2xl\">{stats.total}</span>\n                  <span className=\"text-muted-foreground text-xs\">tasks</span>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "block",
    "tasks"
  ],
  "type": "registry:ui"
}