fix(notif): fixing for notification Monthly

.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-*.config
 
 node_modules
 dist

public/web.config

@@ -3,7 +3,7 @@
     <system.webServer>
         <rewrite>
             <rules>
-                <rule name="CallOfDuty">
+                <rule name="reactViteSypiu">
                     <match url=".*" />
                     <conditions logicalGrouping="MatchAll">
                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

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/AppInput.jsx

@@ -0,0 +1,52 @@
+import { Input } from "antd";
+import { useEffect, useState, useRef } from "react";
+
+const InputNumber = ({ 
+    name,
+    value = 0,
+    onChange,
+    ...props
+}) => {
+    const [inputValue, setInputValue] = useState(
+        value !== null && value !== undefined ? value.toString() : ''
+    );
+
+    useEffect(() => {
+        const newValue = value !== null && value !== undefined ? value.toString() : '';
+        setInputValue(newValue);
+    }, [value]);
+
+    const handleChange = (e) => {
+        const rawValue = e.target.value;
+        if (/^\d*$/.test(rawValue)) {
+            setInputValue(rawValue);
+            const numValue = rawValue === '' ? 0 : parseInt(rawValue, 10);
+            
+            // Kirim event object sintetis yang konsisten dengan handler biasa
+            onChange?.({
+                target: {
+                    name: name,
+                    value: numValue
+                }
+            });
+        }
+    };
+
+    const handleFocus = (e) => {
+        // Pilih semua teks saat fokus (opsional)
+        e.target.select();
+    };
+
+    return (
+        <Input
+            {...props}
+            name={name} // Teruskan name ke input
+            value={inputValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            style={{ textAlign: 'left' }}
+        />
+    );
+};
+
+export { InputNumber };

src/components/Global/MqttConnection.jsx

@@ -103,14 +103,12 @@ const handleBoolean = (svg, el, value) => {
     const els2 = svg.querySelectorAll(`#${id2}`);
 
     if (!els1 || !els2) return;
-    // balik arah khusus untuk airdryerA
-    if (dryerIds.slice(0, 2).includes(el.id)) value = !value;
 
     els1.forEach(el => {
-        el.style.fill = value ? 'rgb(255, 204, 63)' : 'rgb(216,216,216)';
+        el.style.fill = value ? 'rgb(216,216,216)' : 'rgb(255, 204, 63)';
     });
     els2.forEach(el => {
-        el.style.fill = value ? 'rgb(216,216,216)' : 'rgb(255, 204, 63)';
+        el.style.fill = value ? 'rgb(255, 204, 63)' : 'rgb(216,216,216)';
     });
 };
 

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/contact/component/DetailContact.jsx

@@ -13,6 +13,7 @@ const DetailContact = memo(function DetailContact(props) {
         id: '',
         name: '',
         phone: '',
+        email: '',
         is_active: true,
     };
 
@@ -34,6 +35,22 @@ const DetailContact = memo(function DetailContact(props) {
                 [name]: value,
             }));
         }
+
+        if (name === 'email') {
+            const email = value.trim();
+            setFormData((prev) => ({
+                ...prev,
+                [name]: email,
+            }));
+
+            setErrors((prev) => ({
+                ...prev,
+                email:
+                    email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+                        ? 'Format email tidak valid'
+                        : '',
+            }));
+        }
     };
 
   
@@ -51,6 +68,7 @@ const DetailContact = memo(function DetailContact(props) {
         const validationRules = [
             { field: 'name', label: 'Contact Name', required: true },
             { field: 'phone', label: 'Phone', required: true },
+            { field: 'email', label: 'Email', required: false },
         ];
 
         if (
@@ -84,10 +102,23 @@ const DetailContact = memo(function DetailContact(props) {
             return;
         }
 
+        // Validasi Email
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (formData.email && !emailRegex.test(formData.email.trim())) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Format email tidak valid.',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
         try {
             const contactData = {
                 contact_name: formData.name,
                 contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
+                email: formData.email?.trim(),
                 is_active: formData.is_active,
             };
 
@@ -134,6 +165,7 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: props.selectedData.contact_name || props.selectedData.name,
                     phone: props.selectedData.contact_phone || props.selectedData.phone,
+                    email: props.selectedData.contact_email || props.selectedData.email,
                     is_active:
                         props.selectedData.is_active || props.selectedData.status === 'active',
                 });
@@ -141,6 +173,7 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: '',
                     phone: '',
+                    email: '',
                     is_active: true,
                 });
             }
