Sireesha taking over Aswin phase3 participation report fixes

src/components/CommunityPortal/Reports/Participation/ChartsSection.jsx

@@ -0,0 +1,146 @@
+import { useSelector } from 'react-redux';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from 'recharts';
+
+import mockEvents from './mockData';
+import styles from './ChartsSection.module.css';
+
+function ChartsSection() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  // Group data by event type
+  const eventTypeStats = [];
+  const groups = {};
+
+  mockEvents.forEach(evt => {
+    const key = evt.eventType;
+
+    if (!groups[key]) {
+      groups[key] = { count: 0, noShowSum: 0, dropSum: 0 };
+    }
+
+    groups[key].count++;
+    groups[key].noShowSum += parseInt(evt.noShowRate, 10);
+    groups[key].dropSum += parseInt(evt.dropOffRate, 10);
+  });
+
+  for (const key in groups) {
+    eventTypeStats.push({
+      eventType: key,
+      avgNoShow: Math.round(groups[key].noShowSum / groups[key].count),
+      avgDrop: Math.round(groups[key].dropSum / groups[key].count),
+    });
+  }
+
+  // Monthly trend
+  const monthlyTrend = {};
+
+  mockEvents.forEach(evt => {
+    const m = new Date(evt.eventDate).getMonth();
+
+    if (!monthlyTrend[m]) {
+      monthlyTrend[m] = { count: 0, noShowSum: 0 };
+    }
+
+    monthlyTrend[m].count++;
+    monthlyTrend[m].noShowSum += parseInt(evt.noShowRate, 10);
+  });
+
+  const trendData = Object.keys(monthlyTrend).map(m => ({
+    month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][m],
+    avgNoShow: Math.round(monthlyTrend[m].noShowSum / monthlyTrend[m].count),
+  }));
+
+  // Location distribution
+  const locationGroups = {};
+
+  mockEvents.forEach(evt => {
+    const loc = evt.location;
+    if (!locationGroups[loc]) locationGroups[loc] = 0;
+    locationGroups[loc]++;
+  });
+
+  const locationData = Object.keys(locationGroups).map(loc => ({
+    name: loc,
+    value: locationGroups[loc],
+  }));
+
+  const pieColors = ['#007bff', '#00b894', '#e17055', '#6c5ce7', '#fdcb6e'];
+
+  return (
+    <div className={`${styles.chartsSection} ${darkMode ? styles.chartsSectionDark : ''}`}>
+      <h3 className={styles.sectionTitle}>Comparative Charts</h3>
+
+      {/* Row 1 — Bar Charts */}
+      <div className={styles.row}>
+        {/* No-Show Chart */}
+        <div className={styles.chartBox}>
+          <h4>No-show rate by event type</h4>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={eventTypeStats}>
+              <XAxis dataKey="eventType" stroke={darkMode ? '#fff' : '#333'} />
+              <YAxis stroke={darkMode ? '#fff' : '#333'} />
+              <Tooltip />
+              <Bar dataKey="avgNoShow" fill="#FF6B6B" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Drop-Off Chart */}
+        <div className={styles.chartBox}>
+          <h4>Drop-off rate by event type</h4>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={eventTypeStats}>
+              <XAxis dataKey="eventType" stroke={darkMode ? '#fff' : '#333'} />
+              <YAxis stroke={darkMode ? '#fff' : '#333'} />
+              <Tooltip />
+              <Bar dataKey="avgDrop" fill="#4C89FF" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Row 2 — Line Chart */}
+      <div className={styles.chartBoxFull}>
+        <h4>Monthly no-show trend</h4>
+        <ResponsiveContainer width="100%" height={280}>
+          <LineChart data={trendData}>
+            <XAxis dataKey="month" stroke={darkMode ? '#fff' : '#333'} />
+            <YAxis stroke={darkMode ? '#fff' : '#333'} />
+            <Tooltip />
+            <Line type="monotone" dataKey="avgNoShow" stroke="#FF6B6B" strokeWidth={2} />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* Row 3 — Pie Chart */}
+      <div className={styles.chartBoxFull}>
+        <h4>Participation by location</h4>
+        <ResponsiveContainer width="100%" height={300}>
+          <PieChart>
+            <Pie data={locationData} dataKey="value" nameKey="name" outerRadius={110} label>
+              {locationData.map((entry, index) => (
+                <Cell key={index} fill={pieColors[index % pieColors.length]} />
+              ))}
+            </Pie>
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export default ChartsSection;

src/components/CommunityPortal/Reports/Participation/ChartsSection.module.css

