Refactor DetailSparepart component: replace options array with structured optionsYearly, update checkbox handling, and add sparepart_number column in ListSparepart

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

@@ -11,7 +11,7 @@ import {
     Row,
     Col,
     Image,
-    Checkbox
+    Checkbox,
 } from 'antd';
 import { PlusOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
@@ -38,7 +38,38 @@ const DetailSparepart = (props) => {
     const [previewTitle, setPreviewTitle] = useState('');
     const [isHovering, setIsHovering] = useState(false);
 
-    const options = ['1 Year', '2 Year', '3 Year', '4 Year', '5 Year', '6 Year'];
+    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 [checkedList, setCheckedList] = useState([]);
     const [checkAll, setCheckAll] = useState(false);
     const [indeterminate, setIndeterminate] = useState(false);
@@ -82,16 +113,6 @@ const DetailSparepart = (props) => {
         setFileList([]);
     };
 
-    const chekboxValue = () => {
-        const result = {};
-        options.forEach((item, index) => {
-            const key = `is_${index + 1}th`;
-            result[key] = checkedList.includes(item);
-        });
-
-        return result;
-    };
-
     const handleSave = async () => {
         setConfirmLoading(true);
 
@@ -253,6 +274,9 @@ const DetailSparepart = (props) => {
                 payload.sparepart_foto = imageUrl;
             }
 
+            payload.sparepart_number = formData.sparepart_number;
+            payload.sparepart_yearly = checkedList;
+
             // console.log('Sending payload:', payload);
 
             const response = formData.sparepart_id
@@ -290,11 +314,6 @@ const DetailSparepart = (props) => {
         setConfirmLoading(false);
     };
 
-    // const handleSave = () => {
-    //     const val = chekboxValue();
-    //     console.log(val);
-    // };
-
     const handleInputChange = (e) => {
         const { name, value } = e.target;
         setFormData({ ...formData, [name]: value });
@@ -307,14 +326,14 @@ const DetailSparepart = (props) => {
     const onChangeCheckbox = (list) => {
         setCheckedList(list);
 
-        setIndeterminate(!!list.length && list.length < options.length);
-        setCheckAll(list.length === options.length);
+        setIndeterminate(!!list.length && list.length < optionsYearly.length);
+        setCheckAll(list.length === optionsYearly.length);
     };
 
     const onCheckAllChange = (e) => {
         const checked = e.target.checked;
 
-        setCheckedList(checked ? options : []);
+        setCheckedList(checked ? optionsYearly.map((item) => item.value) : []);
         setIndeterminate(false);
         setCheckAll(checked);
     };
@@ -355,6 +374,7 @@ const DetailSparepart = (props) => {
             } else {
                 setFileList([]);
             }
+            setCheckedList(JSON.parse(props.selectedData.sparepart_yearly));
         } else {
             setFormData(defaultData);
             setFileList([]);
@@ -373,7 +393,7 @@ const DetailSparepart = (props) => {
 
     return (
         <Modal
-            width='40rem'
+            width="40rem"
             title={`${
                 props.actionMode === 'add'
                     ? 'Tambah'
@@ -641,9 +661,9 @@ const DetailSparepart = (props) => {
                                         justifyContent: 'space-between',
                                     }}
                                 >
-                                    {options.map((item) => (
-                                        <Checkbox key={item} value={item}>
-                                            {item}
+                                    {optionsYearly.map((item) => (
+                                        <Checkbox key={item.key} value={item.value}>
+                                            {item.text}
                                         </Checkbox>
                                     ))}
                                 </Checkbox.Group>

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',