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,9 +180,17 @@ const DetailDevice = (props) => {
 
     const [period, setPeriod] = useState({
         period: undefined,
+    });
+
+    useEffect(() => {
+        if (period.period !== 'custom') {
+            setFormData((prev) => ({
+                ...prev,
                 start_date: null,
                 end_date: null,
-    });
+            }));
+        }
+    }, [period.period]);
 
     const handleMonthly = (field, value) => {
         setPeriod((prev) => ({
@@ -446,24 +460,23 @@ 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)
                                 }
                                 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 +488,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 +509,7 @@ const DetailDevice = (props) => {
                                 onClick={() =>
                                     setFormData((prev) => ({
                                         ...prev,
-                                        reminder_at: null,
+                                        reminder_at_monthly: null,
                                     }))
                                 }
                             >