created new PR to hot fix hover effects for events

Author: saisandeepkoritala

package-lock.json

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import styles from './Participation.module.css';
 import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 import mockEvents from './mockData';
+import { filterEventsByDate } from './FilterByDate';
 
 function DropOffTracking() {
   const [selectedEvent, setSelectedEvent] = useState('All Events');
@@ -16,43 +17,12 @@ function DropOffTracking() {
 
   const darkMode = useSelector(state => state.theme.darkMode);
 
-  const getDateRange = () => {
-    const today = new Date();
-    let startDate, endDate;
+  const filteredEvents = filterEventsByDate(mockEvents, selectedTime);
 
-    if (selectedTime === 'Today') {
-      startDate = new Date(today);
-      startDate.setHours(0, 0, 0, 0);
-      endDate = new Date(today);
-      endDate.setHours(23, 59, 59, 999);
-    } else if (selectedTime === 'This Week') {
-      startDate = new Date(today);
-      startDate.setDate(today.getDate() - today.getDay());
-      startDate.setHours(0, 0, 0, 0);
-      endDate = new Date(startDate);
-      endDate.setDate(startDate.getDate() + 6);
-      endDate.setHours(23, 59, 59, 999);
-    } else if (selectedTime === 'This Month') {
-      startDate = new Date(today.getFullYear(), today.getMonth(), 1);
-      endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-      endDate.setHours(23, 59, 59, 999);
-    }
-
-    return { startDate, endDate };
-  };
-
-  const filteredEvents = mockEvents.filter(event => {
-    if (selectedEvent !== 'All Events' && event.eventType !== selectedEvent) {
-      return false;
-    }
-    if (selectedTime !== 'All Time') {
-      const { startDate, endDate } = getDateRange();
-      const eventDate = new Date(event.eventDate);
-      return eventDate >= startDate && eventDate <= endDate;
-    }
-    return true;
+  const filteredEventsByEventType = filteredEvents.filter(event => {
+    if (selectedEvent === 'All Events') return true;
+    return event.eventType === selectedEvent;
   });
-
   const handleOpenList = event => {
     setActiveEvent(event);
     setSelectedUsers([]);
@@ -74,24 +44,6 @@ function DropOffTracking() {
     }
   };
 
-  const parseRate = val => Number.parseFloat(val);
-
-  const sortedEvents = [...filteredEvents].sort((a, b) => {
-    if (!sortColumn) return 0;
-    let aVal = a[sortColumn];
-    let bVal = b[sortColumn];
-    if (sortColumn === 'noShowRate' || sortColumn === 'dropOffRate') {
-      aVal = parseRate(aVal);
-      bVal = parseRate(bVal);
-    } else {
-      aVal = aVal?.toLowerCase() ?? '';
-      bVal = bVal?.toLowerCase() ?? '';
-    }
-    if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
-    if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
-    return 0;
-  });
-
   const sortIndicator = column => {
     if (sortColumn !== column) return <ArrowUpDown size={14} />;
     return sortDirection === 'asc' ? <ArrowUp size={14} /> : <ArrowDown size={14} />;
@@ -105,15 +57,23 @@ function DropOffTracking() {
     >
       <div className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''}`}>
         <h3>Drop-off and no-show rate tracking</h3>
-        <div className={`${styles.trackingFilters} ${darkMode ? styles.trackingFiltersDark : ''}`}>
-          <select value={selectedEvent} onChange={e => setSelectedEvent(e.target.value)}>
+        <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 value={selectedTime} onChange={e => setSelectedTime(e.target.value)}>
+          <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>
@@ -124,6 +84,10 @@ function DropOffTracking() {
 
       <div className={styles.trackingSummary}>
         <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
+          <p className={styles.trackingRateValue}>
+            +5% <span>Last week</span>
+            {/* People who signed up but did not show up */}
+          </p>
           <p className={styles.trackingRateSubheading}>
             <span>
               <b>Drop-off rate</b>
@@ -135,6 +99,10 @@ function DropOffTracking() {
           </p>
         </div>
         <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
+          <p className={styles.trackingRateValue}>
+            +5% <span>Last week</span>
+            {/* People who did not show up */}
+          </p>
           <p className={styles.trackingRateSubheading}>
             <span>
               <b>No-show rate</b>
@@ -181,7 +149,7 @@ function DropOffTracking() {
           </thead>
 
           <tbody>
-            {sortedEvents.map(event => (
+            {filteredEventsByEventType.map(event => (
               <tr key={event.id}>
                 <td>{event.eventName}</td>
                 <td className={styles.trackingRateGreen} style={{ color: 'green' }}>

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

@@ -0,0 +1,52 @@
+/**
+ * Reusable filter for event lists based on date ranges.
+ * @param {Array} events - Array of event objects containing an 'eventDate' property.
+ * @param {string} filterType - 'Today', 'This Week', 'This Month', or 'All Time'.
+ * @returns {Array} - The filtered subset of events.
+ */
+export const filterEventsByDate = (events, filterType) => {
+  if (!events || !Array.isArray(events)) return [];
+
+  const today = new Date();
+  // Normalize today to midnight for consistent range comparisons
+  const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+  const newEvents = events.toSorted(
+    (a, b) => new Date(a.eventDate).getTime() - new Date(b.eventDate).getTime(),
+  );
+
+  return newEvents.filter(event => {
+    // Ensure we have a valid date object to compare
+    const eventDate = new Date(event.eventDate);
+    if (Number.isNaN(eventDate.getTime())) return false;
+
+    switch (filterType) {
+      case 'Today':
+        return eventDate.toDateString() === today.toDateString();
+
+      case 'This Week': {
+        // Find Sunday of the current week
+        const startOfWeek = new Date(startOfToday);
+        startOfWeek.setDate(startOfToday.getDate() - today.getDay());
+        startOfWeek.setHours(0, 0, 0, 0);
+
+        // Find Saturday of the current week
+        const endOfWeek = new Date(startOfWeek);
+        endOfWeek.setDate(startOfWeek.getDate() + 6);
+        endOfWeek.setHours(23, 59, 59, 999);
+
+        return eventDate >= startOfWeek && eventDate <= endOfWeek;
+      }
+
+      case 'This Month':
+        return (
+          eventDate.getMonth() === today.getMonth() &&
+          eventDate.getFullYear() === today.getFullYear()
+        );
+
+      case 'All Time':
+      default:
+        return true;
+    }
+  });
+};