progress-kpi-02

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { Icon } from '@/registry/components/dashboardblocks/icon'
5import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
6import { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'
7import { ClipboardList } from 'lucide-react'
8 
9import { CardTitle } from '@/components/ui/card'
10 
11interface ProgressKPIBar {
12  label: string
13  target: string
14  percentage: number
15  fillClassName?: string
16  trackClassName?: string
17}
18 
19interface ProgressKPI2Props {
20  title: string
21  value: number
22  progressBars: ProgressKPIBar[]
23}
24 
25const exampleProps: ProgressKPI2Props = {
26  title: 'Task Completion',
27  value: 87,
28  progressBars: [
29    {
30      label: 'completed',
31      target: '51 tasks',
32      percentage: 59,
33      fillClassName: 'bg-green-600',
34    },
35    {
36      label: 'in progress',
37      target: '26 tasks',
38      percentage: 30,
39      fillClassName: 'bg-blue-600',
40    },
41    {
42      label: 'not started',
43      target: '10 tasks',
44      percentage: 11,
45      fillClassName: 'bg-red-600',
46    },
47  ],
48}
49 
50const ProgressKPI2 = (props: ProgressKPI2Props) => {
51  const { title, value, progressBars } = props
52  return (
53    <KPI>
54      <KPIContent className='space-y-1'>
55        <div className='flex items-center justify-between'>
56          <CardTitle>{title}</CardTitle>
57          <Icon icon={ClipboardList} variant='secondary' />
58        </div>
59        <KPIValue
60          value={value}
61          formatter={(value) => `${value.toLocaleString()}/100`}
62          animated
63        />
64        <div className='mt-5 space-y-3'>
65          {progressBars.map((bar) => {
66            const safePercentage = Number.isFinite(bar.percentage) ? bar.percentage : 0
67            const normalized = Math.min(100, Math.max(0, safePercentage))
68 
69            return (
70              <div key={bar.label} className='space-y-1.5 text-sm text-muted-foreground'>
71                <div className='flex items-center justify-between'>
72                  <span>
73                    <span className='font-semibold text-foreground'>
74                      <AnimatedNumber
75                        value={normalized}
76                        formatter={(value) => `${value.toLocaleString()}%`}
77                      />
78                    </span>{' '}
79                    {bar.label}
80                  </span>
81                  <span className='font-semibold text-foreground'>{bar.target}</span>
82// … truncated