add plant section management with list and detail views

This commit is contained in:
2025-10-09 10:50:27 +07:00
parent 8ef1bdb142
commit e13539618b
5 changed files with 466 additions and 0 deletions

View File

@@ -0,0 +1,106 @@
import React from 'react';
import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
const { Text } = Typography;
const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
const modalTitle = readOnly ? 'Preview Plant Section' : (editingKey ? 'Edit Plant Section' : 'Tambah Plant Section');
return (
<Modal
title={modalTitle}
visible={visible}
onCancel={onCancel}
footer={[
<React.Fragment key="modal-footer">
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
>
<Button onClick={onCancel}>Batal</Button>
</ConfigProvider>
<ConfigProvider
theme={{
token: {
colorBgContainer: '#209652',
},
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
defaultHoverColor: '#FFFFFF',
defaultHoverBorderColor: '#23a55a',
},
},
}}
>
{!readOnly && (
<Button onClick={onOk}>
Simpan
</Button>
)}
</ConfigProvider>
</React.Fragment>,
]}
destroyOnClose
>
<Form form={form} layout="vertical" name="form_in_modal">
<div style={{ marginBottom: 12 }}>
<Text strong>Kode Plant</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="kode_plant"
rules={[{ required: true, message: 'Silakan masukkan kode plant!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Masukkan Kode Plant" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Nama Plant</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="nama_plant"
rules={[{ required: true, message: 'Silakan masukkan nama plant!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Masukkan Nama Plant" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Lokasi Plant</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="lokasi_plant"
rules={[{ required: true, message: 'Silakan masukkan lokasi plant!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Masukkan Lokasi Plant" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Deskripsi</Text>
<Form.Item
name="deskripsi"
style={{ marginBottom: 0 }}
>
<Input.TextArea readOnly={readOnly} placeholder="Masukkan Deskripsi (Opsional)" rows={4} />
</Form.Item>
</div>
</Form>
</Modal>
);
};
export default DetailPlantSection;