From 5ff3c19aba58afa3a05bbc3021b3cc41ecbe354f Mon Sep 17 00:00:00 2001
From: ChiragBellara <chiragbellara7@gmail.com>
Date: Tue, 23 Dec 2025 16:40:59 -0800
Subject: [PATCH 1/5] Added the Share and Filter icons

---
 .../Reports/Participation/NoShowInsights.jsx  | 29 ++++++++++++-------
 .../Participation/Participation.module.css    | 12 ++++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
index ab635e8ad0..a92f9ed0ec 100644
--- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { ArrowUpDown, SquareArrowOutUpRight } from 'lucide-react';
 import mockEvents from './mockData';
 import styles from './Participation.module.css';
 
@@ -98,17 +99,23 @@ function NoShowInsights() {
         </div>
       </div>
 
-      <div className={styles.insightsTabs}>
-        {['Event type', 'Time', 'Location'].map(tab => (
-          <button
-            key={tab}
-            type="button"
-            className={`${styles.insightsTab} ${activeTab === tab ? styles.activeTab : ''}`}
-            onClick={() => setActiveTab(tab)}
-          >
-            {tab}
-          </button>
-        ))}
+      <div className={styles.insightsTabsContainer}>
+        <div className={styles.insightsTabs}>
+          {['Event type', 'Time', 'Location'].map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={`${styles.insightsTab} ${activeTab === tab ? styles.activeTab : ''}`}
+              onClick={() => setActiveTab(tab)}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+        <div className={styles.icons}>
+          <ArrowUpDown />
+          <SquareArrowOutUpRight />
+        </div>
       </div>
 
       <div className={styles.insightsContent}>{renderStats()}</div>
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index f82ec50d11..caeb48cbb8 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -359,6 +359,7 @@
 }
 
 .insightsTabs {
+  flex: 1;
   display: flex;
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -366,6 +367,17 @@
   max-width: 60%;
 }
 
+.insightsTabsContainer{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.icons{
+  display: flex;
+  gap: 8px;
+}
+
 .insightsTab {
   flex: 1;
   text-align: center;

From b5f019fdb7ea475be12e513d18adaef4ad6beb9e Mon Sep 17 00:00:00 2001
From: ChiragBellara <chiragbellara7@gmail.com>
Date: Wed, 24 Dec 2025 14:59:20 -0800
Subject: [PATCH 2/5] Added sorting functionality and dark mode support for
 No-Show Insights

---
 .../Reports/Participation/NoShowInsights.jsx  | 32 ++++++++++++++++---
 .../Participation/Participation.module.css    | 29 +++++++++++++----
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
index a92f9ed0ec..913e1af588 100644
--- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ArrowUpDown, SquareArrowOutUpRight } from 'lucide-react';
+import { ArrowUpDown, ArrowUp, ArrowDown, SquareArrowOutUpRight } from 'lucide-react';
 import mockEvents from './mockData';
 import styles from './Participation.module.css';
 
 function NoShowInsights() {
   const [dateFilter, setDateFilter] = useState('All');
   const [activeTab, setActiveTab] = useState('Event type');
+  const [sortOrder, setSortOrder] = useState('none');
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const filterByDate = events => {
@@ -34,6 +35,15 @@ function NoShowInsights() {
     });
   };
 
+  const handleSortClick = () => {
+    setSortOrder(prev => {
+      if (prev === 'none' || prev === 'desc') return 'asc';
+      if (prev === 'asc') return 'desc';
+      return 'none';
+    });
+  };
+  const SortIcon = sortOrder === 'none' ? ArrowUpDown : sortOrder === 'asc' ? ArrowUp : ArrowDown;
+
   const calculateStats = filteredEvents => {
     const statsMap = new Map();
 
@@ -65,8 +75,14 @@ function NoShowInsights() {
   const renderStats = () => {
     const filteredEvents = filterByDate(mockEvents);
     const stats = calculateStats(filteredEvents);
+    const finalStats =
+      sortOrder === 'none'
+        ? stats
+        : [...stats].sort((a, b) =>
+            sortOrder === 'asc' ? a.percentage - b.percentage : b.percentage - a.percentage,
+          );
 
-    return stats.map(item => (
+    return finalStats.map(item => (
       <div key={item.label} className={styles.insightItem}>
         <div className={`${styles.insightsLabel} ${darkMode ? styles.insightsLabelDark : ''}`}>
           {item.label}
@@ -100,12 +116,18 @@ function NoShowInsights() {
       </div>
 
       <div className={styles.insightsTabsContainer}>
-        <div className={styles.insightsTabs}>
+        <div
+          className={`${styles.insightsTabs} ${
+            darkMode ? styles.insightsTabsDark : styles.insightsTabLight
+          }`}
+        >
           {['Event type', 'Time', 'Location'].map(tab => (
             <button
               key={tab}
               type="button"
-              className={`${styles.insightsTab} ${activeTab === tab ? styles.activeTab : ''}`}
+              className={`${styles.insightsTab} ${
+                darkMode ? styles.insightsTabDark : styles.insightsTabLight
+              } ${activeTab === tab ? styles.activeTab : ''}`}
               onClick={() => setActiveTab(tab)}
             >
               {tab}
@@ -113,7 +135,7 @@ function NoShowInsights() {
           ))}
         </div>
         <div className={styles.icons}>
-          <ArrowUpDown />
+          <SortIcon onClick={handleSortClick} className={styles.sortIcon} />
           <SquareArrowOutUpRight />
         </div>
       </div>
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index caeb48cbb8..608caa0136 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -374,6 +374,7 @@
 }
 
 .icons{
+  cursor: pointer;
   display: flex;
   gap: 8px;
 }
@@ -383,13 +384,29 @@
   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;
 }
 
+.insightsTabLight{
+  color: #555;
+  background-color: #f8f9fa;
+}
+
+.insightsTabDark{
+  color: #f8f9fa;
+  background-color: #1C2541;
+}
+
+.insightsTabDark:hover {
+  background-color: #3A506B;
+}
+
+.insightsTabLight:hover {
+  background-color: #e0e0e0;
+}
+
 .insightsTab:not(:last-child) {
   border-right: 1px solid #ccc;
 }
@@ -401,10 +418,6 @@
   font-weight: bold;
 }
 
-.insightsTab:hover {
-  background-color: #e0e0e0;
-}
-
 .insightsContent {
   display: flex;
   flex-direction: column;
@@ -459,6 +472,10 @@
   color: #333;
 }
 
+.insightsPercentageDark {
+    color: #ffffff;
+  }
+
 /* ---------- PDF/Print helpers ---------- */
 .pageBreakBefore { break-before: page; page-break-before: always; }
 .pageBreakAfter  { break-after: page;  page-break-after: always; }

From 68a5bb8cafa0e5a05adaddd626a63e853ac000bf Mon Sep 17 00:00:00 2001
From: ChiragBellara <chiragbellara7@gmail.com>
Date: Fri, 26 Dec 2025 10:11:12 -0800
Subject: [PATCH 3/5] Fixed select dropdown in dark mode and changed total
 width to sync light and dark modes

---
 .../Reports/Participation/NoShowInsights.jsx               | 2 +-
 .../Reports/Participation/Participation.module.css         | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
index 913e1af588..a5cf0066c6 100644
--- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -105,7 +105,7 @@ function NoShowInsights() {
     <div className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`}>
       <div className={`${styles.insightsHeader} ${darkMode ? styles.insightsHeaderDark : ''}`}>
         <h3>No-show rate insights</h3>
-        <div className={styles.insightsFilters}>
+        <div className={`${styles.insightsFilters} ${darkMode ? styles.insightsFiltersDark : ''}`}>
           <select value={dateFilter} onChange={e => setDateFilter(e.target.value)}>
             <option value="All">All Time</option>
             <option value="Today">Today</option>
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index 608caa0136..1317dd226e 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -12,7 +12,7 @@
 }
 
 .participationLandingPageDark {
-  max-width: 100%;
+  max-width: 90%;
   margin: 0 auto;
   background-color: #1B2A41;
   color: #ffffff;
@@ -358,6 +358,11 @@
   border-radius: 5px;
 }
 
+.insightsFiltersDark select{
+  color: #f8f9fa;
+  background-color: #1C2541;
+}
+
 .insightsTabs {
   flex: 1;
   display: flex;

From 119de34e0d79607e610df04cef4ad21d1195ac92 Mon Sep 17 00:00:00 2001
From: ChiragBellara <chiragbellara7@gmail.com>
Date: Mon, 29 Dec 2025 16:48:53 -0800
Subject: [PATCH 4/5] Added Export PDF functionality and fixed tooltips

---
 .../Reports/Participation/NoShowInsights.jsx  | 68 +++++++++++++++++--
 .../Participation/Participation.module.css    | 27 ++++++++
 2 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
index a5cf0066c6..84a84608d3 100644
--- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { ArrowUpDown, ArrowUp, ArrowDown, SquareArrowOutUpRight } from 'lucide-react';
+import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
 import mockEvents from './mockData';
 import styles from './Participation.module.css';
 
@@ -9,6 +11,7 @@ function NoShowInsights() {
   const [activeTab, setActiveTab] = useState('Event type');
   const [sortOrder, setSortOrder] = useState('none');
   const darkMode = useSelector(state => state.theme.darkMode);
+  const insightsRef = useRef(null);
 
   const filterByDate = events => {
     const today = new Date();
@@ -101,8 +104,57 @@ function NoShowInsights() {
     ));
   };
 
+  const handleExportPDF = async () => {
+    try {
+      if (typeof jsPDF === 'undefined' || typeof html2canvas === 'undefined') {
+        return;
+      }
+      if (!insightsRef.current) return;
+
+      const canvas = await html2canvas(insightsRef.current, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: null,
+      });
+
+      const imgData = canvas.toDataURL('image/png');
+      const pdf = new jsPDF('p', 'pt', 'a4');
+
+      const pageWidth = pdf.internal.pageSize.getWidth();
+      const pageHeight = pdf.internal.pageSize.getHeight();
+
+      const imgWidth = pageWidth;
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+      let y = 0;
+
+      let remainingHeight = imgHeight;
+      while (remainingHeight > 0) {
+        pdf.addImage(imgData, 'PNG', 0, y, imgWidth, imgHeight);
+        remainingHeight -= pageHeight;
+
+        if (remainingHeight > 0) {
+          pdf.addPage();
+          y -= pageHeight;
+        }
+      }
+
+      const now = new Date();
+      const localDate = now.toLocaleDateString('en-CA');
+      const filename = `no-show-insights_${dateFilter}_${activeTab}_${localDate}.pdf`;
+      pdf.save(filename);
+    } catch (pdfError) {
+      // eslint-disable-next-line no-console
+      console.error('PDF generation failed:', pdfError);
+      // eslint-disable-next-line no-alert
+      alert(`Error generating PDF: ${pdfError.message}`);
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
   return (
-    <div className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`}>
+    <div ref={insightsRef} className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`}>
       <div className={`${styles.insightsHeader} ${darkMode ? styles.insightsHeaderDark : ''}`}>
         <h3>No-show rate insights</h3>
         <div className={`${styles.insightsFilters} ${darkMode ? styles.insightsFiltersDark : ''}`}>
@@ -135,8 +187,16 @@ function NoShowInsights() {
           ))}
         </div>
         <div className={styles.icons}>
-          <SortIcon onClick={handleSortClick} className={styles.sortIcon} />
-          <SquareArrowOutUpRight />
+          <div className={styles.tooltipWrapper}>
+            <SortIcon onClick={handleSortClick} className={styles.sortIcon} />
+            <span className={styles.tooltip}>
+              {sortOrder === 'none' ? 'Default' : sortOrder === 'asc' ? 'Low → High' : 'High → Low'}
+            </span>
+          </div>
+          <div className={styles.tooltipWrapper}>
+            <SquareArrowOutUpRight onClick={handleExportPDF} />
+            <span className={styles.tooltip}>Export Data</span>
+          </div>
         </div>
       </div>
 
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index 1317dd226e..c6b2976b52 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -481,6 +481,33 @@
     color: #ffffff;
   }
 
+.tooltipWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 10px;
+  font-size: 12px;
+  background-color: #111;
+  color: #fff;
+  border-radius: 6px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 10;
+}
+
+.tooltipWrapper:hover .tooltip {
+  opacity: 1;
+}
+
 /* ---------- PDF/Print helpers ---------- */
 .pageBreakBefore { break-before: page; page-break-before: always; }
 .pageBreakAfter  { break-after: page;  page-break-after: always; }

From 24ca86cd9430c03145027e5e73a661a2cebb47de Mon Sep 17 00:00:00 2001
From: ChiragBellara <chiragbellara7@gmail.com>
Date: Tue, 30 Dec 2025 16:10:32 -0800
Subject: [PATCH 5/5] Added code to share PDF directly

---
 .../Reports/Participation/NoShowInsights.jsx  | 235 ++++++++++++++----
 .../Participation/Participation.module.css    |  99 ++++++++
 2 files changed, 281 insertions(+), 53 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
index 84a84608d3..7fce559d4a 100644
--- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx
@@ -12,6 +12,9 @@ function NoShowInsights() {
   const [sortOrder, setSortOrder] = useState('none');
   const darkMode = useSelector(state => state.theme.darkMode);
   const insightsRef = useRef(null);
+  const [isExportOpen, setIsExportOpen] = useState(false);
+  const [exportError, setExportError] = useState('');
+  const [isExporting, setIsExporting] = useState(false);
 
   const filterByDate = events => {
     const today = new Date();
@@ -104,7 +107,7 @@ function NoShowInsights() {
     ));
   };
 
-  const handleExportPDF = async () => {
+  const buildPdfFromView = async () => {
     try {
       if (typeof jsPDF === 'undefined' || typeof html2canvas === 'undefined') {
         return;
@@ -114,7 +117,7 @@ function NoShowInsights() {
       const canvas = await html2canvas(insightsRef.current, {
         scale: 2,
         useCORS: true,
-        backgroundColor: null,
+        backgroundColor: darkMode ? '#1C2541' : null,
       });
 
       const imgData = canvas.toDataURL('image/png');
@@ -138,70 +141,196 @@ function NoShowInsights() {
           y -= pageHeight;
         }
       }
-
-      const now = new Date();
-      const localDate = now.toLocaleDateString('en-CA');
-      const filename = `no-show-insights_${dateFilter}_${activeTab}_${localDate}.pdf`;
-      pdf.save(filename);
+      return pdf;
     } catch (pdfError) {
-      // eslint-disable-next-line no-console
-      console.error('PDF generation failed:', pdfError);
-      // eslint-disable-next-line no-alert
-      alert(`Error generating PDF: ${pdfError.message}`);
+      setExportError(pdfError?.message || 'Failed to share PDF.');
     } finally {
-      setIsGeneratingPDF(false);
+      setIsExporting(false);
     }
   };
 
-  return (
-    <div ref={insightsRef} className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`}>
-      <div className={`${styles.insightsHeader} ${darkMode ? styles.insightsHeaderDark : ''}`}>
-        <h3>No-show rate insights</h3>
-        <div className={`${styles.insightsFilters} ${darkMode ? styles.insightsFiltersDark : ''}`}>
-          <select value={dateFilter} onChange={e => setDateFilter(e.target.value)}>
-            <option value="All">All Time</option>
-            <option value="Today">Today</option>
-            <option value="This Week">This Week</option>
-            <option value="This Month">This Month</option>
-          </select>
-        </div>
-      </div>
+  const getPdfFilename = () => {
+    const now = new Date();
+    const localDate = now.toLocaleDateString('en-CA');
+    const filename = `no-show-insights_${dateFilter}_${activeTab}_${localDate}.pdf`;
+    return filename.replace(/\s+/g, '_').toLowerCase();
+  };
+
+  const handleDownloadPdf = async () => {
+    try {
+      setIsExporting(true);
+      setExportError('');
+      const pdf = await buildPdfFromView();
+      pdf.save(getPdfFilename());
+      setIsExportOpen(false);
+    } catch (e) {
+      setExportError(e?.message || 'Failed to download PDF.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleSharePdf = async () => {
+    try {
+      setIsExporting(true);
+      setExportError('');
+
+      const pdf = await buildPdfFromView();
+      const blob = pdf.output('blob');
+      const file = new File([blob], getPdfFilename(), { type: 'application/pdf' });
+
+      if (!navigator.share || !navigator.canShare?.({ files: [file] })) {
+        setExportError(
+          'Sharing is not supported in this browser. Please download the PDF instead.',
+        );
+        return;
+      }
+
+      await navigator.share({
+        title: 'No-show rate insights',
+        text: `Insights (${dateFilter}, ${activeTab})`,
+        files: [file],
+      });
+
+      setIsExportOpen(false);
+    } catch (e) {
+      setExportError(e?.message || 'Failed to share PDF.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
 
-      <div className={styles.insightsTabsContainer}>
+  return (
+    <>
+      {isExportOpen && (
         <div
-          className={`${styles.insightsTabs} ${
-            darkMode ? styles.insightsTabsDark : styles.insightsTabLight
-          }`}
+          className={styles.modalOverlay}
+          onClick={() => !isExporting && setIsExportOpen(false)}
+          onKeyDown={() => !isExporting && setIsExportOpen(false)}
+          role="button"
+          tabIndex={0}
         >
-          {['Event type', 'Time', 'Location'].map(tab => (
-            <button
-              key={tab}
-              type="button"
-              className={`${styles.insightsTab} ${
-                darkMode ? styles.insightsTabDark : styles.insightsTabLight
-              } ${activeTab === tab ? styles.activeTab : ''}`}
-              onClick={() => setActiveTab(tab)}
-            >
-              {tab}
-            </button>
-          ))}
+          <div
+            className={`${styles.modal} ${darkMode ? styles.modalDark : ''}`}
+            onClick={e => e.stopPropagation()}
+            onKeyDown={e => e.stopPropagation()}
+            role="button"
+            tabIndex={0}
+          >
+            <div className={styles.modalHeader}>
+              <h4 className={styles.modalTitle}>Export No-show Insights</h4>
+              <button
+                type="button"
+                className={styles.modalClose}
+                onClick={() => !isExporting && setIsExportOpen(false)}
+                aria-label="Close export modal"
+              >
+                ×
+              </button>
+            </div>
+
+            <div className={styles.modalBody}>
+              <div className={styles.modalMeta}>
+                <div>
+                  <strong>Filter:</strong> {dateFilter}
+                </div>
+                <div>
+                  <strong>View:</strong> {activeTab}
+                </div>
+              </div>
+
+              {exportError && <div className={styles.modalError}>{exportError}</div>}
+
+              <div className={styles.modalActions}>
+                <button
+                  type="button"
+                  className={`${
+                    darkMode ? styles.exportOptionsButtonsDark : styles.exportOptionsButtons
+                  }`}
+                  onClick={handleDownloadPdf}
+                  disabled={isExporting}
+                >
+                  {isExporting ? 'Working…' : 'Download PDF'}
+                </button>
+
+                <button
+                  type="button"
+                  className={`${
+                    darkMode ? styles.exportOptionsButtonsDark : styles.exportOptionsButtons
+                  }`}
+                  onClick={handleSharePdf}
+                  disabled={isExporting}
+                >
+                  {isExporting ? 'Working…' : 'Share PDF'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      <div
+        ref={insightsRef}
+        className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`}
+      >
+        <div className={`${styles.insightsHeader} ${darkMode ? styles.insightsHeaderDark : ''}`}>
+          <h3>No-show rate insights</h3>
+          <div
+            className={`${styles.insightsFilters} ${darkMode ? styles.insightsFiltersDark : ''}`}
+          >
+            <select value={dateFilter} onChange={e => setDateFilter(e.target.value)}>
+              <option value="All">All Time</option>
+              <option value="Today">Today</option>
+              <option value="This Week">This Week</option>
+              <option value="This Month">This Month</option>
+            </select>
+          </div>
         </div>
-        <div className={styles.icons}>
-          <div className={styles.tooltipWrapper}>
-            <SortIcon onClick={handleSortClick} className={styles.sortIcon} />
-            <span className={styles.tooltip}>
-              {sortOrder === 'none' ? 'Default' : sortOrder === 'asc' ? 'Low → High' : 'High → Low'}
-            </span>
+
+        <div className={styles.insightsTabsContainer}>
+          <div
+            className={`${styles.insightsTabs} ${
+              darkMode ? styles.insightsTabsDark : styles.insightsTabLight
+            }`}
+          >
+            {['Event type', 'Time', 'Location'].map(tab => (
+              <button
+                key={tab}
+                type="button"
+                className={`${styles.insightsTab} ${
+                  darkMode ? styles.insightsTabDark : styles.insightsTabLight
+                } ${activeTab === tab ? styles.activeTab : ''}`}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </button>
+            ))}
           </div>
-          <div className={styles.tooltipWrapper}>
-            <SquareArrowOutUpRight onClick={handleExportPDF} />
-            <span className={styles.tooltip}>Export Data</span>
+          <div className={styles.icons}>
+            <div className={styles.tooltipWrapper}>
+              <SortIcon onClick={handleSortClick} className={styles.sortIcon} />
+              <span className={styles.tooltip}>
+                {sortOrder === 'none'
+                  ? 'Default'
+                  : sortOrder === 'asc'
+                  ? 'Low → High'
+                  : 'High → Low'}
+              </span>
+            </div>
+            <div className={styles.tooltipWrapper}>
+              <SquareArrowOutUpRight
+                onClick={() => {
+                  setExportError('');
+                  setIsExportOpen(true);
+                }}
+              />
+              <span className={styles.tooltip}>Export Data</span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className={styles.insightsContent}>{renderStats()}</div>
-    </div>
+        <div className={styles.insightsContent}>{renderStats()}</div>
+      </div>
+    </>
   );
 }
 
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index c6b2976b52..d011f0abf1 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -508,6 +508,105 @@
   opacity: 1;
 }
 
+/* ---------- Export PDF modal ---------- */
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.modal {
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.modalDark {
+  background: #1C2541;
+}
+
+.modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modalTitle {
+  margin: 0;
+}
+
+.modalClose {
+  border: none;
+  background: transparent;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.modalBody {
+  margin-top: 12px;
+}
+
+.modalMeta {
+  font-size: 16px;
+  opacity: 0.85;
+  display: grid;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.modalError {
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #b00020;
+}
+
+.modalActions {
+  display: flex;
+  gap: 10px;
+}
+
+.exportOptionsButtons,
+.exportOptionsButtonsDark {
+  flex: 1;
+  padding: 10px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.exportOptionsButtons{
+  background: transparent;
+  border: 1px solid #ccc;
+  color: #555;
+}
+
+.exportOptionsButtons:hover{
+  color: #555;
+  background-color: #e0e0e0;
+}
+
+.exportOptionsButtonsDark{
+  border: 1px solid #ccc;
+  color: #111;
+}
+
+.exportOptionsButtonsDark:hover {
+  background: #3A506B;
+}
+
+.exportOptionsButtons:disabled,
+.exportOptionsButtonsDark:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+
+
 /* ---------- PDF/Print helpers ---------- */
 .pageBreakBefore { break-before: page; page-break-before: always; }
 .pageBreakAfter  { break-after: page;  page-break-after: always; }