src/components/Global/TableList.jsx

@@ -19,6 +19,7 @@ const TableList = memo(function TableList({
     cardColor,
     fieldColor,
     firstLoad = true,
+    columnDynamic = false,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -31,6 +32,8 @@ const TableList = memo(function TableList({
         total_page: 1,
     });
 
+    const [columnsDynamic, setColumnsDynamic] = useState(columns);
+
     const [viewMode, setViewMode] = useState('table');
 
     const { useBreakpoint } = Grid;
@@ -57,6 +60,49 @@ const TableList = memo(function TableList({
         const param = new URLSearchParams({ ...paging, ...queryParams });
         const resData = await getData(param);
 
+        if (columnDynamic && resData) {
+            const columnsApi = resData[columnDynamic] ?? '';
+
+            // Pisahkan string menjadi array kolom
+            const colArray = columnsApi.split(',').map((c) => c.trim());
+
+            // Kolom default datetime di awal
+            const defaultColumns = [
+                {
+                    title: 'No',
+                    key: 'no',
+                    width: '5%',
+                    align: 'center',
+                    render: (_, __, index) => index + 1,
+                },
+                {
+                    title: 'Datetime',
+                    dataIndex: 'datetime',
+                    key: 'datetime',
+                    width: '15%',
+                    // render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
+                },
+            ];
+
+            // Buat kolom numerik dengan format 4 angka di belakang koma
+            const numericColumns = colArray.map((colName) => ({
+                title: colName,
+                dataIndex: colName,
+                key: colName,
+                align: 'right',
+                width: 'auto',
+                render: (value) => {
+                    if (typeof value === 'number') {
+                        return value.toFixed(4);
+                    }
+                    return value ?? '-';
+                },
+            }));
+
+            // Gabungkan default + API columns
+            setColumnsDynamic([...defaultColumns, ...numericColumns]);
+        }
+
         setData(resData?.data ?? []);
 
         const pagingData = resData?.paging;
@@ -71,6 +117,8 @@ const TableList = memo(function TableList({
             }));
         }
 
+        setGridLoading(false);
+
         if (resData) {
             setTimeout(() => {
                 setGridLoading(false);
@@ -109,7 +157,7 @@ const TableList = memo(function TableList({
                     cardColor={cardColor}
                     fieldColor={fieldColor}
                     data={data}
-                    column={columns}
+                    column={columnsDynamic}
                     header={header}
                     showPreviewModal={showPreviewModal}
                     showEditModal={showEditModal}
@@ -119,7 +167,7 @@ const TableList = memo(function TableList({
                 <Row gutter={24} style={{ marginTop: '16px' }}>
                     <Table
                         rowSelection={rowSelection || null}
-                        columns={columns}
+                        columns={columnsDynamic}
                         dataSource={data.map((item, index) => ({ ...item, key: index }))}
                         pagination={false}
                         loading={gridLoading}

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

@@ -43,7 +43,7 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
                     case 1:
                         return (
                             <span>
-                                {record.lim_low + 1} : {record.lim_high - 1}
+                                {record.lim_low} : {record.lim_high}
                             </span>
                         );
                     case 2:
@@ -51,13 +51,13 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
                     case 3:
                         return (
                             <span>
-                                {record.lim_low_crash + 1} : {record.lim_low - 1}
+                                {record.lim_low_crash} : {record.lim_low}
                             </span>
                         );
                     case 4:
                         return (
                             <span>
-                                {record.lim_high + 1} : {record.lim_high_crash - 1}
+                                {record.lim_high} : {record.lim_high_crash}
                             </span>
                         );
                     case 5:

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

@@ -3,7 +3,10 @@ import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'a
 import TableList from '../../../../components/Global/TableList';
 import dayjs from 'dayjs';
 import { FileTextOutlined } from '@ant-design/icons';
-import { getAllHistoryValueReport } from '../../../../api/history-value';
+import {
+    getAllHistoryValueReport,
+    getAllHistoryValueReportPivot,
+} from '../../../../api/history-value';
 import { getAllPlantSection } from '../../../../api/master-plant-section';
 
 const { Text } = Typography;
@@ -29,19 +32,19 @@ const ListReport = memo(function ListReport(props) {
             key: 'tag_name',
             width: '70%',
         },
-        {
+        // {
-            title: 'Value',
+        //     title: 'Value',
-            dataIndex: 'val',
+        //     dataIndex: 'val',
-            key: 'val',
+        //     key: 'val',
-            width: '10%',
+        //     width: '10%',
-            render: (_, record) => Number(record.val).toFixed(4),
+        //     render: (_, record) => Number(record.val).toFixed(4),
-        },
+        // },
-        {
+        // {
-            title: 'Stat',
+        //     title: 'Stat',
-            dataIndex: 'status',
+        //     dataIndex: 'status',
-            key: 'status',
+        //     key: 'status',
-            width: '10%',
+        //     width: '10%',
-        },
+        // },
     ];
 
     const dateNow = dayjs();
@@ -49,21 +52,21 @@ const ListReport = memo(function ListReport(props) {
 
     const [trigerFilter, setTrigerFilter] = useState(false);
 
+    const [plantSubSection, setPlantSubSection] = useState(0);
+    const [plantSubSectionList, setPlantSubSectionList] = useState([]);
+    const [startDate, setStartDate] = useState(dateNow);
+    const [endDate, setEndDate] = useState(dateNow);
+    const [periode, setPeriode] = useState(10);
+
     const defaultFilter = {
         criteria: '',
         plant_sub_section_id: 0,
         from: dateNowFormated,
         to: dateNowFormated,
-        interval: 10,
+        interval: periode,
     };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
 
-    const [plantSubSection, setPlantSubSection] = useState(0);
-    const [plantSubSectionList, setPlantSubSectionList] = useState([]);
-    const [startDate, setStartDate] = useState(dateNow);
-    const [endDate, setEndDate] = useState(dateNow);
-    const [periode, setPeriode] = useState(5);
-
     const handleSearch = () => {
         const formattedDateStart = startDate.format('YYYY-MM-DD');
         const formattedDateEnd = endDate.format('YYYY-MM-DD');
@@ -199,9 +202,13 @@ const ListReport = memo(function ListReport(props) {
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
                             firstLoad={false}
-                            getData={getAllHistoryValueReport}
+                            mobile
+                            cardColor={'#d38943ff'}
+                            header={'datetime'}
+                            getData={getAllHistoryValueReportPivot}
                             queryParams={formDataFilter}
                             columns={columns}
+                            columnDynamic={'columns'}
                             triger={trigerFilter}
                         />
                     </Col>

src/pages/report/trending/ReportTrending.jsx

@@ -62,10 +62,10 @@ const ReportTrending = memo(function ReportTrending(props) {
                     : [],
             }));
 
-            // setTrendingValue(cleanedData);
+            setTrendingValue(cleanedData);
         } else {
             // 🔹 Jika tidak ada data dari API
-            // setTrendingValue([]);
+            setTrendingValue([]);
         }
     };