From 34488070f21fde11a21c36c6139f61565903bbeb Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Fri, 16 Jan 2026 15:01:01 -0500
Subject: [PATCH 1/7] fix(CPDashboard): update Datefilter

---
 .../CommunityPortal/CPDashboard.jsx           | 39 +++++++++++++++++-
 .../CommunityPortal/CPDashboard.module.css    | 41 +++++++++++++++----
 2 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 8baf7053c4..fb43163ebe 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -4,6 +4,9 @@ import { Container, Row, Col, Card, CardBody, Button, Input, FormGroup, Label }
 import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt, FaSearch, FaTimes } from 'react-icons/fa';
 import styles from './CPDashboard.module.css';
 import { ENDPOINTS } from '../../utils/URL';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { toast } from 'react-toastify';
 import axios from 'axios';
 import { el } from 'date-fns/locale';
 
@@ -38,6 +41,8 @@ export function CPDashboard() {
   const [searchInput, setSearchInput] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [onlineOnly, setOnlineOnly] = useState(false);
+  const [selectedDate, setSelectedDate] = useState('');
+  const [dateError, setDateError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [dateFilter, setDateFilter] = useState('');
   const [error, setError] = useState(null);
@@ -49,6 +54,19 @@ export function CPDashboard() {
     limit: 6,
   });
 
+  const handleDateChange = date => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0); // midnight today
+
+    if (date < today) {
+      toast.error('Past dates are not supported. Please select a future date.');
+      setSelectedDate('');
+      return;
+    }
+    setDateError('');
+    setSelectedDate(date);
+  };
+
   const FALLBACK_IMG =
     'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60';
 
@@ -269,7 +287,26 @@ export function CPDashboard() {
                     Clear date filter
                   </Button>
                 </div>
-                <Input type="date" placeholder="Ending After" className={styles['date-filter']} />
+                <div className={styles['date-filter-container']}>
+                  <DatePicker
+                    selected={selectedDate}
+                    onChange={date => handleDateChange(date)}
+                    placeholderText="Ending After"
+                    id="ending-after"
+                    className={styles['date-filter']}
+                  />
+                  {dateError && <p className={styles['date-error-message']}>{dateError}</p>}
+                </div>
+                <div className={styles['date-filter-container']}>
+                  <DatePicker
+                    selected={selectedDate}
+                    onChange={date => handleDateChange(date)}
+                    placeholderText="Ending After"
+                    id="ending-after"
+                    className={styles['date-filter']}
+                  />
+                  {dateError && <p className={styles['date-error-message']}>{dateError}</p>}
+                </div>
               </div>
 
               <div className={styles.filterItem}>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 79e556f471..4e9c02fc7a 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -85,11 +85,11 @@
   height: 34px;
   border-radius: 50%;
   cursor: pointer;
-  background: transparent;          /* 🔹 icon background now white */
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #1b3c55;               /* blue magnifying-glass icon */
+  color: #1b3c55;
   font-size: 0.9rem;
 }
 
@@ -159,9 +159,17 @@
   vertical-align: middle;
 }
 
