update: brand device

src/pages/master/brandDevice/AddEditErrorCode.jsx

@@ -10,13 +10,13 @@ import {
     Spin,
     Upload,
 } from 'antd';
-import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined } from '@ant-design/icons';
-import { getBrandById, getErrorCodeById, updateBrand, getErrorCodesByBrandId, createErrorCode, updateErrorCode } from '../../../api/master-brand';
+import { getErrorCodeById, createErrorCode, updateErrorCode } from '../../../api/master-brand';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
+import ErrorCodeForm from './component/ErrorCodeForm';
 import SolutionForm from './component/SolutionForm';
 import { useSolutionLogic } from './hooks/solution';
-import SingleSparepartSelect from './component/SingleSparepartSelect';
+import SparepartSelect from './component/SparepartSelect';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 
 const { Title } = Typography;
@@ -29,10 +29,9 @@ const AddEditErrorCode = () => {
 
     const currentBrandId = routeBrandId;
 
-    const isFromAddBrand = location.pathname.includes('/master/brand-device/') && location.pathname.includes('/error-code/') && 
+    const isFromAddBrand = location.pathname.includes('/master/brand-device/') && location.pathname.includes('/error-code/') &&
-    (location.pathname.includes('/add') || (location.pathname.includes('/edit/') && !location.pathname.includes('/edit/')));
+        (location.pathname.includes('/add') || (location.pathname.includes('/edit/') && !location.pathname.includes('/edit/')));
 
-    // Forms
     const [errorCodeForm] = Form.useForm();
     const [solutionForm] = Form.useForm();
 
@@ -62,7 +61,6 @@ const AddEditErrorCode = () => {
         const isEditMode = errorCodeId && errorCodeId !== 'add';
         setIsEdit(isEditMode);
 
-        // Initialize solution form with proper structure
         if (!isEditMode) {
             resetSolutionFields();
         }
@@ -172,13 +170,13 @@ const AddEditErrorCode = () => {
         }
     };
 
-  const handleSave = async () => {
+    const handleSave = async () => {
         try {
             await errorCodeForm.validateFields();
 
             const solutionData = getSolutionData();
 
-            // Validate that at least one solution exists and is valid
+
             if (!solutionData || solutionData.length === 0) {
                 NotifAlert({
                     icon: 'warning',
@@ -188,16 +186,16 @@ const AddEditErrorCode = () => {
                 return;
             }
 
-            // Validate solutions based on their type
             const invalidSolutions = solutionData.filter(solution => {
                 if (solution.type_solution === 'text') {
                     return !solution.text_solution || solution.text_solution.trim() === '';
-                } else if (solution.type_solution === 'file') {
+                } else if (solution.type_solution !== 'text') {
                     return !solution.path_solution || solution.path_solution.trim() === '';
                 }
                 return false;
             });
 
+
             if (invalidSolutions.length > 0) {
                 const invalidNames = invalidSolutions.map(s => s.solution_name).join(', ');
                 NotifAlert({
@@ -229,14 +227,20 @@ const AddEditErrorCode = () => {
                     payload.error_code = errorCodeValues.error_code;
                 }
 
+
                 let response;
 
                 if (isEdit && errorCodeId) {
-                    response = await updateErrorCode(currentBrandId, errorCodeId, payload);
+                    let cleanErrorCodeId = errorCodeId;
+                    if (errorCodeId.startsWith('existing_')) {
+                        cleanErrorCodeId = errorCodeId.replace('existing_', '');
+                    }
+                    response = await updateErrorCode(currentBrandId, cleanErrorCodeId, payload);
                 } else {
                     response = await createErrorCode(currentBrandId, payload);
                 }
 
+
                 if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                     NotifOk({
                         icon: 'success',
@@ -247,7 +251,9 @@ const AddEditErrorCode = () => {
                     if (isFromAddBrand) {
                         navigate(`/master/brand-device/add`);
                     } else {
-                        navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
+                        navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`, {
+                            state: { refreshErrorCodes: true }
+                        });
                     }
                 } else {
                     NotifAlert({
@@ -303,7 +309,6 @@ const AddEditErrorCode = () => {
     };
 
     const handleSolutionFileUpload = (fileObject) => {
-        // Handle solution file upload if needed
     };
 
     const resetForm = () => {
@@ -373,7 +378,7 @@ const AddEditErrorCode = () => {
                                     error_code_color: '#000000',
                                 }}
                             >
-                                <ErrorCodeSimpleForm
+                                <ErrorCodeForm
                                     errorCodeForm={errorCodeForm}
                                     isErrorCodeFormReadOnly={false}
                                     errorCodeIcon={errorCodeIcon}
@@ -404,9 +409,8 @@ const AddEditErrorCode = () => {
                                     solutionStatuses={solutionStatuses}
                                     firstSolutionValid={firstSolutionValid}
                                     checkFirstSolutionValid={() => {
-                                    //   console.log('🔍 checkFirstSolutionValid function:', typeof checkFirstSolutionValid);
+                                        return checkFirstSolutionValid();
-                                      return checkFirstSolutionValid();
+                                    }}
-                                  }}
                                     onAddSolutionField={handleAddSolutionField}
                                     onRemoveSolutionField={handleRemoveSolutionField}
                                     onSolutionTypeChange={handleSolutionTypeChange}
@@ -430,7 +434,7 @@ const AddEditErrorCode = () => {
                             size="small"
                             style={{ height: 'fit-content' }}
                         >
-                            <SingleSparepartSelect
+                            <SparepartSelect
                                 selectedSparepartIds={selectedSparepartIds}
                                 onSparepartChange={setSelectedSparepartIds}
                                 isReadOnly={false}
@@ -456,7 +460,7 @@ const AddEditErrorCode = () => {
                 </div>
             </div>
 
-                  </Card>
+        </Card>
     );
 };
 

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -15,18 +15,17 @@ import {
     Input,
 } from 'antd';
 import { EyeOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import TableList from '../../../components/Global/TableList';
-import { ConfigProvider } from 'antd';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { getBrandById, getErrorCodesByBrandId, deleteErrorCode } from '../../../api/master-brand';
+import { getBrandById, getErrorCodesByBrandId, getErrorCodeById, deleteErrorCode, updateErrorCode as updateErrorCodeAPI, createErrorCode as createErrorCodeAPI } from '../../../api/master-brand';
 import { getFileUrl } from '../../../api/file-uploads';
+import { SendRequest } from '../../../components/Global/ApiRequest';
 import BrandForm from './component/BrandForm';
-import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
+import ErrorCodeForm from './component/ErrorCodeForm';
 import SolutionForm from './component/SolutionForm';
 import FormActions from './component/FormActions';
-import { useSolutionLogic } from './hooks/solution';
+import SparepartSelect from './component/SparepartSelect';
-import SingleSparepartSelect from './component/SingleSparepartSelect';
+import ListErrorCode from './component/ListErrorCode';
 
 const { Title } = Typography;
 const { Step } = Steps;
@@ -50,18 +49,180 @@ const EditBrandDevice = () => {
     const [searchText, setSearchText] = useState('');
     const [apiErrorCodes, setApiErrorCodes] = useState([]);
     const [trigerFilter, setTrigerFilter] = useState(false);
-    const [searchValue, setSearchValue] = useState('');
     const [brandInfo, setBrandInfo] = useState({});
     const [tempErrorCodes, setTempErrorCodes] = useState([]);
     const [existingErrorCodes, setExistingErrorCodes] = useState([]);
+    const [selectedErrorCode, setSelectedErrorCode] = useState(null);
+    const [solutionFields, setSolutionFields] = useState([0]);
+    const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
+    const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
+    const [currentSolutionData, setCurrentSolutionData] = useState([]);
 
-    const {
+    const getSolutionData = () => {
-        resetSolutionFields,
+        if (!solutionForm) return [];
-        getSolutionData,
+        try {
-        setSolutionsForExistingRecord,
+            const values = solutionForm.getFieldsValue(true);
-    } = useSolutionLogic(solutionForm);
+
+            let solutions = [];
+
+            if (values.solution_items) {
+                if (Array.isArray(values.solution_items)) {
+                    solutions = values.solution_items.filter(Boolean);
+                } else if (typeof values.solution_items === 'object') {
+                    solutions = Object.values(values.solution_items).filter(Boolean);
+                }
+            }
+
+            return solutions;
+        } catch (error) {
+            return [];
+        }
+    };
+
+    const resetSolutionFields = () => {
+        if (solutionForm && solutionForm.resetFields) {
+            solutionForm.resetFields();
+            solutionForm.setFieldsValue({
+                solution_items: {
+                    0: {
+                        name: '',
+                        type: 'text',
+                        text: '',
+                        status: true
+                    }
+                }
+            });
+        }
+        setCurrentSolutionData([]);
+    };
+
+    const setSolutionsForExistingRecord = (solutions, targetForm) => {
+
+        if (!targetForm || !solutions || solutions.length === 0) {
+            return;
+        }
+
+        targetForm.resetFields();
+
+        const solutionItems = {};
+        const newSolutionFields = [];
+        const newSolutionTypes = {};
+        const newSolutionStatuses = {};
+
+        solutions.forEach((solution, index) => {
+            const fieldKey = index;
+            newSolutionFields.push(fieldKey);
+
+            const isFileType = solution.type_solution && solution.type_solution !== 'text';
+            newSolutionTypes[fieldKey] = isFileType ? 'file' : 'text';
+            newSolutionStatuses[fieldKey] = solution.is_active !== false;
+
+            let fileObject = null;
+            if (isFileType && (solution.path_solution || solution.path_document)) {
+                fileObject = {
+                    uploadPath: solution.path_solution || solution.path_document,
+                    path_solution: solution.path_solution || solution.path_document,
+                    name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File',
+                    type_solution: solution.type_solution,
+                    isExisting: true,
+                    size: 0,
+                    url: solution.path_solution || solution.path_document
+                };
+            }
+
+            solutionItems[fieldKey] = {
+                brand_code_solution_id: solution.brand_code_solution_id,
+                name: solution.solution_name || '',
+                type: isFileType ? 'file' : 'text',
+                text: solution.text_solution || '',
+                status: solution.is_active !== false,
+                file: fileObject,
+                fileUpload: fileObject,
+                path_solution: solution.path_solution || solution.path_document || null,
+                fileName: solution.file_upload_name || null
+            };
+        });
+
+        setSolutionFields(newSolutionFields);
+
+        setSolutionTypes(newSolutionTypes);
+
+        setSolutionStatuses(newSolutionStatuses);
+
+
+        targetForm.resetFields();
+
+        setTimeout(() => {
+            targetForm.setFieldsValue({
+                solution_items: solutionItems
+            });
+
+            setTimeout(() => {
+                Object.keys(solutionItems).forEach(key => {
+                    const solution = solutionItems[key];
+                    targetForm.setFieldValue(['solution_items', key, 'name'], solution.name);
+                    targetForm.setFieldValue(['solution_items', key, 'type'], solution.type);
+                    targetForm.setFieldValue(['solution_items', key, 'text'], solution.text);
+                    targetForm.setFieldValue(['solution_items', key, 'file'], solution.file);
+                    targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
+                    targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
+                    targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
+                    targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
+                });
+
+
+                const finalValues = targetForm.getFieldsValue();
+            }, 100);
+        }, 100);
+    };
+
+    const handleAddSolutionField = () => {
+        const newKey = Math.max(...solutionFields, 0) + 1;
+        setSolutionFields(prev => [...prev, newKey]);
+        setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
+        setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
+    };
+
+    const handleRemoveSolutionField = (fieldKey) => {
+        if (solutionFields.length > 1) {
+            setSolutionFields(prev => prev.filter(key => key !== fieldKey));
+            const newTypes = { ...solutionTypes };
+            const newStatuses = { ...solutionStatuses };
+            delete newTypes[fieldKey];
+            delete newStatuses[fieldKey];
+            setSolutionTypes(newTypes);
+            setSolutionStatuses(newStatuses);
+
+            const currentValues = solutionForm.getFieldsValue();
+            if (currentValues.solution_items && currentValues.solution_items[fieldKey]) {
+                delete currentValues.solution_items[fieldKey];
+                solutionForm.setFieldsValue(currentValues);
+            }
+        }
+    };
+
+    const handleSolutionTypeChange = (fieldKey, type) => {
+        setSolutionTypes(prev => ({ ...prev, [fieldKey]: type }));
+
+        if (type === 'file') {
+            solutionForm.setFieldValue(['solution_items', fieldKey, 'text'], '');
+        }
+
+        if (type === 'text') {
+            solutionForm.setFieldValue(['solution_items', fieldKey, 'file'], null);
+            solutionForm.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
+        }
+    };
+
+    const handleSolutionStatusChange = (fieldKey, status) => {
+        setSolutionStatuses(prev => ({ ...prev, [fieldKey]: status }));
+    };
 
     useEffect(() => {
+        errorCodeForm.setFieldsValue({
+            status: true,
+        });
+
         const fetchBrandData = async () => {
             const token = localStorage.getItem('token');
             if (!token) {
@@ -129,7 +290,6 @@ const EditBrandDevice = () => {
                                 setApiErrorCodes(existingCodes);
                             }
                         } catch (error) {
-                            console.error('Error fetching error codes:', error);
                         }
                     }
 
@@ -160,18 +320,35 @@ const EditBrandDevice = () => {
         setCurrentStep(tab === 'brand' ? 0 : 1);
     }, [searchParams]);
 
-  
+
     useEffect(() => {
         if (currentStep === 1 && id) {
             setTrigerFilter(prev => !prev);
         }
     }, [currentStep, id]);
 
-    // Local functions to replace context methods
+    // Auto refresh error codes when returning from add/edit error code
+    useEffect(() => {
+        if (location.state?.refreshErrorCodes) {
+            // Trigger refresh of error codes list
+            setTrigerFilter(prev => !prev);
+
+            // Clear the state to prevent infinite refresh
+            const state = { ...location.state };
+            delete state.refreshErrorCodes;
+            navigate(location.pathname + location.search, {
+                replace: true,
+                state
+            });
+        }
+    }, [location, navigate]);
+
     const addErrorCode = (newErrorCode) => {
+        // Generate unique tempId with timestamp and random number
+        const uniqueId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
         const errorCodeWithId = {
             ...newErrorCode,
-            tempId: Date.now().toString(),
+            tempId: uniqueId,
             status: 'new'
         };
         setTempErrorCodes(prev => [...prev, errorCodeWithId]);
@@ -228,7 +405,7 @@ const EditBrandDevice = () => {
         navigate('/master/brand-device');
     };
 
-  
+
     const handleErrorCodeIconUpload = (iconData) => {
         setErrorCodeIcon(iconData);
     };
@@ -251,6 +428,7 @@ const EditBrandDevice = () => {
 
     const handleCreateNewErrorCode = () => {
         resetErrorCodeForm();
+        setCurrentSolutionData([]);
     };
 
     const handleSaveErrorCode = async () => {
@@ -276,106 +454,138 @@ const EditBrandDevice = () => {
                 return;
             }
 
-            const newErrorCode = {
+            const formattedSolutions = solutionData.map(solution => {
-                error_code: errorCodeValues.error_code,
+                const solutionType = solution.type || 'text';
+
+                let typeSolution = solutionType === 'text' ? 'text' : 'image';
+                if (solution.file && solution.file.type_solution) {
+                    typeSolution = solution.file.type_solution;
+                } else if (solution.fileUpload && solution.fileUpload.type_solution) {
+                    typeSolution = solution.fileUpload.type_solution;
+                }
+
+                const formattedSolution = {
+                    solution_name: solution.name,
+                    type_solution: typeSolution,
+                    is_active: solution.status !== false,
+                };
+
+                if (typeSolution === 'text') {
+                    formattedSolution.text_solution = solution.text || '';
+                    formattedSolution.path_solution = '';
+                } else {
+                    formattedSolution.text_solution = '';
+
+                    formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || '';
+                }
+
+                if (formattedSolution.brand_code_solution_id) {
+                    delete formattedSolution.brand_code_solution_id;
+                }
+
+                return formattedSolution;
+            });
+
+            const payload = {
                 error_code_name: errorCodeValues.error_code_name,
-                error_code_description: errorCodeValues.error_code_description,
+                error_code_description: errorCodeValues.error_code_description || '',
                 error_code_color: errorCodeValues.error_code_color || '#000000',
                 path_icon: errorCodeIcon?.uploadPath || '',
                 is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
-                solution: solutionData,
+                solution: formattedSolutions,
-                spareparts: selectedSparepartIds
+                spareparts: selectedSparepartIds || []
             };
 
-            if (editingErrorCodeKey) {
+            if (!editingErrorCodeKey || !editingErrorCodeKey.startsWith('existing_')) {
-                updateErrorCode(editingErrorCodeKey, newErrorCode);
+                payload.error_code = errorCodeValues.error_code;
-                NotifOk({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: 'Error code berhasil diupdate!',
-                });
-            } else {
-                addErrorCode(newErrorCode);
-                NotifOk({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: 'Error code berhasil ditambahkan!',
-                });
             }
 
-            resetErrorCodeForm();
+            let response;
+
+            if (editingErrorCodeKey && editingErrorCodeKey.startsWith('existing_')) {
+                const errorCodeId = editingErrorCodeKey.replace('existing_', '');
+                response = await updateErrorCodeAPI(id, errorCodeId, payload);
+            } else {
+                response = await createErrorCodeAPI(id, payload);
+            }
+
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!',
+                });
+
+                // Clear temp error codes after successful save to prevent duplication
+                setTempErrorCodes(prev => prev.filter(ec => {
+                    // Keep existing error codes that weren't just saved
+                    if (ec.status === 'existing' || ec.tempId.startsWith('existing_')) {
+                        return true;
+                    }
+                    // Remove the newly saved error code to prevent duplication
+                    return ec.tempId !== editingErrorCodeKey;
+                }));
+
+                setTrigerFilter(prev => !prev);
+                resetErrorCodeForm();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Gagal menyimpan error code',
+                });
+            }
         } catch (error) {
             NotifAlert({
                 icon: 'warning',
                 title: 'Perhatian',
-                message: 'Harap isi semua kolom wajib!',
+                message: error.message || 'Harap isi semua kolom wajib!',
             });
         }
     };
 
+    const loadErrorCodeData = (errorCode, isPreview = false) => {
+        if (errorCode) {
+
+            const formValues = {
+                error_code: errorCode.error_code,
+                error_code_name: errorCode.error_code_name,
+                error_code_description: errorCode.error_code_description || '',
+                error_code_color: errorCode.error_code_color && errorCode.error_code_color !== '' ? errorCode.error_code_color : '#000000',
+                status: errorCode.is_active,
+            };
+
+            errorCodeForm.setFieldsValue(formValues);
+
+            if (errorCode.path_icon && errorCode.path_icon !== '') {
+                const iconData = {
+                    name: errorCode.path_icon.split('/').pop(),
+                    uploadPath: errorCode.path_icon,
+                };
+                setErrorCodeIcon(iconData);
+            } else {
+                setErrorCodeIcon(null);
+            }
+
+            setIsErrorCodeFormReadOnly(isPreview);
+
+            const editingKey = errorCode.tempId || `existing_${errorCode.error_code_id}`;
+            setEditingErrorCodeKey(editingKey);
+
+        }
+    };
+
     const handlePreviewErrorCode = (record) => {
         const errorCode = getErrorCodeById(record.tempId || record.error_code_id);
-        if (errorCode) {
+        loadErrorCodeData(errorCode, true);
-            errorCodeForm.setFieldsValue({
-                error_code: errorCode.error_code,
-                error_code_name: errorCode.error_code_name,
-                error_code_description: errorCode.error_code_description,
-                error_code_color: errorCode.error_code_color,
-                status: errorCode.is_active,
-            });
-            setErrorCodeIcon(errorCode.path_icon ? {
-                name: errorCode.path_icon.split('/').pop(),
-                uploadPath: errorCode.path_icon,
-            } : null);
-            setIsErrorCodeFormReadOnly(true);
-            setEditingErrorCodeKey(errorCode.tempId);
-
-            if (errorCode.solution && errorCode.solution.length > 0) {
-                setSolutionsForExistingRecord(errorCode.solution, solutionForm);
-            } else {
-                resetSolutionFields();
-            }
-
-            if (errorCode.spareparts && errorCode.spareparts.length > 0) {
-                setSelectedSparepartIds(errorCode.spareparts);
-            }
-        }
     };
 
     const handleEditErrorCode = (record) => {
         const errorCode = getErrorCodeById(record.tempId || record.error_code_id);
-        if (errorCode) {
+        loadErrorCodeData(errorCode, false);
-            errorCodeForm.setFieldsValue({
-                error_code: errorCode.error_code,
-                error_code_name: errorCode.error_code_name,
-                error_code_description: errorCode.error_code_description,
-                error_code_color: errorCode.error_code_color,
-                status: errorCode.is_active,
-            });
-            setErrorCodeIcon(errorCode.path_icon ? {
-                name: errorCode.path_icon.split('/').pop(),
-                uploadPath: errorCode.path_icon,
-            } : null);
-            setIsErrorCodeFormReadOnly(false);
-            setEditingErrorCodeKey(errorCode.tempId);
-
-            if (errorCode.solution && errorCode.solution.length > 0) {
-                setSolutionsForExistingRecord(errorCode.solution, solutionForm);
-            }
-
-            if (errorCode.spareparts && errorCode.spareparts.length > 0) {
-                setSelectedSparepartIds(errorCode.spareparts);
-            }
-        }
     };
 
-    const handleEditErrorCodeNavigate = (record) => {
-        const errorCodeId = record.status === 'existing' ? record.error_code_id : record.tempId;
-        const currentBrandId = id;
-        if (errorCodeId && currentBrandId) {
-            navigate(`/master/brand-device/${currentBrandId}/error-code/edit/${errorCodeId}`);
-        }
-    };
 
     const handleDeleteErrorCode = async (record) => {
         NotifConfirmDialog({
@@ -418,7 +628,7 @@ const EditBrandDevice = () => {
                     });
                 }
             },
-            onCancel: () => {}
+            onCancel: () => { }
         });
     };
 
@@ -518,25 +728,22 @@ const EditBrandDevice = () => {
     }, [setBrandInfo]);
 
     const handleSearch = () => {
-        setSearchText(searchValue);
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
-        setSearchValue('');
         setSearchText('');
         setTrigerFilter((prev) => !prev);
     };
 
     const getErrorCodesData = async (params) => {
         try {
-            const search = params.get('search') || '';
+            const criteria = params.get('criteria') || '';
             const page = parseInt(params.get('page')) || 1;
             const limit = parseInt(params.get('limit')) || 10;
             const currentBrandId = id;
 
             if (!currentBrandId) {
-                console.warn('Brand ID is not available');
                 return {
                     data: [],
                     pagination: {
@@ -551,7 +758,7 @@ const EditBrandDevice = () => {
             const queryParams = new URLSearchParams({
                 page: page.toString(),
                 limit: limit.toString(),
-                ...(search && { search })
+                ...(criteria && { criteria })
             });
 
             const response = await getErrorCodesByBrandId(currentBrandId, queryParams);
@@ -576,7 +783,6 @@ const EditBrandDevice = () => {
                             spareparts: contextModified.spareparts || ec.spareparts || []
                         };
                     } else {
-                        // Use original API data
                         return {
                             ...ec,
                             tempId: `existing_${ec.error_code_id}`,
@@ -587,7 +793,6 @@ const EditBrandDevice = () => {
                     }
                 });
 
-                // Filter out deleted error codes
                 const activeExistingCodes = existingCodes.filter(ec => ec.status !== 'deleted');
 
                 const allErrorCodes = [...activeExistingCodes, ...tempErrorCodes.filter(ec => ec.status !== 'deleted')];
@@ -626,7 +831,6 @@ const EditBrandDevice = () => {
                 }
             };
         } catch (error) {
-            console.error('Error fetching error codes:', error);
             return {
                 data: [],
                 pagination: {
@@ -672,90 +876,321 @@ const EditBrandDevice = () => {
         }
 
         if (currentStep === 1) {
-            const queryParams = new URLSearchParams();
+            const handleErrorCodeSelect = async (errorCode) => {
-            if (searchText) {
+
-                queryParams.set('search', searchText);
+                setSelectedErrorCode(errorCode);
-            }
+
+                try {
+
+
+
+                    const directResponse = await SendRequest({
+                        method: 'get',
+                        prefix: `error-code/${errorCode.error_code_id}`,
+                    });
+
+
+                    const apiResponse = directResponse.data;
+
+
+                    if (apiResponse && apiResponse.statusCode === 200 && apiResponse.data) {
+                        const fullErrorCodeData = {
+                            ...apiResponse.data,
+                            tempId: `existing_${apiResponse.data.error_code_id}`
+                        };
+                        loadErrorCodeData(fullErrorCodeData, false);
+
+                        if (apiResponse.data.solution && apiResponse.data.solution.length > 0) {
+                            setCurrentSolutionData(apiResponse.data.solution);
+                            setSolutionsForExistingRecord(apiResponse.data.solution, solutionForm);
+                        }
+
+                        if (apiResponse.data.spareparts && apiResponse.data.spareparts.length > 0) {
+                            setSelectedSparepartIds(apiResponse.data.spareparts.map(sp => sp.sparepart_id));
+                        } else {
+                            setSelectedSparepartIds([]);
+                        }
+                    } else {
+                        const basicErrorCodeData = {
+                            ...errorCode,
+                            tempId: `existing_${errorCode.error_code_id}`
+                        };
+                        loadErrorCodeData(basicErrorCodeData, false);
+                        resetSolutionFields();
+                        setSelectedSparepartIds([]);
+                    }
+                } catch (error) {
+                    const basicErrorCodeData = {
+                        ...errorCode,
+                        tempId: `existing_${errorCode.error_code_id}`
+                    };
+                    loadErrorCodeData(basicErrorCodeData, false);
+                }
+            };
+
+            const handleAddNew = () => {
+                setSelectedErrorCode(null);
+                resetErrorCodeForm();
+            };
 
             return (
-                <Card>
+                <Row gutter={[16, 8]} style={{ minHeight: '70vh' }}>
-                    <Row>
+                    <Col xs={24} md={8} lg={8}>
-                        <Col xs={24}>
+                        <ListErrorCode
-                            <Row justify="space-between" align="middle" gutter={[8, 8]}>
+                            brandId={id}
-                                <Col xs={24} sm={24} md={12} lg={12}>
+                            selectedErrorCode={selectedErrorCode}
-                                    <Input.Search
+                            onErrorCodeSelect={handleErrorCodeSelect}
-                                        placeholder="Search error codes..."
+                            tempErrorCodes={tempErrorCodes}
-                                        value={searchText}
+                            trigerFilter={trigerFilter}
-                                        onChange={(e) => {
+                            searchText={searchText}
-                                            const value = e.target.value;
+                            onSearchChange={(value) => {
-                                            setSearchText(value);
+                                setSearchText(value);
-                                            if (value === '') {
+                                if (value === '') {
-                                                setTrigerFilter((prev) => !prev);
+                                    setTrigerFilter((prev) => !prev);
-                                            }
+                                }
-                                        }}
+                            }}
-                                        onSearch={handleSearch}
+                            onSearch={handleSearch}
-                                        allowClear={{
+                            onSearchClear={handleSearchClear}
-                                            clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                        />
-                                        }}
+                    </Col>
-                                        enterButton={
+
+                    <Col xs={24} md={16} lg={16}>
+                        <div style={{
+                            paddingLeft: '12px'
+                        }}>
+                            <Card
+                                title={
+                                    <span style={{
+                                        fontSize: '16px',
+                                        fontWeight: '600',
+                                        color: '#262626',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px'
+                                    }}>
+                                        <span style={{
+                                            width: '4px',
+                                            height: '20px',
+                                            backgroundColor: '#23A55A',
+                                            borderRadius: '2px'
+                                        }}></span>
+                                        Error Code Form
+                                    </span>
+                                }
+                                style={{
+                                    width: '100%',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+                                    borderRadius: '12px'
+                                }}
+                                styles={{
+                                    body: { padding: '16px 24px 12px 24px' },
+                                    header: {
+                                        padding: '16px 24px',
+                                        borderBottom: '1px solid #f0f0f0',
+                                        backgroundColor: '#fafafa'
+                                    }
+                                }}
+                            >
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                    <div style={{
+                                        padding: '16px',
+                                        border: '1px solid #f0f0f0',
+                                        borderRadius: '10px',
+                                        backgroundColor: '#ffffff',
+                                        marginBottom: '0',
+                                        transition: 'all 0.3s ease',
+                                        boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                    }}>
+                                        <div style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '8px',
+                                            marginBottom: '12px',
+                                            paddingBottom: '8px',
+                                            borderBottom: '1px solid #f5f5f5'
+                                        }}>
+                                            <div style={{
+                                                width: '3px',
+                                                height: '16px',
+                                                backgroundColor: '#23A55A',
+                                                borderRadius: '2px'
+                                            }}></div>
+                                            <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                Error Code Details
+                                            </h4>
+                                        </div>
+                                        <ErrorCodeForm
+                                            errorCodeForm={errorCodeForm}
+                                            isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
+                                            errorCodeIcon={errorCodeIcon}
+                                            onErrorCodeIconUpload={handleErrorCodeIconUpload}
+                                            onErrorCodeIconRemove={handleErrorCodeIconRemove}
+                                            isEdit={editingErrorCodeKey !== null}
+                                        />
+                                    </div>
+
+                                    <Row gutter={[20, 0]} style={{ marginTop: '0' }}>
+                                        <Col xs={24} md={12} lg={12}>
+                                            <div style={{
+                                                padding: '16px',
+                                                border: '1px solid #f0f0f0',
+                                                borderRadius: '10px',
+                                                backgroundColor: '#ffffff',
+                                                transition: 'all 0.3s ease',
+                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                            }}>
+                                                <div style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '8px',
+                                                    marginBottom: '12px',
+                                                    paddingBottom: '8px',
+                                                    borderBottom: '1px solid #f5f5f5'
+                                                }}>
+                                                    <div style={{
+                                                        width: '3px',
+                                                        height: '16px',
+                                                        backgroundColor: '#1890ff',
+                                                        borderRadius: '2px'
+                                                    }}></div>
+                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                        Solution
+                                                    </h4>
+                                                </div>
+                                                <SolutionForm
+                                                    solutionForm={solutionForm}
+                                                    solutionFields={solutionFields}
+                                                    solutionTypes={solutionTypes}
+                                                    solutionStatuses={solutionStatuses}
+                                                    onAddSolutionField={handleAddSolutionField}
+                                                    onRemoveSolutionField={handleRemoveSolutionField}
+                                                    onSolutionTypeChange={handleSolutionTypeChange}
+                                                    onSolutionStatusChange={handleSolutionStatusChange}
+                                                    onSolutionFileUpload={(fileData) => {
+                                                    }}
+                                                    onFileView={(fileData) => {
+                                                        if (fileData && (fileData.url || fileData.uploadPath)) {
+                                                            window.open(fileData.url || fileData.uploadPath, '_blank');
+                                                        }
+                                                    }}
+                                                    isReadOnly={false}
+                                                    solutionData={currentSolutionData}
+                                                />
+                                            </div>
+                                        </Col>
+                                        <Col xs={24} md={12} lg={12}>
+                                            <div style={{
+                                                padding: '16px',
+                                                border: '1px solid #f0f0f0',
+                                                borderRadius: '10px',
+                                                backgroundColor: '#ffffff',
+                                                transition: 'all 0.3s ease',
+                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                            }}>
+                                                <div style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '8px',
+                                                    marginBottom: '12px',
+                                                    paddingBottom: '8px',
+                                                    borderBottom: '1px solid #f5f5f5'
+                                                }}>
+                                                    <div style={{
+                                                        width: '3px',
+                                                        height: '16px',
+                                                        backgroundColor: '#faad14',
+                                                        borderRadius: '2px'
+                                                    }}></div>
+                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                        Sparepart Selection
+                                                    </h4>
+                                                </div>
+                                                <div style={{
+                                                    maxHeight: '45vh',
+                                                    overflow: 'auto',
+                                                    border: '1px solid #e8e8e8',
+                                                    borderRadius: '8px',
+                                                    padding: '12px',
+                                                    backgroundColor: '#fafafa'
+                                                }}>
+                                                    <SparepartSelect
+                                                        selectedSparepartIds={selectedSparepartIds}
+                                                        onSparepartChange={setSelectedSparepartIds}
+                                                        isReadOnly={isErrorCodeFormReadOnly}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    </Row>
+
+                                    <div style={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                        padding: '16px 0 0 0',
+                                        borderTop: '1px solid #f0f0f0',
+                                        marginTop: '12px'
+                                    }}>
+                                        {/* Cancel Button - Only show when editing existing error code */}
+                                        {editingErrorCodeKey && (
+                                            <Button
+                                                size="large"
+                                                onClick={handleCreateNewErrorCode}
+                                                style={{
+                                                    backgroundColor: '#fff',
+                                                    borderColor: '#d9d9d9',
+                                                    color: '#666',
+                                                    borderRadius: '8px',
+                                                    height: '40px',
+                                                    padding: '0 24px',
+                                                    fontWeight: '500',
+                                                    transition: 'all 0.3s ease'
+                                                }}
+                                                onMouseEnter={(e) => {
+                                                    e.target.style.borderColor = '#ff4d4f';
+                                                    e.target.style.color = '#ff4d4f';
+                                                }}
+                                                onMouseLeave={(e) => {
+                                                    e.target.style.borderColor = '#d9d9d9';
+                                                    e.target.style.color = '#666';
+                                                }}
+                                            >
+                                                Cancel
+                                            </Button>
+                                        )}
+
+                                        {/* Save Button - Always show on right */}
+                                        <div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
                                             <Button
                                                 type="primary"
-                                                icon={<SearchOutlined />}
+                                                size="large"
+                                                onClick={handleSaveErrorCode}
                                                 style={{
                                                     backgroundColor: '#23A55A',
                                                     borderColor: '#23A55A',
+                                                    borderRadius: '8px',
+                                                    height: '40px',
+                                                    padding: '0 24px',
+                                                    fontWeight: '500',
+                                                    boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
+                                                    transition: 'all 0.3s ease'
+                                                }}
+                                                onMouseEnter={(e) => {
+                                                    e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
+                                                }}
+                                                onMouseLeave={(e) => {
+                                                    e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
                                                 }}
                                             >
-                                                Search
+                                                {editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
                                             </Button>
-                                        }
+                                        </div>
-                                        size="large"
+                                    </div>
-                                    />
+                                </div>
-                                </Col>
+                            </Card>
-                                <Col>
+                        </div>
-                                    <Space wrap size="small">
+                    </Col>
-                                        <ConfigProvider
+                </Row>
-                                            theme={{
-                                                token: { colorBgContainer: '#E9F6EF' },
-                                                components: {
-                                                    Button: {
-                                                        defaultBg: 'white',
-                                                        defaultColor: '#23A55A',
-                                                        defaultBorderColor: '#23A55A',
-                                                        defaultHoverColor: '#23A55A',
-                                                        defaultHoverBorderColor: '#23A55A',
-                                                    },
-                                                },
-                                            }}
-                                        >
-                                            <Button
-                                                icon={<PlusOutlined />}
-                                                onClick={() => navigate(`/master/brand-device/${id}/error-code/add`)}
-                                                size="large"
-                                            >
-                                                Add Error Code
-                                            </Button>
-                                        </ConfigProvider>
-                                    </Space>
-                                </Col>
-                            </Row>
-                        </Col>
-                        <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
-                            <TableList
-                                mobile
-                                cardColor={'#42AAFF'}
-                                header={'error_code'}
-                                showPreviewModal={handlePreviewErrorCode}
-                                showEditModal={handleEditErrorCodeNavigate}
-                                showDeleteDialog={handleDeleteErrorCode}
-                                getData={getErrorCodesData}
-                                queryParams={queryParams}
-                                columns={errorCodeColumns(handlePreviewErrorCode, handleEditErrorCodeNavigate, handleDeleteErrorCode)}
-                                triger={trigerFilter}
-                            />
-                        </Col>
-                    </Row>
-                </Card>
             );
         }
         return null;
@@ -763,9 +1198,6 @@ const EditBrandDevice = () => {
 
     return (
         <Card>
-            <Title level={4} style={{ margin: '0 0 24px 0' }}>
-                Edit Brand Device
-            </Title>
             <Steps current={currentStep} style={{ marginBottom: 24 }}>
                 <Step title="Brand Device Details" />
                 <Step title="Error Codes & Solutions" />
@@ -788,6 +1220,7 @@ const EditBrandDevice = () => {
                         <Button
                             type="primary"
                             onClick={handleNextStep}
+                            loading={loading}
                             style={{
                                 backgroundColor: '#23A55A',
                                 borderColor: '#23A55A',
@@ -805,7 +1238,7 @@ const EditBrandDevice = () => {
                                 borderColor: '#23A55A',
                             }}
                         >
-                            Kembali
+                            Selesai
                         </Button>
                     )}
                 </div>

src/pages/master/brandDevice/ViewFilePage.jsx

@@ -138,12 +138,6 @@ const ViewFilePage = () => {
 
             const targetPhase = savedPhase ? parseInt(savedPhase) : 1;
 
-            console.log({
-                savedPhase,
-                targetPhase,
-                id: fallbackId || id
-            });
-
             navigate(`/master/brand-device/edit/${fallbackId || id}`, {
                 state: { phase: targetPhase, fromFileViewer: true },
                 replace: true
@@ -174,9 +168,7 @@ const ViewFilePage = () => {
         const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
         const isPdf = fileExtension === 'pdf';
 
-        // const fileUrl = loading ? null : getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName);
 
-        // Show placeholder when loading
         if (loading) {
             return (
                 <div style={{ textAlign: 'center', padding: '50px' }}>
@@ -318,7 +310,6 @@ const ViewFilePage = () => {
                                 </Button>
                                 <Button
                                     onClick={() => {
-                                        // Retry loading PDF
                                         setPdfLoading(true);
                                         const folder = getFolderFromFileType('pdf');
                                         getFile(folder, actualFileName)

src/pages/master/brandDevice/component/BrandForm.jsx

@@ -7,9 +7,18 @@ const BrandForm = ({
     form,
     onValuesChange,
     isEdit = false,
+    brandInfo = null,
 }) => {
     const isActive = Form.useWatch('is_active', form) ?? true;
 
+    React.useEffect(() => {
+        if (brandInfo && brandInfo.brand_code) {
+            form.setFieldsValue({
+                brand_code: brandInfo.brand_code
+            });
+        }
+    }, [brandInfo, form]);
+
     return (
         <div>
             <Form

src/pages/master/brandDevice/component/FileUploadHandler.jsx

@@ -12,12 +12,13 @@ const FileUploadHandler = ({
     accept = '.pdf,.jpg,.jpeg,.png,.gif',
     disabled = false,
 
-    // File management
     fileList = [],
     onFileUpload,
     onFileRemove,
 
     existingFile = null,
+    clearSignal = null,
+    debugProps = {},
 
     uploadText = 'Click or drag file to this area to upload',
     uploadHint = 'Support for PDF and image files only',
@@ -34,6 +35,12 @@ const FileUploadHandler = ({
     const [isUploading, setIsUploading] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(null);
 
+    React.useEffect(() => {
+        if (clearSignal !== null && clearSignal > 0) {
+            setUploadedFile(null);
+        }
+    }, [clearSignal, debugProps]);
+
     const getBase64 = (file) =>
         new Promise((resolve, reject) => {
             const reader = new FileReader();
@@ -140,6 +147,7 @@ const FileUploadHandler = ({
                 }
             }
 
+  
             if (actualPath) {
                 let fileObject;
 
@@ -176,7 +184,6 @@ const FileUploadHandler = ({
                 setIsUploading(false);
                 return false;
             } else {
-                console.error('Failed to extract file path from upload response:', uploadResponse);
                 NotifAlert({
                     icon: 'error',
                     title: 'Gagal',
@@ -186,7 +193,6 @@ const FileUploadHandler = ({
                 return false;
             }
         } catch (error) {
-            console.error('Upload error:', error);
             NotifAlert({
                 icon: 'error',
                 title: 'Error',
@@ -204,16 +210,9 @@ const FileUploadHandler = ({
     };
 
     const handleRemove = () => {
-        console.log('🗑️ FileUploadHandler handleRemove called:', {
-            existingFile,
-            onFileRemove: typeof onFileRemove,
-            hasExistingFile: !!existingFile
-        });
-
         if (existingFile && onFileRemove) {
             onFileRemove(existingFile);
         } else if (onFileRemove) {
-            // Call onFileRemove even without existingFile to trigger form cleanup
             onFileRemove(null);
         }
     };
@@ -221,17 +220,9 @@ const FileUploadHandler = ({
     const renderExistingFile = () => {
         const fileToShow = existingFile || uploadedFile;
         if (!fileToShow) {
-            console.log('❌ FileUploadHandler renderExistingFile: No file to render');
             return null;
         }
 
-        console.log('✅ FileUploadHandler renderExistingFile: File found', {
-            existingFile: !!existingFile,
-            uploadedFile: !!uploadedFile,
-            fileName: fileToShow.name,
-            shouldShowDeleteButton: true
-        });
-
         const filePath = fileToShow.uploadPath || fileToShow.url || fileToShow.path_icon || fileToShow.path_solution;
         const fileName = fileToShow.name || filePath?.split('/').pop() || 'Unknown file';
         const fileType = getFileType(fileName);
@@ -257,7 +248,6 @@ const FileUploadHandler = ({
                     });
                 }
             } else {
-                // For PDFs and other files, open in new tab
                 const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
                 const filename = filePath.split('/').pop();
                 const fileUrl = getFileUrl(folder, filename);
@@ -404,7 +394,9 @@ const FileUploadHandler = ({
                 </Upload>
             )}
 
-            {renderExistingFile()}
+            {/* renderExistingFile() is disabled because SolutionField.jsx already handles file card rendering */}
+            {/* This prevents duplicate card rendering */}
+            {/* {renderExistingFile()} */}
 
             {showPreview && (
                 <Modal

src/pages/master/brandDevice/component/ListBrandDevice.jsx

@@ -91,9 +91,9 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 const ListBrandDevice = memo(function ListBrandDevice(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
 
-    const defaultFilter = { search: '' };
+    const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
-    const [searchValue, setSearchValue] = useState('');
+    const [searchText, setSearchText] = useState('');
 
     const navigate = useNavigate();
 
@@ -114,13 +114,13 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
     };
 
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchText });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
-        setSearchValue('');
+        setSearchText('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
@@ -182,12 +182,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
                                     placeholder="Search brand device..."
-                                    value={searchValue}
+                                    value={searchText}
                                     onChange={(e) => {
                                         const value = e.target.value;
-                                        setSearchValue(value);
+                                        setSearchText(value);
                                         if (value === '') {
-                                            setFormDataFilter({ search: '' });
+                                            setFormDataFilter({ criteria: '' });
                                             setTrigerFilter((prev) => !prev);
                                         }
                                     }}