Merge pull request 'fix(notif): fixing for notification Monthly' (#57) from lavoce into main

Reviewed-on: #57

src/api/notification.jsx

@@ -91,6 +91,25 @@ const searchData = async (queryParams) => {
     return response.data;
 };
 
+// Reminder Monthly
+const reminderMonthly = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `notifikasi-wa/reminder-monthly/${id}`,
+        params: queryParams,
+    });
+    return response.data;
+};
+
+const reminderCustom= async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `notifikasi-wa/reminder-custom/${id}`,
+        params: queryParams,
+    });
+    return response.data;
+};
+
 export {
     getAllNotification,
     getNotificationById,
@@ -102,4 +121,6 @@ export {
     resendChatByUser,
     resendChatAllUser,
     searchData,
+    reminderMonthly,
+    reminderCustom,
 };

src/components/Global/ToastNotif.jsx

@@ -20,6 +20,19 @@ const NotifOk = ({ icon, title, message }) => {
     });
 };
 
+const NotifSmall = ({ icon, title, message }) => {
+    Swal.fire({
+        toast: true,
+        position: 'top-end',
+        icon: icon,
+        title: title,
+        text: message,
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+    });
+};
+
 const NotifConfirmDialog = ({
     icon,
     title,
@@ -67,4 +80,4 @@ const QuestionConfirmSubmit = ({ icon, title, message, onConfirm, onCancel }) =>
     });
 };
 
-export { NotifAlert, NotifOk, NotifConfirmDialog, QuestionConfirmSubmit };
+export { NotifAlert, NotifOk, NotifSmall, NotifConfirmDialog, QuestionConfirmSubmit };

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

@@ -10,8 +10,9 @@ import {
     Select,
     DatePicker,
 } from 'antd';
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { NotifAlert, NotifOk, NotifSmall } from '../../../../components/Global/ToastNotif';
 import { createDevice, updateDevice } from '../../../../api/master-device';
+import { reminderMonthly, reminderCustom } from '../../../../api/notification';
 import { getAllBrands } from '../../../../api/master-brand';
 import { validateRun } from '../../../../Utils/validate';
 import { toApiDateFormatter } from '../../../../components/Global/Formatter';
@@ -35,8 +36,12 @@ 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,
+        period: null,
     };
 
     const [formData, setFormData] = useState(defaultData);
@@ -82,6 +87,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.period !== 'custom' ? formData.reminder_at_monthly : null,
+                start_date: formData.start_date,
+                end_date: formData.end_date,
             };
 
             console.log(payload);
@@ -90,6 +98,13 @@ const DetailDevice = (props) => {
                 ? await updateDevice(formData.device_id, payload)
                 : await createDevice(payload);
 
+            const response2 = formData.period !== 'custom'
+                ? await updateDevice(formData.device_id, { reminder_at_monthly: formData.reminder_at_monthly,})
+                : await updateDevice(formData.device_id, {
+                                                            start_date: formData.start_date, 
+                                                            end_date: formData.end_date,
+                                                        });
+
             // Check if response is successful
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                 const deviceName = response.data?.device_name || formData.device_name;
@@ -110,6 +125,25 @@ const DetailDevice = (props) => {
                     message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
                 });
             }
+
+            // Check if response Reminder At(Monthly) or Period are successful
+            const tipe = formData.period !== 'custom' ? 'Reminder At(Monthly)' : 'Period';
+            if (response2 && (response2.statusCode === 200 || response2.statusCode === 201)) {
+                NotifSmall({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `${tipe} berhasil disimpan`,
+                });
+            } else {
+                NotifSmall({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message:
+                        response?.message ||
+                        `Terjadi kesalahan saat menyimpan ${tipe}`,
+                });
+            }
+
         } catch (error) {
             console.error('Save Device Error:', error);
             NotifAlert({
@@ -172,19 +206,56 @@ const DetailDevice = (props) => {
         }
     };
 
-    const [period, setPeriod] = useState({
+    useEffect(() => {
-        period: undefined,
+        if (formData.start_date && formData.end_date) {
-        start_date: null,
+            const start = dayjs(formData.start_date);
-        end_date: null,
+            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';
+            }
+
+            setFormData((prev) => ({
+                ...prev,
+                period: periodValue,
+            }));
+        }
+    }, [formData.start_date, formData.end_date]);
 
     const handleMonthly = (field, value) => {
-        setPeriod((prev) => ({
+    setFormData((prev) => {
+        const data = {
             ...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');
+
+            data.start_date = startDate.toISOString();
+            data.end_date = endDate.toISOString();
+            data.reminder_at_monthly = null;
+        } else {
+            data.start_date = null;
+            data.end_date = null;
+        }
+
+        return data;
+    });
+};
+
     useEffect(() => {
         if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
             fetchBrands();
@@ -431,7 +502,7 @@ const DetailDevice = (props) => {
                         <Text style={{ color: 'red' }}> *</Text>
 
                         <Select
-                            value={period.period}
+                            value={formData.period}
                             onChange={(value) => handleMonthly('period', value)}
                             placeholder="Select Period"
                             style={{ width: '100%' }}
@@ -442,29 +513,37 @@ const DetailDevice = (props) => {
                             <Select.Option value="custom">Custom</Select.Option>
                         </Select>
                     </div>
-                    {period.period === 'custom' && (
+                    {formData.period === 'custom' && (
                         <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) => ({
+                                    handleDateChange('start_date', date ? date.toISOString() : null)
-                                        ...prev,
-                                        start_date: date ? date.toISOString() : null,
-                                    }))
                                 }
+                                disabledDate={(current) =>
+                                    formData.end_date &&
+                                    current &&
+                                    current.isAfter(dayjs(formData.end_date), 'day')
+                                }
+                                format="DD-MM-YYYY HH:mm"
+                                showTime={{ format: 'HH:mm' }}
                                 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) => ({
+                                    handleDateChange('end_date', date ? date.toISOString() : null)
-                                        ...prev,
-                                        end_date: date ? date.toISOString() : null,
-                                    }))
                                 }
+                                disabledDate={(current) =>
+                                    formData.start_date &&
+                                    current &&
+                                    current.isBefore(dayjs(formData.start_date), 'day')
+                                }
+                                format="DD-MM-YYYY HH:mm"
+                                showTime={{ format: 'HH:mm' }}
                                 style={{ flex: 1 }}
                             />
                         </div>
@@ -473,15 +552,15 @@ const DetailDevice = (props) => {
                         <Text strong>Reminder At(Monthly)</Text>
                         <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                             <DatePicker
-                                disabled={period.period === 'custom'}
+                                disabled={formData.period === 'custom'}
                                 value={
-                                    formData.reminder_at
+                                    formData.reminder_at_monthly
-                                        ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
+                                        ? dayjs(formData.reminder_at_monthly) // ✅ langsung parse ISO
                                         : null
                                 }
                                 onChange={(date) =>
                                     handleDateChange(
-                                        'reminder_at',
+                                        'reminder_at_monthly',
                                         date ? date.toISOString() : null
                                     )
                                 }
@@ -491,12 +570,12 @@ const DetailDevice = (props) => {
                             />
 
                             <Button
-                                disabled={period.period === 'custom'}
+                                disabled={formData.period === 'custom'}
                                 danger
                                 onClick={() =>
                                     setFormData((prev) => ({
                                         ...prev,
-                                        reminder_at: null,
+                                        reminder_at_monthly: null,
                                     }))
                                 }
                             >