-.filterItem input:not([type="checkbox"]):not([type="radio"]),
-.filterItem select {
-  padding: 12px 15px;
+.filter-section-divider {
+  height: fit-content;
+  margin: 10px 10px;
+  border-radius: 1px;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-item input:not([type='checkbox']):not([type='radio']),
+.filter-item select {
+  padding: 4px 15px;
   margin-top: 10px;
   border-radius: 8px;
   width: 100%;
@@ -175,7 +183,7 @@
   display: inline-block;      /* <– keeps input on same line as text */
   width: auto;
   padding: 0;
-  margin: 5px 0px 0px 120px;       /* top margin to line up under "Dates" */
+  margin: 5px 0px 0px 120px;
   vertical-align: middle;
 }
 
@@ -274,6 +282,25 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
+.date-filter {
+  padding-left: 10px;
+  margin-top: 15px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.date-filter-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px 20px;
+}
+
+.date-error-message {
+  color: red;
+  margin-top: 5px;
+}
+
 /* Hide browser's built-in clear icon for search inputs */
 .dashboardSearchInput::-webkit-search-cancel-button,
 .dashboardSearchInput::-webkit-search-decoration,
@@ -281,4 +308,4 @@
 .dashboardSearchInput::-webkit-search-results-decoration {
   -webkit-appearance: none;
   appearance: none;
-}
\ No newline at end of file
+}

From 34bf8595382ef842a2778dc25abfb05d02e71ee0 Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Fri, 16 Jan 2026 15:13:29 -0500
Subject: [PATCH 2/7] som-fix(DatePicker): remove duplicate DatePicker

---
 src/components/CommunityPortal/CPDashboard.jsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index fb43163ebe..54e68b21bd 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -297,16 +297,6 @@ export function CPDashboard() {
                   />
                   {dateError && <p className={styles['date-error-message']}>{dateError}</p>}
                 </div>
-                <div className={styles['date-filter-container']}>
-                  <DatePicker
-                    selected={selectedDate}
-                    onChange={date => handleDateChange(date)}
-                    placeholderText="Ending After"
-                    id="ending-after"
-                    className={styles['date-filter']}
-                  />
-                  {dateError && <p className={styles['date-error-message']}>{dateError}</p>}
-                </div>
               </div>
 
               <div className={styles.filterItem}>

From f21bb92bc0dc507b6e3feed6a8a2a5e9750e1226 Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Wed, 21 Jan 2026 19:50:56 -0800
Subject: [PATCH 3/7] som-fix(DatePicker): update css classes

---
 src/components/CommunityPortal/CPDashboard.jsx    |  6 +++---
 .../CommunityPortal/CPDashboard.module.css        | 15 +++++++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 54e68b21bd..8080d27f78 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -287,15 +287,15 @@ export function CPDashboard() {
                     Clear date filter
                   </Button>
                 </div>
-                <div className={styles['date-filter-container']}>
+                <div className={styles.dateFilterContainer}>
                   <DatePicker
                     selected={selectedDate}
                     onChange={date => handleDateChange(date)}
                     placeholderText="Ending After"
                     id="ending-after"
-                    className={styles['date-filter']}
+                    className={styles.dateFilter}
                   />
-                  {dateError && <p className={styles['date-error-message']}>{dateError}</p>}
+                  {dateError && <p className={styles.dateErrorMessage}>{dateError}</p>}
                 </div>
               </div>
 
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 4e9c02fc7a..3175bd72b7 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -183,7 +183,7 @@
   display: inline-block;      /* <– keeps input on same line as text */
   width: auto;
   padding: 0;
-  margin: 5px 0px 0px 120px;
+  margin: 5px 0px 0px 120px;       /* top margin to line up under "Dates" */
   vertical-align: middle;
 }
 
@@ -282,21 +282,28 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-.date-filter {
+.dateFilter {
   padding-left: 10px;
   margin-top: 15px;
   padding-top: 0px;
   padding-bottom: 0px;
 }
 
-.date-filter-container {
+/* .date-filter-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px 20px;
+} */
+
+.dateFilterContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px 10px 20px;
 }
 
-.date-error-message {
+.dateErrorMessage {
   color: red;
   margin-top: 5px;
 }

From e0eb70538ace2afbf60d47faeb1ed2daca7f2dc8 Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Wed, 21 Jan 2026 19:55:14 -0800
Subject: [PATCH 4/7] som-fix(DatePicker): remove old datepicker container

---
 src/components/CommunityPortal/CPDashboard.module.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 3175bd72b7..fb01ec8a07 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -289,13 +289,6 @@
   padding-bottom: 0px;
 }
 
-/* .date-filter-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 6px 10px 20px;
-} */
-
 .dateFilterContainer {
   display: flex;
   justify-content: center;

From 4f804e0e6448884ee3d2c44139d23bc1d54fed8a Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Wed, 21 Jan 2026 19:59:03 -0800
Subject: [PATCH 5/7] som-fix(DatePicker): update CPDashboard.module.css

---
 src/components/CommunityPortal/CPDashboard.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index fb01ec8a07..f68e5ed636 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -85,11 +85,11 @@
   height: 34px;
   border-radius: 50%;
   cursor: pointer;
-  background: transparent;
+  background: transparent;          /* 🔹 icon background now white */
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #1b3c55;
+  color: #1b3c55;               /* blue magnifying-glass icon */
   font-size: 0.9rem;
 }
 

From a0e3756f4a6cdbd1c706fd49454299ebb953f673 Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Fri, 27 Mar 2026 15:50:09 -0400
Subject: [PATCH 6/7] chore: cleanup DatePicker

---
 .../CommunityPortal/CPDashboard.jsx           | 22 -------------------
 .../CommunityPortal/CPDashboard.module.css    | 16 --------------
 2 files changed, 38 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index a618f0f627..3a5120eb81 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -81,7 +81,6 @@ export function CPDashboard() {
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedDate, setSelectedDate] = useState('');
   const [onlineOnly, setOnlineOnly] = useState(false);
-  const [dateError, setDateError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [dateFilter, setDateFilter] = useState('');
   const [error, setError] = useState(null);
@@ -103,7 +102,6 @@ export function CPDashboard() {
       setSelectedDate('');
       return;
     }
-    setDateError('');
     setSelectedDate(date);
   };
 
@@ -449,26 +447,6 @@ export function CPDashboard() {
                     />
                   </div>
                 </div>
-
-                {/* <Button
-                  color="primary"
-                  size="sm"
-                  onClick={() => {
-                    setDateFilter('');
-                    setSelectedDate('');
-                  }}
-                >
-                  Clear date filter
-                </Button>
-
-                <Input
-                  type="date"
-                  placeholder="Select Date"
-                  className={styles.dateFilter}
-                  value={selectedDate}
-                  onChange={e => setSelectedDate(e.target.value)}
-                  style={{ marginTop: '10px' }}
-                /> */}
               </div>
 
               <div className={styles.filterItem}>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 38841477d1..9e6c11c4c0 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -193,17 +193,6 @@
   color-scheme: dark;
 }
 
-
-/* .darkSidebar :global(.react-datepicker-wrapper input) {
-  background-color: #000000;
-  color: #ffffff;
-  border: 2px solid #4da3ff;
-} */
-
-.darkSidebar :global(.react-datepicker-wrapper input::placeholder) {
-  color: #ffffff;
-}
-
 .filterSection h4 {
   font-size: 1.8rem;
   color: #2c3e50;
@@ -429,11 +418,6 @@
   font-size: 1rem;
   transition: all 0.3s ease;
 }
-/* .darkSidebar .dateFilterContainer :global(input) {
-  background-color: #000000;
-  color: #ffffff;
-  border: 1px solid #4a6572;
-} */
 
 .darkSidebar :global(.react-datepicker__input-container input) {
   background-color: #000000 !important;

From 85afae1610339232c9e08d5ca4090f4f8c9d48d2 Mon Sep 17 00:00:00 2001
From: somramnani <som.ramnani@gmail.com>
Date: Fri, 27 Mar 2026 16:22:02 -0400
Subject: [PATCH 7/7] refactor(CPDashboard): remove extra dateFilter class

---
 src/components/CommunityPortal/CPDashboard.module.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 9e6c11c4c0..f77bf4364c 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -253,10 +253,6 @@
   margin-bottom: 8px;
 }
 
-.dateFilter {
-  margin-top: 10px;
-}
-
 .dateFilter:focus {
   border-color: #2c3e50;
   box-shadow: 0 0 5px rgba(44, 62, 80, 0.4);
@@ -439,6 +435,7 @@
   margin-top: 5px;
 }
 
+
 .paginationContainer {
   margin-top: 20px;
   display: flex;