@@ -249,6 +282,19 @@ const DetailContact = memo(function DetailContact(props) {
                         style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
                     />
                 </div>
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Email</Text>
+                    {/* <Text style={{ color: 'red' }}> *</Text> */}
+                    <Input
+                        name="email"
+                        value={formData.email}
+                        onChange={handleInputChange}
+                        placeholder="Enter Email Number"
+                        readOnly={props.readOnly}
+                        maxLength={64}
+                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
+                    />
+                </div>
                 {/* Contact Type */}
                 {/* <div style={{ marginBottom: 12 }}>
                     <Text strong>Contact Type</Text>

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

@@ -1,9 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import {
+    Modal,
+    Input,
+    Divider,
+    Typography,
+    Switch,
+    Button,
+    ConfigProvider,
+    Select,
+    DatePicker,
+} from 'antd';
+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';
+import dayjs from 'dayjs';
 
 const { Text } = Typography;
 const { TextArea } = Input;
@@ -23,7 +36,12 @@ const DetailDevice = (props) => {
         device_location: '',
         device_description: '',
         ip_address: '',
-        listen_channel: '',
+        listen_channel: null,
+        reminder_at: null,
+        reminder_at_monthly: null,
+        start_date: null,
+        end_date: null,
+        period: null,
     };
 
     const [formData, setFormData] = useState(defaultData);
@@ -67,12 +85,26 @@ const DetailDevice = (props) => {
                 ip_address: formData.ip_address,
                 brand_id: formData.brand_id,
                 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);
+
             const response = formData.device_id
                 ? 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;
@@ -93,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({
@@ -128,6 +179,13 @@ const DetailDevice = (props) => {
         });
     };
 
+    const handleDateChange = (field, value) => {
+        setFormData({
+            ...formData,
+            [field]: value,
+        });
+    };
+
     // Fungsi untuk mengambil daftar brand
     const fetchBrands = async () => {
         setLoadingBrands(true);
@@ -148,6 +206,56 @@ const DetailDevice = (props) => {
         }
     };
 
+    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';
+            }
+
+            setFormData((prev) => ({
+                ...prev,
+                period: periodValue,
+            }));
+        }
+    }, [formData.start_date, formData.end_date]);
+
+    const handleMonthly = (field, value) => {
+    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();
@@ -218,9 +326,10 @@ const DetailDevice = (props) => {
                 </React.Fragment>,
             ]}
         >
+            <Divider />
             {formData && (
                 <div>
-                    <div>
+                    <div style={{ marginBottom: 12 }}>
                         <div>
                             <Text strong>Device Status</Text>
                         </div>
@@ -247,7 +356,7 @@ const DetailDevice = (props) => {
                             </div>
                         </div>
                     </div>
-                    <Divider style={{ margin: '12px 0' }} />
+                    {/* <Divider style={{ margin: '12px 0' }} /> */}
                     <div hidden>
                         <Text strong>Device ID</Text>
                         <Input
@@ -330,8 +439,12 @@ const DetailDevice = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Listen Channel</Text>
+                    <div style={{ marginBottom: 12 }}></div>
+                    <div style={{ marginBottom: 12 }}></div>
+                    <div style={{ display: 'flex', gap: 16 }}>
+                        <div style={{ flex: 1 }}>
+                            {' '}
+                            <Text strong>Channel Error</Text>
                             <Input
                                 name="listen_channel"
                                 value={formData.listen_channel}
@@ -340,6 +453,136 @@ const DetailDevice = (props) => {
                                 readOnly={props.readOnly}
                             />
                         </div>
+                        <div style={{ flex: 1 }}>
+                            <Text strong>Channel Reminder</Text>
+                            <Input
+                                name="listen_channel_reminder"
+                                value={formData.listen_channel_reminder}
+                                onChange={handleInputChange}
+                                placeholder="Enter Listen Channel Reminder"
+                                readOnly={props.readOnly}
+                            />
+                        </div>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Reminder At(Yearly)</Text>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                            <DatePicker
+                                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
+                                danger
+                                onClick={() =>
+                                    setFormData((prev) => ({
+                                        ...prev,
+                                        reminder_at: null,
+                                    }))
+                                }
+                            >
+                                Clear
+                            </Button>
+                        </div>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Period</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+
+                        <Select
+                            value={formData.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>
+                    {formData.period === 'custom' && (
+                        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+                            <DatePicker
+                                placeholder="Start Date"
+                                value={formData.start_date ? dayjs(formData.start_date) : null}
+                                onChange={(date) =>
+                                    handleDateChange('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={formData.end_date ? dayjs(formData.end_date) : null}
+                                onChange={(date) =>
+                                    handleDateChange('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>
+                    )}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Reminder At(Monthly)</Text>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                            <DatePicker
+                                disabled={formData.period === 'custom'}
+                                value={
+                                    formData.reminder_at_monthly
+                                        ? dayjs(formData.reminder_at_monthly) // ✅ langsung parse ISO
+                                        : null
+                                }
+                                onChange={(date) =>
+                                    handleDateChange(
+                                        'reminder_at_monthly',
+                                        date ? date.toISOString() : null
+                                    )
+                                }
+                                format="DD-MM-YYYY HH:mm"
+                                showTime={{ format: 'HH:mm' }}
+                                style={{ flex: 1 }}
+                            />
+
+                            <Button
+                                disabled={formData.period === 'custom'}
+                                danger
+                                onClick={() =>
+                                    setFormData((prev) => ({
+                                        ...prev,
+                                        reminder_at_monthly: null,
+                                    }))
+                                }
+                            >
+                                Clear
+                            </Button>
+                        </div>
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Description</Text>
                         <TextArea

src/pages/master/sparepart/component/DetailSparepart.jsx

@@ -11,6 +11,7 @@ import {
     Row,
     Col,
     Image,
+    Checkbox,
 } from 'antd';
 import { PlusOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
@@ -37,9 +38,68 @@ const DetailSparepart = (props) => {
     const [previewTitle, setPreviewTitle] = useState('');
     const [isHovering, setIsHovering] = useState(false);
 
+    const optionsMonthly = [
+        {
+            key: 1,
+            value: 1,
+            text: '1 Month',
+        },
+        {
+            key: 3,
+            value: 3,
+            text: '3 Month',
+        },
+        {
+            key: 6,
+            value: 6,
+            text: '6 Month',
+        },
+    ];
+
+    const optionsYearly = [
+        {
+            key: 1,
+            value: 1,
+            text: '1 Year',
+        },
+        {
+            key: 2,
+            value: 2,
+            text: '2 Year',
+        },
+        {
+            key: 3,
+            value: 3,
+            text: '3 Year',
+        },
+        {
+            key: 4,
+            value: 4,
+            text: '4 Year',
+        },
+        {
+            key: 5,
+            value: 5,
+            text: '5 Year',
+        },
+        {
+            key: 6,
+            value: 6,
+            text: '6 Year',
+        },
+    ];
+    const [checkedListM, setCheckedListM] = useState([]);
+    const [checkAllM, setCheckAllM] = useState(false);
+    const [indeterminateM, setIndeterminateM] = useState(false);
+
+    const [checkedList, setCheckedList] = useState([]);
+    const [checkAll, setCheckAll] = useState(false);
+    const [indeterminate, setIndeterminate] = useState(false);
+
     const defaultData = {
         sparepart_id: '',
         sparepart_name: '',
+        sparepart_number: '',
         sparepart_description: '',
         sparepart_model: '',
         sparepart_item_type: null,
@@ -236,6 +296,10 @@ const DetailSparepart = (props) => {
                 payload.sparepart_foto = imageUrl;
             }
 
+            payload.sparepart_number = formData.sparepart_number;
+            payload.sparepart_yearly = checkedList;
+            payload.sparepart_monthly = checkedListM;
+
             // console.log('Sending payload:', payload);
 
             const response = formData.sparepart_id
@@ -282,6 +346,36 @@ const DetailSparepart = (props) => {
         setFormData({ ...formData, [name]: value });
     };
 
+    const onChangeCheckboxM = (list) => {
+        setCheckedListM(list);
+
+        setIndeterminateM(!!list.length && list.length < optionsMonthly.length);
+        setCheckAllM(list.length === optionsMonthly.length);
+    };
+
+    const onCheckAllChangeM = (e) => {
+        const checked = e.target.checked;
+
+        setCheckedListM(checked ? optionsMonthly.map((item) => item.value) : []);
+        setIndeterminateM(false);
+        setCheckAllM(checked);
+    };
+
+    const onChangeCheckbox = (list) => {
+        setCheckedList(list);
+
+        setIndeterminate(!!list.length && list.length < optionsYearly.length);
+        setCheckAll(list.length === optionsYearly.length);
+    };
+
+    const onCheckAllChange = (e) => {
+        const checked = e.target.checked;
+
+        setCheckedList(checked ? optionsYearly.map((item) => item.value) : []);
+        setIndeterminate(false);
+        setCheckAll(checked);
+    };
+
     useEffect(() => {
         if (props.selectedData) {
             setFormData(props.selectedData);
@@ -318,9 +412,19 @@ const DetailSparepart = (props) => {
             } else {
                 setFileList([]);
             }
+            setCheckedListM(JSON.parse(props.selectedData.sparepart_monthly));
+            setCheckedList(JSON.parse(props.selectedData.sparepart_yearly));
         } else {
             setFormData(defaultData);
             setFileList([]);
+
+            setIndeterminateM(false);
+            setCheckedListM([]);
+            setCheckAllM(false);
+
+            setIndeterminate(false);
+            setCheckedList([]);
+            setCheckAll(false);
         }
     }, [props.showModal, props.selectedData, props.actionMode]);
 
@@ -333,6 +437,7 @@ const DetailSparepart = (props) => {
 
     return (
         <Modal
+            width="40rem"
             title={`${
                 props.actionMode === 'add'
                     ? 'Tambah'
@@ -463,7 +568,7 @@ const DetailSparepart = (props) => {
                                         <div
                                             style={{
                                                 width: '180px', // Fixed width for square
-                                                height: '180px',
+                                                height: '240px',
                                                 border: '1px dashed #d9d9d9',
                                                 borderRadius: '8px',
                                                 display: 'flex',
@@ -485,6 +590,17 @@ const DetailSparepart = (props) => {
                         {/* Kolom untuk field lainnya */}
                         <Col span={14}>
                             <Row gutter={[16, 16]}>
+                                <Col span={24}>
+                                    <Text strong>Part Number</Text>
+                                    <Text style={{ color: 'red' }}> *</Text>
+                                    <Input
+                                        name="sparepart_number"
+                                        value={formData.sparepart_number}
+                                        onChange={handleInputChange}
+                                        placeholder="Enter Sparepart Number"
+                                        readOnly={props.readOnly}
+                                    />
+                                </Col>
                                 <Col span={24}>
                                     <Text strong>Sparepart Name</Text>
                                     <Text style={{ color: 'red' }}> *</Text>
@@ -560,7 +676,78 @@ const DetailSparepart = (props) => {
                             />
                         </Col>
                     </Row>
+                    <ConfigProvider
+                        theme={{
+                            token: {
+                                colorPrimary: '#23A55A',
+                            },
+                        }}
+                    >
                         
+                        {/* Yearly */}
+                        <Row style={{ marginTop: 16 }}>
+                            <Col>
+                                <Checkbox
+                                    indeterminate={indeterminate}
+                                    onChange={onCheckAllChange}
+                                    checked={checkAll}
+                                >
+                                    {checkAll ? 'Unselect All Years' : 'Select All Years'}
+                                </Checkbox>
+                            </Col>
+                        </Row>
+                        <Row style={{ marginTop: 10 }}>
+                            <Col span={24}>
+                                <Checkbox.Group
+                                    value={checkedList}
+                                    onChange={onChangeCheckbox}
+                                    style={{
+                                        width: '100%',
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                    }}
+                                >
+                                    {optionsYearly.map((item) => (
+                                        <Checkbox key={item.key} value={item.value}>
+                                            {item.text}
+                                        </Checkbox>
+                                    ))}
+                                </Checkbox.Group>
+                            </Col>
+                        </Row>
+
+                        {/* Monthly */}
+                        <Row style={{ marginTop: 16 }}>
+                            <Col>
+                                <Checkbox
+                                    indeterminate={indeterminateM}
+                                    onChange={onCheckAllChangeM}
+                                    checked={checkAllM}
+                                >
+                                    {checkAllM ? 'Unselect All Months' : 'Select All Months'}
+                                </Checkbox>
+                            </Col>
+                        </Row>
+                        <Row style={{ marginTop: 10 }}>
+                            <Col span={24}>
+                                <Checkbox.Group
+                                    value={checkedListM}
+                                    onChange={onChangeCheckboxM}
+                                    style={{
+                                        width: '100%',
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                    }}
+                                >
+                                    {optionsMonthly.map((item) => (
+                                        <Checkbox key={item.key} value={item.value}>
+                                            {item.text}
+                                        </Checkbox>
+                                    ))}
+                                </Checkbox.Group>
+                            </Col>
+                        </Row>
+                    </ConfigProvider>
                     <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                         <Col span={24}>
                             <Text strong>Description</Text>

src/pages/master/sparepart/component/ListSparepart.jsx

@@ -36,6 +36,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'sparepart_name',
         width: '20%',
     },
+    {
+        title: 'Sparepart Number',
+        dataIndex: 'sparepart_number',
+        key: 'sparepart_number',
+        width: '20%',
+    },
     {
         title: 'Description',
         dataIndex: 'sparepart_description',
@@ -277,8 +283,8 @@ const ListSparepart = memo(function ListSparepart(props) {
                             onStockUpdate={doFilter}
                             onGetData={(data) => {
                                 if(data && data.length > 0) {
-                                    console.log('Sample sparepart data from API:', data[0]);
-                                    console.log('Available fields:', Object.keys(data[0] || {}));
+                                    // console.log('Sample sparepart data from API:', data[0]);
+                                    // console.log('Available fields:', Object.keys(data[0] || {}));
                                 }
                             }} // Log untuk debugging field-field yang tersedia
                         />

src/pages/notificationDetail/IndexNotificationDetail.jsx

@@ -102,6 +102,8 @@ const transformNotificationData = (apiData) => {
             brand_name: apiData.brand_name,
         },
         users: apiData.users || [],
+        is_reminder: apiData.is_reminder || false,
+        spareparts_reminder: apiData.spareparts_reminder || [],
     };
 };
 
@@ -353,7 +355,7 @@ const NotificationDetailTab = (props) => {
                             }}
                         >
                             <Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
-                                Error Notification Detail
+                                Notification Detail
                             </Typography.Title>
                         </div>
                     </div>
@@ -361,6 +363,8 @@ const NotificationDetailTab = (props) => {
                     <Space direction="vertical" size="small" style={{ width: '100%' }}>
                         <Row gutter={[8, 8]}>
                             {/* Kolom Kiri: Data Kompresor */}
+
+                            {notification.is_reminder == false && (
                                 <Col xs={24} lg={8}>
                                     <Card
                                         size="small"
@@ -413,7 +417,7 @@ const NotificationDetailTab = (props) => {
                                         </Space>
                                     </Card>
                                 </Col>
-
+                            )}
                             {/* Kolom Tengah: Informasi Teknis */}
                             <Col xs={24} lg={8}>
                                 <Card
@@ -458,6 +462,159 @@ const NotificationDetailTab = (props) => {
                                 </Card>
                             </Col>
 
+                            {notification.is_reminder == true && (
+                                <Col xs={24} md={8}>
+                                    <div>
+                                        <Card hoverable bodyStyle={{ padding: '12px' }}>
+                                            <Space>
+                                                <ToolOutlined
+                                                    style={{ fontSize: '16px', color: '#1890ff' }}
+                                                />
+                                                <Text
+                                                    strong
+                                                    style={{ fontSize: '16px', color: '#262626' }}
+                                                >
+                                                    Spare Part Reminder Maintenance
+                                                </Text>
+                                            </Space>
+
+                                            <Space
+                                                direction="vertical"
+                                                size="small"
+                                                style={{ width: '100%' }}
+                                            >
+                                                {notification.spareparts_reminder &&
+                                                notification.spareparts_reminder.length > 0 ? (
+                                                    notification.spareparts_reminder.map(
+                                                        (sparepart, index) => (
+                                                            <Card
+                                                                size="small"
+                                                                key={index}
+                                                                bodyStyle={{ padding: '12px' }}
+                                                                hoverable
+                                                            >
+                                                                <Row gutter={16} align="top">
+                                                                    <Col
+                                                                        span={7}
+                                                                        style={{
+                                                                            textAlign: 'center',
+                                                                        }}
+                                                                    >
+                                                                        <div
+                                                                            style={{
+                                                                                width: '100%',
+                                                                                height: '60px',
+                                                                                backgroundColor:
+                                                                                    '#f0f0f0',
+                                                                                display: 'flex',
+                                                                                alignItems:
+                                                                                    'center',
+                                                                                justifyContent:
+                                                                                    'center',
+                                                                                borderRadius: '4px',
+                                                                                marginBottom: '8px',
+                                                                            }}
+                                                                        >
+                                                                            <ToolOutlined
+                                                                                style={{
+                                                                                    fontSize:
+                                                                                        '24px',
+                                                                                    color: '#bfbfbf',
+                                                                                }}
+                                                                            />
+                                                                        </div>
+                                                                        <Text
+                                                                            style={{
+                                                                                fontSize: '12px',
+                                                                                color:
+                                                                                    sparepart.sparepart_stok ===
+                                                                                        'Available' ||
+                                                                                    sparepart.sparepart_stok ===
+                                                                                        'available'
+                                                                                        ? '#52c41a'
+                                                                                        : '#ff4d4f',
+                                                                                fontWeight: 500,
+                                                                            }}
+                                                                        >
+                                                                            {
+                                                                                sparepart.sparepart_stok
+                                                                            }
+                                                                        </Text>
+                                                                    </Col>
+                                                                    <Col span={17}>
+                                                                        <Space
+                                                                            direction="vertical"
+                                                                            size={4}
+                                                                            style={{
+                                                                                width: '100%',
+                                                                            }}
+                                                                        >
+                                                                            <Text strong>
+                                                                                {
+                                                                                    sparepart.sparepart_name
+                                                                                }
+                                                                            </Text>
+                                                                            <Paragraph
+                                                                                style={{
+                                                                                    fontSize:
+                                                                                        '12px',
+                                                                                    margin: 0,
+                                                                                    color: '#595959',
+                                                                                }}
+                                                                            >
+                                                                                {sparepart.sparepart_description ||
+                                                                                    'Deskripsi tidak tersedia'}
+                                                                            </Paragraph>
+                                                                            <div
+                                                                                style={{
+                                                                                    border: '1px solid #d9d9d9',
+                                                                                    borderRadius:
+                                                                                        '4px',
+                                                                                    padding:
+                                                                                        '4px 8px',
+                                                                                    fontSize:
+                                                                                        '11px',
+                                                                                    color: '#8c8c8c',
+                                                                                    marginTop:
+                                                                                        '8px',
+                                                                                }}
+                                                                            >
+                                                                                Kode:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_code
+                                                                                }{' '}
+                                                                                | Qty:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_qty
+                                                                                }{' '}
+                                                                                | Unit:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_unit
+                                                                                }
+                                                                            </div>
+                                                                        </Space>
+                                                                    </Col>
+                                                                </Row>
+                                                            </Card>
+                                                        )
+                                                    )
+                                                ) : (
+                                                    <div
+                                                        style={{
+                                                            textAlign: 'center',
+                                                            padding: '20px',
+                                                            color: '#8c8c8c',
+                                                        }}
+                                                    >
+                                                        Tidak ada spare parts terkait
+                                                    </div>
+                                                )}
+                                            </Space>
+                                        </Card>
+                                    </div>
+                                </Col>
+                            )}
+
                             {/* Kolom Kanan: User History */}
                             <Col xs={24} lg={8}>
                                 <Card title="User History" size="small" style={{ height: '100%' }}>
@@ -545,10 +702,7 @@ const NotificationDetailTab = (props) => {
                         <Row gutter={[8, 8]}>
                             <Col xs={24} md={8}>
                                 <div>
-                                    <Card
-                                        hoverable
-                                        bodyStyle={{ padding: '12px'}}
-                                    >
+                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
                                         <Space>
                                             <BookOutlined
                                                 style={{ fontSize: '16px', color: '#1890ff' }}
@@ -700,10 +854,7 @@ const NotificationDetailTab = (props) => {
                             </Col>
                             <Col xs={24} md={8}>
                                 <div>
-                                    <Card
-                                        hoverable
-                                        bodyStyle={{ padding: '12px'}}
-                                    >
+                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
                                         <Space>
                                             <ToolOutlined
                                                 style={{ fontSize: '16px', color: '#1890ff' }}