Merge pull request #4428 from OneCommunityGlobal/som-fix/ending-after-figma-mismatch

Som - fix(DatePicker): add "Ending After" date picker to search filters in CPDashboard.jsx

Author: one-community

src/components/CommunityPortal/CPDashboard.jsx

@@ -15,6 +15,9 @@ import {
 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';
 import { fuzzySearch } from '../../utils/fuzzySearch';
@@ -92,6 +95,18 @@ 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;
+    }
+    setSelectedDate(date);
+  };
+
   const FALLBACK_IMG =
     'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60';
 
@@ -410,26 +425,31 @@ export function CPDashboard() {
                     </Label>
                   </FormGroup>
                 </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 className={styles.dashboardActions}>
+                  <Button
+                    color="primary"
+                    onClick={() => {
+                      setDateFilter('');
+                      setSelectedDate('');
+                    }}
+                  >
+                    Clear date filter
+                  </Button>
+                </div>
+                <div className={styles.filterItem}>
+                  <div className={styles.dateFilterContainer}>
+                    <DatePicker
+                      type="date"
+                      selected={selectedDate ? new Date(selectedDate) : null}
+                      onChange={handleDateChange}
+                      placeholderText="Ending After"
+                      id="ending-after"
+                      className={styles.dateFilter}
+                      dateFormat="yyyy-MM-dd"
+                      isClearable
+                    />
+                  </div>
+                </div>
               </div>
 
               <div className={styles.filterItem}>

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);
@@ -396,6 +392,50 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
+.dateFilter {
+  padding-left: 10px;
+  margin-top: 15px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.dateFilterContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px 20px;
+}
+.dateFilterContainer :global(.react-datepicker-wrapper) input {
+  border: 2px solid #1b3c55; 
+  border-radius: 8px;
+  padding: 8px 12px;
+  width: 100%;
+  outline: none;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.darkSidebar :global(.react-datepicker__input-container input) {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border: 2px solid #4da3ff !important;
+}
+
+.darkSidebar :global(.react-datepicker__input-container input::placeholder) {
+  color: #ffffff !important;
+}
+
+.dateFilterContainer :global(.react-datepicker-wrapper) input:focus {
+  border-color: #34495e;
+  box-shadow: 0 0 5px rgba(44, 62, 80, 0.4);
+}
+
+.dateErrorMessage {
+  color: red;
+  margin-top: 5px;
+}
+
+
 .paginationContainer {
   margin-top: 20px;
   display: flex;