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 : ''
}`}
>
-
+
Drop-off and no-show rate tracking
-
-
-
+
+
+
+
+
+
+
+
+
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;
+}