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

src/App.jsx

@@ -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 />}>

src/layout/LayoutMenu.jsx

@@ -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>,
+            },
         ],
     },
     {

src/pages/history/report/IndexReport.jsx

@@ -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>
+        <div style={{ padding: 24, minHeight: 360 }}>
-            <h1>Report Page</h1>
+            <Table columns={columns} dataSource={data} />
         </div>
     );
 });

src/pages/master/brandDevice/component/ListBrandDevice.jsx

@@ -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" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
-                    <Button type="text" icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
+                    <Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
-                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
+                    <Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
                 </Space>
             ),
         },

src/pages/master/plantSection/component/ListPlantSection.jsx

@@ -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" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
-                    <Button type="text" icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
+                    <Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
-                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
+                    <Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
                 </Space>
             ),
         },

src/pages/master/status/IndexStatus.jsx

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

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;

src/pages/master/status/component/ListStatus.jsx

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

src/pages/master/tag/component/ListTag.jsx

@@ -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={{