initial commit

components/admin/DashboardStats.tsx

@@ -0,0 +1,130 @@
+'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>
+  )
+}