feat: integrate sparepart management into AddBrandDevice and EditBrandDevice components

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -22,7 +22,9 @@ import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
 import ErrorCodeListModal from './component/ErrorCodeListModal';
 import FormActions from './component/FormActions';
 import SolutionForm from './component/SolutionForm';
+import SparepartForm from './component/SparepartForm';
 import { useSolutionLogic } from './hooks/solution';
+import { useSparepartLogic } from './hooks/sparepart';
 import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
 import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
 
@@ -44,6 +46,7 @@ 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([]);
@@ -70,6 +73,20 @@ const AddBrandDevice = () => {
         setSolutionsForExistingRecord,
     } = useSolutionLogic(solutionForm);
 
+    const {
+        sparepartFields,
+        sparepartTypes,
+        sparepartStatuses,
+        sparepartsToDelete,
+        handleAddSparepartField,
+        handleRemoveSparepartField,
+        handleSparepartTypeChange,
+        handleSparepartStatusChange,
+        resetSparepartFields,
+        getSparepartData,
+        setSparepartsForExistingRecord,
+    } = useSparepartLogic(sparepartForm);
+
     useEffect(() => {
         setBreadcrumbItems([
             { title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> },
@@ -138,13 +155,14 @@ 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,
-                // })),
+                ...(ec.sparepart && ec.sparepart.length > 0 && {
+                    sparepart: ec.sparepart.map((sp) => ({
+                        sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
+                        brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.sparepart_description || '',
+                        is_active: sp.is_active !== false,
+                        path_foto: sp.path_foto || '',
+                    })),
+                }),
             }));
 
             const finalFormData = {
@@ -202,6 +220,10 @@ const AddBrandDevice = () => {
         if (record.solution && record.solution.length > 0) {
             setSolutionsForExistingRecord(record.solution, solutionForm);
         }
+
+        if (record.sparepart && record.sparepart.length > 0) {
+            setSparepartsForExistingRecord(record.sparepart, sparepartForm);
+        }
     };
 
     const handleEditErrorCode = (record) => {
@@ -260,6 +282,7 @@ const AddBrandDevice = () => {
                 return;
             }
 
+            const sparepartData = getSparepartData();
             const newErrorCode = {
                 key: Date.now(),
                 error_code: formValues.error_code,
@@ -270,6 +293,7 @@ const AddBrandDevice = () => {
                 status: formValues.status !== false,
                 errorCodeIcon: errorCodeIcon,
                 solution: solutions,
+                ...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }),  // Only add sparepart if there are spareparts
             };
 
             if (editingErrorCodeKey) {
@@ -315,6 +339,7 @@ const AddBrandDevice = () => {
         setFileList([]);
         setErrorCodeIcon(null);
         resetSolutionFields();
+        resetSparepartFields();
         setIsErrorCodeFormReadOnly(false);
         setEditingErrorCodeKey(null);
     };
@@ -439,7 +464,7 @@ const AddBrandDevice = () => {
                 <>
                     <Row gutter={16} style={{ marginBottom: 24 }}>
                         {/* Error Code Form Column */}
-                        <Col span={6}>
+                        <Col span={8}>
                             <Card size="small" title="Error Code">
                                 <Form
                                     form={errorCodeForm}
@@ -492,8 +517,29 @@ const AddBrandDevice = () => {
                             </Card>
                         </Col>
 
+                        {/* Sparepart Form Column */}
+                        <Col span={8}>
+                            <Card size="small" title="Spareparts">
+                                <Form
+                                    form={sparepartForm}
+                                    layout="vertical"
+                                    initialValues={{
+                                        sparepart_status_0: true,
+                                    }}
+                                >
+                                    <SparepartForm
+                                        sparepartForm={sparepartForm}
+                                        sparepartFields={sparepartFields}
+                                        onAddSparepartField={handleAddSparepartField}
+                                        onRemoveSparepartField={handleRemoveSparepartField}
+                                        isReadOnly={isErrorCodeFormReadOnly}
+                                    />
+                                </Form>
+                            </Card>
+                        </Col>
+
                         {/* Error Codes Table Column */}
-                        <Col span={10}>
+                        <Col span={24} style={{ marginTop: 16 }}>
                             <Card size="small" title={`Error Codes (${errorCodes.length})`}>
                                 <Table
                                     dataSource={errorCodes}