progress-kpi-03

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
5import { Ring } from '@/registry/components/dashboardblocks/ring'
6 
7import { CardDescription, CardTitle } from '@/components/ui/card'
8 
9interface ProgressKPI3Props {
10  current: number
11  goal: number
12  title: string
13  unit: string
14}
15 
16const exampleProps: ProgressKPI3Props = {
17  current: 7500,
18  goal: 10000,
19  title: 'Monthly Goal',
20  unit: 'sales',
21}
22 
23const ProgressKPI3 = (props: ProgressKPI3Props) => {
24  const { current, goal, title, unit } = props
25  const percentage = Math.min(100, Math.max(0, (current / goal) * 100))
26 
27  return (
28    <KPI>
29      <KPIContent>
30        <div className='grid grid-cols-2 gap-4'>
31          <div className='flex items-center justify-between'>
32            <div className='space-y-4'>
33              <CardTitle>{title}</CardTitle>
34              <div className='space-y-1'>
35                <KPIValue className='text-2xl' value={current} animated />
36                <CardDescription>
37                  of {goal.toLocaleString()} {unit}
38                </CardDescription>
39              </div>
40            </div>
41          </div>
42          <div className='flex items-center justify-center'>
43            <Ring
44              className='h-24 w-24 sm:h-36 sm:w-36 shrink-0'
45              percentage={percentage}
46              ringColor='var(--color-chart-1)'
47            >
48              <AnimatedNumber
49                className='text-lg font-bold'
50                value={percentage}
51                formatter={(value) => `${value.toLocaleString()}%`}
52              />
53            </Ring>
54          </div>
55        </div>
56      </KPIContent>
57    </KPI>
58  )
59}
60 
61export { ProgressKPI3, exampleProps as progressKpi3ExampleProps, type ProgressKPI3Props }