Neeraj Add Organizer Dropdown Participation Page

src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx

@@ -12,6 +12,7 @@ function EventParticipation() {
   const darkMode = useSelector(state => state.theme.darkMode);
   const exportRef = useRef(null);
   const [exporting, setExporting] = useState(false);
+  const [selectedOrganizer, setSelectedOrganizer] = useState('All Organizers');
 
   const handleSaveAsPDF = useCallback(() => {
     if (globalThis.window === undefined || globalThis.document === undefined) return;
@@ -57,23 +58,38 @@ function EventParticipation() {
         >
           Social And Recreational Management
         </h1>
-        <button
-          className={`${styles.savePdfBtn} ${
-            darkMode ? styles.savePdfBtnDark : styles.savePdfBtnLight
-          } ${styles.noPrint}`}
-          onClick={handleSaveAsPDF}
-          disabled={exporting}
-          aria-busy={exporting}
-        >
-          {exporting ? (
-            'Preparing…'
-          ) : (
-            <>
-              <FontAwesomeIcon icon={faFilePdf} style={{ marginRight: '6px' }} />
-              Save as PDF
-            </>
-          )}
-        </button>
+        <div className={styles.headerActions}>
+          <button
+            className={`${styles.savePdfBtn} ${
+              darkMode ? styles.savePdfBtnDark : styles.savePdfBtnLight
+            } ${styles.noPrint}`}
+            onClick={handleSaveAsPDF}
+            disabled={exporting}
+            aria-busy={exporting}
+          >
+            {exporting ? (
+              'Preparing…'
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faFilePdf} style={{ marginRight: '6px' }} />
+                Save as PDF
+              </>
+            )}
+          </button>
+
+          <select
+            className={`${styles.organizerDropdown} ${
+              darkMode ? styles.organizerDropdownDark : ''
+            }`}
+            value={selectedOrganizer}
+            onChange={e => setSelectedOrganizer(e.target.value)}
+          >
+            <option value="All Organizers">All Organizers</option>
+            <option value="Organizer 1">Organizer 1</option>
+            <option value="Organizer 2">Organizer 2</option>
+            <option value="Organizer 3">Organizer 3</option>
+          </select>
+        </div>
       </header>
 
       <MyCases />

src/components/CommunityPortal/Reports/Participation/MyCases.jsx

@@ -7,32 +7,28 @@ import { filterEventsByDate } from './FilterByDate';
 
 function MyCases() {
   const [view, setView] = useState('card');
-  const [filter, setFilter] = useState('all');
+  const [filter, setFilter] = useState('All Time');
   const [expanded, setExpanded] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const isExporting =
-    typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true'; // Sonar: prefer .
+    typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true';
 
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const filteredEvents = filterEventsByDate(mockEvents, filter);
 
   const filteredEventsByEventType = filteredEvents.filter(event => {
     if (event.eventType === 'all') {
-      return true; // Simplified: just return true to keep the item
-    } else {
-      return event.eventType === filter;
+      return true;
     }
+    return event.eventType === filter;
   });
 
-  // Sonar: extract nested ternary into independent statement
   let visibleEvents = filteredEventsByEventType;
+
   if (!isExporting) {
-    // Limt to 10 events by default, but show all if when user clicks "More" or when exporting
-    visibleEvents = expanded
-      ? filteredEvents.slice(0, filteredEvents.length)
-      : filteredEvents.slice(0, 10);
+    visibleEvents = expanded ? filteredEventsByEventType : filteredEventsByEventType.slice(0, 10);
   }
 
   const placeholderAvatar = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
@@ -171,7 +167,7 @@ function MyCases() {
           >
             + Create New
           </button>
-          {filteredEvents.length > 10 && !isExporting && (
+          {filteredEventsByEventType.length > 10 && !isExporting && (
             <button
               type="button"
               className={`more-btn-global ${styles.moreBtn}`}

src/components/CommunityPortal/Reports/Participation/Participation.module.css

@@ -45,6 +45,34 @@
   letter-spacing: 0.5px;
 }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.organizerDropdown {
+  padding: 8px 14px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  min-width: 180px;
+  cursor: pointer;
+}
+
+.organizerDropdown:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.organizerDropdownDark {
+  background-color: #1e293b;
+  color: #fff;
+  border: 1px solid #475569;
+}
+
 /* ---------- Save as PDF button ---------- */
 .savePdfBtn {
   font-size: 14px;
@@ -179,7 +207,6 @@
 }
 
 @media (width <= 1024px) {
-
   .analyticsSection {
     flex-direction: column;
     gap: 30px;
@@ -532,7 +559,6 @@
 
 .insightsDark .insightsTab {
   background-color: #3A506B;
-
   color: #fff;
   border-right: 1px solid #555;
 }
@@ -648,7 +674,6 @@
 
 .exportOptionsButtons,
 .exportOptionsButtonsDark {
-
   flex: 1;
   padding: 10px 12px;
   border-radius: 10px;
@@ -799,7 +824,6 @@
 
   :global(.case-card-global) {
     break-inside: avoid !important;
-
     height: auto !important;
   }
 
@@ -846,7 +870,6 @@
 
   :global(.tracking-table-global-dark) thead th {
     background: #1C2541 !important;
-
     color: #fff !important;
   }
 
@@ -876,46 +899,39 @@
   /* Dark mode styles for print */
   .participationLandingPageDark {
     background: #1B2A41 !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark :global(.case-card-global) {
     background: #3A506B !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .trackingContainerDark {
     background: #1C2541 !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .insightsDark {
     background: #1C2541 !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .trackingListContainerDark {
     background: #3A506B !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark :global(.tracking-table-global-dark) thead th {
     background: #1C2541 !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark .trackingRateDark {
     background: #3A506B !important;
-
     color: #fff !important;
   }
 
@@ -1133,3 +1149,34 @@
   border: 1px solid #3A506B;
 }
 
+.insightsDark .insightsTab {
+  background-color: #3A506B;
+  color: #fff;
+  border-right: 1px solid #555;
+}
+
+.insightsDark .insightsTab.activeTab {
+  background-color: #0056b3;
+  color: #fff;
+}
+
+/* ---------- Info Tooltip Icons ---------- */
+.infoIcon {
+  margin-left: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: #666;
+  vertical-align: middle;
+}
+
+.infoIcon:hover {
+  color: #000;
+}
+
+.trackingTableDark .infoIcon {
+  color: #ccc;
+}
+
+.trackingTableDark .infoIcon:hover {
+  color: #fff;
+}