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

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

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-09 16:43:03 +07:00
parent dcdd8c9b8d
commit a7af974108
9 changed files with 548 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -15,6 +15,7 @@ import IndexTag from './pages/master/tag/IndexTag';
import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
import IndexErrorCode from './pages/master/errorCode/IndexErrorCode';
import IndexPlantSection from './pages/master/plantSection/IndexPlantSection';
import IndexStatus from './pages/master/status/IndexStatus';
// History
import IndexTrending from './pages/history/trending/IndexTrending';
@@ -54,6 +55,7 @@ const App = () => {
<Route path="brand-device" element={<IndexBrandDevice />} />
<Route path="plant-section" element={<IndexPlantSection />} />
<Route path="error-code" element={<IndexErrorCode />} />
<Route path="status" element={<IndexStatus />} />
</Route>
<Route path="/history" element={<ProtectedRoute />}>

5
src/layout/LayoutMenu.jsx
View File

@@ -66,6 +66,11 @@ const allItems = [
icon: <WarningOutlined style={{fontSize:'19px'}} />,
label: <Link to="/master/error-code">Error Code</Link>,
},
{
key: 'master-status',
icon: <SafetyOutlined style={{fontSize:'19px'}} />,
label: <Link to="/master/status">Status</Link>,
},
],
},
{

94
src/pages/history/report/IndexReport.jsx
View File

@@ -1,13 +1,46 @@
import React, { memo, useEffect } from 'react';
import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
import { Typography, Table } from 'antd';
const { Text } = Typography;
// Mock Data
const initialData = [
{
key: '1',
plantSubSection: 'Section A',
device: 'Device 1',
errorCode: 'E-101',
status: 'Warning',
},
{
key: '2',
plantSubSection: 'Section B',
device: 'Device 2',
errorCode: 'E-102',
status: 'Alarm',
},
{
key: '3',
plantSubSection: 'Section C',
device: 'Device 3',
errorCode: 'E-103',
status: 'Done',
},
{
key: '4',
plantSubSection: 'Section A',
device: 'Device 4',
errorCode: 'E-104',
status: 'Warning',
},
];
const IndexReport = memo(function IndexReport() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [data, setData] = useState(initialData);
useEffect(() => {
const token = localStorage.getItem('token');
@@ -21,9 +54,62 @@ const IndexReport = memo(function IndexReport() {
}
}, []);
const getTitleStyle = (statusName) => {
let backgroundColor;
switch (statusName.toLowerCase()) {
case 'done':
backgroundColor = '#52c41a'; // green
break;
case 'warning':
backgroundColor = '#faad14'; // orange
break;
case 'alarm':
backgroundColor = '#f5222d'; // red
break;
case 'critical':
backgroundColor = '#000000'; // black
break;
default:
backgroundColor = 'transparent';
}
return {
backgroundColor,
color: '#fff',
padding: '2px 8px',
borderRadius: '4px',
display: 'inline-block'
};
};
const columns = [
{
title: 'Plant Sub Section',
dataIndex: 'plantSubSection',
key: 'plantSubSection',
},
{
title: 'Device',
dataIndex: 'device',
key: 'device',
},
{
title: 'Error Code',
dataIndex: 'errorCode',
key: 'errorCode',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: (status) => (
<span style={getTitleStyle(status)}>{status}</span>
),
},
];
return (
<div>
<h1>Report Page</h1>
<div style={{ padding: 24, minHeight: 360 }}>
<Table columns={columns} dataSource={data} />
</div>
);
});

6
src/pages/master/brandDevice/component/ListBrandDevice.jsx
View File

@@ -45,9 +45,9 @@ const ListBrandDevice = ({
key: 'action',
render: (_, record) => (
<Space size="middle">
<Button type="text" icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
<Button type="text" icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
<Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
<Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
<Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
<Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
</Space>
),
},

6
src/pages/master/plantSection/component/ListPlantSection.jsx
View File

@@ -47,9 +47,9 @@ const ListPlantSection = ({
key: 'action',
render: (_, record) => (
<Space size="middle">
<Button type="text" icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
<Button type="text" icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
<Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
<Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
<Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
<Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
</Space>
),
},

167
src/pages/master/status/IndexStatus.jsx Normal file
View File

@@ -0,0 +1,167 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
import ListStatus from './component/ListStatus';
import DetailStatus from './component/DetailStatus';
import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
const { Text } = Typography;
// Mock Data
const initialData = [
{
key: '3',
statusCode: 3,
statusName: 'Done',
description: 'Indicates that the process is complete.',
},
{
key: '1',
statusCode: 1,
statusName: 'Warning',
description: 'Indicates a warning condition.',
},
{
key: '2',
statusCode: 2,
statusName: 'Alarm',
description: 'Indicates an alarm condition.',
},
{
key: '4',
statusCode: 4,
statusName: 'Critical',
description: 'Indicates a critical condition.',
},
];
const IndexStatus = memo(function IndexStatus() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [data, setData] = useState(initialData);
const [actionMode, setActionMode] = useState('list');
const [selectedData, setSelectedData] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [readOnly, setReadOnly] = useState(false);
// Mock API function
const getAllStatus = async (params) => {
const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
let filteredData = data;
if (search) {
filteredData = data.filter(item =>
item.statusName.toLowerCase().includes(search.toLowerCase())
);
}
const start = (page - 1) * limit;
const end = start + limit;
const paginatedData = filteredData.slice(start, end);
return new Promise(resolve => {
setTimeout(() => {
resolve({
status: 200,
data: {
data: paginatedData,
total: filteredData.length,
paging: {
page: parseInt(page),
limit: parseInt(limit),
total: filteredData.length,
},
},
});
}, 500);
});
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
{ title: <Text strong style={{ fontSize: '14px' }}>Status</Text> }
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
useEffect(() => {
if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
setIsModalVisible(true);
setReadOnly(actionMode === 'preview');
} else {
setIsModalVisible(false);
}
}, [actionMode]);
const handleDataSaved = (values) => {
let newData = [...data];
if (values.key) { // Editing
const index = newData.findIndex((item) => values.key === item.key);
if (index > -1) {
newData.splice(index, 1, values);
}
} else { // Adding
const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
newData = [{ key: newKey, ...values }, ...newData];
}
setData(newData);
};
const handleEdit = (record) => {
setSelectedData(record);
setActionMode('edit');
};
const handlePreview = (record) => {
setSelectedData(record);
setActionMode('preview');
};
const handleDelete = (record) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi',
message: `Apakah anda yakin ingin menghapus status "${record.statusName}"?`,
onConfirm: () => {
const newData = data.filter((item) => item.key !== record.key);
setData(newData);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Status "${record.statusName}" berhasil dihapus.`,
});
},
});
};
return (
<React.Fragment>
<ListStatus
setActionMode={setActionMode}
handleEdit={handleEdit}
handleDelete={handleDelete}
handlePreview={handlePreview}
getAllStatus={getAllStatus}
data={data}
/>
<DetailStatus
showModal={isModalVisible}
setActionMode={setActionMode}
selectedData={selectedData}
readOnly={readOnly}
onDataSaved={handleDataSaved}
setSelectedData={setSelectedData}
/>
</React.Fragment>
);
});
export default IndexStatus;

160
src/pages/master/status/component/DetailStatus.jsx Normal file
View File

@@ -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;

114
src/pages/master/status/component/ListStatus.jsx Normal file
View File

@@ -0,0 +1,114 @@
import React from 'react';
import { Card, Button, Row, Col, Typography, Space, ConfigProvider } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
const { Title, Text } = Typography;
const ListStatus = ({
setActionMode,
handleEdit,
handleDelete,
handlePreview,
data,
}) => {
const getCardStyle = (statusName) => {
let color;
switch (statusName.toLowerCase()) {
case 'done':
color = '#52c41a'; // green
break;
case 'warning':
color = '#faad14'; // orange
break;
case 'alarm':
color = '#f5222d'; // red
break;
case 'critical':
color = '#000000'; // black
break;
default:
color = '#d9d9d9'; // default antd border color
}
return { border: `2px solid ${color}` };
};
const getTitleStyle = (statusName) => {
let backgroundColor;
switch (statusName.toLowerCase()) {
case 'done':
backgroundColor = '#52c41a'; // green
break;
case 'warning':
backgroundColor = '#faad14'; // orange
break;
case 'alarm':
backgroundColor = '#f5222d'; // red
break;
case 'critical':
backgroundColor = '#000000'; // black
break;
default:
backgroundColor = 'transparent';
}
return {
backgroundColor,
color: '#fff',
padding: '2px 8px',
borderRadius: '4px',
display: 'inline-block'
};
};
return (
<div style={{ padding: 24, minHeight: 360 }}>
<Row justify="end" style={{ marginBottom: 16 }}>
<Col>
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
>
<Button
icon={<PlusOutlined />}
onClick={() => setActionMode('add')}
>
Tambah Data
</Button>
</ConfigProvider>
</Col>
</Row>
<Row gutter={[16, 16]}>
{data.map(item => (
<Col xs={24} sm={12} md={8} lg={6} key={item.key}>
<Card
title={<span style={getTitleStyle(item.statusName)}>{item.statusName}</span>}
style={getCardStyle(item.statusName)}
actions={[
<Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
<Button style={{ border: '1px solid #1890ff', color: '#1890ff', borderRadius: '6px', padding: '4px 8px' }} icon={<EyeOutlined />} onClick={() => handlePreview(item)} />
<Button style={{ border: '1px solid #faad14', color: '#faad14', borderRadius: '6px', padding: '4px 8px' }} icon={<EditOutlined />} onClick={() => handleEdit(item)} />
<Button danger style={{ border: '1px solid red', borderRadius: '6px', padding: '4px 8px' }} icon={<DeleteOutlined />} onClick={() => handleDelete(item)} />
</Space>
]}
>
<p><Text strong>Code:</Text> {item.statusCode}</p>
<p><Text strong>Description:</Text> {item.description}</p>
</Card>
</Col>
))}
</Row>
</div>
);
};
export default ListStatus;

5
src/pages/master/tag/component/ListTag.jsx
View File

@@ -233,6 +233,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
render: (_, record) => (
<Space>
<Button
type="text"
icon={<EyeOutlined />}
onClick={() => showPreviewModal(record)}
style={{
@@ -241,6 +242,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
}}
/>
<Button
type="text"
icon={<EditOutlined />}
onClick={() => showEditModal(record)}
style={{
@@ -250,6 +252,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
/>
<Button
danger
type="text"
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)}
style={{
@@ -483,4 +486,4 @@ const ListTag = memo(function ListTag(props) {
);
});
export default ListTag;
export default ListTag;