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, PaginationEllipsis,
} from '../../components/ui/pagination'; } from '../../components/ui/pagination';
import { toast } from 'sonner'; 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 PaymentActivationDialog from '../../components/PaymentActivationDialog';
import ConfirmationDialog from '../../components/ConfirmationDialog'; import ConfirmationDialog from '../../components/ConfirmationDialog';
import RejectionDialog from '../../components/RejectionDialog'; import RejectionDialog from '../../components/RejectionDialog';
import StatusBadge from '@/components/StatusBadge'; import StatusBadge from '@/components/StatusBadge';
import { StatCard } from '@/components/StatCard';
const AdminValidations = () => { const AdminValidations = () => {
const { hasPermission } = useAuth(); const { hasPermission } = useAuth();
@@ -272,45 +273,62 @@ const AdminValidations = () => {
</p> </p>
</div> </div>
{/* Stats Card */} {/* 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> </div>
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
{pendingUsers.length} <StatCard
</p> title="Total Pending"
</div> value={loading ? '-' : pendingUsers.length}
<div> icon={CheckCircle}
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p> iconBgClass="text-brand-purple"
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> dataTestId="stat-total-users"
{pendingUsers.filter(u => u.status === 'pending_email').length} />
</p>
</div> <StatCard
<div> title="Awaiting Email"
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p> value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> icon={CheckCircle}
{pendingUsers.filter(u => u.status === 'pending_validation').length} iconBgClass="text-brand-purple"
</p> dataTestId="stat-total-users"
</div> />
<div>
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p> <StatCard
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> title="Pending Validation"
{pendingUsers.filter(u => u.status === 'pre_validated').length} value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
</p> icon={CheckCircle}
</div> iconBgClass="text-brand-purple"
<div> dataTestId="stat-pending-validation"
<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} <StatCard
</p> title="Pre-Validated"
</div> value={loading ? '-' : pendingUsers.filter(u => u.status === 'pre_validated').length}
<div> icon={CheckCircle}
<p className="text-sm text-red-600 mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Rejected</p> iconBgClass="text-brand-purple"
<p className="text-3xl font-semibold text-red-800" style={{ fontFamily: "'Inter', sans-serif" }}> dataTestId="stat-pre-validated"
{pendingUsers.filter(u => u.status === 'rejected').length} />
</p>
</div> <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> </div>
</Card> </Card>