Merge pull request 'lavoce' (#7) from lavoce into main

Reviewed-on: #7

src/App.jsx

@@ -23,12 +23,11 @@ import IndexShift from './pages/master/shift/IndexShift';
 import IndexJadwalShift from './pages/jadwalShift/IndexJadwalShift';
 
 // History
-import IndexTrending from './pages/history/trending/IndexTrending';
+import IndexTrending from './pages/report/trending/IndexTrending';
-import IndexReport from './pages/history/report/IndexReport';
+import IndexReport from './pages/report/report/IndexReport';
 
 // Other Pages
 import IndexNotification from './pages/notification/IndexNotification';
-import IndexEventAlarm from './pages/eventAlarm/IndexEventAlarm';
 import IndexRole from './pages/role/IndexRole';
 import IndexUser from './pages/user/IndexUser';
 
@@ -40,6 +39,8 @@ import SvgCompressorC from './pages/home/SvgCompressorC';
 import SvgAirDryerA from './pages/home/SvgAirDryerA';
 import SvgAirDryerB from './pages/home/SvgAirDryerB';
 import SvgAirDryerC from './pages/home/SvgAirDryerC';
+import IndexHistoryAlarm from './pages/history/alarm/IndexHistoryAlarm';
+import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
 
 const App = () => {
     return (
@@ -84,8 +85,8 @@ const App = () => {
                 </Route>
 
                 <Route path="/history" element={<ProtectedRoute />}>
-                    <Route path="alarm" element={<IndexEventAlarm />} />
+                    <Route path="alarm" element={<IndexHistoryAlarm />} />
-                    <Route path="event" element={<IndexEventAlarm />} />
+                    <Route path="event" element={<IndexHistoryEvent />} />
                 </Route>
 
                 <Route path="/notification" element={<ProtectedRoute />}>

src/components/Global/TableList.jsx

@@ -108,7 +108,7 @@ const TableList = memo(function TableList({
                     showDeleteDialog={showDeleteDialog}
                 />
             ) : (
-                <Row gutter={24}>
+                <Row gutter={24} style={{ marginTop: '16px' }}>
                     <Table
                         rowSelection={rowSelection || null}
                         columns={columns}

src/pages/eventAlarm/IndexEventAlarm.jsx

@@ -1,72 +0,0 @@
-import React, { memo, useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
-import { Form, Typography } from 'antd';
-import ListEventAlarm from './component/ListEventAlarm';
-import DetailEventAlarm from './component/DetailEventAlarm';
-
-const { Text } = Typography;
-
-const IndexEventAlarm = memo(function IndexEventAlarm() {
-    const navigate = useNavigate();
-    const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
-
-    const [actionMode, setActionMode] = useState('list');
-    const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            setBreadcrumbItems([
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            • Event Alarm
-                        </Text>
-                    ),
-                },
-            ]);
-        } else {
-            navigate('/signin');
-        }
-    }, [navigate, setBreadcrumbItems]);
-
-    useEffect(() => {
-        if (actionMode === 'preview') {
-            setIsModalVisible(true);
-            if (selectedData) {
-                form.setFieldsValue(selectedData);
-            }
-        } else {
-            setIsModalVisible(false);
-            form.resetFields();
-        }
-    }, [actionMode, selectedData, form]);
-
-    const handleCancel = () => {
-        setActionMode('list');
-        setSelectedData(null);
-        form.resetFields();
-    };
-
-    return (
-        <React.Fragment>
-            <ListEventAlarm
-                actionMode={actionMode}
-                setActionMode={setActionMode}
-                selectedData={selectedData}
-                setSelectedData={setSelectedData}
-            />
-            <DetailEventAlarm
-                visible={isModalVisible}
-                onCancel={handleCancel}
-                form={form}
-                selectedData={selectedData}
-            />
-        </React.Fragment>
-    );
-});
-
-export default IndexEventAlarm;

src/pages/eventAlarm/component/DetailEventAlarm.jsx

@@ -1,58 +0,0 @@
-import { memo } from 'react';
-import { Modal, Divider, Descriptions } from 'antd';
-
-const DetailEventAlarm = memo(function DetailEventAlarm({ visible, onCancel, selectedData }) {
-    return (
-        <Modal
-            title="Detail Event Alarm"
-            open={visible}
-            onCancel={onCancel}
-            onOk={onCancel}
-            okText="Tutup"
-            cancelButtonProps={{ style: { display: 'none' } }}
-            width={700}
-        >
-            {selectedData && (
-                <div>
-                    <Descriptions bordered column={2}>
-                        <Descriptions.Item label="Tanggal" span={2}>
-                            {selectedData.tanggal}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="Plant Sub Section" span={2}>
-                            {selectedData.plant_sub_section}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="Device">
-                            {selectedData.device}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="Tag">
-                            {selectedData.tag}
-                        </Descriptions.Item>
-                        <Descriptions.Item label="Engineer" span={2}>
-                            {selectedData.engineer}
-                        </Descriptions.Item>
-                    </Descriptions>
-
-                    <Divider style={{ margin: '16px 0' }} />
-
-                    {/* Additional Info */}
-                    <div
-                        style={{
-                            marginTop: '16px',
-                            padding: '12px',
-                            backgroundColor: '#f6f9ff',
-                            borderRadius: '6px',
-                            border: '1px solid #d6e4ff',
-                        }}
-                    >
-                        <div style={{ fontSize: '12px', color: '#595959' }}>
-                            <strong>Catatan:</strong> Event alarm ini telah tercatat dalam sistem untuk
-                            monitoring dan analisis lebih lanjut.
-                        </div>
-                    </div>
-                </div>
-            )}
-        </Modal>
-    );
-});
-
-export default DetailEventAlarm;

src/pages/history/alarm/IndexHistoryAlarm.jsx

@@ -0,0 +1,38 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+import ListHistoryAlarm from './component/ListHistoryAlarm';
+
+const { Text } = Typography;
+
+const IndexHistoryAlarm = memo(function IndexHistoryAlarm() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [selectedData, setSelectedData] = useState(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • History Event
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    return (
+        <React.Fragment>
+            <ListHistoryAlarm selectedData={selectedData} setSelectedData={setSelectedData} />
+        </React.Fragment>
+    );
+});
+
+export default IndexHistoryAlarm;

src/pages/history/alarm/component/ListHistoryAlarm.jsx

@@ -0,0 +1,128 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Row, Col, Card, Input } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import TableList from '../../../../components/Global/TableList';
+
+const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Datetime',
+            dataIndex: 'datetime',
+            key: 'datetime',
+            width: '10%',
+        },
+        {
+            title: 'Tag Name',
+            dataIndex: 'tag_name',
+            key: 'tag_name',
+            width: '40%',
+        },
+        {
+            title: 'Value',
+            dataIndex: 'stat',
+            key: 'stat',
+            width: '10%',
+        },
+        {
+            title: 'Threshold',
+            dataIndex: 'threshold',
+            key: 'threshold',
+            width: '10%',
+        },
+        {
+            title: 'Condition',
+            dataIndex: 'condition',
+            key: 'condition',
+            width: '20%',
+        },
+        {
+            title: 'Stat',
+            dataIndex: 'stat',
+            key: 'stat',
+            width: '5%',
+        },
+    ];
+
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const getAllEventAlarm = async (params) => {
+        return {
+            data: [],
+        };
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ search: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ search: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    return (
+        <React.Fragment>
+            <Card>
+                <Row>
+                    <Col xs={24}>
+                        <Row justify="space-between" align="middle" gutter={[8, 8]}>
+                            <Col xs={24} sm={24} md={12} lg={12}>
+                                <Input.Search
+                                    placeholder="Search ..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        if (value === '') {
+                                            handleSearchClear();
+                                        }
+                                    }}
+                                    onSearch={handleSearch}
+                                    allowClear={{
+                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                                    }}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            getData={getAllEventAlarm}
+                            queryParams={formDataFilter}
+                            columns={columns}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListHistoryAlarm;

src/pages/history/event/IndexHistoryEvent.jsx

@@ -0,0 +1,38 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+import ListHistoryEvent from './component/ListHistoryEvent';
+
+const { Text } = Typography;
+
+const IndexHistoryEvent = memo(function IndexHistoryEvent() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [selectedData, setSelectedData] = useState(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • History Event
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    return (
+        <React.Fragment>
+            <ListHistoryEvent selectedData={selectedData} setSelectedData={setSelectedData} />
+        </React.Fragment>
+    );
+});
+
+export default IndexHistoryEvent;

src/pages/history/event/component/ListHistoryEvent.jsx

@@ -1,70 +1,9 @@
 import React, { memo, useState, useEffect } from 'react';
 import { Button, Row, Col, Card, Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
+import TableList from '../../../../components/Global/TableList';
-import TableList from '../../../components/Global/TableList';
 
-// Dummy data untuk riwayat alarm
+const ListHistoryEvent = memo(function ListHistoryEvent(props) {
-const initialAlarmsData = [
-    {
-        alarm_id: 1,
-        tanggal: '2025-01-15 08:30:00',
-        plant_sub_section: 'Plant A - Section 1',
-        device: 'Device 001',
-        tag: 'TEMP-001',
-        engineer: 'Pras',
-    },
-    {
-        alarm_id: 2,
-        tanggal: '2025-01-15 09:15:00',
-        plant_sub_section: 'Plant B - Section 2',
-        device: 'Device 002',
-        tag: 'PRESS-002',
-        engineer: 'Bagus',
-    },
-    {
-        alarm_id: 3,
-        tanggal: '2025-01-15 10:00:00',
-        plant_sub_section: 'Plant A - Section 3',
-        device: 'Device 003',
-        tag: 'FLOW-003',
-        engineer: 'iqbal',
-    },
-    {
-        alarm_id: 4,
-        tanggal: '2025-01-15 11:45:00',
-        plant_sub_section: 'Plant C - Section 1',
-        device: 'Device 004',
-        tag: 'LEVEL-004',
-        engineer: 'riski',
-    },
-    {
-        alarm_id: 5,
-        tanggal: '2025-01-15 13:20:00',
-        plant_sub_section: 'Plant B - Section 3',
-        device: 'Device 005',
-        tag: 'TEMP-005',
-        engineer: 'anton',
-    },
-    {
-        alarm_id: 6,
-        tanggal: '2025-01-15 14:00:00',
-        plant_sub_section: 'Plant A - Section 2',
-        device: 'Device 006',
-        tag: 'PRESS-006',
-        engineer: 'kurniawan',
-    },
-    {
-        alarm_id: 7,
-        tanggal: '2025-01-15 15:30:00',
-        plant_sub_section: 'Plant C - Section 2',
-        device: 'Device 007',
-        tag: 'FLOW-007',
-        engineer: 'wawan',
-    },
-];
-
-const ListEventAlarm = memo(function ListEventAlarm(props) {
     const columns = [
         {
             title: 'No',
@@ -74,33 +13,27 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
             render: (_, __, index) => index + 1,
         },
         {
-            title: 'Tanggal',
+            title: 'Datetime',
-            dataIndex: 'tanggal',
+            dataIndex: 'datetime',
-            key: 'tanggal',
+            key: 'datetime',
-            width: '15%',
+            width: '10%',
         },
         {
-            title: 'Plant Sub Section',
+            title: 'Tag Name',
-            dataIndex: 'plant_sub_section',
+            dataIndex: 'tag_name',
-            key: 'plant_sub_section',
+            key: 'tag_name',
-            width: '25%',
+            width: '40%',
         },
         {
-            title: 'Device',
+            title: 'Stat',
-            dataIndex: 'device',
+            dataIndex: 'stat',
-            key: 'device',
+            key: 'stat',
-            width: '15%',
+            width: '5%',
         },
         {
-            title: 'Tag',
+            title: 'Description',
-            dataIndex: 'tag',
+            dataIndex: 'description',
-            key: 'tag',
+            key: 'description',
-            width: '15%',
-        },
-        {
-            title: 'Engineer',
-            dataIndex: 'engineer',
-            key: 'engineer',
             width: '15%',
         },
     ];
@@ -111,31 +44,12 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
 
-    const navigate = useNavigate();
-
-    // Dummy data function to simulate API call
     const getAllEventAlarm = async (params) => {
         return {
-            data: initialAlarmsData,
+            data: [],
         };
     };
 
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            if (props.actionMode == 'list') {
-                setFormDataFilter(defaultFilter);
-                doFilter();
-            }
-        } else {
-            navigate('/signin');
-        }
-    }, [props.actionMode]);
-
-    const doFilter = () => {
-        setTrigerFilter((prev) => !prev);
-    };
-
     const handleSearch = () => {
         setFormDataFilter({ search: searchValue });
         setTrigerFilter((prev) => !prev);
@@ -155,15 +69,13 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
                         <Row justify="space-between" align="middle" gutter={[8, 8]}>
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
-                                    placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
+                                    placeholder="Search ..."
                                     value={searchValue}
                                     onChange={(e) => {
                                         const value = e.target.value;
                                         setSearchValue(value);
-                                        // Auto search when clearing by backspace/delete
                                         if (value === '') {
-                                            setFormDataFilter({ search: '' });
+                                            handleSearchClear();
-                                            setTrigerFilter((prev) => !prev);
                                         }
                                     }}
                                     onSearch={handleSearch}
@@ -201,4 +113,4 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
     );
 });
 
-export default ListEventAlarm;
+export default ListHistoryEvent;

src/pages/history/report/IndexReport.jsx

