refactor: remove sparepart handling from AddBrandDevice and EditBrandDevice components

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -5,15 +5,11 @@ 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 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;
@@ -34,7 +30,6 @@ const AddBrandDevice = () => {
     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([]);
@@ -45,7 +40,6 @@ const AddBrandDevice = () => {
     const [errorCodes, setErrorCodes] = useState([]);
     const [errorCodeIcon, setErrorCodeIcon] = useState(null);
     const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
-    const [sparepartImages, setSparepartImages] = useState({});
 
     const {
         solutionFields,
@@ -63,34 +57,6 @@ const AddBrandDevice = () => {
         setSolutionsForExistingRecord,
     } = 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([
@@ -224,10 +190,6 @@ const AddBrandDevice = () => {
         if (record.solution && record.solution.length > 0) {
             setSolutionsForExistingRecord(record.solution, solutionForm);
         }
-
-        if (record.sparepart && record.sparepart.length > 0) {
-            setSparepartForExistingRecord(record.sparepart, sparepartForm);
-        }
     };
 
     const handleEditErrorCode = (record) => {
@@ -258,17 +220,6 @@ const AddBrandDevice = () => {
         } 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 () => {
@@ -297,9 +248,6 @@ const AddBrandDevice = () => {
                 return;
             }
 
-            // Get sparepart data (optional, no backend yet)
-            const spareparts = getSparepartData() || [];
-
             const newErrorCode = {
                 key: Date.now(),
                 error_code: formValues.error_code,
@@ -310,7 +258,6 @@ const AddBrandDevice = () => {
                 status: formValues.status !== false,
                 errorCodeIcon: errorCodeIcon,
                 solution: solutions,
-                sparepart: spareparts,
             };
 
             if (editingErrorCodeKey) {
@@ -336,7 +283,6 @@ const AddBrandDevice = () => {
             // Reset all forms
             resetErrorCodeForm();
             resetSolutionFields();
-            resetSparepartFields();
         } catch (error) {
             console.error('Error adding error code:', error);
             NotifAlert({
@@ -481,7 +427,7 @@ const AddBrandDevice = () => {
                 <>
                     <Row gutter={16} style={{ marginBottom: 24 }}>
                         {/* Error Code Form Column */}
-                        <Col span={8}>
+                        <Col span={12}>
                             <Card size="small" title="Error Code">
                                 <Form
                                     form={errorCodeForm}
@@ -503,7 +449,7 @@ const AddBrandDevice = () => {
                         </Col>
 
                         {/* Solution Form Column */}
-                        <Col span={8}>
+                        <Col span={12}>
                             <Card size="small" title="Solutions">
                                 <Form
                                     form={solutionForm}
@@ -533,33 +479,6 @@ const AddBrandDevice = () => {
                                 </Form>
                             </Card>
                         </Col>
-
-                        {/* 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 */}
@@ -616,7 +535,7 @@ const AddBrandDevice = () => {
             </Title>
             <Steps current={currentStep} style={{ marginBottom: 24 }}>
                 <Step title="Brand Device Details" />
-                <Step title="Error Codes, Solutions & Spareparts" />
+                <Step title="Error Codes & Solutions" />
             </Steps>
             <div style={{ marginTop: 24 }}>{renderStepContent()}</div>
             <Divider />

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -20,12 +20,10 @@ import { getFileUrl } from '../../../api/file-uploads';
 import BrandForm from './component/BrandForm';
 import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
 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;
@@ -56,9 +54,7 @@ const EditBrandDevice = () => {
     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,
@@ -78,35 +74,6 @@ const EditBrandDevice = () => {
         setSolutionsForExistingRecord,
     } = 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 () => {
             const token = localStorage.getItem('token');
@@ -230,9 +197,8 @@ const EditBrandDevice = () => {
     const handleFinish = async () => {
         setConfirmLoading(true);
         try {
-            // Get current solution and sparepart data from forms
+            // Get current solution data from forms
             const currentSolutionData = getSolutionData();
-            const currentSparepartData = getSparepartData();
 
             const finalFormData = {
                 brand_name: formData.brand_name,
@@ -257,12 +223,6 @@ const EditBrandDevice = () => {
                                 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,
-                            })),
                         };
                     }
 
@@ -281,12 +241,6 @@ const EditBrandDevice = () => {
                             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,
-                        })),
                     };
                 }),
             };
@@ -337,23 +291,6 @@ const EditBrandDevice = () => {
         } else {
             resetSolutionFields();
         }
-
-        // 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);
-        } else {
-            resetSparepartFields();
-            setSparepartImages({});
-        }
     };
 
     const handleEditErrorCode = (record) => {
@@ -373,20 +310,6 @@ const EditBrandDevice = () => {
             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');
         if (formElement) {
             formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -401,9 +324,6 @@ const EditBrandDevice = () => {
             // Get solution data from solution form
             const solutionData = getSolutionData();
 
-            // Get sparepart data from sparepart form
-            const sparepartData = getSparepartData();
-
             if (solutionData.length === 0) {
                 NotifAlert({
                     icon: 'warning',
@@ -422,7 +342,6 @@ const EditBrandDevice = () => {
                 path_icon: errorCodeIcon?.uploadPath || '',
                 status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
                 solution: solutionData,
-                sparepart: sparepartData,
                 errorCodeIcon: errorCodeIcon,
                 key: editingErrorCodeKey || `temp-${Date.now()}`,
             };
@@ -506,9 +425,7 @@ const EditBrandDevice = () => {
     const handleCreateNewErrorCode = () => {
         resetErrorCodeForm();
         resetSolutionFields();
-        resetSparepartFields();
         setErrorCodeIcon(null);
-        setSparepartImages({});
         setIsErrorCodeFormReadOnly(false);
         setEditingErrorCodeKey(null);
     };
@@ -576,7 +493,7 @@ const EditBrandDevice = () => {
             return (
                 <>
                     <Row gutter={24}>
-                        <Col span={8}>
+                        <Col span={12}>
                             <Card
                                 title={
                                     <Title level={5} style={{ margin: 0 }}>
@@ -609,7 +526,7 @@ const EditBrandDevice = () => {
                                 </Form>
                             </Card>
                         </Col>
-                        <Col span={8}>
+                        <Col span={12}>
                             <Card
                                 title={
                                     <Title level={5} style={{ margin: 0 }}>
@@ -642,38 +559,6 @@ const EditBrandDevice = () => {
                                 </Form>
                             </Card>
                         </Col>
-                        <Col span={8}>
-                            <Card
-                                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 */}
@@ -730,7 +615,7 @@ const EditBrandDevice = () => {
             </Title>
             <Steps current={currentStep} style={{ marginBottom: 24 }}>
                 <Step title="Brand Device Details" />
-                <Step title="Error Codes" />
+                <Step title="Error Codes & Solutions" />
             </Steps>
             <div style={{ position: 'relative' }}>
                 {loading && (

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

@@ -33,14 +33,14 @@ const ErrorCodeListModal = ({
             title: 'Error Name',
             dataIndex: 'error_code_name',
             key: 'error_code_name',
-            width: '25%',
+            width: '30%',
             render: (text) => text || '-',
         },
         {
             title: 'Description',
             dataIndex: 'error_code_description',
             key: 'error_code_description',
-            width: '30%',
+            width: '25%',
             render: (text) => text || '-',
             ellipsis: true,
         },
@@ -54,18 +54,6 @@ const ErrorCodeListModal = ({
                 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',