yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: implement brand device management with listing, detail view, and search functionality

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-07 12:07:29 +07:00
parent d469992ee2
commit b2e1bca4ab
3 changed files with 430 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/master/brandDevice/component/DetailBrandDevice.jsx Normal file
View File

@@ -0,0 +1,117 @@
import React from 'react';
import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
const { Text } = Typography;
const DetailBrandDevice = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
const modalTitle = readOnly ? 'Preview Brand' : (editingKey ? 'Edit Brand' : 'Tambah Brand');
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 Brand</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="brandCode"
rules={[{ required: true, message: 'Please input the brand code!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Enter Brand Code" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Brand Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="brandName"
rules={[{ required: true, message: 'Please input the brand name!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Enter Brand Name" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Brand Type</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="brandType"
rules={[{ required: true, message: 'Please input the brand type!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Enter Brand Type" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="deviceName"
rules={[{ required: true, message: 'Please input the device name!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Enter Device Name" />
</Form.Item>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Description</Text>
<Form.Item
name="description"
style={{ marginBottom: 0 }}
>
<Input.TextArea readOnly={readOnly} placeholder="Enter Description (Optional)" rows={4} />
</Form.Item>
</div>
</Form>
</Modal>
);
};
export default DetailBrandDevice;