Skip to content

Commit b4724ca

Browse files
kanishkagarwal6101kanishkagarwal6101
committed
Fix dark mode text colors for drop-off rate and no-show rate labels
- Add dark mode styling for 'Drop-off rate' and 'No-show rate' text in DropOffTracking component - Fix duplicate CSS selectors to resolve stylelint errors - Fix CSS syntax error (extra closing brace) - Ensure text is visible in dark mode with proper color contrast
1 parent 4f99a60 commit b4724ca

9 files changed

Lines changed: 955 additions & 549 deletions

File tree

‎src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ function DropOffTracking() {
7575
+5%
7676
<span className={darkMode ? styles.spanDark : ''}>Last week</span>
7777
</p>
78-
<p>Drop-off rate</p>
78+
<p className={darkMode ? styles.trackingRateLabelDark : ''}>Drop-off rate</p>
7979
</div>
8080
<div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
8181
<p className={styles.trackingRateValue}>
8282
+5% <span className={darkMode ? styles.spanDark : ''}>Last week</span>
8383
</p>
84-
<p>No-show rate</p>
84+
<p className={darkMode ? styles.trackingRateLabelDark : ''}>No-show rate</p>
8585
</div>
8686
</div>
8787
<div

‎src/components/CommunityPortal/Reports/Participation/EngagementBarChart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ function EngagementBarChart() {
2525
<div className={styles.barChartContainer}>
2626
<div className={styles.chartArea}>
2727
<div className={styles.yAxis}>
28-
<div className={styles.yAxisLabel}>Attendance</div>
2928
<div className={styles.yAxisValues}>
3029
{[0, 20, 40, 60].map(value => (
3130
<div key={value} className={styles.yAxisValue}>
3231
{value}
3332
</div>
3433
))}
3534
</div>
35+
<div className={styles.yAxisLabel}>Attendance</div>
3636
</div>
3737

3838
<div className={styles.barsContainer}>

‎src/components/CommunityPortal/Reports/Participation/EventPerformance.jsx‎

Lines changed: 122 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -46,111 +46,133 @@ function EventPerformance() {
4646

4747
const performanceData = getPerformanceData(selectedFilter);
4848

49-
const getAllEventPerformance = () => [
50-
{
51-
id: 1,
52-
name: 'Morning Yoga Flow',
53-
type: 'Yoga Class',
54-
date: '2025-01-20',
55-
attendance: 45,
56-
capacity: 50,
57-
rating: 4.8,
58-
engagement: 92,
59-
status: 'completed',
60-
value: 3600,
61-
},
62-
{
63-
id: 2,
64-
name: 'High-Intensity Bootcamp',
65-
type: 'Fitness Bootcamp',
66-
date: '2025-01-18',
67-
attendance: 55,
68-
capacity: 60,
69-
rating: 4.6,
70-
engagement: 88,
71-
status: 'completed',
72-
value: 4500,
73-
},
74-
{
75-
id: 3,
76-
name: 'Italian Cooking Workshop',
77-
type: 'Cooking Workshop',
78-
date: '2025-01-22',
79-
attendance: 25,
80-
capacity: 30,
81-
rating: 4.4,
82-
engagement: 85,
83-
status: 'upcoming',
84-
value: 3000,
85-
},
86-
{
87-
id: 4,
88-
name: 'Salsa Dance Class',
89-
type: 'Dance Class',
90-
date: '2025-01-25',
91-
attendance: 40,
92-
capacity: 45,
93-
rating: 4.2,
94-
engagement: 78,
95-
status: 'upcoming',
96-
value: 2400,
97-
},
98-
{
99-
id: 5,
100-
name: 'Meditation & Mindfulness',
101-
type: 'Yoga Class',
102-
date: '2025-01-15',
103-
attendance: 35,
104-
capacity: 40,
105-
rating: 4.7,
106-
engagement: 90,
107-
status: 'completed',
108-
value: 2800,
109-
},
110-
{
111-
id: 6,
112-
name: 'Advanced Yoga Workshop',
113-
type: 'Yoga Class',
114-
date: '2025-02-01',
115-
attendance: 30,
116-
capacity: 35,
117-
rating: 4.9,
118-
engagement: 95,
119-
status: 'upcoming',
120-
value: 2400,
121-
},
122-
{
123-
id: 7,
124-
name: 'CrossFit Challenge',
125-
type: 'Fitness Bootcamp',
126-
date: '2025-02-05',
127-
attendance: 50,
128-
capacity: 55,
129-
rating: 4.5,
130-
engagement: 87,
131-
status: 'upcoming',
132-
value: 4000,
133-
},
134-
{
135-
id: 8,
136-
name: 'French Pastry Class',
137-
type: 'Cooking Workshop',
138-
date: '2025-02-08',
139-
attendance: 20,
140-
capacity: 25,
141-
rating: 4.6,
142-
engagement: 89,
143-
status: 'upcoming',
144-
value: 2500,
145-
},
146-
];
49+
const getAllEventPerformance = () => {
50+
const today = new Date();
51+
today.setHours(0, 0, 0, 0);
52+
53+
// Generate dates relative to today
54+
const getDateString = daysFromToday => {
55+
const date = new Date(today);
56+
date.setDate(date.getDate() + daysFromToday);
57+
return date.toISOString().split('T')[0];
58+
};
59+
60+
return [
61+
{
62+
id: 1,
63+
name: 'Morning Yoga Flow',
64+
type: 'Yoga Class',
65+
date: getDateString(-5), // 5 days ago
66+
attendance: 45,
67+
capacity: 50,
68+
rating: 4.8,
69+
engagement: 92,
70+
status: 'completed',
71+
value: 3600,
72+
},
73+
{
74+
id: 2,
75+
name: 'High-Intensity Bootcamp',
76+
type: 'Fitness Bootcamp',
77+
date: getDateString(-7), // 7 days ago
78+
attendance: 55,
79+
capacity: 60,
80+
rating: 4.6,
81+
engagement: 88,
82+
status: 'completed',
83+
value: 4500,
84+
},
85+
{
86+
id: 3,
87+
name: 'Italian Cooking Workshop',
88+
type: 'Cooking Workshop',
89+
date: getDateString(3), // 3 days from now
90+
attendance: 25,
91+
capacity: 30,
92+
rating: 4.4,
93+
engagement: 85,
94+
status: 'upcoming',
95+
value: 3000,
96+
},
97+
{
98+
id: 4,
99+
name: 'Salsa Dance Class',
100+
type: 'Dance Class',
101+
date: getDateString(6), // 6 days from now
102+
attendance: 40,
103+
capacity: 45,
104+
rating: 4.2,
105+
engagement: 78,
106+
status: 'upcoming',
107+
value: 2400,
108+
},
109+
{
110+
id: 5,
111+
name: 'Meditation & Mindfulness',
112+
type: 'Yoga Class',
113+
date: getDateString(-10), // 10 days ago
114+
attendance: 35,
115+
capacity: 40,
116+
rating: 4.7,
117+
engagement: 90,
118+
status: 'completed',
119+
value: 2800,
120+
},
121+
{
122+
id: 6,
123+
name: 'Advanced Yoga Workshop',
124+
type: 'Yoga Class',
125+
date: getDateString(13), // 13 days from now
126+
attendance: 30,
127+
capacity: 35,
128+
rating: 4.9,
129+
engagement: 95,
130+
status: 'upcoming',
131+
value: 2400,
132+
},
133+
{
134+
id: 7,
135+
name: 'CrossFit Challenge',
136+
type: 'Fitness Bootcamp',
137+
date: getDateString(17), // 17 days from now
138+
attendance: 50,
139+
capacity: 55,
140+
rating: 4.5,
141+
engagement: 87,
142+
status: 'upcoming',
143+
value: 4000,
144+
},
145+
{
146+
id: 8,
147+
name: 'French Pastry Class',
148+
type: 'Cooking Workshop',
149+
date: getDateString(20), // 20 days from now
150+
attendance: 20,
151+
capacity: 25,
152+
rating: 4.6,
153+
engagement: 89,
154+
status: 'upcoming',
155+
value: 2500,
156+
},
157+
];
158+
};
147159

148160
const allEventPerformance = getAllEventPerformance();
149161

150162
const filteredEvents = allEventPerformance.filter(event => {
151163
if (selectedFilter === 'all') return true;
152-
if (selectedFilter === 'completed') return event.status === 'completed';
153-
if (selectedFilter === 'upcoming') return event.status === 'upcoming';
164+
if (selectedFilter === 'completed') {
165+
const eventDate = new Date(event.date);
166+
const today = new Date();
167+
today.setHours(0, 0, 0, 0);
168+
return eventDate < today;
169+
}
170+
if (selectedFilter === 'upcoming') {
171+
const eventDate = new Date(event.date);
172+
const today = new Date();
173+
today.setHours(0, 0, 0, 0);
174+
return eventDate >= today;
175+
}
154176
if (selectedFilter === 'high-rated') return event.rating >= 4.5;
155177
return true;
156178
});

0 commit comments

Comments
 (0)