Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 1x 1x 1x | import { Card, CardHeader, CardTitle, CardContent } from '@core/components/ui/card'
import { Activity, CreditCard, Users, Calendar } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { DASHBOARD_STATS } from '@features/admin/mocks/dashboard'
export const DashboardStats = () => {
const { t } = useTranslation('common')
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
color: 'var(--admin-card-text)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t('dashboard.stats.total_revenue')}
</CardTitle>
<CreditCard className="h-4 w-4" style={{ color: 'var(--admin-muted-text)' }} />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{DASHBOARD_STATS.totalRevenue.value}</div>
<p className="text-xs" style={{ color: 'var(--admin-muted-text)' }}>
{DASHBOARD_STATS.totalRevenue.change} {DASHBOARD_STATS.totalRevenue.period}
</p>
</CardContent>
</Card>
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
color: 'var(--admin-card-text)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t('dashboard.stats.active_events')}
</CardTitle>
<Calendar className="h-4 w-4" style={{ color: 'var(--admin-muted-text)' }} />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{DASHBOARD_STATS.activeEvents.value}</div>
<p className="text-xs" style={{ color: 'var(--admin-muted-text)' }}>
{DASHBOARD_STATS.activeEvents.change} {DASHBOARD_STATS.activeEvents.period}
</p>
</CardContent>
</Card>
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
color: 'var(--admin-card-text)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t('dashboard.stats.donations')}
</CardTitle>
<Activity className="h-4 w-4" style={{ color: 'var(--admin-muted-text)' }} />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{DASHBOARD_STATS.donations.value}</div>
<p className="text-xs" style={{ color: 'var(--admin-muted-text)' }}>
{DASHBOARD_STATS.donations.change} {DASHBOARD_STATS.donations.period}
</p>
</CardContent>
</Card>
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
color: 'var(--admin-card-text)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t('dashboard.stats.staff_members')}
</CardTitle>
<Users className="h-4 w-4" style={{ color: 'var(--admin-muted-text)' }} />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{DASHBOARD_STATS.staffMembers.value}</div>
<p className="text-xs" style={{ color: 'var(--admin-muted-text)' }}>
{DASHBOARD_STATS.staffMembers.change} {DASHBOARD_STATS.staffMembers.period}
</p>
</CardContent>
</Card>
</div>
)
}
|