@@ -1,275 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { Typography, Table, Card, Select, DatePicker, Button, Row, Col } from 'antd';
-import { FileTextOutlined } from '@ant-design/icons';
-import { decryptData } from '../../../components/Global/Formatter';
-import dayjs from 'dayjs';
-
-const { Text } = Typography;
-
-// New data structure for tag history
-const tagHistoryData = [
-    {
-        tag: 'TEMP_SENSOR_1',
-        color: '#FF6B4A',
-        history: [
-            { timestamp: '2025-10-09 08:00', value: 75 },
-            { timestamp: '2025-10-09 08:05', value: 76 },
-            { timestamp: '2025-10-09 08:10', value: 75 },
-        ],
-    },
-    {
-        tag: 'GAS_LEAK_SENSOR_1',
-        color: '#4ECDC4',
-        history: [
-            { timestamp: '2025-10-09 08:00', value: 10 },
-            { timestamp: '2025-10-09 08:05', value: 150 },
-            { timestamp: '2025-10-09 08:10', value: 12 },
-        ],
-    },
-    {
-        tag: 'PRESSURE_SENSOR_1',
-        color: '#FFE66D',
-        history: [
-            { timestamp: '2025-10-09 08:00', value: 1.2 },
-            { timestamp: '2025-10-09 08:05', value: 1.3 },
-            { timestamp: '2025-10-09 08:10', value: 1.2 },
-        ],
-    },
-];
-
-const IndexReport = memo(function IndexReport() {
-    const navigate = useNavigate();
-    const { setBreadcrumbItems } = useBreadcrumb();
-
-    const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
-    const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
-    const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
-    const [periode, setPeriode] = useState('30 Menit');
-    const [userRole, setUserRole] = useState(null);
-    const [roleLevel, setRoleLevel] = useState(null);
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            // Get user data and role
-            let userData = null;
-            const sessionData = localStorage.getItem('session');
-            if (sessionData) {
-                userData = decryptData(sessionData);
-            } else {
-                const userRaw = localStorage.getItem('user');
-                if (userRaw) {
-                    try {
-                        userData = { user: JSON.parse(userRaw) };
-                    } catch (e) {
-                        console.error('Error parsing user data:', e);
-                    }
-                }
-            }
-
-            if (userData?.user) {
-                setUserRole(userData.user.role_name);
-                setRoleLevel(userData.user.role_level);
-            }
-
-            setBreadcrumbItems([
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            • History
-                        </Text>
-                    ),
-                },
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            Report
-                        </Text>
-                    ),
-                },
-            ]);
-        } else {
-            navigate('/signin');
-        }
-    }, []);
-
-    const handleReset = () => {
-        setPlantSubSection('Semua Plant');
-        setStartDate(dayjs('2025-09-30'));
-        setEndDate(dayjs('2025-10-09'));
-        setPeriode('30 Menit');
-    };
-
-    // Check if user has permission to view data (all except guest)
-    const canViewData = userRole && userRole !== 'guest';
-
-    // Convert tag history data to table format
-    const convertToTableData = () => {
-        const timestamps = {}; // Use an object to collect data per timestamp
-
-        tagHistoryData.forEach((tagData) => {
-            tagData.history.forEach((point) => {
-                if (!timestamps[point.timestamp]) {
-                    timestamps[point.timestamp] = {
-                        key: point.timestamp,
-                        'Date and Time': point.timestamp,
-                    };
-                }
-                timestamps[point.timestamp][tagData.tag] = point.value;
-            });
-        });
-
-        // Convert the object to an array
-        return Object.values(timestamps);
-    };
-
-    const tableData = convertToTableData();
-
-    // Create dynamic columns based on tags
-    const tags = tagHistoryData.map((tagData) => tagData.tag);
-
-    const columns = [
-        {
-            title: 'Date and Time',
-            dataIndex: 'Date and Time',
-            key: 'Date and Time',
-            fixed: 'left',
-            width: 180,
-            render: (text) => <Text strong>{text}</Text>,
-        },
-        ...tags.map((tag) => ({
-            title: tag,
-            dataIndex: tag,
-            key: tag,
-            align: 'center',
-            width: 150,
-            render: (value) => <Text>{value !== undefined ? value : '-'}</Text>,
-        })),
-    ];
-
-    return (
-        <React.Fragment>
-            <div style={{ minHeight: 360 }}>
-                {/* Filter Section */}
-                <Card className="filter-card">
-                    <div className="filter-header">
-                        <Text strong style={{ fontSize: '14px' }}>
-                            ☰ Filter Data
-                        </Text>
-                    </div>
-                    <Row gutter={16} style={{ marginTop: '16px' }}>
-                        <Col xs={24} sm={12} md={6}>
-                            <div className="filter-item">
-                                <Text style={{ fontSize: '12px', color: '#666' }}>
-                                    Plant Sub Section
-                                </Text>
-                                <Select
-                                    value={plantSubSection}
-                                    onChange={setPlantSubSection}
-                                    style={{ width: '100%', marginTop: '4px' }}
-                                    options={[
-                                        { value: 'Semua Plant', label: 'Semua Plant' },
-                                        { value: 'Plant 1', label: 'Plant 1' },
-                                        { value: 'Plant 2', label: 'Plant 2' },
-                                    ]}
-                                />
-                            </div>
-                        </Col>
-                        <Col xs={24} sm={12} md={6}>
-                            <div className="filter-item">
-                                <Text style={{ fontSize: '12px', color: '#666' }}>
-                                    Tanggal Mulai
-                                </Text>
-                                <DatePicker
-                                    value={startDate}
-                                    onChange={setStartDate}
-                                    format="DD/MM/YYYY"
-                                    style={{ width: '100%', marginTop: '4px' }}
-                                />
-                            </div>
-                        </Col>
-                        <Col xs={24} sm={12} md={6}>
-                            <div className="filter-item">
-                                <Text style={{ fontSize: '12px', color: '#666' }}>
-                                    Tanggal Akhir
-                                </Text>
-                                <DatePicker
-                                    value={endDate}
-                                    onChange={setEndDate}
-                                    format="DD/MM/YYYY"
-                                    style={{ width: '100%', marginTop: '4px' }}
-                                />
-                            </div>
-                        </Col>
-                        <Col xs={24} sm={12} md={6}>
-                            <div className="filter-item">
-                                <Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
-                                <Select
-                                    value={periode}
-                                    onChange={setPeriode}
-                                    style={{ width: '100%', marginTop: '4px' }}
-                                    options={[
-                                        { value: '5 Menit', label: '5 Menit' },
-                                        { value: '10 Menit', label: '10 Menit' },
-                                        { value: '30 Menit', label: '30 Menit' },
-                                        { value: '1 Jam', label: '1 Jam' },
-                                    ]}
-                                />
-                            </div>
-                        </Col>
-                    </Row>
-                    <Row gutter={8} style={{ marginTop: '16px' }}>
-                        <Col>
-                            <Button
-                                type="primary"
-                                danger
-                                icon={<FileTextOutlined />}
-                                disabled={!canViewData}
-                            >
-                                Tampilkan
-                            </Button>
-                        </Col>
-                        <Col>
-                            <Button
-                                onClick={handleReset}
-                                style={{ backgroundColor: '#6c757d', color: 'white' }}
-                                disabled={!canViewData}
-                            >
-                                Reset
-                            </Button>
-                        </Col>
-                    </Row>
-                </Card>
-                {/* Table Section */}
-                {/* {!canViewData ? (
-                    <Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
-                        <Text style={{ fontSize: '16px', color: '#999' }}>
-                            Anda tidak memiliki akses untuk melihat data report.
-                            <br />
-                            Silakan hubungi administrator untuk mendapatkan akses.
-                        </Text>
-                    </Card>
-                ) : ( */}
-                <Card style={{ marginTop: '24px' }}>
-                    <div style={{ marginBottom: '16px' }}>
-                        <Text strong style={{ fontSize: '16px' }}>
-                            ☰ History Report
-                        </Text>
-                    </div>
-                    <Table
-                        columns={columns}
-                        dataSource={tableData}
-                        pagination={false}
-                        scroll={{ x: 1000 }}
-                        size="middle"
-                    />
-                </Card>
-                {/* )} */}
-            </div>
-        </React.Fragment>
-    );
-});
-
-export default IndexReport;

src/pages/history/trending/IndexTrending.jsx

@@ -1,297 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { Typography, Select, DatePicker, Button, Row, Col, Card } from 'antd';
-import { ResponsiveLine } from '@nivo/line';
-import { FileTextOutlined } from '@ant-design/icons';
-import { decryptData } from '../../../components/Global/Formatter';
-import dayjs from 'dayjs';
-import './trending.css';
-
-const { Text } = Typography;
-
-const IndexTrending = memo(function IndexTrending() {
-    const navigate = useNavigate();
-    const { setBreadcrumbItems } = useBreadcrumb();
-
-    const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
-    const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
-    const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
-    const [periode, setPeriode] = useState('10 Menit');
-    const [userRole, setUserRole] = useState(null);
-    const [roleLevel, setRoleLevel] = useState(null);
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            // Get user data and role
-            let userData = null;
-            const sessionData = localStorage.getItem('session');
-            if (sessionData) {
-                userData = decryptData(sessionData);
-            } else {
-                const userRaw = localStorage.getItem('user');
-                if (userRaw) {
-                    try {
-                        userData = { user: JSON.parse(userRaw) };
-                    } catch (e) {
-                        console.error('Error parsing user data:', e);
-                    }
-                }
-            }
-
-            if (userData?.user) {
-                setUserRole(userData.user.role_name);
-                setRoleLevel(userData.user.role_level);
-            }
-
-            setBreadcrumbItems([
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            • History
-                        </Text>
-                    ),
-                },
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            Trending
-                        </Text>
-                    ),
-                },
-            ]);
-        } else {
-            navigate('/signin');
-        }
-    }, []);
-
-    const tagTrendingData = [
-        {
-            id: 'TEMP_SENSOR_1',
-            color: '#FF6B4A',
-            data: [
-                { y: '08:00', x: 75 },
-                { y: '08:05', x: 76 },
-                { y: '08:10', x: 75 },
-                { y: '08:15', x: 77 },
-                { y: '08:20', x: 76 },
-                { y: '08:25', x: 78 },
-                { y: '08:30', x: 79 },
-            ],
-        },
-        {
-            id: 'GAS_LEAK_SENSOR_1',
-            color: '#4ECDC4',
-            data: [
-                { y: '08:00', x: 10 },
-                { y: '08:05', x: 150 },
-                { y: '08:10', x: 40 },
-                { y: '08:15', x: 20 },
-                { y: '08:20', x: 15 },
-                { y: '08:25', x: 18 },
-                { y: '08:30', x: 25 },
-            ],
-        },
-        {
-            id: 'PRESSURE_SENSOR_1',
-            color: '#FFE66D',
-            data: [
-                { y: '08:00', x: 1.2 },
-                { y: '08:05', x: 1.3 },
-                { y: '08:10', x: 1.2 },
-                { y: '08:15', x: 1.4 },
-                { y: '08:20', x: 1.5 },
-                { y: '08:25', x: 1.3 },
-                { y: '08:30', x: 1.2 },
-            ],
-        },
-    ];
-
-    const handleReset = () => {
-        setPlantSubSection('Semua Plant');
-        setStartDate(dayjs('2025-09-30'));
-        setEndDate(dayjs('2025-10-09'));
-        setPeriode('10 Menit');
-    };
-
-    // Check if user has permission to view data (all except guest)
-    const canViewData = userRole && userRole !== 'guest';
-
-    // Check if user can export/filter (administrator, engineer)
-    const canExportData = userRole && (userRole === 'administrator' || userRole === 'engineer');
-
-    return (
-        <React.Fragment>
-            {/* Filter Section */}
-            <Card className="filter-card">
-                <div className="filter-header">
-                    <Text strong style={{ fontSize: '14px' }}>
-                        ☰ Filter Data
-                    </Text>
-                </div>
-                <Row gutter={16} style={{ marginTop: '16px' }}>
-                    <Col xs={24} sm={12} md={6}>
-                        <div className="filter-item">
-                            <Text style={{ fontSize: '12px', color: '#666' }}>
-                                Plant Sub Section
-                            </Text>
-                            <Select
-                                value={plantSubSection}
-                                onChange={setPlantSubSection}
-                                style={{ width: '100%', marginTop: '4px' }}
-                                options={[
-                                    { value: 'Semua Plant', label: 'Semua Plant' },
-                                    { value: 'Plant 1', label: 'Plant 1' },
-                                    { value: 'Plant 2', label: 'Plant 2' },
-                                ]}
-                            />
-                        </div>
-                    </Col>
-                    <Col xs={24} sm={12} md={6}>
-                        <div className="filter-item">
-                            <Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Mulai</Text>
-                            <DatePicker
-                                value={startDate}
-                                onChange={setStartDate}
-                                format="DD/MM/YYYY"
-                                style={{ width: '100%', marginTop: '4px' }}
-                            />
-                        </div>
-                    </Col>
-                    <Col xs={24} sm={12} md={6}>
-                        <div className="filter-item">
-                            <Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Akhir</Text>
-                            <DatePicker
-                                value={endDate}
-                                onChange={setEndDate}
-                                format="DD/MM/YYYY"
-                                style={{ width: '100%', marginTop: '4px' }}
-                            />
-                        </div>
-                    </Col>
-                    <Col xs={24} sm={12} md={6}>
-                        <div className="filter-item">
-                            <Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
-                            <Select
-                                value={periode}
-                                onChange={setPeriode}
-                                style={{ width: '100%', marginTop: '4px' }}
-                                options={[
-                                    { value: '5 Menit', label: '5 Menit' },
-                                    { value: '10 Menit', label: '10 Menit' },
-                                    { value: '30 Menit', label: '30 Menit' },
-                                    { value: '1 Jam', label: '1 Jam' },
-                                ]}
-                            />
-                        </div>
-                    </Col>
-                </Row>
-                <Row gutter={8} style={{ marginTop: '16px' }}>
-                    <Col>
-                        <Button
-                            type="primary"
-                            danger
-                            icon={<FileTextOutlined />}
-                            disabled={!canViewData}
-                        >
-                            Tampilkan
-                        </Button>
-                    </Col>
-                    <Col>
-                        <Button
-                            onClick={handleReset}
-                            style={{ backgroundColor: '#6c757d', color: 'white' }}
-                            disabled={!canViewData}
-                        >
-                            Reset
-                        </Button>
-                    </Col>
-                </Row>
-            </Card>
-            {/* Charts Section */}
-            {/* {!canViewData ? (
-                <Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
-                    <Text style={{ fontSize: '16px', color: '#999' }}>
-                        Anda tidak memiliki akses untuk melihat data trending.
-                        <br />
-                        Silakan hubungi administrator untuk mendapatkan akses.
-                    </Text>
-                </Card>
-            ) : ( */}
-            <>
-                <Row gutter={16} style={{ marginTop: '24px' }}>
-                    {/* Line Chart */}
-                    <Col xs={24}>
-                        <Card className="chart-card">
-                            <div className="chart-header">
-                                <Text strong style={{ fontSize: '14px' }}>
-                                    ☰ Tag Value Trending
-                                </Text>
-                            </div>
-                            <div style={{ height: '500px', marginTop: '16px' }}>
-                                <ResponsiveLine
-                                    data={tagTrendingData}
-                                    margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
-                                    xScale={{
-                                        type: 'linear',
-                                        min: 'auto',
-                                        max: 'auto',
-                                        stacked: false,
-                                        reverse: false,
-                                    }}
-                                    yScale={{
-                                        type: 'point',
-                                    }}
-                                    curve="natural"
-                                    axisBottom={{
-                                        tickSize: 5,
-                                        tickPadding: 5,
-                                        tickRotation: 0,
-                                        legend: 'Value',
-                                        legendOffset: 40,
-                                        legendPosition: 'middle',
-                                    }}
-                                    axisLeft={{
-                                        tickSize: 5,
-                                        tickPadding: 5,
-                                        tickRotation: 0,
-                                        legend: 'Time',
-                                        legendOffset: -45,
-                                        legendPosition: 'middle',
-                                    }}
-                                    colors={{ datum: 'color' }}
-                                    pointSize={6}
-                                    pointColor={{ theme: 'background' }}
-                                    pointBorderWidth={2}
-                                    pointBorderColor={{ from: 'serieColor' }}
-                                    pointLabelYOffset={-12}
-                                    useMesh={true}
-                                    legends={[
-                                        {
-                                            anchor: 'bottom-right',
-                                            direction: 'column',
-                                            justify: false,
-                                            translateX: 100,
-                                            translateY: 0,
-                                            itemsSpacing: 2,
-                                            itemDirection: 'left-to-right',
-                                            itemWidth: 80,
-                                            itemHeight: 20,
-                                            itemOpacity: 0.75,
-                                            symbolSize: 12,
-                                            symbolShape: 'circle',
-                                        },
-                                    ]}
-                                />
-                            </div>
-                        </Card>
-                    </Col>
-                </Row>
-            </>
-            {/* )} */}
-        </React.Fragment>
-    );
-});
-
-export default IndexTrending;

src/pages/jadwalShift/component/DetailJadwalShift.jsx

@@ -1,172 +1,173 @@
 import React, { useEffect, useState } from 'react';
 import {
     Modal,
-    Input,
     Typography,
     Button,
     ConfigProvider,
-    Row,
+    Form,
-    Col
+    Select,
+    Spin,
+    Input
 } from 'antd';
-import { NotifOk } from '../../../components/Global/ToastNotif';
+import { NotifOk, NotifAlert } from '../../../components/Global/ToastNotif';
+import { updateJadwalShift, createJadwalShift } from '../../../api/jadwal-shift.jsx';
 
 const { Text } = Typography;
