Merge pull request #4426 from OneCommunityGlobal/aseem-jobposting-analytics-custom-date-filter-state-handling

Aseem jobposting analytics custom date filter state handling

Author: one-community

src/components/ApplicantsChart/ApplicantsChart.module.css

@@ -91,6 +91,11 @@
   color: #9ca3af !important;
   opacity: 1 !important;
 }
+.disabledDay {
+  color: #9ca3af !important;      /* gray */
+  pointer-events: none;
+  cursor: not-allowed;
+}
 
 :global(.text-light) :global(.hgn-datepicker-dark):focus,
 :global(.text-light) :global(.hgn-datepicker-dark):focus input,

src/components/ApplicantsChart/TimeFilter.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import styles from './ApplicationChart.module.css';
@@ -8,21 +8,31 @@ function TimeFilter({ onFilterChange, darkMode }) {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
   const [error, setError] = useState('');
+  const prevOptionRef = useRef(selectedOption); // To track previous selected filter option
 
   useEffect(() => {
+    if (selectedOption === 'custom' && prevOptionRef.current !== 'custom') {
+      // Reset custom dates when switching to custom
+      setStartDate(null);
+      setEndDate(null);
+    }
+
     if (selectedOption === 'custom' && startDate && endDate) {
       if (startDate > endDate) {
         setError('Start date cannot be after end date.');
-        return;
       } else {
         setError('');
       }
     } else {
       setError('');
     }
 
+    // Updated parent with current filter state
     onFilterChange({ selectedOption, startDate, endDate, error: '' });
-  }, [selectedOption, startDate, endDate]); // Removed onFilterChange from dependencies
+
+    prevOptionRef.current = selectedOption; // Updatse previous option
+  }, [selectedOption, startDate, endDate]);
+  // Removed onFilterChange from dependencies
 
   return (
     <div className={`${styles.TimeFilter}`}>

src/components/ApplicantsChart/index.jsx

@@ -14,6 +14,8 @@ function ApplicantsDashboard() {
   const [compareLabel, setCompareLabel] = useState('last week');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
 
   // dark mode from Redux
   const darkMode = useSelector(state => state.theme.darkMode);
@@ -216,8 +218,20 @@ function ApplicantsDashboard() {
         <span style={{ color: darkMode ? '#e5e7eb' : '#000' }}>to</span>
         <DatePicker
           selected={endDate}
-          onChange={handleEndDateChange}
+          onChange={date => {
+            if (!date) return;
+
+            const selected = new Date(date);
+            selected.setHours(0, 0, 0, 0);
+
+            if (selected > today) return; //  block future dates
+
+            handleEndDateChange(selected);
+          }}
           placeholderText="End Date"
+          maxDate={today}
+          filterDate={date => date <= today}
+          dayClassName={date => (date > today ? styles.disabledDay : undefined)}
           {...getDatePickerProps()}
         />
       </>