From c22000437b1f354d48d90cb7e48444942cc0257c Mon Sep 17 00:00:00 2001
From: zain_arif <zainul.arifin94@gmail.com>
Date: Wed, 24 Jun 2026 16:20:16 +0700
Subject: [PATCH 1/2] fix(monthly): adjustments in the frontend.

---
 .../master/device/component/DetailDevice.jsx  | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/pages/master/device/component/DetailDevice.jsx b/src/pages/master/device/component/DetailDevice.jsx
index 5550d4b..1a1902e 100644
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/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,10 +180,18 @@ const DetailDevice = (props) => {
 
     const [period, setPeriod] = useState({
         period: undefined,
-        start_date: null,
-        end_date: null,
     });
 
+    useEffect(() => {
+        if (period.period !== 'custom') {
+            setFormData((prev) => ({
+                ...prev,
+                start_date: null,
+                end_date: null,
+            }));
+        }
+    }, [period.period]);
+
     const handleMonthly = (field, value) => {
         setPeriod((prev) => ({
             ...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,
                                     }))
                                 }
                             >
-- 
2.49.1


From 51e2fa46bf6d9598c244569b167249060d35fec2 Mon Sep 17 00:00:00 2001
From: zain_arif <zainul.arifin94@gmail.com>
Date: Thu, 25 Jun 2026 13:39:48 +0700
Subject: [PATCH 2/2] fix(date): auto detect start_date & end_date

---
 .../master/device/component/DetailDevice.jsx  | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/pages/master/device/component/DetailDevice.jsx b/src/pages/master/device/component/DetailDevice.jsx
index 1a1902e..86db821 100644
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/src/pages/master/device/component/DetailDevice.jsx
@@ -183,20 +183,50 @@ const DetailDevice = (props) => {
     });
 
     useEffect(() => {
-        if (period.period !== 'custom') {
-            setFormData((prev) => ({
-                ...prev,
-                start_date: null,
-                end_date: null,
-            }));
+        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,
+            });
         }
-    }, [period.period]);
+    }, [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 }}
                             />
 
-- 
2.49.1