Jaden taking over for Khushi - Phase 3 - EVENT MANAGEMENT PAGE (DONE Jaden)

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",

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 <div className={styles.contentBox}>Event details below</div>;
+
+    if (activeTab === 'engagement') {
+      return (
+        <div>
+          <div className={styles.engagementSections}>
+            {engagementSections.map(sec => (
+              <button
+                type="button"
+                key={sec}
+                onClick={() => handleEngagementSectionClick(sec)}
+                className={`${styles.sectionBtn} ${activeSection === sec ? styles.active : ''}`}
+              >
+                {sec.toUpperCase()}
+              </button>
+            ))}
+          </div>
+          <div className={styles.contentBox}>
+            {activeSection === 'feedback' ? (
+              <div>Feedback section</div>
+            ) : (
+              <div>Comments Section</div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    switch (activeTab) {
+      case 'analysis':
+        return <div className={styles.contentBox}>Analysis for {event.name}</div>;
+      case 'resources':
+        return <div className={styles.contentBox}>Resources for {event.name}</div>;
+      case 'description':
+      default:
+        return (
+          <div className={styles.contentBox}>
+            <p>This is a detailed description of the event.</p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className={styles.eventTabs}>
+      <div className={styles.tabButtons}>
+        {tabs.map(({ key, label }) => (
+          <button
+            type="button"
+            key={key}
+            onClick={() => handleTabClick(key)}
+            className={`${styles.tabBtn} ${activeTab === key ? styles.active : ''}`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.mainContent}>{renderContent()}</div>
+    </div>
+  );
+}
+
+export default EventManagementTabs;

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;
+}