Merge from dev to loaf-prod for DEMO #25
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user