+const { Option } = Select;
 
 const DetailJadwalShift = (props) => {
+    const [form] = Form.useForm();
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [employees, setEmployees] = useState([]);
+    const [loadingEmployees, setLoadingEmployees] = useState(false);
 
-    const defaultData = {
+    const isReadOnly = props.actionMode === 'preview';
-        id: '',
-        nama_shift: '',
-        jam_masuk: '',
-        jam_pulang: '',
-        username: '',
-        nama_employee: '',
-        whatsapp: ''
-    };
-
-    const [FormData, setFormData] = useState(defaultData);
 
     const handleCancel = () => {
-        props.setSelectedData(null);
         props.setActionMode('list');
     };
 
+    const fetchEmployees = async () => {
+        setLoadingEmployees(true);
+        try {
+            // Data dummy untuk dropdown karyawan
+            const dummyEmployees = [
+                { employee_id: '101', nama_employee: 'Andi Pratama' },
+                { employee_id: '102', nama_employee: 'Budi Santoso' },
+                { employee_id: '103', nama_employee: 'Citra Lestari' },
+                { employee_id: '104', nama_employee: 'Dewi Anggraini' },
+                { employee_id: '105', nama_employee: 'Eko Wahyudi' },
+                { employee_id: '106', nama_employee: 'Fitriani' },
+            ];
+            setEmployees(dummyEmployees);
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal memuat daftar karyawan.' });
+        } finally {
+            setLoadingEmployees(false);
+        }
+    };
+
     const handleSave = async () => {
-        setConfirmLoading(true);
+        try {
-        // This is a dummy save function for slicing purposes
+            const values = await form.validateFields();
-        setTimeout(() => {
+            let payload;
+            let responseMessage;
+
+            setConfirmLoading(true);
+            if (props.actionMode === 'edit') {
+                payload = { ...props.selectedData, ...values };
+                // await updateJadwalShift(payload.schedule_id, payload);
+                console.log("Updating schedule with payload:", payload);
+                responseMessage = 'Jadwal berhasil diperbarui.';
+            } else { // 'add' mode
+                payload = {
+                    employee_id: values.employee_id,
+                    shift_name: props.selectedData.shift_name,
+                    schedule_date: new Date().toISOString().split('T')[0], // Example date
+                };
+                // await createJadwalShift(payload);
+                console.log("Creating schedule with payload:", payload);
+                responseMessage = 'User berhasil ditambahkan ke jadwal.';
+            }
+            await new Promise(resolve => setTimeout(resolve, 500)); // Simulasi API call
+
+            NotifOk({ icon: 'success', title: 'Berhasil', message: responseMessage });
+            props.setActionMode('list'); // Menutup modal dan memicu refresh di parent
+        } catch (error) {
+            const message = error.response?.data?.message || 'Gagal memperbarui jadwal.';
+            NotifAlert({ icon: 'error', title: 'Gagal', message });
+        } finally {
             setConfirmLoading(false);
-            NotifOk({
+        }
-                icon: 'success',
-                title: 'Berhasil',
-                message: 'Data dummy berhasil disimpan.',
-            });
-            props.setActionMode('list');
-        }, 1000);
     };
 
     useEffect(() => {
-        if (props.selectedData) {
+        // Hanya jalankan jika modal untuk 'edit' atau 'preview' terbuka
-            setFormData(props.selectedData);
+        if (props.showModal) {
-        } else {
+            fetchEmployees();
-            setFormData(defaultData);
+            if (props.actionMode === 'edit' || props.actionMode === 'preview') {
+                form.setFieldsValue({
+                    employee_id: props.selectedData.employee_id,
+                    shift_name: props.selectedData.shift_name,
+                });
+            } else if (props.actionMode === 'add') {
+                form.setFieldsValue({
+                    shift_name: props.selectedData.shift_name,
+                    employee_id: null, // Reset employee selection
+                });
+            }
         }
-    }, [props.showModal, props.selectedData]);
+    }, [props.actionMode, props.showModal, props.selectedData, form]);
-
-    // Dummy handler for slicing
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData({ ...FormData, [name]: value });
-    };
 
     return (
         <Modal
-            title={`${ 
+            title={isReadOnly ? 'Preview Jadwal' : (props.actionMode === 'edit' ? 'Edit Jadwal' : 'Tambah User')}
-                props.actionMode === 'add'
-                    ? 'Tambah'
-                    : props.actionMode === 'preview'
-                    ? 'Preview'
-                    : 'Edit'
-            } Jadwal Shift`}
             open={props.showModal}
             onCancel={handleCancel}
-            width={800}
+            width={600}
             footer={[
                 <React.Fragment key="modal-footer">
-                    <ConfigProvider
+                    <Button key="back" onClick={handleCancel}>
-                        theme={{
+                        {isReadOnly ? 'Tutup' : 'Batal'}
-                            components: {
+                    </Button>
-                                Button: {
+                    {!isReadOnly && (
-                                    defaultBg: 'white',
+                        <Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23A55A' }}>
-                                    defaultColor: '#23A55A',
+                            Simpan
-                                    defaultBorderColor: '#23A55A',
+                        </Button>
-                                },
+                    )}
-                            },
-                        }}
-                    >
-                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
-                    </ConfigProvider>
-                    <ConfigProvider
-                        theme={{
-                            components: {
-                                Button: {
-                                    defaultBg: '#23a55a',
-                                    defaultColor: '#FFFFFF',
-                                    defaultBorderColor: '#23a55a',
-                                },
-                            },
-                        }}
-                    >
-                        {!props.readOnly && (
-                            <Button loading={confirmLoading} onClick={handleSave}>
-                                Simpan
-                            </Button>
-                        )}
-                    </ConfigProvider>
                 </React.Fragment>,
             ]}
         >
-            {FormData && (
+            <Spin spinning={loadingEmployees} tip="Memuat data...">
-                <div>
+                <Form form={form} layout="vertical" name="shift_form">
-                    <Row gutter={[16, 16]}>
+                    {props.actionMode === 'add' ? (
-                        <Col span={12}>
+                        <>
-                            <Text strong>Nama Karyawan</Text>
+                            <Form.Item
-                            <Input
+                                name="shift_name"
-                                name="nama_employee"
+                                label="Shift"
-                                value={FormData.nama_employee}
+                            >
-                                onChange={handleInputChange}
+                                <Input disabled />
-                                readOnly={props.readOnly}
+                            </Form.Item>
-                            />
+                            <Form.Item
-                        </Col>
+                                name="employee_id"
-                        <Col span={12}>
+                                label="Nama Karyawan"
-                            <Text strong>Username</Text>
+                                rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]}
-                            <Input
+                            >
-                                name="username"
+                                <Select
-                                value={FormData.username}
+                                    placeholder="Pilih karyawan"
-                                onChange={handleInputChange}
+                                    showSearch
-                                readOnly={props.readOnly}
+                                    optionFilterProp="children"
-                            />
+                                >
-                        </Col>
+                                    {employees.map(emp => (
-                        <Col span={12}>
+                                        <Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option>
-                            <Text strong>Nama Shift</Text>
+                                    ))}
-                            <Input
+                                </Select>
-                                name="nama_shift"
+                            </Form.Item>
-                                value={FormData.nama_shift}
+                        </>
-                                onChange={handleInputChange}
+                    ) : (
-                                readOnly={props.readOnly}
+                        <>
-                            />
+                            <Form.Item
-                        </Col>
+                                name="employee_id"
-                        <Col span={12}>
+                                label="Nama Karyawan"
-                            <Text strong>Whatsapp</Text>
+                                rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]}
-                            <Input
+                            >
-                                name="whatsapp"
+                                <Select placeholder="Pilih karyawan" disabled={isReadOnly} showSearch optionFilterProp="children">
-                                value={FormData.whatsapp}
+                                    {employees.map(emp => (
-                                onChange={handleInputChange}
+                                        <Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option>
-                                readOnly={props.readOnly}
+                                    ))}
-                            />
+                                </Select>
-                        </Col>
+                            </Form.Item>
-                        <Col span={12}>
+                            <Form.Item name="shift_name" label="Shift" rules={[{ required: true, message: 'Shift wajib dipilih!' }]}>
-                            <Text strong>Jam Masuk</Text>
+                                <Select placeholder="Pilih shift" disabled={isReadOnly}>
-                            <Input
+                                    <Option value="PAGI">PAGI</Option>
-                                name="jam_masuk"
+                                    <Option value="SIANG">SIANG</Option>
-                                value={FormData.jam_masuk}
+                                    <Option value="MALAM">MALAM</Option>
-                                onChange={handleInputChange}
+                                </Select>
-                                readOnly={props.readOnly}
+                            </Form.Item>
-                            />
+                        </>
-                        </Col>
+                    )}
-                        <Col span={12}>
+                </Form>
-                            <Text strong>Jam Pulang</Text>
+            </Spin>
-                            <Input
-                                name="jam_pulang"
-                                value={FormData.jam_pulang}
-                                onChange={handleInputChange}
-                                readOnly={props.readOnly}
-                            />
-                        </Col>
-                    </Row>
-                </div>
-            )}
         </Modal>
     );
 };

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -1,153 +1,146 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import { Space, ConfigProvider, Button, Row, Col, Card, Input, Typography, Spin, Divider, Checkbox, Select } from 'antd';
 import {
     PlusOutlined,
+    SearchOutlined,
+    EyeOutlined,
     EditOutlined,
     DeleteOutlined,
-    EyeOutlined,
-    SearchOutlined,
 } from '@ant-design/icons';
-import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
-import TableList from '../../../components/Global/TableList';
+import { getAllJadwalShift, deleteJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift.jsx';
-import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
 
-const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+const { Title, Text } = Typography;
-    {
-        title: 'Tanggal Jadwal',
-        dataIndex: 'schedule_date',
-        key: 'schedule_date',
-        render: (date) => date ? new Date(date).toLocaleDateString('id-ID') : '-',
-    },
-    {
-        title: 'Nama Shift',
-        dataIndex: 'shift_name',
-        key: 'shift_name',
-        render: (text) => text || '-',
-    },
-    {
-        title: 'Jam Masuk',
-        dataIndex: 'start_time',
-        key: 'start_time',
-        render: (time) => time || '-',
-    },
-    {
-        title: 'Jam Pulang',
-        dataIndex: 'end_time',
-        key: 'end_time',
-        render: (time) => time || '-',
-    },
-    {
-        title: 'Status',
-        dataIndex: 'is_active',
-        key: 'is_active',
-        render: (isActive) => (
-            <Tag color={isActive ? 'green' : 'red'}>
-                {isActive ? 'Aktif' : 'Tidak Aktif'}
-            </Tag>
-        ),
-    },
-    {
-        title: 'Aksi',
-        key: 'aksi',
-        align: 'center',
-        render: (_, record) => (
-            <Space>
-                <Button
-                    type="text"
-                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
-                    onClick={() => showPreviewModal(record)}
-                />
-                <Button
-                    type="text"
-                    icon={<EditOutlined style={{ color: '#faad14' }} />}
-                    onClick={() => showEditModal(record)}
-                />
-                <Button
-                    type="text"
-                    danger
-                    icon={<DeleteOutlined />}
-                    onClick={() => showDeleteDialog(record)}
-                />
-            </Space>
-        ),
-    },
-];
 
 const ListJadwalShift = memo(function ListJadwalShift(props) {
-    const [trigerFilter, setTrigerFilter] = useState(false);
+    const [groupedSchedules, setGroupedSchedules] = useState({});
-    const defaultFilter = { criteria: '' };
+    const [loading, setLoading] = useState(true);
-    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [selectedSchedules, setSelectedSchedules] = useState([]);
+    const [editingShift, setEditingShift] = useState(null); // State for shift-specific edit mode
+    const [pendingChanges, setPendingChanges] = useState({}); // State for bulk shift edits
+    const [employeeOptions, setEmployeeOptions] = useState([]); // State for employee dropdown
     const navigate = useNavigate();
 
-    const getData = async (queryParams) => {
+    // Function to format timestamp without moment.js
-        try {
+    const formatTimestamp = (timestamp) => {
-            const params = new URLSearchParams({
+        const date = new Date(timestamp);
-                page: queryParams.page || 1,
+        const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-                limit: queryParams.limit || 10,
+        const optionsTime = { hour: '2-digit', minute: '2-digit', hour12: false };
-                criteria: queryParams.criteria || ''
-            });
 
-            const response = await getAllJadwalShift(params);
+        const formattedDate = date.toLocaleDateString('id-ID', optionsDate);
-            return response;
+        const formattedTime = date.toLocaleTimeString('id-ID', optionsTime);
-        } catch (error) {
+        return `${formattedDate} pukul ${formattedTime}`;
-            console.error('Error fetching jadwal shift:', error);
+    };
-            NotifAlert({
+
-                icon: 'error',
+    const formatRelativeTimestamp = (timestamp) => {
-                title: 'Error',
+        const now = new Date();
-                message: 'Gagal mengambil data jadwal shift.',
+        const date = new Date(timestamp);
-            });
+        const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            return {
+        const startOfYesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
-                status: 500,
+
-                data: {
+        let dayString;
-                    data: [],
+        if (date >= startOfToday) {
-                    paging: {
+            dayString = 'Hari ini';
-                        page: 1,
+        } else if (date >= startOfYesterday) {
-                        limit: 10,
+            dayString = 'Kemarin';
-                        total: 0,
+        } else {
-                        page_total: 0
+            dayString = date.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' });
-                    }
+        }
+
+        const timeString = date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false }).replace('.', ':');
+        return `${dayString}, ${timeString}`;
+    };
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            // const params = new URLSearchParams({ ... });
+            // const response = await getAllJadwalShift(params);
+
+            // ================== START: DUMMY DATA FOR VISUAL PREVIEW ==================
+            // This section creates dummy schedules and users to ensure all shifts are populated.
+            // The actual API call is commented out for now.
+
+            const mockSchedules = [
+                { schedule_id: 1, employee_id: '101', shift_name: 'PAGI', nama_employee: 'Andi Pratama', whatsapp: '081234567890', updated_by: 'Admin Super', updated_at: '2024-05-21T10:00:00' },
+                { schedule_id: 2, employee_id: '102', shift_name: 'PAGI', nama_employee: 'Budi Santoso', whatsapp: '081234567891', updated_by: 'Admin Super', updated_at: '2024-05-21T10:00:00' },
+                { schedule_id: 3, employee_id: '103', shift_name: 'SIANG', nama_employee: 'Citra Lestari', whatsapp: '081234567892', updated_by: 'John Doe', updated_at: '2024-05-21T09:45:00' },
+                { schedule_id: 4, employee_id: '104', shift_name: 'SIANG', nama_employee: 'Dewi Anggraini', whatsapp: '081234567893', updated_by: 'John Doe', updated_at: '2024-05-21T09:45:00' },
+                { schedule_id: 5, employee_id: '105', shift_name: 'MALAM', nama_employee: 'Eko Wahyudi', whatsapp: '081234567894', updated_by: 'Jane Smith', updated_at: '2024-05-20T22:15:00' },
+                { schedule_id: 6, employee_id: '106', shift_name: 'MALAM', nama_employee: 'Fitriani', whatsapp: '081234567895', updated_by: 'Jane Smith', updated_at: '2024-05-20T22:15:00' },
+            ];
+
+            // Dummy employee data for dropdowns
+            const dummyEmployees = [
+                { employee_id: '101', nama_employee: 'Andi Pratama' },
+                { employee_id: '102', nama_employee: 'Budi Santoso' },
+                { employee_id: '103', nama_employee: 'Citra Lestari' },
+                { employee_id: '104', nama_employee: 'Dewi Anggraini' },
+                { employee_id: '105', nama_employee: 'Eko Wahyudi' },
+                { employee_id: '106', nama_employee: 'Fitriani' },
+            ];
+            setEmployeeOptions(dummyEmployees);
+            // =================== END: DUMMY DATA FOR VISUAL PREVIEW ===================
+
+
+            const grouped = mockSchedules.reduce((acc, schedule) => {
+                const shiftName = schedule.shift_name.toUpperCase().trim();
+                if (!acc[shiftName]) {
+                    acc[shiftName] = { users: [], lastUpdate: { user: 'N/A', timestamp: '1970-01-01T00:00:00Z' } };
                 }
+                acc[shiftName].users.push(schedule);
+
+                // Find the latest update timestamp for the shift
+                const currentUpdate = new Date(schedule.updated_at || schedule.created_at);
+                const lastUpdate = new Date(acc[shiftName].lastUpdate.timestamp);
+                if (currentUpdate > lastUpdate) {
+                    acc[shiftName].lastUpdate = {
+                        user: schedule.updated_by || 'N/A',
+                        timestamp: currentUpdate.toISOString()
+                    };
+                }
+                return acc;
+            }, {});
+
+            const finalGrouped = {
+                'PAGI': grouped['PAGI'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
+                'SIANG': grouped['SIANG'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
+                'MALAM': grouped['MALAM'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
             };
+
+            setGroupedSchedules(finalGrouped);
+
+        } catch (error) {
+            console.error('Error processing dummy data:', error);
+            NotifAlert({ // Changed to NotifAlert for consistency
+                icon: 'error', // Changed to error icon
+                title: 'Gagal Memuat Data', // Changed title
+                message: 'Terjadi kesalahan saat memuat data jadwal shift.', // Changed message
+            });
+        } finally {
+            // Add a small delay to simulate network loading
+            setTimeout(() => setLoading(false), 500);
         }
     };
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode === 'list') {
+            fetchData();
-                setFormDataFilter(defaultFilter);
-                doFilter();
-            }
         } else {
             navigate('/signin');
         }
-    }, [props.actionMode]);
+    }, [searchValue, props.actionMode]); // Refetch when searchValue changes or after modal closes
 
