fix(date): auto detect start_date & end_date

src/pages/master/device/component/DetailDevice.jsx

@@ -183,20 +183,50 @@ const DetailDevice = (props) => {
     });
 
     useEffect(() => {
-        if (period.period !== 'custom') {
+        if (formData.start_date && formData.end_date) {
-            setFormData((prev) => ({
+            const start = dayjs(formData.start_date);
-                ...prev,
+            const end = dayjs(formData.end_date);
-                start_date: null,
+
-                end_date: null,
+            let periodValue = 'custom';
-            }));
+
+            if (end.isSame(start.add(1, 'month').subtract(1, 'day'), 'day')) {
+                periodValue = '1';
+            } else if (end.isSame(start.add(3, 'month').subtract(1, 'day'), 'day')) {
+                periodValue = '3';
+            } else if (end.isSame(start.add(6, 'month').subtract(1, 'day'), 'day')) {
+                periodValue = '6';
             }
-    }, [period.period]);
+
+            setPeriod({
+                period: periodValue,
+            });
+        }
+    }, [formData.start_date, formData.end_date]);
 
     const handleMonthly = (field, value) => {
         setPeriod((prev) => ({
             ...prev,
             [field]: value,
         }));
+
+        if (value !== 'custom') {
+            const months = Number(value);
+
+            const startDate = dayjs().startOf('day');
+            const endDate = startDate.add(months, 'month').subtract(1, 'day').endOf('day');
+
+            setFormData((prev) => ({
+                ...prev,
+                start_date: startDate.toISOString(),
+                end_date: endDate.toISOString(),
+            }));
+        } else {
+            setFormData((prev) => ({
+                ...prev,
+                start_date: null,
+                end_date: null,
+            }));
+        }
     };
 
     useEffect(() => {
@@ -464,6 +494,11 @@ const DetailDevice = (props) => {
                                 onChange={(date) =>
                                     handleDateChange('start_date', date ? date.toISOString() : null)
                                 }
+                                disabledDate={(current) =>
+                                    formData.end_date &&
+                                    current &&
+                                    current.isAfter(dayjs(formData.end_date), 'day')
+                                }
                                 style={{ flex: 1 }}
                             />