diff --git a/src/pages/master/plantSection/component/DetailPlantSection.jsx b/src/pages/master/plantSection/component/DetailPlantSection.jsx
index 75be3ef..5515df4 100644
--- a/src/pages/master/plantSection/component/DetailPlantSection.jsx
+++ b/src/pages/master/plantSection/component/DetailPlantSection.jsx
@@ -10,20 +10,41 @@ const DetailPlantSection = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
     const defaultData = {
-        sub_section_id: '',
-        sub_section_code: '',
-        sub_section_name: '',
+        plant_sub_section_id: '',
+        plant_sub_section_code: '',
+        plant_sub_section_name: '',
+        table_name_value: '', // Fix field name
+        plant_sub_section_description: '',
         is_active: true,
     };
 
     const [formData, setFormData] = useState(defaultData);
 
     const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData({
-            ...formData,
-            [name]: value,
-        });
+        // Handle different input types
+        let name, value;
+
+        if (e && e.target) {
+            // Standard input
+            name = e.target.name;
+            value = e.target.value;
+        } else if (e && e.type === 'change') {
+            // Switch or other components
+            name = e.name || e.target?.name;
+            value = e.value !== undefined ? e.value : e.checked;
+        } else {
+            // Fallback
+            return;
+        }
+
+        console.log(`📝 Input change: ${name} = ${value}`);
+
+        if (name) {
+            setFormData(prev => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
     };
 
     const handleCancel = () => {
@@ -36,7 +57,7 @@ const DetailPlantSection = (props) => {
 
         // Daftar aturan validasi
         const validationRules = [
-            { field: 'sub_section_name', label: 'Plant Sub Section Name', required: true },
+            { field: 'plant_sub_section_name', label: 'Plant Sub Section Name', required: true },
         ];
 
         if (
@@ -52,14 +73,20 @@ const DetailPlantSection = (props) => {
             return;
 
         try {
+            console.log("💾 Current formData before save:", formData);
+
             const payload = {
+                plant_sub_section_name: formData.plant_sub_section_name,
+                plant_sub_section_description: formData.plant_sub_section_description,
+                table_name_value: formData.table_name_value, // Fix field name
                 is_active: formData.is_active,
-                sub_section_name: formData.sub_section_name,
             };
 
+            console.log("📤 Payload to be sent:", payload);
+
             const response =
                 props.actionMode === 'edit'
-                    ? await updatePlantSection(formData.sub_section_id, payload)
+                    ? await updatePlantSection(formData.plant_sub_section_id, payload)
                     : await createPlantSection(payload);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
@@ -98,9 +125,17 @@ const DetailPlantSection = (props) => {
     };
 
     useEffect(() => {
+        console.log("🔄 Modal state changed:", {
+            showModal: props.showModal,
+            actionMode: props.actionMode,
+            selectedData: props.selectedData
+        });
+
         if (props.selectedData) {
+            console.log("📋 Setting form data from selectedData:", props.selectedData);
             setFormData(props.selectedData);
         } else {
+            console.log("📋 Resetting to default data");
             setFormData(defaultData);
         }
     }, [props.showModal, props.selectedData, props.actionMode]);
@@ -195,13 +230,33 @@ const DetailPlantSection = (props) => {
                         <Text strong>Plant Sub Section Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
-                            name="sub_section_name"
-                            value={formData.sub_section_name}
+                            name="plant_sub_section_name"
+                            value={formData.plant_sub_section_name}
                             onChange={handleInputChange}
                             placeholder="Enter Plant Sub Section Name"
                             readOnly={props.readOnly}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Table Name Value</Text>
+                        <Input
+                            name="table_name_value"
+                            value={formData.table_name_value}
+                            onChange={handleInputChange}
+                            placeholder="Enter Table Name Value (Optional)"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Description</Text>
+                        <Input
+                            name="plant_sub_section_description"
+                            value={formData.plant_sub_section_description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Description (Optional)"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>
diff --git a/src/pages/master/plantSection/component/ListPlantSection.jsx b/src/pages/master/plantSection/component/ListPlantSection.jsx
index 863525a..9ff8d4c 100644
--- a/src/pages/master/plantSection/component/ListPlantSection.jsx
+++ b/src/pages/master/plantSection/component/ListPlantSection.jsx
@@ -14,25 +14,47 @@ import TableList from '../../../../components/Global/TableList';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
-        title: 'Section Code',
-        dataIndex: 'sub_section_code',
-        key: 'sub_section_code',
-        width: '20%',
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Plant Sub Section Code',
+        dataIndex: 'plant_sub_section_code',
+        key: 'plant_sub_section_code',
+        width: '15%',
+        align: 'center',
     },
     {
         title: 'Plant Sub Section Name',
-        dataIndex: 'sub_section_name',
-        key: 'sub_section_name',
-        width: '40%',
+        dataIndex: 'plant_sub_section_name',
+        key: 'plant_sub_section_name',
+        width: '25%',
+    },
+    {
+        title: 'Table Name Value',
+        dataIndex: 'table_name_value',
+        key: 'table_name_value',
+        width: '20%',
+        render: (text) => text || '-',
+    },
+    {
+        title: 'Description',
+        dataIndex: 'plant_sub_section_description',
+        key: 'plant_sub_section_description',
+        width: '20%',
+        render: (text) => text || '-',
     },
     {
         title: 'Status',
         dataIndex: 'is_active',
         key: 'is_active',
-        width: '15%',
+        width: '10%',
         align: 'center',
         render: (status) => (
-            <Tag color={status ? 'green' : 'red'}>
+            <Tag color={status ? '#23A55A' : 'red'} style={{ fontSize: '12px' }}>
                 {status ? 'Active' : 'Inactive'}
             </Tag>
         ),
@@ -46,22 +68,25 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
             <Space>
                 <Button
                     type="text"
-                    style={{ borderColor: '#1890ff' }}
-                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    icon={<EyeOutlined />}
                     onClick={() => showPreviewModal(record)}
+                    style={{ color: '#1890ff', borderColor: '#1890ff' }}
+                    title="View"
                 />
                 <Button
                     type="text"
-                    style={{ borderColor: '#faad14' }}
-                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    icon={<EditOutlined />}
                     onClick={() => showEditModal(record)}
+                    style={{ color: '#faad14', borderColor: '#faad14' }}
+                    title="Edit"
                 />
                 <Button
                     type="text"
                     danger
-                    style={{ borderColor: 'red' }}
                     icon={<DeleteOutlined />}
                     onClick={() => showDeleteDialog(record)}
+                    style={{ borderColor: '#ff4d4f' }}
+                    title="Delete"
                 />
             </Space>
         ),
@@ -121,8 +146,8 @@ const ListPlantSection = memo(function ListPlantSection(props) {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi Hapus',
-            message: 'Plant Section "' + param.sub_section_name + '" akan dihapus?',
-            onConfirm: () => handleDelete(param.sub_section_id),
+            message: `Plant Sub Section "${param.plant_sub_section_name}" akan dihapus?`,
+            onConfirm: () => handleDelete(param.plant_sub_section_id),
             onCancel: () => props.setSelectedData(null),
         });
     };
@@ -226,4 +251,4 @@ const ListPlantSection = memo(function ListPlantSection(props) {
     );
 });
 
-export default ListPlantSection;
\ No newline at end of file
+export default ListPlantSection;