-    const doFilter = () => {
+    const handleSearch = (value) => {
-        setTrigerFilter((prev) => !prev);
+        setSearchValue(value);
-    };
-
-    const handleSearch = () => {
-        setFormDataFilter({ criteria: searchValue });
-        setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ criteria: '' });
-        setTrigerFilter((prev) => !prev);
-    };
-
-    const showPreviewModal = (param) => {
-        props.setSelectedData(param);
-        props.setActionMode('preview');
-    };
-
-    const showEditModal = (param = null) => {
-        props.setSelectedData(param);
-        props.setActionMode('edit');
     };
 
     const showAddModal = (param = null) => {
@@ -155,123 +148,361 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
         props.setActionMode('add');
     };
 
-    const showDeleteDialog = (param) => {
+    const handleAction = (mode, record) => {
-        const dateStr = param.schedule_date ? new Date(param.schedule_date).toLocaleDateString('id-ID') : 'tanggal tidak diketahui';
+        props.setSelectedData(record);
+        props.setActionMode(mode);
+    };
+
+    const showDeleteDialog = (user) => {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi Hapus',
-            message: `Jadwal shift tanggal ${dateStr} akan dihapus?`,
+            message: `Hapus jadwal untuk karyawan "${user.nama_employee}"?`,
-            onConfirm: () => handleDelete(param.schedule_id),
+            onConfirm: () => handleDelete(user.schedule_id),
-            onCancel: () => props.setSelectedData(null),
         });
     };
 
-    const handleDelete = async (id) => {
+    const handleDelete = async (schedule_id) => {
         try {
-            const response = await deleteJadwalShift(id);
+            await deleteJadwalShift(schedule_id);
-            if (response.statusCode === 200) {
+            NotifOk({ icon: 'success', title: 'Berhasil', message: 'Jadwal berhasil dihapus.' });
-                NotifAlert({
+            fetchData(); // Refresh data
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: 'Data Jadwal Shift berhasil dihapus.',
-                });
-                doFilter();
-            } else {
-                NotifAlert({
-                    icon: 'error',
-                    title: 'Error',
-                    message: response.message || 'Gagal menghapus data jadwal shift.',
-                });
-            }
         } catch (error) {
-            console.error('Error deleting jadwal shift:', error);
+            console.error("Failed to delete schedule:", error);
-            NotifAlert({
+            NotifAlert({ icon: "error", title: "Gagal", message: "Gagal menghapus jadwal." });
-                icon: 'error',
-                title: 'Error',
-                message: 'Terjadi kesalahan saat menghapus data.',
-            });
         }
     };
 
+    const handleShiftEditMode = (shiftName) => {
+        setEditingShift(shiftName);
+        setPendingChanges({}); // Clear pending changes
+        setSelectedSchedules([]); // Clear selections when entering a new edit mode
+    };
+
+    const cancelShiftEditMode = () => {
+        setEditingShift(null);
+        setPendingChanges({});
+        setSelectedSchedules([]);
+    };
+
+    const handleSelectSchedule = (scheduleId, isChecked) => {
+        if (isChecked) {
+            setSelectedSchedules(prev => [...prev, scheduleId]);
+        } else {
+            setSelectedSchedules(prev => prev.filter(id => id !== scheduleId));
+        }
+    };
+
+    const handleBulkUpdateChange = (scheduleId, field, value) => {
+        setPendingChanges(prev => ({
+            ...prev,
+            [scheduleId]: {
+                ...prev[scheduleId],
+                [field]: value,
+            }
+        }));
+    };
+
+    const handleBulkSave = async () => {
+        if (Object.keys(pendingChanges).length === 0) {
+            NotifAlert({ icon: 'info', title: 'Tidak Ada Perubahan', message: 'Tidak ada perubahan untuk disimpan.' });
+            cancelShiftEditMode();
+            return;
+        }
+
+        const updatePromises = Object.keys(pendingChanges).map(scheduleId => {
+            const originalSchedule = groupedSchedules[editingShift].users.find(u => u.schedule_id.toString() === scheduleId);
+            const updatedData = { ...originalSchedule, ...pendingChanges[scheduleId] };
+            // return updateJadwalShift(scheduleId, updatedData); // UNCOMMENT FOR REAL API
+            console.log(`Simulating update for schedule ${scheduleId}:`, updatedData); // DUMMY LOG
+            return Promise.resolve(); // DUMMY PROMISE
+        });
+
+        try {
+            await Promise.all(updatePromises);
+            NotifOk({ icon: 'success', title: 'Berhasil', message: 'Semua perubahan berhasil disimpan.' });
+            fetchData();
+            cancelShiftEditMode();
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal menyimpan beberapa perubahan.' });
+        }
+    };
+
+    const handleBulkDelete = () => {
+        if (selectedSchedules.length === 0) {
+            NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Pilih setidaknya satu jadwal untuk dihapus.' });
+            return;
+        }
+        NotifConfirmDialog({
+            icon: 'question',
+            title: `Konfirmasi Hapus`,
+            message: `Anda yakin ingin menghapus ${selectedSchedules.length} jadwal yang dipilih?`,
+            onConfirm: async () => {
+                await Promise.all(selectedSchedules.map(id => deleteJadwalShift(id)));
+                NotifOk({ icon: 'success', title: 'Berhasil', message: `${selectedSchedules.length} jadwal berhasil dihapus.` });
+                fetchData();
+                // Exit both edit modes
+                setIsEditMode(false);
+                setEditingShift(null);
+                setSelectedSchedules([]);
+            },
+        });
+    };
+
     return (
         <React.Fragment>
             <Card>
+                <Title level={3}>Jadwal Shift</Title>
+                <Divider />
+
                 <Row>
                     <Col xs={24}>
                         <Row justify="space-between" align="middle" gutter={[8, 8]}>
-                            <Col xs={24} sm={24} md={12} lg={12}>
+                            {isEditMode ? (
-                                <Input.Search
+                                <Col span={24}>
-                                    placeholder="Cari jadwal shift..."
+                                    <Row justify="space-between" align="middle">
-                                    value={searchValue}
+                                        <Text strong>Mode Edit Halaman</Text>
-                                    onChange={(e) => {
+                                        <Space wrap align="center">
-                                        const value = e.target.value;
+                                            <Button onClick={() => { setIsEditMode(false); setPendingChanges({}); setSelectedSchedules([]); }}>
-                                        setSearchValue(value);
+                                                Batal
-                                        if (value === '') {
+                                            </Button>
-                                            handleSearchClear();
+                                            <Button
-                                        }
+                                                type="primary"
-                                    }}
+                                                danger
-                                    onSearch={handleSearch}
+                                                onClick={handleBulkDelete}
-                                    allowClear={{
+                                                disabled={selectedSchedules.length === 0}
-                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                                            >
-                                    }}
+                                                Hapus yang Dipilih ({selectedSchedules.length})
-                                    enterButton={
+                                            </Button>
-                                        <Button
+                                            <Button
-                                            type="primary"
+                                                type="primary"
-                                            icon={<SearchOutlined />}
+                                                onClick={handleBulkSave}
-                                            style={{
+                                                style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
-                                                backgroundColor: '#23A55A',
+                                            >
-                                                borderColor: '#23A55A',
+                                                Simpan Semua Perubahan
+                                            </Button>
+                                        </Space>
+                                    </Row>
+                                </Col>
+                            ) : (
+                                <>
+                                    <Col>
+                                        <ConfigProvider
+                                            theme={{
+                                                components: {
+                                                    Button: {
+                                                        defaultBg: '#23a55a',
+                                                        defaultColor: '#FFFFFF',
+                                                        defaultBorderColor: '#23a55a',
+                                                    },
+                                                },
                                             }}
                                         >
-                                            Search
+                                            <Button
-                                        </Button>
+                                                icon={<EditOutlined />}
-                                    }
+                                                size="large"
-                                    size="large"
+                                                onClick={() => { setIsEditMode(true); setEditingShift(null); setPendingChanges({}); setSelectedSchedules([]); }}
-                                />
+                                            >
-                            </Col>
+                                                Edit Halaman
-                            <Col>
+                                            </Button>
-                                <Space wrap size="small">
+                                        </ConfigProvider>
-                                    <ConfigProvider
+                                    </Col>
-                                        theme={{
+                                    <Col xs={24} sm={24} md={12} lg={12}>
-                                            components: {
+                                        <Input.Search
-                                                Button: {
+                                            placeholder="Cari berdasarkan nama..."
-                                                    defaultBg: 'white',
+                                            value={searchValue}
-                                                    defaultColor: '#23A55A',
+                                            onChange={(e) => {
-                                                    defaultBorderColor: '#23A55A',
+                                                const value = e.target.value;
-                                                },
+                                                setSearchValue(value);
-                                            },
+                                                if (value === '') {
-                                        }}
+                                                    handleSearchClear();
-                                    >
+                                                }
-                                        <Button
+                                            }}
-                                            icon={<PlusOutlined />}
+                                            onSearch={handleSearch}
-                                            onClick={() => showAddModal()}
+                                            allowClear
+                                            enterButton={
+                                                <Button
+                                                    type="primary"
+                                                    icon={<SearchOutlined />}
+                                                    style={{
+                                                        backgroundColor: '#23A55A',
+                                                        borderColor: '#23A55A',
+                                                    }}
+                                                />
+                                            }
                                             size="large"
-                                        >
+                                        />
-                                            Tambah Data
+                                    </Col>
-                                        </Button>
+                                </>
-                                    </ConfigProvider>
+                            )}
-                                </Space>
-                            </Col>
                         </Row>
                     </Col>
-                    <Col xs={24} style={{ marginTop: '16px' }}>
-                        <TableList
-                            mobile
-                            cardColor={'#42AAFF'}
-                            header={'schedule_date'}
-                            showPreviewModal={showPreviewModal}
-                            showEditModal={showEditModal}
-                            showDeleteDialog={showDeleteDialog}
-                            getData={getData}
-                            queryParams={formDataFilter}
-                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
-                            triger={trigerFilter}
-                        />
-                    </Col>
                 </Row>
+
+                <Spin spinning={loading} tip="Memuat data...">
+                    <div style={{ marginTop: '24px' }}>
+                        {(Object.keys(groupedSchedules).length === 0 && !loading) ? (
+                             <Text>Tidak ada data jadwal untuk ditampilkan.</Text>
+                        ) : (
+                            Object.keys(groupedSchedules).map(shiftName => ( // Iterate through each shift (PAGI, SIANG, MALAM)
+                                <div key={shiftName} style={{ marginBottom: '32px' }}> {/* Container for each shift section */}
+                                    <Row justify="space-between" align="middle" style={{ paddingBottom: '12px', borderBottom: '1px solid #f0f0f0', marginBottom: '16px' }}>
+                                        <Col>
+                                            <Title level={5} style={{ margin: 0 }}>
+                                                SHIFT {shiftName} ({groupedSchedules[shiftName].users.length} Karyawan)
+                                            </Title>
+                                        </Col>
+                                        {editingShift === shiftName ? (
+                                            <Col>
+                                                <Space wrap>
+                                                    <Button onClick={cancelShiftEditMode}>Batal</Button>
+                                                    <Button
+                                                        type="primary"
+                                                        danger
+                                                        onClick={handleBulkDelete}
+                                                        disabled={selectedSchedules.length === 0}
+                                                    >
+                                                        Hapus Dipilih ({selectedSchedules.length})
+                                                    </Button>
+                                                    <Button
+                                                        type="primary"
+                                                        onClick={handleBulkSave}
+                                                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
+                                                    >
+                                                        Simpan Perubahan
+                                                    </Button>
+                                                </Space>
+                                            </Col>
+                                        ) : (
+                                            <Col>
+                                                <Space wrap>
+                                                    <Button
+                                                        type="primary"
+                                                        icon={<PlusOutlined />}
+                                                        onClick={() => showAddModal({ shift_name: shiftName })}
+                                                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
+                                                        disabled={editingShift !== null || isEditMode}
+                                                    >
+                                                        Tambah User
+                                                    </Button>
+                                                    <ConfigProvider
+                                                        theme={{
+                                                            components: {
+                                                                Button: {
+                                                                    defaultBg: 'white',
+                                                                    defaultColor: '#23A55A',
+                                                                    defaultBorderColor: '#23A55A',
+                                                                    defaultHoverColor: '#23A55A',
+                                                                    defaultHoverBorderColor: '#23A55A',
+                                                                },
+                                                            },
+                                                        }}
+                                                    >
+                                                        <Button
+                                                            icon={<EditOutlined />}
+                                                            onClick={() => handleShiftEditMode(shiftName)}
+                                                            disabled={editingShift !== null || isEditMode}
+                                                        >
+                                                            Edit
+                                                        </Button>
+                                                    </ConfigProvider>
+                                                </Space>
+                                            </Col>
+                                        )}
+                                    </Row>
+
+                                    {/* Horizontal scrollable container for employee cards */}
+                                    <div style={{ display: 'flex', overflowX: 'auto', gap: '16px', paddingBottom: '10px' }}>
+                                        {groupedSchedules[shiftName].users.length > 0 ? (
+                                            groupedSchedules[shiftName].users.map(user => (
+                                                <Card
+                                                    key={user.nik}
+                                                    hoverable
+                                                    style={{
+                                                        width: 320, height: 240, flexShrink: 0, textAlign: 'left', border: '1px solid #42AAFF',
+                                                        opacity: (editingShift !== null && editingShift !== shiftName) ? 0.5 : 1, // Dim inactive shifts
+                                                        pointerEvents: (editingShift !== null && editingShift !== shiftName) ? 'none' : 'auto' // Disable interaction on inactive shifts
+                                                    }}
+                                                    bodyStyle={{ padding: '16px', height: '100%' }}
+                                                >
+                                                    {isEditMode && editingShift === null && ( // Checkbox for global delete mode only
+                                                        <Checkbox
+                                                            style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}
+                                                            checked={selectedSchedules.includes(user.schedule_id)}
+                                                            onChange={(e) => handleSelectSchedule(user.schedule_id, e.target.checked)}
+                                                            onClick={(e) => e.stopPropagation()} // Prevent card click
+                                                        />
+                                                    )}
+                                                    {editingShift === shiftName || (isEditMode && editingShift === null) ? ( // Global or Shift-specific Edit Mode
+                                                        // EDIT MODE VIEW
+                                                        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                                                            <Space direction="vertical" style={{ width: '100%', marginTop: '24px' }}>
+                                                                <Select
+                                                                    showSearch
+                                                                    style={{ width: '100%' }}
+                                                                    placeholder="Pilih Karyawan"
+                                                                    optionFilterProp="children"
+                                                                    defaultValue={user.employee_id}
+                                                                    onChange={(value) => handleBulkUpdateChange(user.schedule_id, 'employee_id', value)}
+                                                                >
+                                                                    {employeeOptions.map(emp => (
+                                                                        <Select.Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Select.Option>
+                                                                    ))}
+                                                                </Select>
+                                                                <Select
+                                                                    style={{ width: '100%' }}
+                                                                    defaultValue={user.shift_name}
+                                                                    onChange={(value) => handleBulkUpdateChange(user.schedule_id, 'shift_name', value)}
+                                                                >
+                                                                    <Select.Option value="PAGI">PAGI</Select.Option>
+                                                                    <Select.Option value="SIANG">SIANG</Select.Option>
+                                                                    <Select.Option value="MALAM">MALAM</Select.Option>
+                                                                </Select>
+                                                            </Space>
+                                                            <Checkbox
+                                                                style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}
+                                                                checked={selectedSchedules.includes(user.schedule_id)}
+                                                                onChange={(e) => handleSelectSchedule(user.schedule_id, e.target.checked)}
+                                                            />
+                                                        </div>
+                                                    ) : (
+                                                        // NORMAL VIEW
+                                                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
+                                                            <div>
+                                                                <Text strong ellipsis style={{
+                                                                    fontSize: '22px', display: 'inline-block', backgroundColor: '#42AAFF',
+                                                                    color: '#FFFFFF', padding: '4px 8px', borderRadius: '4px', marginBottom: '8px'
+                                                                }}>{user.nama_employee}</Text>
+                                                                <Text style={{ fontSize: '18px', display: 'block' }}>{user.whatsapp}</Text>
+                                                            </div>
+                                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+                                                                <Text style={{ fontSize: '12px', display: 'block', lineHeight: '1.4' }}>
+                                                                    <Text strong>Terakhir diperbarui</Text> <br />
+                                                                    {formatRelativeTimestamp(groupedSchedules[shiftName].lastUpdate.timestamp)} <br />
+                                                                    oleh {groupedSchedules[shiftName].lastUpdate.user}
+                                                                </Text>
+                                                                <Space>
+                                                                    <Button type="text" size="small" icon={<EyeOutlined />} onClick={() => handleAction('preview', user)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
+                                                                    <Button type="text" size="small" icon={<EditOutlined />} onClick={() => handleAction('edit', user)} style={{ color: '#faad14', borderColor: '#faad14' }} />
+                                                                    <Button danger type="text" size="small" icon={<DeleteOutlined />} onClick={() => showDeleteDialog(user)} style={{ borderColor: '#ff4d4f' }} />
+                                                                </Space>
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                </Card>
+                                            ))
+                                        ) : (
+                                            <Text type="secondary" style={{ marginLeft: '16px' }}>Tidak ada karyawan yang dijadwalkan untuk shift ini.</Text>
+                                        )}
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </Spin>
             </Card>
         </React.Fragment>
     );
 });
 
-export default ListJadwalShift;
+export default ListJadwalShift;

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

@@ -75,13 +75,13 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         width: '20%',
     },
     {
-        title: 'model',
+        title: 'Model',
         dataIndex: 'model',
         key: 'model',
         width: '15%',
     },
     {
-        title: 'status',
+        title: 'Status',
         dataIndex: 'status',
         key: 'status',
         width: '10%',

src/pages/master/device/component/DetailDevice.jsx

@@ -14,6 +14,7 @@ const DetailDevice = (props) => {
         device_id: '',
         device_code: '',
         device_name: '',
+        brand_device: '',
         is_active: true,
         device_location: '',
         device_description: '',
@@ -228,6 +229,7 @@ const DetailDevice = (props) => {
                             }}
                         />
                     </div>
+
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
@@ -239,6 +241,23 @@ const DetailDevice = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Brand Device</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="brand_device"
+                            value={formData.brand_device}
+                            onChange={handleInputChange}
+                            placeholder="Enter Brand Device"
+                            readOnly={props.readOnly}
+                            disabled
+                            style={{
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'not-allowed',
+                                color: formData.brand_device ? '#000000' : '#bfbfbf',
+                            }}
+                        />
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Location</Text>
                         <Input

src/pages/master/device/component/ListDevice.jsx

@@ -34,6 +34,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'device_name',
         width: '20%',
     },
+    {
+        title: 'Brand Device',
+        dataIndex: 'brand_device',
+        key: 'brand_device',
+        width: '20%',
+    },
     {
         title: 'Location',
         dataIndex: 'device_location',

src/pages/master/shift/component/DetailShift.jsx

@@ -1,11 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, TimePicker, Space } from 'antd';
+import {
+    Modal,
+    Input,
+    Typography,
+    Switch,
+    Button,
+    ConfigProvider,
+    Divider,
+    TimePicker,
+    Space,
+} from 'antd';
 import { NotifOk } from '../../../../components/Global/ToastNotif';
+import { createShift, updateShift } from '../../../../api/master-shift';
+import { validateRun } from '../../../../Utils/validate';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 
-// Mock API calls for demonstration
+dayjs.extend(utc);
-const createShift = async (payload) => ({ statusCode: 201, data: { ...payload, shift_id: Date.now() } });
-const updateShift = async (id, payload) => ({ statusCode: 200, data: { ...payload, shift_id: id } });
 
 const { Text } = Typography;
 const timeFormat = 'HH:mm';
@@ -16,13 +27,21 @@ const DetailShift = (props) => {
     const defaultData = {
         shift_id: '',
         shift_name: '',
-        start_time: '08:00',
+        start_time: '',
-        end_time: '16:00',
+        end_time: '',
         is_active: true,
     };
 
     const [formData, setFormData] = useState(defaultData);
 
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -31,125 +50,264 @@ const DetailShift = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        if (!formData.shift_name) {
+        // Daftar aturan validasi
-            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Nama Shift wajib diisi.' });
+        const validationRules = [
+            { field: 'shift_name', label: 'Shift Name', required: true },
+            { field: 'start_time', label: 'Start Time', required: true },
+            { field: 'end_time', label: 'End Time', required: true },
+        ];
+
+        if (
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: errorMessages,
+                });
+                setConfirmLoading(false);
+            })
+        )
+            return;
+
+        // Validasi format waktu
+        if (!formData.start_time || !formData.end_time) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Waktu Mulai dan Waktu Selesai wajib diisi.',
+            });
             setConfirmLoading(false);
             return;
         }
 
         try {
+            // Pastikan format waktu HH:mm sesuai validasi BE (regex: /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/)
+            const formatTimeForAPI = (timeValue) => {
+                if (!timeValue) return '';
+
+                // Jika sudah dalam format HH:mm, return langsung
+                if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
+                    return timeValue;
+                }
+
+                // Parse dengan dayjs dan format ke HH:mm (string murni, bukan Date object)
+                const time = dayjs(timeValue, 'HH:mm', true); // strict mode
+                if (time.isValid()) {
+                    return time.format('HH:mm'); // Return string "08:00" bukan Date object
+                }
+
+                // Fallback: coba parse sebagai ISO date dan ambil jam/menitnya (gunakan UTC)
+                const isoTime = dayjs.utc(timeValue);
+                if (isoTime.isValid()) {
+                    return isoTime.format('HH:mm');
+                }
+
+                return '';
+            };
+
             const payload = {
                 shift_name: formData.shift_name,
-                start_time: formData.start_time,
+                start_time: formatTimeForAPI(formData.start_time),
-                end_time: formData.end_time,
+                end_time: formatTimeForAPI(formData.end_time),
                 is_active: formData.is_active,
             };
 
