From 0c3d4a4edd07e96fe4e4d94e4d5662e57b4a75a8 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 27 Jan 2026 15:11:25 -0600
Subject: [PATCH] Updated stat cards to be consistent with rest of codebase

---
 src/pages/admin/AdminValidations.js | 98 +++++++++++++++++------------
 1 file changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index c26a5fd..96b62c9 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/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();
@@ -235,7 +236,7 @@ const AdminValidations = () => {
     }
   };
 
- 
+
 
   const handleSort = (column) => {
     if (sortBy === column) {
@@ -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">
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-          <div>
-            <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>
+      <Card className="rounded-3xl bg-brand-lavender/10 p-8 mb-8">
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </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>