andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Updated stat cards to be consistent with rest of codebase

Browse Source
This commit is contained in:
kayela
2026-01-27 15:11:25 -06:00
parent 97aa7860a9
commit 0c3d4a4edd
1 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/admin/AdminValidations.js
View File

@@ -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">
<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>