+            console.log('Payload yang dikirim:', payload);
+            console.log('Type start_time:', typeof payload.start_time, payload.start_time);
+            console.log('Type end_time:', typeof payload.end_time, payload.end_time);
+
             const response =
                 props.actionMode === 'edit'
                     ? await updateShift(formData.shift_id, payload)
                     : await createShift(payload);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-                NotifOk({ icon: 'success', title: 'Berhasil', message: `Data Shift berhasil disimpan.` });
+                const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
+
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Shift berhasil ${action}.`,
+                });
+
                 props.setActionMode('list');
             } else {
-                NotifOk({ icon: 'error', title: 'Gagal', message: response?.message || 'Gagal menyimpan data.' });
+                NotifOk({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
             }
         } catch (error) {
-            NotifOk({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
+            NotifOk({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server.',
+            });
         } finally {
             setConfirmLoading(false);
         }
     };
 
-    const handleInputChange = (e) => {
+    const handleTimeChange = (time, _, field) => {
-        const { name, value } = e.target;
+        // Pastikan format HH:mm yang konsisten sesuai validasi BE
-        setFormData({ ...formData, [name]: value });
+        const formattedTime = time && time.isValid() ? time.format('HH:mm') : '';
+        setFormData({
+            ...formData,
+            [field]: formattedTime,
+        });
     };
 
-    const handleTimeChange = (time, timeString, field) => {
+    const handleStatusToggle = (checked) => {
-        setFormData({ ...formData, [field]: timeString });
+        setFormData({
+            ...formData,
+            is_active: checked,
+        });
     };
 
     useEffect(() => {
         if (props.selectedData) {
-            setFormData(props.selectedData);
+            // Konversi waktu dari berbagai format ke HH:mm menggunakan dayjs
+            const convertTimeToString = (timeValue) => {
+                if (!timeValue) return '';
+
+                // Jika sudah dalam format HH:mm, return langsung
+                if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
+                    return timeValue;
+                }
+
+                // Jika dalam format ISO (1970-01-01T08:00:00.000Z), extract jam:menit dalam UTC
+                const time = dayjs.utc(timeValue);
+                if (time.isValid()) {
+                    return time.format('HH:mm');
+                }
+
+                return '';
+            };
+
+            setFormData({
+                ...props.selectedData,
+                start_time: convertTimeToString(props.selectedData.start_time),
+                end_time: convertTimeToString(props.selectedData.end_time),
+            });
         } else {
             setFormData(defaultData);
         }
-    }, [props.showModal, props.selectedData]);
+    }, [props.showModal, props.selectedData, props.actionMode]);
-
-    const modalTitle = `${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`;
 
     return (
         <Modal
-            title={modalTitle}
+            title={`${
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Shift`}
             open={props.showModal}
             onCancel={handleCancel}
             footer={[
-                <ConfigProvider key="footer-buttons" theme={{ components: { Button: { defaultColor: '#23A55A', defaultBorderColor: '#23A55A' } } }}>
+                <React.Fragment key="modal-footer">
-                    <Button key="back" onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
+                    <ConfigProvider
-                    {!props.readOnly && (
+                        theme={{
-                        <Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23a55a' }}>
+                            components: {
-                            Simpan
+                                Button: {
-                        </Button>
+                                    defaultBg: 'white',
-                    )}
+                                    defaultColor: '#23A55A',
-                </ConfigProvider>,
+                                    defaultBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
+                    </ConfigProvider>
+                    <ConfigProvider
+                        theme={{
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        {!props.readOnly && (
+                            <Button loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        )}
+                    </ConfigProvider>
+                </React.Fragment>,
             ]}
         >
-            <div>
+            {formData && (
                 <div>
-                    <Text strong>Status</Text>
+                    <div>
-                    <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
+                        <div>
-                        <Switch
+                            <Text strong>Status</Text>
-                            disabled={props.readOnly}
+                        </div>
-                            style={{ backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf' }}
+                        <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
-                            checked={formData.is_active}
+                            <div style={{ marginRight: '8px' }}>
-                            onChange={(checked) => setFormData({ ...formData, is_active: checked })}
+                                <Switch
+                                    disabled={props.readOnly}
+                                    style={{
+                                        backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
+                                    }}
+                                    checked={formData.is_active}
+                                    onChange={handleStatusToggle}
+                                />
+                            </div>
+                            <div>
+                                <Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
+                            </div>
+                        </div>
+                    </div>
+                    <Divider style={{ margin: '12px 0' }} />
+
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Shift Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="shift_name"
+                            value={formData.shift_name}
+                            onChange={handleInputChange}
+                            placeholder="Contoh: Pagi, Sore, Malam"
+                            readOnly={props.readOnly}
                         />
-                        <Text style={{ marginLeft: '8px' }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
+                    </div>
+
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Shift Time</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Space.Compact block style={{ marginTop: '4px' }}>
+                            <TimePicker
+                                format={timeFormat}
+                                onChange={(time, timeString) =>
+                                    handleTimeChange(time, timeString, 'start_time')
+                                }
+                                style={{ width: '50%' }}
+                                placeholder="Start Time "
+                                disabled={props.readOnly}
+                            />
+                            <TimePicker
+                                value={
+                                    formData.end_time ? dayjs(formData.end_time, timeFormat) : null
+                                }
+                                format={timeFormat}
+                                onChange={(time, timeString) =>
+                                    handleTimeChange(time, timeString, 'end_time')
+                                }
+                                style={{ width: '50%' }}
+                                placeholder="End Time "
+                                disabled={props.readOnly}
+                            />
+                        </Space.Compact>
                     </div>
                 </div>
-                <Divider style={{ margin: '12px 0' }} />
+            )}
-
-                <div style={{ marginBottom: 12 }}>
-                    <Text strong>Nama Shift</Text>
-                    <Text style={{ color: 'red' }}> *</Text>
-                    <Input
-                        name="shift_name"
-                        value={formData.shift_name}
-                        onChange={handleInputChange}
-                        placeholder="Contoh: Pagi, Sore, Malam"
-                        readOnly={props.readOnly}
-                    />
-                </div>
-
-                <div style={{ marginBottom: 12 }}>
-                    <Text strong>Waktu Shift</Text>
-                    <Text style={{ color: 'red' }}> *</Text>
-                    <Space.Compact block style={{ marginTop: '4px' }}>
-                        <TimePicker
-                            value={dayjs(formData.start_time, timeFormat)}
-                            format={timeFormat}
-                            onChange={(time, timeString) => handleTimeChange(time, timeString, 'start_time')}
-                            style={{ width: '50%' }}
-                            placeholder="Waktu Mulai"
-                            disabled={props.readOnly}
-                        />
-                        <TimePicker
-                            value={dayjs(formData.end_time, timeFormat)}
-                            format={timeFormat}
-                            onChange={(time, timeString) => handleTimeChange(time, time-string, 'end_time')}
-                            style={{ width: '50%' }}
-                            placeholder="Waktu Selesai"
-                            disabled={props.readOnly}
-                        />
-                    </Space.Compact>
-                </div>
-            </div>
         </Modal>
     );
 };
 
-export default DetailShift;
+export default DetailShift;

src/pages/master/shift/component/ListShift.jsx

@@ -9,19 +9,23 @@ import {
 } from '@ant-design/icons';
 import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
+import { deleteShift, getAllShift } from '../../../../api/master-shift';
 import TableList from '../../../../components/Global/TableList';
-// import { getAllShift, deleteShift } from '../../../../api/master-shift'; // <-- API needs to be created
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 
-// Mock API calls for demonstration
+dayjs.extend(utc);
-const getAllShift = async () => ({
+
-    data: [
+// Helper function untuk convert ISO time ke HH:mm
-        { shift_id: 1, shift_name: 'Pagi', start_time: '08:00', end_time: '16:00', is_active: true },
+const formatTime = (timeValue) => {
-        { shift_id: 2, shift_name: 'Sore', start_time: '16:00', end_time: '00:00', is_active: true },
+    if (!timeValue) return '-';
-        { shift_id: 3, shift_name: 'Malam', start_time: '00:00', end_time: '08:00', is_active: false },
+    if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
-    ],
+        return timeValue;
-    statusCode: 200,
+    }
-});
+    // UTC untuk menghindari timezone conversion
-const deleteShift = async (id) => ({ statusCode: 200, message: 'Data berhasil dihapus' });
+    const time = dayjs.utc(timeValue);
+    return time.isValid() ? time.format('HH:mm') : '-';
+};
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
@@ -29,7 +33,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'shift_name',
         key: 'shift_name',
         width: '30%',
-        render: (text, record, index) => `${index + 1}. ${text}`,
     },
     {
         title: 'Start Time',
@@ -37,6 +40,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'start_time',
         width: '15%',
         align: 'center',
+        render: (time) => formatTime(time),
     },
     {
         title: 'End Time',
@@ -44,6 +48,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'end_time',
         width: '15%',
         align: 'center',
+        render: (time) => formatTime(time),
     },
     {
         title: 'Status',
@@ -51,15 +56,9 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'is_active',
         width: '15%',
         align: 'center',
-        render: (_, { is_active }) => {
+        render: (status) => (
-            const color = is_active ? 'green' : 'red';
+            <Tag color={status ? 'green' : 'red'}>{status ? 'Active' : 'Inactive'}</Tag>
-            const text = is_active ? 'Active' : 'Inactive';
+        ),
-            return (
-                <Tag color={color} key={'status'}>
-                    {text}
-                </Tag>
-            );
-        },
     },
     {
         title: 'Aksi',
@@ -68,9 +67,25 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         width: '25%',
         render: (_, record) => (
             <Space>
-                <Button ghost icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
+                <Button
-                <Button ghost icon={<EditOutlined />} onClick={() => showEditModal(record)} style={{ color: '#faad14', borderColor: '#faad14' }} />
+                    type="text"
-                <Button danger ghost icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} />
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
             </Space>
         ),
     },
@@ -78,25 +93,36 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 
 const ListShift = memo(function ListShift(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
-    const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
     const navigate = useNavigate();
 
     useEffect(() => {
-        if (props.actionMode === 'list') {
+        const token = localStorage.getItem('token');
-            doFilter();
+        if (token) {
+            if (props.actionMode === 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
         }
     }, [props.actionMode]);
 
-    const doFilter = () => setTrigerFilter((prev) => !prev);
+    const doFilter = () => {
-    const handleSearch = () => {
+        setTrigerFilter((prev) => !prev);
-        setFormDataFilter((prev) => ({ ...prev, criteria: searchValue }));
-        doFilter();
     };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter((prev) => ({ ...prev, criteria: '' }));
+        setFormDataFilter({ criteria: '' });
-        doFilter();
+        setTrigerFilter((prev) => !prev);
     };
 
     const showPreviewModal = (param) => {
@@ -116,96 +142,111 @@ const ListShift = memo(function ListShift(props) {
 
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
+            icon: 'question',
             title: 'Konfirmasi Hapus',
-            message: `Apakah Anda yakin ingin menghapus shift "${param.shift_name}"?`,
+            message: 'Shift "' + param.shift_name + '" akan dihapus?',
-            onConfirm: () => handleDelete(param),
+            onConfirm: () => handleDelete(param.shift_id),
+            onCancel: () => props.setSelectedData(null),
         });
     };
 
-    const handleDelete = async (param) => {
+    const handleDelete = async (shift_id) => {
-        try {
+        const response = await deleteShift(shift_id);
-            const response = await deleteShift(param.shift_id);
+        if (response.statusCode === 200) {
-            if (response.statusCode === 200) {
+            NotifAlert({
-                NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus.' });
+                icon: 'success',
-                doFilter();
+                title: 'Berhasil',
-            } else {
+                message: 'Data Shift berhasil dihapus.',
-                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message || 'Gagal menghapus data.' });
+            });
-            }
+            doFilter();
-        } catch (error) {
+        } else {
-            NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
+            NotifAlert({
+                icon: 'error',
+                title: 'Gagal',
+                message: response?.message || 'Gagal Menghapus Data Shift',
+            });
         }
     };
 
     return (
-        <Card>
+        <React.Fragment>
-            <Row justify="space-between" align="middle" gutter={[8, 8]}>
+            <Card>
-                <Col xs={24}>
+                <Row>
-                    <Row justify="space-between" align="middle" gutter={[8, 8]}>
+                    <Col xs={24}>
-                        <Col xs={24} sm={24} md={12} lg={12}>
+                        <Row justify="space-between" align="middle" gutter={[8, 8]}>
-                            <Input.Search
+                            <Col xs={24} sm={24} md={12} lg={12}>
-                                placeholder="Cari berdasarkan nama shift..."
+                                <Input.Search
-                                value={searchValue}
+                                    placeholder="Cari berdasarkan nama shift..."
-                                onChange={(e) => {
+                                    value={searchValue}
-                                    const value = e.target.value;
+                                    onChange={(e) => {
-                                    setSearchValue(value);
+                                        const value = e.target.value;
-                                    // Auto search when clearing by backspace/delete
+                                        setSearchValue(value);
-                                    if (value === '') {
+                                        if (value === '') {
-                                        handleSearchClear();
+                                            handleSearchClear();
-                                    }
+                                        }
-                                }}
-                                onSearch={handleSearch}
-                                allowClear
-                                onClear={handleSearchClear}
-                                enterButton={
-                                    <Button
-                                        type="primary"
-                                        icon={<SearchOutlined />}
-                                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
-                                    >
-                                        Search
-                                    </Button>
-                                }
-                                size="large"
-                            />
-                        </Col>
-                        <Col>
-                            <Space wrap size="small">
-                                <ConfigProvider
-                                    theme={{
-                                        token: { colorBgContainer: '#E9F6EF' },
-                                        components: {
-                                            Button: {
-                                                defaultBg: 'white',
-                                                defaultColor: '#23A55A',
-                                                defaultBorderColor: '#23A55A',
-                                                defaultHoverColor: '#23A55A',
-                                                defaultHoverBorderColor: '#23A55A',
-                                            },
-                                        },
                                     }}
-                                >
+                                    onSearch={handleSearch}
-                                    <Button icon={<PlusOutlined />} onClick={() => showAddModal()} size="large">
+                                    allowClear={{
-                                        Tambah Data
+                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
-                                    </Button>
+                                    }}
-                                </ConfigProvider>
+                                    enterButton={
-                            </Space>
+                                        <Button
-                        </Col>
+                                            type="primary"
-                    </Row>
+                                            icon={<SearchOutlined />}
-                </Col>
+                                            style={{
-                <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                                                backgroundColor: '#23A55A',
-                    <TableList
+                                                borderColor: '#23A55A',
-                        mobile
+                                            }}
-                        cardColor={'#42AAFF'}
+                                        >
-                        header={'shift_name'} // Menggunakan shift_name langsung untuk judul kartu
+                                            Search
-                        getData={getAllShift}
+                                        </Button>
-                        queryParams={formDataFilter}
+                                    }
-                        columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                                    size="large"
-                        triger={trigerFilter}
+                                />
-                    />
+                            </Col>
-                </Col>
+                            <Col>
-            </Row>
+                                <Space wrap size="small">
-        </Card>
+                                    <ConfigProvider
+                                        theme={{
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Data
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'shift_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllShift}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
     );
 });
 
-export default ListShift;
+export default ListShift;

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

@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch, Row, Col } from 'antd';
+import {
+    Modal,
+    Input,
+    Divider,
+    Typography,
+    Button,
+    InputNumber,
+    Switch,
+    Row,
+    Col,
+    ColorPicker,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { validateRun } from '../../../../Utils/validate';
 import { createStatus, updateStatus } from '../../../../api/master-status';
@@ -34,6 +45,10 @@ const DetailStatus = (props) => {
         setFormData({ ...formData, is_active: checked });
     };
 
+    const handleColorChange = (color, hex) => {
+        setFormData({ ...formData, status_color: hex });
+    };
+
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -123,7 +138,14 @@ const DetailStatus = (props) => {
             onCancel={handleCancel}
             footer={
                 !props.readOnly && (
-                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: '10px',
+                            paddingTop: '15px',
+                        }}
+                    >
                         <Button onClick={handleCancel}>Batal</Button>
                         <Button type="primary" loading={confirmLoading} onClick={handleSave}>
                             Simpan
@@ -141,7 +163,9 @@ const DetailStatus = (props) => {
                         checked={formData.is_active}
                         onChange={handleStatusToggle}
                     />
-                    <Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
+                    <Text style={{ marginLeft: 8 }}>
+                        {formData.is_active ? 'Active' : 'Inactive'}
+                    </Text>
                 </div>
             </div>
             <Row gutter={16}>
@@ -176,13 +200,35 @@ const DetailStatus = (props) => {
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Status Color</Text>
                 <Text style={{ color: 'red' }}> *</Text>
-                <Input
+                <div style={{ marginTop: '8px' }}>
-                    name="status_color"
+                    <ColorPicker
-                    value={formData.status_color}
+                        value={formData.status_color || '#000000'}
-                    placeholder="Masukan warna status (e.g., hijau, #00ff00)"
+                        onChange={handleColorChange}
-                    readOnly={props.readOnly}
+                        disabled={props.readOnly}
-                    onChange={handleInputChange}
+                        showText={(color) => `color hex: ${color.toHexString()}`}
-                />
+                        allowClear={false}
+                        format="hex"
+                        size="large"
+                        style={{ width: '100%' }}
+                        presets={[
+                            {
+                                label: 'Recommended',
+                                colors: [
+                                    '#EF4444', // Merah
+                                    '#3B82F6', // Biru
+                                    '#10B981', // Hijau
+                                    '#F59E0B', // Kuning
+                                    '#8B5CF6', // Ungu
+                                    '#EC4899', // Pink
+                                    '#F97316', // Orange
+                                    '#14B8A6', // Teal
+                                    '#6B7280', // Gray
+                                    '#000000', // Black
+                                ],
+                            },
+                        ]}
+                    />
+                </div>
             </div>
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Description</Text>
@@ -199,4 +245,4 @@ const DetailStatus = (props) => {
     );
 };
 
-export default DetailStatus;
+export default DetailStatus;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Select, Checkbox } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
 import { getAllDevice } from '../../../../api/master-device';
@@ -34,6 +34,7 @@ const DetailTag = (props) => {
         lim_high: '',
         lim_high_crash: '',
         device_id: null,
+        description: '',
 
         sub_section_id: null,
     };
@@ -147,10 +148,8 @@ const DetailTag = (props) => {
             payload.unit = formData.unit.trim();
         }
 
-        // Add device_id only if it's selected
+        // Add device_id - backend requires this field even if null
-        if (formData.device_id) {
+        payload.device_id = formData.device_id ? parseInt(formData.device_id) : null;
-            payload.device_id = parseInt(formData.device_id);
-        }
 
         // Add limit fields only if they have values
         if (formData.lim_low_crash !== '' && formData.lim_low_crash !== null) {
@@ -166,10 +165,8 @@ const DetailTag = (props) => {
             payload.lim_high_crash = parseFloat(formData.lim_high_crash);
         }
 
-        // Add sub_section_id only if it's selected
+        // Add sub_section_id - backend requires this field even if null
-        if (formData.sub_section_id) {
+        payload.sub_section_id = formData.sub_section_id ? parseInt(formData.sub_section_id) : null;
-            payload.sub_section_id = parseInt(formData.sub_section_id);
-        }
 
         try {
             const response =
@@ -234,24 +231,24 @@ const DetailTag = (props) => {
         });
     };
 
-    const handleAlarmToggle = (checked) => {
+    const handleAlarmToggle = (e) => {
         setformData({
             ...formData,
-            is_alarm: checked,
+            is_alarm: e.target.checked,
         });
     };
 
-    const handleReportToggle = (checked) => {
+    const handleReportToggle = (e) => {
         setformData({
             ...formData,
-            is_report: checked,
+            is_report: e.target.checked,
         });
     };
 
-    const handleHistoryToggle = (checked) => {
+    const handleHistoryToggle = (e) => {
         setformData({
             ...formData,
-            is_history: checked,
+            is_history: e.target.checked,
         });
     };
 
@@ -336,7 +333,7 @@ const DetailTag = (props) => {
             } Tag`}
             open={props.showModal}
             onCancel={handleCancel}
-            width={800}
+            width={1000}
             footer={[
                 <React.Fragment key="modal-footer">
                     <ConfigProvider
@@ -403,127 +400,66 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
-                    {/* Alarm, Report, dan History dalam satu baris */}
+                    {/* Tag Code dan Alarm, Report dan History */}
                     <div style={{ marginBottom: 12 }}>
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'space-between',
-                                gap: '16px',
+                                gap: '20px',
                             }}
                         >
-                            {/* Alarm Toggle */}
+                            {/* Tag Code - Auto Increment & Read Only */}
                             <div style={{ flex: 1 }}>
-                                <div>
+                                <Text strong>Tag Code</Text>
-                                    <Text strong>Alarm</Text>
+                                <Input
-                                    <Text style={{ color: 'red' }}> *</Text>
+                                    name="tag_code"
-                                </div>
+                                    value={formData.tag_code || ''}
-                                <div
+                                    placeholder={'Tag Code Auto Fill'}
+                                    disabled
                                     style={{
-                                        display: 'flex',
+                                        backgroundColor: '#f5f5f5',
-                                        alignItems: 'center',
+                                        cursor: 'not-allowed',
-                                        marginTop: '8px',
+                                        color: formData.tag_code ? '#000000' : '#bfbfbf',
                                     }}
-                                >
+                                />
-                                    <div style={{ marginRight: '8px' }}>
+                            </div>
-                                        <Switch
+                            {/* Alarm Checkbox */}
-                                            disabled={props.readOnly}
+                            <div style={{ flex: 1 }}>
-                                            style={{
+                                <Text strong>Alarm</Text>
-                                                backgroundColor:
+                                <div style={{ marginTop: '8px' }}>
-                                                    formData.is_alarm === true
+                                    <Checkbox
-                                                        ? '#23A55A'
+                                        disabled={props.readOnly}
-                                                        : '#bfbfbf',
+                                        checked={formData.is_alarm === true}
-                                            }}
+                                        onChange={handleAlarmToggle}
-                                            checked={formData.is_alarm === true}
+                                    />
-                                            onChange={handleAlarmToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_alarm === true ? 'Yes' : 'No'}</Text>
-                                    </div>
                                 </div>
                             </div>
-                            {/* Report Toggle */}
+                            {/* Report Checkbox */}
                             <div style={{ flex: 1 }}>
-                                <div>
+                                <Text strong>Report</Text>
-                                    <Text strong>Report</Text>
+                                <div style={{ marginTop: '8px' }}>
-                                    <Text style={{ color: 'red' }}> *</Text>
+                                    <Checkbox
-                                </div>
+                                        disabled={props.readOnly}
-                                <div
+                                        checked={formData.is_report === true}
-                                    style={{
+                                        onChange={handleReportToggle}
-                                        display: 'flex',
+                                    />
-                                        alignItems: 'center',
-                                        marginTop: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    formData.is_report === true
-                                                        ? '#23A55A'
-                                                        : '#bfbfbf',
-                                            }}
-                                            checked={formData.is_report === true}
-                                            onChange={handleReportToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_report === true ? 'Yes' : 'No'}</Text>
-                                    </div>
                                 </div>
                             </div>
-                            {/* History Toggle */}
+                            {/* History Checkbox */}
                             <div style={{ flex: 1 }}>
+                                <Text strong>History</Text>
                                 <div>
-                                    <Text strong>History</Text>
+                                    <Checkbox
-                                    <Text style={{ color: 'red' }}> *</Text>
+                                        disabled={props.readOnly}
-                                </div>
+                                        checked={formData.is_history === true}
-                                <div
+                                        onChange={handleHistoryToggle}
-                                    style={{
+                                    />
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        marginTop: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    formData.is_history === true
-                                                        ? '#23A55A'
-                                                        : '#bfbfbf',
-                                            }}
-                                            checked={formData.is_history === true}
-                                            onChange={handleHistoryToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_history === true ? 'Yes' : 'No'}</Text>
-                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <Divider style={{ margin: '12px 0' }} />
 
-                    {/* Tag Code - Auto Increment & Read Only */}
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Tag Code</Text>
-                        <Input
-                            name="tag_code"
-                            value={formData.tag_code || ''}
-                            placeholder={'Tag Code Auto Fill'}
-                            disabled
-                            style={{
-                                backgroundColor: '#f5f5f5',
-                                cursor: 'not-allowed',
-                                color: formData.tag_code ? '#000000' : '#bfbfbf',
-                            }}
-                        />
-                    </div>
                     {/* Tag Number dan Tag Name dalam satu baris */}
                     <div style={{ marginBottom: 12 }}>
                         <div
@@ -685,13 +621,13 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
-                    {/* Limit Low Crash dan Limit Low dalam satu baris */}
+                    {/* Semua Limit dalam satu baris */}
                     <div style={{ marginBottom: 12 }}>
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'space-between',
-                                gap: '16px',
+                                gap: '12px',
                             }}
                         >
                             {/* Limit Low Crash */}
