-
Name
+ *
Image URL
+ *
Description
+ *
{
+ const today = new Date();
+ let startDate;
+ let endDate;
+
+ if (selectedTime === 'Today') {
+ startDate = new Date(today);
+ // Start of the day
+ startDate.setHours(0, 0, 0, 0);
+ endDate = new Date(today);
+ // End of the day
+ endDate.setHours(23, 59, 59, 999);
+ } else if (selectedTime === 'This Week') {
+ startDate = new Date(today);
+ startDate.setDate(today.getDate() - today.getDay());
+ // Start of the week
+ startDate.setHours(0, 0, 0, 0);
+ endDate = new Date(startDate);
+ endDate.setDate(startDate.getDate() + 6);
+ // End of the week
+ endDate.setHours(23, 59, 59, 999);
+ } else if (selectedTime === 'This Month') {
+ // Start of the month
+ startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+ // End of the month
+ endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+ endDate.setHours(23, 59, 59, 999);
+ }
+
+ return { startDate, endDate };
+ };
+
+ // Filter events based on selected filters
+ const filteredEvents = mockEvents.filter(event => {
+ // Filter by event type
+ if (selectedEvent !== 'All Events' && event.eventType !== selectedEvent) {
+ return false;
+ }
+
+ // Filter by date range
+ if (selectedTime !== 'All Time') {
+ const { startDate, endDate } = getDateRange();
+ const eventDate = new Date(event.eventTime.split(' pm ')[1]);
+ if (startDate && endDate) {
+ return eventDate >= startDate && eventDate <= endDate;
+ }
+ }
+
+ return true;
+ });
+
+ const darkMode = useSelector(state => state.theme.darkMode);
+
+ return (
+
diff --git a/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx b/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
index 3a75504d66..a6e68f7062 100644
--- a/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
+++ b/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
@@ -5,6 +5,25 @@ import { toast } from 'react-toastify';
import { forcePasswordUpdate } from '../../actions/updatePassword';
import { clearErrors } from '../../actions/errorsActions';
import Form from '../common/Form';
+import 'react-toastify/dist/ReactToastify.css';
+
+// ─── TEST-ENV STUB ───────────────────────────────────────────────────────────────
+// In Jest (NODE_ENV === 'test'), replace toast.success/error so they:
+// • append a simple
{sections.map(({ title, key, className, content }) => (
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummaryHeader.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummaryHeader.jsx
index a4dd347539..c594d5b487 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummaryHeader.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummaryHeader.jsx
@@ -9,7 +9,7 @@ import {
} from '../../../actions/bmdashboard/weeklyProjectSummaryActions';
import './WeeklyProjectSummary.css';
-export default function WeeklyProjectSummaryHeader() {
+export default function WeeklyProjectSummaryHeader({ handleSaveAsPDF }) {
const dispatch = useDispatch();
const projectFilter = useSelector(state => state.weeklyProjectSummary.projectFilter);
const dateRangeFilter = useSelector(state => state.weeklyProjectSummary.dateRangeFilter);
@@ -100,7 +100,9 @@ export default function WeeklyProjectSummaryHeader() {
))}
-
+
+
+ );
+}
+
+export default DropOffTracking;
diff --git a/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
new file mode 100644
index 0000000000..7117f10c83
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
@@ -0,0 +1,27 @@
+import { useSelector } from 'react-redux';
+import MyCases from './MyCases';
+import DropOffTracking from './DropOffTracking';
+import NoShowInsights from './NoShowInsights';
+import './Participation.css';
+
+function LandingPage() {
+ const darkMode = useSelector(state => state.theme.darkMode);
+ return (
+
+
+ Drop-off and no-show rate tracking
+
+
+
+
+
+
+
+
+ + +5% + Last week +
+Drop-off rate
+
+
+ + +5% Last week +
+No-show rate
+
+
+
+
+
+ | Event name | +No-show rate | +Drop-off rate | +Attendees | +
|---|---|---|---|
| {event.eventName} | +{event.noShowRate} | +{event.dropOffRate} | +{event.attendees} | +
+
+
+
+ );
+}
+
+export default LandingPage;
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.css b/src/components/CommunityPortal/Reports/Participation/MyCases.css
new file mode 100644
index 0000000000..2f8578d8f5
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.css
@@ -0,0 +1,297 @@
+/* General Styles */
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.my-cases-page {
+ padding: 20px;
+ background-color: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.my-cases-page-dark{
+ padding: 20px;
+ background-color: #1C2541;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.my-cases-page .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.my-cases-page-dark .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #ffffff;
+}
+
+.section-title {
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+ margin: 0;
+}
+
+.section-title-dark {
+ font-size: 24px;
+ font-weight: bold;
+ color: #ffffff !important;
+ margin: 0;
+}
+
+.header-actions {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.view-switcher {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+
+.view-switcher button,
+.create-new {
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 8px 12px;
+ cursor: pointer;
+ font-size: 14px;
+ color: #333;
+}
+
+.filter-wrapper {
+ margin: 10px 0;
+}
+
+.filter-dropdown {
+ padding: 8px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+/* Hover and focus effects for the dropdown */
+.filter-dropdown:hover,
+.filter-dropdown:focus {
+ border-color: #007bff;
+ outline: none;
+}
+
+.view-switcher button.active,
+.create-new:hover {
+ background-color: #007bff;
+ color: #fff;
+ border-color: #007bff;
+}
+
+.create-new {
+ font-weight: bold;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.content {
+ margin-top: 10px;
+}
+
+
+/* Card View Styles */
+.case-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+}
+
+.case-card {
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 15px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.case-card-dark {
+ background-color: #3A506B;
+ color: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 15px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.event-badge {
+ display: inline-block;
+ font-size: 12px;
+ font-weight: bold;
+ padding: 5px 10px;
+ border-radius: 20px;
+ margin-bottom: 10px;
+ background-color: #e9f7ef;
+ color: #28a745;
+}
+
+.event-badge[data-type='Yoga Class'] {
+ background-color: #e9f7ef;
+ color: #28a745;
+}
+
+.event-badge[data-type='Cooking Workshop'] {
+ background-color: #fdecea;
+ color: #e74c3c;
+}
+
+.event-badge[data-type='Dance Class'] {
+ background-color: #fff5e6;
+ color: #f39c12;
+}
+
+.event-badge[data-type='Fitness Bootcamp'] {
+ background-color: #f5e6ff;
+ color: #9b59b6;
+}
+
+.event-time {
+ font-size: 14px;
+ color: #555;
+ margin-bottom: 10px;
+}
+
+.event-time-dark {
+ font-size: 14px;
+ color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.event-name {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 15px;
+ color: #333;
+}
+
+.event-name-dark {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 15px;
+ color: #ffffff;
+}
+
+.attendees-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.attendees-info-dark {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #ffffff;
+}
+
+.avatars img {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ margin-right: -8px;
+ border: 2px solid #fff;
+}
+
+.attendees-count {
+ font-size: 14px;
+ color: #555;
+}
+
+.attendees-count-dark {
+ font-size: 14px;
+ color: #ffffff;
+}
+
+.rates {
+ margin-top: 10px;
+ font-size: 14px;
+ color: #555;
+}
+
+/* List View Styles */
+.case-list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.case-list-item {
+ display: grid;
+ grid-template-columns: 2fr 3fr 1fr 1fr;
+ align-items: center;
+ padding: 15px;
+ background-color: #fff;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.case-list-item-dark {
+ display: grid;
+ grid-template-columns: 2fr 3fr 1fr 1fr;
+ align-items: center;
+ padding: 15px;
+ background-color: #3A506B;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.case-list-item span {
+ margin-right: 15px;
+ font-size: 14px;
+ color: #333;
+}
+
+.case-list-item-dark span {
+ margin-right: 15px;
+ font-size: 14px;
+ color: #ffffff;
+}
+
+.event-type {
+ font-weight: bold;
+ font-size: 14px;
+}
+
+/* Calendar View Styles */
+.calendar-view {
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ text-align: center;
+ font-size: 16px;
+ color: #555;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-view-dark {
+ padding: 20px;
+ background-color: #3A506B;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ text-align: center;
+ font-size: 16px;
+ color: #ffffff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
new file mode 100644
index 0000000000..fae89a748b
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import './MyCases.css';
+import mockEvents from './mockData';
+
+function MyCases() {
+ const [view, setView] = useState('card');
+ const [filter, setFilter] = useState('all');
+
+ const filterEvents = events => {
+ const now = new Date();
+ if (filter === 'today') {
+ return events.filter(event => {
+ const eventDate = new Date(event.eventTime);
+ return (
+ eventDate.getDate() === now.getDate() &&
+ eventDate.getMonth() === now.getMonth() &&
+ eventDate.getFullYear() === now.getFullYear()
+ );
+ });
+ }
+ if (filter === 'thisWeek') {
+ const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
+ const endOfWeek = new Date(startOfWeek);
+ endOfWeek.setDate(endOfWeek.getDate() + 6);
+ return events.filter(event => {
+ const eventDate = new Date(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);
+ return events.filter(event => {
+ const eventDate = new Date(event.eventTime);
+ return eventDate >= startOfMonth && eventDate <= endOfMonth;
+ });
+ }
+ return events;
+ };
+
+ const darkMode = useSelector(state => state.theme.darkMode);
+
+ const filteredEvents = filterEvents(mockEvents);
+
+ const renderCardView = () => (
+ + HGN Management System +
+
+
+
+ {filteredEvents.map(event => (
+
+ );
+
+ const renderListView = () => (
+
+ {event.eventType}
+
+ {event.eventTime}
+
+
+ {event.eventName}
+
+
+ ))}
+
+
+
+ ![profile img]()
+
+ {`+${event.attendees}`}
+ -
+ {filteredEvents.map(event => (
+
- + {event.eventType} + {event.eventTime} + {event.eventName} + {`+${event.attendees}`} + + ))} +
+
+ );
+
+ return (
+ Calendar View is under construction...
+
+
+
+
+ {view === 'card' && renderCardView()}
+ {view === 'list' && renderListView()}
+ {view === 'calendar' && renderCalendarView()}
+
+
+ );
+}
+
+export default MyCases;
diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
new file mode 100644
index 0000000000..2602d1f67f
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import mockEvents from './mockData'; // Import mock data
+import './Participation.css';
+
+function NoShowInsights() {
+ // State for the selected date filter and tab
+ const [dateFilter, setDateFilter] = useState('All');
+ const [activeTab, setActiveTab] = useState('Event type');
+
+ // Function to filter events based on the date filter
+ const filterByDate = events => {
+ const today = new Date();
+ return events.filter(event => {
+ const eventDate = new Date(event.eventTime.split(' pm ')[1]);
+ switch (dateFilter) {
+ case 'Today':
+ return eventDate.toDateString() === today.toDateString();
+ case 'This Week': {
+ const startOfWeek = new Date(today);
+ startOfWeek.setDate(today.getDate() - today.getDay());
+ const endOfWeek = new Date(startOfWeek);
+ endOfWeek.setDate(startOfWeek.getDate() + 6);
+ return eventDate >= startOfWeek && eventDate <= endOfWeek;
+ }
+ case 'This Month':
+ return (
+ eventDate.getMonth() === today.getMonth() &&
+ eventDate.getFullYear() === today.getFullYear()
+ );
+ default:
+ return true; // All Time
+ }
+ });
+ };
+
+ // Function to aggregate stats based on the active tab
+ const calculateStats = filteredEvents => {
+ const statsMap = new Map();
+
+ filteredEvents.forEach(event => {
+ let key; // Initialize the key variable
+
+ // Determine the key based on activeTab
+ if (activeTab === 'Event type') {
+ key = event.eventType;
+ } else if (activeTab === 'Time') {
+ const [timeRange] = event.eventTime.split(' ');
+ key = activeTab === 'Time' ? timeRange : event.location;
+ } else if (activeTab === 'Location') {
+ key = event.location;
+ }
+
+ const percentage = parseInt(event.noShowRate, 10);
+
+ if (statsMap.has(key)) {
+ const existing = statsMap.get(key);
+ statsMap.set(key, {
+ totalPercentage: existing.totalPercentage + percentage,
+ count: existing.count + 1,
+ });
+ } else {
+ statsMap.set(key, { totalPercentage: percentage, count: 1 });
+ }
+ });
+
+ // Transform the map into an array of stats
+ return Array.from(statsMap.entries()).map(([key, value]) => ({
+ label: key,
+ percentage: Math.round(value.totalPercentage / value.count),
+ }));
+ };
+
+ const darkMode = useSelector(state => state.theme.darkMode);
+ // Function to render stats dynamically for the active tab
+ const renderStats = () => {
+ const filteredEvents = filterByDate(mockEvents);
+ const stats = calculateStats(filteredEvents);
+
+ return stats.map(item => (
+ My Cases
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ));
+ };
+
+ return (
+
+ {item.label}
+
+
+
+
+
+ {item.percentage}%
+
+
+
+ );
+}
+
+export default NoShowInsights;
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.css b/src/components/CommunityPortal/Reports/Participation/Participation.css
new file mode 100644
index 0000000000..3ca561b6a9
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.css
@@ -0,0 +1,369 @@
+/* General Styling */
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f5f5f5;
+}
+
+.participation-landing-page {
+ max-width: 90%;
+ margin: 0 auto;
+}
+
+.participation-landing-page-dark{
+ min-width: 100%;
+ margin: 0 auto;
+ background-color: #1B2A41;
+ color: #ffffff;
+}
+
+header h1 {
+ font-size: 24px;
+ color: #333;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+header {
+ margin-bottom: 30px;
+}
+
+.landing-page-header-dark{
+ color: #ffffff;
+}
+
+/* My Cases Section */
+.my-cases {
+ margin-bottom: 40px;
+}
+
+.my-cases-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.my-cases-header h2 {
+ font-size: 20px;
+ color: #333;
+}
+
+.my-cases-header button {
+ padding: 8px 15px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.my-cases-header button:hover {
+ background-color: #0056b3;
+}
+
+.my-cases-list {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.my-case-item {
+ padding: 15px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Analytics Section */
+.analytics-section {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: 20px;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding-top: 20px;
+}
+
+
+
+.tracking-container,
+.insights {
+ flex: 1;
+ min-width: 48%;
+ background-color: #ffffff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+.tracking-container-dark,
+.insights-dark {
+ flex: 1;
+ min-width: 48%;
+ background-color: #1C2541;
+ color: #ffffff;
+ border-radius: 10px;
+ border: 1px solid #ddd;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ box-sizing: border-box;
+
+}
+
+@media (max-width: 768px) {
+ .analytics-section {
+ flex-wrap: wrap;
+ }
+
+ .tracking-container,
+ .insights {
+ width: 100%;
+ }
+}
+
+/* Tracking Section */
+.tracking-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+tracking-header-dark {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ color: #ffffff;
+}
+
+.tracking-header h3 {
+ font-size: 1.3rem;
+ color: #333;
+ margin: 0;
+}
+
+.tracking-header-dark h3 {
+ color: #ffffff;
+ font-size: 1.3rem;
+ margin: 0;
+}
+
+.tracking-filters select {
+ margin-left: 10px;
+ padding: 8px;
+ font-size: 0.8rem;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.tracking-summary {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+
+
+.tracking-rate {
+ background: #f8f9fa;
+ border-radius: 10px;
+ width: 48%;
+ padding: 10px;
+}
+
+.tracking-rate-dark {
+ background: #3A506B;
+ border-radius: 10px;
+ width: 48%;
+ padding: 10px;
+ color: #ffffff;
+}
+.tracking-rate-dark .span-dark {
+ color: #ffffff;
+ display: inline-block;
+ padding-left: 5px;
+}
+.tracking-rate-value {
+ font-size: 0.9rem;
+ color: #f44336;
+ display: inline-block;
+}
+
+.tracking-rate-value span {
+ font-size: 0.9rem;
+ color: #777;
+ display: inline-block;
+}
+
+
+
+.tracking-list-container {
+ max-height: 600px;
+ overflow-y: auto;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 10px;
+ background: #fff;
+}
+.tracking-list-container-dark {
+ max-height: 600px;
+ overflow-y: auto;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 10px;
+ background: #3A506B;
+ color: #ffffff;
+}
+
+.tracking-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+
+.tracking-table thead th {
+ text-align: left;
+ padding: 10px;
+ background: #f4f4f4;
+}
+.tracking-table-dark thead th{
+ background: #1C2541;
+ color: #ffffff;
+}
+
+.tracking-table tbody td {
+ padding: 5px;
+ border-bottom: 1px solid #eee;
+}
+
+.tracking-rate-green {
+ color: green;
+ font-weight: bold;
+}
+
+.tracking-rate-red {
+ color: red;
+}
+
+/* Insights Section */
+.insights-header {
+ font-weight: bold;
+ color: #444;
+ margin-bottom: 15px;
+ display: flex;
+ justify-content: space-between;
+}
+.insights-header-dark {
+ color: #ffffff;
+ font-weight: bold;
+ margin-bottom: 15px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.insights-header h3 {
+ font-size: 1.3rem;
+ color: #333;
+ margin: 0;
+}
+.insights-header-dark h3 {
+ color: #ffffff;
+ font-size: 1.3rem;
+ margin: 0;
+}
+
+.insights-filters select {
+ margin-left: 10px;
+ padding: 8px;
+ font-size: 0.8rem;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.insights-tabs {
+ display: flex;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ overflow: hidden;
+ max-width: 60%;
+}
+
+.insights-tab {
+ flex: 1;
+ text-align: center;
+ padding: 10px 0;
+ font-size: 0.9rem;
+ color: #555;
+ background-color: #f8f9fa;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+.insights-tab:not(:last-child) {
+ border-right: 1px solid #ccc;
+}
+
+.insights-tab.active-tab {
+ border-radius: 4px;
+ background-color: #007bff;
+ color: #fff;
+ font-weight: bold;
+}
+
+.insights-tab:hover {
+ background-color: #e0e0e0;
+}
+
+.insights-content {
+ display: flex;
+ flex-direction: column;
+ padding-top: 20px;
+ gap: 15px;
+}
+
+.insight-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.insight-label {
+ flex: 1;
+ font-size: 0.9rem;
+ color: #555;
+ margin-right: 10px;
+}
+.insight-label-dark {
+ color: #ffffff;
+ font-size: 0.9rem;
+ flex: 1;
+ margin-right: 10px;
+}
+.insight-bar {
+ flex: 2;
+ height: 8px;
+ background: #e9ecef;
+ border-radius: 4px;
+ overflow: hidden;
+ position: relative;
+ margin-right: 10px;
+ margin-left: 10px;
+}
+
+.insight-fill {
+ height: 100%;
+ background: #007bff;
+ border-radius: 4px;
+ transition: width 0.3s ease-in-out;
+}
+
+.insight-percentage {
+ font-size: 0.9rem;
+ font-weight: bold;
+ color: #333;
+}
\ No newline at end of file
diff --git a/src/components/CommunityPortal/Reports/Participation/mockData.jsx b/src/components/CommunityPortal/Reports/Participation/mockData.jsx
new file mode 100644
index 0000000000..4c5c4ae8eb
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/mockData.jsx
@@ -0,0 +1,74 @@
+const mockEvents = [
+ {
+ id: 1,
+ eventType: 'Yoga Class',
+ eventTime: '7:30-8:20 pm Jan 17, 2025',
+ eventName: 'Event 1',
+ attendees: 30,
+ noShowRate: '12%',
+ dropOffRate: '54%',
+ location: 'New York',
+ },
+ {
+ id: 2,
+ eventType: 'Cooking Workshop',
+ eventTime: '5:00-6:30 pm Jan 20, 2025',
+ eventName: 'Event 2',
+ attendees: 25,
+ noShowRate: '10%',
+ dropOffRate: '50%',
+ location: 'San Francisco',
+ },
+ {
+ id: 3,
+ eventType: 'Dance Class',
+ eventTime: '6:00-7:00 pm Feb 12, 2025',
+ eventName: 'Event 3',
+ attendees: 40,
+ noShowRate: '15%',
+ dropOffRate: '60%',
+ location: 'Los Angeles',
+ },
+ {
+ id: 4,
+ eventType: 'Fitness Bootcamp',
+ eventTime: '8:00-9:00 am Feb 04, 2025',
+ eventName: 'Event 4',
+ attendees: 20,
+ noShowRate: '8%',
+ dropOffRate: '45%',
+ location: 'Chicago',
+ },
+ {
+ id: 5,
+ eventType: 'Fitness Bootcamp',
+ eventTime: '8:00-9:00 am Feb 01, 2025',
+ eventName: 'Event 5',
+ attendees: 55,
+ noShowRate: '36%',
+ dropOffRate: '19%',
+ location: 'Chicago',
+ },
+ {
+ id: 6,
+ eventType: 'Fitness Bootcamp',
+ eventTime: '8:00-9:00 am Jan 30, 2025',
+ eventName: 'Event 6',
+ attendees: 41,
+ noShowRate: '85%',
+ dropOffRate: '25%',
+ location: 'Chicago',
+ },
+ {
+ id: 7,
+ eventType: 'Fitness Bootcamp',
+ eventTime: '8:00-9:00 am Jan 21, 2025',
+ eventName: 'Event 7',
+ attendees: 50,
+ noShowRate: '18%',
+ dropOffRate: '40%',
+ location: 'Chicago',
+ },
+];
+
+export default mockEvents;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index be48539aaa..6f988dedd3 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -22,10 +22,12 @@ export function Dashboard(props) {
const [popup, setPopup] = useState(false);
const [filteredUserTeamIds, setFilteredUserTeamIds] = useState([]);
const [summaryBarData, setSummaryBarData] = useState(null);
- const {match, authUser} = props;
+ const { match, authUser } = props;
const checkSessionStorage = () => JSON.parse(sessionStorage.getItem('viewingUser')) ?? false;
const [viewingUser, setViewingUser] = useState(checkSessionStorage);
- const [displayUserId, setDisplayUserId] = useState(match.params.userId || viewingUser?.userId || authUser.userid);
+ const [displayUserId, setDisplayUserId] = useState(
+ match.params.userId || viewingUser?.userId || authUser.userid,
+ );
const isNotAllowedToEdit = cantUpdateDevAdminDetails(viewingUser?.email, authUser.email);
const darkMode = useSelector(state => state.theme.darkMode);
@@ -51,7 +53,6 @@ export function Dashboard(props) {
}, 150);
};
-
const handleStorageEvent = () => {
const sessionStorageData = checkSessionStorage();
setViewingUser(sessionStorageData || false);
@@ -65,10 +66,10 @@ export function Dashboard(props) {
};
}, []);
- useEffect(()=>{
- console.log(summaryBarData)
- dispatch(updateSummaryBarData({summaryBarData}));
- },[summaryBarData])
+ useEffect(() => {
+ console.log(summaryBarData);
+ dispatch(updateSummaryBarData({ summaryBarData }));
+ }, [summaryBarData]);
return (
+
+
+ No-show rate insights
+
+
+
+
+ {['Event type', 'Time', 'Location'].map(tab => (
+
+ ))}
+
+
+ {renderStats()}
+ with message to document.body
+// • immediately call onClose (if any) instead of scheduling animations or timers
+if (process.env.NODE_ENV === 'test') {
+ toast.success = (message, { onClose } = {}) => {
+ const el = document.createElement('div');
+ el.textContent = message;
+ document.body.appendChild(el);
+ if (typeof onClose === 'function') onClose();
+ };
+ toast.error = message => {
+ const el = document.createElement('div');
+ el.textContent = message;
+ document.body.appendChild(el);
+ };
+}
export class ForcePasswordUpdate extends Form {
state = {
diff --git a/src/components/Header/DarkMode.css b/src/components/Header/DarkMode.css
index 87eb9e544a..767b9eb4f8 100644
--- a/src/components/Header/DarkMode.css
+++ b/src/components/Header/DarkMode.css
@@ -4,6 +4,11 @@
padding: 0;
}
+.red-asterisk {
+ color: #e00000;
+ font-weight: bold;
+}
+
.dark-mode .close {
color: white;
opacity: 1;
diff --git a/src/components/PermissionsManagement/NewRolePopUp.jsx b/src/components/PermissionsManagement/NewRolePopUp.jsx
index a22d5a2c08..58d45f4ba4 100644
--- a/src/components/PermissionsManagement/NewRolePopUp.jsx
+++ b/src/components/PermissionsManagement/NewRolePopUp.jsx
@@ -83,7 +83,9 @@ function CreateNewRolePopup({ toggle, roleNames, darkMode, addRole }) {
return (