582 lines
24 KiB
JavaScript
582 lines
24 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useNavigate, useLocation, Link } from 'react-router-dom';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import api from '../../utils/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import { Button } from '../../components/ui/button';
|
|
import { Badge } from '../../components/ui/badge';
|
|
import { Input } from '../../components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '../../components/ui/dropdown-menu';
|
|
import { toast } from 'sonner';
|
|
import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircle, Clock, Mail, UserPlus, Upload, Download, FileDown, ChevronDown } from 'lucide-react';
|
|
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
|
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
|
import CreateMemberDialog from '../../components/CreateMemberDialog';
|
|
import InviteStaffDialog from '../../components/InviteStaffDialog';
|
|
import WordPressImportWizard from '../../components/WordPressImportWizard';
|
|
|
|
const AdminMembers = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { hasPermission } = useAuth();
|
|
const [users, setUsers] = useState([]);
|
|
const [filteredUsers, setFilteredUsers] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('active');
|
|
const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
|
|
const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
|
|
const [statusChanging, setStatusChanging] = useState(null);
|
|
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
|
const [pendingStatusChange, setPendingStatusChange] = useState(null);
|
|
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
|
const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
|
|
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
|
const [exporting, setExporting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchMembers();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
filterUsers();
|
|
}, [users, searchQuery, statusFilter]);
|
|
|
|
const fetchMembers = async () => {
|
|
try {
|
|
const response = await api.get('/admin/users');
|
|
// Filter to only members
|
|
const members = response.data.filter(user => user.role === 'member');
|
|
setUsers(members);
|
|
} catch (error) {
|
|
toast.error('Failed to fetch members');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filterUsers = () => {
|
|
let filtered = users;
|
|
|
|
if (statusFilter && statusFilter !== 'all') {
|
|
filtered = filtered.filter(user => user.status === statusFilter);
|
|
}
|
|
|
|
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)
|
|
);
|
|
}
|
|
|
|
setFilteredUsers(filtered);
|
|
};
|
|
|
|
const handleActivatePayment = (user) => {
|
|
setSelectedUserForPayment(user);
|
|
setPaymentDialogOpen(true);
|
|
};
|
|
|
|
const handlePaymentSuccess = () => {
|
|
fetchMembers(); // Refresh list
|
|
};
|
|
|
|
const handleStatusChangeRequest = (userId, currentStatus, newStatus, user) => {
|
|
// Skip confirmation if status didn't actually change
|
|
if (currentStatus === newStatus) return;
|
|
|
|
setPendingStatusChange({ userId, newStatus, user });
|
|
setConfirmDialogOpen(true);
|
|
};
|
|
|
|
const confirmStatusChange = async () => {
|
|
if (!pendingStatusChange) return;
|
|
|
|
const { userId, newStatus } = pendingStatusChange;
|
|
setStatusChanging(userId);
|
|
setConfirmDialogOpen(false);
|
|
|
|
try {
|
|
await api.put(`/admin/users/${userId}/status`, { status: newStatus });
|
|
toast.success('Member status updated successfully');
|
|
fetchMembers(); // Refresh list
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to update status');
|
|
} finally {
|
|
setStatusChanging(null);
|
|
setPendingStatusChange(null);
|
|
}
|
|
};
|
|
|
|
const handleExport = async (filterType) => {
|
|
setExporting(true);
|
|
try {
|
|
let params = {};
|
|
if (filterType === 'current') {
|
|
if (statusFilter && statusFilter !== 'all') {
|
|
params.status = statusFilter;
|
|
}
|
|
if (searchQuery) {
|
|
params.search = searchQuery;
|
|
}
|
|
}
|
|
// filterType === 'all' will export all members without filters
|
|
|
|
const response = await api.get('/admin/users/export', {
|
|
params,
|
|
responseType: 'blob'
|
|
});
|
|
|
|
// Create download link
|
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', `members_export_${new Date().toISOString().split('T')[0]}.csv`);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
|
|
toast.success('Members exported successfully');
|
|
} catch (error) {
|
|
toast.error('Failed to export members');
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
const getStatusChangeMessage = () => {
|
|
if (!pendingStatusChange) return {};
|
|
|
|
const { newStatus, user } = pendingStatusChange;
|
|
const userName = `${user.first_name} ${user.last_name}`;
|
|
|
|
const messages = {
|
|
payment_pending: {
|
|
title: 'Revert to Payment Pending?',
|
|
description: `This will change ${userName}'s status back to Payment Pending. They will need to complete payment again to become active.`,
|
|
variant: 'warning',
|
|
confirmText: 'Yes, Revert Status',
|
|
},
|
|
active: {
|
|
title: 'Activate Member?',
|
|
description: `This will activate ${userName}'s membership. They will gain full access to member features and resources.`,
|
|
variant: 'success',
|
|
confirmText: 'Yes, Activate',
|
|
},
|
|
inactive: {
|
|
title: 'Deactivate Member?',
|
|
description: `This will deactivate ${userName}'s membership. They will lose access to member-only features but their data will be preserved.`,
|
|
variant: 'warning',
|
|
confirmText: 'Yes, Deactivate',
|
|
},
|
|
canceled: {
|
|
title: 'Cancel Membership?',
|
|
description: `This will mark ${userName}'s membership as canceled. This indicates they voluntarily ended their membership. Their subscription will not auto-renew.`,
|
|
variant: 'danger',
|
|
confirmText: 'Yes, Cancel Membership',
|
|
},
|
|
expired: {
|
|
title: 'Mark Membership as Expired?',
|
|
description: `This will mark ${userName}'s membership as expired. This indicates their subscription period has ended without renewal.`,
|
|
variant: 'warning',
|
|
confirmText: 'Yes, Mark as Expired',
|
|
},
|
|
};
|
|
|
|
return messages[newStatus] || {
|
|
title: 'Confirm Status Change',
|
|
description: `Are you sure you want to change ${userName}'s status to ${newStatus}?`,
|
|
variant: 'warning',
|
|
confirmText: 'Confirm',
|
|
};
|
|
};
|
|
|
|
const getStatusBadge = (status) => {
|
|
const config = {
|
|
pending_email: { label: 'Pending Email', variant: 'orange2' },
|
|
pending_validation: { label: 'Pending Validation', variant: 'gray' },
|
|
pre_validated: { label: 'Pre-Validated', variant: 'green' },
|
|
payment_pending: { label: 'Payment Pending', variant: 'orange' },
|
|
active: { label: 'Active', variant: 'green' },
|
|
inactive: { label: 'Inactive', variant: 'gray2' },
|
|
canceled: { label: 'Canceled', variant: 'red' },
|
|
expired: { label: 'Expired', variant: 'red2' },
|
|
abandoned: { label: 'Abandoned', variant: 'gray3' }
|
|
};
|
|
|
|
const statusConfig = config[status] || config.inactive;
|
|
return (
|
|
<Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
|
|
{statusConfig.label}
|
|
</Badge>
|
|
);
|
|
};
|
|
|
|
const getReminderInfo = (user) => {
|
|
const emailReminders = user.email_verification_reminders_sent || 0;
|
|
const eventReminders = user.event_attendance_reminders_sent || 0;
|
|
const paymentReminders = user.payment_reminders_sent || 0;
|
|
const renewalReminders = user.renewal_reminders_sent || 0;
|
|
const totalReminders = emailReminders + eventReminders + paymentReminders + renewalReminders;
|
|
|
|
return {
|
|
emailReminders,
|
|
eventReminders,
|
|
paymentReminders,
|
|
renewalReminders,
|
|
totalReminders,
|
|
lastReminderAt: user.last_email_verification_reminder_at ||
|
|
user.last_event_attendance_reminder_at ||
|
|
user.last_payment_reminder_at ||
|
|
user.last_renewal_reminder_at
|
|
};
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-8">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Members Management
|
|
</h1>
|
|
<p className="text-lg text-brand-purple dark:text-brand-lavender" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Manage paying members and their subscriptions.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3 flex-wrap">
|
|
{hasPermission('users.export') && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
className="btn-util-purple "
|
|
disabled={exporting}
|
|
>
|
|
{exporting ? (
|
|
<>
|
|
<Download className="h-5 w-5 mr-2 animate-bounce" />
|
|
Exporting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<FileDown className="h-5 w-5 mr-2" />
|
|
Export
|
|
<ChevronDown className="h-4 w-4 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="rounded-xl">
|
|
<DropdownMenuItem onClick={() => handleExport('all')} className="cursor-pointer">
|
|
Export All Members
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleExport('current')} className="cursor-pointer">
|
|
Export Current View
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
|
|
{hasPermission('users.import') && (
|
|
<Button
|
|
onClick={() => setImportDialogOpen(true)}
|
|
className="btn-util-green "
|
|
>
|
|
<Upload className="h-5 w-5 mr-2" />
|
|
Import
|
|
</Button>
|
|
)}
|
|
|
|
{hasPermission('users.invite') && (
|
|
<Button
|
|
onClick={() => setInviteDialogOpen(true)}
|
|
className="btn-util-purple "
|
|
>
|
|
<Mail className="h-5 w-5 mr-2" />
|
|
Invite Member
|
|
</Button>
|
|
)}
|
|
|
|
{hasPermission('users.create') && (
|
|
<Button
|
|
onClick={() => setCreateDialogOpen(true)}
|
|
className="btn-util-green "
|
|
>
|
|
<UserPlus className="h-5 w-5 mr-2" />
|
|
Create Member
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
<p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
|
|
<p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{users.length}
|
|
</p>
|
|
</Card>
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
<p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
|
|
<p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{users.filter(u => u.status === 'active').length}
|
|
</p>
|
|
</Card>
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
<p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
|
|
<p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{users.filter(u => u.status === 'payment_pending').length}
|
|
</p>
|
|
</Card>
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
<p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
|
|
<p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{users.filter(u => u.status === 'inactive').length}
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="relative">
|
|
<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 or email..."
|
|
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 "
|
|
data-testid="search-members-input"
|
|
/>
|
|
</div>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]" data-testid="status-filter-select">
|
|
<SelectValue placeholder="Filter by status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Statuses</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="payment_pending">Payment Pending</SelectItem>
|
|
<SelectItem value="pending_validation">Pending Validation</SelectItem>
|
|
<SelectItem value="pre_validated">Pre-Validated</SelectItem>
|
|
<SelectItem value="inactive">Inactive</SelectItem>
|
|
<SelectItem value="canceled">Canceled</SelectItem>
|
|
<SelectItem value="expired">Expired</SelectItem>
|
|
<SelectItem value="abandoned">Abandoned</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Members List */}
|
|
{loading ? (
|
|
<div className="text-center py-20">
|
|
<p className="text-brand-purple dark:text-brand-lavender " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
|
|
</div>
|
|
) : filteredUsers.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{filteredUsers.map((user) => (
|
|
<Card
|
|
key={user.id}
|
|
className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
|
|
data-testid={`member-card-${user.id}`}
|
|
>
|
|
<div className="flex justify-between items-start flex-wrap gap-4">
|
|
<div className="flex items-start gap-4 flex-1">
|
|
{/* Avatar */}
|
|
<div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
|
|
{user.first_name?.[0]}{user.last_name?.[0]}
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
|
<h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{user.first_name} {user.last_name}
|
|
</h3>
|
|
{getStatusBadge(user.status)}
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<p>Email: {user.email}</p>
|
|
<p>Phone: {user.phone}</p>
|
|
<p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
|
|
{user.referred_by_member_name && (
|
|
<p>Referred by: {user.referred_by_member_name}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Reminder Info */}
|
|
{(() => {
|
|
const reminderInfo = getReminderInfo(user);
|
|
if (reminderInfo.totalReminders > 0) {
|
|
return (
|
|
<div className="mt-4 p-3 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<AlertCircle className="h-4 w-4 text-[var(--orange-light)]" />
|
|
<span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{reminderInfo.totalReminders} reminder{reminderInfo.totalReminders !== 1 ? 's' : ''} sent
|
|
{reminderInfo.totalReminders >= 3 && (
|
|
<Badge className="ml-2 bg-[var(--orange-light)] text-white px-2 py-0.5 rounded-full text-xs">
|
|
Needs attention
|
|
</Badge>
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{reminderInfo.emailReminders > 0 && (
|
|
<p>
|
|
<Mail className="inline h-3 w-3 mr-1" />
|
|
{reminderInfo.emailReminders} email verification
|
|
</p>
|
|
)}
|
|
{reminderInfo.eventReminders > 0 && (
|
|
<p>
|
|
<Calendar className="inline h-3 w-3 mr-1" />
|
|
{reminderInfo.eventReminders} event attendance
|
|
</p>
|
|
)}
|
|
{reminderInfo.paymentReminders > 0 && (
|
|
<p>
|
|
<Clock className="inline h-3 w-3 mr-1" />
|
|
{reminderInfo.paymentReminders} payment
|
|
</p>
|
|
)}
|
|
{reminderInfo.renewalReminders > 0 && (
|
|
<p>
|
|
<CheckCircle className="inline h-3 w-3 mr-1" />
|
|
{reminderInfo.renewalReminders} renewal
|
|
</p>
|
|
)}
|
|
</div>
|
|
{reminderInfo.lastReminderAt && (
|
|
<p className="mt-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Link to={`/admin/users/${user.id}`}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-brand-purple text-brand-purple dark:bg-background dark:border-brand-lavender dark:text-brand-light-lavender hover:bg-brand-light-lavender "
|
|
>
|
|
<Eye className="h-4 w-4 mr-1" />
|
|
View Profile
|
|
</Button>
|
|
</Link>
|
|
|
|
{/* Show Activate Payment button for payment_pending users */}
|
|
{user.status === 'payment_pending' && (
|
|
<Button
|
|
onClick={() => handleActivatePayment(user)}
|
|
size="sm"
|
|
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
|
|
>
|
|
<CheckCircle className="h-4 w-4 mr-1" />
|
|
Activate Payment
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Status Management */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-brand-purple dark:text-brand-lavender whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Change Status:
|
|
</span>
|
|
<Select
|
|
value={user.status}
|
|
onValueChange={(newStatus) => handleStatusChangeRequest(user.id, user.status, newStatus, user)}
|
|
disabled={statusChanging === user.id}
|
|
>
|
|
<SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="payment_pending">Payment Pending</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="inactive">Inactive</SelectItem>
|
|
<SelectItem value="canceled">Canceled</SelectItem>
|
|
<SelectItem value="expired">Expired</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20">
|
|
<Users 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 Members Found
|
|
</h3>
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{searchQuery || statusFilter !== 'all'
|
|
? 'Try adjusting your filters'
|
|
: 'No members yet'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Payment Activation Dialog */}
|
|
<PaymentActivationDialog
|
|
open={paymentDialogOpen}
|
|
onOpenChange={setPaymentDialogOpen}
|
|
user={selectedUserForPayment}
|
|
onSuccess={handlePaymentSuccess}
|
|
/>
|
|
|
|
{/* Status Change Confirmation Dialog */}
|
|
<ConfirmationDialog
|
|
open={confirmDialogOpen}
|
|
onOpenChange={setConfirmDialogOpen}
|
|
onConfirm={confirmStatusChange}
|
|
loading={statusChanging !== null}
|
|
{...getStatusChangeMessage()}
|
|
/>
|
|
|
|
{/* Create/Invite/Import Dialogs */}
|
|
<CreateMemberDialog
|
|
open={createDialogOpen}
|
|
onOpenChange={setCreateDialogOpen}
|
|
onSuccess={fetchMembers}
|
|
/>
|
|
|
|
<InviteStaffDialog
|
|
open={inviteDialogOpen}
|
|
onOpenChange={setInviteDialogOpen}
|
|
onSuccess={fetchMembers}
|
|
/>
|
|
|
|
<WordPressImportWizard
|
|
open={importDialogOpen}
|
|
onOpenChange={setImportDialogOpen}
|
|
onSuccess={fetchMembers}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AdminMembers;
|