Frontend Release to Main [4.70]

public/index.css

@@ -242,10 +242,6 @@ body.bm-dashboard-dark .nav-link {
   color: #ffffff !important;
 }
 
-body.dark-mode .navbar,
-body.bm-dashboard-dark .navbar {
-  background-color: #1b2a41 !important;
-}
 
 body.dark-mode .navbar-brand,
 body.bm-dashboard-dark .navbar-brand {

src/actions/__tests__/userManagement.test.js

@@ -14,7 +14,7 @@ const mockStore = configureMockStore(middlewares);
 
 describe('User Management Actions', () => {
   let store;
-  
+
   beforeEach(() => {
     store = mockStore({});
     vi.clearAllMocks();
@@ -46,7 +46,7 @@ describe('User Management Actions', () => {
 
     it('should update user to active status', async () => {
       const reactivationDate = null;
-      
+
       axios.patch.mockResolvedValueOnce({ data: {} });
 
       await store.dispatch(actions.updateUserStatus(mockUser, UserStatus.Active, reactivationDate));
@@ -143,7 +143,7 @@ describe('User Management Actions', () => {
       );
     });
 
-    
+
   });
 
   describe('updateUserFinalDayStatus', () => {
@@ -205,6 +205,7 @@ describe('User Management Actions', () => {
         { id: 1, name: 'John Doe', email: 'john@example.com' },
         { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
       ];
+      const mockSource = 'Report';
 
       axios.get.mockResolvedValueOnce({ data: mockBasicInfo });
 
@@ -213,20 +214,20 @@ describe('User Management Actions', () => {
         { type: 'RECEIVE_USER_PROFILE_BASIC_INFO', payload: mockBasicInfo }
       ];
 
-      await store.dispatch(actions.getUserProfileBasicInfo());
+      await store.dispatch(actions.getUserProfileBasicInfo({source: mockSource}));
       expect(store.getActions()).toEqual(expectedActions);
-      expect(axios.get).toHaveBeenCalledWith(ENDPOINTS.USER_PROFILE_BASIC_INFO);
+      expect(axios.get).toHaveBeenCalledWith(ENDPOINTS.USER_PROFILE_BASIC_INFO(mockSource));
     });
 
     it('should handle errors when fetching basic info', async () => {
       axios.get.mockRejectedValueOnce(new Error('Network error'));
-
+      const mockSource = '';
       const expectedActions = [
         { type: 'FETCH_USER_PROFILE_BASIC_INFO' },
         { type: 'FETCH_USER_PROFILE_BASIC_INFO_ERROR' }
       ];
 
-      await store.dispatch(actions.getUserProfileBasicInfo());
+      await store.dispatch(actions.getUserProfileBasicInfo({ source: mockSource }));
       expect(store.getActions()).toEqual(expectedActions);
     });
   });
@@ -276,4 +277,4 @@ describe('User Management Actions', () => {
       expect(store.getActions()).toContainEqual(expectedAction);
     });
   });
-});
+});

src/actions/userManagement.js

@@ -309,15 +309,18 @@ export const updateUserFinalDay = (user, finalDayDate, isSet) => {
 
 /**
  * fetching all user profiles basic info
+ *  Added `source` parameter to identify the calling component.
  */
-export const getUserProfileBasicInfo = (userId) => {
+export const getUserProfileBasicInfo = ({ userId, source }) => {
   // API request to fetch basic user profile information
- let userProfileBasicInfoPromise;
- if (userId)
+  let userProfileBasicInfoPromise;
+  if (userId)
     userProfileBasicInfoPromise = axios.get(`${ENDPOINTS.USER_PROFILE_BASIC_INFO}?userId=${userId}`);
- else
+  else if (source)
+    userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILE_BASIC_INFO(source));
+  else
     userProfileBasicInfoPromise = axios.get(ENDPOINTS.USER_PROFILE_BASIC_INFO);
-  
+
   return async dispatch => {
     // Dispatch action indicating the start of the fetch process
     await dispatch(userProfilesBasicInfoFetchStartAction());

src/components/BMDashboard/ItemList/SelectItem.jsx

@@ -76,9 +76,9 @@ export default function SelectItem({
               <option value="all" key="all-option">
                 All
               </option>
-              {itemSet.map(itemName => (
-                <option key={`item-${itemName}`} value={itemName}>
-                  {itemName}
+              {itemSet.map(item => (
+                <option key={`item-${item}`} value={item}>
+                  {item}
                 </option>
               ))}
             </>

src/components/CommunityPortal/Activities/ActivityAttendance.jsx

@@ -3,7 +3,7 @@ import { Doughnut } from 'react-chartjs-2';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { v4 as uuidv4 } from 'uuid';
 import { FaRegClock, FaIdCard } from 'react-icons/fa';
-import './ActivityAttendance.css';
+import styles from './ActivityAttendance.module.css';
 import { useState } from 'react';
 import profileImg from '../../../assets/images/profile.png';
 
@@ -35,9 +35,9 @@ function StatsChart({ stats }) {
   };
 
   return (
-    <div className="chart-container">
+    <div className={styles.chartContainer}>
       <Doughnut data={data} options={options} />
-      <div className="chart-label">{percentage}%</div>
+      <div className={styles.chartLabel}>{percentage}%</div>
     </div>
   );
 }
@@ -59,9 +59,9 @@ const exportToCSV = students => {
 
 function StatsCard({ title, value, color }) {
   return (
-    <div className="stats-card">
+    <div className={styles.statsCard}>
       <h3>{title}</h3>
-      <p className="stats-value" style={{ color }}>
+      <p className={styles.statsValue} style={{ color }}>
         {value}
       </p>
     </div>
@@ -70,39 +70,71 @@ function StatsCard({ title, value, color }) {
 
 function StudentRow({ img, name, time, id }) {
   return (
-    <div className="student-row">
-      <div className="student-left">
-        <img src={img} alt={name} className="student-img" />
-        <div className="student-name">{name}</div>
+    <div className={styles.studentRow}>
+      <div className={styles.studentLeft}>
+        <img src={img} alt={name} className={styles.studentImg} />
+        <div className={styles.studentName}>{name}</div>
       </div>
-      <div className="student-center">
-        <div className="student-time">
-          <FaRegClock className="student-icon" /> {time}
+      <div className={styles.studentCenter}>
+        <div className={styles.studentTime}>
+          <FaRegClock className={styles.studentIcon} /> {time}
         </div>
       </div>
-      <div className="student-right">
-        <div className="student-id">
-          <FaIdCard className="student-icon" /> {id}
+      <div className={styles.studentRight}>
+        <div className={styles.studentId}>
+          <FaIdCard className={styles.studentIcon} /> {id}
         </div>
       </div>
     </div>
   );
 }
 
-function LiveUpdates({ students, searchTerm }) {
-  const filteredStudents = students.filter(student =>
-    student.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+function LiveUpdates({ students, searchTerm, selectedStatus, onStatusChange }) {
+  const normalizedSearch = searchTerm.trim().toLowerCase();
+
+  const filteredStudents = students.filter(student => {
+    const matchesStatus = selectedStatus === 'All' || student.status === selectedStatus;
+
+    const matchesSearch =
+      !normalizedSearch ||
+      student.name.toLowerCase().includes(normalizedSearch) ||
+      student.id.toLowerCase().includes(normalizedSearch);
+
+    return matchesStatus && matchesSearch;
+  });
+
+  const statuses = ['All', 'In', 'Out', 'Leave'];
 
   return (
-    <div className="live-updates">
-      <div className="updates-header">
-        <h3>Live Student Update</h3>
-        <button className="export-btn" type="button" onClick={() => exportToCSV(filteredStudents)}>
+    <div className={styles.liveUpdates}>
+      <div className={styles.updatesHeader}>
+        <div className={styles.updatesHeaderLeft}>
+          <h3>Live Student Update</h3>
+          <div className={styles.statusFilters}>
+            {statuses.map(status => (
+              <button
+                key={status}
+                type="button"
+                className={`${styles.statusFilterBtn} ${
+                  selectedStatus === status ? styles.statusFilterBtnActive : ''
+                }`}
+                onClick={() => onStatusChange(status)}
+              >
+                {status}
+              </button>
+            ))}
+          </div>
+        </div>
+        <button
+          className={styles.exportBtn}
+          type="button"
+          onClick={() => exportToCSV(filteredStudents)}
+        >
           Export Data
         </button>
       </div>
-      <div className="updates-list">
+
+      <div className={styles.updatesList}>
         {filteredStudents.length > 0 ? (
           filteredStudents.map(student => (
             <StudentRow
@@ -114,7 +146,7 @@ function LiveUpdates({ students, searchTerm }) {
             />
           ))
         ) : (
-          <p className="no-results">No students found.</p>
+          <p className={styles.noResults}>No students found.</p>
         )}
       </div>
     </div>
@@ -124,6 +156,7 @@ function LiveUpdates({ students, searchTerm }) {
 function ActivityAttendance() {
   const darkMode = useSelector(state => state.theme.darkMode);
   const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('All');
 
   const statsData = [
     { id: uuidv4(), title: 'Total Community Members', value: 400, color: '#4CAF50' },
@@ -133,44 +166,53 @@ function ActivityAttendance() {
   ];
 
   const students = [
-    { img: profileImg, name: 'Ramakant Sharma', time: '12:30', id: '3CO-JVY' },
-    { img: profileImg, name: 'John Doe', time: '12:45', id: '3CO-JXK' },
-    { img: profileImg, name: 'Jane Smith', time: '01:00', id: '3CO-JYW' },
-    { img: profileImg, name: 'Alice Johnson', time: '01:15', id: '3CO-JZP' },
+    { img: profileImg, name: 'Ramakant Sharma', time: '12:30', id: '3CO-JVY', status: 'In' },
+    { img: profileImg, name: 'John Doe', time: '12:45', id: '3CO-JXK', status: 'Out' },
+    { img: profileImg, name: 'Jane Smith', time: '01:00', id: '3CO-JYW', status: 'Leave' },
+    { img: profileImg, name: 'Alice Johnson', time: '01:15', id: '3CO-JZP', status: 'In' },
   ];
 
   return (
-    <div className={`activity-attendance-page ${darkMode ? 'activity-attendance-dark-mode' : ''}`}>
-      <div className="dashboard-container">
+    <div
+      className={`${styles.activityAttendancePage} ${
+        darkMode ? styles.activityAttendanceDarkMode : ''
+      }`}
+    >
+      <div className={styles.dashboardContainer}>
         {/* Title and Search Bar */}
-        <div className="dashboard-title">
-          <div className="title-text">
+        <div className={styles.dashboardTitle}>
+          <div className={styles.titleText}>
             <h2>Welcome Admin</h2>
             <p>Senior Admin - One Community</p>
           </div>
-          <div className="search-container">
+          <div className={styles.searchContainer}>
             <input
               type="text"
               placeholder="Search Students..."
-              className="search-bar"
+              className={styles.attendanceSearchBar}
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
             />
           </div>
         </div>
 
-        <div className="dashboard-main">
-          <div className="stats-chart-container">
+        <div className={styles.dashboardMain}>
+          <div className={styles.statsChartContainer}>
             <StatsChart stats={statsData} />
-            <div className="stats-grid">
+            <div className={styles.statsGrid}>
               {statsData.map(stat => (
                 <StatsCard key={stat.id} title={stat.title} value={stat.value} color={stat.color} />
               ))}
             </div>
           </div>
 
           {/* Live Student Updates */}
-          <LiveUpdates students={students} searchTerm={searchTerm} />
+          <LiveUpdates
+            students={students}
+            searchTerm={searchTerm}
+            selectedStatus={statusFilter}
+            onStatusChange={setStatusFilter}
+          />
         </div>
       </div>
     </div>