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

Frontend Revamp

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 14:46:16 +07:00
parent 79cebd205c
commit d8c1e133ac
14 changed files with 425 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/Dashboard.js
View File

@@ -46,12 +46,12 @@ const Dashboard = () => {
const getStatusBadge = (status) => {
const statusConfig = {
pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-[#F2CC8F] text-[#3D405B]' },
pending_approval: { icon: Clock, label: 'Pending Approval', className: 'bg-[#A3B1C6] text-white' },
pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
pending_approval: { icon: Clock, label: 'Pending Approval', className: 'bg-gray-200 text-gray-700' },
pre_approved: { icon: CheckCircle, label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-[#E07A5F] text-white' },
payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-orange-500 text-white' },
active: { icon: CheckCircle, label: 'Active', className: 'bg-[#81B29A] text-white' },
inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-[#6B708D] text-white' }
inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-gray-400 text-white' }
};
const config = statusConfig[status] || statusConfig.inactive;
@@ -79,30 +79,30 @@ const Dashboard = () => {
};
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
{/* Welcome Section */}
<div className="mb-12">
<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" }}>
Welcome Back, {user?.first_name}!
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Here's an overview of your membership status and upcoming events.
</p>
</div>
{/* Email Verification Alert */}
{user && !user.email_verified && (
<Card className="p-6 bg-[#FFF3E0] border-2 border-[#E07A5F] mb-8">
<Card className="p-6 bg-[#f1eef9] border-2 border-[#664fa3] mb-8">
<div className="flex items-start gap-4">
<AlertCircle className="h-6 w-6 text-[#E07A5F] flex-shrink-0 mt-1" />
<AlertCircle className="h-6 w-6 text-[#664fa3] flex-shrink-0 mt-1" />
<div className="flex-1">
<h3 className="text-lg font-semibold text-[#3D405B] mb-2">
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Verify Your Email Address
</h3>
<p className="text-[#6B708D] mb-4">
<p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Please verify your email address to complete your registration.
Check your inbox for the verification link.
</p>
@@ -110,7 +110,7 @@ const Dashboard = () => {
onClick={handleResendVerification}
disabled={resendLoading}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
>
<Mail className="h-4 w-4 mr-2" />
{resendLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -121,22 +121,22 @@ const Dashboard = () => {
)}
{/* Status Card */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8" data-testid="status-card">
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8" data-testid="status-card">
<div className="flex items-start justify-between flex-wrap gap-4">
<div>
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-2">
<h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Membership Status
</h2>
<div className="mb-4">
{getStatusBadge(user?.status)}
</div>
<p className="text-[#6B708D]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{getStatusMessage(user?.status)}
</p>
</div>
<Link to="/profile">
<Button
className="bg-[#F2CC8F] text-[#3D405B] hover:bg-[#E5B875] rounded-full px-6"
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
data-testid="view-profile-button"
>
<User className="h-4 w-4 mr-2" />
@@ -149,22 +149,22 @@ const Dashboard = () => {
{/* Grid Layout */}
<div className="grid lg:grid-cols-3 gap-8">
{/* Quick Stats */}
<Card className="p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="quick-stats-card">
<h3 className="text-xl font-semibold fraunces text-[#3D405B] mb-4">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="quick-stats-card">
<h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Quick Info
</h3>
<div className="space-y-4">
<div>
<p className="text-sm text-[#6B708D]">Email</p>
<p className="text-[#3D405B] font-medium">{user?.email}</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
</div>
<div>
<p className="text-sm text-[#6B708D]">Role</p>
<p className="text-[#3D405B] font-medium capitalize">{user?.role}</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
<p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
</div>
<div>
<p className="text-sm text-[#6B708D]">Member Since</p>
<p className="text-[#3D405B] font-medium">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
</p>
</div>
@@ -172,15 +172,15 @@ const Dashboard = () => {
</Card>
{/* Upcoming Events */}
<Card className="lg:col-span-2 p-6 bg-white rounded-2xl border border-[#EAE0D5]" data-testid="upcoming-events-card">
<Card className="lg:col-span-2 p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="upcoming-events-card">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold fraunces text-[#3D405B]">
<h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
Upcoming Events
</h3>
<Link to="/events">
<Button
variant="ghost"
className="text-[#E07A5F] hover:text-[#D0694E]"
className="text-[#ff9e77] hover:text-[#664fa3]"
data-testid="view-all-events-button"
>
View All
@@ -189,26 +189,26 @@ const Dashboard = () => {
</div>
{loading ? (
<p className="text-[#6B708D]">Loading events...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
) : events.length > 0 ? (
<div className="space-y-4">
{events.map((event) => (
<Link to={`/events/${event.id}`} key={event.id}>
<div
className="p-4 border border-[#EAE0D5] rounded-xl hover:border-[#E07A5F] hover:shadow-md transition-all cursor-pointer"
className="p-4 border border-[#ddd8eb] rounded-xl hover:border-[#664fa3] hover:shadow-md transition-all cursor-pointer"
data-testid={`event-card-${event.id}`}
>
<div className="flex items-start gap-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>
<div className="flex-1">
<h4 className="font-semibold text-[#3D405B] mb-1">{event.title}</h4>
<p className="text-sm text-[#6B708D] mb-2">
<h4 className="font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleDateString()} at{' '}
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</p>
<p className="text-sm text-[#6B708D]">{event.location}</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
</div>
</div>
</div>
@@ -217,9 +217,9 @@ const Dashboard = () => {
</div>
) : (
<div className="text-center py-12">
<Calendar className="h-16 w-16 text-[#EAE0D5] mx-auto mb-4" />
<p className="text-[#6B708D] mb-4">No upcoming events at the moment.</p>
<p className="text-sm text-[#6B708D]">Check back later for new events!</p>
<Calendar className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
</div>
)}
</Card>
@@ -227,12 +227,12 @@ const Dashboard = () => {
{/* CTA Section */}
{user?.status === 'pending_approval' && (
<Card className="mt-8 p-8 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
<Card className="mt-8 p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
<div className="text-center">
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Application Under Review
</h3>
<p className="text-[#6B708D] mb-6">
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your membership application is being reviewed by our admin team. You'll be notified once approved!
</p>
</div>
@@ -241,20 +241,20 @@ const Dashboard = () => {
{/* Payment Prompt for payment_pending status */}
{user?.status === 'payment_pending' && (
<Card className="mt-8 p-8 bg-gradient-to-br from-[#E07A5F]/20 to-[#F2CC8F]/20 rounded-2xl border-2 border-[#E07A5F]">
<Card className="mt-8 p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border-2 border-[#664fa3]">
<div className="text-center">
<div className="mb-4">
<AlertCircle className="h-16 w-16 text-[#E07A5F] mx-auto" />
<AlertCircle className="h-16 w-16 text-[#664fa3] mx-auto" />
</div>
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Complete Your Payment
</h3>
<p className="text-[#6B708D] mb-6">
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Great news! Your membership application has been approved. Complete your payment to activate your membership and gain full access to all member benefits.
</p>
<Link to="/plans">
<Button
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="complete-payment-cta"
>
<CheckCircle className="mr-2 h-5 w-5" />