+ {isEditing && (
+
- {isEditing ? (
-
-
+
-
-
+
- ) : (
- ""
)}
{items.length > 0 && (
- Add New Item
+
+ {fields.map((field, index) => (
{
setInputValues(updatedInputValues);
}}
/>
- );
- })}
-
-
+ ))}
+
+
+
);
};
diff --git a/frontend/src/components/EventCard.jsx b/frontend/src/components/EventCard.jsx
index 140f190..109eacf 100644
--- a/frontend/src/components/EventCard.jsx
+++ b/frontend/src/components/EventCard.jsx
@@ -1,29 +1,109 @@
import React from "react";
+import {
+ getEventStatus,
+ getStatusColor,
+ getStatusTextColor,
+ formatDate,
+ formatTime
+} from "../utils/eventUtils";
+
+function EventCard({ event, onActionClick }) {
+ const status = getEventStatus(event.date);
+ const statusColor = getStatusColor(status);
+ const statusTextColor = getStatusTextColor(status);
-function EventCard({ event, action, onActionClick, isLive }) {
return (
-
+
)}
-
+
+ {items.length === 0 && (
+ Current Items
{items.map((item, index) => (
- {fields.map((field) => (
- handleInputChange(e, index, field.name)}
- />
- ))}
-
- {/* Controls: Edit, Save, Delete */}
- {isEditing && (
-
))}
- {item.editing ? (
- handleSaveEdit(index)}
- />
- ) : (
- handleEditItem(index)}
- />
- )}
- handleDeleteItem(index)}
+
+ {fields.map((field) => (
+ handleInputChange(e, index, field.name)}
/>
-
- )}
+ ))}
+
+ {isEditing && (
+
+ {item.editing ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+ )}
+ 📝
+ No items added yet
+Start by adding your first item above
+ onActionClick(event)}
>
- 
-
);
}
diff --git a/frontend/src/components/EventDescripitonSection.jsx b/frontend/src/components/EventDescripitonSection.jsx
index e2dc22e..4a8fa67 100644
--- a/frontend/src/components/EventDescripitonSection.jsx
+++ b/frontend/src/components/EventDescripitonSection.jsx
@@ -1,49 +1,116 @@
import React, { useContext, useState } from "react";
import MDEditor from "@uiw/react-md-editor";
-import Accordion from "./Accordion";
-import useUpdateEffect from "../hooks/useUpdateEffect";
import { EventFormContext } from "../context/EventFormContext";
export const EventDescriptionSection = ({ disabled }) => {
const [isEditing, setIsEditing] = useState(!disabled);
const { eventData, updateField } = useContext(EventFormContext);
- const [content, setContent] = useState(eventData["description"]);
+ const [content, setContent] = useState(eventData["description"] || "");
- useUpdateEffect(() => {
+ const handleSave = () => {
updateField("description", content);
- }, [isEditing]);
+ setIsEditing(false);
+ };
- const handleSave = () => {
- setIsEditing();
+ const handleEdit = () => {
+ setIsEditing(true);
};
return (
- <>
- {event.name}
-{event.details}
- + {/* Status Badge */} +
+
+
+ {status}
+
+
+
+ {/* Event Image */}
+
+ 
{
+ e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDQwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIiBmaWxsPSIjMzc0MTUxIi8+CjxwYXRoIGQ9Ik0yMDAgMTUwQzE3OC45NTQgMTUwIDE2MiAxMzMuMDQ2IDE2MiAxMTJDMTYyIDkwLjk1NCAxNzguOTU0IDc0IDIwMCA3NEMyMjEuMDQ2IDc0IDIzOCA5MC45NTQgMjM4IDExMkMyMzggMTMzLjA0NiAyMjEuMDQ2IDE1MCAyMDAgMTUwWiIgZmlsbD0iIzlDQTBBNiIvPgo8cGF0aCBkPSJNMzAwIDIyNkMzMDAgMjI2IDI2MCAyMDAgMjAwIDIwMEMxNDAgMjAwIDEwMCAyMjYgMTAwIDIyNlYyNThIMzAwVjIyNloiIGZpbGw9IiM5Q0EwQTYiLz4KPC9zdmc+';
+ }}
+ />
+
+
+
+ {/* Event Content */}
+
+ {/* Event Name */}
+
+
+ {/* Hover Effect Overlay */}
+
+ {event.name} +
+ + {/* Date and Time */} +
+
+
+ {/* Venue */}
+ {event.venue && (
+
+
+ {formatDate(event.date)}
+
+
+
+ {formatTime(event.date)}
+
+
+
+ {event.venue}
+
+ )}
+
+ {/* Description */}
+ {event.description && (
+ + {event.description} +
+ )} + + {/* Event Type Badge */} + {event.isWorkshop !== undefined && ( +
+
+ {event.isWorkshop ? 'Workshop' : 'Event'}
+
+
+ )}
+
+ {/* Click Indicator */}
+
+
+ Click to view details
+
+
+
);
};
diff --git a/frontend/src/components/EventDetails.jsx b/frontend/src/components/EventDetails.jsx
new file mode 100644
index 0000000..2ae1581
--- /dev/null
+++ b/frontend/src/components/EventDetails.jsx
@@ -0,0 +1,313 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+ getEventStatus,
+ getStatusColor,
+ formatDate,
+ formatTime
+} from "../utils/eventUtils";
+import { showToast } from "../utils/toast";
+import { updateEvent, deleteEvent } from "../api/apiService";
+import EventEditForm from "./EventEditForm";
+
+const EventDetails = ({ event, onEdit, onDelete }) => {
+ const navigate = useNavigate();
+ const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const status = getEventStatus(event.date);
+ const statusColor = getStatusColor(status);
+
+ const handleDelete = async () => {
+ setIsLoading(true);
+ try {
+ const eventId = event._id || event.id;
+ await deleteEvent(eventId);
+ showToast.largeSuccess("Event deleted successfully!");
+ setShowDeleteConfirm(false);
+ navigate("/events/manage");
+ } catch (error) {
+ showToast.largeError("Failed to delete event. Please try again.");
+ console.error("Delete error:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleEdit = () => {
+ setIsEditing(true);
+ };
+
+ const handleSave = async (formData) => {
+ setIsLoading(true);
+ try {
+ const eventId = event._id || event.id;
+ if (!eventId) {
+ throw new Error("Event ID not found");
+ }
+
+ console.log("Updating event with ID:", eventId);
+ console.log("FormData being sent:", formData);
+
+ const response = await updateEvent(eventId, formData);
+ console.log("Update response:", response);
+
+ showToast.largeSuccess("Event updated successfully!");
+ setIsEditing(false);
+ // Refresh the page to show updated data
+ window.location.reload();
+ } catch (error) {
+ console.error("Update error details:", error);
+ const errorMessage = error.message || error.response?.data?.message || "Failed to update event. Please try again.";
+ showToast.largeError(errorMessage);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleCancelEdit = () => {
+ setIsEditing(false);
+ };
+
+ // If editing, show the dedicated edit form
+ if (isEditing) {
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Content Area */}
+ Event Description
++ Create a compelling description for your event using markdown formatting +
+
+ {isEditing ? (
+
+
+ {/* Markdown Tips */}
+
+ {/* Editor Container */}
+
+ ) : (
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+ {/* Preview Container */}
+
+ )}
+
+ {content ? (
+
+
+ {/* Action Button */}
+
+
+ )}
+ 📝
+ No description added yet
+Click edit to add your event description
+
+
+
+
+
+ 💡 Markdown Tips:
+
+
+ • Use # Heading for titles
• Use **bold** or *italic* for emphasis
• Use - item for bullet points
• Use [text](url) for links
+ {/* Header */}
+
+
+ {/* Delete Confirmation Modal - Rendered outside the main container */}
+ {showDeleteConfirm && (
+
+
+
+ {/* Content Grid */}
+
+
+
+
+
+ {/* Action Buttons */}
+
+
+ {event.name}
+ + {status} + +
+ {event.isWorkshop ? "Workshop" : "Event"}
+ •
+ {formatDate(event.date)}
+ •
+ {formatTime(event.date)}
+
+
+
+
+
+
+
+ {/* Left Column - Image & Stats */}
+
+
+ {/* Event Poster */}
+ {event.poster && (
+
+
+ {/* Right Column - Details */}
+
+
+
+ )}
+
+ {/* Quick Stats */}
+
+
+ Event Details
+
+
+
+ Venue
+ {event.venue}
+
+
+ Max Participants
+ {event.numberOfMember}
+
+
+ Registration Fee
+ ₹{event.amount || 0}
+
+
+ {/* Description */}
+ {event.description && (
+
+
+
+ )}
+
+ {/* Rules & Links */}
+ {(event.ruleBook || event.qrCode) && (
+ Description
+ +
+ {event.ruleBook && (
+
+ )}
+
+ {/* Coordinators */}
+ {event.coordinator && event.coordinator.length > 0 && (
+
+
+ )}
+
+ {event.qrCode && (
+ Rulebook
+ + View Rulebook → + +
+
+ )}
+ Payment QR Code
+
+ 
+
+
+
+ )}
+
+ {/* Useful Links */}
+ {event.usefulLinks && event.usefulLinks.length > 0 && (
+ Coordinators
+
+ {event.coordinator.map((coord, index) => (
+
+
+
+ ))}
+
+
+ {coord.name?.charAt(0)?.toUpperCase() || 'C'}
+
+
+
+
+ {coord.name}
+{coord.mobileNo}
+
+
+ )}
+ Useful Links
+
+ {event.usefulLinks.map((link, index) => (
+
+
+ {link.title}
+
+ ))}
+
+ setShowDeleteConfirm(false)}
+ >
+
+ )}
+
+ );
+};
+
+export default EventDetails;
diff --git a/frontend/src/components/EventDynamicListSection.jsx b/frontend/src/components/EventDynamicListSection.jsx
index 212faea..a8143d2 100644
--- a/frontend/src/components/EventDynamicListSection.jsx
+++ b/frontend/src/components/EventDynamicListSection.jsx
@@ -1,5 +1,4 @@
import React, { useState } from "react";
-import Accordion from "./Accordion";
import { DynamicList } from "./DynamicList";
export const EventDynamicListSection = ({
@@ -15,21 +14,32 @@ export const EventDynamicListSection = ({
};
return (
- <>
- e.stopPropagation()}
+ >
+
+
+
+
+
+
+ Delete Event
++ Are you sure you want to delete "{event.name}"? This action cannot be undone. +
+
+
+
+
+
+
);
};
diff --git a/frontend/src/components/EventEditForm.jsx b/frontend/src/components/EventEditForm.jsx
new file mode 100644
index 0000000..e083327
--- /dev/null
+++ b/frontend/src/components/EventEditForm.jsx
@@ -0,0 +1,581 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import FormField from "./form/FormField";
+import CustomRichTextEditor from "./form/CustomRichTextEditor";
+import { showToast } from "../utils/toast";
+import { updateEvent } from "../api/apiService";
+
+const EventEditForm = ({ event, onSave, onCancel, isLoading }) => {
+ const navigate = useNavigate();
+ const [currentStep, setCurrentStep] = useState(0);
+ const [formData, setFormData] = useState({
+ isWorkshop: false,
+ name: "",
+ date: "",
+ venue: "",
+ numberOfMember: "",
+ poster: null,
+ description: "",
+ ruleBook: "",
+ amount: "",
+ qrCode: null,
+ coordinators: [],
+ usefulLinks: []
+ });
+ const [errors, setErrors] = useState({});
+ const [loading, setLoading] = useState(false);
+
+ // Initialize form data with existing event data
+ useEffect(() => {
+ if (event) {
+ setFormData({
+ isWorkshop: event.isWorkshop || false,
+ name: event.name || "",
+ date: event.date ? event.date.split('T')[0] : "", // Convert ISO date to YYYY-MM-DD
+ venue: event.venue || "",
+ numberOfMember: event.numberOfMember || "",
+ poster: null, // Don't pre-fill files, user can choose to re-upload
+ description: event.description || "",
+ ruleBook: event.ruleBook || "",
+ amount: event.amount || "",
+ qrCode: null, // Don't pre-fill files, user can choose to re-upload
+ coordinators: event.coordinator || [],
+ usefulLinks: event.usefulLinks || []
+ });
+ }
+ }, [event]);
+
+ // Compact 3-step design
+ const steps = [
+ {
+ title: "Basic Details",
+ subtitle: "Event info, rules & poster"
+ },
+ {
+ title: "Description",
+ subtitle: "Rich description of your event"
+ },
+ {
+ title: "Team & Links",
+ subtitle: "Coordinators & resources"
+ }
+ ];
+
+ const validateStep = (step) => {
+ const newErrors = {};
+
+ switch (step) {
+ case 0:
+ if (formData.isWorkshop === null || formData.isWorkshop === undefined) newErrors.isWorkshop = "Please select a type";
+ if (!formData.name?.trim()) newErrors.name = "Event name is required";
+ if (!formData.date) newErrors.date = "Event date is required";
+ if (!formData.venue?.trim()) newErrors.venue = "Venue is required";
+ if (!formData.numberOfMember || formData.numberOfMember <= 0) newErrors.numberOfMember = "Number of members must be greater than 0";
+ if (!formData.ruleBook?.trim()) newErrors.ruleBook = "Rulebook link is required";
+ if (!formData.amount || formData.amount <= 0) newErrors.amount = "Registration fee must be greater than 0";
+ break;
+ case 1:
+ if (!formData.description?.trim()) newErrors.description = "Description is required";
+ break;
+ case 2:
+ if (!formData.coordinators?.length) newErrors.coordinators = "At least one coordinator is required";
+ break;
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const validateAllSteps = () => {
+ const allErrors = {};
+
+ if (formData.isWorkshop === null || formData.isWorkshop === undefined) allErrors.isWorkshop = "Please select a type";
+ if (!formData.name?.trim()) allErrors.name = "Event name is required";
+ if (!formData.date) allErrors.date = "Event date is required";
+ if (!formData.venue?.trim()) allErrors.venue = "Venue is required";
+ if (!formData.numberOfMember || formData.numberOfMember <= 0) allErrors.numberOfMember = "Number of members must be greater than 0";
+ if (!formData.description?.trim()) allErrors.description = "Description is required";
+ if (!formData.coordinators?.length) allErrors.coordinators = "At least one coordinator is required";
+
+ setErrors(allErrors);
+ return Object.keys(allErrors).length === 0;
+ };
+
+ const handleNext = () => {
+ if (validateStep(currentStep)) {
+ setCurrentStep(prev => Math.min(prev + 1, steps.length - 1));
+ } else {
+ showToast.error("Please complete all required fields in this section.");
+ }
+ };
+
+ const handleBack = () => {
+ setCurrentStep(prev => Math.max(prev - 1, 0));
+ };
+
+ const handleFieldChange = (field, value) => {
+ setFormData(prev => ({ ...prev, [field]: value }));
+ // Clear error when user starts typing
+ if (errors[field]) {
+ setErrors(prev => ({ ...prev, [field]: "" }));
+ }
+ };
+
+ const handleFileChange = (field, file) => {
+ setFormData(prev => ({ ...prev, [field]: file }));
+ if (errors[field]) {
+ setErrors(prev => ({ ...prev, [field]: "" }));
+ }
+ };
+
+ const handleCoordinatorChange = (index, field, value) => {
+ const updatedCoordinators = [...formData.coordinators];
+ updatedCoordinators[index] = { ...updatedCoordinators[index], [field]: value };
+ setFormData(prev => ({ ...prev, coordinators: updatedCoordinators }));
+ };
+
+ const addCoordinator = () => {
+ setFormData(prev => ({
+ ...prev,
+ coordinators: [...prev.coordinators, { name: "", mobileNo: "" }]
+ }));
+ };
+
+ const removeCoordinator = (index) => {
+ setFormData(prev => ({
+ ...prev,
+ coordinators: prev.coordinators.filter((_, i) => i !== index)
+ }));
+ };
+
+ const handleUsefulLinkChange = (index, field, value) => {
+ const updatedLinks = [...formData.usefulLinks];
+ updatedLinks[index] = { ...updatedLinks[index], [field]: value };
+ setFormData(prev => ({ ...prev, usefulLinks: updatedLinks }));
+ };
+
+ const addUsefulLink = () => {
+ setFormData(prev => ({
+ ...prev,
+ usefulLinks: [...prev.usefulLinks, { title: "", link: "" }]
+ }));
+ };
+
+ const removeUsefulLink = (index) => {
+ setFormData(prev => ({
+ ...prev,
+ usefulLinks: prev.usefulLinks.filter((_, i) => i !== index)
+ }));
+ };
+
+ const handleSubmit = async () => {
+ if (!validateAllSteps()) {
+ showToast.error("Please complete all required fields before submitting.");
+ return;
+ }
+
+ setLoading(true);
+ try {
+ // Check if we have files to upload
+ const hasFiles = (formData.poster && formData.poster instanceof File) ||
+ (formData.qrCode && formData.qrCode instanceof File);
+
+ if (hasFiles) {
+ // Use FormData if files are present
+ const formDataToSend = new FormData();
+
+ // Basic fields
+ formDataToSend.append('isWorkshop', formData.isWorkshop);
+ formDataToSend.append('name', formData.name);
+ formDataToSend.append('date', formData.date);
+ formDataToSend.append('venue', formData.venue);
+ formDataToSend.append('numberOfMember', parseInt(formData.numberOfMember));
+ formDataToSend.append('description', formData.description);
+ formDataToSend.append('ruleBook', formData.ruleBook || "");
+ formDataToSend.append('amount', parseFloat(formData.amount) || 0);
+
+ // Coordinators - send as JSON string for better backend parsing
+ const coordinators = formData.coordinators || [];
+ formDataToSend.append('coordinator', JSON.stringify(coordinators));
+
+ // Useful Links - send as JSON string for better backend parsing
+ const usefulLinks = formData.usefulLinks || [];
+ formDataToSend.append('usefulLinks', JSON.stringify(usefulLinks));
+
+ // Files
+ if (formData.poster && formData.poster instanceof File) {
+ formDataToSend.append('poster', formData.poster);
+ }
+ if (formData.qrCode && formData.qrCode instanceof File) {
+ formDataToSend.append('qrCode', formData.qrCode);
+ }
+
+ console.log("=== FORM DATA BEING SENT ===");
+ console.log("Event ID:", event._id || event.id);
+ console.log("FormData entries:");
+ for (let [key, value] of formDataToSend.entries()) {
+ console.log(`${key}:`, value);
+ }
+ console.log("=== END FORM DATA ===");
+
+ if (onSave) {
+ await onSave(formDataToSend);
+ }
+ } else {
+ // Use JSON if no files (more reliable for backend parsing)
+ const jsonData = {
+ isWorkshop: formData.isWorkshop,
+ name: formData.name,
+ date: formData.date,
+ venue: formData.venue,
+ numberOfMember: parseInt(formData.numberOfMember),
+ description: formData.description,
+ ruleBook: formData.ruleBook || "",
+ amount: parseFloat(formData.amount) || 0,
+ coordinator: formData.coordinators || [],
+ usefulLinks: formData.usefulLinks || []
+ };
+
+ console.log("=== JSON DATA BEING SENT ===");
+ console.log("Event ID:", event._id || event.id);
+ console.log("JSON Data:", jsonData);
+ console.log("=== END JSON DATA ===");
+
+ if (onSave) {
+ await onSave(jsonData);
+ }
+ }
+
+ } catch (error) {
+ console.error('Failed to update:', error);
+ showToast.error(error.message || "Failed to update event. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const renderStepContent = () => {
+ switch (currentStep) {
+ case 0:
+ return (
+
+
+
+
-
-
-
+ {title}
++ Manage your event's {title.toLowerCase()}. Add, edit, or remove items as needed. +
+
+
+
+
+
+
+ {/* Event Type */}
+
+ );
+
+ case 1:
+ return (
+
+
+
+
+ {/* Basic Info */}
+
+
+
+
+ {errors.isWorkshop && {errors.isWorkshop}
} +
+ handleFieldChange('name', e.target.value)}
+ error={errors.name}
+ required
+ />
+ handleFieldChange('date', e.target.value)}
+ error={errors.date}
+ required
+ />
+ handleFieldChange('venue', e.target.value)}
+ error={errors.venue}
+ required
+ />
+ handleFieldChange('numberOfMember', e.target.value)}
+ error={errors.numberOfMember}
+ required
+ />
+
+
+ {/* Rules & Payment */}
+
+ handleFieldChange('ruleBook', e.target.value)}
+ error={errors.ruleBook}
+ required
+ />
+ handleFieldChange('amount', e.target.value)}
+ error={errors.amount}
+ required
+ />
+
+
+ {/* Files */}
+
+
+
+
+ handleFileChange('poster', e.target.files[0])}
+ className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-600 file:text-white hover:file:bg-blue-700 file:cursor-pointer bg-gray-800/50 border border-gray-700/50 rounded-lg p-2"
+ />
+ {errors.poster &&
+
+ {errors.poster}
} +
+
+ handleFileChange('qrCode', e.target.files[0])}
+ className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-600 file:text-white hover:file:bg-blue-700 file:cursor-pointer bg-gray-800/50 border border-gray-700/50 rounded-lg p-2"
+ />
+ {errors.qrCode &&
+ {errors.qrCode}
} +
+ handleFieldChange('description', value)}
+ placeholder="Describe your event in detail..."
+ height="500px"
+ />
+ {errors.description &&
+ );
+
+ case 2:
+ return (
+ {errors.description}
} +
+ {/* Coordinators */}
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+
+ {/* Useful Links */}
+
+
+
+
+
+ {formData.coordinators.map((coordinator, index) => (
+
+ handleCoordinatorChange(index, 'name', e.target.value)}
+ required
+ />
+ handleCoordinatorChange(index, 'mobileNo', e.target.value)}
+ required
+ />
+
+ ))}
+ {errors.coordinators &&
+
+
+ {errors.coordinators}
} +
+
+
+
+
+
+
+ {formData.usefulLinks.map((link, index) => (
+
+ handleUsefulLinkChange(index, 'title', e.target.value)}
+ />
+ handleUsefulLinkChange(index, 'link', e.target.value)}
+ />
+
+ ))}
+
+
+
+
+ {/* Header */}
+
+ );
+};
+
+export default EventEditForm;
diff --git a/frontend/src/components/EventForm.jsx b/frontend/src/components/EventForm.jsx
index 8915f26..f2df607 100644
--- a/frontend/src/components/EventForm.jsx
+++ b/frontend/src/components/EventForm.jsx
@@ -1,84 +1,147 @@
-import React from "react";
+import React, { useContext } from "react";
import { EventDynamicListSection } from "./EventDynamicListSection";
import { EventFormProvider } from "../context/EventFormContext";
import { EventFormSection } from "./EventFormSection";
import { EventDescriptionSection } from "./EventDescripitonSection";
import { EventFormControls } from "./EventFormControls";
+import { EventFormContext } from "../context/EventFormContext";
+
+// Inner component that can access the context
+const EventFormContent = ({ disabled, onSave, isLoading }) => {
+ const { eventData, updatedValues } = useContext(EventFormContext);
+
+ const handleSave = async () => {
+ if (onSave) {
+ const formDataToSend = { ...eventData, ...updatedValues };
+ await onSave(formDataToSend);
+ }
+ };
-export const EventForm = ({ initialData, disabled }) => {
return (
- <>
-
+
+
+ {/* Progress Steps */}
+ Edit Event
+Update your event details
+
+
+
+ {/* Form Content */}
+
+ {steps.map((step, index) => (
+
+
+
+ ))}
+
+ {index + 1}
+
+
+
+ {index < steps.length - 1 && (
+
+ )}
+ + {step.title} +
+{step.subtitle}
+
+ {renderStepContent()}
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+ {currentStep > 0 && (
+
+ )}
+
+ {currentStep < steps.length - 1 ? (
+
+ ) : (
+
+ )}
+
+
-
-
+
);
diff --git a/frontend/src/components/EventFormControls.jsx b/frontend/src/components/EventFormControls.jsx
index d53fcc8..ea15479 100644
--- a/frontend/src/components/EventFormControls.jsx
+++ b/frontend/src/components/EventFormControls.jsx
@@ -48,32 +48,35 @@ export const EventFormControls = ({ disabled }) => {
if (response) navigate("/events/manage");
};
+
return (
- <>
-
- {fields.map((field, index) => {
- return (
- {
- field.type == "file"
- ? handleFileChange(e, field.name)
- : handleInputChange(e, field.name);
- }}
- />
- );
- })}
+
+
+ );
+};
+
+export const EventForm = ({ initialData, disabled, onSave, isLoading }) => {
+ return (
+ <>
+
+
+
+ {/* Enhanced Action Buttons */}
+
+ {onSave ? (
+
+
+
-
+ {isLoading ? (
+
+
+
+
+ Processing...
+
+ ) : (
+
+
+ Review your changes before saving
+
+ )}
+
+
+
+
+ ) : (
+
+ )}
+
- {loading ? (
-
);
};
diff --git a/frontend/src/components/EventFormSection.jsx b/frontend/src/components/EventFormSection.jsx
index f9e58cb..2759ff7 100644
--- a/frontend/src/components/EventFormSection.jsx
+++ b/frontend/src/components/EventFormSection.jsx
@@ -1,5 +1,4 @@
import React, { useState, useContext } from "react";
-import Accordion from "./Accordion";
import { EventFormContext } from "../context/EventFormContext";
import { Input } from "./Input";
import { readFile } from "../utils/readFile";
@@ -36,39 +35,54 @@ export const EventFormSection = ({ title, section, fields, disabled }) => {
};
return (
- <>
- Processing...
- ) : (
- ""
- )}
-
+
+ {loading ? (
+
-
+
+
+
+ Processing...
+
+ ) : null}
+
+
-
-
+
);
};
diff --git a/frontend/src/components/EventSection.jsx b/frontend/src/components/EventSection.jsx
index 8b087a9..5da5019 100644
--- a/frontend/src/components/EventSection.jsx
+++ b/frontend/src/components/EventSection.jsx
@@ -1,28 +1,37 @@
import React from "react";
import EventCard from "./EventCard";
-const EventsSection = ({ title, events, isLive, navigate }) => {
+const EventsSection = ({ title, events, navigate, emptyMessage = "No events found" }) => {
+ if (!events || events.length === 0) {
+ return (
+
+ {/* Header */}
+
+
+
-
-
-
+ {/* Form Fields */}
+ {title}
++ Fill in the details for your event's {title.toLowerCase()} +
+
+
+
+ {fields.map((field, index) => (
+
+
+ {/* Action Button */}
+
+ {
+ field.type == "file"
+ ? handleFileChange(e, field.name)
+ : handleInputChange(e, field.name);
+ }}
+ />
+
+ ))}
+
+
+
+
+
+ );
+ }
+
return (
-
+
+ {title}
+
+
+
+
+ {emptyMessage}
+
-
-
- {title}
+
+
+
+ {title} ({events.length})
-
- {events.map((event) => (
+
+ {events.map((event, index) => (
navigate("/events/manage/event", { state: { event } })
}
- isLive={isLive}
/>
))}
diff --git a/frontend/src/components/Input.jsx b/frontend/src/components/Input.jsx
index 011bde9..6c70807 100644
--- a/frontend/src/components/Input.jsx
+++ b/frontend/src/components/Input.jsx
@@ -13,33 +13,65 @@ export const Input = ({
hidden,
}) => {
return (
- <>
-
-
-
- {type == "file" && (
-
+
+
+ );
+};
+
+export default MultiPageEventForm;
diff --git a/frontend/src/components/PageLayout.jsx b/frontend/src/components/PageLayout.jsx
index e7373af..801cbf2 100644
--- a/frontend/src/components/PageLayout.jsx
+++ b/frontend/src/components/PageLayout.jsx
@@ -6,11 +6,13 @@ const PageLayout = ({ title, children }) => {
return (
<>
+
);
};
diff --git a/frontend/src/components/MultiPageEventForm.jsx b/frontend/src/components/MultiPageEventForm.jsx
new file mode 100644
index 0000000..5450000
--- /dev/null
+++ b/frontend/src/components/MultiPageEventForm.jsx
@@ -0,0 +1,528 @@
+import React, { useState, useContext } from "react";
+import { EventFormProvider } from "../context/EventFormContext";
+import { EventFormControls } from "./EventFormControls";
+import StepProgress from "./form/StepProgress";
+import FormActions from "./form/FormActions";
+import FormField from "./form/FormField";
+import CustomRichTextEditor from "./form/CustomRichTextEditor";
+import { showToast } from "../utils/toast";
+import { createEvent } from "../api/apiService";
+import { useNavigate } from "react-router-dom";
+
+const MultiPageEventForm = ({ initialData, disabled, onSave, isLoading }) => {
+ const navigate = useNavigate();
+ const [currentStep, setCurrentStep] = useState(0);
+ const [formData, setFormData] = useState({
+ isWorkshop: false,
+ name: "",
+ date: "",
+ venue: "",
+ numberOfMember: "",
+ poster: null,
+ description: "",
+ ruleBook: "",
+ amount: "",
+ qrCode: null,
+ coordinators: [],
+ usefulLinks: []
+ });
+ const [errors, setErrors] = useState({});
+ const [loading, setLoading] = useState(false);
+
+ // Compact 3-step design
+ const steps = [
+ {
+ title: "Basic Details",
+ subtitle: "Event info, rules & poster"
+ },
+ {
+ title: "Description",
+ subtitle: "Rich description of your event"
+ },
+ {
+ title: "Team & Links",
+ subtitle: "Coordinators & resources"
+ }
+ ];
+
+ const validateStep = (step) => {
+ const newErrors = {};
+
+ switch (step) {
+ case 0:
+ if (formData.isWorkshop === null || formData.isWorkshop === undefined) newErrors.isWorkshop = "Please select a type";
+ if (!formData.name?.trim()) newErrors.name = "Event name is required";
+ if (!formData.date) newErrors.date = "Event date is required";
+ if (!formData.venue?.trim()) newErrors.venue = "Venue is required";
+ if (!formData.numberOfMember || formData.numberOfMember <= 0) newErrors.numberOfMember = "Number of members must be greater than 0";
+ if (!formData.poster) newErrors.poster = "Event poster is required";
+ if (!formData.ruleBook?.trim()) newErrors.ruleBook = "Rulebook link is required";
+ if (!formData.amount || formData.amount <= 0) newErrors.amount = "Registration fee must be greater than 0";
+ break;
+ case 1:
+ if (!formData.description?.trim()) newErrors.description = "Description is required";
+ break;
+ case 2:
+ if (!formData.coordinators?.length) newErrors.coordinators = "At least one coordinator is required";
+ break;
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const validateAllSteps = () => {
+ const allErrors = {};
+
+ if (formData.isWorkshop === null || formData.isWorkshop === undefined) allErrors.isWorkshop = "Please select a type";
+ if (!formData.name?.trim()) allErrors.name = "Event name is required";
+ if (!formData.date) allErrors.date = "Event date is required";
+ if (!formData.venue?.trim()) allErrors.venue = "Venue is required";
+ if (!formData.numberOfMember || formData.numberOfMember <= 0) allErrors.numberOfMember = "Number of members must be greater than 0";
+ if (!formData.poster) allErrors.poster = "Event poster is required";
+ if (!formData.description?.trim()) allErrors.description = "Description is required";
+ if (!formData.coordinators?.length) allErrors.coordinators = "At least one coordinator is required";
+
+ setErrors(allErrors);
+ return Object.keys(allErrors).length === 0;
+ };
+
+ const handleNext = () => {
+ if (validateStep(currentStep)) {
+ setCurrentStep(prev => Math.min(prev + 1, steps.length - 1));
+ } else {
+ showToast.error("Please complete all required fields in this section.");
+ }
+ };
+
+ const handleBack = () => {
+ setCurrentStep(prev => Math.max(prev - 1, 0));
+ };
+
+ const handleStepClick = (stepIndex) => {
+ setCurrentStep(stepIndex);
+ };
+
+ const handleFieldChange = (field, value) => {
+ if (field === 'poster' && value) {
+ const file = value;
+ const maxSize = 16 * 1024;
+
+ if (file.size > maxSize) {
+ setErrors(prev => ({
+ ...prev,
+ poster: `File size must be less than 16KB. Current size: ${(file.size / 1024).toFixed(1)}KB`
+ }));
+ return;
+ }
+ }
+
+ setFormData(prev => ({ ...prev, [field]: value }));
+ if (errors[field]) {
+ setErrors(prev => ({ ...prev, [field]: null }));
+ }
+ };
+
+ const handleSubmit = async () => {
+ if (!validateAllSteps()) {
+ showToast.largeError("Please complete all required fields before submitting the form.");
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const formDataToSend = new FormData();
+
+ formDataToSend.append('isWorkshop', formData.isWorkshop);
+ formDataToSend.append('name', formData.name);
+ formDataToSend.append('date', formData.date);
+ formDataToSend.append('venue', formData.venue);
+ formDataToSend.append('numberOfMember', parseInt(formData.numberOfMember));
+ formDataToSend.append('description', formData.description);
+ formDataToSend.append('ruleBook', formData.ruleBook || "");
+ formDataToSend.append('amount', parseFloat(formData.amount) || 0);
+
+ const coordinators = formData.coordinators || [];
+ coordinators.forEach((coord, index) => {
+ formDataToSend.append(`coordinator[${index}][name]`, coord.name);
+ formDataToSend.append(`coordinator[${index}][mobileNo]`, coord.mobileNo);
+ });
+
+ const usefulLinks = formData.usefulLinks || [];
+ usefulLinks.forEach((link, index) => {
+ formDataToSend.append(`usefulLinks[${index}][title]`, link.title);
+ formDataToSend.append(`usefulLinks[${index}][link]`, link.link);
+ });
+
+ if (formData.poster) {
+ formDataToSend.append('poster', formData.poster);
+ } else {
+ formDataToSend.append('poster', '');
+ }
+ if (formData.qrCode) {
+ formDataToSend.append('qrCode', formData.qrCode);
+ }
+
+ if (onSave) {
+ await onSave(formDataToSend);
+ } else {
+ const response = await createEvent(formDataToSend);
+ showToast.largeSuccess("Event created successfully!");
+ navigate("/events/manage");
+ }
+
+ } catch (error) {
+ console.error('Failed to submit:', error);
+ showToast.largeError(error.message || "Failed to create event. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const renderStepContent = () => {
+ switch (currentStep) {
+ case 0:
+ return (
+
+
+
+ {type === "file" ? (
+
-
+
+
+
+ {fileName && (
+
+ ) : (
+
)}
+ + File selected: {fileName} +
+ )} +
+ {/* Type Selection - Compact */}
+
+ );
+
+ case 1:
+ return (
+
+
+
+
+ {/* Basic Details - Compact Grid */}
+
+
+
+
+ {errors.isWorkshop && (
+ {errors.isWorkshop}
+ )} +
+ handleFieldChange('name', e.target.value)}
+ error={errors.name}
+ placeholder="Enter event name"
+ required
+ />
+ handleFieldChange('date', e.target.value)}
+ error={errors.date}
+ required
+ />
+ handleFieldChange('venue', e.target.value)}
+ error={errors.venue}
+ placeholder="Event location"
+ required
+ />
+ handleFieldChange('numberOfMember', e.target.value)}
+ error={errors.numberOfMember}
+ placeholder="0"
+ required
+ />
+
+
+ {/* Rules & Fees - Compact Grid */}
+
+ handleFieldChange('ruleBook', e.target.value)}
+ error={errors.ruleBook}
+ placeholder="https://..."
+ required
+ />
+ handleFieldChange('amount', e.target.value)}
+ error={errors.amount}
+ placeholder="0"
+ required
+ />
+
+
+ {/* File Uploads - Compact */}
+
+ {
+ const file = e.target.files[0];
+ if (file) {
+ handleFieldChange('poster', file);
+ }
+ }}
+ error={errors.poster}
+ accept="image/*"
+ required
+ helperText="Max 16KB"
+ />
+ {
+ const file = e.target.files[0];
+ if (file) {
+ handleFieldChange('qrCode', file);
+ }
+ }}
+ accept="image/*"
+ />
+
+
+ {/* Custom Rich Text Editor - Full Page */}
+
+ );
+
+ case 2:
+ return (
+
+
+ handleFieldChange('description', value)}
+ placeholder="Describe your event in detail. Use the toolbar above to format your text with bold, italic, headings, lists, and links..."
+ height="600px"
+ />
+ {errors.description && (
+
+ {errors.description}
+ )} +
+ {/* Coordinators - Compact */}
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+
+ {/* Useful Links - Compact */}
+
+
+
+
+
+
+ Coordinators
+Add event coordinators
+
+ {(formData.coordinators || []).map((coordinator, index) => (
+
+ {errors.coordinators && (
+
+ {
+ const updated = [...(formData.coordinators || [])];
+ updated[index] = { ...updated[index], name: e.target.value };
+ handleFieldChange('coordinators', updated);
+ }}
+ className="flex-1 px-2 py-1 text-sm bg-white/5 border border-white/20 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ />
+ {
+ const updated = [...(formData.coordinators || [])];
+ updated[index] = { ...updated[index], mobileNo: e.target.value };
+ handleFieldChange('coordinators', updated);
+ }}
+ className="flex-1 px-2 py-1 text-sm bg-white/5 border border-white/20 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ />
+
+
+ ))}
+ {(formData.coordinators || []).length === 0 && (
+ No coordinators added
+ )} +{errors.coordinators}
+ )} +
+
+
+
+
+
+
+
+ Useful Links
+Add relevant resources
+
+ {(formData.usefulLinks || []).map((link, index) => (
+
+
+ {
+ const updated = [...(formData.usefulLinks || [])];
+ updated[index] = { ...updated[index], title: e.target.value };
+ handleFieldChange('usefulLinks', updated);
+ }}
+ className="flex-1 px-2 py-1 text-sm bg-white/5 border border-white/20 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ />
+ {
+ const updated = [...(formData.usefulLinks || [])];
+ updated[index] = { ...updated[index], link: e.target.value };
+ handleFieldChange('usefulLinks', updated);
+ }}
+ className="flex-1 px-2 py-1 text-sm bg-white/5 border border-white/20 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ />
+
+
+ ))}
+ {(formData.usefulLinks || []).length === 0 && (
+ No links added
+ )} +
+
+
+ {/* Compact Header */}
+
+
+
+
+ {/* Progress Bar */}
+ + {onSave ? "Edit Event" : "Create Event"} +
++ {onSave ? "Update your event" : "Build your event in 3 simple steps"} +
+
+
+
+ {/* Compact Form Container */}
+
+ {/* Step Header - Compact */}
+
+
+
+
+ {/* Form Content - Compact */}
+ + {steps[currentStep].title} +
++ {steps[currentStep].subtitle} +
+
+ {renderStepContent()}
+
+
+ {/* Actions - Compact */}
+
+
+
+
{title && (
-
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
new file mode 100644
index 0000000..a2f71e9
--- /dev/null
+++ b/frontend/src/components/SearchBar.jsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+
+const SearchBar = ({ onSearch, placeholder = "Search events..." }) => {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [searchType, setSearchType] = useState("All");
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ onSearch(searchTerm, searchType);
+ }, 300);
+
+ return () => clearTimeout(timer);
+ }, [searchTerm, searchType, onSearch]);
+
+ const getSearchIcon = () => {
+ if (searchType === "Date") {
+ return (
+
+ );
+ } else if (searchType === "Status") {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ };
+
+ const detectSearchType = (value) => {
+ const term = value.toLowerCase().trim();
+
+ // Date detection (YYYY-MM-DD or MM/DD/YYYY)
+ const dateRegex = /^\d{4}-\d{2}-\d{2}$|^\d{1,2}\/\d{1,2}\/\d{4}$/;
+ if (dateRegex.test(term)) {
+ return "Date";
+ }
+
+ // Status detection
+ const statusTerms = ['past', 'live', 'upcoming'];
+ if (statusTerms.includes(term)) {
+ return "Status";
+ }
+
+ return "All";
+ };
+
+ const handleInputChange = (e) => {
+ const value = e.target.value;
+ setSearchTerm(value);
+ setSearchType(detectSearchType(value));
+ };
+
+ return (
+ - {title} -
+
+
)}
{children}
+ {title} +
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/frontend/src/components/Tabs.jsx b/frontend/src/components/Tabs.jsx
index 85ab050..0c1d0ef 100644
--- a/frontend/src/components/Tabs.jsx
+++ b/frontend/src/components/Tabs.jsx
@@ -4,23 +4,26 @@ const Tabs = ({ tabs, content }) => {
const [active, setActive] = useState(0);
return (
-
+
+
+ {/* Search Type Indicator */}
+ {searchType !== "All" && (
+
+
+
+ {searchTerm && (
+
+ )}
+
+ {getSearchIcon()}
+
+
+ Searching by: {searchType}
+
+ )}
+
+
{/* Tab Headers */}
-
+
-
+
);
};
diff --git a/frontend/src/pages/EventDetailsPage.jsx b/frontend/src/pages/EventDetailsPage.jsx
index 7408eb6..14cde84 100644
--- a/frontend/src/pages/EventDetailsPage.jsx
+++ b/frontend/src/pages/EventDetailsPage.jsx
@@ -1,29 +1,49 @@
import React from "react";
-import { useLocation } from "react-router-dom";
-import Tabs from "../components/Tabs";
-import ParticipantsDashboard from "../components/ParticipantsDashboard";
-import TeamDashboard from "../components/TeamDashboard";
+import { useLocation, useNavigate } from "react-router-dom";
import PageLayout from "../components/PageLayout";
-import { EventForm } from "../components/EventForm";
+import EventDetails from "../components/EventDetails";
const EventDetailsPage = () => {
const location = useLocation();
- const { event } = location.state;
+ const navigate = useNavigate();
+ const { event } = location.state || {};
- const tabs = ["Details", "Participants", "Teams", "Leaderboard"];
- const content = [
-
+
+ );
+ }
return (
-
{tabs.map((tab, index) => (
-
+
{/* Tab Content */}
- setActive(index)}
+ className={`px-6 py-3 text-sm font-medium transition-all duration-200 ${
+ active === index
+ ? "text-blue-400 border-b-2 border-blue-400 bg-blue-400/5"
+ : "text-gray-400 hover:text-gray-300 hover:bg-gray-800/30"
+ }`}
>
{tab}
-
+
))}
+
diff --git a/frontend/src/components/form/CustomRichTextEditor.jsx b/frontend/src/components/form/CustomRichTextEditor.jsx
new file mode 100644
index 0000000..e359b20
--- /dev/null
+++ b/frontend/src/components/form/CustomRichTextEditor.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import MDEditor from "@uiw/react-md-editor";
+
+const CustomRichTextEditor = ({
+ value = "",
+ onChange,
+ placeholder = "Describe your event...",
+ height = "600px"
+}) => {
+ const handleChange = (val) => {
+ onChange(val || '');
+ };
+
+ return (
+
{content[active]}
+ {/* Editor Header */}
+
+ );
+};
+
+export default CustomRichTextEditor;
diff --git a/frontend/src/components/form/DescriptionField.jsx b/frontend/src/components/form/DescriptionField.jsx
new file mode 100644
index 0000000..bcc8b26
--- /dev/null
+++ b/frontend/src/components/form/DescriptionField.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+const DescriptionField = ({
+ value = "",
+ onChange,
+ placeholder = "Describe your event...",
+ storageKey = "event-description-draft",
+ enablePreview = true
+}) => {
+ const [localValue, setLocalValue] = useState(value);
+ const [showPreview, setShowPreview] = useState(false);
+ const [lastSaved, setLastSaved] = useState(null);
+ const [isSaving, setIsSaving] = useState(false);
+
+ // Load draft from localStorage on mount
+ useEffect(() => {
+ const saved = localStorage.getItem(storageKey);
+ if (saved && !value) {
+ setLocalValue(saved);
+ onChange?.(saved);
+ }
+ }, [storageKey, value, onChange]);
+
+ // Debounced autosave
+ const saveToStorage = useCallback(
+ (() => {
+ let timeoutId;
+ return (text) => {
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => {
+ localStorage.setItem(storageKey, text);
+ setLastSaved(new Date());
+ setIsSaving(false);
+ }, 1000);
+ setIsSaving(true);
+ };
+ })(),
+ [storageKey]
+ );
+
+ // Handle text changes
+ const handleChange = (e) => {
+ const newValue = e.target.value;
+ setLocalValue(newValue);
+ onChange?.(newValue);
+ saveToStorage(newValue);
+ };
+
+ const characterCount = localValue.length;
+ const isGoodLength = characterCount >= 100 && characterCount <= 1000;
+
+ return (
+
+
+
+ {/* Editor */}
+
+ = 100 && value.length <= 2000 ? 'text-green-400' : 'text-gray-400'}`}>
+ {value.length} characters
+
+
+ {value.split(/\s+/).filter(word => word.length > 0).length} words
+
+
+
+
+
+ {/* Toolbar */}
+
+ );
+};
+
+export default DescriptionField;
diff --git a/frontend/src/components/form/FormActions.jsx b/frontend/src/components/form/FormActions.jsx
new file mode 100644
index 0000000..456b382
--- /dev/null
+++ b/frontend/src/components/form/FormActions.jsx
@@ -0,0 +1,62 @@
+import React from "react";
+
+const FormActions = ({
+ onBack,
+ onNext,
+ onSubmit,
+ isFirst = false,
+ isLast = false,
+ loading = false,
+ isEditMode = false
+}) => {
+ return (
+
+
+
+ {/* Textarea or Preview */}
+ {!showPreview ? (
+
+ ) : (
+
+
+ {characterCount} characters
+
+ {lastSaved && (
+
+ Draft saved {lastSaved.toLocaleTimeString()}
+
+ )}
+ {isSaving && (
+ Saving...
+ )}
+
+
+ {enablePreview && (
+
+ )}
+
+ {localValue || (
+ No content to preview
+ )}
+
+ )}
+
+ {/* Help text */}
+ + Recommended length: 100-1000 characters. Include event details, requirements, and what participants can expect. +
+
+
+ );
+};
+
+export default FormActions;
diff --git a/frontend/src/components/form/FormField.jsx b/frontend/src/components/form/FormField.jsx
new file mode 100644
index 0000000..a774b6b
--- /dev/null
+++ b/frontend/src/components/form/FormField.jsx
@@ -0,0 +1,102 @@
+import React from "react";
+
+const FormField = ({
+ label,
+ name,
+ type = "text",
+ value,
+ onChange,
+ error,
+ placeholder,
+ required = false,
+ disabled = false,
+ className = "",
+ helperText,
+ ...props
+}) => {
+ const id = `field-${name}`;
+
+ return (
+
+
+
+
+
+ {isLast ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {type === "textarea" ? (
+
+ ) : type === "file" ? (
+
+ );
+};
+
+export default FormField;
diff --git a/frontend/src/components/form/StepProgress.jsx b/frontend/src/components/form/StepProgress.jsx
new file mode 100644
index 0000000..3c5c716
--- /dev/null
+++ b/frontend/src/components/form/StepProgress.jsx
@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+
+const StepProgress = ({ steps, currentStep, onStepClick, stepData = {} }) => {
+ const [hoveredStep, setHoveredStep] = useState(null);
+
+ const getStepStatus = (index) => {
+ if (index < currentStep) return "completed";
+ if (index === currentStep) return "current";
+ return "pending";
+ };
+
+ const isStepComplete = (index) => {
+ const data = stepData;
+ switch (index) {
+ case 0:
+ return data.name?.trim() && data.date && data.venue?.trim() &&
+ data.numberOfMember > 0 && data.poster &&
+ data.ruleBook?.trim() && data.amount > 0;
+ case 1:
+ return data.description?.trim();
+ case 2:
+ return data.coordinators?.length > 0;
+ default:
+ return false;
+ }
+ };
+
+ const isStepClickable = (index) => {
+ return true;
+ };
+
+ const getStepSummary = (index) => {
+ const data = stepData;
+ switch (index) {
+ case 0:
+ return data.name ? `${data.name}` : "Event name required";
+ case 1:
+ return data.description ? `${data.description.length} characters` : "Description needed";
+ case 2:
+ return data.coordinators?.length || data.usefulLinks?.length ? "Team & links added" : "Team & links needed";
+ default:
+ return "";
+ }
+ };
+
+ return (
+
+
+
+ {value?.name && (
+
+ ) : (
+
+ )}
+
+ {error && (
+ ✓ {value.name}
+ )} ++ {error} +
+ )} + {helperText && !error && ( ++ {helperText} +
+ )} +
+ {/* Desktop Progress Bar */}
+
+ );
+};
+
+export default StepProgress;
diff --git a/frontend/src/hooks/useApiRequest.jsx b/frontend/src/hooks/useApiRequest.jsx
index 2e0f752..73bcb99 100644
--- a/frontend/src/hooks/useApiRequest.jsx
+++ b/frontend/src/hooks/useApiRequest.jsx
@@ -1,8 +1,7 @@
import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
+import { showToast } from "../utils/toast";
export const useApiRequest = ({ enableToast }) => {
- const { toast } = useToast();
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);
@@ -13,56 +12,57 @@ export const useApiRequest = ({ enableToast }) => {
try {
const response = await fetchData();
-
- // If response is successful (status 2xx)
- if (response?.status >= 200 && response?.status < 300) {
- setData(response.data);
- enableToast
- ? toast({
- title: "Success",
- description: successMessage,
- variant: "success",
- className:
- "bg-green-800 text-white shadow-lg border border-green-500",
- })
- : "";
- return response.json();
+ setData(response.data);
+
+ if (enableToast) {
+ showToast.success(successMessage);
}
-
- // If response indicates an error (status 4xx, 5xx)
- throw response;
+
+ return response;
} catch (err) {
let errorMessage = "Something went wrong.";
let errorDetails = "";
- const { status } = err;
- const res = await err?.json();
-
- if (status >= 400 && status < 500) {
- // Client-side validation errors
- if (!Array.isArray(res.errors) && !res?.success) {
- errorDetails = res.message;
- } else {
- errorDetails = (
-
+
+
+ {/* Mobile Progress Bar */}
+
+ {steps.map((step, index) => {
+ const status = getStepStatus(index);
+ const isClickable = isStepClickable(index);
+
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {/* Step Label */}
+
+
+ {index < steps.length - 1 && (
+
+ )}
+
+
+
+ {/* Hover Card */}
+ {hoveredStep === index && isClickable && (
+
+ {step.title}
+
+
+
+ )}
+
+ {step.title}
+
+
+ {step.subtitle}
+
+
+ {getStepSummary(index)}
+
+
+
+
+
+ {steps.map((step, index) => {
+ const status = getStepStatus(index);
+ const isClickable = isStepClickable(index);
+
+ return (
+
+ );
+ })}
+
+
- {" "}
- {res.errors?.map((e, index) => (
-
- );
+ // Handle different types of errors
+ if (err?.response) {
+ // Axios error with response
+ const { status, data } = err.response;
+
+ if (status >= 400 && status < 500) {
+ // Client-side validation errors
+ if (data?.errors && Array.isArray(data.errors)) {
+ errorDetails = data.errors.map(e => `${e.path}: ${e.msg}`).join(', ');
+ } else if (data?.message) {
+ errorDetails = data.message;
+ }
+ } else if (status >= 500) {
+ errorMessage = "Server error. Please try again later.";
+ }
+ } else if (err?.status) {
+ // Fetch error with status
+ const { status } = err;
+
+ if (status >= 400 && status < 500) {
+ try {
+ const res = await err.json();
+ if (res?.errors && Array.isArray(res.errors)) {
+ errorDetails = res.errors.map(e => `${e.path}: ${e.msg}`).join(', ');
+ } else if (res?.message) {
+ errorDetails = res.message;
+ }
+ } catch (parseError) {
+ errorDetails = "Invalid response format";
+ }
+ } else if (status >= 500) {
+ errorMessage = "Server error. Please try again later.";
}
- } else if (status >= 500) {
- // Server-side errors
- errorMessage = "Server error. Please try again later.";
+ } else {
+ // Generic error (network, etc.)
+ errorMessage = err?.message || "Network error. Please check your connection.";
}
setError(errorMessage);
- toast({
- title: "Error",
- description: errorDetails || errorMessage,
- variant: "destructive",
- });
+ showToast.error(errorDetails || errorMessage);
return null;
} finally {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 134b62f..00326ec 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -221,3 +221,163 @@
--radius: 0.5rem;
}
}
+
+/* Custom styles for markdown editor */
+.w-md-editor {
+ background-color: transparent !important;
+ border: none !important;
+ height: 100% !important;
+}
+
+.w-md-editor-content {
+ background-color: transparent !important;
+ height: 100% !important;
+}
+
+.w-md-editor-text {
+ background-color: transparent !important;
+ color: white !important;
+ height: 100% !important;
+}
+
+.w-md-editor-text-input {
+ background-color: transparent !important;
+ color: white !important;
+ height: 100% !important;
+}
+
+.w-md-editor-text-pre > code,
+.w-md-editor-text-input {
+ color: white !important;
+ background-color: transparent !important;
+}
+
+.w-md-editor-toolbar {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
+ padding: 8px 12px !important;
+}
+
+.w-md-editor-toolbar-divider {
+ background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.w-md-editor-toolbar li > button {
+ color: white !important;
+ padding: 4px 8px !important;
+ border-radius: 4px !important;
+}
+
+.w-md-editor-toolbar li > button:hover {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.w-md-editor-toolbar li > button:active {
+ background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+/* Markdown preview styles */
+.w-md-editor-preview {
+ background-color: transparent !important;
+ color: white !important;
+ padding: 16px !important;
+}
+
+.w-md-editor-preview h1,
+.w-md-editor-preview h2,
+.w-md-editor-preview h3,
+.w-md-editor-preview h4,
+.w-md-editor-preview h5,
+.w-md-editor-preview h6 {
+ color: white !important;
+ margin-bottom: 12px !important;
+}
+
+.w-md-editor-preview p {
+ color: #e5e7eb !important;
+ margin-bottom: 12px !important;
+ line-height: 1.6 !important;
+}
+
+.w-md-editor-preview code {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ color: #fbbf24 !important;
+ padding: 2px 6px !important;
+ border-radius: 4px !important;
+ font-size: 0.875em !important;
+}
+
+.w-md-editor-preview pre {
+ background-color: rgba(0, 0, 0, 0.3) !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-radius: 6px !important;
+ padding: 12px !important;
+ margin: 12px 0 !important;
+ overflow-x: auto !important;
+}
+
+.w-md-editor-preview blockquote {
+ border-left: 4px solid #3b82f6 !important;
+ background-color: rgba(59, 130, 246, 0.1) !important;
+ padding: 12px 16px !important;
+ margin: 12px 0 !important;
+ border-radius: 0 6px 6px 0 !important;
+}
+
+.w-md-editor-preview a {
+ color: #60a5fa !important;
+ text-decoration: underline !important;
+}
+
+.w-md-editor-preview a:hover {
+ color: #93c5fd !important;
+}
+
+.w-md-editor-preview ul,
+.w-md-editor-preview ol {
+ margin: 12px 0 !important;
+ padding-left: 24px !important;
+}
+
+.w-md-editor-preview li {
+ margin-bottom: 4px !important;
+ color: #e5e7eb !important;
+}
+
+/* Fullscreen mode */
+.w-md-editor-fullscreen {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ bottom: 0 !important;
+ z-index: 9999 !important;
+ background-color: rgba(0, 0, 0, 0.95) !important;
+}
+
+/* Form input focus styles */
+input:focus,
+textarea:focus {
+ outline: none !important;
+ ring: 2px !important;
+ ring-color: #3b82f6 !important;
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.5);
+}
diff --git a/frontend/src/pages/CreateEventPage.jsx b/frontend/src/pages/CreateEventPage.jsx
index 705e0ad..380bc8f 100644
--- a/frontend/src/pages/CreateEventPage.jsx
+++ b/frontend/src/pages/CreateEventPage.jsx
@@ -1,13 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
import PageLayout from "../components/PageLayout";
-import { EventForm } from "../components/EventForm";
+import MultiPageEventForm from "../components/MultiPageEventForm";
const CreateEventPage = () => {
return (
- {`${e.path}: ${e.msg}`}
- ))}
-
-
+ {/* Submit Content */}
,
- ];
+ // Handle case when no event is passed
+ if (!event) {
+ return (
+
+
+ Event not found
+ The event you're looking for doesn't exist or has been removed.
+ +
-
- event.isLive)}
- isLive={true}
- navigate={navigate}
- />
-
- !event.isLive)}
- isLive={false}
- navigate={navigate}
- />
+
+
);
}
diff --git a/frontend/src/utils/eventUtils.js b/frontend/src/utils/eventUtils.js
new file mode 100644
index 0000000..7defc8e
--- /dev/null
+++ b/frontend/src/utils/eventUtils.js
@@ -0,0 +1,98 @@
+// Event categorization and utility functions
+
+export const getEventStatus = (eventDate) => {
+ const today = new Date();
+ today.setHours(0, 0, 0, 0); // Reset time to start of day
+
+ const eventDateObj = new Date(eventDate);
+ eventDateObj.setHours(0, 0, 0, 0); // Reset time to start of day
+
+ if (eventDateObj < today) {
+ return 'Past';
+ } else if (eventDateObj.getTime() === today.getTime()) {
+ return 'Live';
+ } else {
+ return 'Upcoming';
+ }
+};
+
+export const getStatusColor = (status) => {
+ switch (status) {
+ case 'Live':
+ return 'bg-red-500';
+ case 'Upcoming':
+ return 'bg-green-500';
+ case 'Past':
+ return 'bg-gray-500';
+ default:
+ return 'bg-blue-500';
+ }
+};
+
+export const getStatusTextColor = (status) => {
+ switch (status) {
+ case 'Live':
+ return 'text-red-500';
+ case 'Upcoming':
+ return 'text-green-500';
+ case 'Past':
+ return 'text-gray-400';
+ default:
+ return 'text-blue-500';
+ }
+};
+
+export const formatDate = (dateString) => {
+ const date = new Date(dateString);
+ return date.toLocaleDateString('en-US', {
+ weekday: 'short',
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ });
+};
+
+export const formatTime = (dateString) => {
+ const date = new Date(dateString);
+ return date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+};
+
+// Smart search function
+export const searchEvents = (events, searchTerm) => {
+ if (!searchTerm.trim()) return events;
+
+ const term = searchTerm.toLowerCase().trim();
+
+ return events.filter(event => {
+ // Check if it's a date search (YYYY-MM-DD or MM/DD/YYYY format)
+ const dateRegex = /^\d{4}-\d{2}-\d{2}$|^\d{1,2}\/\d{1,2}\/\d{4}$/;
+ if (dateRegex.test(term)) {
+ const eventDate = new Date(event.date).toISOString().split('T')[0];
+ const searchDate = term.includes('/')
+ ? new Date(term).toISOString().split('T')[0]
+ : term;
+ return eventDate === searchDate;
+ }
+
+ // Check if it's a status search
+ const statusTerms = ['past', 'live', 'upcoming'];
+ if (statusTerms.includes(term)) {
+ const eventStatus = getEventStatus(event.date);
+ return eventStatus.toLowerCase() === term;
+ }
+
+ // Default to name search
+ return event.name.toLowerCase().includes(term) ||
+ (event.description && event.description.toLowerCase().includes(term)) ||
+ (event.venue && event.venue.toLowerCase().includes(term));
+ });
+};
+
+// Filter events by status
+export const filterEventsByStatus = (events, status) => {
+ if (!status || status === 'All') return events;
+ return events.filter(event => getEventStatus(event.date) === status);
+};
diff --git a/frontend/src/utils/toast.js b/frontend/src/utils/toast.js
new file mode 100644
index 0000000..b1e2bbd
--- /dev/null
+++ b/frontend/src/utils/toast.js
@@ -0,0 +1,188 @@
+import toast from 'react-hot-toast';
+
+// Custom toast styles that match EMR theme
+const toastStyles = {
+ style: {
+ background: '#050816',
+ color: '#f3f3f3',
+ border: '1px solid #aaa6c3',
+ borderRadius: '12px',
+ padding: '16px 20px',
+ fontSize: '16px',
+ fontWeight: '500',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ },
+ success: {
+ style: {
+ background: 'linear-gradient(135deg, #050816 0%, #151030 100%)',
+ color: '#f3f3f3',
+ border: '1px solid #10b981',
+ borderRadius: '12px',
+ padding: '16px 20px',
+ fontSize: '16px',
+ fontWeight: '500',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ },
+ iconTheme: {
+ primary: '#10b981',
+ secondary: '#f3f3f3',
+ },
+ },
+ error: {
+ style: {
+ background: 'linear-gradient(135deg, #050816 0%, #151030 100%)',
+ color: '#f3f3f3',
+ border: '1px solid #ef4444',
+ borderRadius: '12px',
+ padding: '16px 20px',
+ fontSize: '16px',
+ fontWeight: '500',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ },
+ iconTheme: {
+ primary: '#ef4444',
+ secondary: '#f3f3f3',
+ },
+ },
+ loading: {
+ style: {
+ background: 'linear-gradient(135deg, #050816 0%, #151030 100%)',
+ color: '#f3f3f3',
+ border: '1px solid #3b82f6',
+ borderRadius: '12px',
+ padding: '16px 20px',
+ fontSize: '16px',
+ fontWeight: '500',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ },
+ iconTheme: {
+ primary: '#3b82f6',
+ secondary: '#f3f3f3',
+ },
+ },
+};
+
+// Large toast styles for important messages
+const largeToastStyles = {
+ style: {
+ background: '#050816',
+ color: '#f3f3f3',
+ border: '1px solid #aaa6c3',
+ borderRadius: '16px',
+ padding: '24px 28px',
+ fontSize: '18px',
+ fontWeight: '600',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ minWidth: '400px',
+ },
+ success: {
+ style: {
+ background: 'linear-gradient(135deg, #050816 0%, #151030 100%)',
+ color: '#f3f3f3',
+ border: '1px solid #10b981',
+ borderRadius: '16px',
+ padding: '24px 28px',
+ fontSize: '18px',
+ fontWeight: '600',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ minWidth: '400px',
+ },
+ iconTheme: {
+ primary: '#10b981',
+ secondary: '#f3f3f3',
+ },
+ },
+ error: {
+ style: {
+ background: 'linear-gradient(135deg, #050816 0%, #151030 100%)',
+ color: '#f3f3f3',
+ border: '1px solid #ef4444',
+ borderRadius: '16px',
+ padding: '24px 28px',
+ fontSize: '18px',
+ fontWeight: '600',
+ boxShadow: '0px 35px 120px -15px #211e35',
+ backdropFilter: 'blur(10px)',
+ minWidth: '400px',
+ },
+ iconTheme: {
+ primary: '#ef4444',
+ secondary: '#f3f3f3',
+ },
+ },
+};
+
+// Toast functions
+export const showToast = {
+ // Regular toasts
+ success: (message, options = {}) => {
+ return toast.success(message, {
+ duration: 4000,
+ position: 'bottom-right',
+ ...toastStyles.success,
+ ...options,
+ });
+ },
+
+ error: (message, options = {}) => {
+ return toast.error(message, {
+ duration: 5000,
+ position: 'bottom-right',
+ ...toastStyles.error,
+ ...options,
+ });
+ },
+
+ loading: (message, options = {}) => {
+ return toast.loading(message, {
+ position: 'bottom-right',
+ ...toastStyles.loading,
+ ...options,
+ });
+ },
+
+ // Large toasts for important messages
+ largeSuccess: (message, options = {}) => {
+ return toast.success(message, {
+ duration: 6000,
+ position: 'bottom-right',
+ ...largeToastStyles.success,
+ ...options,
+ });
+ },
+
+ largeError: (message, options = {}) => {
+ return toast.error(message, {
+ duration: 7000,
+ position: 'bottom-right',
+ ...largeToastStyles.error,
+ ...options,
+ });
+ },
+
+ // Custom toast
+ custom: (message, options = {}) => {
+ return toast(message, {
+ duration: 4000,
+ position: 'bottom-right',
+ ...toastStyles.style,
+ ...options,
+ });
+ },
+};
+
+// Dismiss toast
+export const dismissToast = (toastId) => {
+ toast.dismiss(toastId);
+};
+
+// Dismiss all toasts
+export const dismissAllToasts = () => {
+ toast.dismiss();
+};
+ {/* Back Button */}
+
);
diff --git a/frontend/src/pages/ManageEventsPage.jsx b/frontend/src/pages/ManageEventsPage.jsx
index 2789399..91b910f 100644
--- a/frontend/src/pages/ManageEventsPage.jsx
+++ b/frontend/src/pages/ManageEventsPage.jsx
@@ -1,40 +1,218 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import PageLayout from "../components/PageLayout";
import EventsSection from "../components/EventSection";
+import SearchBar from "../components/SearchBar";
import { useApiRequest } from "@/hooks/useApiRequest";
import { getAllEvents } from "@/api/apiService";
+import {
+ getEventStatus,
+ searchEvents,
+ filterEventsByStatus
+} from "../utils/eventUtils";
export default function ManageEventsPage() {
const navigate = useNavigate();
const [events, setEvents] = useState([]);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedStatus, setSelectedStatus] = useState("All");
const { request, loading } = useApiRequest({ enableToast: false });
useEffect(() => {
async function fetch() {
const response = await request(getAllEvents, "");
- console.log(response);
- setEvents(response.events);
+ if (response && response.events) {
+ setEvents(response.events);
+ }
}
fetch();
- }, []);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []); // Only run once on mount
+
+ // Categorize events by status
+ const categorizedEvents = useMemo(() => {
+ const categorized = {
+ Live: [],
+ Upcoming: [],
+ Past: []
+ };
+
+ events.forEach(event => {
+ const status = getEventStatus(event.date);
+ categorized[status].push(event);
+ });
+
+ return categorized;
+ }, [events]);
+
+ // Filter and search events
+ const filteredEvents = useMemo(() => {
+ let filtered = events;
+
+ // Apply search
+ if (searchTerm) {
+ filtered = searchEvents(filtered, searchTerm);
+ }
+
+ // Apply status filter
+ if (selectedStatus !== "All") {
+ filtered = filterEventsByStatus(filtered, selectedStatus);
+ }
+
+ return filtered;
+ }, [events, searchTerm, selectedStatus]);
+
+ // Get filtered categorized events
+ const filteredCategorizedEvents = useMemo(() => {
+ const categorized = {
+ Live: [],
+ Upcoming: [],
+ Past: []
+ };
+
+ filteredEvents.forEach(event => {
+ const status = getEventStatus(event.date);
+ categorized[status].push(event);
+ });
+
+ return categorized;
+ }, [filteredEvents]);
+
+ const handleSearch = (term) => {
+ setSearchTerm(term);
+ };
+
+ const handleStatusFilter = (status) => {
+ setSelectedStatus(status);
+ };
+
+ const statusFilters = [
+ { label: "All Events", value: "All", count: events.length },
+ { label: "Live", value: "Live", count: categorizedEvents.Live.length },
+ { label: "Upcoming", value: "Upcoming", count: categorizedEvents.Upcoming.length },
+ { label: "Past", value: "Past", count: categorizedEvents.Past.length }
+ ];
return (
-
+
+
+
+ {/* Event Details */}
+
+ {/* Header Section */}
+
+
+
+ {/* Search Bar */}
+ + Event Management +
++ Discover, manage, and organize all your events in one place. + Find events by name, date, or status with our smart search. +
+
+ {statusFilters.map((filter) => (
+
+ ))}
+
+
+ {/* Loading State */}
+ {loading && (
+
+
+ )}
+
+ {/* Events Display */}
+ {!loading && (
+ <>
+ {/* Show filtered results when search or filter is active */}
+ {(searchTerm || selectedStatus !== "All") ? (
+ <>
+ {/* Search/Filter Results Summary */}
+
+
+ Loading events...
+
+
+
+
+ {/* Single Filtered Results Section */}
+ + {searchTerm && selectedStatus !== "All" ? ( + <>Found {filteredEvents.length} events matching "{searchTerm}" in {selectedStatus} events + ) : searchTerm ? ( + <>Found {filteredEvents.length} events matching "{searchTerm}" + ) : ( + <>Showing {filteredEvents.length} {selectedStatus} events + )} +
+
+
+ )}
+
+ )}
+
+ )}
+ No events found
+ Try adjusting your search or filters
+