Neeraj Add Get List Feature, No-Show List Modal And Tests For Drop-Off Tracking

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

@@ -7,6 +7,12 @@
   const [selectedEvent, setSelectedEvent] = useState('All Events');
   const [selectedTime, setSelectedTime] = useState('All Time');
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeEvent, setActiveEvent] = useState(null);
+  const [selectedUsers, setSelectedUsers] = useState([]);
+
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   const getDateRange = () => {
     const today = new Date();
     let startDate, endDate;
@@ -44,7 +50,17 @@
     return true;
   });
 
-  const darkMode = useSelector(state => state.theme.darkMode);
+  const handleOpenList = event => {
+    setActiveEvent(event);
+    setSelectedUsers([]);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setActiveEvent(null);
+    setSelectedUsers([]);
+  };
 
   return (
     <div
@@ -105,21 +121,96 @@
               <th>Event name</th>
               <th>No-show rate</th>
               <th>Drop-off rate</th>
-              <th>Attendees</th>
+              <th>Get list</th>
             </tr>
           </thead>
           <tbody>
             {filteredEvents.map(event => (
               <tr key={event.id}>
                 <td>{event.eventName}</td>
-                <td className={`${styles.trackingRateGreen}`}>{event.noShowRate}</td>
-                <td className={`${styles.trackingRateRed}`}>{event.dropOffRate}</td>
-                <td>{event.attendees}</td>
+                <td className={styles.trackingRateGreen}>{event.noShowRate}</td>
+                <td className={styles.trackingRateRed}>{event.dropOffRate}</td>
+                <td>
+                  <button
+                    type="button"
+                    className={styles.getListBtn}
+                    aria-label="Get no-show list"
+                    onClick={() => handleOpenList(event)}
+                  >
+                    👥
+                  </button>
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
+
+      {isModalOpen && activeEvent && (
+        <div className={styles.modalOverlay}>
+          <div className={`${styles.modalContent} ${darkMode ? styles.modalContentDark : ''}`}>
+            <div className={styles.modalHeader}>
+              <h4>No-show list</h4>
+              <button type="button" className={styles.closeBtn} onClick={handleCloseModal}>
+                ✕
+              </button>
+            </div>
+
+            <div className={styles.modalSubHeader}>
+              {activeEvent.eventName} | {activeEvent.eventTime}
+            </div>
+
+            <div className={styles.modalList}>
+              <label className={styles.selectAll}>
+                <input
+                  type="checkbox"
+                  checked={
+                    selectedUsers.length > 0 &&
+                    selectedUsers.length === mockEvents.slice(0, 8).length
+                  }
+                  onChange={e =>
+                    setSelectedUsers(e.target.checked ? mockEvents.slice(0, 8).map(u => u.id) : [])
+                  }
+                />
+                Select all
+              </label>
+
+              {mockEvents.slice(0, 8).map(user => (
+                <label key={user.id} className={styles.userRow}>
+                  <input
+                    type="checkbox"
+                    checked={selectedUsers.includes(user.id)}
+                    onChange={() =>
+                      setSelectedUsers(prev =>
+                        prev.includes(user.id)
+                          ? prev.filter(id => id !== user.id)
+                          : [...prev, user.id],
+                      )
+                    }
+                  />
+                  <span className={styles.userAvatar}>👤</span>
+                  <span className={styles.userName}>No-show person {user.id}</span>
+                  <span className={styles.userEmail}>user{user.id}@example.com</span>
+                </label>
+              ))}
+            </div>
+
+            <div className={styles.modalFooter}>
+              <button
+                type="button"
+                className={styles.sendEmailBtn}
+                disabled={selectedUsers.length === 0}
+                onClick={() => {
+                  console.log('Send email to:', selectedUsers);
+                  handleCloseModal();
+                }}
+              >
+                Send Email
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -511,3 +511,26 @@
     color: #9b59b6 !important;
   }
 }
+
+.myCasesPageDark .viewSwitcher button,
+.myCasesPageDark .createNew {
+  background-color: #3A506B;
+  color: #ffffff;
+  border: 1px solid #3A506B;
+}
+
+.myCasesPageDark .viewSwitcher button.active {
+  background-color: #007bff;
+  color: #ffffff;
+}
+
+.myCasesPageDark .filterDropdown {
+  background-color: #3A506B;
+  color: #ffffff;
+  border: 1px solid #3A506B;
+}
+
+.myCasesPageDark .filterDropdown option {
+  background-color: #3A506B;
+  color: #ffffff;
+}