diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx index f494738201..da9a0f6f49 100644 --- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx +++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx @@ -1,5 +1,8 @@ import { useState, useRef } from 'react'; import { useSelector } from 'react-redux'; +import { Tooltip } from 'reactstrap'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { ArrowUpDown, ArrowUp, ArrowDown, SquareArrowOutUpRight } from 'lucide-react'; import html2canvas from 'html2canvas'; import { jsPDF } from 'jspdf'; @@ -12,6 +15,7 @@ function NoShowInsights() { const [scopeFilter, setScopeFilter] = useState('My Event'); const [activeTab, setActiveTab] = useState('Event type'); const [sortOrder, setSortOrder] = useState('none'); + const [tooltipOpen, setTooltipOpen] = useState(false); const darkMode = useSelector(state => state.theme.darkMode); const insightsRef = useRef(null); const [isExportOpen, setIsExportOpen] = useState(false); @@ -27,6 +31,17 @@ function NoShowInsights() { }; const SortIcon = sortOrder === 'none' ? ArrowUpDown : sortOrder === 'asc' ? ArrowUp : ArrowDown; + const toggleTooltip = () => setTooltipOpen(!tooltipOpen); + + const getTooltipContent = () => { + let categoryDescription; + if (activeTab === 'Event type') categoryDescription = 'event types'; + else if (activeTab === 'Time') categoryDescription = 'time periods'; + else categoryDescription = 'locations'; + + return `Percentages represent the average no-show rate for each ${categoryDescription} (${activeTab}), aggregated from all matching events within the selected time range. Higher percentages indicate a higher likelihood of participants not attending.`; + }; + const calculateStats = filteredEvents => { const statsMap = new Map(); @@ -259,7 +274,23 @@ function NoShowInsights() { className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`} >
-

No-show rate insights

+
+

No-show rate insights

+ + + + + {getTooltipContent()} + +
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css index a94c206116..2675d0871f 100644 --- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css +++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css @@ -464,6 +464,31 @@ margin: 0; } +.insightsTitleWrapper { + display: flex; + align-items: center; + gap: 8px; +} + +.infoIcon { + cursor: pointer; + color: #6c757d; + font-size: 1rem; + transition: color 0.2s ease; +} + +.infoIcon:hover { + color: #007bff; +} + +.insightsHeaderDark .infoIcon { + color: #adb5bd; +} + +.insightsHeaderDark .infoIcon:hover { + color: #66b3ff; +} + .insightsFilters select { margin-left: 10px; padding: 8px;