feat(month): add monthy selection

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

@@ -172,6 +172,19 @@ const DetailDevice = (props) => {
         }
     };
 
+    const [period, setPeriod] = useState({
+        period: undefined,
+        start_date: null,
+        end_date: null,
+    });
+
+    const handleMonthly = (field, value) => {
+        setPeriod((prev) => ({
+            ...prev,
+            [field]: value,
+        }));
+    };
+
     useEffect(() => {
         if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
             fetchBrands();
@@ -381,7 +394,7 @@ const DetailDevice = (props) => {
                         </div>
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Reminder At</Text>
+                        <Text strong>Reminder At(Yearly)</Text>
                         <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                             <DatePicker
                                 value={
@@ -413,6 +426,84 @@ const DetailDevice = (props) => {
                             </Button>
                         </div>
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Period</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+
+                        <Select
+                            value={period.period}
+                            onChange={(value) => handleMonthly('period', value)}
+                            placeholder="Select Period"
+                            style={{ width: '100%' }}
+                        >
+                            <Select.Option value="1">1 Monthly</Select.Option>
+                            <Select.Option value="3">3 Monthly</Select.Option>
+                            <Select.Option value="6">6 Monthly</Select.Option>
+                            <Select.Option value="custom">Custom</Select.Option>
+                        </Select>
+                    </div>
+                    {period.period === 'custom' && (
+                        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+                            <DatePicker
+                                placeholder="Start Date"
+                                value={period.start_date ? dayjs(period.start_date) : null}
+                                onChange={(date) =>
+                                    setPeriod((prev) => ({
+                                        ...prev,
+                                        start_date: date ? date.toISOString() : null,
+                                    }))
+                                }
+                                style={{ flex: 1 }}
+                            />
+
+                            <DatePicker
+                                placeholder="End Date"
+                                value={period.end_date ? dayjs(period.end_date) : null}
+                                onChange={(date) =>
+                                    setPeriod((prev) => ({
+                                        ...prev,
+                                        end_date: date ? date.toISOString() : null,
+                                    }))
+                                }
+                                style={{ flex: 1 }}
+                            />
+                        </div>
+                    )}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Reminder At(Monthly)</Text>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                            <DatePicker
+                                disabled={period.period === 'custom'}
+                                value={
+                                    formData.reminder_at
+                                        ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
+                                        : null
+                                }
+                                onChange={(date) =>
+                                    handleDateChange(
+                                        'reminder_at',
+                                        date ? date.toISOString() : null
+                                    )
+                                }
+                                format="DD-MM-YYYY HH:mm"
+                                showTime={{ format: 'HH:mm' }}
+                                style={{ flex: 1 }}
+                            />
+
+                            <Button
+                                disabled={period.period === 'custom'}
+                                danger
+                                onClick={() =>
+                                    setFormData((prev) => ({
+                                        ...prev,
+                                        reminder_at: null,
+                                    }))
+                                }
+                            >
+                                Clear
+                            </Button>
+                        </div>
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Description</Text>
                         <TextArea