706 lines
26 KiB
JavaScript
706 lines
26 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import api from '../../utils/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import { Input } from '../../components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '../../components/ui/select';
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
} from '../../components/ui/table';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '../../components/ui/tooltip';
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationLink,
|
|
PaginationItem,
|
|
PaginationPrevious,
|
|
PaginationNext,
|
|
PaginationEllipsis,
|
|
} from '../../components/ui/pagination';
|
|
import { toast } from 'sonner';
|
|
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, 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';
|
|
import { Button } from '@/components/ui/button';
|
|
import ViewRegistrationDialog from '@/components/ViewRegistrationDialog';
|
|
|
|
const AdminValidations = () => {
|
|
const { hasPermission } = useAuth();
|
|
const [pendingUsers, setPendingUsers] = useState([]);
|
|
const [filteredUsers, setFilteredUsers] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionLoading, setActionLoading] = useState(null);
|
|
const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
|
|
const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
|
|
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
|
const [pendingAction, setPendingAction] = useState(null);
|
|
const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
|
|
const [userToReject, setUserToReject] = useState(null);
|
|
const [viewRegistrationDialogOpen, setViewRegistrationDialogOpen] = useState(false);
|
|
const [selectedUserForView, setSelectedUserForView] = useState(null);
|
|
|
|
// Filtering state
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
|
|
// Pagination state
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
|
|
// Sorting state
|
|
const [sortBy, setSortBy] = useState('created_at');
|
|
const [sortOrder, setSortOrder] = useState('desc');
|
|
|
|
// Resend email state
|
|
const [resendLoading, setResendLoading] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetchPendingUsers();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
filterAndSortUsers();
|
|
}, [pendingUsers, searchQuery, statusFilter, sortBy, sortOrder]);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [searchQuery, statusFilter]);
|
|
|
|
const fetchPendingUsers = async () => {
|
|
try {
|
|
const response = await api.get('/admin/users');
|
|
const pending = response.data.filter(user =>
|
|
['pending_email', 'pending_validation', 'pre_validated', 'payment_pending', 'rejected'].includes(user.status)
|
|
);
|
|
setPendingUsers(pending);
|
|
} catch (error) {
|
|
toast.error('Failed to fetch pending users');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filterAndSortUsers = () => {
|
|
let filtered = [...pendingUsers];
|
|
|
|
// Apply status filter
|
|
if (statusFilter !== 'all') {
|
|
filtered = filtered.filter(user => user.status === statusFilter);
|
|
}
|
|
|
|
// Apply search query
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
filtered = filtered.filter(user =>
|
|
user.first_name.toLowerCase().includes(query) ||
|
|
user.last_name.toLowerCase().includes(query) ||
|
|
user.email.toLowerCase().includes(query) ||
|
|
user.phone?.toLowerCase().includes(query)
|
|
);
|
|
}
|
|
|
|
// Apply sorting
|
|
filtered.sort((a, b) => {
|
|
let aVal = a[sortBy];
|
|
let bVal = b[sortBy];
|
|
|
|
if (sortBy === 'created_at') {
|
|
aVal = new Date(aVal);
|
|
bVal = new Date(bVal);
|
|
} else if (sortBy === 'first_name') {
|
|
aVal = `${a.first_name} ${a.last_name}`;
|
|
bVal = `${b.first_name} ${b.last_name}`;
|
|
}
|
|
|
|
if (sortOrder === 'asc') {
|
|
return aVal > bVal ? 1 : -1;
|
|
} else {
|
|
return aVal < bVal ? 1 : -1;
|
|
}
|
|
});
|
|
|
|
setFilteredUsers(filtered);
|
|
};
|
|
|
|
const handleValidateRequest = (user) => {
|
|
setPendingAction({ type: 'validate', user });
|
|
setConfirmDialogOpen(true);
|
|
};
|
|
|
|
const handleBypassAndValidateRequest = (user) => {
|
|
setPendingAction({ type: 'bypass_and_validate', user });
|
|
setConfirmDialogOpen(true);
|
|
};
|
|
|
|
const confirmAction = async () => {
|
|
if (!pendingAction) return;
|
|
|
|
const { type, user } = pendingAction;
|
|
setActionLoading(user.id);
|
|
setConfirmDialogOpen(false);
|
|
|
|
try {
|
|
if (type === 'validate') {
|
|
await api.put(`/admin/users/${user.id}/validate`);
|
|
toast.success('User validated! Payment email sent.');
|
|
} else if (type === 'bypass_and_validate') {
|
|
await api.put(`/admin/users/${user.id}/validate?bypass_email_verification=true`);
|
|
toast.success('User email verified and validated! Payment email sent.');
|
|
}
|
|
fetchPendingUsers();
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to validate user');
|
|
} finally {
|
|
setActionLoading(null);
|
|
setPendingAction(null);
|
|
}
|
|
};
|
|
|
|
const getActionMessage = () => {
|
|
if (!pendingAction) return {};
|
|
|
|
const { type, user } = pendingAction;
|
|
const userName = `${user.first_name} ${user.last_name}`;
|
|
|
|
if (type === 'validate') {
|
|
return {
|
|
title: 'Validate User?',
|
|
description: `This will validate ${userName} and send them a payment link email. They will be able to complete payment and become an active member.`,
|
|
variant: 'success',
|
|
confirmText: 'Yes, Validate User',
|
|
};
|
|
}
|
|
|
|
if (type === 'bypass_and_validate') {
|
|
return {
|
|
title: 'Bypass Email & Validate User?',
|
|
description: `This will bypass email verification for ${userName} and validate them immediately. A payment link email will be sent. Use this only if you've confirmed their email through other means.`,
|
|
variant: 'warning',
|
|
confirmText: 'Yes, Bypass & Validate',
|
|
};
|
|
}
|
|
|
|
return {};
|
|
};
|
|
|
|
const handleActivatePayment = (user) => {
|
|
setSelectedUserForPayment(user);
|
|
setPaymentDialogOpen(true);
|
|
};
|
|
|
|
const handlePaymentSuccess = () => {
|
|
fetchPendingUsers(); // Refresh list
|
|
};
|
|
|
|
const handleRejectUser = (user) => {
|
|
setUserToReject(user);
|
|
setRejectionDialogOpen(true);
|
|
};
|
|
|
|
const confirmRejection = async (reason) => {
|
|
if (!userToReject) return;
|
|
|
|
setActionLoading(userToReject.id);
|
|
try {
|
|
await api.post(`/admin/users/${userToReject.id}/reject`, { reason });
|
|
toast.success(`${userToReject.first_name} ${userToReject.last_name} has been rejected`);
|
|
fetchPendingUsers();
|
|
setRejectionDialogOpen(false);
|
|
setUserToReject(null);
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to reject user');
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleReactivateUser = async (user) => {
|
|
setActionLoading(user.id);
|
|
try {
|
|
await api.put(`/admin/users/${user.id}/status`, {
|
|
status: 'pending_validation'
|
|
});
|
|
toast.success(`${user.first_name} ${user.last_name} has been reactivated and moved to pending validation`);
|
|
fetchPendingUsers();
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to reactivate user');
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleRegistrationDialog = (user) => {
|
|
setSelectedUserForView(user);
|
|
setViewRegistrationDialogOpen(true);
|
|
};
|
|
|
|
// Resend Email Handler
|
|
const handleResendVerification = async (user) => {
|
|
setResendLoading(user.id);
|
|
try {
|
|
await api.post(`/admin/users/${user.id}/resend-verification`);
|
|
toast.success(`Verification email sent to ${user.email}`);
|
|
fetchPendingUsers();
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to send verification email');
|
|
} finally {
|
|
setResendLoading(null);
|
|
}
|
|
};
|
|
|
|
|
|
const handleSort = (column) => {
|
|
if (sortBy === column) {
|
|
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
|
} else {
|
|
setSortBy(column);
|
|
setSortOrder('asc');
|
|
}
|
|
};
|
|
|
|
// Pagination calculations
|
|
const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
|
|
const paginatedUsers = filteredUsers.slice(
|
|
(currentPage - 1) * itemsPerPage,
|
|
currentPage * itemsPerPage
|
|
);
|
|
|
|
const renderSortIcon = (column) => {
|
|
if (sortBy !== column) return null;
|
|
return sortOrder === 'asc' ?
|
|
<ArrowUp className="h-4 w-4 inline ml-1" /> :
|
|
<ArrowDown className="h-4 w-4 inline ml-1" />;
|
|
};
|
|
|
|
const formatPhoneNumber = (phone) => {
|
|
if (!phone) return '-';
|
|
const cleaned = phone.replace(/\D/g, '');
|
|
if (cleaned.length === 10) {
|
|
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} - ${cleaned.slice(6)}`;
|
|
}
|
|
return phone;
|
|
};
|
|
|
|
const handleActionSelect = (user, action) => {
|
|
switch (action) {
|
|
case 'validate':
|
|
handleValidateRequest(user);
|
|
break;
|
|
case 'bypass_validate':
|
|
handleBypassAndValidateRequest(user);
|
|
break;
|
|
case 'resend_email':
|
|
handleResendVerification(user);
|
|
break;
|
|
case 'activate_payment':
|
|
handleActivatePayment(user);
|
|
break;
|
|
case 'reactivate':
|
|
handleReactivateUser(user);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Validation Queue
|
|
</h1>
|
|
<p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Review and validate pending membership applications.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
{/* Stats Card */}
|
|
<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-5 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="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>
|
|
|
|
{/* Filter Card */}
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
<div className="relative md:col-span-2">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
|
|
<Input
|
|
placeholder="Search by name, email, or phone..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
/>
|
|
</div>
|
|
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
|
|
<SelectValue placeholder="Filter by status" />
|
|
</SelectTrigger>
|
|
<SelectContent className="">
|
|
<SelectItem value="all">All Statuses</SelectItem>
|
|
<SelectItem value="pending_email" >Awaiting Email</SelectItem>
|
|
<SelectItem value="pending_validation" >Pending Validation</SelectItem>
|
|
<SelectItem value="payment_pending" >Payment Pending</SelectItem>
|
|
<SelectItem value="rejected" >Rejected</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="text-center py-20">
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
|
|
</div>
|
|
) : filteredUsers.length > 0 ? (
|
|
<>
|
|
<Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="text-md">
|
|
<TableHead
|
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
|
onClick={() => handleSort('first_name')}
|
|
>
|
|
Member {renderSortIcon('first_name')}
|
|
</TableHead>
|
|
<TableHead>Phone</TableHead>
|
|
<TableHead
|
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
|
onClick={() => handleSort('status')}
|
|
>
|
|
Status {renderSortIcon('status')}
|
|
</TableHead>
|
|
<TableHead
|
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
|
onClick={() => handleSort('created_at')}
|
|
>
|
|
Registered {renderSortIcon('created_at')}
|
|
</TableHead>
|
|
<TableHead
|
|
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
|
|
onClick={() => handleSort('email_verification_expires_at')}
|
|
>
|
|
{/* TODO: change ' ' */}
|
|
Validation Expiry {renderSortIcon('email_verification_expires_at')}
|
|
</TableHead>
|
|
<TableHead>Referred By</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{paginatedUsers.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className=" ">
|
|
<div className='font-semibold'>
|
|
|
|
{user.first_name} {user.last_name}
|
|
</div>
|
|
<div className='text-brand-purple'>
|
|
{user.email}
|
|
</div>
|
|
|
|
</TableCell>
|
|
<TableCell>{formatPhoneNumber(user.phone)}</TableCell>
|
|
<TableCell><StatusBadge status={user.status} /></TableCell>
|
|
<TableCell>
|
|
{new Date(user.created_at).toLocaleDateString()}
|
|
</TableCell>
|
|
<TableCell>
|
|
{user.email_verification_expires_at
|
|
? new Date(user.email_verification_expires_at).toLocaleString()
|
|
: '—'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{user.referred_by_member_name || '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className='flex gap-2 justify-between'>
|
|
|
|
<Select
|
|
value=""
|
|
onValueChange={(action) => handleActionSelect(user, action)}
|
|
disabled={actionLoading === user.id || resendLoading === user.id}
|
|
>
|
|
<SelectTrigger className="w-[100px] h-9 border-[var(--neutral-800)]">
|
|
<SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Action'} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{user.status === 'rejected' ? (
|
|
<SelectItem value="reactivate">Reactivate</SelectItem>
|
|
) : user.status === 'pending_email' ? (
|
|
<>
|
|
{hasPermission('users.approve') && (
|
|
<SelectItem value="bypass_validate">Bypass & Validate</SelectItem>
|
|
)}
|
|
{hasPermission('users.approve') && (
|
|
<SelectItem value="resend_email">Resend Email</SelectItem>
|
|
)}
|
|
{/* {hasPermission('users.approve') && (
|
|
<SelectItem value="reject">Reject</SelectItem>
|
|
)} */}
|
|
</>
|
|
) : user.status === 'payment_pending' ? (
|
|
<>
|
|
{hasPermission('subscriptions.activate') && (
|
|
<SelectItem value="activate_payment">Activate Payment</SelectItem>
|
|
)}
|
|
{/* {hasPermission('users.approve') && (
|
|
<SelectItem value="reject">Reject</SelectItem>
|
|
)} */}
|
|
</>
|
|
) : (
|
|
<>
|
|
{hasPermission('users.approve') && (
|
|
<SelectItem value="validate">Validate</SelectItem>
|
|
)}
|
|
{/* {hasPermission('users.approve') && (
|
|
<SelectItem value="reject">Reject</SelectItem>
|
|
)} */}
|
|
</>
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<TooltipProvider>
|
|
{/* view registration */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
onClick={() => handleRegistrationDialog(user)}
|
|
disabled={actionLoading === user.id}
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2 border-primary text-primary hover:bg-red-50 dark:hover:bg-red-500/10"
|
|
>
|
|
<FileText className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
View registration
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* reject */}
|
|
{hasPermission('users.approve') && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
onClick={() => handleRejectUser(user)}
|
|
disabled={actionLoading === user.id}
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2 mr-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
|
>
|
|
X
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
Reject user
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</TooltipProvider>
|
|
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
|
|
{/* Pagination Controls */}
|
|
<div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
{/* Page size selector */}
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
|
|
<Select
|
|
value={itemsPerPage.toString()}
|
|
onValueChange={(val) => {
|
|
setItemsPerPage(parseInt(val));
|
|
setCurrentPage(1);
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-20">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="25">25</SelectItem>
|
|
<SelectItem value="50">50</SelectItem>
|
|
<SelectItem value="100">100</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
entries (showing {(currentPage - 1) * itemsPerPage + 1}-
|
|
{Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{[...Array(totalPages)].map((_, i) => {
|
|
const showPage = i < 2 || i >= totalPages - 2 ||
|
|
Math.abs(i - currentPage + 1) <= 1;
|
|
|
|
if (!showPage && i === 2) {
|
|
return (
|
|
<PaginationItem key={i}>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
|
|
if (!showPage) return null;
|
|
|
|
return (
|
|
<PaginationItem key={i}>
|
|
<PaginationLink
|
|
onClick={() => setCurrentPage(i + 1)}
|
|
isActive={currentPage === i + 1}
|
|
className="cursor-pointer"
|
|
>
|
|
{i + 1}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
);
|
|
})}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
|
className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-20">
|
|
<Clock className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
|
|
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
No Pending Validations
|
|
</h3>
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{searchQuery || statusFilter !== 'all'
|
|
? 'Try adjusting your filters'
|
|
: 'All applications have been reviewed!'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Payment Activation Dialog */}
|
|
<PaymentActivationDialog
|
|
open={paymentDialogOpen}
|
|
onOpenChange={setPaymentDialogOpen}
|
|
user={selectedUserForPayment}
|
|
onSuccess={handlePaymentSuccess}
|
|
/>
|
|
|
|
{/* Validation Confirmation Dialog */}
|
|
<ConfirmationDialog
|
|
open={confirmDialogOpen}
|
|
onOpenChange={setConfirmDialogOpen}
|
|
onConfirm={confirmAction}
|
|
loading={actionLoading !== null}
|
|
{...getActionMessage()}
|
|
/>
|
|
|
|
{/* Rejection Dialog */}
|
|
<RejectionDialog
|
|
open={rejectionDialogOpen}
|
|
onOpenChange={setRejectionDialogOpen}
|
|
onConfirm={confirmRejection}
|
|
user={userToReject}
|
|
loading={actionLoading !== null}
|
|
/>
|
|
|
|
{/* View Registration Dialog */}
|
|
<ViewRegistrationDialog
|
|
open={viewRegistrationDialogOpen}
|
|
onOpenChange={setViewRegistrationDialogOpen}
|
|
user={selectedUserForView}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AdminValidations;
|