progress-kpi-01

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { ValueFormatter } from '@/registry/components/dashboardblocks/chart'
5import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
6import { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'
7import { Trend } from '@/registry/components/dashboardblocks/trend'
8 
9import { CardDescription } from '@/components/ui/card'
10 
11interface ProgressKPI1Props {
12  trend: number
13  percentage: number
14  title: string
15  value: number
16  formatter?: ValueFormatter
17}
18 
19const exampleProps: ProgressKPI1Props = {
20  trend: 7.5,
21  percentage: 55,
22  title: 'Revenue',
23  value: 87500,
24  formatter: (value) => `$${value.toLocaleString()}`,
25}
26 
27const ProgressKPI1 = (props: ProgressKPI1Props) => {
28  const { trend, percentage, title, value, formatter } = props
29  return (
30    <KPI>
31      <KPIContent className='space-y-1'>
32        <div className='flex items-center justify-between'>
33          <CardDescription>{title}</CardDescription>
34          <Trend trend={trend} variant='badge' />
35        </div>
36        <KPIValue value={value} formatter={formatter} animated />
37        <div className='mt-4 space-y-1 text-sm text-muted-foreground'>
38          <div className='flex items-center justify-between'>
39            <span>
40              <span className='font-semibold text-foreground'>
41                <AnimatedNumber
42                  value={percentage}
43                  formatter={(value) => `${value.toLocaleString()}%`}
44                />
45              </span>{' '}
46              of monthly target
47            </span>
48            <span className='font-semibold text-foreground'>$100k</span>
49          </div>
50          <ProgressBar percentage={percentage} />
51        </div>
52      </KPIContent>
53    </KPI>
54  )
55}
56 
57export { ProgressKPI1, exampleProps as progressKpi1ExampleProps, type ProgressKPI1Props }