131 lines
3.8 KiB
TypeScript
131 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Users, DollarSign, CreditCard, TrendingUp, UserCheck, Activity } from 'lucide-react'
|
|
|
|
interface DashboardStatsProps {
|
|
stats: {
|
|
users: {
|
|
total: number
|
|
active: number
|
|
newThisMonth: number
|
|
verified: number
|
|
verificationRate: string
|
|
}
|
|
revenue: {
|
|
total: number
|
|
monthly: number
|
|
weekly: number
|
|
}
|
|
transactions: {
|
|
total: number
|
|
monthly: number
|
|
}
|
|
services: {
|
|
total: number
|
|
active: number
|
|
}
|
|
developerRequests: {
|
|
total: number
|
|
pending: number
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function DashboardStats({ stats }: DashboardStatsProps) {
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('en-IN', {
|
|
style: 'currency',
|
|
currency: 'INR',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
}).format(amount)
|
|
}
|
|
|
|
const statCards = [
|
|
{
|
|
title: 'Total Users',
|
|
value: stats.users.total.toLocaleString(),
|
|
change: `+${stats.users.newThisMonth} this month`,
|
|
icon: Users,
|
|
color: 'text-blue-600',
|
|
},
|
|
{
|
|
title: 'Total Revenue',
|
|
value: formatCurrency(stats.revenue.total),
|
|
change: `${formatCurrency(stats.revenue.monthly)} this month`,
|
|
icon: DollarSign,
|
|
color: 'text-green-600',
|
|
},
|
|
{
|
|
title: 'Active Services',
|
|
value: stats.services.active.toLocaleString(),
|
|
change: `${stats.services.total} total services`,
|
|
icon: Activity,
|
|
color: 'text-purple-600',
|
|
},
|
|
{
|
|
title: 'Verified Users',
|
|
value: `${stats.users.verificationRate}%`,
|
|
change: `${stats.users.verified} verified`,
|
|
icon: UserCheck,
|
|
color: 'text-emerald-600',
|
|
},
|
|
{
|
|
title: 'Transactions',
|
|
value: stats.transactions.total.toLocaleString(),
|
|
change: `+${stats.transactions.monthly} this month`,
|
|
icon: CreditCard,
|
|
color: 'text-orange-600',
|
|
},
|
|
{
|
|
title: 'Developer Requests',
|
|
value: stats.developerRequests.total.toLocaleString(),
|
|
change: `${stats.developerRequests.pending} pending`,
|
|
icon: TrendingUp,
|
|
color: 'text-indigo-600',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{statCards.map((card, index) => {
|
|
const gradients = [
|
|
'from-blue-500 to-blue-600',
|
|
'from-green-500 to-emerald-600',
|
|
'from-purple-500 to-indigo-600',
|
|
'from-emerald-500 to-teal-600',
|
|
'from-orange-500 to-red-500',
|
|
'from-indigo-500 to-purple-600',
|
|
]
|
|
const bgGradient = gradients[index % gradients.length]
|
|
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="border border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 bg-white dark:bg-gray-800"
|
|
>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
|
<CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
{card.title}
|
|
</CardTitle>
|
|
<div className={`p-2 rounded-lg bg-gradient-to-r ${bgGradient} shadow-lg`}>
|
|
<card.icon className="h-5 w-5 text-white" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
|
{card.value}
|
|
</div>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
|
|
<span className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
|
|
{card.change}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|