From d73ec441f254aab000ebcfd5470f1546a59c7e25 Mon Sep 17 00:00:00 2001
From: Gayatri Sawant <sawantgayatri019@gmail.com>
Date: Thu, 5 Nov 2026 17:47:01 -0500
Subject: [PATCH] Participation: add icons to Drop-off and No-show Rate
 Tracking filters

- Event filter shows faCalendarCheck and time filter shows faClock
  inside the box on the left, matching the Upcoming Events filter icons.
- Added aria-labels ("Filter by event", "Filter by time").
- Filters sit side by side and move below the title on narrow cards
  instead of overlapping it.
- Icon styles live in a new DropOffTracking.module.css so the shared
  Participation.module.css is unchanged; icon color follows dark mode.
---
 .../Reports/Participation/DropOffTracking.jsx | 71 +++++++++++++------
 .../Participation/DropOffTracking.module.css  | 40 +++++++++++
 2 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css

diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
index 2ceb747caaa..bbc662e44e4 100644
--- a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './Participation.module.css';
+import iconStyles from './DropOffTracking.module.css';
 import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 import mockEvents from './mockData';
 import { filterEventsByDate } from './FilterByDate';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarCheck, faClock } from '@fortawesome/free-solid-svg-icons';
 
 function DropOffTracking() {
   const [selectedEvent, setSelectedEvent] = useState('All Events');
@@ -55,30 +58,52 @@ function DropOffTracking() {
         darkMode ? styles.trackingContainerDark : ''
       }`}
     >
-      <div className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''}`}>
+      <div
+        className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''} ${
+          iconStyles.trackingHeaderWrap
+        }`}
+      >
         <h3>Drop-off and no-show rate tracking</h3>
-        <div className={styles.trackingFilters}>
-          <select
-            className={styles.filterDropdown}
-            value={selectedEvent}
-            onChange={e => setSelectedEvent(e.target.value)}
-          >
-            <option value="All Events">All Events</option>
-            <option value="Yoga Class">Yoga Class</option>
-            <option value="Cooking Workshop">Cooking Workshop</option>
-            <option value="Dance Class">Dance Class</option>
-            <option value="Fitness Bootcamp">Fitness Bootcamp</option>
-          </select>
-          <select
-            className={styles.filterDropdown}
-            value={selectedTime}
-            onChange={e => setSelectedTime(e.target.value)}
-          >
-            <option value="All Time">All Time</option>
-            <option value="Today">Today</option>
-            <option value="This Week">This Week</option>
-            <option value="This Month">This Month</option>
-          </select>
+        <div className={`${styles.trackingFilters} ${iconStyles.trackingFiltersRow}`}>
+          <div className={iconStyles.trackingFilterField}>
+            <FontAwesomeIcon
+              icon={faCalendarCheck}
+              className={`${iconStyles.trackingFilterIcon} ${
+                darkMode ? iconStyles.trackingFilterIconDark : ''
+              }`}
+            />
+            <select
+              className={`${styles.filterDropdown} ${iconStyles.trackingFilterDropdownWithIcon}`}
+              aria-label="Filter by event"
+              value={selectedEvent}
+              onChange={e => setSelectedEvent(e.target.value)}
+            >
+              <option value="All Events">All Events</option>
+              <option value="Yoga Class">Yoga Class</option>
+              <option value="Cooking Workshop">Cooking Workshop</option>
+              <option value="Dance Class">Dance Class</option>
+              <option value="Fitness Bootcamp">Fitness Bootcamp</option>
+            </select>
+          </div>
+          <div className={iconStyles.trackingFilterField}>
+            <FontAwesomeIcon
+              icon={faClock}
+              className={`${iconStyles.trackingFilterIcon} ${
+                darkMode ? iconStyles.trackingFilterIconDark : ''
+              }`}
+            />
+            <select
+              className={`${styles.filterDropdown} ${iconStyles.trackingFilterDropdownWithIcon}`}
+              aria-label="Filter by time"
+              value={selectedTime}
+              onChange={e => setSelectedTime(e.target.value)}
+            >
+              <option value="All Time">All Time</option>
+              <option value="Today">Today</option>
+              <option value="This Week">This Week</option>
+              <option value="This Month">This Month</option>
+            </select>
+          </div>
         </div>
       </div>
 
diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css
new file mode 100644
index 00000000000..8ea474faf23
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css
@@ -0,0 +1,40 @@
+/* Drop-off and no-show tracking: filter icons inside each dropdown */
+.trackingFilterField {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.trackingFilterIcon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  color: #6b7280;
+  pointer-events: none;
+}
+
+.trackingFilterIconDark {
+  color: #cbd5e1;
+}
+
+.trackingFilterField .trackingFilterDropdownWithIcon {
+  margin-left: 0 !important;
+  padding-left: 1.9rem !important;
+}
+
+/* Keep the title and the filters from overlapping: the filters sit side by
+   side, and move below the title when the card is too narrow. */
+.trackingHeaderWrap {
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
+.trackingFiltersRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}