add role management components with list and detail views

src/pages/role/component/DetailRole.jsx

@@ -0,0 +1,95 @@
+import React, { memo } from 'react';
+import { Modal, Form, Input, Select, Row, Col } from 'antd';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const DetailRole = memo(function DetailRole({ visible, onCancel, onOk, form, editingKey, readOnly }) {
+    const getModalTitle = () => {
+        if (readOnly) return 'Detail Role';
+        if (editingKey) return 'Edit Role';
+        return 'Tambah Role';
+    };
+
+    return (
+        <Modal
+            title={getModalTitle()}
+            open={visible}
+            onCancel={onCancel}
+            onOk={onOk}
+            okText={readOnly ? 'Tutup' : editingKey ? 'Simpan' : 'Tambah'}
+            cancelText="Batal"
+            width={600}
+            cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
+        >
+            <Form
+                form={form}
+                layout="vertical"
+                name="roleForm"
+                disabled={readOnly}
+            >
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_name"
+                            label="Nama Role"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Nama role tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <Input placeholder="Masukkan nama role" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_level"
+                            label="Level"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Level tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <Select placeholder="Pilih level">
+                                <Option value={1}>Level 1</Option>
+                                <Option value={2}>Level 2</Option>
+                                <Option value={3}>Level 3</Option>
+                            </Select>
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_description"
+                            label="Deskripsi"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Deskripsi tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <TextArea
+                                rows={4}
+                                placeholder="Masukkan deskripsi role"
+                                maxLength={200}
+                                showCount
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    );
+});
+
+export default DetailRole;