refactor(FE): Validate date range and show toast on error

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -60,6 +60,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   >(null);
   const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
   const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
+  const [dateErrorShown, setDateErrorShown] = useState(false);
+  const [hasDateError, setHasDateError] = useState(false);
 
   const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
     []
@@ -161,7 +163,12 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     setAppliedFilterByType(null);
     setAppliedFilterStartDate('');
     setAppliedFilterEndDate('');
-  }, []);
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+  }, [dateErrorShown]);
 
   const handleApplyFilters = useCallback(() => {
     setAppliedFilterCustomer(filterCustomer);
@@ -179,6 +186,67 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     filterEndDate,
   ]);
 
+  const handleStartDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setFilterStartDate(value);
+
+      if (value && filterEndDate) {
+        const startDate = new Date(value);
+        const endDateObj = new Date(filterEndDate);
+
+        if (endDateObj < startDate) {
+          setHasDateError(true);
+          if (!dateErrorShown) {
+            toast.error('Tanggal akhir tidak boleh masa lampau', {
+              duration: Infinity,
+            });
+            setDateErrorShown(true);
+          }
+        } else {
+          setHasDateError(false);
+          if (dateErrorShown) {
+            toast.dismiss();
+            setDateErrorShown(false);
+          }
+        }
+      } else {
+        setHasDateError(false);
+      }
+    },
+    [filterEndDate, dateErrorShown]
+  );
+
+  const handleEndDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setFilterEndDate(value);
+
+      if (value && filterStartDate) {
+        const startDateObj = new Date(filterStartDate);
+        const endDate = new Date(value);
+
+        if (endDate < startDateObj) {
+          setHasDateError(true);
+          if (!dateErrorShown) {
+            toast.error('Tanggal akhir tidak boleh masa lampau', {
+              duration: Infinity,
+            });
+            setDateErrorShown(true);
+          }
+          return;
+        }
+      }
+
+      setHasDateError(false);
+      if (dateErrorShown) {
+        toast.dismiss();
+        setDateErrorShown(false);
+      }
+    },
+    [filterStartDate, dateErrorShown]
+  );
+
   // ===== ACTIVE FILTERS COUNT =====
   const activeFiltersCount = useMemo(() => {
     let count = 0;
@@ -872,9 +940,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               <DateInput
                 name='start_date'
                 value={filterStartDate}
-                onChange={(e) => {
-                  setFilterStartDate(e.target.value);
-                }}
+                onChange={handleStartDateChange}
                 className={{ wrapper: 'w-full' }}
                 isNestedModal
               />
@@ -883,9 +949,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               <DateInput
                 name='end_date'
                 value={filterEndDate}
-                onChange={(e) => {
-                  setFilterEndDate(e.target.value);
-                }}
+                onChange={handleEndDateChange}
                 className={{ wrapper: 'w-full' }}
                 isNestedModal
               />
@@ -951,6 +1015,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           <Button
             className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
             onClick={handleApplyFilters}
+            disabled={hasDateError}
           >
             Apply Filter
           </Button>