fix: member directory link works and stat card changes

src/pages/admin/AdminValidations.js

@@ -34,7 +34,20 @@ import {
   PaginationEllipsis,
 } from '../../components/ui/pagination';
 import { toast } from 'sonner';
-import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, XCircle } from 'lucide-react';
+import {
+  CheckCircle,
+  Clock,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  X,
+  FileText,
+  XCircle,
+  Users,
+  Mail,
+  ShieldCheck,
+  CreditCard
+} from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
@@ -344,7 +357,7 @@ const AdminValidations = () => {
           <StatCard
             title="Total Pending"
             value={loading ? '-' : pendingUsers.length}
-            icon={CheckCircle}
+            icon={Users}
             iconBgClass="text-brand-purple"
             dataTestId="stat-total-users"
           />
@@ -352,24 +365,24 @@ const AdminValidations = () => {
           <StatCard
             title="Awaiting Email"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
-            icon={CheckCircle}
-            iconBgClass="text-brand-purple"
+            icon={Mail}
+            iconBgClass="text-brand-pink"
             dataTestId="stat-total-users"
           />
 
           <StatCard
             title="Pending Validation"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
-            icon={CheckCircle}
-            iconBgClass="text-brand-purple"
+            icon={ShieldCheck}
+            iconBgClass="text-success"
             dataTestId="stat-pending-validation"
           />
 
           <StatCard
             title="Payment Pending"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
-            icon={CheckCircle}
-            iconBgClass="text-brand-purple"
+            icon={CreditCard}
+            iconBgClass="text-accent"
             dataTestId="stat-payment-pending"
           />
 
@@ -463,7 +476,7 @@ const AdminValidations = () => {
                         {user.first_name} {user.last_name}
                       </div>
                       <div className='text-brand-purple'>
-                      {user.email}
+                        {user.email}
                       </div>
 
                     </TableCell>