@@ -720,17 +656,6 @@ const DetailTag = (props) => {
                                     step="any"
                                 />
                             </div>
-                        </div>
-                    </div>
-                    {/* Limit High dan Limit High Crash dalam satu baris */}
-                    <div style={{ marginBottom: 12 }}>
-                        <div
-                            style={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                gap: '16px',
-                            }}
-                        >
                             {/* Limit High */}
                             <div style={{ flex: 1 }}>
                                 <Text strong>Limit High</Text>
@@ -759,6 +684,18 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
+                    {/* Description */}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Description</Text>
+                        <Input.TextArea
+                            name="description"
+                            value={formData.description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Description (Optional)"
+                            readOnly={props.readOnly}
+                            rows={4}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>

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

@@ -44,12 +44,14 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'data_type',
         key: 'data_type',
         width: '10%',
+        render: (text) => text || '-',
     },
     {
         title: 'Unit',
         dataIndex: 'unit',
         key: 'unit',
         width: '8%',
+        render: (text) => text || '-',
     },
     {
         title: 'Sub Section',
@@ -63,6 +65,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'device_name',
         key: 'device_name',
         width: '12%',
+        render: (text) => text || '-',
     },
     {
         title: 'Status',

src/pages/master/unit/component/DetailUnit.jsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
 import { NotifOk } from '../../../../components/Global/ToastNotif';
 import { createUnit, updateUnit } from '../../../../api/master-unit';
+import { getAllTag } from '../../../../api/master-tag'; // Import API untuk Tag
 import { validateRun } from '../../../../Utils/validate';
 
 const { Text } = Typography;
 
 const DetailUnit = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [tagList, setTagList] = useState([]);
+    const [loadingTags, setLoadingTags] = useState(false);
 
     const defaultData = {
         unit_id: '',
@@ -15,10 +18,28 @@ const DetailUnit = (props) => {
         unit_name: '',
         unit_description: '',
         is_active: true,
+        tag_id: null, // Tambahkan tag_id
     };
 
     const [formData, setFormData] = useState(defaultData);
 
+    // Fungsi untuk mengambil data Tag
+    const loadTags = async () => {
+        setLoadingTags(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000, criteria: '' });
+            const response = await getAllTag(params);
+            if (response && response.data) {
+                const activeTags = response.data.filter((tag) => tag.is_active === true);
+                setTagList(activeTags);
+            }
+        } catch (error) {
+            console.error('Error loading tags:', error);
+        } finally {
+            setLoadingTags(false);
+        }
+    };
+
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -27,8 +48,10 @@ const DetailUnit = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Daftar aturan validasi
+        const validationRules = [
-        const validationRules = [{ field: 'unit_name', label: 'Unit Name', required: true }];
+            { field: 'unit_name', label: 'Unit Name', required: true },
+            { field: 'tag_id', label: 'Tag', required: true }, // Tambah validasi untuk tag_id
+        ];
 
         if (
             validateRun(formData, validationRules, (errorMessages) => {
@@ -39,14 +62,16 @@ const DetailUnit = (props) => {
                 });
                 setConfirmLoading(false);
             })
