fix(CPDashboard): fix merge issues with DatePicker

Author: somramnani

src/components/CommunityPortal/CPDashboard.jsx

@@ -3,11 +3,15 @@ import { Container, Row, Col, Card, CardBody, Button, Input } from 'reactstrap';
 import styles from './CPDashboard.module.css';
 import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt } from 'react-icons/fa';
 import { ENDPOINTS } from '../../utils/URL';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import axios from 'axios';
 
 export function CPDashboard() {
   const [events, setEvents] = useState([]);
   const [search, setSearch] = useState('');
+  const [selectedDate, setSelectedDate] = useState('');
+  const [dateError, setDateError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [pagination, setPagination] = useState({
@@ -17,6 +21,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';
 
@@ -120,7 +137,22 @@ export function CPDashboard() {
                     <Input type="radio" name="dates" /> This Weekend
                   </div>
                 </div>
-                <Input type="date" placeholder="Ending After" className={styles['date-filter']} />
+                {/* <Input type="date" placeholder="Ending After" className={styles['date-filter']} /> */}
+                <div style={{ width: '100%' }}>
+                  <DatePicker
+                    selected={selectedDate}
+                    onChange={date => handleDateChange(date)}
+                    placeholderText="Ending After"
+                    id="ending-after"
+                    className={styles['date-filter']}
+                    style={{ width: '100%' }}
+                  />
+                  {dateError && (
+                    <p className="date-error-message" style={{ color: 'red', marginTop: '5px' }}>
+                      {dateError}
+                    </p>
+                  )}
+                </div>
               </div>
               <div className={styles['filter-item']}>
                 <label htmlFor="online-only">Online</label>