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

add column for email expiry date

Browse Source 
Members > Invite member says invite Staff in dialog
 resend email button
 Update form member form to say member and not staff
 review application function
 manual payment functionality
 basic implementation of theme
 actions dropdown
This commit is contained in:
kayela
2026-01-28 18:59:19 -06:00
parent a247ac5219
commit d638afcdb2
4 changed files with 1535 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import {
Select,
@@ -29,12 +28,14 @@ import {
PaginationEllipsis,
} from '../../components/ui/pagination';
import { toast } from 'sonner';
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, XCircle } from 'lucide-react';
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();
@@ -48,6 +49,8 @@ const AdminValidations = () => {
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('');
@@ -239,7 +242,10 @@ const AdminValidations = () => {
}
};
const handleRegistrationDialog = (user) => {
setSelectedUserForView(user);
setViewRegistrationDialogOpen(true);
};
// Resend Email Handler
const handleResendVerification = async (user) => {
@@ -279,6 +285,37 @@ const AdminValidations = () => {
<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 */}
@@ -385,9 +422,8 @@ const AdminValidations = () => {
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
onClick={() => handleSort('first_name')}
>
Name {renderSortIcon('first_name')}
Member {renderSortIcon('first_name')}
</TableHead>
<TableHead>Email</TableHead>
<TableHead>Phone</TableHead>
<TableHead
className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
@@ -415,11 +451,15 @@ const AdminValidations = () => {
<TableBody>
{paginatedUsers.map((user) => (
<TableRow key={user.id}>
<TableCell className="font-medium">
{user.first_name} {user.last_name}
<TableCell className=" ">
<div className='font-bold'>
{user.first_name} {user.last_name}
</div>
{user.email}
</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.phone}</TableCell>
<TableCell>{formatPhoneNumber(user.phone)}</TableCell>
<TableCell><StatusBadge status={user.status} /></TableCell>
<TableCell>
{new Date(user.created_at).toLocaleDateString()}
@@ -433,98 +473,76 @@ const AdminValidations = () => {
{user.referred_by_member_name || '-'}
</TableCell>
<TableCell>
<div className="flex gap-2">
{user.status === 'rejected' ? (
<div className='flex justify-between'>
<Select
value=""
onValueChange={(action) => handleActionSelect(user, action)}
disabled={actionLoading === user.id || resendLoading === user.id}
>
<SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
<SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Select 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>
{/* view registration */}
<Button
onClick={() => handleRegistrationDialog(user)}
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 mr-2 border-primary text-primary hover:bg-red-50 dark:hover:bg-red-500/10"
>
<FileText className="size-4" />
</Button>
{/* reject */}
{hasPermission('users.approve') && (
<Button
onClick={() => handleReactivateUser(user)}
onClick={() => handleRejectUser(user)}
disabled={actionLoading === user.id}
size="sm"
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
variant="outline"
className="border-2 mr-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
{actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
X
</Button>
) : user.status === 'pending_email' ? (
<>
{hasPermission('users.approve') && (
<Button
onClick={() => handleBypassAndValidateRequest(user)}
disabled={actionLoading === user.id}
size="sm"
className="bg-secondary text-[var(--purple-ink)] hover:bg-secondary/80"
>
{actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
</Button>
)}
{hasPermission('users.approve') && (
<Button
disabled={resendLoading === user.id}
onClick={() => handleResendVerification(user)}
size="sm"
className=" bg-secondary text-[var(--purple-ink)] hover:bg-secondary/80"
>
{resendLoading === user.id ? 'Sending...' : 'Resend email'}
</Button>
)}
{hasPermission('users.approve') && (
<Button
onClick={() => handleRejectUser(user)}
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
Reject
</Button>
)}
</>
) : user.status === 'payment_pending' ? (
<>
{hasPermission('subscriptions.activate') && (
<Button
onClick={() => handleActivatePayment(user)}
size="sm"
className="btn-light-lavender"
>
Activate Payment
</Button>
)}
{hasPermission('users.approve') && (
<Button
onClick={() => handleRejectUser(user)}
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
Reject
</Button>
)}
</>
) : (
<>
{hasPermission('users.approve') && (
<Button
onClick={() => handleValidateRequest(user)}
disabled={actionLoading === user.id}
size="sm"
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
>
{actionLoading === user.id ? 'Validating...' : 'Validate'}
</Button>
)}
{hasPermission('users.approve') && (
<Button
onClick={() => handleRejectUser(user)}
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
Reject
</Button>
)}
</>
)}
</div>
</TableCell>
</TableRow>
@@ -649,6 +667,13 @@ const AdminValidations = () => {
user={userToReject}
loading={actionLoading !== null}
/>
{/* View Registration Dialog */}
<ViewRegistrationDialog
open={viewRegistrationDialogOpen}
onOpenChange={setViewRegistrationDialogOpen}
user={selectedUserForView}
/>
</>
);
};