andika/membership-fe
2
1
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki 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

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