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

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