+ {/* PRINT-ONLY HEADER */}
+
Social And Recreational Management
Event Participation
+ {/* PAGE HEADER */}
@@ -60,6 +64,7 @@ function EventParticipation() {
>
Social And Recreational Management
+
+ {/* SUB-PAGE NAVIGATION BUTTONS */}
+
+
+
+
+
+ {/* MY CASES (Top section) */}
+ {/* ANALYTICS SECTION */}
+
+ {/* ACTIONABLE INSIGHTS SECTION */}
+
+
Actionable insights
+
+
+
+
High no-show rate detected
+
+ Yoga Class events show an unusual increase in no-show percentage this month.
+
+
↑ 12%
+
+
+
+
Weekend events perform better
+
+ Attendance is consistently higher on Saturdays compared to weekdays.
+
+
↑ 8%
+
- {/* Print-only footer note */}
-
- Generated from Event Participation
+
+
Drop-off rate reduction opportunity
+
+ Average event drop-off decreases when host reminders are sent earlier.
+
+
↓ 5%
+
+
+ {/* PRINT-ONLY FOOTER */}
+
Generated from Event Participation
);
}
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
index a7d4a338b4..107aefaede 100644
--- a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
@@ -1,5 +1,7 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import Calendar from 'react-calendar';
import styles from './MyCases.module.css';
import mockEvents from './mockData';
@@ -7,15 +9,20 @@ function MyCases() {
const [view, setView] = useState('card');
const [filter, setFilter] = useState('all');
const [expanded, setExpanded] = useState(false);
+ const [calendarDate, setCalendarDate] = useState(new Date());
+ const history = useHistory();
+
+ const darkMode = useSelector(state => state.theme.darkMode);
const isExporting =
- typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true'; // Sonar: prefer .dataset
+ typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true';
const filterEvents = events => {
const now = new Date();
+
if (filter === 'today') {
return events.filter(event => {
- const eventDate = new Date(event.eventTime);
+ const eventDate = new Date(event.eventDate || event.eventTime);
return (
eventDate.getDate() === now.getDate() &&
eventDate.getMonth() === now.getMonth() &&
@@ -23,30 +30,51 @@ function MyCases() {
);
});
}
+
if (filter === 'thisWeek') {
- const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
+ const startOfWeek = new Date(now);
+ startOfWeek.setDate(now.getDate() - now.getDay());
+ startOfWeek.setHours(0, 0, 0, 0);
+
const endOfWeek = new Date(startOfWeek);
- endOfWeek.setDate(endOfWeek.getDate() + 6);
+ endOfWeek.setDate(startOfWeek.getDate() + 6);
+ endOfWeek.setHours(23, 59, 59, 999);
+
return events.filter(event => {
- const eventDate = new Date(event.eventTime);
+ const eventDate = new Date(event.eventDate || event.eventTime);
return eventDate >= startOfWeek && eventDate <= endOfWeek;
});
}
+
if (filter === 'thisMonth') {
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+ endOfMonth.setHours(23, 59, 59, 999);
+
return events.filter(event => {
- const eventDate = new Date(event.eventTime);
+ const eventDate = new Date(event.eventDate || event.eventTime);
return eventDate >= startOfMonth && eventDate <= endOfMonth;
});
}
+
return events;
};
- const darkMode = useSelector(state => state.theme.darkMode);
const filteredEvents = filterEvents(mockEvents);
- // Sonar: extract nested ternary into independent statement
+ // Group events by YYYY-MM-DD for calendar view
+ const eventsByDate = useMemo(() => {
+ const map = {};
+ filteredEvents.forEach(event => {
+ const baseDate = new Date(event.eventDate || event.eventTime);
+ const key = baseDate.toISOString().slice(0, 10);
+ if (!map[key]) map[key] = [];
+ map[key].push(event);
+ });
+ return map;
+ }, [filteredEvents]);
+
+ // Visible subset for card/list in non-export mode
let visibleEvents = filteredEvents;
if (!isExporting) {
visibleEvents = expanded ? filteredEvents.slice(0, 40) : filteredEvents.slice(0, 10);
@@ -87,7 +115,9 @@ function MyCases() {