add error code icon functionality and color selection in forms

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -4,6 +4,7 @@ import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal }
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { getBrandById, updateBrand } from '../../../api/master-brand';
+import { getFileUrl } from '../../../api/file-uploads';
 import BrandForm from './component/BrandForm';
 import ErrorCodeForm from './component/ErrorCodeForm';
 import ErrorCodeTable from './component/ListErrorCode';
@@ -37,6 +38,7 @@ const EditBrandDevice = () => {
     const [loading, setLoading] = useState(true);
     const [formData, setFormData] = useState(defaultData);
     const [errorCodes, setErrorCodes] = useState([]);
+    const [errorCodeIcon, setErrorCodeIcon] = useState(null);
 
     const {
         solutionFields,
@@ -111,8 +113,21 @@ const EditBrandDevice = () => {
                               error_code: ec.error_code,
                               error_code_name: ec.error_code_name || '',
                               error_code_description: ec.error_code_description || '',
+                              error_code_color: ec.error_code_color || '#000000',
+                              path_icon: ec.path_icon || '',
                               status: ec.is_active,
                               solution: ec.solution || [],
+                              errorCodeIcon: ec.path_icon ? {
+                                  name: 'icon',
+                                  uploadPath: ec.path_icon,
+                                  url: (() => {
+                                      const pathParts = ec.path_icon.split('/');
+                                      const folder = pathParts[0];
+                                      const filename = pathParts.slice(1).join('/');
+                                      return getFileUrl(folder, filename);
+                                  })(),
+                                  type_solution: 'image'
+                              } : null,
                           }))
                         : [];
 
@@ -171,6 +186,8 @@ const EditBrandDevice = () => {
                     error_code: ec.error_code,
                     error_code_name: ec.error_code_name || '',
                     error_code_description: ec.error_code_description || '',
+                    error_code_color: ec.error_code_color || '#000000',
+                    path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
                     is_active: ec.status !== undefined ? ec.status : true,
                     solution: (ec.solution || []).map((sol) => ({
                         solution_name: sol.solution_name,
@@ -215,8 +232,10 @@ const EditBrandDevice = () => {
             error_code: record.error_code,
             error_code_name: record.error_code_name,
             error_code_description: record.error_code_description,
+            error_code_color: record.error_code_color,
             status: record.status,
         });
+        setErrorCodeIcon(record.errorCodeIcon || null);
         setIsErrorCodeFormReadOnly(true);
         setEditingErrorCodeKey(record.key);
 
@@ -230,8 +249,10 @@ const EditBrandDevice = () => {
             error_code: record.error_code,
             error_code_name: record.error_code_name,
             error_code_description: record.error_code_description,
+            error_code_color: record.error_code_color,
             status: record.status,
         });
+        setErrorCodeIcon(record.errorCodeIcon || null);
         setIsErrorCodeFormReadOnly(false);
         setEditingErrorCodeKey(record.key);
 
@@ -246,10 +267,16 @@ const EditBrandDevice = () => {
     };
 
     const handleAddErrorCode = (newErrorCode) => {
+        // Include the current icon in the error code
+        const errorCodeWithIcon = {
+            ...newErrorCode,
+            errorCodeIcon: errorCodeIcon
+        };
+
         let updatedErrorCodes;
         if (editingErrorCodeKey) {
             updatedErrorCodes = errorCodes.map((item) =>
-                item.key === editingErrorCodeKey ? newErrorCode : item
+                item.key === editingErrorCodeKey ? errorCodeWithIcon : item
             );
             NotifOk({
                 icon: 'success',
@@ -257,7 +284,7 @@ const EditBrandDevice = () => {
                 message: 'Error code berhasil diupdate!',
             });
         } else {
-            updatedErrorCodes = [...errorCodes, newErrorCode];
+            updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
             NotifOk({
                 icon: 'success',
                 title: 'Berhasil',
@@ -277,6 +304,7 @@ const EditBrandDevice = () => {
             solution_type_0: 'text',
         });
         setFileList([]);
+        setErrorCodeIcon(null);
         resetSolutionFields();
         setIsErrorCodeFormReadOnly(false);
         setEditingErrorCodeKey(null);
@@ -305,6 +333,14 @@ const EditBrandDevice = () => {
         resetErrorCodeForm();
     };
 
+    const handleErrorCodeIconUpload = (iconData) => {
+        setErrorCodeIcon(iconData);
+    };
+
+    const handleErrorCodeIconRemove = () => {
+        setErrorCodeIcon(null);
+    };
+
     const handleFileView = (pathSolution, fileType) => {
         localStorage.setItem(`brand_device_edit_${id}_last_phase`, currentStep.toString());
 
@@ -399,6 +435,9 @@ const EditBrandDevice = () => {
                                 onCreateNewErrorCode={handleCreateNewErrorCode}
                                 onResetForm={resetErrorCodeForm}
                                 errorCodes={errorCodes}
+                                errorCodeIcon={errorCodeIcon}
+                                onErrorCodeIconUpload={handleErrorCodeIconUpload}
+                                onErrorCodeIconRemove={handleErrorCodeIconRemove}
                             />
                         </Form>
                     </Col>