refactor: Improve code readability and structure in EditBrandDevice component

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -1,6 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal, ConfigProvider } from 'antd';
+import {
+    Divider,
+    Typography,
+    Button,
+    Steps,
+    Form,
+    Row,
+    Col,
+    Card,
+    Spin,
+    Modal,
+    ConfigProvider,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { getBrandById, updateBrand } from '../../../api/master-brand';
@@ -48,12 +60,10 @@ const EditBrandDevice = () => {
     const [solutionForm] = Form.useForm();
     const [sparepartForm] = Form.useForm();
 
-    const {
+    const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
-        errorCodeFields,
+        errorCodeForm,
-        addErrorCode,
+        fileList
-        removeErrorCode,
+    );
-        editErrorCode,
-    } = useErrorCodeLogic(errorCodeForm, fileList);
 
     const {
         solutionFields,
@@ -83,14 +93,14 @@ const EditBrandDevice = () => {
 
     // Handlers for sparepart image upload
     const handleSparepartImageUpload = (fieldKey, imageData) => {
-        setSparepartImages(prev => ({
+        setSparepartImages((prev) => ({
             ...prev,
-            [fieldKey]: imageData
+            [fieldKey]: imageData,
         }));
     };
 
     const handleSparepartImageRemove = (fieldKey) => {
-        setSparepartImages(prev => {
+        setSparepartImages((prev) => {
             const newImages = { ...prev };
             delete newImages[fieldKey];
             return newImages;
@@ -159,7 +169,8 @@ const EditBrandDevice = () => {
                               path_icon: ec.path_icon || '',
                               status: ec.is_active,
                               solution: ec.solution || [],
-                              errorCodeIcon: ec.path_icon ? {
+                              errorCodeIcon: ec.path_icon
+                                  ? {
                                         name: 'icon',
                                         uploadPath: ec.path_icon,
                                         url: (() => {
@@ -168,8 +179,9 @@ const EditBrandDevice = () => {
                                             const filename = pathParts.slice(1).join('/');
                                             return getFileUrl(folder, filename);
                                         })(),
-                                  type_solution: 'image'
+                                        type_solution: 'image',
-                              } : null,
+                                    }
+                                  : null,
                           }))
                         : [];
 
@@ -332,7 +344,7 @@ const EditBrandDevice = () => {
 
             // Load sparepart images
             const newSparepartImages = {};
-            record.sparepart.forEach(sparepart => {
+            record.sparepart.forEach((sparepart) => {
                 if (sparepart.sparepart_image) {
                     newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
                 }
@@ -367,7 +379,7 @@ const EditBrandDevice = () => {
 
             // Load sparepart images
             const newSparepartImages = {};
-            record.sparepart.forEach(sparepart => {
+            record.sparepart.forEach((sparepart) => {
                 if (sparepart.sparepart_image) {
                     newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
                 }
@@ -381,25 +393,61 @@ const EditBrandDevice = () => {
         }
     };
 
-    const handleAddErrorCode = (newErrorCode) => {
+    const handleAddErrorCode = async () => {
-        // Include the current icon in the error code
+        try {
-        const errorCodeWithIcon = {
+            // Validate error code form
-            ...newErrorCode,
+            const errorCodeValues = await errorCodeForm.validateFields();
-            errorCodeIcon: errorCodeIcon
+
+            // Get solution data from solution form
+            const solutionData = getSolutionData();
+
+            // Get sparepart data from sparepart form
+            const sparepartData = getSparepartData();
+
+            if (solutionData.length === 0) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Perhatian',
+                    message: 'Setiap error code harus memiliki minimal 1 solution!',
+                });
+                return;
+            }
+
+            // Create complete error code object
+            const newErrorCode = {
+                error_code: errorCodeValues.error_code,
+                error_code_name: errorCodeValues.error_code_name,
+                error_code_description: errorCodeValues.error_code_description,
+                error_code_color: errorCodeValues.error_code_color || '#000000',
+                path_icon: errorCodeIcon?.uploadPath || '',
+                status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
+                solution: solutionData,
+                sparepart: sparepartData,
+                errorCodeIcon: errorCodeIcon,
+                key: editingErrorCodeKey || `temp-${Date.now()}`,
             };
 
             let updatedErrorCodes;
             if (editingErrorCodeKey) {
-            updatedErrorCodes = errorCodes.map((item) =>
+                // Update existing error code
-                item.key === editingErrorCodeKey ? errorCodeWithIcon : item
+                updatedErrorCodes = errorCodes.map((item) => {
-            );
+                    if (item.key === editingErrorCodeKey) {
+                        return {
+                            ...item,
+                            ...newErrorCode,
+                            error_code_id: item.error_code_id || newErrorCode.error_code_id,
+                        };
+                    }
+                    return item;
+                });
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
                     message: 'Error code berhasil diupdate!',
                 });
             } else {
-            updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
+                // Add new error code
+                updatedErrorCodes = [...errorCodes, newErrorCode];
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
@@ -408,7 +456,18 @@ const EditBrandDevice = () => {
             }
 
             setErrorCodes(updatedErrorCodes);
+
+            // Delay form reset to prevent data loss
+            setTimeout(() => {
                 resetErrorCodeForm();
+            }, 100);
+        } catch (error) {
+            NotifAlert({
+                icon: 'warning',
+                title: 'Perhatian',
+                message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
+            });
+        }
     };
 
     const resetErrorCodeForm = () => {
@@ -552,7 +611,11 @@ const EditBrandDevice = () => {
                         </Col>
                         <Col span={8}>
                             <Card
-                                title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
+                                title={
+                                    <Title level={5} style={{ margin: 0 }}>
+                                        Solutions
+                                    </Title>
+                                }
                                 size="small"
                             >
                                 <Form
@@ -581,7 +644,11 @@ const EditBrandDevice = () => {
                         </Col>
                         <Col span={8}>
                             <Card
-                                title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
+                                title={
+                                    <Title level={5} style={{ margin: 0 }}>
+                                        Spareparts
+                                    </Title>
+                                }
                                 size="small"
                             >
                                 <Form