repair: brandDevice sparepart integration

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

@@ -23,53 +23,65 @@ const SolutionForm = ({
     onAddSolution,
 }) => {
     return (
-        <div>
+        <div style={{ marginBottom: 0 }}>
             <Form
                 form={solutionForm}
                 layout="vertical"
                 initialValues={{
-                    solution_status_0: true,
-                    solution_type_0: 'text',
+                    solution_items: [{
+                        status: true,
+                        type: 'text',
+                    }]
+                }}
+                style={{
+                    marginBottom: 0
                 }}
             >
                 <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}
-                    />
-                ))}
+                <div style={{
+                    maxHeight: '400px',
+                    overflowY: 'auto',
+                    paddingRight: '8px'
+                }}>
+                    {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}
+                        />
+                    ))}
+                </div>
 
                 {!isReadOnly && (
                     <>
-                        <Form.Item>
+                        <Form.Item style={{ marginBottom: 8 }}>
                             <Button
                                 type="dashed"
                                 onClick={onAddSolutionField}
                                 icon={<PlusOutlined />}
-                                style={{ width: '100%' }}
+                                style={{
+                                    width: '100%',
+                                    borderColor: '#23A55A',
+                                    color: '#23A55A',
+                                    height: '32px',
+                                    fontSize: '12px'
+                                }}
                             >
-                                + Add Solution
+                                Add More Sollution
                             </Button>
                         </Form.Item>
-                        <div style={{ marginTop: 16 }}>
-                            <Text type="secondary">
-                                * At least one solution is required for each error code.
-                            </Text>
-                        </div>
                     </>
                 )}
             </Form>