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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Input, Button, Switch, Radio, Typography, Space, Card } from 'antd';
+import { Form, Input, Button, Switch, Radio, Typography, Space, Card, ConfigProvider } from 'antd';
 import { DeleteOutlined, EyeOutlined, FileOutlined } from '@ant-design/icons';
 import FileUploadHandler from './FileUploadHandler';
 import { NotifAlert } from '../../../../components/Global/ToastNotif';
@@ -43,6 +43,7 @@ const SolutionFieldNew = ({
     const typeValue = Form.useWatch(['solution_items', fieldKey, 'type'], form);
     const textValue = Form.useWatch(['solution_items', fieldKey, 'text'], form);
     const fileNameValue = Form.useWatch(['solution_items', fieldKey, 'fileName'], form);
+    const statusValue = Form.useWatch(['solution_items', fieldKey, 'status'], form) ?? true;
 
     const pathSolution = Form.useWatch(['solution_items', fieldKey, 'path_solution'], form);
 
@@ -373,13 +374,23 @@ const SolutionFieldNew = ({
     };
 
     return (
-        <div style={{
+        <ConfigProvider
-            border: '1px solid #d9d9d9',
+            theme={{
-            borderRadius: 6,
+                components: {
-            padding: 12,
+                    Switch: {
-            marginBottom: 12,
+                        colorPrimary: '#23A55A',
-            backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
+                        colorPrimaryHover: '#23A55A',
-        }}>
+                    },
+                },
+            }}
+        >
+            <div style={{
+                border: '1px solid #d9d9d9',
+                borderRadius: 6,
+                padding: 12,
+                marginBottom: 12,
+                backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
+            }}>
             <div style={{
                 marginBottom: 8,
                 gap: 8
@@ -402,10 +413,6 @@ const SolutionFieldNew = ({
                                     onChange={(checked) => {
                                         onStatusChange(fieldKey, checked);
                                     }}
-                                    defaultChecked={solutionStatus !== false}
-                                    style={{
-                                        backgroundColor: solutionStatus !== false ? '#23A55A' : '#bfbfbf'
-                                    }}
                                 />
                             </Form.Item>
                             <Text style={{
@@ -413,7 +420,7 @@ const SolutionFieldNew = ({
                                 color: '#666',
                                 whiteSpace: 'nowrap'
                             }}>
-                                {solutionStatus !== false ? 'Active' : 'Inactive'}
+                                {statusValue ? 'Active' : 'Inactive'}
                             </Text>
                         </div>
 
@@ -494,7 +501,8 @@ const SolutionFieldNew = ({
             </Form.Item>
 
             {renderSolutionContent()}
-        </div>
+            </div>
+        </ConfigProvider>
     );
 };