src/pages/admin/AdminValidations.js

@@ -29,11 +29,12 @@ import {
   PaginationEllipsis,
 } from '../../components/ui/pagination';
 import { toast } from 'sonner';
-import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react';
+import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, XCircle } from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
 import StatusBadge from '@/components/StatusBadge';
+import { StatCard } from '@/components/StatCard';
 
 const AdminValidations = () => {
   const { hasPermission } = useAuth();
@@ -272,45 +273,62 @@ const AdminValidations = () => {
         </p>
       </div>
 
+
       {/* Stats Card */}
-      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
+      <Card className="rounded-3xl bg-brand-lavender/10 p-8 mb-8">
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
-          <div>
+          Quick Overview
-            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.length}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.filter(u => u.status === 'pending_email').length}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.filter(u => u.status === 'pending_validation').length}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.filter(u => u.status === 'pre_validated').length}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.filter(u => u.status === 'payment_pending').length}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-red-600 mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Rejected</p>
-            <p className="text-3xl font-semibold text-red-800" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {pendingUsers.filter(u => u.status === 'rejected').length}
-            </p>
         </div>
+        <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
+          <StatCard
+            title="Total Pending"
+            value={loading ? '-' : pendingUsers.length}
+            icon={CheckCircle}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-total-users"
+          />
+
+          <StatCard
+            title="Awaiting Email"
+            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
+            icon={CheckCircle}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-total-users"
+          />
+
+          <StatCard
+            title="Pending Validation"
+            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
+            icon={CheckCircle}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-pending-validation"
+          />
+
+          <StatCard
+            title="Pre-Validated"
+            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pre_validated').length}
+            icon={CheckCircle}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-pre-validated"
+          />
+
+          <StatCard
+            title="Payment Pending"
+            value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
+            icon={CheckCircle}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-payment-pending"
+          />
+
+          <StatCard
+            title="Rejected"
+            value={loading ? '-' : pendingUsers.filter(u => u.status === 'rejected').length}
+            icon={XCircle}
+            iconBgClass="text-red-600"
+            dataTestId="stat-rejected"
+          />
+
+
         </div>
       </Card>