Skip to content

Neeraj Fix Dark Mode Filter Text Most Popular Event #4490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
one-community merged 5 commits into from
Mar 25, 2026
Merged

Neeraj Fix Dark Mode Filter Text Most Popular Event #4490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6534b4c
fix(event-stats): final dark mode + test compliance
Neeraj-Kondaveeti Dec 4, 2025
1984e79
test(event-stats): fix dark mode test selector
Neeraj-Kondaveeti Dec 4, 2025
2810a2b
Fix test: restore data-testid for stat-label
Neeraj-Kondaveeti Mar 23, 2026
7ff0466
Fix test: restore data-test ids
Neeraj-Kondaveeti Mar 23, 2026
37b7cb9
Fix tests: restore stat-bar inner text selector
Neeraj-Kondaveeti Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 138 additions & 60 deletions src/components/CommunityPortal/EventPersonalization/EventStats.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { useSelector } from 'react-redux';
import styles from './EventStats.module.css';
import { useSelector } from 'react-redux';

const dummyData = [
{
Expand Down Expand Up @@ -58,6 +58,9 @@ export default function PopularEvents() {
const [timeFilter, setTimeFilter] = useState('All day');
const [typeFilter, setTypeFilter] = useState('All');

const darkMode = useSelector(state => state.theme.darkMode);

// ✅ KEEP YOUR SAFE FIX
const calculatePercentage = (attended, enrolled) =>
enrolled === 0 ? 0 : Math.round((attended / enrolled) * 100);

Expand Down Expand Up @@ -96,81 +99,156 @@ export default function PopularEvents() {
filteredData[0],
)
: null;
const darkMode = useSelector(state => state.theme.darkMode);

return (
<div className={darkMode ? styles.popularEventsContainerDark : styles.popularEventsContainer}>
<div className={darkMode ? styles.headerContainerDark : styles.headerContainer}>
<h2 className={darkMode ? styles.popularEventsHeaderDark : styles.popularEventsHeader}>
<div
className={`
${styles['popular-events-container']}
${darkMode ? 'bg-oxford-blue text-light' : ''}
`}
>
{/* Header */}
<div
className={`
${styles['header-container']}
${darkMode ? 'text-light' : ''}
`}
>
<h2
className={`
${styles['popular-events-header']}
${darkMode ? 'text-light' : ''}
`}
>
Most Popular Event
</h2>
<div className={darkMode ? styles.filtersDark : styles.filters}>
<select value={timeFilter} onChange={e => setTimeFilter(e.target.value)}>
<option value="All day">All day</option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Night">Night</option>

{/* Filters */}
<div className={styles.filters}>
<select
value={timeFilter}
onChange={e => setTimeFilter(e.target.value)}
className={`
${styles.selectBase}
${darkMode ? 'bg-space-cadet text-light border-light' : ''}
`}
>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="All day">
All day
</option>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="Morning">
Morning
</option>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="Afternoon">
Afternoon
</option>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="Night">
Night
</option>
</select>
<select value={typeFilter} onChange={e => setTypeFilter(e.target.value)}>
<option value="All">All</option>
<option value="Offline">Offline</option>
<option value="Online">Online</option>

<select
value={typeFilter}
onChange={e => setTypeFilter(e.target.value)}
className={`
${styles.selectBase}
${darkMode ? 'bg-space-cadet text-light border-light' : ''}
`}
>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="All">
All
</option>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="Offline">
Offline
</option>
<option className={darkMode ? 'bg-space-cadet text-light' : ''} value="Online">
Online
</option>
</select>
</div>
</div>

<div className={darkMode ? styles.statsDark : styles.stats}>
{filteredData.map(event => {
const percentage = calculatePercentage(event.attended, event.enrolled);
return (
<div key={event.id} className={styles.statItem}>
<div className={darkMode ? styles.statLabelDark : styles.statLabel}>{event.type}</div>
<div className={styles.statBar}>
<div
className={`${styles.bar} ${styles[getBarColor(percentage)]}`}
style={{ width: `${percentage}%` }}
/>
</div>
<div className={darkMode ? styles.statValueDark : styles.statValue}>
{`${percentage}% (${event.attended}/${event.enrolled})`}
</div>
{/* Stats Section */}
<div
className={`
${styles.stats}
${darkMode ? 'bg-space-cadet text-light box-shadow-dark' : 'box-shadow-light'}
`}
>
{filteredData.map(event => (
<div key={event.id} className={styles['stat-item']}>
<div
data-testid="stat-label"
className={`${styles['stat-label']} ${darkMode ? 'text-light' : ''}`}
>
{event.type}
</div>

<div className={styles['stat-bar']}>
<div
data-testid="stat-bar-inner"
className={`${styles.bar} ${
styles[getBarColor(calculatePercentage(event.attended, event.enrolled))]
}`}
style={{
width: `${calculatePercentage(event.attended, event.enrolled)}%`,
}}
/>
</div>

<div className={`${styles['stat-value']} ${darkMode ? 'text-light' : ''}`}>
{`${calculatePercentage(event.attended, event.enrolled)}% (${event.attended}/${
event.enrolled
})`}
</div>
);
})}
</div>
<div className={styles.eventSummary}>
<div className={darkMode ? styles.summaryItemDark : styles.summaryItem}>
<div className={darkMode ? styles.summaryTitleDark : styles.summaryTitle}>
Total Number of Events
</div>
<div className={darkMode ? styles.summaryValueDark : styles.summaryValue}>
{filteredData.length}
</div>
))}
</div>

{/* Summary */}
<div className={styles['event-summary']}>
<div
data-testid="summary-total-events"
className={`${styles['summary-item']} ${
darkMode ? 'bg-yinmn-blue text-light box-shadow-dark' : 'box-shadow-light'
}`}
>
<div className={styles['summary-title']}>Total Number of Events</div>
<div className={styles['summary-value']}>{filteredData.length}</div>
</div>
<div className={darkMode ? styles.summaryItemDark : styles.summaryItem}>
<div className={darkMode ? styles.summaryTitleDark : styles.summaryTitle}>
Total Number of Event Enrollments
</div>
<div className={darkMode ? styles.summaryValueDark : styles.summaryValue}>
{filteredData.reduce((acc, event) => acc + event.enrolled, 0)}

<div
data-testid="summary-total-enrollments"
className={`${styles['summary-item']} ${
darkMode ? 'bg-yinmn-blue text-light box-shadow-dark' : 'box-shadow-light'
}`}
>
<div className={styles['summary-title']}>Total Number of Event Enrollments</div>
<div className={styles['summary-value']}>
{filteredData.reduce((acc, e) => acc + e.enrolled, 0)}
</div>
</div>

{filteredData.length > 0 && (
<>
<div className={darkMode ? styles.summaryItemDark : styles.summaryItem}>
<div className={darkMode ? styles.summaryTitleDark : styles.summaryTitle}>
Most Popular Event
</div>
<div className={darkMode ? styles.summaryValueDark : styles.summaryValue}>
{mostPopularEvent.type || 'N/A'}
</div>
<div
data-testid="summary-most"
className={`${styles['summary-item']} ${
darkMode ? 'bg-yinmn-blue text-light box-shadow-dark' : 'box-shadow-light'
}`}
>
<div className={styles['summary-title']}>Most Popular Event</div>
<div className={styles['summary-value']}>{mostPopularEvent?.type || 'N/A'}</div>
</div>
<div className={darkMode ? styles.summaryItemDark : styles.summaryItem}>
<div className={darkMode ? styles.summaryTitleDark : styles.summaryTitle}>
Least Popular Event
</div>
<div className={darkMode ? styles.summaryValueDark : styles.summaryValue}>
{leastPopularEvent.type || 'N/A'}
</div>

<div
data-testid="summary-least"
className={`${styles['summary-item']} ${
darkMode ? 'bg-yinmn-blue text-light box-shadow-dark' : 'box-shadow-light'
}`}
>
<div className={styles['summary-title']}>Least Popular Event</div>
<div className={styles['summary-value']}>{leastPopularEvent?.type || 'N/A'}</div>
</div>
</>
)}
Expand Down
Loading
Loading