diff --git a/package.json b/package.json index 58206d8394..647f5492d6 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "dompurify": "^3.2.5", "elliptic": "^6.6.1", "font-awesome": "^4.7.0", + "framer-motion": "^12.9.2", "fs-extra": "^11.3.0", "history": "^4.10.1", "html-react-parser": "^1.4.14", diff --git a/src/components/CommunityPortal/EventManagement/EventManagementTabs.jsx b/src/components/CommunityPortal/EventManagement/EventManagementTabs.jsx new file mode 100644 index 0000000000..2c19690c65 --- /dev/null +++ b/src/components/CommunityPortal/EventManagement/EventManagementTabs.jsx @@ -0,0 +1,110 @@ +import { useState, useEffect } from 'react'; +import { useParams, useHistory } from 'react-router-dom'; +import styles from './EventManagementTabs.module.css'; + +const dummyEvents = [ + { id: '1', name: 'Tech Conference 2025', date: '2025-05-15', location: 'San Francisco' }, + { id: '2', name: 'AI Summit', date: '2025-06-20', location: 'New York' }, + { id: '3', name: 'Developer Meetup', date: '2025-07-10', location: 'Chicago' }, +]; + +function EventManagementTabs() { + const { activityid, tab, section } = useParams(); + const history = useHistory(); + const [event, setEvent] = useState(null); + const [activeTab, setActiveTab] = useState(tab || 'description'); + const [activeSection, setActiveSection] = useState(section || 'comments'); + + useEffect(() => { + const foundEvent = dummyEvents.find(e => e.id === activityid); + setEvent(foundEvent); + }, [activityid]); + + const tabs = [ + { key: 'description', label: 'Description' }, + { key: 'analysis', label: 'Analysis' }, + { key: 'resources', label: 'Resources' }, + { key: 'engagement', label: 'Engagement' }, + ]; + + const engagementSections = ['comments', 'feedback']; + + const handleTabClick = newTab => { + setActiveTab(newTab); + const newPath = + newTab === 'engagement' + ? `../communityportal/activity/${activityid}/engagement/comments` + : `../communityportal/activity/${activityid}/${newTab}`; + history.push(newPath); + }; + + const handleEngagementSectionClick = newSection => { + setActiveSection(newSection); + history.push(`/communityportal/activity/${activityid}/engagement/${newSection}`); + }; + + const renderContent = () => { + if (!event) return
Event details below
; + + if (activeTab === 'engagement') { + return ( +
+
+ {engagementSections.map(sec => ( + + ))} +
+
+ {activeSection === 'feedback' ? ( +
Feedback section
+ ) : ( +
Comments Section
+ )} +
+
+ ); + } + + switch (activeTab) { + case 'analysis': + return
Analysis for {event.name}
; + case 'resources': + return
Resources for {event.name}
; + case 'description': + default: + return ( +
+

This is a detailed description of the event.

+
+ ); + } + }; + + return ( +
+
+ {tabs.map(({ key, label }) => ( + + ))} +
+ +
{renderContent()}
+
+ ); +} + +export default EventManagementTabs; diff --git a/src/components/CommunityPortal/EventManagement/EventManagementTabs.module.css b/src/components/CommunityPortal/EventManagement/EventManagementTabs.module.css new file mode 100644 index 0000000000..a930300e9a --- /dev/null +++ b/src/components/CommunityPortal/EventManagement/EventManagementTabs.module.css @@ -0,0 +1,59 @@ +.eventTabs { + margin-top: 10px; +} + +.tabButtons { + display: flex; + gap: 10px; + margin-bottom: 15px; +} + +.tabBtn { + padding: 10px 15px; + border: none; + background-color: transparent; + font-size: 16px; + cursor: pointer; + transition: all 0.2s ease-in-out; + font-weight: normal; +} + +.tabBtn:hover { + font-weight: bold; +} + +.tabBtn.active { + font-weight: bold; + border-bottom: 2px solid black; +} + +.engagementSections { + display: flex; + gap: 10px; + margin-bottom: 10px; +} + +.sectionBtn { + padding: 8px 12px; + border: none; + background-color: lightgray; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +.sectionBtn.active { + font-weight: bold; + background-color: #595959; + color: white; +} + +.contentBox { + padding: 15px; + border: 1px solid #ddd; + border-radius: 4px; + margin-top: 10px; +} + +.mainContent { + margin-top: 10px; +} diff --git a/src/components/CommunityPortal/EventManagement/EventPage.jsx b/src/components/CommunityPortal/EventManagement/EventPage.jsx new file mode 100644 index 0000000000..278f7e024e --- /dev/null +++ b/src/components/CommunityPortal/EventManagement/EventPage.jsx @@ -0,0 +1,234 @@ +import { useState } from 'react'; +import { useParams, useHistory } from 'react-router-dom'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; +import Calendar from 'react-calendar'; +import 'react-calendar/dist/Calendar.css'; +import { useSelector } from 'react-redux'; +import styles from './EventPage.module.css'; +import EventManagementTabs from './EventManagementTabs'; + +function EventPage() { + const darkMode = useSelector(state => state.theme.darkMode); + const { activityid } = useParams(); + const history = useHistory(); + + const [eventName, setEventName] = useState('Event Name'); + const [eventType, setEventType] = useState('In-person'); + const [location, setLocation] = useState('San Francisco, CA 94108'); + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(new Date()); + const [time, setTime] = useState('9:00 AM - 11:00 AM EDT'); + const [organizer, setOrganizer] = useState('Alex Brain'); + const [capacity, setCapacity] = useState('120/200'); + const [status, setStatus] = useState('Active'); + const [rating] = useState(4); + const [media, setMedia] = useState(null); + const [description, setDescription] = useState(''); + + const handleMediaUpload = event => { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setMedia(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + const renderStars = () => { + const stars = ['one', 'two', 'three', 'four', 'five']; + return stars.map((id, i) => ( + + ⭐ + + )); + }; + + const handleDateChange = dates => { + const [start, end] = dates; + const today = new Date(); + today.setHours(0, 0, 0, 0); + if (start >= today) { + setStartDate(start); + setEndDate(end || start); + } + }; + + return ( +
+
+
+
+ {media ? Event Media : No Media} +
+ +
+ +
+ setEventName(e.target.value)} + /> +

+ Type:{' '} + +

+

+ Location:{' '} + setLocation(e.target.value)} + className={darkMode ? styles.inputDark : ''} + /> +

+
+
+
+

+ 📅 Date:
+

+ +
+
+

+ ⏰ Time:
+

{' '} + setTime(e.target.value)} + className={darkMode ? styles.inputDark : ''} + /> +
+
+

+ 👤 Organizer:
+

{' '} + setOrganizer(e.target.value)} + className={darkMode ? styles.inputDark : ''} + /> +
+
+ +
+
+ {' '} +

+ 👥 Capacity: +
{' '} + setCapacity(e.target.value)} + className={darkMode ? styles.inputDark : ''} + /> +

+
+
+ {' '} +

+ ⭐ Overall Rating:
{renderStars()} +

+
+
+ {' '} +

+ Status: +
+ +

+
+
+
+
+ +
+ { + if (date >= new Date().setHours(0, 0, 0, 0)) { + setStartDate(date); + setEndDate(date); + } + }} + value={startDate} + minDate={new Date()} + tileClassName={({ date, view }) => { + if (view === 'month' && date < new Date().setHours(0, 0, 0, 0)) { + return styles.calendarTileDisabled; + } + return null; + }} + /> +
+
+ +
+ +
+ +
+