Add ErrorCodeListModal component for managing error codes with enhanced UI and functionality

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -1,14 +1,19 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Divider, Typography, Button, Steps, Form, Row, Col, Card } from 'antd';
+import { Divider, Typography, Button, Steps, Form, Row, Col, Card, ConfigProvider } from 'antd';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { createBrand } from '../../../api/master-brand';
 import BrandForm from './component/BrandForm';
 import ErrorCodeForm from './component/ErrorCodeForm';
+import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
 import ErrorCodeTable from './component/ListErrorCode';
+import ErrorCodeListModal from './component/ErrorCodeListModal';
 import FormActions from './component/FormActions';
-import { useErrorCodeLogic } from './hooks/errorCode';
+import SparepartForm from './component/SparepartForm';
+import SolutionForm from './component/SolutionForm';
+import { useSolutionLogic } from './hooks/solution';
+import { useSparepartLogic } from './hooks/sparepart';
 import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
 
 const { Title } = Typography;
@@ -28,6 +33,8 @@ const AddBrandDevice = () => {
     const { setBreadcrumbItems } = useBreadcrumb();
     const [brandForm] = Form.useForm();
     const [errorCodeForm] = Form.useForm();
+    const [solutionForm] = Form.useForm();
+    const [sparepartForm] = Form.useForm();
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [currentStep, setCurrentStep] = useState(0);
     const [fileList, setFileList] = useState([]);
@@ -37,21 +44,53 @@ const AddBrandDevice = () => {
     const [formData, setFormData] = useState(defaultData);
     const [errorCodes, setErrorCodes] = useState([]);
     const [errorCodeIcon, setErrorCodeIcon] = useState(null);
+    const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
+    const [sparepartImages, setSparepartImages] = useState({});
 
     const {
         solutionFields,
         solutionTypes,
         solutionStatuses,
-        firstSolutionValid,
         solutionsToDelete,
+        firstSolutionValid,
         handleAddSolutionField,
         handleRemoveSolutionField,
         handleSolutionTypeChange,
         handleSolutionStatusChange,
         resetSolutionFields,
         checkFirstSolutionValid,
+        getSolutionData,
         setSolutionsForExistingRecord,
-    } = useErrorCodeLogic(errorCodeForm, fileList);
+    } = useSolutionLogic(solutionForm);
+
+    const {
+        sparepartFields,
+        sparepartTypes,
+        sparepartStatuses,
+        handleAddSparepartField,
+        handleRemoveSparepartField,
+        handleSparepartTypeChange,
+        handleSparepartStatusChange,
+        resetSparepartFields,
+        getSparepartData,
+        setSparepartForExistingRecord,
+    } = useSparepartLogic(sparepartForm);
+
+    // Handlers for sparepart image upload
+    const handleSparepartImageUpload = (fieldKey, imageData) => {
+        setSparepartImages(prev => ({
+            ...prev,
+            [fieldKey]: imageData
+        }));
+    };
+
+    const handleSparepartImageRemove = (fieldKey) => {
+        setSparepartImages(prev => {
+            const newImages = { ...prev };
+            delete newImages[fieldKey];
+            return newImages;
+        });
+    };
 
     useEffect(() => {
         setBreadcrumbItems([
@@ -96,6 +135,17 @@ const AddBrandDevice = () => {
     const handleFinish = async () => {
         setConfirmLoading(true);
         try {
+            // Validation: Ensure at least one error code
+            if (errorCodes.length === 0) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Perhatian',
+                    message: 'Setidaknya tambahkan 1 error code!',
+                });
+                setConfirmLoading(false);
+                return;
+            }
+
             const transformedErrorCodes = errorCodes.map((ec) => ({
                 error_code: ec.error_code,
                 error_code_name: ec.error_code_name || '',
@@ -110,6 +160,13 @@ const AddBrandDevice = () => {
                     path_solution: sol.path_solution || '',
                     is_active: sol.is_active !== false,
                 })),
+                // Note: Sparepart data is collected but not sent to backend yet
+                // sparepart: (ec.sparepart || []).map((sp) => ({
+                //     type: sp.type || 'required',
+                //     name: sp.name || '',
+                //     quantity: sp.quantity || 1,
+                //     is_active: sp.is_active !== false,
+                // })),
             }));
 
             const finalFormData = {
@@ -118,30 +175,11 @@ const AddBrandDevice = () => {
                 brand_model: formData.brand_model || '',
                 brand_manufacture: formData.brand_manufacture,
                 is_active: formData.is_active,
-                error_code:
+                error_code: transformedErrorCodes,
-                    transformedErrorCodes.length > 0
-                        ? transformedErrorCodes
-                        : [
-                              {
-                                  error_code: 'DEFAULT',
-                                  error_code_name: 'Default Error Code',
-                                  error_code_description: 'Default error description',
-                                  error_code_color: '#000000',
-                                  path_icon: '',
-                                  is_active: true,
-                                  solution: [
-                                      {
-                                          solution_name: 'Default Solution',
-                                          type_solution: 'text',
-                                          text_solution: 'Default solution text',
-                                          path_solution: '',
-                                          is_active: true,
-                                      },
-                                  ],
-                              },
-                          ],
             };
 
+            console.log('Final form data:', finalFormData); // Debug log
+
             const response = await createBrand(finalFormData);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
@@ -159,6 +197,7 @@ const AddBrandDevice = () => {
                 });
             }
         } catch (error) {
+            console.error('Finish Error:', error);
             NotifAlert({
                 icon: 'error',
                 title: 'Gagal',
@@ -183,17 +222,26 @@ const AddBrandDevice = () => {
         setEditingErrorCodeKey(null);
 
         if (record.solution && record.solution.length > 0) {
-            setSolutionsForExistingRecord(record.solution, errorCodeForm);
+            setSolutionsForExistingRecord(record.solution, solutionForm);
+        }
+
+        if (record.sparepart && record.sparepart.length > 0) {
+            setSparepartForExistingRecord(record.sparepart, sparepartForm);
         }
     };
 
     const handleEditErrorCode = (record) => {
+        // Prevent infinite loop
+        if (editingErrorCodeKey === record.key) {
+            return;
+        }
+
         errorCodeForm.setFieldsValue({
             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,
+            error_code_color: record.error_code_color || '#000000',
-            status: record.status,
+            status: record.status !== false,
         });
         setFileList(record.fileList || []);
         setErrorCodeIcon(record.errorCodeIcon || null);
@@ -201,38 +249,102 @@ const AddBrandDevice = () => {
         setEditingErrorCodeKey(record.key);
 
         if (record.solution && record.solution.length > 0) {
-            setSolutionsForExistingRecord(record.solution, errorCodeForm);
+            // Reset solution fields first
+            resetSolutionFields();
+            // Then load new solutions
+            setTimeout(() => {
+                setSolutionsForExistingRecord(record.solution, solutionForm);
+            }, 0);
+        } else {
+            resetSolutionFields();
+        }
+
+        if (record.sparepart && record.sparepart.length > 0) {
+            // Reset sparepart fields first
+            resetSparepartFields();
+            // Then load new spareparts
+            setTimeout(() => {
+                setSparepartForExistingRecord(record.sparepart, sparepartForm);
+            }, 0);
+        } else {
+            resetSparepartFields();
         }
     };
 
-    const handleAddErrorCode = async (newErrorCode) => {
+    const handleAddErrorCode = async () => {
-        // Include the current icon in the error code
+        try {
-        const errorCodeWithIcon = {
+            const formValues = errorCodeForm.getFieldsValue();
-            ...newErrorCode,
-            errorCodeIcon: errorCodeIcon
-        };
 
-        if (editingErrorCodeKey) {
+            // Validation
-            const updatedCodes = errorCodes.map((item) =>
+            if (!formValues.error_code || !formValues.error_code_name) {
-                item.key === editingErrorCodeKey ? errorCodeWithIcon : item
+                NotifAlert({
-            );
+                    icon: 'warning',
-            setErrorCodes(updatedCodes);
+                    title: 'Perhatian',
-            NotifOk({
+                    message: 'Error code dan error name wajib diisi!',
-                icon: 'success',
+                });
-                title: 'Berhasil',
+                return;
-                message: 'Error code berhasil diupdate!',
+            }
-            });
+
-        } else {
+            // Validate at least 1 solution
-            const updatedCodes = [...errorCodes, errorCodeWithIcon];
+            const solutions = getSolutionData();
-            setErrorCodes(updatedCodes);
+
-            NotifOk({
+            if (solutions.length === 0) {
-                icon: 'success',
+                NotifAlert({
-                title: 'Berhasil',
+                    icon: 'warning',
-                message: 'Error code berhasil ditambahkan!',
+                    title: 'Perhatian',
+                    message: 'Setiap error code harus memiliki minimal 1 solution!',
+                });
+                return;
+            }
+
+            // Get sparepart data (optional, no backend yet)
+            const spareparts = getSparepartData() || [];
+
+            const newErrorCode = {
+                key: Date.now(),
+                error_code: formValues.error_code,
+                error_code_name: formValues.error_code_name || '',
+                error_code_description: formValues.error_code_description || '',
+                error_code_color: formValues.error_code_color || '#000000',
+                path_icon: errorCodeIcon?.uploadPath || '',
+                status: formValues.status !== false,
+                errorCodeIcon: errorCodeIcon,
+                solution: solutions,
+                sparepart: spareparts,
+            };
+
+            if (editingErrorCodeKey) {
+                const updatedCodes = errorCodes.map((item) =>
+                    item.key === editingErrorCodeKey ? newErrorCode : item
+                );
+                setErrorCodes(updatedCodes);
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Error code berhasil diupdate!',
+                });
+            } else {
+                const updatedCodes = [...errorCodes, newErrorCode];
+                setErrorCodes(updatedCodes);
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Error code berhasil ditambahkan!',
+                });
+            }
+
+            // Reset all forms
+            resetErrorCodeForm();
+            resetSolutionFields();
+            resetSparepartFields();
+        } catch (error) {
+            console.error('Error adding error code:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal menambahkan error code',
             });
         }
-
-        resetErrorCodeForm();
     };
 
     const resetErrorCodeForm = () => {
@@ -366,62 +478,132 @@ const AddBrandDevice = () => {
 
         if (currentStep === 1) {
             return (
-                <Row gutter={24}>
+                <>
-                    <Col span={8}>
+                    <Row gutter={16} style={{ marginBottom: 24 }}>
-                        <Title level={5} style={{ marginBottom: 16 }}>
+                        {/* Error Code Form Column */}
-                            {isErrorCodeFormReadOnly
+                        <Col span={8}>
-                                ? 'View Error Code'
+                            <Card size="small" title="Error Code">
-                                : editingErrorCodeKey
+                                <Form
-                                ? 'Edit Error Code'
+                                    form={errorCodeForm}
-                                : 'Tambah Error Code'}
+                                    layout="vertical"
-                        </Title>
+                                    initialValues={{
-                        <Form
+                                        status: true,
-                            form={errorCodeForm}
+                                    }}
-                            layout="vertical"
+                                >
-                            initialValues={{
+                                    <ErrorCodeSimpleForm
-                                status: true,
+                                        errorCodeForm={errorCodeForm}
-                                solution_status_0: true,
+                                        isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
-                                solution_type_0: 'text',
+                                        errorCodeIcon={errorCodeIcon}
-                            }}
+                                        onErrorCodeIconUpload={handleErrorCodeIconUpload}
-                            onValuesChange={checkFirstSolutionValid}
+                                        onErrorCodeIconRemove={handleErrorCodeIconRemove}
-                        >
+                                        onAddErrorCode={handleAddErrorCode}
-                            <ErrorCodeForm
+                                    />
-                                errorCodeForm={errorCodeForm}
+                                </Form>
-                                isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
+                            </Card>
-                                editingErrorCodeKey={editingErrorCodeKey}
+                        </Col>
-                                solutionFields={solutionFields}
+
-                                solutionTypes={solutionTypes}
+                        {/* Solution Form Column */}
-                                solutionStatuses={solutionStatuses}
+                        <Col span={8}>
-                                fileList={fileList}
+                            <Card size="small" title="Solutions">
-                                solutionsToDelete={solutionsToDelete}
+                                <Form
-                                firstSolutionValid={firstSolutionValid}
+                                    form={solutionForm}
-                                onAddErrorCode={handleAddErrorCode}
+                                    layout="vertical"
-                                onAddSolutionField={handleAddSolutionField}
+                                    initialValues={{
-                                onRemoveSolutionField={handleRemoveSolutionField}
+                                        solution_status_0: true,
-                                onSolutionTypeChange={handleSolutionTypeChange}
+                                        solution_type_0: 'text',
-                                onSolutionStatusChange={handleSolutionStatusChange}
+                                    }}
-                                onSolutionFileUpload={handleSolutionFileUpload}
+                                    onValuesChange={checkFirstSolutionValid}
-                                onFileView={handleFileView}
+                                >
-                                onCreateNewErrorCode={handleCreateNewErrorCode}
+                                    <SolutionForm
-                                onResetForm={resetErrorCodeForm}
+                                        solutionForm={solutionForm}
-                                errorCodes={errorCodes}
+                                        solutionFields={solutionFields}
-                                errorCodeIcon={errorCodeIcon}
+                                        solutionTypes={solutionTypes}
-                                onErrorCodeIconUpload={handleErrorCodeIconUpload}
+                                        solutionStatuses={solutionStatuses}
-                                onErrorCodeIconRemove={handleErrorCodeIconRemove}
+                                        fileList={fileList}
-                            />
+                                        solutionsToDelete={solutionsToDelete}
-                        </Form>
+                                        firstSolutionValid={firstSolutionValid}
-                    </Col>
+                                        onAddSolutionField={handleAddSolutionField}
-                    <Col span={16}>
+                                        onRemoveSolutionField={handleRemoveSolutionField}
-                        <ErrorCodeTable
+                                        onSolutionTypeChange={handleSolutionTypeChange}
-                            errorCodes={errorCodes}
+                                        onSolutionStatusChange={handleSolutionStatusChange}
-                            loading={loading}
+                                        onSolutionFileUpload={handleSolutionFileUpload}
-                            onPreview={handlePreviewErrorCode}
+                                        onFileView={handleFileView}
-                            onEdit={handleEditErrorCode}
+                                        isReadOnly={isErrorCodeFormReadOnly}
-                            onDelete={handleDeleteErrorCode}
+                                    />
-                            onFileView={handleFileView}
+                                </Form>
-                        />
+                            </Card>
-                    </Col>
+                        </Col>
-                </Row>
+
+                        {/* Sparepart Form Column */}
+                        <Col span={8}>
+                            <Card size="small" title="Spareparts">
+                                <Form
+                                    form={sparepartForm}
+                                    layout="vertical"
+                                    initialValues={{
+                                        sparepart_status_0: true,
+                                        sparepart_type_0: 'required',
+                                    }}
+                                >
+                                    <SparepartForm
+                                        sparepartForm={sparepartForm}
+                                        sparepartFields={sparepartFields}
+                                        onAddSparepartField={handleAddSparepartField}
+                                        onRemoveSparepartField={handleRemoveSparepartField}
+                                        onSparepartTypeChange={handleSparepartTypeChange}
+                                        onSparepartStatusChange={handleSparepartStatusChange}
+                                        onSparepartImageUpload={handleSparepartImageUpload}
+                                        onSparepartImageRemove={handleSparepartImageRemove}
+                                        sparepartImages={sparepartImages}
+                                        isReadOnly={false}
+                                    />
+                                </Form>
+                            </Card>
+                        </Col>
+                    </Row>
+
+                    {/* Error Codes List Button */}
+                    <Row justify="center">
+                        <Col>
+                            <ConfigProvider
+                                theme={{
+                                    token: { colorBgContainer: '#23a55ade' },
+                                    components: {
+                                        Button: {
+                                            defaultBg: '#23a55a',
+                                            defaultColor: '#FFFFFF',
+                                            defaultBorderColor: '#23a55a',
+                                            defaultHoverBg: '#209652',
+                                            defaultHoverColor: '#FFFFFF',
+                                            defaultHoverBorderColor: '#23a55a',
+                                        },
+                                    },
+                                }}
+                            >
+                                <Button
+                                    type="primary"
+                                    size="large"
+                                    onClick={() => setShowErrorCodeModal(true)}
+                                    style={{ minWidth: '200px' }}
+                                >
+                                    View All Error Codes ({errorCodes.length})
+                                </Button>
+                            </ConfigProvider>
+                        </Col>
+                    </Row>
+
+                    {/* Error Codes List Modal */}
+                    <ErrorCodeListModal
+                        visible={showErrorCodeModal}
+                        onClose={() => setShowErrorCodeModal(false)}
+                        errorCodes={errorCodes}
+                        loading={loading}
+                        onPreview={handlePreviewErrorCode}
+                        onEdit={handleEditErrorCode}
+                        onDelete={handleDeleteErrorCode}
+                        onAddNew={handleCreateNewErrorCode}
+                    />
+                </>
             );
         }
         return null;
@@ -434,7 +616,7 @@ const AddBrandDevice = () => {
             </Title>
             <Steps current={currentStep} style={{ marginBottom: 24 }}>
                 <Step title="Brand Device Details" />
-                <Step title="Error Codes" />
+                <Step title="Error Codes, Solutions & Spareparts" />
             </Steps>
             <div style={{ marginTop: 24 }}>{renderStepContent()}</div>
             <Divider />

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -1,15 +1,19 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal } 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';
 import { getFileUrl } from '../../../api/file-uploads';
 import BrandForm from './component/BrandForm';
-import ErrorCodeForm from './component/ErrorCodeForm';
+import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
-import ErrorCodeTable from './component/ListErrorCode';
+import SolutionForm from './component/SolutionForm';
+import SparepartForm from './component/SparepartForm';
+import ErrorCodeListModal from './component/ErrorCodeListModal';
 import FormActions from './component/FormActions';
 import { useErrorCodeLogic } from './hooks/errorCode';
+import { useSolutionLogic } from './hooks/solution';
+import { useSparepartLogic } from './hooks/sparepart';
 
 const { Title } = Typography;
 const { Step } = Steps;
@@ -39,21 +43,59 @@ const EditBrandDevice = () => {
     const [formData, setFormData] = useState(defaultData);
     const [errorCodes, setErrorCodes] = useState([]);
     const [errorCodeIcon, setErrorCodeIcon] = useState(null);
+    const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
+    const [sparepartImages, setSparepartImages] = useState({});
+    const [solutionForm] = Form.useForm();
+    const [sparepartForm] = Form.useForm();
+
+    const {
+        errorCodeFields,
+        addErrorCode,
+        removeErrorCode,
+        editErrorCode,
+    } = useErrorCodeLogic(errorCodeForm, fileList);
 
     const {
         solutionFields,
         solutionTypes,
         solutionStatuses,
-        firstSolutionValid,
-        solutionsToDelete,
         handleAddSolutionField,
         handleRemoveSolutionField,
         handleSolutionTypeChange,
         handleSolutionStatusChange,
         resetSolutionFields,
-        checkFirstSolutionValid,
+        getSolutionData,
         setSolutionsForExistingRecord,
-    } = useErrorCodeLogic(errorCodeForm, fileList);
+    } = useSolutionLogic(solutionForm);
+
+    const {
+        sparepartFields,
+        sparepartTypes,
+        sparepartStatuses,
+        handleAddSparepartField,
+        handleRemoveSparepartField,
+        handleSparepartTypeChange,
+        handleSparepartStatusChange,
+        resetSparepartFields,
+        getSparepartData,
+        setSparepartForExistingRecord,
+    } = useSparepartLogic(sparepartForm);
+
+    // Handlers for sparepart image upload
+    const handleSparepartImageUpload = (fieldKey, imageData) => {
+        setSparepartImages(prev => ({
+            ...prev,
+            [fieldKey]: imageData
+        }));
+    };
+
+    const handleSparepartImageRemove = (fieldKey) => {
+        setSparepartImages(prev => {
+            const newImages = { ...prev };
+            delete newImages[fieldKey];
+            return newImages;
+        });
+    };
 
     useEffect(() => {
         const fetchBrandData = async () => {
@@ -176,27 +218,65 @@ const EditBrandDevice = () => {
     const handleFinish = async () => {
         setConfirmLoading(true);
         try {
+            // Get current solution and sparepart data from forms
+            const currentSolutionData = getSolutionData();
+            const currentSparepartData = getSparepartData();
+
             const finalFormData = {
                 brand_name: formData.brand_name,
                 brand_type: formData.brand_type || '',
                 brand_model: formData.brand_model || '',
                 brand_manufacture: formData.brand_manufacture,
                 is_active: formData.is_active,
-                error_code: errorCodes.map((ec) => ({
+                error_code: errorCodes.map((ec) => {
-                    error_code: ec.error_code,
+                    // If editing current error code, get latest data from forms
-                    error_code_name: ec.error_code_name || '',
+                    if (ec.key === editingErrorCodeKey) {
-                    error_code_description: ec.error_code_description || '',
+                        return {
-                    error_code_color: ec.error_code_color || '#000000',
+                            error_code: ec.error_code,
-                    path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
+                            error_code_name: ec.error_code_name || '',
-                    is_active: ec.status !== undefined ? ec.status : true,
+                            error_code_description: ec.error_code_description || '',
-                    solution: (ec.solution || []).map((sol) => ({
+                            error_code_color: ec.error_code_color || '#000000',
-                        solution_name: sol.solution_name,
+                            path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
-                        type_solution: sol.type_solution,
+                            is_active: ec.status !== undefined ? ec.status : true,
-                        text_solution: sol.text_solution || '',
+                            solution: currentSolutionData.map((sol) => ({
-                        path_solution: sol.path_solution || '',
+                                solution_name: sol.solution_name,
-                        is_active: sol.is_active !== false,
+                                type_solution: sol.type_solution,
-                    })),
+                                text_solution: sol.text_solution || '',
-                })),
+                                path_solution: sol.path_solution || '',
+                                is_active: sol.is_active !== false,
+                            })),
+                            sparepart: currentSparepartData.map((sp) => ({
+                                name: sp.name,
+                                description: sp.description || '',
+                                is_active: sp.is_active !== false,
+                                sparepart_image: sparepartImages[sp.key || sp.id] || null,
+                            })),
+                        };
+                    }
+
+                    // Return existing data for other error codes
+                    return {
+                        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,
+                            type_solution: sol.type_solution,
+                            text_solution: sol.text_solution || '',
+                            path_solution: sol.path_solution || '',
+                            is_active: sol.is_active !== false,
+                        })),
+                        sparepart: (ec.sparepart || []).map((sp) => ({
+                            name: sp.name,
+                            description: sp.description || '',
+                            is_active: sp.is_active !== false,
+                            sparepart_image: sp.sparepart_image || null,
+                        })),
+                    };
+                }),
             };
 
             const response = await updateBrand(id, finalFormData);
@@ -256,8 +336,23 @@ const EditBrandDevice = () => {
         setIsErrorCodeFormReadOnly(false);
         setEditingErrorCodeKey(record.key);
 
+        // Load solutions to solution form
         if (record.solution && record.solution.length > 0) {
-            setSolutionsForExistingRecord(record.solution, errorCodeForm);
+            setSolutionsForExistingRecord(record.solution, solutionForm);
+        }
+
+        // Load spareparts to sparepart form
+        if (record.sparepart && record.sparepart.length > 0) {
+            setSparepartForExistingRecord(record.sparepart, sparepartForm);
+
+            // Load sparepart images
+            const newSparepartImages = {};
+            record.sparepart.forEach(sparepart => {
+                if (sparepart.sparepart_image) {
+                    newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
+                }
+            });
+            setSparepartImages(newSparepartImages);
         }
 
         const formElement = document.querySelector('.ant-form');
@@ -331,6 +426,12 @@ const EditBrandDevice = () => {
 
     const handleCreateNewErrorCode = () => {
         resetErrorCodeForm();
+        resetSolutionFields();
+        resetSparepartFields();
+        setErrorCodeIcon(null);
+        setSparepartImages({});
+        setIsErrorCodeFormReadOnly(false);
+        setEditingErrorCodeKey(null);
     };
 
     const handleErrorCodeIconUpload = (iconData) => {
@@ -394,73 +495,142 @@ const EditBrandDevice = () => {
 
         if (currentStep === 1) {
             return (
-                <Row gutter={24}>
+                <>
-                    <Col span={8}>
+                    <Row gutter={24}>
-                        <Title level={5} style={{ marginBottom: 16 }}>
+                        <Col span={8}>
-                            {isErrorCodeFormReadOnly
+                            <Card
-                                ? editingErrorCodeKey
+                                title={
-                                    ? 'View Error Code'
+                                    <Title level={5} style={{ margin: 0 }}>
-                                    : 'Error Code Form'
+                                        {isErrorCodeFormReadOnly
-                                : editingErrorCodeKey
+                                            ? editingErrorCodeKey
-                                ? 'Edit Error Code'
+                                                ? 'View Error Code'
-                                : 'Tambah Error Code'}
+                                                : 'Error Code Form'
-                        </Title>
+                                            : editingErrorCodeKey
-                        <Form
+                                            ? 'Edit Error Code'
-                            form={errorCodeForm}
+                                            : 'Tambah Error Code'}
-                            layout="vertical"
+                                    </Title>
-                            initialValues={{
+                                }
-                                status: true,
+                                size="small"
-                                solution_status_0: true,
+                            >
-                                solution_type_0: 'text',
+                                <Form
-                            }}
+                                    form={errorCodeForm}
-                            onValuesChange={checkFirstSolutionValid}
+                                    layout="vertical"
-                        >
+                                    initialValues={{
-                            <ErrorCodeForm
+                                        status: true,
-                                errorCodeForm={errorCodeForm}
+                                    }}
-                                isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
+                                >
-                                editingErrorCodeKey={editingErrorCodeKey}
+                                    <ErrorCodeSimpleForm
-                                solutionFields={solutionFields}
+                                        errorCodeForm={errorCodeForm}
-                                solutionTypes={solutionTypes}
+                                        isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
-                                solutionStatuses={solutionStatuses}
+                                        errorCodeIcon={errorCodeIcon}
-                                fileList={fileList}
+                                        onErrorCodeIconUpload={handleErrorCodeIconUpload}
-                                solutionsToDelete={solutionsToDelete}
+                                        onErrorCodeIconRemove={handleErrorCodeIconRemove}
-                                firstSolutionValid={firstSolutionValid}
+                                        onAddErrorCode={handleAddErrorCode}
-                                onAddErrorCode={handleAddErrorCode}
+                                    />
-                                onAddSolutionField={handleAddSolutionField}
+                                </Form>
-                                onRemoveSolutionField={handleRemoveSolutionField}
+                            </Card>
-                                onSolutionTypeChange={handleSolutionTypeChange}
+                        </Col>
-                                onSolutionStatusChange={handleSolutionStatusChange}
+                        <Col span={8}>
-                                onSolutionFileUpload={handleSolutionFileUpload}
+                            <Card
-                                onFileView={handleFileView}
+                                title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
-                                onCreateNewErrorCode={handleCreateNewErrorCode}
+                                size="small"
-                                onResetForm={resetErrorCodeForm}
+                            >
-                                errorCodes={errorCodes}
+                                <Form
-                                errorCodeIcon={errorCodeIcon}
+                                    form={solutionForm}
-                                onErrorCodeIconUpload={handleErrorCodeIconUpload}
+                                    layout="vertical"
-                                onErrorCodeIconRemove={handleErrorCodeIconRemove}
+                                    initialValues={{
-                            />
+                                        solution_status_0: true,
-                        </Form>
+                                        solution_type_0: 'text',
-                    </Col>
+                                    }}
-                    <Col span={16}>
+                                >
-                        <ErrorCodeTable
+                                    <SolutionForm
-                            errorCodes={
+                                        solutionForm={solutionForm}
-                                loading
+                                        solutionFields={solutionFields}
-                                    ? Array.from({ length: 3 }, (_, index) => ({
+                                        solutionTypes={solutionTypes}
-                                          key: `loading-${index}`,
+                                        solutionStatuses={solutionStatuses}
-                                          error_code: 'Loading...',
+                                        onAddSolutionField={handleAddSolutionField}
-                                          error_code_name: 'Loading...',
+                                        onRemoveSolutionField={handleRemoveSolutionField}
-                                          solution: [],
+                                        onSolutionTypeChange={handleSolutionTypeChange}
-                                      }))
+                                        onSolutionStatusChange={handleSolutionStatusChange}
-                                    : errorCodes
+                                        isReadOnly={isErrorCodeFormReadOnly}
-                            }
+                                        onFileUpload={handleSolutionFileUpload}
-                            loading={loading}
+                                        onFileView={handleFileView}
-                            onPreview={handlePreviewErrorCode}
+                                    />
-                            onEdit={handleEditErrorCode}
+                                </Form>
-                            onDelete={handleDeleteErrorCode}
+                            </Card>
-                            onFileView={handleFileView}
+                        </Col>
-                        />
+                        <Col span={8}>
-                    </Col>
+                            <Card
-                </Row>
+                                title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
+                                size="small"
+                            >
+                                <Form
+                                    form={sparepartForm}
+                                    layout="vertical"
+                                    initialValues={{
+                                        sparepart_status_0: true,
+                                        sparepart_type_0: 'required',
+                                    }}
+                                >
+                                    <SparepartForm
+                                        sparepartForm={sparepartForm}
+                                        sparepartFields={sparepartFields}
+                                        onAddSparepartField={handleAddSparepartField}
+                                        onRemoveSparepartField={handleRemoveSparepartField}
+                                        onSparepartTypeChange={handleSparepartTypeChange}
+                                        onSparepartStatusChange={handleSparepartStatusChange}
+                                        onSparepartImageUpload={handleSparepartImageUpload}
+                                        onSparepartImageRemove={handleSparepartImageRemove}
+                                        sparepartImages={sparepartImages}
+                                        isReadOnly={isErrorCodeFormReadOnly}
+                                    />
+                                </Form>
+                            </Card>
+                        </Col>
+                    </Row>
+
+                    {/* Error Codes List Button */}
+                    <Row justify="center">
+                        <Col>
+                            <ConfigProvider
+                                theme={{
+                                    token: { colorBgContainer: '#23a55ade' },
+                                    components: {
+                                        Button: {
+                                            defaultBg: '#23a55a',
+                                            defaultColor: '#FFFFFF',
+                                            defaultBorderColor: '#23a55a',
+                                            defaultHoverBg: '#209652',
+                                            defaultHoverColor: '#FFFFFF',
+                                            defaultHoverBorderColor: '#23a55a',
+                                        },
+                                    },
+                                }}
+                            >
+                                <Button
+                                    type="primary"
+                                    size="large"
+                                    onClick={() => setShowErrorCodeModal(true)}
+                                    style={{ minWidth: '200px' }}
+                                >
+                                    View All Error Codes ({errorCodes.length})
+                                </Button>
+                            </ConfigProvider>
+                        </Col>
+                    </Row>
+
+                    {/* Error Codes List Modal */}
+                    <ErrorCodeListModal
+                        visible={showErrorCodeModal}
+                        onClose={() => setShowErrorCodeModal(false)}
+                        errorCodes={errorCodes}
+                        loading={loading}
+                        onPreview={handlePreviewErrorCode}
+                        onEdit={handleEditErrorCode}
+                        onDelete={handleDeleteErrorCode}
+                        onAddNew={handleCreateNewErrorCode}
+                    />
+                </>
             );
         }
         return null;

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

@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { Modal, Table, Button, Space, message, Tag, ConfigProvider } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import { NotifConfirmDialog, NotifOk, NotifAlert } from '../../../../components/Global/ToastNotif';
+
+const ErrorCodeListModal = ({
+    visible,
+    onClose,
+    errorCodes,
+    loading,
+    onPreview,
+    onEdit,
+    onDelete,
+    onAddNew,
+}) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Error Code',
+            dataIndex: 'error_code',
+            key: 'error_code',
+            width: '15%',
+        },
+        {
+            title: 'Error Name',
+            dataIndex: 'error_code_name',
+            key: 'error_code_name',
+            width: '25%',
+            render: (text) => text || '-',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'error_code_description',
+            key: 'error_code_description',
+            width: '30%',
+            render: (text) => text || '-',
+            ellipsis: true,
+        },
+        {
+            title: 'Solutions',
+            key: 'solutions',
+            width: '10%',
+            align: 'center',
+            render: (_, record) => {
+                const solutionCount = record.solution ? record.solution.length : 0;
+                return <Tag color={solutionCount > 0 ? 'green' : 'red'}>{solutionCount} Sol</Tag>;
+            },
+        },
+        {
+            title: 'Spareparts',
+            key: 'spareparts',
+            width: '10%',
+            align: 'center',
+            render: (_, record) => {
+                const sparepartCount = record.sparepart ? record.sparepart.length : 0;
+                return (
+                    <Tag color={sparepartCount > 0 ? 'blue' : 'default'}>{sparepartCount} SP</Tag>
+                );
+            },
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            width: '10%',
+            align: 'center',
+            render: (_, { status }) => (
+                <Tag color={status ? 'green' : 'red'}>{status ? 'Active' : 'Inactive'}</Tag>
+            ),
+        },
+        {
+            title: 'Action',
+            key: 'action',
+            align: 'center',
+            width: '15%',
+            render: (_, record) => (
+                <Space>
+                    <Button
+                        type="text"
+                        icon={<EyeOutlined />}
+                        onClick={() => onPreview(record)}
+                        style={{
+                            color: '#23A55A',
+                            borderColor: '#23A55A',
+                        }}
+                        size="small"
+                    />
+                    <Button
+                        type="text"
+                        icon={<EditOutlined />}
+                        onClick={() => onEdit(record)}
+                        style={{
+                            color: '#faad14',
+                            borderColor: '#faad14',
+                        }}
+                        size="small"
+                    />
+                    <Button
+                        type="text"
+                        danger
+                        icon={<DeleteOutlined />}
+                        onClick={() => handleDelete(record)}
+                        style={{
+                            borderColor: '#ff4d4f',
+                            color: '#ff4d4f',
+                        }}
+                        size="small"
+                    />
+                </Space>
+            ),
+        },
+    ];
+
+    const handleDelete = (record) => {
+        if (errorCodes.length <= 1) {
+            NotifAlert({
+                icon: 'warning',
+                title: 'Perhatian',
+                message: 'Setiap brand harus memiliki minimal 1 error code!',
+            });
+            return;
+        }
+
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin hapus error code "${
+                record.error_code_name || record.error_code
+            }" ?`,
+            onConfirm: () => {
+                setConfirmLoading(true);
+                onDelete(record.key);
+                setConfirmLoading(false);
+            },
+            onCancel: () => {},
+        });
+    };
+
+    return (
+        <Modal
+            title={
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }}
+                >
+                    <span>Daftar Error Codes</span>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#23a55ade' },
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                    defaultHoverBg: '#209652',
+                                    defaultHoverColor: '#FFFFFF',
+                                    defaultHoverBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            onClick={onAddNew}
+                        >
+                            Add New Error Code
+                        </Button>
+                    </ConfigProvider>
+                </div>
+            }
+            open={visible}
+            onCancel={onClose}
+            closable={false}
+            maskClosable={false}
+            width={1200}
+            footer={[
+                <Button key="close" onClick={onClose}>
+                    Close
+                </Button>,
+            ]}
+        >
+            <Table
+                columns={columns}
+                dataSource={errorCodes}
+                loading={loading || confirmLoading}
+                rowKey="key"
+                pagination={{
+                    pageSize: 10,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
+                }}
+                scroll={{ x: 1000 }}
+                size="small"
+            />
+        </Modal>
+    );
+};
+
+export default ErrorCodeListModal;

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

@@ -0,0 +1,233 @@
+import {
+    Form,
+    Input,
+    Switch,
+    Upload,
+    Button,
+    Typography,
+    message,
+    ConfigProvider,
+} from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { uploadFile } from '../../../../api/file-uploads';
+
+const { Text } = Typography;
+
+const ErrorCodeSimpleForm = ({
+    errorCodeForm,
+    isErrorCodeFormReadOnly = false,
+    errorCodeIcon,
+    onErrorCodeIconUpload,
+    onErrorCodeIconRemove,
+    onAddErrorCode,
+}) => {
+    const statusValue = Form.useWatch('status', errorCodeForm);
+
+    const handleIconUpload = async (file) => {
+        // Check if file is an image
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('You can only upload image files!');
+            return Upload.LIST_IGNORE;
+        }
+
+        // Check file size (max 2MB)
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+            message.error('Image must be smaller than 2MB!');
+            return Upload.LIST_IGNORE;
+        }
+
+        try {
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
+                fileExtension
+            );
+            const fileType = isImageFile ? 'image' : 'pdf';
+            const folder = 'images';
+
+            const uploadResponse = await uploadFile(file, folder);
+            const iconPath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
+
+            if (iconPath) {
+                onErrorCodeIconUpload({
+                    name: file.name,
+                    uploadPath: iconPath,
+                    fileExtension,
+                    isImage: isImageFile,
+                    size: file.size,
+                });
+                message.success(`${file.name} uploaded successfully!`);
+            } else {
+                message.error(`Failed to upload ${file.name}`);
+            }
+        } catch (error) {
+            console.error('Error uploading icon:', error);
+            message.error(`Failed to upload ${file.name}`);
+        }
+    };
+
+    const handleIconRemove = () => {
+        onErrorCodeIconRemove();
+    };
+
+    return (
+        <>
+            {/* Status Switch */}
+            <Form.Item label="Status" name="status">
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <Form.Item name="status" valuePropName="checked" noStyle>
+                        <Switch
+                            disabled={isErrorCodeFormReadOnly}
+                            style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
+                        />
+                    </Form.Item>
+                    <Text style={{ marginLeft: 8 }}>
+                        {statusValue ? 'Active' : 'Inactive'}
+                    </Text>
+                </div>
+            </Form.Item>
+
+            {/* Error Code */}
+            <Form.Item
+                label="Error Code"
+                name="error_code"
+                rules={[{ required: true, message: 'Error code wajib diisi!' }]}
+            >
+                <Input
+                    placeholder="Enter error code"
+                    disabled={isErrorCodeFormReadOnly}
+                />
+            </Form.Item>
+
+            {/* Error Name */}
+            <Form.Item
+                label="Error Name"
+                name="error_code_name"
+                rules={[{ required: true, message: 'Error name wajib diisi!' }]}
+            >
+                <Input
+                    placeholder="Enter error name"
+                    disabled={isErrorCodeFormReadOnly}
+                />
+            </Form.Item>
+
+            {/* Error Description */}
+            <Form.Item
+                label="Description"
+                name="error_code_description"
+            >
+                <Input.TextArea
+                    placeholder="Enter error description"
+                    rows={3}
+                    disabled={isErrorCodeFormReadOnly}
+                />
+            </Form.Item>
+
+            {/* Color and Icon in same row */}
+            <Form.Item label="Color & Icon">
+                <Input.Group compact>
+                    <Form.Item
+                        name="error_code_color"
+                        noStyle
+                    >
+                        <input
+                            type="color"
+                            disabled={isErrorCodeFormReadOnly}
+                            style={{ width: '30%', height: '40px', border: '1px solid #d9d9d9', borderRadius: 4 }}
+                            defaultValue="#000000"
+                        />
+                    </Form.Item>
+
+                    <Form.Item noStyle style={{ width: '70%', paddingLeft: 8 }}>
+                        {!isErrorCodeFormReadOnly ? (
+                            <Upload
+                                beforeUpload={handleIconUpload}
+                                showUploadList={false}
+                                accept="image/*"
+                                style={{ width: '100%' }}
+                            >
+                                <Button icon={<UploadOutlined />} style={{ width: '100%' }}>
+                                    Upload Icon
+                                </Button>
+                            </Upload>
+                        ) : (
+                            <div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}>
+                                <Text type="secondary">No upload allowed</Text>
+                            </div>
+                        )}
+                    </Form.Item>
+                </Input.Group>
+
+                {errorCodeIcon && (
+                    <div style={{ marginTop: 8 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                            <img
+                                src={errorCodeIcon.uploadPath}
+                                alt="Error Code Icon"
+                                style={{
+                                    width: 50,
+                                    height: 50,
+                                    objectFit: 'cover',
+                                    border: '1px solid #d9d9d9',
+                                    borderRadius: 4,
+                                }}
+                            />
+                            <div>
+                                <Text style={{ fontSize: 12 }}>{errorCodeIcon.name}</Text>
+                                <br />
+                                <Text type="secondary" style={{ fontSize: 10 }}>
+                                    Size: {(errorCodeIcon.size / 1024).toFixed(1)} KB
+                                </Text>
+                            </div>
+                            {!isErrorCodeFormReadOnly && (
+                                <Button
+                                    type="text"
+                                    danger
+                                    size="small"
+                                    onClick={handleIconRemove}
+                                >
+                                    Remove
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </Form.Item>
+
+            {/* Add Error Code Button */}
+            {!isErrorCodeFormReadOnly && (
+                <Form.Item>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#23a55ade' },
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                    defaultHoverBg: '#209652',
+                                    defaultHoverColor: '#FFFFFF',
+                                    defaultHoverBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        <Button
+                            htmlType="button"
+                            onClick={() => {
+                                // Call parent function to add error code
+                                onAddErrorCode();
+                            }}
+                            style={{ width: '100%' }}
+                        >
+                            + Add Error Code
+                        </Button>
+                    </ConfigProvider>
+                </Form.Item>
+            )}
+        </>
+    );
+};
+
+export default ErrorCodeSimpleForm;

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

@@ -139,7 +139,10 @@ const SolutionField = ({
                     icon={<DeleteOutlined />}
                     onClick={() => onRemove(fieldId)}
                     disabled={isReadOnly}
-                    style={{ borderColor: '#ff4d4f' }}
+                    style={{
+                        borderColor: '#ff4d4f',
+                        color: '#ff4d4f'
+                    }}
                 />
             </div>
 
@@ -161,7 +164,7 @@ const SolutionField = ({
                         />
                     </Form.Item>
                     <Text style={{ marginLeft: 8 }}>
-                        {(watchedStatus ?? true) ? 'Active' : 'Non Active'}
+                        {(watchedStatus ?? true) ? 'Active' : 'Inactive'}
                     </Text>
                 </div>
             </Form.Item>

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

@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Switch, Radio, Upload, Typography, Space } from 'antd';
+import { DeleteOutlined, UploadOutlined, EyeOutlined } from '@ant-design/icons';
+import { uploadFile, getFolderFromFileType } from '../../../../api/file-uploads';
+import { NotifAlert } from '../../../../components/Global/ToastNotif';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const SolutionFieldNew = ({
+    fieldKey,
+    fieldName,
+    index,
+    solutionType,
+    solutionStatus,
+    isReadOnly = false,
+    canRemove = true,
+    onTypeChange,
+    onStatusChange,
+    onRemove,
+    onFileUpload,
+    onFileView,
+    fileList = []
+}) => {
+    const [currentStatus, setCurrentStatus] = useState(solutionStatus ?? true);
+
+    // Watch form values
+    const getFieldValue = () => {
+        try {
+            const form = document.querySelector(`[data-field="${fieldName}"]`)?.form;
+            if (form) {
+                const formData = new FormData(form);
+                return formData.get(`${fieldName}.status`) === 'on';
+            }
+            return currentStatus;
+        } catch {
+            return currentStatus;
+        }
+    };
+
+    useEffect(() => {
+        setCurrentStatus(solutionStatus ?? true);
+    }, [solutionStatus]);
+    const handleFileUpload = async (file) => {
+        try {
+            const isAllowedType = [
+                'application/pdf',
+                'image/jpeg',
+                'image/png',
+                'image/gif',
+            ].includes(file.type);
+
+            if (!isAllowedType) {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Error',
+                    message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
+                });
+                return;
+            }
+
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const fileType = isImage ? 'image' : 'pdf';
+            const folder = getFolderFromFileType(fileType);
+
+            const uploadResponse = await uploadFile(file, folder);
+            const actualPath = uploadResponse.data?.path_solution || '';
+
+            if (actualPath) {
+                // Store the file info with the solution field
+                file.uploadPath = actualPath;
+                file.solutionId = fieldKey;
+                file.type_solution = fileType;
+                onFileUpload(file);
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `${file.name} berhasil diupload!`,
+                });
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: `Gagal mengupload ${file.name}`,
+                });
+            }
+        } catch (error) {
+            console.error('Error uploading file:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
+            });
+        }
+    };
+
+    const renderSolutionContent = () => {
+        if (solutionType === 'text') {
+            return (
+                <Form.Item
+                    name={[fieldName, 'text']}
+                    rules={[{ required: true, message: 'Text solution wajib diisi!' }]}
+                >
+                    <TextArea
+                        placeholder="Enter solution text"
+                        rows={3}
+                        disabled={isReadOnly}
+                    />
+                </Form.Item>
+            );
+        }
+
+        if (solutionType === 'file') {
+            const currentFiles = fileList.filter(file => file.solutionId === fieldKey);
+
+            return (
+                <div>
+                    <Form.Item
+                        name={[fieldName, 'file']}
+                        rules={[{ required: true, message: 'File solution wajib diupload!' }]}
+                    >
+                        <Upload
+                            beforeUpload={handleFileUpload}
+                            showUploadList={false}
+                            accept=".pdf,.jpg,.jpeg,.png,.gif"
+                            disabled={isReadOnly}
+                        >
+                            <Button
+                                icon={<UploadOutlined />}
+                                disabled={isReadOnly}
+                                style={{ width: '100%' }}
+                            >
+                                Upload File (PDF/Image)
+                            </Button>
+                        </Upload>
+                    </Form.Item>
+
+                    {currentFiles.length > 0 && (
+                        <div style={{ marginTop: 8 }}>
+                            {currentFiles.map((file, index) => (
+                                <div key={index} style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    padding: '4px 8px',
+                                    border: '1px solid #d9d9d9',
+                                    borderRadius: 4,
+                                    marginBottom: 4
+                                }}>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                        <Text style={{ fontSize: 12 }}>{file.name}</Text>
+                                        <Text type="secondary" style={{ fontSize: 10 }}>
+                                            ({(file.size / 1024).toFixed(1)} KB)
+                                        </Text>
+                                    </div>
+                                    <Button
+                                        type="text"
+                                        size="small"
+                                        icon={<EyeOutlined />}
+                                        onClick={() => onFileView(file.uploadPath, file.type_solution)}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    return (
+        <div style={{
+            border: '1px solid #d9d9d9',
+            borderRadius: 8,
+            padding: 16,
+            marginBottom: 16,
+            backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
+        }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                <Text strong>Solution #{index + 1}</Text>
+                <Space>
+                    <Form.Item
+                        name={[fieldName, 'name']}
+                        rules={[{ required: true, message: 'Solution name wajib diisi!' }]}
+                        style={{ margin: 0, width: 200 }}
+                    >
+                        <Input
+                            placeholder="Solution name"
+                            disabled={isReadOnly}
+                        />
+                    </Form.Item>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                        <Form.Item name={[fieldName, 'status']} valuePropName="checked" noStyle>
+                            <Switch
+                                disabled={isReadOnly}
+                                onChange={(checked) => {
+                                    onStatusChange(fieldKey, checked);
+                                    setCurrentStatus(checked);
+                                }}
+                                style={{
+                                    backgroundColor: currentStatus ? '#23A55A' : '#bfbfbf'
+                                }}
+                            />
+                        </Form.Item>
+                        <Text style={{ fontSize: 12, color: '#666' }}>
+                            {currentStatus ? 'Active' : 'Inactive'}
+                        </Text>
+                    </div>
+
+                    {canRemove && !isReadOnly && (
+                        <Button
+                            type="text"
+                            danger
+                            icon={<DeleteOutlined />}
+                            onClick={onRemove}
+                        />
+                    )}
+                </Space>
+            </div>
+
+            <Form.Item
+                name={[fieldName, 'type']}
+                rules={[{ required: true, message: 'Solution type wajib diisi!' }]}
+            >
+                <Radio.Group
+                    onChange={(e) => onTypeChange(fieldKey, e.target.value)}
+                    disabled={isReadOnly}
+                >
+                    <Radio value="text">Text Solution</Radio>
+                    <Radio value="file">File Solution</Radio>
+                </Radio.Group>
+            </Form.Item>
+
+            {renderSolutionContent()}
+        </div>
+    );
+};
+
+export default SolutionFieldNew;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Form, Card, Typography, Divider, Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import SolutionFieldNew from './SolutionFieldNew';
+
+const { Text } = Typography;
+
+const SolutionForm = ({
+    solutionForm,
+    solutionFields,
+    solutionTypes,
+    solutionStatuses,
+    fileList,
+    solutionsToDelete,
+    firstSolutionValid,
+    onAddSolutionField,
+    onRemoveSolutionField,
+    onSolutionTypeChange,
+    onSolutionStatusChange,
+    onSolutionFileUpload,
+    onFileView,
+    isReadOnly = false,
+    onAddSolution
+}) => {
+    return (
+        <div>
+            <Form
+                form={solutionForm}
+                layout="vertical"
+                initialValues={{
+                    solution_status_0: true,
+                    solution_type_0: 'text',
+                }}
+            >
+                <Divider orientation="left">Solution Items</Divider>
+
+                {solutionFields.map((field, index) => (
+                    <SolutionFieldNew
+                        key={field.key}
+                        fieldKey={field.key}
+                        fieldName={field.name}
+                        index={index}
+                        solutionType={solutionTypes[field.key]}
+                        solutionStatus={solutionStatuses[field.key]}
+                        onTypeChange={onSolutionTypeChange}
+                        onStatusChange={onSolutionStatusChange}
+                        onRemove={() => onRemoveSolutionField(field.key)}
+                        onFileUpload={onSolutionFileUpload}
+                        onFileView={onFileView}
+                        fileList={fileList}
+                        isReadOnly={isReadOnly}
+                        canRemove={solutionFields.length > 1}
+                    />
+                ))}
+
+                {!isReadOnly && (
+                    <>
+                        <Form.Item>
+                            <Button
+                                type="dashed"
+                                onClick={onAddSolutionField}
+                                icon={<PlusOutlined />}
+                                style={{ width: '100%' }}
+                            >
+                                + Add Solution
+                            </Button>
+                        </Form.Item>
+                        <div style={{ marginTop: 16 }}>
+                            <Text type="secondary">
+                                * At least one solution is required for each error code.
+                            </Text>
+                        </div>
+                    </>
+                )}
+            </Form>
+        </div>
+    );
+};
+
+export default SolutionForm;

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

@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Divider, Typography, Switch, Space, Card, Upload, message } from 'antd';
+import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
+import { uploadFile } from '../../../../api/file-uploads';
+
+const { Text } = Typography;
+
+const SparepartForm = ({
+    sparepartForm,
+    sparepartFields,
+    onAddSparepartField,
+    onRemoveSparepartField,
+    onSparepartTypeChange,
+    onSparepartStatusChange,
+    onSparepartImageUpload,
+    onSparepartImageRemove,
+    sparepartImages = {},
+    isReadOnly = false
+}) => {
+    const [fieldStatuses, setFieldStatuses] = useState({});
+
+    // Watch form values for each field
+    const getFieldValue = (fieldName) => {
+        try {
+            const values = sparepartForm?.getFieldsValue();
+            return values?.sparepart_items?.[fieldName]?.status ?? true;
+        } catch {
+            return true;
+        }
+    };
+
+    useEffect(() => {
+        // Update field statuses when form changes
+        const newStatuses = {};
+        sparepartFields.forEach(field => {
+            newStatuses[field.key] = getFieldValue(field.key);
+        });
+        setFieldStatuses(newStatuses);
+    }, [sparepartFields, sparepartForm]);
+
+    const handleImageUpload = async (fieldKey, file) => {
+        // Check if file is an image
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('You can only upload image files!');
+            return Upload.LIST_IGNORE;
+        }
+
+        // Check file size (max 2MB)
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+            message.error('Image must be smaller than 2MB!');
+            return Upload.LIST_IGNORE;
+        }
+
+        try {
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const fileType = isImageFile ? 'image' : 'pdf';
+            const folder = 'images';
+
+            const uploadResponse = await uploadFile(file, folder);
+            const imagePath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
+
+            if (imagePath) {
+                onSparepartImageUpload && onSparepartImageUpload(fieldKey, {
+                    name: file.name,
+                    uploadPath: imagePath,
+                    fileExtension,
+                    isImage: isImageFile,
+                    size: file.size,
+                });
+                message.success(`${file.name} uploaded successfully!`);
+            } else {
+                message.error(`Failed to upload ${file.name}`);
+            }
+        } catch (error) {
+            console.error('Error uploading image:', error);
+            message.error(`Failed to upload ${file.name}`);
+        }
+    };
+
+    const handleImageRemove = (fieldKey) => {
+        onSparepartImageRemove && onSparepartImageRemove(fieldKey);
+    };
+    return (
+        <div>
+            <Text strong style={{ marginBottom: 16, display: 'block' }}>
+                {isReadOnly ? 'Sparepart Details' : 'Tambah Sparepart'}
+            </Text>
+
+            <Form
+                form={sparepartForm}
+                layout="vertical"
+                initialValues={{
+                    sparepart_status_0: true,
+                    sparepart_type_0: 'required',
+                }}
+            >
+                {/* Dynamic Sparepart Fields */}
+                <Divider orientation="left">Sparepart Items</Divider>
+
+                {sparepartFields.map((field, index) => (
+                    <Card
+                        key={field.key}
+                        size="small"
+                        style={{ marginBottom: 16 }}
+                        title={
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <Text strong>Sparepart {index + 1}</Text>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                                    <Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle>
+                                        <Switch
+                                            disabled={isReadOnly}
+                                            size="small"
+                                            onChange={(checked) => {
+                                                onSparepartStatusChange && onSparepartStatusChange(field.key, checked);
+                                                setFieldStatuses(prev => ({ ...prev, [field.key]: checked }));
+                                            }}
+                                            style={{
+                                                backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf'
+                                            }}
+                                        />
+                                    </Form.Item>
+                                    <Text style={{ fontSize: 12, color: '#666' }}>
+                                        {fieldStatuses[field.key] ? 'Active' : 'Inactive'}
+                                    </Text>
+                                </div>
+                            </div>
+                        }
+                    >
+                        <Form
+                            layout="vertical"
+                            style={{ border: 'none' }}
+                        >
+                            {/* Sparepart Name */}
+                            <Form.Item
+                                name={[field.name, 'name']}
+                                rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
+                            >
+                                <Input
+                                    placeholder="Enter sparepart name"
+                                    disabled={isReadOnly}
+                                />
+                            </Form.Item>
+
+                            {/* Description */}
+                            <Form.Item
+                                name={[field.name, 'description']}
+                            >
+                                <Input.TextArea
+                                    placeholder="Enter sparepart description (optional)"
+                                    rows={2}
+                                    disabled={isReadOnly}
+                                />
+                            </Form.Item>
+
+                            {/* Image Upload */}
+                            <Form.Item label="Sparepart Image">
+                                {!isReadOnly ? (
+                                    <Upload
+                                        beforeUpload={(file) => handleImageUpload(field.key, file)}
+                                        showUploadList={false}
+                                        accept="image/*"
+                                        style={{ width: '100%' }}
+                                    >
+                                        <Button icon={<UploadOutlined />} style={{ width: '100%' }}>
+                                            Upload Sparepart Image
+                                        </Button>
+                                    </Upload>
+                                ) : (
+                                    <div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}>
+                                        <Text type="secondary">No upload allowed</Text>
+                                    </div>
+                                )}
+
+                                {sparepartImages[field.key] && (
+                                    <div style={{ marginTop: 8 }}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                            <img
+                                                src={sparepartImages[field.key].uploadPath}
+                                                alt="Sparepart Image"
+                                                style={{
+                                                    width: 50,
+                                                    height: 50,
+                                                    objectFit: 'cover',
+                                                    border: '1px solid #d9d9d9',
+                                                    borderRadius: 4,
+                                                }}
+                                            />
+                                            <div>
+                                                <Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text>
+                                                <br />
+                                                <Text type="secondary" style={{ fontSize: 10 }}>
+                                                    Size: {(sparepartImages[field.key].size / 1024).toFixed(1)} KB
+                                                </Text>
+                                            </div>
+                                            {!isReadOnly && (
+                                                <Button
+                                                    type="text"
+                                                    danger
+                                                    size="small"
+                                                    onClick={() => handleImageRemove(field.key)}
+                                                >
+                                                    Remove
+                                                </Button>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </Form.Item>
+
+                            {/* Delete Button */}
+                            {!isReadOnly && sparepartFields.length > 1 && (
+                                <div style={{ textAlign: 'right' }}>
+                                    <Button
+                                        type="text"
+                                        danger
+                                        icon={<DeleteOutlined />}
+                                        onClick={() => onRemoveSparepartField(field.key)}
+                                        style={{
+                                            borderColor: '#ff4d4f',
+                                            color: '#ff4d4f'
+                                        }}
+                                    >
+                                        Remove
+                                    </Button>
+                                </div>
+                            )}
+                        </Form>
+                    </Card>
+                ))}
+
+                {!isReadOnly && (
+                    <Form.Item>
+                        <Button
+                            type="dashed"
+                            onClick={() => onAddSparepartField()}
+                            icon={<PlusOutlined />}
+                            style={{ width: '100%' }}
+                        >
+                            + Add Sparepart
+                        </Button>
+                    </Form.Item>
+                )}
+
+                {!isReadOnly && (
+                    <div style={{ marginTop: 16 }}>
+                        <Text type="secondary">
+                            * Add at least one sparepart for this error code.
+                        </Text>
+                    </div>
+                )}
+            </Form>
+        </div>
+    );
+};
+
+export default SparepartForm;

src/pages/master/brandDevice/hooks/solution.js

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+
+export const useSolutionLogic = (solutionForm) => {
+    const [solutionFields, setSolutionFields] = useState([
+        { name: ['solution_items', 0], key: 0 }
+    ]);
+    const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
+    const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
+    const [solutionsToDelete, setSolutionsToDelete] = useState([]);
+
+    const handleAddSolutionField = () => {
+        const newKey = Date.now(); // Use timestamp for unique key
+        const newField = { name: ['solution_items', newKey], key: newKey };
+
+        setSolutionFields(prev => [...prev, newField]);
+        setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
+        setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
+
+        // Set default values for the new field
+        setTimeout(() => {
+            solutionForm.setFieldValue(['solution_items', newKey, 'name'], '');
+            solutionForm.setFieldValue(['solution_items', newKey, 'type'], 'text');
+            solutionForm.setFieldValue(['solution_items', newKey, 'text'], '');
+        }, 0);
+    };
+
+    const handleRemoveSolutionField = (key) => {
+        if (solutionFields.length <= 1) {
+            return; // Keep at least one solution field
+        }
+
+        setSolutionFields(prev => prev.filter(field => field.key !== key));
+
+        // Clean up type and status
+        const newTypes = { ...solutionTypes };
+        const newStatuses = { ...solutionStatuses };
+        delete newTypes[key];
+        delete newStatuses[key];
+
+        setSolutionTypes(newTypes);
+        setSolutionStatuses(newStatuses);
+    };
+
+    const handleSolutionTypeChange = (key, value) => {
+        setSolutionTypes(prev => ({ ...prev, [key]: value }));
+    };
+
+    const handleSolutionStatusChange = (key, value) => {
+        setSolutionStatuses(prev => ({ ...prev, [key]: value }));
+    };
+
+    const resetSolutionFields = () => {
+        setSolutionFields([{ name: ['solution_items', 0], key: 0 }]);
+        setSolutionTypes({ 0: 'text' });
+        setSolutionStatuses({ 0: true });
+
+        // Reset form values
+        solutionForm.resetFields();
+        solutionForm.setFieldsValue({
+            solution_status_0: true,
+            solution_type_0: 'text',
+        });
+    };
+
+    const checkFirstSolutionValid = () => {
+        const values = solutionForm.getFieldsValue();
+        const firstSolution = values.solution_items?.[0];
+
+        if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') {
+            return false;
+        }
+
+        if (solutionTypes[0] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
+            return false;
+        }
+
+        return true;
+    };
+
+    const getSolutionData = () => {
+        const values = solutionForm.getFieldsValue();
+
+        const result = solutionFields.map(field => {
+            const key = field.key;
+            // Access form values using the key from field.name (AntD stores with comma)
+            const solutionPath = field.name.join(',');
+            const solution = values[solutionPath];
+
+            const validSolution = solution && solution.name && solution.name.trim() !== '';
+
+            if (validSolution) {
+                return {
+                    solution_name: solution.name || 'Default Solution',
+                    type_solution: solutionTypes[key] || 'text',
+                    text_solution: solution.text || '',
+                    path_solution: solution.file || '',
+                    is_active: solution.status !== false, // Use form value directly
+                };
+            }
+            return null;
+        }).filter(Boolean);
+
+        return result;
+    };
+
+    const setSolutionsForExistingRecord = (solutions, form) => {
+        if (!solutions || solutions.length === 0) return;
+
+        const newFields = solutions.map((solution, index) => ({
+            name: ['solution_items', solution.id || index],
+            key: solution.id || index
+        }));
+
+        setSolutionFields(newFields);
+
+        // Set solution values
+        const solutionsValues = {};
+        const newTypes = {};
+        const newStatuses = {};
+
+        solutions.forEach((solution, index) => {
+            const key = solution.id || index;
+            solutionsValues[key] = {
+                name: solution.solution_name || '',
+                type: solution.type_solution || 'text',
+                text: solution.text_solution || '',
+                file: solution.path_solution || '',
+            };
+            newTypes[key] = solution.type_solution || 'text';
+            newStatuses[key] = solution.is_active !== false;
+        });
+
+        // Set all form values at once
+        const formValues = {};
+        Object.keys(solutionsValues).forEach(key => {
+            const solution = solutionsValues[key];
+            formValues[`solution_items,${key}`] = {
+                name: solution.name,
+                type: solution.type,
+                text: solution.text,
+                file: solution.file,
+                status: solution.is_active !== false
+            };
+        });
+
+        form.setFieldsValue(formValues);
+        setSolutionTypes(newTypes);
+        setSolutionStatuses(newStatuses);
+    };
+
+    return {
+        solutionFields,
+        solutionTypes,
+        solutionStatuses,
+        solutionsToDelete,
+        firstSolutionValid: checkFirstSolutionValid(),
+        handleAddSolutionField,
+        handleRemoveSolutionField,
+        handleSolutionTypeChange,
+        handleSolutionStatusChange,
+        resetSolutionFields,
+        checkFirstSolutionValid,
+        getSolutionData,
+        setSolutionsForExistingRecord,
+    };
+};

src/pages/master/brandDevice/hooks/sparepart.js

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+
+export const useSparepartLogic = (sparepartForm) => {
+    const [sparepartFields, setSparepartFields] = useState([
+        { name: ['sparepart_items', 0], key: 0 }
+    ]);
+    const [sparepartTypes, setSparepartTypes] = useState({ 0: 'required' });
+    const [sparepartStatuses, setSparepartStatuses] = useState({ 0: true });
+
+    const handleAddSparepartField = () => {
+        const newKey = Date.now(); // Use timestamp for unique key
+        const newField = { name: ['sparepart_items', newKey], key: newKey };
+
+        setSparepartFields(prev => [...prev, newField]);
+        setSparepartTypes(prev => ({ ...prev, [newKey]: 'required' }));
+        setSparepartStatuses(prev => ({ ...prev, [newKey]: true }));
+
+        // Set default values for the new field
+        setTimeout(() => {
+            sparepartForm.setFieldValue(['sparepart_items', newKey, 'type'], 'required');
+            sparepartForm.setFieldValue(['sparepart_items', newKey, 'quantity'], 1);
+        }, 0);
+    };
+
+    const handleRemoveSparepartField = (key) => {
+        if (sparepartFields.length <= 1) {
+            return; // Keep at least one sparepart field
+        }
+
+        setSparepartFields(prev => prev.filter(field => field.key !== key));
+
+        // Clean up type and status
+        const newTypes = { ...sparepartTypes };
+        const newStatuses = { ...sparepartStatuses };
+        delete newTypes[key];
+        delete newStatuses[key];
+
+        setSparepartTypes(newTypes);
+        setSparepartStatuses(newStatuses);
+    };
+
+    const handleSparepartTypeChange = (key, value) => {
+        setSparepartTypes(prev => ({ ...prev, [key]: value }));
+    };
+
+    const handleSparepartStatusChange = (key, value) => {
+        setSparepartStatuses(prev => ({ ...prev, [key]: value }));
+    };
+
+    const resetSparepartFields = () => {
+        setSparepartFields([{ name: ['sparepart_items', 0], key: 0 }]);
+        setSparepartTypes({ 0: 'required' });
+        setSparepartStatuses({ 0: true });
+
+        // Reset form values
+        sparepartForm.resetFields();
+        sparepartForm.setFieldsValue({
+            sparepart_status_0: true,
+            sparepart_type_0: 'required',
+        });
+    };
+
+    const getSparepartData = () => {
+        const values = sparepartForm.getFieldsValue();
+        return sparepartFields.map(field => {
+            const key = field.key;
+            const sparepartPath = field.name.join(',');
+            const sparepart = values[sparepartPath];
+
+            return sparepart && sparepart.name && sparepart.name.trim() !== '' ? {
+                name: sparepart.name || '',
+                description: sparepart.description || '',
+                is_active: sparepart.status !== false,
+            } : null;
+        }).filter(Boolean);
+    };
+
+    const setSparepartForExistingRecord = (spareparts, form) => {
+        if (!spareparts || spareparts.length === 0) return;
+
+        const newFields = spareparts.map((sparepart, index) => ({
+            name: ['sparepart_items', sparepart.id || index],
+            key: sparepart.id || index
+        }));
+
+        setSparepartFields(newFields);
+
+        // Set sparepart values
+        const formValues = {};
+        Object.keys(spareparts).forEach(index => {
+            const key = spareparts[index].id || index;
+            const sparepart = spareparts[index];
+            formValues[`sparepart_items,${key}`] = {
+                name: sparepart.name || '',
+                description: sparepart.description || '',
+                status: sparepart.is_active !== false,
+            };
+        });
+
+        form.setFieldsValue(formValues);
+    };
+
+    return {
+        sparepartFields,
+        sparepartTypes,
+        sparepartStatuses,
+        handleAddSparepartField,
+        handleRemoveSparepartField,
+        handleSparepartTypeChange,
+        handleSparepartStatusChange,
+        resetSparepartFields,
+        getSparepartData,
+        setSparepartForExistingRecord,
+    };
+};