@@ -0,0 +1,56 @@
+.chartsSection {
+  margin-top: 30px;
+  background: #ffffff;
+  padding: 25px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.chartsSectionDark {
+  background: #1c2541;
+  color: #ffffff;
+  border: 1px solid #333;
+}
+
+.sectionTitle {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.chartBox {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.chartsSectionDark .chartBox {
+  background: #3a506b;
+  border: 1px solid #555;
+}
+
+.chartBox h4 {
+  margin-bottom: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.chartBoxFull {
+  margin-top: 20px;
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.chartsSectionDark .chartBoxFull {
+  background: #3a506b;
+  border: 1px solid #555;
+}

src/components/CommunityPortal/Reports/Participation/Demographics.jsx

@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+import styles from './Participation.module.css';
+
+function Demographics() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  return (
+    <div className={`${styles.demographicsPage} ${darkMode ? styles.demographicsPageDark : ''}`}>
+      <h2
+        className={`${styles.demographicsHeader} ${darkMode ? styles.demographicsHeaderDark : ''}`}
+      >
+        Demographics Overview
+      </h2>
+
+      <div className={styles.demographicsContent}>
+        <div className={styles.placeholderBox}>
+          <p>Charts and breakdowns for age, gender, and location demographics will appear here.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Demographics;

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

@@ -7,15 +7,15 @@ function DropOffTracking() {
   const [selectedEvent, setSelectedEvent] = useState('All Events');
   const [selectedTime, setSelectedTime] = useState('All Time');
 
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   const getDateRange = () => {
     const today = new Date();
     let startDate, endDate;
 
     if (selectedTime === 'Today') {
-      startDate = new Date(today);
-      startDate.setHours(0, 0, 0, 0);
-      endDate = new Date(today);
-      endDate.setHours(23, 59, 59, 999);
+      startDate = new Date(today.setHours(0, 0, 0, 0));
+      endDate = new Date(today.setHours(23, 59, 59, 999));
     } else if (selectedTime === 'This Week') {
       startDate = new Date(today);
       startDate.setDate(today.getDate() - today.getDay());
@@ -33,36 +33,40 @@ function DropOffTracking() {
   };
 
   const filteredEvents = mockEvents.filter(event => {
-    if (selectedEvent !== 'All Events' && event.eventType !== selectedEvent) {
-      return false;
-    }
+    if (selectedEvent !== 'All Events' && event.eventType !== selectedEvent) return false;
+
     if (selectedTime !== 'All Time') {
       const { startDate, endDate } = getDateRange();
       const eventDate = new Date(event.eventDate);
       return eventDate >= startDate && eventDate <= endDate;
     }
+
     return true;
   });
 
-  const darkMode = useSelector(state => state.theme.darkMode);
-
   return (
-    <div
-      className={`tracking-container-global ${styles.trackingContainer} ${
-        darkMode ? styles.trackingContainerDark : ''
-      }`}
-    >
+    <div className={`${styles.trackingContainer} ${darkMode ? styles.trackingContainerDark : ''}`}>
       <div className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''}`}>
         <h3>Drop-off and no-show rate tracking</h3>
+
         <div className={styles.trackingFilters}>
-          <select value={selectedEvent} onChange={e => setSelectedEvent(e.target.value)}>
+          <select
+            value={selectedEvent}
+            onChange={e => setSelectedEvent(e.target.value)}
+            className={darkMode ? 'darkSelect' : ''}
+          >
             <option value="All Events">All Events</option>
             <option value="Yoga Class">Yoga Class</option>
             <option value="Cooking Workshop">Cooking Workshop</option>
             <option value="Dance Class">Dance Class</option>
             <option value="Fitness Bootcamp">Fitness Bootcamp</option>
           </select>
-          <select value={selectedTime} onChange={e => setSelectedTime(e.target.value)}>
+
+          <select
+            value={selectedTime}
+            onChange={e => setSelectedTime(e.target.value)}
+            className={darkMode ? 'darkSelect' : ''}
+          >
             <option value="All Time">All Time</option>
             <option value="Today">Today</option>
             <option value="This Week">This Week</option>
@@ -77,15 +81,16 @@ function DropOffTracking() {
             +5% <span>Last week</span>
           </p>
           <p className={styles.trackingRateSubheading}>
-            <span> Drop-off rate</span>
+            <span>Drop-off rate</span>
           </p>
         </div>
+
         <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
           <p className={styles.trackingRateValue}>
             +5% <span>Last week</span>
           </p>
           <p className={styles.trackingRateSubheading}>
-            <span> No-show rate </span>
+            <span>No-show rate</span>
           </p>
         </div>
       </div>
@@ -95,11 +100,7 @@ function DropOffTracking() {
           darkMode ? styles.trackingListContainerDark : ''
         }`}
       >
-        <table
-          className={`tracking-table-global ${styles.trackingTable} ${
-            darkMode ? `tracking-table-global-dark ${styles.trackingTableDark}` : ''
-          }`}
-        >
+        <table className={`${styles.trackingTable} ${darkMode ? styles.trackingTableDark : ''}`}>
           <thead>
             <tr>
               <th>Event name</th>
@@ -108,6 +109,7 @@ function DropOffTracking() {
               <th>Attendees</th>
             </tr>
           </thead>
+
           <tbody>
             {filteredEvents.map(event => (
               <tr key={event.id}>