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

@@ -35,8 +35,11 @@ const DetailDevice = (props) => {
         device_location: '',
         device_description: '',
         ip_address: '',
-        reminder_at: null,
         listen_channel: null,
+        reminder_at: null,
+        reminder_at_monthly: null,
+        start_date: null,
+        end_date: null,
     };
 
     const [formData, setFormData] = useState(defaultData);
@@ -82,6 +85,9 @@ const DetailDevice = (props) => {
                 listen_channel: formData.listen_channel,
                 listen_channel_reminder: formData.listen_channel_reminder,
                 reminder_at: formData.reminder_at,
+                reminder_at_monthly: formData.reminder_at_monthly,
+                start_date: formData.start_date,
+                end_date: formData.end_date,
             };
 
             console.log(payload);
@@ -174,15 +180,53 @@ const DetailDevice = (props) => {
 
     const [period, setPeriod] = useState({
         period: undefined,
-        start_date: null,
-        end_date: null,
     });
 
+    useEffect(() => {
+        if (formData.start_date && formData.end_date) {
+            const start = dayjs(formData.start_date);
+            const end = dayjs(formData.end_date);
+
+            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';
+            }
+
+            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(() => {
@@ -446,24 +490,28 @@ const DetailDevice = (props) => {
                         <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
                             <DatePicker
                                 placeholder="Start Date"
-                                value={period.start_date ? dayjs(period.start_date) : null}
+                                value={formData.start_date ? dayjs(formData.start_date) : null}
                                 onChange={(date) =>
-                                    setPeriod((prev) => ({
-                                        ...prev,
-                                        start_date: date ? date.toISOString() : null,
-                                    }))
+                                    handleDateChange('start_date', date ? date.toISOString() : null)
+                                }
+                                disabledDate={(current) =>
+                                    formData.end_date &&
+                                    current &&
+                                    current.isAfter(dayjs(formData.end_date), 'day')
                                 }
                                 style={{ flex: 1 }}
                             />
 
                             <DatePicker
                                 placeholder="End Date"
-                                value={period.end_date ? dayjs(period.end_date) : null}
+                                value={formData.end_date ? dayjs(formData.end_date) : null}
                                 onChange={(date) =>
-                                    setPeriod((prev) => ({
-                                        ...prev,
-                                        end_date: date ? date.toISOString() : null,
-                                    }))
+                                    handleDateChange('end_date', date ? date.toISOString() : null)
+                                }
+                                disabledDate={(current) =>
+                                    formData.start_date &&
+                                    current &&
+                                    current.isBefore(dayjs(formData.start_date), 'day')
                                 }
                                 style={{ flex: 1 }}
                             />
@@ -475,13 +523,13 @@ const DetailDevice = (props) => {
                             <DatePicker
                                 disabled={period.period === 'custom'}
                                 value={
-                                    formData.reminder_at
-                                        ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
+                                    formData.reminder_at_monthly
+                                        ? dayjs(formData.reminder_at_monthly) // ✅ langsung parse ISO
                                         : null
                                 }
                                 onChange={(date) =>
                                     handleDateChange(
-                                        'reminder_at',
+                                        'reminder_at_monthly',
                                         date ? date.toISOString() : null
                                     )
                                 }
@@ -496,7 +544,7 @@ const DetailDevice = (props) => {
                                 onClick={() =>
                                     setFormData((prev) => ({
                                         ...prev,
-                                        reminder_at: null,
+                                        reminder_at_monthly: null,
                                     }))
                                 }
                             >