Merge branch 'development' into aayush_event_details_popup_frontend

Author: aayushshetty12

package-lock.json

@@ -64,7 +64,7 @@
     "html-to-pdfmake": "^2.0.6",
     "html2canvas": "^1.4.1",
     "jest": "^30.2.0",
-    "joi": "^18.0.2",
+    "joi": "^18.1.2",
     "joi-browser": "^13.4.0",
     "jquery": "^3.7.1",
     "jspdf": "^4.2.1",
@@ -127,6 +127,7 @@
     "tinymce": "^7.2.0",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
+    "validator": "^13.15.26",
     "webpack": "^5.104.1"
   },
   "resolutions": {

package.json

@@ -5,14 +5,14 @@ import {
   FETCH_INJURIES_FAILURE 
 } from './types';
 import { ENDPOINTS } from '../../utils/URL';
-
 export const FETCH_BM_INJURY_DATA_REQUEST = 'FETCH_BM_INJURY_DATA_REQUEST';
 export const FETCH_BM_INJURY_DATA_SUCCESS = 'FETCH_BM_INJURY_DATA_SUCCESS';
 export const FETCH_BM_INJURY_DATA_FAILURE = 'FETCH_BM_INJURY_DATA_FAILURE';
 export const RESET_BM_INJURY_DATA = 'RESET_BM_INJURY_DATA';
 export const FETCH_BM_INJURY_SEVERITIES = 'FETCH_BM_INJURY_SEVERITIES';
 export const FETCH_BM_INJURY_TYPES = 'FETCH_BM_INJURY_TYPES';
 export const FETCH_BM_INJURY_PROJECTS = 'FETCH_BM_INJURY_PROJECTS';
+export const FETCH_BM_INJURY_OVER_TIME = 'FETCH_BM_INJURY_OVER_TIME';
 
 // Legacy constants for backward compatibility
 export const GET_INJURY_SEVERITY = 'GET_INJURY_SEVERITY';
@@ -47,6 +47,7 @@ const setInjuryDataError = payload => ({ type: FETCH_BM_INJURY_DATA_FAILURE, pay
 const setInjurySeverities = payload => ({ type: FETCH_BM_INJURY_SEVERITIES, payload });
 const setInjuryTypes = payload => ({ type: FETCH_BM_INJURY_TYPES, payload });
 const setInjuryProjects = payload => ({ type: FETCH_BM_INJURY_PROJECTS, payload });
+const setInjuryOverTime = payload => ({ type: FETCH_BM_INJURY_OVER_TIME, payload });
 
 // Legacy action creators for backward compatibility
 export const setInjurySeverity = payload => ({
@@ -179,3 +180,33 @@ export const getInjuryData = async (projectId, startDate, endDate) => {
   // Return the data directly
   return response.data;
 };
+
+export const fetchInjuriesOverTime = (filters = {}) => {
+  return async dispatch => {
+    try {
+      const params = {};
+
+      if (filters.projectIds?.length) {
+        params.projectIds = filters.projectIds.join(',');
+      }
+      if (filters.startDate && filters.endDate) {
+        params.startDate = filters.startDate;
+        params.endDate = filters.endDate;
+      }
+      if (filters.types?.length) {
+        params.types = filters.types.join(',');
+      }
+      if (filters.departments?.length) {
+        params.departments = filters.departments.join(',');
+      }
+      if (filters.severities?.length) {
+        params.severities = filters.severities.join(',');
+      }
+
+      const res = await axios.get(ENDPOINTS.BM_INJURY_OVER_TIME, { params });
+      dispatch(setInjuryOverTime(res.data));
+    } catch (err) {
+      dispatch(setErrors(err.response?.data?.error || err.message));
+    }
+  };
+}

src/actions/bmdashboard/injuryActions.js

@@ -13,8 +13,9 @@ import { ENDPOINTS } from '~/utils/URL';
  */
 export async function getEvents(params = {}) {
   try {
-    const { type = '', location = '', page = 1, limit = 9, sortBy = 'date' } = params;
+    const { type = '', location = '', page = 1, limit = 9, sortBy = 'date', userId = '' } = params;
     const queryParams = new URLSearchParams();
+    if (userId) queryParams.append('userId', userId);
     if (type) queryParams.append('type', type);
     if (location) queryParams.append('location', location);
     queryParams.append('page', page);
@@ -68,3 +69,28 @@ export async function getEventLocations() {
     };
   }
 }
+
+export async function joinWaitlist(eventId, userId, token) {
+  const url = `${ENDPOINTS.EVENTS}/${eventId}/waitlist`;
+
+  return axios.post(
+    url,
+    { userId },
+    {
+      headers: {
+        Authorization: token,
+      },
+    }
+  );
+}
+
+export async function leaveWaitlist(eventId, userId, token) {
+  const url = `${ENDPOINTS.EVENTS}/${eventId}/waitlist`;
+
+  return axios.delete(url, {
+    data: { userId },
+    headers: {
+      Authorization: token,
+    },
+  });
+}

src/actions/eventActions.js

@@ -2,15 +2,14 @@
 
 'use client';
 
-import { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import axios from 'axios';
+import { useState, useMemo } from 'react';
 import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { ENDPOINTS } from '~/utils/URL';
-import { events as mockEvents } from './mockData';
+import { events } from './mockData';
 import styles from './AttendanceNoShowCharts.module.css';
+import { useSelector } from 'react-redux';
 
-const attendanceColors = ['#0088FE', '#FF8042'];
+const attendanceColors = ['#0088FE', '#FF8042', '#FFBB28'];
 const noShowColors = ['#00C49F', '#FF0000'];
 
 // Status color mapping
@@ -133,18 +132,21 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
     <text
       x={x}
       y={y}
-      fill="black"
-      textAnchor={x > cx ? 'start' : 'end'}
+      fill="white"
+      textAnchor="middle"
       dominantBaseline="central"
       fontSize="12"
+      fontWeight="bold"
     >
-      {`${(percent * 100).toFixed(1)}%`}
+      {percent > 0 ? `${(percent * 100).toFixed(0)}%` : ''}
     </text>
   );
 };
 
 const CustomTooltip = ({ active, payload }) => {
+  console.log(active, payload);
   if (active && payload && payload.length) {
+    console.log('Tooltip payload:', payload);
     return (
       <div className={styles.chartTooltip}>
         <p className={styles.chartTooltipItem}>{`${payload[0].name} : ${payload[0].value}`}</p>
@@ -155,76 +157,14 @@ const CustomTooltip = ({ active, payload }) => {
 };
 
 function AttendanceNoShowCharts() {
-  const [events, setEvents] = useState(mockEvents);
-  const [selectedEvent, setSelectedEvent] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState(events[0].id);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const darkMode = useSelector(state => state.theme.darkMode);
-
-  // Fetch events data from backend
-  useEffect(() => {
-    const fetchEvents = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await axios.get(ENDPOINTS.EVENT_ATTENDANCE_STATS);
-
-        // Check if response has data in expected format
-        if (response.data && Array.isArray(response.data)) {
-          // Transform API data to match mock data format if needed
-          const transformedEvents = response.data.map(transformEvent);
-
-          setEvents(transformedEvents);
-          if (transformedEvents.length > 0) {
-            setSelectedEvent(transformedEvents[0]);
-          }
-        } else if (response.data && response.data.events && Array.isArray(response.data.events)) {
-          // Handle nested response structure
-          const transformedEvents = response.data.events.map(transformEvent);
-
-          setEvents(transformedEvents);
-          if (transformedEvents.length > 0) {
-            setSelectedEvent(transformedEvents[0]);
-          }
-        } else {
-          // If data format doesn't match, fall back to mock data
-          throw new Error('Unexpected data format from API');
-        }
-      } catch (err) {
-        // Fall back to mock data if API is unavailable or returns error
-        // eslint-disable-next-line no-console
-        console.warn('Failed to fetch events from API, using mock data:', err.message);
-        // Calculate status for mock events
-        const mockEventsWithStatus = mockEvents.map(event => ({
-          ...event,
-          status: calculateEventStatus(event) || event.status,
-        }));
-        setEvents(mockEventsWithStatus);
-        if (mockEventsWithStatus.length > 0) {
-          setSelectedEvent(mockEventsWithStatus[0]);
-        }
-        setError('Using mock data - API endpoint not available');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchEvents();
-  }, []);
-
-  // Update selectedEvent when events change
-  useEffect(() => {
-    if (events.length > 0 && !selectedEvent) {
-      setSelectedEvent(events[0]);
-    }
-  }, [events, selectedEvent]);
+  const selectedEvent = useMemo(() => events.find(e => e.id === selectedId), [selectedId]);
 
   const handleEventChange = e => {
-    const selectedEventId = e.target.value;
-    const newSelectedEvent = events.find(event => event.id === selectedEventId);
-    if (newSelectedEvent) {
-      setSelectedEvent(newSelectedEvent);
-    }
+    setSelectedId(e.target.value);
   };
 
   const calculatePercentage = (value, total) => {
@@ -478,14 +418,19 @@ function AttendanceNoShowCharts() {
               )}
 
               {/* No-Show Chart */}
-              <div className={styles.chartWrapper}>
-                <h3 className={styles.chartSectionTitle}>
-                  Registration vs Attendance
-                  {currentStatus === 'In Progress' && (
-                    <span className={styles.chartLiveBadge}>(Live)</span>
-                  )}
+              <div style={{ width: '100%' }}>
+                <h3
+                  style={{
+                    fontSize: '18px',
+                    fontWeight: '500',
+                    color: '#111827',
+                    marginBottom: '12px',
+                    textAlign: 'center',
+                  }}
+                >
+                  No-Show Breakdown
                 </h3>
-                <div className={styles.chartContainer}>
+                <div style={{ height: '300px', width: '100%' }}>
                   <ResponsiveContainer width="100%" height="100%">
                     <PieChart>
                       <Pie

src/components/AttendanceSystem/AttendanceNoShowCharts.jsx

@@ -166,7 +166,6 @@
   height: 12px;
   border-radius: 50%;
 }
-
 .statusValue {
   font-size: 18px;
   font-weight: 600;