kayela/membership-fe
1
0
Fork 0
forked from andika/membership-fe
Code Pull Requests Activity

Update FE

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 20:45:40 +07:00
parent d8c1e133ac
commit 1f27c3224b
23 changed files with 438 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/admin/AdminApprovals.js
View File

@@ -164,10 +164,10 @@ const AdminApprovals = () => {
const getStatusBadge = (status) => {
const config = {
pending_email: { label: 'Awaiting Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
pending_approval: { label: 'Pending', className: 'bg-[#A3B1C6] text-white' },
pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
pending_approval: { label: 'Pending', className: 'bg-gray-200 text-gray-700' },
pre_approved: { label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
payment_pending: { label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' }
payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' }
};
const statusConfig = config[status];
@@ -205,44 +205,44 @@ const AdminApprovals = () => {
<>
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Approval Queue
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review and approve pending membership applications.
</p>
</div>
{/* Stats Card */}
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
<div>
<p className="text-sm text-[#6B708D] mb-2">Total Pending</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{pendingUsers.length}
</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-2">Awaiting Email</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{pendingUsers.filter(u => u.status === 'pending_email').length}
</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-2">Pending Approval</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Approval</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{pendingUsers.filter(u => u.status === 'pending_approval').length}
</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-2">Pre-Approved</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Approved</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{pendingUsers.filter(u => u.status === 'pre_approved').length}
</p>
</div>
<div>
<p className="text-sm text-[#6B708D] mb-2">Payment Pending</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{pendingUsers.filter(u => u.status === 'payment_pending').length}
</p>
</div>
@@ -250,20 +250,20 @@ const AdminApprovals = () => {
</Card>
{/* Filter Card */}
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] 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-[#6B708D]" />
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<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-[#EAE0D5] focus:border-[#E07A5F]"
className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]">
<SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]">
<SelectValue placeholder="Filter by status" />
</SelectTrigger>
<SelectContent>
@@ -279,16 +279,16 @@ const AdminApprovals = () => {
{/* Table */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading pending applications...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
</div>
) : filteredUsers.length > 0 ? (
<>
<Card className="bg-white rounded-2xl border border-[#EAE0D5] overflow-hidden">
<Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead
className="cursor-pointer hover:bg-[#F2CC8F]/20"
className="cursor-pointer hover:bg-[#DDD8EB]/20"
onClick={() => handleSort('first_name')}
>
Name {renderSortIcon('first_name')}
@@ -296,13 +296,13 @@ const AdminApprovals = () => {
<TableHead>Email</TableHead>
<TableHead>Phone</TableHead>
<TableHead
className="cursor-pointer hover:bg-[#F2CC8F]/20"
className="cursor-pointer hover:bg-[#DDD8EB]/20"
onClick={() => handleSort('status')}
>
Status {renderSortIcon('status')}
</TableHead>
<TableHead
className="cursor-pointer hover:bg-[#F2CC8F]/20"
className="cursor-pointer hover:bg-[#DDD8EB]/20"
onClick={() => handleSort('created_at')}
>
Registered {renderSortIcon('created_at')}
@@ -333,7 +333,7 @@ const AdminApprovals = () => {
onClick={() => handleBypassAndApprove(user.id)}
disabled={actionLoading === user.id}
size="sm"
className="bg-[#E07A5F] text-white hover:bg-[#D0694E]"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
>
{actionLoading === user.id ? 'Approving...' : 'Bypass & Approve'}
</Button>
@@ -341,7 +341,7 @@ const AdminApprovals = () => {
<Button
onClick={() => handleActivatePayment(user)}
size="sm"
className="bg-[#E07A5F] text-white hover:bg-[#D0694E]"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
>
<CheckCircle className="h-4 w-4 mr-1" />
Activate Payment
@@ -368,7 +368,7 @@ const AdminApprovals = () => {
<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-[#6B708D]">Show</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
<Select
value={itemsPerPage.toString()}
onValueChange={(val) => {
@@ -386,7 +386,7 @@ const AdminApprovals = () => {
<SelectItem value="100">100</SelectItem>
</SelectContent>
</Select>
<p className="text-sm text-[#6B708D]">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
entries (showing {(currentPage - 1) * itemsPerPage + 1}-
{Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
</p>
@@ -443,11 +443,11 @@ const AdminApprovals = () => {
</>
) : (
<div className="text-center py-20">
<Clock className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<Clock className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Pending Approvals
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || statusFilter !== 'all'
? 'Try adjusting your filters'
: 'All applications have been reviewed!'}