-        )
+        ) {
             return;
+        }
 
         try {
             const payload = {
-                is_active: formData.is_active,
                 unit_name: formData.unit_name,
                 unit_description: formData.unit_description,
+                is_active: formData.is_active,
+                tag_id: formData.tag_id, // Tambahkan tag_id ke payload
             };
 
             const response =
@@ -90,6 +115,13 @@ const DetailUnit = (props) => {
         });
     };
 
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
     const handleStatusToggle = (checked) => {
         setFormData({
             ...formData,
@@ -98,6 +130,10 @@ const DetailUnit = (props) => {
     };
 
     useEffect(() => {
+        if (props.showModal) {
+            loadTags(); // Panggil fungsi loadTags saat modal muncul
+        }
+
         if (props.selectedData) {
             setFormData(props.selectedData);
         } else {
@@ -116,6 +152,7 @@ const DetailUnit = (props) => {
             } Unit`}
             open={props.showModal}
             onCancel={handleCancel}
+            width={600}
             footer={[
                 <React.Fragment key="modal-footer">
                     <ConfigProvider
@@ -175,13 +212,12 @@ const DetailUnit = (props) => {
                     </div>
                     <Divider style={{ margin: '12px 0' }} />
 
-                    {/* Unit Code - Auto Increment & Read Only */}
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Unit Code</Text>
                         <Input
                             name="unit_code"
                             value={formData.unit_code || ''}
-                            placeholder={'Unit Code Auto Fill'}
+                            placeholder="Dibuat otomatis oleh sistem"
                             disabled
                             style={{
                                 backgroundColor: '#f5f5f5',
@@ -191,6 +227,33 @@ const DetailUnit = (props) => {
                         />
                     </div>
 
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Tag</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Pilih Tag"
+                            value={formData.tag_id || undefined}
+                            onChange={(value) => handleSelectChange('tag_id', value)}
+                            disabled={props.readOnly}
+                            loading={loadingTags}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {tagList.map((tag) => (
+                                <Select.Option key={tag.tag_id} value={tag.tag_id}>
+                                    {`${tag.tag_code || ''} - ${tag.tag_name || ''}`}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Unit Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
@@ -221,4 +284,4 @@ const DetailUnit = (props) => {
     );
 };
 
-export default DetailUnit;
+export default DetailUnit;

src/pages/report/report/IndexReport.jsx

@@ -0,0 +1,38 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+import ListReport from './component/ListReport';
+
+const { Text } = Typography;
+
+const IndexReport = memo(function IndexReport() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [selectedData, setSelectedData] = useState(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • Report
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    return (
+        <React.Fragment>
+            <ListReport selectedData={selectedData} setSelectedData={setSelectedData} />
+        </React.Fragment>
+    );
+});
+
+export default IndexReport;

src/pages/report/report/component/ListReport.jsx

@@ -0,0 +1,163 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'antd';
+import TableList from '../../../../components/Global/TableList';
+import dayjs from 'dayjs';
+import { FileTextOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const ListReport = memo(function ListReport(props) {
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Datetime',
+            dataIndex: 'datetime',
+            key: 'datetime',
+            width: '10%',
+        },
+        {
+            title: 'Tag Name',
+            dataIndex: 'tag_name',
+            key: 'tag_name',
+            width: '70%',
+        },
+        {
+            title: 'Value',
+            dataIndex: 'val',
+            key: 'val',
+            width: '10%',
+        },
+        {
+            title: 'Stat',
+            dataIndex: 'stat',
+            key: 'stat',
+            width: '10%',
+        },
+    ];
+
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+
+    const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
+    const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
+    const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
+    const [periode, setPeriode] = useState('10 Menit');
+
+    const getAllReport = async (params) => {
+        return {
+            data: [],
+        };
+    };
+
+    const handleReset = () => {
+        setPlantSubSection('Semua Plant');
+        setStartDate(dayjs('2025-09-30'));
+        setEndDate(dayjs('2025-10-09'));
+        setPeriode('10 Menit');
+    };
+
+    return (
+        <React.Fragment>
+            <Card>
+                <Row>
+                    <Col xs={24}>
+                        <Row gutter={16} style={{ marginTop: '16px' }}>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Plant Sub Section
+                                    </Text>
+                                    <Select
+                                        value={plantSubSection}
+                                        onChange={setPlantSubSection}
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                        options={[
+                                            { value: 'Semua Plant', label: 'Semua Plant' },
+                                            { value: 'Plant 1', label: 'Plant 1' },
+                                            { value: 'Plant 2', label: 'Plant 2' },
+                                        ]}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Tanggal Mulai
+                                    </Text>
+                                    <DatePicker
+                                        value={startDate}
+                                        onChange={setStartDate}
+                                        format="DD/MM/YYYY"
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Tanggal Akhir
+                                    </Text>
+                                    <DatePicker
+                                        value={endDate}
+                                        onChange={setEndDate}
+                                        format="DD/MM/YYYY"
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
+                                    <Select
+                                        value={periode}
+                                        onChange={setPeriode}
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                        options={[
+                                            { value: '5 Menit', label: '5 Menit' },
+                                            { value: '10 Menit', label: '10 Menit' },
+                                            { value: '30 Menit', label: '30 Menit' },
+                                            { value: '1 Jam', label: '1 Jam' },
+                                        ]}
+                                    />
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row gutter={8} style={{ marginTop: '16px' }}>
+                            <Col>
+                                <Button type="primary" danger icon={<FileTextOutlined />}>
+                                    Tampilkan
+                                </Button>
+                            </Col>
+                            <Col>
+                                <Button
+                                    onClick={handleReset}
+                                    style={{ backgroundColor: '#6c757d', color: 'white' }}
+                                >
+                                    Reset
+                                </Button>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            getData={getAllReport}
+                            queryParams={formDataFilter}
+                            columns={columns}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListReport;

src/pages/report/trending/IndexTrending.jsx

@@ -0,0 +1,38 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+import ReportTrending from './ReportTrending';
+
+const { Text } = Typography;
+
+const IndexTrending = memo(function IndexTrending() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [selectedData, setSelectedData] = useState(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • Trending
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    return (
+        <React.Fragment>
+            <ReportTrending/>
+        </React.Fragment>
+    );
+});
+
+export default IndexTrending;

src/pages/report/trending/ReportTrending.jsx

@@ -0,0 +1,222 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'antd';
+import dayjs from 'dayjs';
+import { FileTextOutlined } from '@ant-design/icons';
+import { ResponsiveLine } from '@nivo/line';
+import './trending.css';
+
+const { Text } = Typography;
+
+const tagTrendingData = [
+    {
+        id: 'TEMP_SENSOR_1',
+        color: '#FF6B4A',
+        data: [
+            { y: '08:00', x: 75 },
+            { y: '08:05', x: 76 },
+            { y: '08:10', x: 75 },
+            { y: '08:15', x: 77 },
+            { y: '08:20', x: 76 },
+            { y: '08:25', x: 78 },
+            { y: '08:30', x: 79 },
+        ],
+    },
+    {
+        id: 'GAS_LEAK_SENSOR_1',
+        color: '#4ECDC4',
+        data: [
+            { y: '08:00', x: 10 },
+            { y: '08:05', x: 150 },
+            { y: '08:10', x: 40 },
+            { y: '08:15', x: 20 },
+            { y: '08:20', x: 15 },
+            { y: '08:25', x: 18 },
+            { y: '08:30', x: 25 },
+        ],
+    },
+    {
+        id: 'PRESSURE_SENSOR_1',
+        color: '#FFE66D',
+        data: [
+            { y: '08:00', x: 1.2 },
+            { y: '08:05', x: 1.3 },
+            { y: '08:10', x: 1.2 },
+            { y: '08:15', x: 1.4 },
+            { y: '08:20', x: 1.5 },
+            { y: '08:25', x: 1.3 },
+            { y: '08:30', x: 1.2 },
+        ],
+    },
+];
+
+const ReportTrending = memo(function ReportTrending(props) {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+
+    const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
+    const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
+    const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
+    const [periode, setPeriode] = useState('10 Menit');
+
+    const getAllReport = async (params) => {
+        return {
+            data: [],
+        };
+    };
+
+    const handleReset = () => {
+        setPlantSubSection('Semua Plant');
+        setStartDate(dayjs('2025-09-30'));
+        setEndDate(dayjs('2025-10-09'));
+        setPeriode('10 Menit');
+    };
+
+    return (
+        <React.Fragment>
+            <Card>
+                <Row>
+                    <Col xs={24}>
+                        <Row gutter={16} style={{ marginTop: '16px' }}>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Plant Sub Section
+                                    </Text>
+                                    <Select
+                                        value={plantSubSection}
+                                        onChange={setPlantSubSection}
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                        options={[
+                                            { value: 'Semua Plant', label: 'Semua Plant' },
+                                            { value: 'Plant 1', label: 'Plant 1' },
+                                            { value: 'Plant 2', label: 'Plant 2' },
+                                        ]}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Tanggal Mulai
+                                    </Text>
+                                    <DatePicker
+                                        value={startDate}
+                                        onChange={setStartDate}
+                                        format="DD/MM/YYYY"
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>
+                                        Tanggal Akhir
+                                    </Text>
+                                    <DatePicker
+                                        value={endDate}
+                                        onChange={setEndDate}
+                                        format="DD/MM/YYYY"
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                    />
+                                </div>
+                            </Col>
+                            <Col xs={24} sm={12} md={6}>
+                                <div className="filter-item">
+                                    <Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
+                                    <Select
+                                        value={periode}
+                                        onChange={setPeriode}
+                                        style={{ width: '100%', marginTop: '4px' }}
+                                        options={[
+                                            { value: '5 Menit', label: '5 Menit' },
+                                            { value: '10 Menit', label: '10 Menit' },
+                                            { value: '30 Menit', label: '30 Menit' },
+                                            { value: '1 Jam', label: '1 Jam' },
+                                        ]}
+                                    />
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row gutter={8} style={{ marginTop: '16px' }}>
+                            <Col>
+                                <Button type="primary" danger icon={<FileTextOutlined />}>
+                                    Tampilkan
+                                </Button>
+                            </Col>
+                            <Col>
+                                <Button
+                                    onClick={handleReset}
+                                    style={{ backgroundColor: '#6c757d', color: 'white' }}
+                                >
+                                    Reset
+                                </Button>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <div style={{ height: '500px', marginTop: '16px' }}>
+                            <ResponsiveLine
+                                data={tagTrendingData}
+                                margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
+                                xScale={{
+                                    type: 'linear',
+                                    min: 'auto',
+                                    max: 'auto',
+                                    stacked: false,
+                                    reverse: false,
+                                }}
+                                yScale={{
+                                    type: 'point',
+                                }}
+                                curve="natural"
+                                axisBottom={{
+                                    tickSize: 5,
+                                    tickPadding: 5,
+                                    tickRotation: 0,
+                                    legend: 'Value',
+                                    legendOffset: 40,
+                                    legendPosition: 'middle',
+                                }}
+                                axisLeft={{
+                                    tickSize: 5,
+                                    tickPadding: 5,
+                                    tickRotation: 0,
+                                    legend: 'Time',
+                                    legendOffset: -45,
+                                    legendPosition: 'middle',
+                                }}
+                                colors={{ datum: 'color' }}
+                                pointSize={6}
+                                pointColor={{ theme: 'background' }}
+                                pointBorderWidth={2}
+                                pointBorderColor={{ from: 'serieColor' }}
+                                pointLabelYOffset={-12}
+                                useMesh={true}
+                                legends={[
+                                    {
+                                        anchor: 'bottom-right',
+                                        direction: 'column',
+                                        justify: false,
+                                        translateX: 100,
+                                        translateY: 0,
+                                        itemsSpacing: 2,
+                                        itemDirection: 'left-to-right',
+                                        itemWidth: 80,
+                                        itemHeight: 20,
+                                        itemOpacity: 0.75,
+                                        symbolSize: 12,
+                                        symbolShape: 'circle',
+                                    },
+                                ]}
+                            />
+                        </div>
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ReportTrending;

src/pages/role/IndexRole.jsx

@@ -1,144 +1,70 @@
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
-import { Form, Typography } from 'antd';
 import ListRole from './component/ListRole';
 import DetailRole from './component/DetailRole';
-import { createRole, updateRole } from '../../api/role';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
-import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
+import { Typography } from 'antd';
 
 const { Text } = Typography;
 
 const IndexRole = memo(function IndexRole() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
 
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
     const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+
+    const setMode = (param) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+            case 'edit':
+                setReadOnly(false);
+                break;
+            case 'preview':
+                setReadOnly(true);
+                break;
+            default:
+                setShowModal(false);
+                break;
+        }
+        setActionMode(param);
+    };
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
-                {
+                { title: <Text strong style={{ fontSize: '14px' }}>• Role</Text> },
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            • Role
-                        </Text>
-                    ),
-                },
             ]);
         } else {
             navigate('/signin');
         }
     }, [navigate, setBreadcrumbItems]);
 
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-
-            if (actionMode === 'add') {
-                form.resetFields();
-            } else if (selectedData) {
-                form.setFieldsValue(selectedData);
-            }
-        } else {
-            setIsModalVisible(false);
-            form.resetFields();
-        }
-    }, [actionMode, selectedData, form]);
-
-    const handleCancel = () => {
-        setActionMode('list');
-        setSelectedData(null);
-        form.resetFields();
-    };
-
-    const handleOk = () => {
-        if (readOnly) {
-            handleCancel();
-            return;
-        }
-
-        form.validateFields()
-            .then(async (values) => {
-                try {
-                    let response;
-                    if (actionMode === 'edit') {
-                        response = await updateRole(selectedData.role_id, values);
-                        console.log('Update Response:', response);
-
-                        const isSuccess = response.statusCode === 200 || response.statusCode === 201;
-                        if (isSuccess) {
-                            NotifAlert({
-                                icon: 'success',
-                                title: 'Berhasil',
-                                message: `Data Role "${values.role_name}" berhasil diubah.`,
-                            });
-                            handleCancel();
-                        } else {
-                            NotifOk({
-                                icon: 'error',
-                                title: 'Gagal',
-                                message: response.message || 'Gagal mengubah data Role',
-                            });
-                        }
-                    } else if (actionMode === 'add') {
-                        response = await createRole(values);
-                        console.log('Create Response:', response);
-
-                        const isSuccess = response.statusCode === 200 || response.statusCode === 201;
-                        if (isSuccess) {
-                            NotifAlert({
-                                icon: 'success',
-                                title: 'Berhasil',
-                                message: `Data Role "${values.role_name}" berhasil ditambahkan.`,
-                            });
-                            handleCancel();
-                        } else {
-                            NotifOk({
-                                icon: 'error',
-                                title: 'Gagal',
-                                message: response.message || 'Gagal menambahkan data Role',
-                            });
-                        }
-                    }
-                } catch (error) {
-                    console.error('Error:', error);
-                    NotifOk({
-                        icon: 'error',
-                        title: 'Error',
-                        message: 'Terjadi kesalahan saat menyimpan data',
-                    });
-                }
-            })
-            .catch((info) => {
-                console.log('Validate Failed:', info);
-            });
-    };
-
     return (
         <React.Fragment>
             <ListRole
                 actionMode={actionMode}
-                setActionMode={setActionMode}
+                setActionMode={setMode}
                 selectedData={selectedData}
                 setSelectedData={setSelectedData}
+                readOnly={readOnly}
             />
             <DetailRole
-                visible={isModalVisible}
+                setActionMode={setMode}
-                onCancel={handleCancel}
+                selectedData={selectedData}
-                onOk={handleOk}
+                setSelectedData={setSelectedData}
-                form={form}
-                editingKey={selectedData?.role_id}
                 readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
             />
         </React.Fragment>
     );
 });
 
-export default IndexRole;
+export default IndexRole;

src/pages/role/component/DetailRole.jsx

@@ -1,72 +1,213 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, InputNumber, Row, Col } from 'antd';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+import { validateRun } from '../../../Utils/validate';
+import { createRole, updateRole } from '../../../api/role';
 
 const { Text } = Typography;
+const { TextArea } = Input;
 
-const DetailRole = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
+const DetailRole = (props) => {
-    const modalTitle = editingKey ? (readOnly ? 'Preview Role' : 'Edit Role') : 'Tambah Role';
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        role_id: '',
+        role_name: '',
+        role_level: null,
+        role_description: '',
+        is_active: true,
+    };
+
+    const [formData, setFormData] = useState(defaultData);
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+    };
+
+    const handleInputNumberChange = (value) => {
+        setFormData({ ...formData, role_level: value });
+    };
+
+    const handleStatusToggle = (checked) => {
+        setFormData({ ...formData, is_active: checked });
+    };
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        const validationRules = [
+            { field: 'role_name', label: 'Nama Role', required: true },
+            { field: 'role_level', label: 'Level', required: true },
+        ];
+
+        if (
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: errorMessages,
+                });
+                setConfirmLoading(false);
+            })
+        ) {
+            return;
+        }
+
+        try {
+            const payload = {
+                role_name: formData.role_name,
+                role_level: formData.role_level,
+                role_description: formData.role_description,
+                is_active: formData.is_active,
+            };
+
+            const response = formData.role_id
+                ? await updateRole(formData.role_id, payload)
+                : await createRole(payload);
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                const action = formData.role_id ? 'diubah' : 'ditambahkan';
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Role "${payload.role_name}" berhasil ${action}.`,
+                });
+                props.setActionMode('list');
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Gagal menyimpan data.',
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server.',
+            });
+        } finally {
+            setConfirmLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData({ ...defaultData, ...props.selectedData });
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.showModal, props.selectedData]);
 
     return (
         <Modal
-            title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
+            title={
-            open={visible}
+                <Text style={{ fontSize: '18px' }}>
-            onCancel={onCancel}
+                    {props.actionMode === 'add'
-            onOk={onOk}
+                        ? 'Tambah Role'
-            okText="Simpan"
+                        : props.actionMode === 'preview'
-            cancelText="Batal"
+                        ? 'Preview Role'
-            okButtonProps={{ disabled: readOnly }}
+                        : 'Edit Role'}
-            destroyOnClose
+                </Text>
-            
+            }
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={[
+                <React.Fragment key="modal-footer">
+                    <ConfigProvider
+                        theme={{
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
+                    </ConfigProvider>
+                    <ConfigProvider
+                        theme={{
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        {!props.readOnly && (
+                            <Button loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        )}
+                    </ConfigProvider>
+                </React.Fragment>,
+            ]}
         >
             <Divider />
-            <Form form={form} layout="vertical" name="role_form">
+            <div style={{ marginBottom: 12 }}>
-                <Form.Item
+                <Text strong>Status</Text>
-                    name="is_active"
+                <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
-                    label={<Text strong>Status</Text>}
+                    <Switch
-                    valuePropName="checked"
+                        disabled={props.readOnly}
-                    initialValue={true}
+                        checked={formData.is_active}
-                >
+                        onChange={handleStatusToggle}
-                    <Switch disabled={readOnly} />
+                        style={{ backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf' }}
-                </Form.Item>
-
-                <Row gutter={16}>
-                    <Col span={12}>
-                        <Form.Item
-                            name="role_name"
-                            label={<Text strong>Nama Role</Text>}
-                            rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
-                        >
-                            <Input placeholder="Masukan nama role" readOnly={readOnly} />
-                        </Form.Item>
-                    </Col>
-                    <Col span={12}>
-                        <Form.Item
-                            name="role_level"
-                            label={<Text strong>Level</Text>}
-                            rules={[{ required: true, message: 'Level wajib diisi!' }]}
-                        >
-                            <InputNumber
-                                placeholder="Masukan level role"
-                                readOnly={readOnly}
-                                style={{ width: '100%' }}
-                            />
-                        </Form.Item>
-                    </Col>
-                </Row>
-
-                <Form.Item
-                    name="role_description"
-                    label={<Text strong>Deskripsi Role</Text>}
-                >
-                    <Input.TextArea
-                        rows={4}
-                        placeholder="Masukan deskripsi (opsional)"
-                        readOnly={readOnly}
                     />
-                </Form.Item>
+                    <Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
-            </Form>
+                </div>
+            </div>
+            <Row gutter={16}>
+                <Col span={12}>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Nama Role</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="role_name"
+                            value={formData.role_name}
+                            placeholder="Masukan nama role"
+                            readOnly={props.readOnly}
+                            onChange={handleInputChange}
+                        />
+                    </div>
+                </Col>
+                <Col span={12}>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Level</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <InputNumber
+                            name="role_level"
+                            value={formData.role_level}
+                            placeholder="Masukan level role"
+                            readOnly={props.readOnly}
+                            style={{ width: '100%' }}
+                            onChange={handleInputNumberChange}
+                        />
+                    </div>
+                </Col>
+            </Row>
+            <div style={{ marginBottom: 12 }}>
+                <Text strong>Deskripsi Role</Text>
+                <TextArea
+                    name="role_description"
+                    value={formData.role_description}
+                    placeholder="Masukan deskripsi (opsional)"
+                    readOnly={props.readOnly}
+                    rows={4}
+                    onChange={handleInputChange}
+                />
+            </div>
         </Modal>
     );
 };
 
-export default DetailRole;
+export default DetailRole;

src/pages/role/component/ListRole.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -14,17 +14,17 @@ import TableList from '../../../components/Global/TableList';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
-        title: 'No',
+        title: 'ID',
-        key: 'no',
+        dataIndex: 'role_id',
+        key: 'role_id',
         width: '5%',
-        align: 'center',
+        hidden: true,
-        render: (_, __, index) => index + 1,
     },
     {
         title: 'Nama Role',
         dataIndex: 'role_name',
         key: 'role_name',
-        width: '20%',
+        width: '25%',
     },
     {
         title: 'Level',
@@ -37,7 +37,19 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         title: 'Deskripsi',
         dataIndex: 'role_description',
         key: 'role_description',
-        width: '40%',
+        width: '35%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '10%',
+        align: 'center',
+        render: (_, { is_active }) => (
+            <Tag color={is_active ? 'green' : 'red'} key={'status'}>
+                {is_active ? 'Active' : 'Inactive'}
+            </Tag>
+        ),
     },
     {
         title: 'Aksi',
@@ -47,28 +59,23 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         render: (_, record) => (
             <Space>
                 <Button
-                    icon={<EyeOutlined />}
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
                     onClick={() => showPreviewModal(record)}
-                    style={{
-                        color: '#1890ff',
-                        borderColor: '#1890ff',
-                    }}
                 />
                 <Button
-                    icon={<EditOutlined />}
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
                     onClick={() => showEditModal(record)}
-                    style={{
-                        color: '#faad14',
-                        borderColor: '#faad14',
-                    }}
                 />
                 <Button
+                    type="text"
                     danger
+                    style={{ borderColor: 'red' }}
                     icon={<DeleteOutlined />}
                     onClick={() => showDeleteDialog(record)}
-                    style={{
-                        borderColor: '#ff4d4f',
-                    }}
                 />
             </Space>
         ),
@@ -76,19 +83,16 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 ];
 
 const ListRole = memo(function ListRole(props) {
-    const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
-
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
-
     const navigate = useNavigate();
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode == 'list') {
+            if (props.actionMode === 'list') {
                 setFormDataFilter(defaultFilter);
                 doFilter();
             }
@@ -97,11 +101,6 @@ const ListRole = memo(function ListRole(props) {
         }
     }, [props.actionMode]);
 
-    const toggleFilter = () => {
-        setFormDataFilter(defaultFilter);
-        setShowFilter((prev) => !prev);
-    };
-
     const doFilter = () => {
         setTrigerFilter((prev) => !prev);
     };
@@ -135,8 +134,8 @@ const ListRole = memo(function ListRole(props) {
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
-            title: 'Konfirmasi',
+            title: 'Konfirmasi Hapus',
-            message: 'Apakah anda yakin hapus data "' + param.role_name + '" ?',
+            message: 'Role "' + param.role_name + '" akan dihapus?',
             onConfirm: () => handleDelete(param.role_id, param.role_name),
             onCancel: () => props.setSelectedData(null),
         });
@@ -144,13 +143,11 @@ const ListRole = memo(function ListRole(props) {
 
     const handleDelete = async (role_id, role_name) => {
         const response = await deleteRole(role_id);
-        console.log('Delete Role Response:', response);
+        if (response.statusCode === 200) {
-
-        if (response.statusCode == 200) {
             NotifAlert({
                 icon: 'success',
                 title: 'Berhasil',
-                message: 'Data Role "' + role_name + '" berhasil dihapus.',
+                message: `Data Role "${role_name}" berhasil dihapus.`,
             });
             doFilter();
         } else {
@@ -175,7 +172,6 @@ const ListRole = memo(function ListRole(props) {
                                     onChange={(e) => {
                                         const value = e.target.value;
                                         setSearchValue(value);
-                                        // Auto search when clearing by backspace/delete
                                         if (value === '') {
                                             setFormDataFilter({ criteria: '' });
                                             setTrigerFilter((prev) => !prev);
@@ -204,14 +200,11 @@ const ListRole = memo(function ListRole(props) {
                                 <Space wrap size="small">
                                     <ConfigProvider
                                         theme={{
-                                            token: { colorBgContainer: '#E9F6EF' },
                                             components: {
                                                 Button: {
                                                     defaultBg: 'white',
                                                     defaultColor: '#23A55A',
                                                     defaultBorderColor: '#23A55A',
-                                                    defaultHoverColor: '#23A55A',
-                                                    defaultHoverBorderColor: '#23A55A',
                                                 },
                                             },
                                         }}
@@ -248,4 +241,4 @@ const ListRole = memo(function ListRole(props) {
     );
 });
 
-export default ListRole;
+export default ListRole;

src/pages/user/component/ListUser.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Modal } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -8,6 +8,7 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
+    ClockCircleOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
@@ -49,13 +50,7 @@ const getRoleColor = (role_name, role_level) => {
     return 'default';
 };
 
-const columns = (
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApprovalModal) => [
-    showPreviewModal,
-    showEditModal,
-    showDeleteDialog,
-    showApproveDialog,
-    showRejectDialog
-) => [
     {
         title: 'ID',
         dataIndex: 'user_id',
@@ -116,32 +111,22 @@ const columns = (
         render: (_, record) => {
             // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
             if (record.is_approve === 1 || record.is_approve === '1') {
-                // Pending - show both Approve and Reject buttons
+                // Pending - show single Pending button
                 return (
-                    <Space size="small" direction="vertical">
+                    <Button
-                        <Button
+                        type="default"
-                            type="primary"
+                        size="small"
-                            size="small"
+                        icon={<ClockCircleOutlined />}
-                            icon={<CheckOutlined />}
+                        onClick={() => showApprovalModal(record)}
-                            onClick={() => showApproveDialog(record)}
+                        style={{
-                            style={{
+                            backgroundColor: '#faad14',
-                                backgroundColor: '#52c41a',
+                            borderColor: '#faad14',
-                                borderColor: '#52c41a',
+                            color: 'white',
-                                width: '100%',
+                            width: '100%',
-                            }}
+                        }}
-                        >
+                    >
-                            Approve
+                        Pending
-                        </Button>
+                    </Button>
-                        <Button
-                            danger
-                            size="small"
-                            icon={<CloseOutlined />}
-                            onClick={() => showRejectDialog(record)}
-                            style={{ width: '100%' }}
-                        >
-                            Reject
-                        </Button>
-                    </Space>
                 );
             } else if (record.is_approve === 0 || record.is_approve === '0') {
                 // Rejected
@@ -233,6 +218,8 @@ const columns = (
 const ListUser = memo(function ListUser(props) {
     const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const [approvalModalVisible, setApprovalModalVisible] = useState(false);
+    const [selectedUser, setSelectedUser] = useState(null);
 
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -285,44 +272,30 @@ const ListUser = memo(function ListUser(props) {
         props.setActionMode('add');
     };
 
-    const showApproveDialog = (param) => {
+    const showApprovalModal = (param) => {
-        Swal.fire({
+        setSelectedUser(param);
-            icon: 'question',
+        setApprovalModalVisible(true);
-            title: 'Konfirmasi Approve User',
-            text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?',
-            showCancelButton: true,
-            cancelButtonColor: '#d33',
-            cancelButtonText: 'Batal',
-            confirmButtonColor: '#23A55A',
-            confirmButtonText: 'Approve',
-            reverseButtons: true,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                handleApprove(param.user_id);
-            } else if (result.dismiss) {
-                props.setSelectedData(null);
-            }
-        });
     };
 
-    const showRejectDialog = (param) => {
+    const handleModalApprove = () => {
-        Swal.fire({
+        if (selectedUser) {
-            icon: 'warning',
+            handleApprove(selectedUser.user_id);
-            title: 'Konfirmasi Reject User',
+            setApprovalModalVisible(false);
-            text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?',
+            setSelectedUser(null);
-            showCancelButton: true,
+        }
-            cancelButtonColor: '#23A55A',
+    };
-            cancelButtonText: 'Batal',
+
-            confirmButtonColor: '#d33',
+    const handleModalReject = () => {
-            confirmButtonText: 'Reject',
+        if (selectedUser) {
-            reverseButtons: true,
+            handleReject(selectedUser.user_id);
-        }).then((result) => {
+            setApprovalModalVisible(false);
-            if (result.isConfirmed) {
+            setSelectedUser(null);
-                handleReject(param.user_id);
+        }
-            } else if (result.dismiss) {
+    };
-                props.setSelectedData(null);
+
-            }
+    const handleModalCancel = () => {
-        });
+        setApprovalModalVisible(false);
+        setSelectedUser(null);
     };
 
     const showDeleteDialog = (param) => {
@@ -470,14 +443,46 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog,
+                                showApprovalModal
-                                showRejectDialog
                             )}
                             triger={trigerFilter}
                         />
                     </Col>
                 </Row>
             </Card>
+
+            {/* Approval Modal */}
+            <Modal
+                title="Konfirmasi Persetujuan User"
+                open={approvalModalVisible}
+                onCancel={handleModalCancel}
+                footer={[
+                    <Button key="reject" danger onClick={handleModalReject}>
+                        Reject User
+                    </Button>,
+                    <Button
+                        key="approve"
+                        type="primary"
+                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
+                        onClick={handleModalApprove}
+                    >
+                        Approve User
+                    </Button>,
+                ]}
+                width={400}
+            >
+                <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                    <ClockCircleOutlined
+                        style={{ fontSize: '48px', color: '#faad14', marginBottom: '16px' }}
+                    />
+                    <p style={{ fontSize: '16px', margin: '16px 0' }}>
+                        User: <strong>{selectedUser?.user_fullname}</strong>
+                    </p>
+                    <p style={{ color: '#666', margin: '8px 0' }}>
+                        Apakah Anda ingin approve atau reject user ini?
+                    </p>
+                </div>
+            </Modal>
         </React.Fragment>
     );
 });