From fa36f172c2fc8f91fb50f858607071d1a392c0ec Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Fri, 16 Jan 2026 20:41:35 -0500
Subject: [PATCH 1/3] feat: Added Pagination to ActivityList

---
 .../Activities/ActivityList.jsx               | 33 +++++++++++++++++--
 .../Activities/ActivityList.module.css        | 12 +++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityPortal/Activities/ActivityList.jsx b/src/components/CommunityPortal/Activities/ActivityList.jsx
index a348920086..634e578a41 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.jsx
+++ b/src/components/CommunityPortal/Activities/ActivityList.jsx
@@ -2,6 +2,7 @@
 import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './ActivityList.module.css';
+import { Button } from 'reactstrap';
 // import { useHistory } from 'react-router-dom';
 
 function ActivityList() {
@@ -13,6 +14,9 @@ function ActivityList() {
     location: '',
   });
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
   useEffect(() => {
     // Fetch activities (mock or replace with API call)
     const fetchedActivities = [
@@ -146,6 +150,11 @@ function ActivityList() {
     });
   };
 
+  const totalPages = Math.ceil(filteredActivities.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+
+  const paginatedActivities = filteredActivities.slice(startIndex, startIndex + itemsPerPage);
+
   return (
     <div className={`${styles.body} ${darkMode ? styles.darkBody : ''}`}>
       <h1 className={styles.h1}>Activity List</h1>
@@ -187,9 +196,9 @@ function ActivityList() {
       </div>
 
       <div className={`${styles.activityList} ${darkMode ? styles.darkActivityList : ''}`}>
-        {filteredActivities.length > 0 ? (
+        {paginatedActivities.length > 0 ? (
           <ul>
-            {filteredActivities.map(activity => (
+            {paginatedActivities.map(activity => (
               <li key={activity.id}>
                 <strong>{activity.name}</strong> - {activity.type} - {activity.date} -{' '}
                 {activity.location}
@@ -200,6 +209,26 @@ function ActivityList() {
           <p>No activities found</p>
         )}
       </div>
+
+      {totalPages > 1 && (
+        <div className={styles.pagination}>
+          <Button onClick={() => setCurrentPage(p => p - 1)} disabled={currentPage === 1}>
+            Prev
+          </Button>
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
+            <Button
+              key={page}
+              onClick={() => setCurrentPage(page)}
+              className={page === currentPage ? styles.activePage : ''}
+            >
+              {page}
+            </Button>
+          ))}
+          <Button onClick={() => setCurrentPage(p => p + 1)} disabled={currentPage === totalPages}>
+            Next
+          </Button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/CommunityPortal/Activities/ActivityList.module.css b/src/components/CommunityPortal/Activities/ActivityList.module.css
index 0c5bc8b0d5..2bab1acbc1 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.module.css
+++ b/src/components/CommunityPortal/Activities/ActivityList.module.css
@@ -152,3 +152,15 @@
     padding: 10px;
   }
 }
+
+.pagination{
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.activePage{
+  font-weight: bold;
+  text-decoration: underline;
+}
\ No newline at end of file

From 0e2aec7dd81751dee2d26614b6588a51b12d6d50 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Sat, 2 May 2026 10:32:30 -0700
Subject: [PATCH 2/3] fix: Resolve merge conflicts

---
 .../Activities/ActivityList.jsx               | 380 +++++++++++-------
 .../Activities/ActivityList.module.css        | 282 ++++++++++---
 .../Activities/mockActivities.js              | 182 +++++++++
 3 files changed, 636 insertions(+), 208 deletions(-)
 create mode 100644 src/components/CommunityPortal/Activities/mockActivities.js

diff --git a/src/components/CommunityPortal/Activities/ActivityList.jsx b/src/components/CommunityPortal/Activities/ActivityList.jsx
index 634e578a41..9e0a0e3a66 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.jsx
+++ b/src/components/CommunityPortal/Activities/ActivityList.jsx
@@ -1,146 +1,83 @@
 // Activity List Component
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import styles from './ActivityList.module.css';
-import { Button } from 'reactstrap';
-// import { useHistory } from 'react-router-dom';
+import { mockActivities } from './mockactivities';
 
 function ActivityList() {
   const [activities, setActivities] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedActivity, setSelectedActivity] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
   const darkMode = useSelector(state => state.theme.darkMode);
+
   const [filter, setFilter] = useState({
     type: '',
     date: '',
     location: '',
   });
 
+  const [sortOrder, setSortOrder] = useState('earliest');
+  const [showPastEvents, setShowPastEvents] = useState(false);
+
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
 
+  // Dark mode body class
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('activity-list-dark-body');
+    } else {
+      document.body.classList.remove('activity-list-dark-body');
+    }
+
+    return () => {
+      document.body.classList.remove('activity-list-dark-body');
+    };
+  }, [darkMode]);
+
+  // Fetch activities (mock fallback)
   useEffect(() => {
-    // Fetch activities (mock or replace with API call)
-    const fetchedActivities = [
-      {
-        id: 1,
-        name: 'Yoga Class',
-        type: 'Fitness',
-        date: '2024-01-10',
-        location: 'Community Center',
-      },
-      {
-        id: 2,
-        name: 'Book Club',
-        type: 'Social',
-        date: '2024-01-12',
-        location: 'Library',
-      },
-      {
-        id: 3,
-        name: 'Coding Workshop',
-        type: 'Educational',
-        date: '2023-12-30',
-        location: 'Tech Hub',
-      },
-      {
-        id: 4,
-        name: 'Painting Session',
-        type: 'Art',
-        date: '2024-01-15',
-        location: 'Art Studio',
-      },
-      {
-        id: 5,
-        name: 'Dance Class',
-        type: 'Fitness',
-        date: '2024-01-10',
-        location: 'Community Center',
-      },
-      {
-        id: 6,
-        name: 'Gardening Meetup',
-        type: 'Social',
-        date: '2024-01-20',
-        location: 'Botanical Garden',
-      },
-      {
-        id: 7,
-        name: 'Cooking Class',
-        type: 'Educational',
-        date: '2024-01-18',
-        location: 'Culinary School',
-      },
-      {
-        id: 8,
-        name: 'Photography Walk',
-        type: 'Art',
-        date: '2023-12-30',
-        location: 'City Park',
-      },
-      {
-        id: 9,
-        name: 'Marathon Training',
-        type: 'Fitness',
-        date: '2024-02-01',
-        location: 'Stadium',
-      },
-      {
-        id: 10,
-        name: 'Chess Tournament',
-        type: 'Social',
-        date: '2024-01-12',
-        location: 'Library',
-      },
-      {
-        id: 11,
-        name: 'Tech Talk',
-        type: 'Educational',
-        date: '2024-01-15',
-        location: 'Tech Hub',
-      },
-      {
-        id: 12,
-        name: 'Sculpture Workshop',
-        type: 'Art',
-        date: '2024-01-25',
-        location: 'Art Studio',
-      },
-      {
-        id: 13,
-        name: 'Pilates Class',
-        type: 'Fitness',
-        date: '2024-01-20',
-        location: 'Community Center',
-      },
-      {
-        id: 14,
-        name: 'Film Screening',
-        type: 'Social',
-        date: '2024-01-18',
-        location: 'Library',
-      },
-      {
-        id: 15,
-        name: 'Robotics Expo',
-        type: 'Educational',
-        date: '2024-01-10',
-        location: 'Tech Hub',
-      },
-    ];
-    setActivities(fetchedActivities);
+    const fetchActivities = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Simulated API failure fallback
+        throw new Error('API not implemented yet');
+      } catch (err) {
+        setError(err.message);
+
+        const parsed = mockActivities.map(a => ({
+          ...a,
+          _dateObj: new Date(`${a.date}T00:00:00`),
+        }));
+
+        setActivities(parsed);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchActivities();
   }, []);
 
+  // Reset page on filter/sort change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filter, sortOrder, showPastEvents]);
+
   const handleFilterChange = e => {
     const { name, value } = e.target;
-    setFilter({ ...filter, [name]: value });
+    setFilter(prev => ({ ...prev, [name]: value }));
   };
 
-  const filteredActivities = activities.filter(activity => {
-    return (
-      (!filter.type || activity.type.toLowerCase().includes(filter.type.toLowerCase())) &&
-      (!filter.date || activity.date === filter.date) &&
-      (!filter.location || activity.location.toLowerCase().includes(filter.location.toLowerCase()))
-    );
-  });
+  const handleSortChange = e => {
+    setSortOrder(e.target.value);
+  };
 
   const handleClearFilters = () => {
     setFilter({
@@ -148,35 +85,112 @@ function ActivityList() {
       date: '',
       location: '',
     });
+    setShowPastEvents(false);
+    setCurrentPage(1);
+  };
+
+  const handleActivityClick = activity => {
+    setSelectedActivity(activity);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
   };
 
+  const startOfToday = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  const activityTypes = useMemo(() => {
+    const typeOrder = new Map();
+
+    activities.forEach(activity => {
+      if (activity.type && !typeOrder.has(activity.type)) {
+        typeOrder.set(activity.type, typeOrder.size);
+      }
+    });
+
+    return [...typeOrder.keys()].sort((a, b) => typeOrder.get(a) - typeOrder.get(b));
+  }, [activities]);
+
+  const filteredActivities = activities
+    .filter(activity => showPastEvents || activity._dateObj >= startOfToday)
+    .filter(activity => {
+      return (
+        (!filter.type || activity.type === filter.type) &&
+        (!filter.date || activity.date === filter.date) &&
+        (!filter.location ||
+          activity.location.toLowerCase().startsWith(filter.location.toLowerCase()))
+      );
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.date);
+      const dateB = new Date(b.date);
+      return sortOrder === 'earliest' ? dateA - dateB : dateB - dateA;
+    });
+
+  // Pagination (AFTER filtering)
   const totalPages = Math.ceil(filteredActivities.length / itemsPerPage);
-  const startIndex = (currentPage - 1) * itemsPerPage;
+  const safePage = Math.min(currentPage, totalPages || 1);
+  const startIndex = (safePage - 1) * itemsPerPage;
 
   const paginatedActivities = filteredActivities.slice(startIndex, startIndex + itemsPerPage);
 
   return (
-    <div className={`${styles.body} ${darkMode ? styles.darkBody : ''}`}>
-      <h1 className={styles.h1}>Activity List</h1>
+    <div
+      className={`${styles.activityListContainer} ${
+        darkMode ? styles.activityListContainerDark : ''
+      }`}
+    >
+      <h1 className={`${styles.heading} ${darkMode ? 'text-light' : ''}`}>Activity List</h1>
 
-      <div className={`${styles.filters} ${darkMode ? styles.darkFilters : ''}`}>
-        <label>
+      {/* Filters */}
+      <div className={`${darkMode ? styles.darkModeFilters : styles.filters}`}>
+        <label className={darkMode ? 'text-light' : ''}>
           Type:
-          <input
-            type="text"
+          <select
             name="type"
             value={filter.type}
             onChange={handleFilterChange}
-            placeholder="Enter type"
-          />
+            className={darkMode ? styles.darkModeInput : ''}
+          >
+            <option value="">All Types</option>
+            {activityTypes.map(type => (
+              <option key={type} value={type}>
+                {type}
+              </option>
+            ))}
+          </select>
         </label>
 
-        <label>
+        <label className={darkMode ? 'text-light' : ''}>
           Date:
-          <input type="date" name="date" value={filter.date} onChange={handleFilterChange} />
+          <input
+            type="date"
+            name="date"
+            value={filter.date}
+            onChange={handleFilterChange}
+            className={darkMode ? styles.darkModeInput : ''}
+            min={new Date().toISOString().split('T')[0]}
+          />
+        </label>
+
+        <label className={darkMode ? 'text-light' : ''}>
+          Sort By:
+          <select
+            value={sortOrder}
+            onChange={handleSortChange}
+            className={darkMode ? styles.darkModeInput : ''}
+          >
+            <option value="earliest">Earliest to Latest</option>
+            <option value="latest">Latest to Earliest</option>
+          </select>
         </label>
 
-        <label>
+        <label className={darkMode ? 'text-light' : ''}>
           Location:
           <input
             type="text"
@@ -184,51 +198,119 @@ function ActivityList() {
             value={filter.location}
             onChange={handleFilterChange}
             placeholder="Enter location"
+            className={darkMode ? styles.darkModeInput : ''}
+          />
+        </label>
+
+        <label className={`${styles.showPastToggle} ${darkMode ? styles.darkShowPastToggle : ''}`}>
+          Show Past Events:
+          <input
+            type="checkbox"
+            checked={showPastEvents}
+            onChange={e => setShowPastEvents(e.target.checked)}
           />
         </label>
-        <button
-          type="button"
-          onClick={handleClearFilters}
-          disabled={!filter.type && !filter.date && !filter.location}
-        >
-          Clear All
-        </button>
+
+        <div className={styles.clearButtonWrapper}>
+          <button
+            type="button"
+            onClick={handleClearFilters}
+            disabled={!filter.type && !filter.date && !filter.location && !showPastEvents}
+            className={`${styles.clearFiltersButton} ${
+              darkMode ? styles.clearFiltersButtonDark : ''
+            }`}
+          >
+            Clear All
+          </button>
+        </div>
       </div>
 
-      <div className={`${styles.activityList} ${darkMode ? styles.darkActivityList : ''}`}>
-        {paginatedActivities.length > 0 ? (
+      {/* Activity List */}
+      <div className={`${styles.activityList} ${darkMode ? styles.darkModeList : ''}`}>
+        {loading ? (
+          <p className={darkMode ? 'text-light' : ''}>Loading activities...</p>
+        ) : paginatedActivities.length > 0 ? (
           <ul>
             {paginatedActivities.map(activity => (
-              <li key={activity.id}>
-                <strong>{activity.name}</strong> - {activity.type} - {activity.date} -{' '}
-                {activity.location}
-              </li>
+              <div
+                key={activity.id}
+                style={{ cursor: 'pointer' }}
+                onClick={() => handleActivityClick(activity)}
+                tabIndex={0}
+                role="button"
+                onKeyDown={e => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    handleActivityClick(activity);
+                  }
+                }}
+              >
+                <li className={`${styles.activityItem} ${darkMode ? styles.darkModeItem : ''}`}>
+                  <strong>{activity.name}</strong>
+                  <span>
+                    {activity.type} – {activity.date} – {activity.location}
+                  </span>
+                </li>
+              </div>
             ))}
           </ul>
         ) : (
-          <p>No activities found</p>
+          <p className={darkMode ? 'text-light' : ''}>No activities found</p>
         )}
       </div>
 
+      {/* Pagination */}
       {totalPages > 1 && (
         <div className={styles.pagination}>
-          <Button onClick={() => setCurrentPage(p => p - 1)} disabled={currentPage === 1}>
+          <Button onClick={() => setCurrentPage(p => p - 1)} disabled={safePage === 1}>
             Prev
           </Button>
+
           {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
             <Button
               key={page}
               onClick={() => setCurrentPage(page)}
-              className={page === currentPage ? styles.activePage : ''}
+              className={page === safePage ? styles.activePage : ''}
             >
               {page}
             </Button>
           ))}
-          <Button onClick={() => setCurrentPage(p => p + 1)} disabled={currentPage === totalPages}>
+
+          <Button onClick={() => setCurrentPage(p => p + 1)} disabled={safePage === totalPages}>
             Next
           </Button>
         </div>
       )}
+
+      {/* Modal */}
+      <Modal isOpen={modalOpen} toggle={handleCloseModal}>
+        <ModalHeader toggle={handleCloseModal}>{selectedActivity?.name}</ModalHeader>
+        <ModalBody>
+          {selectedActivity && (
+            <>
+              <p>
+                <strong>Type:</strong> {selectedActivity.type}
+              </p>
+              <p>
+                <strong>Date:</strong> {selectedActivity.date}
+              </p>
+              <p>
+                <strong>Time:</strong> {selectedActivity.time}
+              </p>
+              <p>
+                <strong>Location:</strong> {selectedActivity.location}
+              </p>
+              <p>
+                <strong>Description:</strong> {selectedActivity.description}
+              </p>
+            </>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={handleCloseModal}>
+            Close
+          </Button>
+        </ModalFooter>
+      </Modal>
     </div>
   );
 }
diff --git a/src/components/CommunityPortal/Activities/ActivityList.module.css b/src/components/CommunityPortal/Activities/ActivityList.module.css
index 2bab1acbc1..dd29bac9db 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.module.css
+++ b/src/components/CommunityPortal/Activities/ActivityList.module.css
@@ -1,18 +1,18 @@
-/* Enhanced Aesthetic CSS for Activity List */
+/* stylelint-disable no-descending-specificity */
 
-.body {
-  font-family: 'Poppins', sans-serif;
-  margin: 0;
-  padding: 0;
-  background-color: #fff;
-  color: #333;
+/* Container */
+.activityListContainer {
+  padding: 20px;
+  min-height: calc(100vh - 140px);
 }
 
-.darkBody {
-  background: #1B2A41;
+.activityListContainerDark {
+  color: #fff;
+  padding-bottom: 40px;
 }
 
-.h1 {
+/* Heading */
+.heading {
   text-align: center;
   margin: 20px 0;
   color: #1e3a8a;
@@ -20,74 +20,100 @@
   font-weight: 600;
 }
 
+/* Filters */
 .filters {
   display: flex;
   justify-content: center;
+  align-items: flex-end;
   gap: 30px;
   margin: 30px 0;
   padding: 10px;
   background: #fff;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
 }
 
-.darkFilters {
-  background: #0f172a;
+.darkModeFilters {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 30px;
+  margin: 30px 0;
+  padding: 10px;
+  background: #1e2a3a;
+  box-shadow: none;
+  border: 1px solid #3a4a5c;
+  border-radius: 0;
 }
 
-.filters label {
+.filters label,
+.darkModeFilters label {
   display: flex;
   flex-direction: column;
   font-weight: 500;
   color: #1f2937;
 }
 
-.filters input {
+/* Inputs */
+.filters input,
+.filters select,
+.darkModeFilters input,
+.darkModeFilters select {
   padding: 10px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
   margin-top: 5px;
   font-size: 1rem;
   transition: all 0.3s ease;
+  background-color: #fff;
+  color: #333;
 }
 
-.filters input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
+.darkModeInput {
+  background-color: #1e2a3a !important;
+  color: #fff !important;
+  border: 1px solid #3a4a5c !important;
+  color-scheme: dark;
 }
 
-.filters button {
-  margin: 30px 0;
-  border: 1px solid #000000;
-  border-radius: 6px;
-  padding: 10px;
+/* Date picker icon fix for dark mode */
+.darkModeInput[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  cursor: pointer;
 }
 
-.filters button:hover:not(:disabled) {
-  transform: scale(1.05);
+.filters input:focus,
+.filters select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 8px rgb(59 130 246 / 30%);
 }
 
-.darkFilters button{
-  border: 1px solid #ffffff;
+.darkModeInput:focus {
+  border-color: #5c9ce6 !important;
+  box-shadow: 0 0 8px rgb(92 156 230 / 50%) !important;
 }
 
-.darkFilters input{
-  background: #0f172a;
-  border: 1px solid #ffffff;
+.darkModeInput::placeholder {
+  color: #a0a0a0;
 }
 
+/* Activity List */
 .activityList {
   max-width: 900px;
   margin: 0 auto;
-  background: #ffffff;
+  background: #fff;
   padding: 30px;
   border-radius: 12px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px rgb(0 0 0 / 10%);
 }
 
-.darkActivityList {
-  background: #2b3e59;
+.darkModeList {
+  background: #1e2a3a;
+  box-shadow: none;
+  border: 1px solid #3a4a5c;
+  border-radius: 0;
+  margin: 0 auto;
 }
 
 .activityList ul {
@@ -95,7 +121,8 @@
   padding: 0;
 }
 
-.activityList li {
+/* Activity Item */
+.activityItem {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -107,24 +134,41 @@
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.darkActivityList li {
-  background: #1B2A41;
+.activityItem:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
 }
 
-.activityList li:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.darkModeItem {
+  background-color: #1e2a3a !important;
+  border: 1px solid #3a4a5c !important;
+  color: #fff !important;
+  border-radius: 0;
 }
 
-.activityList li strong {
+.darkModeItem:hover {
+  background-color: #3d4f62 !important;
+  box-shadow: none !important;
+}
+
+.activityItem strong {
   color: #1e3a8a;
   font-size: 1.2rem;
 }
 
-.activityList li span {
+.darkModeItem strong {
+  color: #5c9ce6 !important;
+}
+
+.activityItem span {
   color: #4b5563;
 }
 
+.darkModeItem span {
+  color: #d1d5db !important;
+}
+
+/* Empty state */
 .activityList p {
   text-align: center;
   color: #6b7280;
@@ -132,14 +176,146 @@
   margin: 20px 0;
 }
 
-@media (max-width: 768px) {
-  .filters {
+/* Clear Button */
+.clearButtonWrapper {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.clearFiltersButton {
+  padding: 10px 14px;
+  border: 1px solid #000;
+  border-radius: 6px;
+  background: #f9fafb;
+  color: #1f2937;
+  font-family: Poppins, sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
+}
+
+.clearFiltersButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.clearFiltersButton:hover:not(:disabled) {
+  transform: scale(1.05);
+  background-color: #f9fafb;
+}
+
+.clearFiltersButtonDark {
+  border: 1px solid #fff;
+  background: #0f172a;
+  color: #f1f5f9;
+}
+
+.clearFiltersButtonDark:hover:not(:disabled) {
+  background: #111c33;
+}
+
+/* Suggestions Dropdown */
+.suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  margin-top: 4px;
+  max-height: 250px;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  z-index: 1000;
+}
+
+.darkSuggestions {
+  background: #1e293b;
+  border-color: #475569;
+}
+
+.suggestionItem {
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  color: #1f2937;
+}
+
+.darkSuggestions .suggestionItem {
+  color: #e2e8f0;
+}
+
+.suggestionItem:hover {
+  background-color: #f3f4f6;
+}
+
+.darkSuggestions .suggestionItem:hover {
+  background-color: #334155;
+}
+
+/* Show Past Toggle */
+.showPastToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  color: #1f2937;
+  border-radius: 6px;
+  margin-top: 5px;
+  font-size: 1rem;
+}
+
+.showPastToggle input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: #3b82f6;
+}
+
+.darkShowPastToggle {
+  color: #f1f5f9;
+}
+
+.darkShowPastToggle input[type="checkbox"] {
+  accent-color: #60a5fa;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.pagination button {
+  border-radius: 6px;
+  padding: 6px 12px;
+}
+
+.activePage {
+  font-weight: bold;
+  background-color: #3b82f6;
+  color: white;
+}
+
+/* Responsive */
+@media (width <= 768px) {
+  .filters,
+  .darkModeFilters {
     flex-direction: column;
     align-items: center;
     gap: 20px;
   }
 
-  .filters label {
+  .filters label,
+  .darkModeFilters label {
     width: 100%;
   }
 
@@ -147,20 +323,8 @@
     padding: 20px;
   }
 
-  .activityList li {
+  .activityItem {
     flex-direction: column;
     padding: 10px;
   }
-}
-
-.pagination{
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.activePage{
-  font-weight: bold;
-  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/components/CommunityPortal/Activities/mockActivities.js b/src/components/CommunityPortal/Activities/mockActivities.js
new file mode 100644
index 0000000000..667d2fce78
--- /dev/null
+++ b/src/components/CommunityPortal/Activities/mockActivities.js
@@ -0,0 +1,182 @@
+/**
+ * Mock activities data for development and fallback purposes
+ * This data is used when:
+ * - API is unavailable or fails
+ * - Development/testing environment
+ * - Demo purposes
+ */
+
+export const mockActivities = [
+  {
+    id: 1,
+    name: 'Yoga Class',
+    type: 'Fitness',
+    date: '2024-01-10',
+    time: '10:00 AM',
+    description: 'A relaxing yoga session for all levels.',
+    location: 'Community Center',
+  },
+  {
+    id: 2,
+    name: 'Book Club',
+    type: 'Social',
+    date: '2024-01-12',
+    time: '6:00 PM',
+    description: 'Monthly book discussion group.',
+    location: 'Library',
+  },
+  {
+    id: 3,
+    name: 'Coding Workshop',
+    type: 'Educational',
+    date: '2023-12-30',
+    time: '2:00 PM',
+    description: 'Learn the basics of coding in this hands-on workshop.',
+    location: 'Tech Hub',
+  },
+  {
+    id: 4,
+    name: 'Painting Session',
+    type: 'Art',
+    date: '2024-01-15',
+    time: '4:00 PM',
+    description: 'Express your creativity with paints and brushes.',
+    location: 'Art Studio',
+  },
+  {
+    id: 5,
+    name: 'Dance Class',
+    type: 'Fitness',
+    date: '2024-01-10',
+    time: '7:00 PM',
+    description: 'Learn new dance moves and have fun.',
+    location: 'Community Center',
+  },
+  {
+    id: 6,
+    name: 'Gardening Meetup',
+    type: 'Social',
+    date: '2024-01-20',
+    time: '3:00 PM',
+    description: 'Share gardening tips and plant care advice.',
+    location: 'Botanical Garden',
+  },
+  {
+    id: 7,
+    name: 'Cooking Class',
+    type: 'Educational',
+    date: '2024-01-18',
+    time: '5:00 PM',
+    description: 'Learn to cook delicious meals with our expert chefs.',
+    location: 'Culinary School',
+  },
+  {
+    id: 8,
+    name: 'Photography Walk',
+    type: 'Art',
+    date: '2023-12-30',
+    time: '9:00 AM',
+    description: 'Explore the city and capture beautiful moments with your camera.',
+    location: 'City Park',
+  },
+  {
+    id: 9,
+    name: 'Marathon Training',
+    type: 'Fitness',
+    date: '2024-02-01',
+    time: '6:00 AM',
+    description: 'Join us for early morning runs to prepare for the upcoming marathon.',
+    location: 'Stadium',
+  },
+  {
+    id: 10,
+    name: 'Chess Tournament',
+    type: 'Social',
+    date: '2024-01-12',
+    time: '1:00 PM',
+    description: 'Compete in our friendly chess tournament and test your skills.',
+    location: 'Library',
+  },
+  {
+    id: 11,
+    name: 'Tech Talk',
+    type: 'Educational',
+    date: '2024-01-15',
+    time: '4:00 PM',
+    description: 'Join us for an insightful talk on the latest tech trends and innovations.',
+    location: 'Tech Hub',
+  },
+  {
+    id: 12,
+    name: 'Sculpture Workshop',
+    type: 'Art',
+    date: '2024-01-25',
+    time: '2:00 PM',
+    description: 'Learn the art of sculpture and create your own masterpiece.',
+    location: 'Art Studio',
+  },
+  {
+    id: 13,
+    name: 'Pilates Class',
+    type: 'Fitness',
+    date: '2024-01-20',
+    time: '8:00 AM',
+    description: 'Strengthen your core and improve flexibility with our Pilates class.',
+    location: 'Community Center',
+  },
+  {
+    id: 14,
+    name: 'Film Screening',
+    type: 'Social',
+    date: '2024-01-18',
+    time: '7:00 PM',
+    description: 'Join us for a screening of a popular film followed by a discussion.',
+    location: 'Library',
+  },
+  {
+    id: 15,
+    name: 'Robotics Expo',
+    type: 'Educational',
+    date: '2024-01-10',
+    time: '10:00 AM',
+    description: 'Explore the world of robotics with interactive exhibits and demonstrations.',
+    location: 'Tech Hub',
+  },
+  {
+    id: 16,
+    name: 'Watercolor Workshop',
+    type: 'Art',
+    date: '2026-01-22',
+    time: '3:30 PM',
+    description: 'Practice watercolor techniques and create a take-home landscape painting.',
+    location: 'Art Studio',
+  },
+  {
+    id: 17,
+    name: 'HIIT Workout Class',
+    type: 'Fitness',
+    date: '2026-02-15',
+    time: '6:30 PM',
+    description: 'A high-energy interval training session designed to build strength and stamina.',
+    location: 'Community Gym',
+  },
+  {
+    id: 18,
+    name: 'GenAI for Beginners',
+    type: 'Educational',
+    date: '2026-09-10',
+    time: '5:00 PM',
+    description:
+      'An introductory session covering practical generative AI tools, prompts, and use cases.',
+    location: 'Tech Hub',
+  },
+  {
+    id: 19,
+    name: 'Book Club - March',
+    type: 'Social',
+    date: '2026-10-21',
+    time: '6:00 PM',
+    description: 'Meet fellow readers for a guided discussion of this month’s featured book.',
+    location: 'Library',
+  },
+];

From 4302e803c7a2d1b83bd3924a306d52d9dad2d868 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Thu, 4 Jun 2026 23:13:35 -0700
Subject: [PATCH 3/3] fix: sonar qube issues

---
 .../CommunityPortal/Activities/ActivityList.jsx    | 14 ++++++++------
 .../Activities/ActivityList.module.css             |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/CommunityPortal/Activities/ActivityList.jsx b/src/components/CommunityPortal/Activities/ActivityList.jsx
index 62b3cf4b6b..41fdf72c57 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.jsx
+++ b/src/components/CommunityPortal/Activities/ActivityList.jsx
@@ -139,7 +139,7 @@ function ActivityList() {
   const startIndex = (safePage - 1) * itemsPerPage;
 
   const paginatedActivities = filteredActivities.slice(startIndex, startIndex + itemsPerPage);
-
+  const hasActivities = paginatedActivities.length > 0;
   return (
     <div
       className={`${styles.activityListContainer} ${
@@ -151,7 +151,7 @@ function ActivityList() {
       {/* Filters */}
       <div className={`${darkMode ? styles.darkModeFilters : styles.filters}`}>
         <label className={darkMode ? 'text-light' : ''}>
-          Type:
+          <span>Type:</span>
           <select
             name="type"
             value={filter.type}
@@ -228,9 +228,9 @@ function ActivityList() {
 
       {/* Activity List */}
       <div className={`${styles.activityList} ${darkMode ? styles.darkModeList : ''}`}>
-        {loading ? (
-          <p className={darkMode ? 'text-light' : ''}>Loading activities...</p>
-        ) : paginatedActivities.length > 0 ? (
+        {loading && <p className={darkMode ? 'text-light' : ''}>Loading activities...</p>}
+
+        {!loading && hasActivities && (
           <ul>
             {paginatedActivities.map(activity => (
               <div
@@ -255,7 +255,9 @@ function ActivityList() {
               </div>
             ))}
           </ul>
-        ) : (
+        )}
+
+        {!loading && !hasActivities && (
           <p className={darkMode ? 'text-light' : ''}>No activities found</p>
         )}
       </div>
diff --git a/src/components/CommunityPortal/Activities/ActivityList.module.css b/src/components/CommunityPortal/Activities/ActivityList.module.css
index 6ccbda633d..e9f44282b5 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.module.css
+++ b/src/components/CommunityPortal/Activities/ActivityList.module.css
@@ -319,7 +319,7 @@
 
 .activePage {
   font-weight: bold;
-  background-color: #3b82f6;
+  background-color: #2563eb;
   color: white;
 }