add status management with list and detail views, including routing and mock data

2025-10-09 16:43:03 +07:00
parent dcdd8c9b8d
commit a7af974108
9 changed files with 548 additions and 11 deletions
--- a/src/pages/master/status/component/DetailStatus.jsx
+++ b/src/pages/master/status/component/DetailStatus.jsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Form } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const DetailStatus = (props) => {
+    const [form] = Form.useForm();
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        key: '',
+        statusCode: '',
+        statusName: '',
+        description: '',
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+        form.resetFields();
+    };
+
+    const handleSave = async () => {
+        try {
+            const values = await form.validateFields();
+            setConfirmLoading(true);
+
+            const payload = {
+                key: FormData.key,
+                ...values,
+            };
+
+            props.onDataSaved(payload);
+            
+            NotifOk({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Data Status "${payload.statusName}" berhasil ${
+                    payload.key ? 'diubah' : 'ditambahkan'
+                }.`,
+            });
+
+            setConfirmLoading(false);
+            props.setActionMode('list');
+            form.resetFields();
+        } catch (errorInfo) {
+            console.log('Failed:', errorInfo);
+        }
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+            form.setFieldsValue(props.selectedData);
+        } else {
+            setFormData(defaultData);
+            form.resetFields();
+        }
+    }, [props.showModal, props.selectedData, form]);
+
+    return (
+        <Modal
+            title={
+                <Text style={{ fontSize: '18px' }}>
+                    {props.actionMode === 'add'
+                        ? 'Tambah Data'
+                        : props.actionMode === 'preview'
+                        ? 'Preview Status'
+                        : 'Edit Status'}
+                </Text>
+            }
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={
+                !props.readOnly && (
+                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
+                        <ConfigProvider
+                            theme={{
+                                token: { colorPrimary: '#23A55A' },
+                                components: {
+                                    Button: {
+                                        defaultBg: 'white',
+                                        defaultColor: '#23A55A',
+                                        defaultBorderColor: '#23A55A',
+                                        defaultHoverColor: 'white',
+                                        defaultHoverBg: '#23A55A',
+                                        defaultHoverBorderColor: '#23A55A',
+                                    },
+                                },
+                            }}
+                        >
+                            <Button onClick={handleCancel}>Batal</Button>
+                        </ConfigProvider>
+                        <ConfigProvider
+                            theme={{
+                                token: { colorPrimary: '#23A55A' },
+                                components: {
+                                    Button: {
+                                        defaultBg: '#23A55A',
+                                        defaultColor: 'white',
+                                        defaultBorderColor: '#23A55A',
+                                        defaultHoverColor: 'white',
+                                        defaultHoverBg: '#23A55A',
+                                        defaultHoverBorderColor: '#23A55A',
+                                    },
+                                },
+                            }}
+                        >
+                            <Button type="primary" loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        </ConfigProvider>
+                    </div>
+                )
+            }
+        >
+            <Divider />
+            <Form form={form} layout="vertical" name="detailStatusForm">
+                <Form.Item
+                    name="statusCode"
+                    label={<Text strong>Status Code</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan kode status!' }]}
+                >
+                    <InputNumber
+                        placeholder="Masukan code status"
+                        readOnly={props.readOnly}
+                        style={{ width: '100%' }}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="statusName"
+                    label={<Text strong>Status Name</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan nama status!' }]}
+                >
+                    <Input
+                        placeholder="Masukan nama status"
+                        readOnly={props.readOnly}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="description"
+                    label={<Text strong>Description</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan deskripsi!' }]}
+                >
+                    <TextArea
+                        placeholder="Masukan deskripsi"
+                        readOnly={props.readOnly}
+                        rows={4}
+                    />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+
+export default DetailStatus;