Chirag - Added Sorting Logic to drop-off & no-show rate columns in Participation table

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './Participation.module.css';
+import { ArrowUpDown, ArrowUp, ArrowDown, SquareArrowOutUpRight } from 'lucide-react';
 import mockEvents from './mockData';
 
 function DropOffTracking() {
@@ -10,6 +11,8 @@
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeEvent, setActiveEvent] = useState(null);
   const [selectedUsers, setSelectedUsers] = useState([]);
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortDirection, setSortDirection] = useState('asc');
 
   const darkMode = useSelector(state => state.theme.darkMode);
 
@@ -62,6 +65,38 @@
     setSelectedUsers([]);
   };
 
+  const handleSort = column => {
+    if (sortColumn === column) {
+      setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const parseRate = val => 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} />;
+  };
+
   return (
     <div
       className={`tracking-container-global ${styles.trackingContainer} ${
@@ -118,14 +153,26 @@
         >
           <thead>
             <tr>
-              <th>Event name</th>
-              <th>No-show rate</th>
-              <th>Drop-off rate</th>
+              <th onClick={() => handleSort('eventName')} className={styles.sortableHeader}>
+                <span className={styles.sortableHeaderContent}>
+                  Event name {sortIndicator('eventName')}
+                </span>
+              </th>
+              <th onClick={() => handleSort('noShowRate')} className={styles.sortableHeader}>
+                <span className={styles.sortableHeaderContent}>
+                  No-show rate {sortIndicator('noShowRate')}
+                </span>
+              </th>
+              <th onClick={() => handleSort('dropOffRate')} className={styles.sortableHeader}>
+                <span className={styles.sortableHeaderContent}>
+                  Drop-off rate {sortIndicator('dropOffRate')}
+                </span>
+              </th>
               <th>Get list</th>
             </tr>
           </thead>
           <tbody>
-            {filteredEvents.map(event => (
+            {sortedEvents.map(event => (
               <tr key={event.id}>
                 <td>{event.eventName}</td>
                 <td className={styles.trackingRateGreen}>{event.noShowRate}</td>
@@ -201,7 +248,6 @@
                 className={styles.sendEmailBtn}
                 disabled={selectedUsers.length === 0}
                 onClick={() => {
-                  console.log('Send email to:', selectedUsers);
                   handleCloseModal();
                 }}
               >