{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-kpi-02",
  "registryDependencies": [
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/icon.json",
    "https://dashboardblocks.com/r/kpi.json",
    "https://dashboardblocks.com/r/progress-bar.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/kpi/progress-kpi-02.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { Icon } from '@/registry/components/dashboardblocks/icon'\nimport { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'\nimport { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'\nimport { ClipboardList } from 'lucide-react'\n\nimport { CardTitle } from '@/components/ui/card'\n\ninterface ProgressKPIBar {\n  label: string\n  target: string\n  percentage: number\n  fillClassName?: string\n  trackClassName?: string\n}\n\ninterface ProgressKPI2Props {\n  title: string\n  value: number\n  progressBars: ProgressKPIBar[]\n}\n\nconst exampleProps: ProgressKPI2Props = {\n  title: 'Task Completion',\n  value: 87,\n  progressBars: [\n    {\n      label: 'completed',\n      target: '51 tasks',\n      percentage: 59,\n      fillClassName: 'bg-green-600',\n    },\n    {\n      label: 'in progress',\n      target: '26 tasks',\n      percentage: 30,\n      fillClassName: 'bg-blue-600',\n    },\n    {\n      label: 'not started',\n      target: '10 tasks',\n      percentage: 11,\n      fillClassName: 'bg-red-600',\n    },\n  ],\n}\n\nconst ProgressKPI2 = (props: ProgressKPI2Props) => {\n  const { title, value, progressBars } = props\n  return (\n    <KPI>\n      <KPIContent className='space-y-1'>\n        <div className='flex items-center justify-between'>\n          <CardTitle>{title}</CardTitle>\n          <Icon icon={ClipboardList} variant='secondary' />\n        </div>\n        <KPIValue\n          value={value}\n          formatter={(value) => `${value.toLocaleString()}/100`}\n          animated\n        />\n        <div className='mt-5 space-y-3'>\n          {progressBars.map((bar) => {\n            const safePercentage = Number.isFinite(bar.percentage) ? bar.percentage : 0\n            const normalized = Math.min(100, Math.max(0, safePercentage))\n\n            return (\n              <div key={bar.label} className='space-y-1.5 text-sm text-muted-foreground'>\n                <div className='flex items-center justify-between'>\n                  <span>\n                    <span className='font-semibold text-foreground'>\n                      <AnimatedNumber\n                        value={normalized}\n                        formatter={(value) => `${value.toLocaleString()}%`}\n                      />\n                    </span>{' '}\n                    {bar.label}\n                  </span>\n                  <span className='font-semibold text-foreground'>{bar.target}</span>\n                </div>\n                <ProgressBar\n                  className={bar.trackClassName}\n                  fillClassName={bar.fillClassName}\n                  percentage={bar.percentage}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </KPIContent>\n    </KPI>\n  )\n}\n\nexport {\n  ProgressKPI2,\n  exampleProps as progressKpi2ExampleProps,\n  type ProgressKPI2Props,\n  type ProgressKPIBar,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}