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

56
src/pages/EventDetails.js
View File

@@ -46,10 +46,10 @@ const EventDetails = () => {
if (loading) {
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#6B708D]">Loading event...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
</div>
</div>
);
@@ -60,24 +60,24 @@ const EventDetails = () => {
}
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<button
onClick={() => navigate('/events')}
className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors mb-8"
className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors mb-8"
data-testid="back-to-events-button"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Events
</button>
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
<div className="mb-8">
<div className="flex items-center gap-4 mb-6">
<div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
<Calendar className="h-10 w-10 text-[#E07A5F]" />
<div className="bg-[#DDD8EB]/20 p-4 rounded-xl">
<Calendar className="h-10 w-10 text-[#664fa3]" />
</div>
{event.user_rsvp_status && (
<Badge
@@ -85,8 +85,8 @@ const EventDetails = () => {
event.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white'
: event.user_rsvp_status === 'no'
? 'bg-[#6B708D] text-white'
: 'bg-[#F2CC8F] text-[#3D405B]'
? 'bg-gray-400 text-white'
: 'bg-orange-100 text-orange-700'
}`}
>
{event.user_rsvp_status === 'yes' && 'Going'}
@@ -96,14 +96,14 @@ const EventDetails = () => {
)}
</div>
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-6">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
{event.title}
</h1>
<div className="space-y-4 text-lg">
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Calendar className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
@@ -112,20 +112,20 @@ const EventDetails = () => {
})}
</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Calendar className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
{new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<MapPin className="h-5 w-5" />
<span>{event.location}</span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Users className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
{event.capacity && ` (Capacity: ${event.capacity})`}
</span>
@@ -134,18 +134,18 @@ const EventDetails = () => {
</div>
{event.description && (
<div className="mb-8 pb-8 border-b border-[#EAE0D5]">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<div className="mb-8 pb-8 border-b border-[#ddd8eb]">
<h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
About This Event
</h2>
<p className="text-[#6B708D] leading-relaxed whitespace-pre-line">
<p className="text-[#664fa3] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
</div>
)}
<div>
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
RSVP to This Event
</h2>
<div className="flex gap-4 flex-wrap">
@@ -155,7 +155,7 @@ const EventDetails = () => {
className={`rounded-full px-8 py-6 flex items-center gap-2 ${
event.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white'
: 'bg-[#E07A5F] text-white hover:bg-[#D0694E]'
: 'bg-[#DDD8EB] text-[#422268] hover:bg-white'
}`}
data-testid="rsvp-yes-button"
>
@@ -168,8 +168,8 @@ const EventDetails = () => {
variant="outline"
className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
event.user_rsvp_status === 'maybe'
? 'border-[#F2CC8F] bg-[#F2CC8F]/20 text-[#3D405B]'
: 'border-[#3D405B] text-[#3D405B] hover:bg-[#F2CC8F]/10'
? 'border-orange-400 bg-orange-100 text-orange-700'
: 'border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9]'
}`}
data-testid="rsvp-maybe-button"
>
@@ -182,8 +182,8 @@ const EventDetails = () => {
variant="outline"
className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
event.user_rsvp_status === 'no'
? 'border-[#6B708D] bg-[#6B708D]/20 text-[#3D405B]'
: 'border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D]/10'
? 'border-gray-400 bg-gray-100 text-gray-700'
: 'border-gray-400 text-gray-600 hover:bg-gray-50'
}`}
data-testid="rsvp-no-button"
>

44
src/pages/PaymentCancel.js
View File

@@ -9,61 +9,61 @@ const PaymentCancel = () => {
const navigate = useNavigate();
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<div className="text-center mb-12">
{/* Cancel Icon */}
<div className="mb-8">
<div className="bg-[#6B708D] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
<div className="bg-gray-400 rounded-full w-24 h-24 mx-auto flex items-center justify-center">
<XCircle className="h-12 w-12 text-white" />
</div>
</div>
{/* Cancel Message */}
<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" }}>
Payment Cancelled
</h1>
<p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
<p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your payment was cancelled. No charges have been made to your account.
</p>
</div>
{/* Info Card */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 text-center">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
<h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
What Happened?
</h2>
<div className="space-y-6 mb-8">
<p className="text-[#6B708D] text-center">
<p className="text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
</p>
<div className="bg-[#F2CC8F]/20 p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#3D405B] mb-4">
<div className="bg-[#DDD8EB]/20 p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Ready to Complete Your Membership?
</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<CreditCard className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<CreditCard className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Return to the plans page to complete your subscription
</span>
</li>
<li className="flex items-start gap-3">
<Mail className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<Mail className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Contact us if you experienced any issues during checkout
</span>
</li>
</ul>
</div>
<div className="bg-[#FDFCF8] p-6 rounded-xl">
<p className="text-sm text-[#6B708D] text-center mb-4">
<span className="font-medium text-[#3D405B]">Note:</span>{' '}
<div className="bg-[#f1eef9] p-6 rounded-xl">
<p className="text-sm text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="font-medium text-[#422268]">Note:</span>{' '}
Your membership application is still approved. You can complete payment whenever you're ready.
</p>
</div>
@@ -73,7 +73,7 @@ const PaymentCancel = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate('/plans')}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="try-again-button"
>
<CreditCard className="mr-2 h-5 w-5" />
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
<Button
onClick={() => navigate('/dashboard')}
variant="outline"
className="border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="back-to-dashboard-button"
>
<ArrowLeft className="mr-2 h-5 w-5" />
@@ -92,17 +92,17 @@ const PaymentCancel = () => {
</Card>
{/* Support Section */}
<Card className="p-6 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
<h3 className="text-lg font-semibold fraunces text-[#3D405B] mb-3 text-center">
<Card className="p-6 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
<h3 className="text-lg font-semibold text-[#422268] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Need Assistance?
</h3>
<p className="text-[#6B708D] text-center mb-4">
<p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If you encountered any technical issues or have questions about the payment process, our support team is here to help.
</p>
<div className="text-center">
<a
href="mailto:support@loaf.org"
className="text-[#E07A5F] hover:text-[#D0694E] font-medium text-lg"
className="text-[#ff9e77] hover:text-[#664fa3] font-medium text-lg"
>
support@loaf.org
</a>

38
src/pages/PaymentSuccess.js
View File

@@ -20,7 +20,7 @@ const PaymentSuccess = () => {
}, [refreshUser]);
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
@@ -33,47 +33,47 @@ const PaymentSuccess = () => {
</div>
{/* Success Message */}
<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" }}>
Payment Successful!
</h1>
<p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
<p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Thank you for your payment. Your LOAF membership is now active!
</p>
</div>
{/* Confirmation Card */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 text-center">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
<h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to the LOAF Community!
</h2>
<div className="space-y-6 mb-8">
<div className="bg-[#FDFCF8] p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#3D405B] mb-4">
<div className="bg-[#f1eef9] p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
What's Next?
</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your membership is now active and you have full access to all member benefits
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You can now RSVP and attend members-only events
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Access the community directory and connect with other members
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You'll receive our newsletter with exclusive updates and announcements
</span>
</li>
@@ -81,12 +81,12 @@ const PaymentSuccess = () => {
</div>
{sessionId && (
<div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
<p className="text-sm text-[#6B708D] text-center">
<span className="font-medium text-[#3D405B]">Transaction ID:</span>{' '}
<div className="bg-[#DDD8EB]/20 p-4 rounded-xl">
<p className="text-sm text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="font-medium text-[#422268]">Transaction ID:</span>{' '}
<span className="font-mono text-xs">{sessionId}</span>
</p>
<p className="text-xs text-[#6B708D] text-center mt-2">
<p className="text-xs text-[#664fa3] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
A confirmation email has been sent to your registered email address.
</p>
</div>
@@ -97,7 +97,7 @@ const PaymentSuccess = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate('/dashboard')}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="go-to-dashboard-button"
>
<User className="mr-2 h-5 w-5" />
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
<Button
onClick={() => navigate('/events')}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="browse-events-button"
>
<Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
{/* Additional Info */}
<div className="text-center">
<p className="text-sm text-[#6B708D]">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Need help? Contact us at{' '}
<a
href="mailto:support@loaf.org"
className="text-[#E07A5F] hover:text-[#D0694E] font-medium"
className="text-[#ff9e77] hover:text-[#664fa3] font-medium"
>
support@loaf.org
</a>

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!'}

50
src/pages/admin/AdminDashboard.js
View File

@@ -40,66 +40,66 @@ const AdminDashboard = () => {
return (
<>
<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" }}>
Admin Dashboard
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage users, events, and membership applications.
</p>
</div>
{/* Stats Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-total-users">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-total-users">
<div className="flex items-center justify-between mb-4">
<div className="bg-[#A3B1C6]/20 p-3 rounded-lg">
<Users className="h-6 w-6 text-[#A3B1C6]" />
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
<Users className="h-6 w-6 text-[#664fa3]" />
</div>
</div>
<p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.totalMembers}
</p>
<p className="text-sm text-[#6B708D]">Total Members</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-pending-approvals">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-pending-approvals">
<div className="flex items-center justify-between mb-4">
<div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
<Clock className="h-6 w-6 text-[#E07A5F]" />
<div className="bg-orange-100 p-3 rounded-lg">
<Clock className="h-6 w-6 text-orange-600" />
</div>
</div>
<p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.pendingApprovals}
</p>
<p className="text-sm text-[#6B708D]">Pending Approvals</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Approvals</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="stat-active-members">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-active-members">
<div className="flex items-center justify-between mb-4">
<div className="bg-[#81B29A]/20 p-3 rounded-lg">
<CheckCircle className="h-6 w-6 text-[#81B29A]" />
</div>
</div>
<p className="text-3xl font-semibold fraunces text-[#3D405B] mb-1">
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.activeMembers}
</p>
<p className="text-sm text-[#6B708D]">Active Members</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
</Card>
</div>
{/* Quick Actions */}
<div className="grid md:grid-cols-2 gap-8">
<Link to="/admin/users">
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
<Users className="h-12 w-12 text-[#E07A5F] mb-4" />
<h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-2">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
<Users className="h-12 w-12 text-[#664fa3] mb-4" />
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Manage Users
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage all registered users and their membership status.
</p>
<Button
className="mt-4 bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full"
className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
data-testid="manage-users-button"
>
Go to Users
@@ -108,16 +108,16 @@ const AdminDashboard = () => {
</Link>
<Link to="/admin/approvals">
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-approvals">
<Clock className="h-12 w-12 text-[#E07A5F] mb-4" />
<h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-2">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-approvals">
<Clock className="h-12 w-12 text-orange-600 mb-4" />
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Approval Queue
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review and approve pending membership applications.
</p>
<Button
className="mt-4 bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full"
className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
data-testid="manage-approvals-button"
>
View Approvals

74
src/pages/admin/AdminEvents.js
View File

@@ -133,10 +133,10 @@ const AdminEvents = () => {
{/* Header */}
<div className="mb-8 flex justify-between items-center">
<div>
<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" }}>
Event Management
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create and manage community events.
</p>
</div>
@@ -148,7 +148,7 @@ const AdminEvents = () => {
resetForm();
setEditingEvent(null);
}}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
data-testid="create-event-button"
>
<Plus className="mr-2 h-5 w-5" />
@@ -158,39 +158,39 @@ const AdminEvents = () => {
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl fraunces text-[#3D405B]">
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{editingEvent ? 'Edit Event' : 'Create New Event'}
</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Title *
</label>
<Input
value={formData.title}
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
required
className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Description
</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={4}
className="w-full border-2 border-[#EAE0D5] focus:border-[#E07A5F] rounded-lg p-3"
className="w-full border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-lg p-3"
/>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Start Date & Time *
</label>
<Input
@@ -198,12 +198,12 @@ const AdminEvents = () => {
value={formData.start_at}
onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
required
className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
End Date & Time *
</label>
<Input
@@ -211,25 +211,25 @@ const AdminEvents = () => {
value={formData.end_at}
onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
required
className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Location *
</label>
<Input
value={formData.location}
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
required
className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
<div>
<label className="block text-sm font-medium text-[#3D405B] mb-2">
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Capacity (optional)
</label>
<Input
@@ -237,7 +237,7 @@ const AdminEvents = () => {
value={formData.capacity}
onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
placeholder="Leave empty for unlimited"
className="border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
@@ -247,9 +247,9 @@ const AdminEvents = () => {
id="published"
checked={formData.published}
onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
className="w-4 h-4 text-[#E07A5F] border-[#EAE0D5] rounded focus:ring-[#E07A5F]"
className="w-4 h-4 text-[#664fa3] border-[#ddd8eb] rounded focus:ring-[#664fa3]"
/>
<label htmlFor="published" className="text-sm font-medium text-[#3D405B]">
<label htmlFor="published" className="text-sm font-medium text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Publish event (make visible to members)
</label>
</div>
@@ -257,7 +257,7 @@ const AdminEvents = () => {
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1 bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
@@ -265,7 +265,7 @@ const AdminEvents = () => {
type="button"
variant="outline"
onClick={handleDialogClose}
className="flex-1 border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full"
className="flex-1 border-2 border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white rounded-full"
>
Cancel
</Button>
@@ -278,26 +278,26 @@ const AdminEvents = () => {
{/* Events List */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading events...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{events.map((event) => (
<Card
key={event.id}
className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-all"
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all"
data-testid={`event-card-${event.id}`}
>
{/* Event Header */}
<div className="flex justify-between items-start mb-4">
<div className="bg-[#F2CC8F]/20 p-3 rounded-lg">
<Calendar className="h-6 w-6 text-[#E07A5F]" />
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
<Calendar className="h-6 w-6 text-[#664fa3]" />
</div>
<Badge
className={`${
event.published
? 'bg-[#81B29A] text-white'
: 'bg-[#6B708D] text-white'
: 'bg-gray-400 text-white'
} px-3 py-1 rounded-full`}
>
{event.published ? 'Published' : 'Draft'}
@@ -305,18 +305,18 @@ const AdminEvents = () => {
</div>
{/* Event Details */}
<h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-3">
<h3 className="text-xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
{event.title}
</h3>
{event.description && (
<p className="text-[#6B708D] mb-4 line-clamp-2 text-sm">
<p className="text-[#664fa3] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
)}
<div className="space-y-2 mb-4">
<div className="flex items-center gap-2 text-sm text-[#6B708D]">
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Calendar className="h-4 w-4" />
<span>
{new Date(event.start_at).toLocaleDateString()} at{' '}
@@ -326,18 +326,18 @@ const AdminEvents = () => {
})}
</span>
</div>
<div className="flex items-center gap-2 text-sm text-[#6B708D]">
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<MapPin className="h-4 w-4" />
<span className="truncate">{event.location}</span>
</div>
<div className="flex items-center gap-2 text-sm text-[#6B708D]">
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Users className="h-4 w-4" />
<span>{event.rsvp_count || 0} attending</span>
</div>
</div>
{/* Actions */}
<div className="space-y-2 pt-4 border-t border-[#EAE0D5]">
<div className="space-y-2 pt-4 border-t border-[#ddd8eb]">
{/* Mark Attendance Button */}
<Button
onClick={() => {
@@ -359,7 +359,7 @@ const AdminEvents = () => {
onClick={() => togglePublish(event)}
variant="outline"
size="sm"
className="flex-1 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white"
className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
data-testid={`toggle-publish-${event.id}`}
>
{event.published ? (
@@ -378,7 +378,7 @@ const AdminEvents = () => {
onClick={() => handleEdit(event)}
variant="outline"
size="sm"
className="border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white"
className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
data-testid={`edit-event-${event.id}`}
>
<Edit className="h-4 w-4" />
@@ -399,16 +399,16 @@ const AdminEvents = () => {
</div>
) : (
<div className="text-center py-20">
<Calendar className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<Calendar 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 Events Yet
</h3>
<p className="text-[#6B708D] mb-6">
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create your first event to get started!
</p>
<Button
onClick={() => setIsCreateDialogOpen(true)}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
>
<Plus className="mr-2 h-5 w-5" />
Create Event

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

@@ -72,12 +72,12 @@ const AdminMembers = () => {
const getStatusBadge = (status) => {
const config = {
pending_email: { label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
pending_approval: { label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
pending_approval: { label: 'Pending Approval', 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' },
active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' }
};
const statusConfig = config[status] || config.inactive;
@@ -91,57 +91,57 @@ const AdminMembers = () => {
return (
<>
<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" }}>
Members Management
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage paying members and their subscriptions.
</p>
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Total Members</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Active</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.filter(u => u.status === 'active').length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Payment Pending</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<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" }}>
{users.filter(u => u.status === 'payment_pending').length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Inactive</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.filter(u => u.status === 'inactive').length}
</p>
</Card>
</div>
{/* Filters */}
<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-2 gap-4">
<div className="relative">
<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 or email..."
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]"
data-testid="search-members-input"
/>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="status-filter-select">
<SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="status-filter-select">
<SelectValue placeholder="Filter by status" />
</SelectTrigger>
<SelectContent>
@@ -159,32 +159,32 @@ const AdminMembers = () => {
{/* Members List */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading members...</p>
<p className="text-[#664fa3]" 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-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] 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-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-lg flex-shrink-0">
<div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] 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 fraunces text-[#3D405B]">
<h3 className="text-xl font-semibold text-[#422268]" 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-[#6B708D]">
<div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" 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>
@@ -201,7 +201,7 @@ const AdminMembers = () => {
<Button
variant="outline"
size="sm"
className="border-[#A3B1C6] text-[#A3B1C6] hover:bg-[#A3B1C6] hover:text-white"
className="border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
>
<Eye className="h-4 w-4 mr-1" />
View Profile
@@ -213,7 +213,7 @@ const AdminMembers = () => {
<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
@@ -238,11 +238,11 @@ const AdminMembers = () => {
</div>
) : (
<div className="text-center py-20">
<Users className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<Users 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 Members Found
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || statusFilter !== 'all'
? 'Try adjusting your filters'
: 'No members yet'}

80
src/pages/admin/AdminPlans.js
View File

@@ -118,16 +118,16 @@ const AdminPlans = () => {
<div className="mb-8">
<div className="flex justify-between items-start mb-4">
<div>
<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" }}>
Subscription Plans
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage membership plans and pricing.
</p>
</div>
<Button
onClick={handleCreatePlan}
className="bg-[#E07A5F] hover:bg-[#D0694E] text-white rounded-full px-6"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
>
<Plus className="h-4 w-4 mr-2" />
Create Plan
@@ -137,27 +137,27 @@ const AdminPlans = () => {
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Total Plans</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Active Plans</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.filter(p => p.active).length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Total Subscribers</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Revenue (Annual Est.)</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(
plans.reduce((sum, p) => {
const annualPrice = p.billing_cycle === 'yearly'
@@ -171,19 +171,19 @@ const AdminPlans = () => {
</div>
{/* Filters */}
<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-2 gap-4">
<div className="relative">
<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 plans..."
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={activeFilter} onValueChange={setActiveFilter}>
<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>
@@ -198,7 +198,7 @@ const AdminPlans = () => {
{/* Plans Grid */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading plans...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : filteredPlans.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -207,8 +207,8 @@ const AdminPlans = () => {
key={plan.id}
className={`p-6 bg-white rounded-2xl border-2 transition-all hover:shadow-lg ${
plan.active
? 'border-[#EAE0D5] hover:border-[#E07A5F]'
: 'border-[#6B708D] opacity-60'
? 'border-[#ddd8eb] hover:border-[#664fa3]'
: 'border-gray-400 opacity-60'
}`}
>
{/* Header with badges */}
@@ -217,13 +217,13 @@ const AdminPlans = () => {
className={`${
plan.active
? 'bg-[#81B29A] text-white'
: 'bg-[#6B708D] text-white'
: 'bg-gray-400 text-white'
}`}
>
{plan.active ? 'Active' : 'Inactive'}
</Badge>
{plan.subscriber_count > 0 && (
<Badge className="bg-[#F2CC8F] text-[#3D405B]">
<Badge className="bg-[#DDD8EB] text-[#422268]">
<Users className="h-3 w-3 mr-1" />
{plan.subscriber_count}
</Badge>
@@ -231,23 +231,23 @@ const AdminPlans = () => {
</div>
{/* Plan Name */}
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-2">
<h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{plan.name}
</h3>
{/* Description */}
{plan.description && (
<p className="text-sm text-[#6B708D] mb-4 line-clamp-2">
<p className="text-sm text-[#664fa3] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{plan.description}
</p>
)}
{/* Price */}
<div className="mb-4">
<div className="text-3xl font-bold fraunces text-[#E07A5F]">
<div className="text-3xl font-bold text-[#ff9e77]" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(plan.price_cents)}
</div>
<p className="text-sm text-[#6B708D]">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{getBillingCycleLabel(plan.billing_cycle)}
</p>
</div>
@@ -260,19 +260,19 @@ const AdminPlans = () => {
Stripe Integrated
</Badge>
) : (
<Badge className="bg-[#F2CC8F] text-[#3D405B] text-xs">
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs">
Manual/Test Plan
</Badge>
)}
</div>
{/* Actions */}
<div className="flex gap-2 pt-4 border-t border-[#EAE0D5]">
<div className="flex gap-2 pt-4 border-t border-[#ddd8eb]">
<Button
onClick={() => handleEditPlan(plan)}
variant="outline"
size="sm"
className="flex-1 border-[#A3B1C6] text-[#A3B1C6] hover:bg-[#A3B1C6] hover:text-white rounded-full"
className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full"
>
<Edit className="h-4 w-4 mr-1" />
Edit
@@ -281,7 +281,7 @@ const AdminPlans = () => {
onClick={() => handleDeleteClick(plan)}
variant="outline"
size="sm"
className="flex-1 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white rounded-full"
className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
disabled={plan.subscriber_count > 0}
>
<Trash2 className="h-4 w-4 mr-1" />
@@ -291,7 +291,7 @@ const AdminPlans = () => {
{/* Warning for plans with subscribers */}
{plan.subscriber_count > 0 && (
<p className="text-xs text-[#6B708D] mt-2 text-center">
<p className="text-xs text-[#664fa3] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Cannot delete plan with active subscribers
</p>
)}
@@ -300,11 +300,11 @@ const AdminPlans = () => {
</div>
) : (
<div className="text-center py-20">
<CreditCard className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<CreditCard 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 Plans Found
</h3>
<p className="text-[#6B708D] mb-6">
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || activeFilter !== 'all'
? 'Try adjusting your filters'
: 'Create your first subscription plan to get started'}
@@ -312,7 +312,7 @@ const AdminPlans = () => {
{!searchQuery && activeFilter === 'all' && (
<Button
onClick={handleCreatePlan}
className="bg-[#E07A5F] hover:bg-[#D0694E] text-white rounded-full px-8"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
>
<Plus className="h-4 w-4 mr-2" />
Create First Plan
@@ -333,10 +333,10 @@ const AdminPlans = () => {
{deleteDialogOpen && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<Card className="p-8 bg-white rounded-2xl max-w-md mx-4">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Delete Plan
</h2>
<p className="text-[#6B708D] mb-6">
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to delete "{planToDelete?.name}"? This action
will deactivate the plan and it won't be available for new subscriptions.
</p>
@@ -350,7 +350,7 @@ const AdminPlans = () => {
</Button>
<Button
onClick={handleDeleteConfirm}
className="flex-1 bg-[#E07A5F] hover:bg-[#D0694E] text-white"
className="flex-1 bg-red-500 hover:bg-red-600 text-white"
>
Delete Plan
</Button>

62
src/pages/admin/AdminStaff.js
View File

@@ -62,11 +62,11 @@ const AdminStaff = () => {
const getRoleBadge = (role) => {
const config = {
superadmin: { label: 'Superadmin', className: 'bg-[#E07A5F] text-white' },
superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
moderator: { label: 'Moderator', className: 'bg-[#A3B1C6] text-white' },
staff: { label: 'Staff', className: 'bg-[#F2CC8F] text-[#3D405B]' },
media: { label: 'Media', className: 'bg-[#6B708D] text-white' }
moderator: { label: 'Moderator', className: 'bg-[#DDD8EB] text-[#422268]' },
staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
media: { label: 'Media', className: 'bg-gray-400 text-white' }
};
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -81,7 +81,7 @@ const AdminStaff = () => {
const getStatusBadge = (status) => {
const config = {
active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' }
};
const statusConfig = config[status] || config.inactive;
@@ -95,57 +95,57 @@ const AdminStaff = () => {
return (
<>
<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" }}>
Staff Management
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage internal team members and their roles.
</p>
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Total Staff</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Admins</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Moderators</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.filter(u => u.role === 'moderator').length}
</p>
</Card>
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]">
<p className="text-sm text-[#6B708D] mb-2">Active</p>
<p className="text-3xl font-semibold fraunces text-[#3D405B]">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{users.filter(u => u.status === 'active').length}
</p>
</Card>
</div>
{/* Filters */}
<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-2 gap-4">
<div className="relative">
<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 or email..."
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]"
data-testid="search-staff-input"
/>
</div>
<Select value={roleFilter} onValueChange={setRoleFilter}>
<SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="role-filter-select">
<SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="role-filter-select">
<SelectValue placeholder="Filter by role" />
</SelectTrigger>
<SelectContent>
@@ -163,33 +163,33 @@ const AdminStaff = () => {
{/* Staff List */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading staff...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
</div>
) : filteredUsers.length > 0 ? (
<div className="space-y-4">
{filteredUsers.map((user) => (
<Card
key={user.id}
className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
data-testid={`staff-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-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-lg flex-shrink-0">
<div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] 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 fraunces text-[#3D405B]">
<h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{user.first_name} {user.last_name}
</h3>
{getRoleBadge(user.role)}
{getStatusBadge(user.status)}
</div>
<div className="grid md:grid-cols-2 gap-2 text-sm text-[#6B708D]">
<div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" 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>
@@ -205,11 +205,11 @@ const AdminStaff = () => {
</div>
) : (
<div className="text-center py-20">
<UserCog className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<UserCog 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 Staff Found
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || roleFilter !== 'all'
? 'Try adjusting your filters'
: 'No staff members yet'}

46
src/pages/admin/AdminUserView.js
View File

@@ -93,17 +93,17 @@ const AdminUserView = () => {
</Button>
{/* User Profile Header */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="flex items-start gap-6">
{/* Avatar */}
<div className="h-24 w-24 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold text-3xl">
<div className="h-24 w-24 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-3xl">
{user.first_name?.[0]}{user.last_name?.[0]}
</div>
{/* User Info */}
<div className="flex-1">
<div className="flex items-center gap-4 mb-4">
<h1 className="text-3xl font-semibold fraunces text-[#3D405B]">
<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{user.first_name} {user.last_name}
</h1>
{/* Status & Role Badges */}
@@ -112,7 +112,7 @@ const AdminUserView = () => {
</div>
{/* Contact Info */}
<div className="grid md:grid-cols-2 gap-4 text-[#6B708D]">
<div className="grid md:grid-cols-2 gap-4 text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex items-center gap-2">
<Mail className="h-4 w-4" />
<span>{user.email}</span>
@@ -135,8 +135,8 @@ const AdminUserView = () => {
</Card>
{/* Admin Actions */}
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5] mb-8">
<h2 className="text-lg font-semibold fraunces text-[#3D405B] mb-4">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<h2 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin Actions
</h2>
<div className="flex flex-wrap gap-3">
@@ -144,7 +144,7 @@ const AdminUserView = () => {
onClick={handleResetPassword}
disabled={resetPasswordLoading}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-4 py-2 disabled:opacity-50"
>
<Lock className="h-4 w-4 mr-2" />
{resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
@@ -155,14 +155,14 @@ const AdminUserView = () => {
onClick={handleResendVerification}
disabled={resendVerificationLoading}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
className="border-2 border-[#ff9e77] text-[#ff9e77] hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
>
<Mail className="h-4 w-4 mr-2" />
{resendVerificationLoading ? 'Sending...' : 'Resend Verification Email'}
</Button>
)}
<div className="flex items-center gap-2 text-sm text-[#6B708D] ml-2">
<div className="flex items-center gap-2 text-sm text-[#664fa3] ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<AlertTriangle className="h-4 w-4" />
<span>User will receive a temporary password via email</span>
</div>
@@ -170,28 +170,28 @@ const AdminUserView = () => {
</Card>
{/* Additional Details */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5]">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb]">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Additional Information
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="text-sm font-medium text-[#6B708D]">Address</label>
<p className="text-[#3D405B] mt-1">{user.address}</p>
<label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
<p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
</div>
<div>
<label className="text-sm font-medium text-[#6B708D]">Date of Birth</label>
<p className="text-[#3D405B] mt-1">
<label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
<p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(user.date_of_birth).toLocaleDateString()}
</p>
</div>
{user.partner_first_name && (
<div>
<label className="text-sm font-medium text-[#6B708D]">Partner</label>
<p className="text-[#3D405B] mt-1">
<label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
<p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{user.partner_first_name} {user.partner_last_name}
</p>
</div>
@@ -199,14 +199,14 @@ const AdminUserView = () => {
{user.referred_by_member_name && (
<div>
<label className="text-sm font-medium text-[#6B708D]">Referred By</label>
<p className="text-[#3D405B] mt-1">{user.referred_by_member_name}</p>
<label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
<p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
</div>
)}
{user.lead_sources && user.lead_sources.length > 0 && (
<div className="md:col-span-2">
<label className="text-sm font-medium text-[#6B708D]">Lead Sources</label>
<label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
<div className="flex flex-wrap gap-2 mt-2">
{user.lead_sources.map((source, idx) => (
<Badge key={idx} variant="outline">{source}</Badge>
@@ -219,12 +219,12 @@ const AdminUserView = () => {
{/* Subscription Info (if applicable) */}
{user.role === 'member' && (
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] mt-8">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] mt-8">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Subscription Information
</h2>
{/* TODO: Fetch and display subscription data */}
<p className="text-[#6B708D]">Subscription details coming soon...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Subscription details coming soon...</p>
</Card>
)}
</>

38
src/pages/admin/AdminUsers.js
View File

@@ -59,12 +59,12 @@ const AdminUsers = () => {
const getStatusBadge = (status) => {
const config = {
pending_email: { label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
pending_approval: { label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
pending_approval: { label: 'Pending Approval', 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' },
active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
inactive: { label: 'Inactive', className: 'bg-[#6B708D] text-white' }
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' }
};
const statusConfig = config[status] || config.inactive;
@@ -97,29 +97,29 @@ const AdminUsers = () => {
return (
<>
<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" }}>
User Management
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage all registered users.
</p>
</div>
{/* Filters */}
<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-2 gap-4">
<div className="relative">
<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 or email..."
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]"
data-testid="search-users-input"
/>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="h-14 rounded-xl border-2 border-[#EAE0D5]" data-testid="status-filter-select">
<SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="status-filter-select">
<SelectValue placeholder="Filter by status" />
</SelectTrigger>
<SelectContent>
@@ -138,25 +138,25 @@ const AdminUsers = () => {
{/* Users List */}
{loading ? (
<div className="text-center py-20">
<p className="text-[#6B708D]">Loading users...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading users...</p>
</div>
) : filteredUsers.length > 0 ? (
<div className="space-y-4">
{filteredUsers.map((user) => (
<Card
key={user.id}
className="p-6 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-md transition-shadow"
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
data-testid={`user-card-${user.id}`}
>
<div className="flex justify-between items-start flex-wrap gap-4">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-xl font-semibold fraunces text-[#3D405B]">
<h3 className="text-xl font-semibold text-[#422268]" 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-[#6B708D]">
<div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
<p>Role: <span className="capitalize">{user.role}</span></p>
@@ -171,7 +171,7 @@ const AdminUsers = () => {
onClick={() => navigate(`/admin/users/${user.id}`)}
variant="ghost"
size="sm"
className="text-[#6B708D] hover:text-[#3D405B]"
className="text-[#664fa3] hover:text-[#422268]"
>
<Eye className="h-4 w-4 mr-1" />
View
@@ -183,7 +183,7 @@ const AdminUsers = () => {
disabled={resendingUserId === user.id}
variant="ghost"
size="sm"
className="text-[#E07A5F] hover:text-[#D0694E]"
className="text-[#ff9e77] hover:text-[#664fa3]"
>
<Mail className="h-4 w-4 mr-1" />
{resendingUserId === user.id ? 'Sending...' : 'Resend Verification'}
@@ -196,11 +196,11 @@ const AdminUsers = () => {
</div>
) : (
<div className="text-center py-20">
<Users className="h-20 w-20 text-[#EAE0D5] mx-auto mb-6" />
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<Users 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 Users Found
</h3>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery || statusFilter !== 'all'
? 'Try adjusting your filters'
: 'No users registered yet'}