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

Reviewed-on: #37

.env.example

@@ -1,4 +1,5 @@
-VITE_API_SERVER=http://36.66.16.49:9528/api
+VITE_API_SERVER=http://localhost:9530/api
+# VITE_API_SERVER=https://117.102.231.130:9528/api
 VITE_MQTT_SERVER=ws://localhost:1884
 VITE_MQTT_USERNAME=
 VITE_MQTT_PASSWORD=

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.config
 
 node_modules
 dist

package.json

@@ -22,7 +22,8 @@
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.1",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
     "mqtt": "^5.14.0",
     "qrcode": "^1.5.4",
     "react": "^18.2.0",
@@ -30,6 +31,7 @@
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.22.3",
     "react-svg": "^16.3.0",
+    "recharts": "^3.6.0",
     "sweetalert2": "^11.17.2"
   },
   "devDependencies": {

public/web.config

@@ -3,7 +3,7 @@
     <system.webServer>
         <rewrite>
             <rules>
-                <rule name="reactViteSypiu">
+                <rule name="CallOfDuty">
                     <match url=".*" />
                     <conditions logicalGrouping="MatchAll">
                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

src/App.jsx

@@ -10,38 +10,50 @@ import Home from './pages/home/Home';
 import Blank from './pages/blank/Blank';
 
 // Master
-import IndexDevice from './pages/master/device/IndexDevice';
+import IndexPlantSubSection from './pages/master/plantSubSection/IndexPlantSubSection';
-import IndexTag from './pages/master/tag/IndexTag';
-import IndexUnit from './pages/master/unit/IndexUnit';
 import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
-import IndexPlantSection from './pages/master/plantSection/IndexPlantSection';
+import IndexDevice from './pages/master/device/IndexDevice';
+import IndexUnit from './pages/master/unit/IndexUnit';
+import IndexTag from './pages/master/tag/IndexTag';
 import IndexStatus from './pages/master/status/IndexStatus';
+import IndexSparepart from './pages/master/sparepart/IndexSparepart';
 import IndexShift from './pages/master/shift/IndexShift';
+// Brand device
+import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice';
+import EditBrandDevice from './pages/master/brandDevice/EditBrandDevice';
+import ViewBrandDevice from './pages/master/brandDevice/ViewBrandDevice';
+import ViewFilePage from './pages/master/brandDevice/ViewFilePage';
 
 // Jadwal Shift
 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';
-
+import IndexContact from './pages/contact/IndexContact';
-// Shift Management
+import DetailNotificationTab from './pages/notificationDetail/IndexNotificationDetail';
-import IndexMember from './pages/shiftManagement/member/IndexMember';
+import IndexVerificationSparepart from './pages/verificationSparepart/IndexVerificationSparepart';
 
 import SvgTest from './pages/home/SvgTest';
-import SvgOverview from './pages/home/SvgOverview';
+import SvgOverviewCompressor from './pages/home/SvgOverviewCompressor';
 import SvgCompressorA from './pages/home/SvgCompressorA';
 import SvgCompressorB from './pages/home/SvgCompressorB';
 import SvgCompressorC from './pages/home/SvgCompressorC';
+import SvgOverviewAirDryer from './pages/home/SvgOverviewAirDryer';
 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';
+
+// Image Viewer
+import ImageViewer from './Utils/ImageViewer';
+import RedirectWa from './pages/blank/RedirectWa';
 
 const App = () => {
     return (
@@ -52,6 +64,16 @@ const App = () => {
                 <Route path="/signin" element={<SignIn />} />
                 <Route path="/signup" element={<SignUp />} />
                 <Route path="/svg" element={<SvgTest />} />
+                <Route
+                    path="/notification-detail/:notificationId"
+                    element={<DetailNotificationTab />}
+                />
+                <Route
+                    path="/verification-sparepart/:notificationId"
+                    element={<IndexVerificationSparepart />}
+                />
+
+                <Route path="/redirect" element={<RedirectWa />} />
 
                 {/* Protected Routes */}
                 <Route path="/dashboard" element={<ProtectedRoute />}>
@@ -59,11 +81,14 @@ const App = () => {
                     <Route path="blank" element={<Blank />} />
                 </Route>
 
+                <Route path="/image-viewer/:fileName" element={<ImageViewer />} />
+
                 <Route path="/dashboard-svg" element={<ProtectedRoute />}>
-                    <Route path="overview" element={<SvgOverview />} />
+                    <Route path="overview-compressor" element={<SvgOverviewCompressor />} />
                     <Route path="compressor-a" element={<SvgCompressorA />} />
                     <Route path="compressor-b" element={<SvgCompressorB />} />
                     <Route path="compressor-c" element={<SvgCompressorC />} />
+                    <Route path="overview-airdryer" element={<SvgOverviewAirDryer />} />
                     <Route path="airdryer-a" element={<SvgAirDryerA />} />
                     <Route path="airdryer-b" element={<SvgAirDryerB />} />
                     <Route path="airdryer-c" element={<SvgAirDryerC />} />
@@ -73,27 +98,42 @@ const App = () => {
                     <Route path="device" element={<IndexDevice />} />
                     <Route path="tag" element={<IndexTag />} />
                     <Route path="unit" element={<IndexUnit />} />
-                    <Route path="brand-device" element={<IndexBrandDevice />} />
+                    <Route path="sparepart" element={<IndexSparepart />} />
-                    <Route path="plant-section" element={<IndexPlantSection />} />
+                    <Route path="plant-sub-section" element={<IndexPlantSubSection />} />
                     <Route path="shift" element={<IndexShift />} />
                     <Route path="status" element={<IndexStatus />} />
+
+                    {/* Brand Device Routes */}
+                    <Route path="brand-device" element={<IndexBrandDevice />} />
+                    <Route path="brand-device/add" element={<AddBrandDevice />} />
+                    <Route path="brand-device/edit/:id" element={<EditBrandDevice />} />
+                    <Route path="brand-device/view/:id" element={<ViewBrandDevice />} />
+                    <Route
+                        path="brand-device/edit/:id/files/:fileType/:fileName"
+                        element={<ViewFilePage />}
+                    />
+                    <Route
+                        path="brand-device/view/:id/files/:fileType/:fileName"
+                        element={<ViewFilePage />}
+                    />
+                    <Route
+                        path="brand-device/view/temp/files/:fileName"
+                        element={<ViewFilePage />}
+                    />
                 </Route>
 
-                <Route path="/jadwal-shift" element={<ProtectedRoute />}>
+                <Route path="/report" element={<ProtectedRoute />}>
-                    <Route index element={<IndexJadwalShift />} />
-                </Route>
-
-                <Route path="/history" element={<ProtectedRoute />}>
                     <Route path="trending" element={<IndexTrending />} />
                     <Route path="report" element={<IndexReport />} />
                 </Route>
 
-                <Route path="/notification" element={<ProtectedRoute />}>
+                <Route path="/history" element={<ProtectedRoute />}>
-                    <Route index element={<IndexNotification />} />
+                    <Route path="alarm" element={<IndexHistoryAlarm />} />
+                    <Route path="event" element={<IndexHistoryEvent />} />
                 </Route>
 
-                <Route path="/event-alarm" element={<ProtectedRoute />}>
+                <Route path="/notification" element={<ProtectedRoute />}>
-                    <Route index element={<IndexEventAlarm />} />
+                    <Route index element={<IndexNotification />} />
                 </Route>
 
                 <Route path="/role" element={<ProtectedRoute />}>
@@ -104,11 +144,14 @@ const App = () => {
                     <Route index element={<IndexUser />} />
                 </Route>
 
-                <Route path="/shift-management" element={<ProtectedRoute />}>
+                <Route path="/contact" element={<ProtectedRoute />}>
-                    <Route path="member" element={<IndexMember />} />
+                    <Route index element={<IndexContact />} />
+                </Route>
+
+                <Route path="/jadwal-shift" element={<ProtectedRoute />}>
+                    <Route index element={<IndexJadwalShift />} />
                 </Route>
 
-                {/* Catch-all */}
                 <Route path="*" element={<NotFound />} />
             </Routes>
         </BrowserRouter>

src/Utils/ImageViewer.jsx

@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { getFileUrl, getFolderFromFileType } from '../api/file-uploads';
+
+const ImageViewer = () => {
+    const { fileName } = useParams();
+    const [fileUrl, setFileUrl] = useState('');
+    const [error, setError] = useState('');
+    const [zoom, setZoom] = useState(1);
+    const [isImage, setIsImage] = useState(false);
+
+    useEffect(() => {
+        if (!fileName) {
+            setError('No file specified');
+            return;
+        }
+
+        try {
+            const decodedFileName = decodeURIComponent(fileName);
+            const fileExtension = decodedFileName.split('.').pop()?.toLowerCase();
+            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+
+            setIsImage(imageExtensions.includes(fileExtension));
+
+            const folder = getFolderFromFileType(fileExtension);
+
+            const url = getFileUrl(folder, decodedFileName);
+            setFileUrl(url);
+
+            document.title = `File Viewer - ${decodedFileName}`;
+        } catch (error) {
+
+            setError('Failed to load file');
+        }
+    }, [fileName]);
+
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!isImage) return;
+
+            if (e.key === '+' || e.key === '=') {
+                setZoom(prev => Math.min(prev + 0.1, 3));
+            } else if (e.key === '-' || e.key === '_') {
+                setZoom(prev => Math.max(prev - 0.1, 0.1));
+            } else if (e.key === '0') {
+                setZoom(1);
+            } else if (e.key === 'Escape') {
+                window.close();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isImage]);
+
+
+    const handleWheel = (e) => {
+        if (!isImage || !e.ctrlKey) return;
+
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        setZoom(prev => Math.min(Math.max(prev + delta, 0.1), 3));
+    };
+
+    const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.1, 3));
+    const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.1, 0.1));
+    const handleResetZoom = () => setZoom(1);
+
+    if (error) {
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                fontFamily: 'Arial, sans-serif',
+                backgroundColor: '#f5f5f5'
+            }}>
+                <div style={{ textAlign: 'center' }}>
+                    <h1>Error</h1>
+                    <p>{error}</p>
+                </div>
+            </div>
+        );
+    }
+
+
+    if (!isImage) {
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                fontFamily: 'Arial, sans-serif',
+                backgroundColor: '#f5f5f5'
+            }}>
+                <div style={{ textAlign: 'center' }}>
+                    <h1>File Type Not Supported</h1>
+                    <p>Image viewer only supports image files.</p>
+                    <p>Please use direct file preview for PDFs and other documents.</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            style={{
+                margin: 0,
+                padding: 0,
+                height: '100vh',
+                width: '100vw',
+                backgroundColor: '#000',
+                overflow: 'hidden',
+                position: 'relative'
+            }}
+            onWheel={handleWheel}
+        >
+
+            {isImage && (
+                <div style={{
+                    position: 'fixed',
+                    top: '20px',
+                    right: '20px',
+                    display: 'flex',
+                    gap: '10px',
+                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    padding: '10px',
+                    borderRadius: '8px',
+                    zIndex: 1000
+                }}>
+                    <button
+                        onClick={handleZoomOut}
+                        style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                            color: '#fff',
+                            border: '1px solid rgba(255, 255, 255, 0.3)',
+                            padding: '8px 12px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '16px'
+                        }}
+                        title="Zoom Out (-)"
+                    >
+                        −
+                    </button>
+                    <span style={{
+                        color: '#fff',
+                        padding: '8px 12px',
+                        minWidth: '60px',
+                        textAlign: 'center',
+                        fontSize: '14px'
+                    }}>
+                        {Math.round(zoom * 100)}%
+                    </span>
+                    <button
+                        onClick={handleZoomIn}
+                        style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                            color: '#fff',
+                            border: '1px solid rgba(255, 255, 255, 0.3)',
+                            padding: '8px 12px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '16px'
+                        }}
+                        title="Zoom In (+)"
+                    >
+                        +
+                    </button>
+                    <button
+                        onClick={handleResetZoom}
+                        style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                            color: '#fff',
+                            border: '1px solid rgba(255, 255, 255, 0.3)',
+                            padding: '8px 12px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '14px'
+                        }}
+                        title="Reset Zoom (0)"
+                    >
+                        Reset
+                    </button>
+                </div>
+            )}
+
+
+            {isImage && fileUrl ? (
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100%',
+                    overflow: 'auto'
+                }}>
+                    <img
+                        src={fileUrl}
+                        alt={decodeURIComponent(fileName)}
+                        style={{
+                            maxWidth: 'none',
+                            maxHeight: 'none',
+                            transform: `scale(${zoom})`,
+                            transformOrigin: 'center',
+                            transition: 'transform 0.1s ease-out',
+                            cursor: zoom > 1 ? 'move' : 'default'
+                        }}
+                        onError={() => setError('Failed to load image')}
+                        draggable={false}
+                    />
+                </div>
+            ) : isImage ? (
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100vh',
+                    color: '#fff',
+                    fontFamily: 'Arial, sans-serif'
+                }}>
+                    <p>Loading image...</p>
+                </div>
+            ) : null}
+
+
+            {isImage && (
+                <div style={{
+                    position: 'fixed',
+                    bottom: '20px',
+                    left: '20px',
+                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    color: '#fff',
+                    padding: '10px 15px',
+                    borderRadius: '8px',
+                    fontSize: '12px',
+                    zIndex: 1000
+                }}>
+                    <div>Mouse wheel + Ctrl: Zoom</div>
+                    <div>Keyboard: +/− Zoom, 0: Reset, ESC: Close</div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ImageViewer;

src/Utils/validate.js

@@ -0,0 +1,71 @@
+// utils/validate.js
+
+// Daftar aturan validasi
+const validationRules = [
+    { field: 'name', label: 'Nama', required: true },
+    {
+        field: 'email',
+        label: 'Email',
+        required: true,
+        pattern: /\S+@\S+\.\S+/,
+        patternMessage: 'Format email tidak valid',
+    },
+    {
+        field: 'age',
+        label: 'Umur',
+        required: true,
+        validator: (v) => !isNaN(v) && Number(v) >= 18,
+        message: 'Umur harus angka dan minimal 18 tahun',
+    },
+];
+
+/**
+ * Fungsi validasi dinamis berbasis array objek aturan.
+ * @param {Object} data - data form (misal { name: '', email: '' })
+ * @param {Array} rules - array aturan validasi
+ * @returns {Object} errors - object berisi pesan error per field
+ */
+
+export const validateRun = (data, rules, onError) => {
+    const errors = {};
+    const messages = [];
+
+    const ipRegex = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/;
+
+    rules.forEach((rule) => {
+        const value = data[rule.field]?.toString().trim();
+        const fieldErrors = [];
+
+        if (rule.required && !value) {
+            fieldErrors.push(`${rule.label} wajib diisi`);
+        }
+
+        // ✅ IP Address check
+        if (rule.ip && value && !ipRegex.test(value)) {
+            fieldErrors.push(`${rule.label} harus berupa alamat IP yang valid`);
+        }
+
+        if (rule.pattern && value && !rule.pattern.test(value)) {
+            fieldErrors.push(rule.patternMessage || `${rule.label} tidak valid`);
+        }
+
+        if (rule.validator && value && !rule.validator(value)) {
+            fieldErrors.push(rule.message || `${rule.label} tidak valid`);
+        }
+
+        // Gabungkan error satu field jadi satu string (pisah baris)
+        if (fieldErrors.length > 0) {
+            errors[rule.field] = fieldErrors.join("\n");
+            messages.push(...fieldErrors);
+        }
+    });
+
+    // Jika ada error total, tampilkan callback dan return false
+
+    if (messages.length > 0) {
+        if (onError) onError(messages.join("\n"));
+        return true;
+    }
+    return false
+
+};

src/api/contact.jsx

@@ -1,45 +1,56 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
-const getAllApd = async (queryParams) => {
+const getAllContact = async (queryParams) => {
     const response = await SendRequest({
         method: 'get',
-        prefix: `apd?${queryParams.toString()}`,
+        prefix: `contact?${queryParams.toString()}`,
     });
-    return response;
+
+    return response.data;
 };
 
-const createApd = async (queryParams) => {
+const getContactById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `contact/${id}`,
+    });
+
+    return response.data;
+};
+
+const createContact = async (queryParams) => {
     const response = await SendRequest({
         method: 'post',
-        prefix: `apd`,
+        prefix: `contact`,
         params: queryParams,
     });
+
     return response.data;
 };
 
-const updateApd = async (vendor_id, queryParams) => {
+const updateContact = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `apd/${vendor_id}`,
+        prefix: `contact/${id}`,
         params: queryParams,
     });
+
     return response.data;
 };
 
-const deleteApd = async (queryParams) => {
+const deleteContact = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `apd/${queryParams}`,
+        prefix: `contact/${id}`,
     });
+
     return response.data;
 };
 
-const getJenisPermit = async () => {
+export {
-    const response = await SendRequest({
+    getAllContact,
-        method: 'get',
+    getContactById,
-        prefix: `apd/jenis-permit`,
+    createContact,
-    });
+    updateContact,
-    return response.data;
+    deleteContact,
-};
+};
-
-export { getAllApd, createApd, updateApd, deleteApd, getJenisPermit };

src/api/dashboard-home.jsx

@@ -1,48 +0,0 @@
-import { SendRequest } from '../components/Global/ApiRequest';
-
-const getTotal = async (query = '') => {
-    const prefix = `${query ? `?${query}` : ''}`;
-    const fullUrl = `${import.meta.env.VITE_API_SERVER}/dashboard/${prefix}`;
-    try {
-        const response = await SendRequest({
-            method: 'get',
-            prefix: `dashboard/${prefix}`,
-        });
-        return response;
-    } catch (error) {
-        console.error(`[API Call] Failed: GET ${fullUrl}`, error);
-        throw error;
-    }
-};
-
-const getTotalPermit = async (query = '') => {
-    const prefix = `dashboard/permit-total${query ? `?${query}` : ''}`;
-    const fullUrl = `${import.meta.env.VITE_API_SERVER}/${prefix}`;
-    try {
-        const response = await SendRequest({
-            method: 'get',
-            prefix,
-        });
-        return response;
-    } catch (error) {
-        console.error(`[API Call] Failed: GET ${fullUrl}`, error);
-        throw error;
-    }
-};
-
-const getTotalPermitPerYear = async (query = '') => {
-    const prefix = `dashboard/permit-breakdown${query ? `?${query}` : ''}`;
-    const fullUrl = `${import.meta.env.VITE_API_SERVER}/${prefix}`;
-    try {
-        const response = await SendRequest({
-            method: 'get',
-            prefix,
-        });
-        return response;
-    } catch (error) {
-        console.error(`[API Call] Failed: GET ${fullUrl}`, error);
-        throw error;
-    }
-};
-
-export { getTotal, getTotalPermit, getTotalPermitPerYear };

src/api/file-uploads.jsx

@@ -0,0 +1,135 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+import axios from 'axios';
+
+const API_BASE_URL = import.meta.env.VITE_API_SERVER;
+
+// Get file from uploads directory
+const getFile = async (folder, filename) => {
+  const token = localStorage.getItem('token');
+  if (!token) {
+    throw new Error('No authentication token found');
+  }
+
+  const response = await axios.get(`${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}`, {
+    responseType: 'blob',
+    headers: {
+      'Authorization': `Bearer ${token.replace(/"/g, '')}`
+    }
+  });
+
+  return response.data;
+};
+
+// Download file as blob with proper handling
+const downloadFile = async (folder, filename) => {
+  try {
+    const response = await getFile(folder, filename);
+
+    const blob = new Blob([response], {
+      type: 'application/octet-stream'
+    });
+    const url = window.URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+
+    return { success: true, filename };
+  } catch (error) {
+    console.error('Error downloading file:', error);
+    throw error;
+  }
+};
+
+// Get file info (metadata)
+const getFileInfo = async (folder, filename) => {
+  const response = await SendRequest({
+    method: 'head',
+    prefix: `file-uploads/${folder}/${encodeURIComponent(filename)}`
+  });
+
+  if (response.error) {
+    throw new Error(response.message);
+  }
+
+  return {
+    contentType: response.headers?.['content-type'],
+    contentLength: response.headers?.['content-length'],
+    lastModified: response.headers?.['last-modified'],
+    filename: filename,
+    folder: folder
+  };
+};
+
+// Get file URL for iframe
+const getFileUrl = (folder, filename) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    return `${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}?token=${encodeURIComponent(token)}`;
+  }
+  return `${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}`;
+};
+
+// Check if file exists
+const checkFileExists = async (folder, filename) => {
+  const response = await SendRequest({
+    method: 'head',
+    prefix: `file-uploads/${folder}/${encodeURIComponent(filename)}`
+  });
+
+  if (response.error && response.statusCode === 404) {
+    return false;
+  } else if (response.error) {
+    throw new Error(response.message);
+  }
+
+  return true;
+};
+
+const getFileType = (filename) => {
+  const ext = filename.split('.').pop().toLowerCase();
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+  const pdfExtensions = ['pdf'];
+
+  if (imageExtensions.includes(ext)) {
+    return 'image';
+  } else if (pdfExtensions.includes(ext)) {
+    return 'pdf';
+  }
+  return 'unknown';
+};
+
+// Upload file to server
+const uploadFile = async (file, folder) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('folder', folder);
+
+  const response = await SendRequest({
+    method: 'post',
+    prefix: 'file-uploads',
+    params: formData
+  });
+
+  return response.data;
+};
+
+const getFolderFromFileType = (fileType) => {
+  return fileType === 'pdf' ? 'pdf' : 'images';
+};
+
+export {
+  getFile,
+  downloadFile,
+  getFileInfo,
+  getFileUrl,
+  checkFileExists,
+  getFileType,
+  getFolderFromFileType,
+  uploadFile
+};

src/api/history-value.jsx

@@ -0,0 +1,54 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllHistoryAlarm = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/alarm?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getAllHistoryEvent = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/event?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getAllHistoryValueReport = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/value-report?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getAllHistoryValueReportPivot = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/value-report-pivot?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getAllHistoryValueTrendingPivot = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/value-trending?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+export {
+    getAllHistoryAlarm,
+    getAllHistoryEvent,
+    getAllHistoryValueReport,
+    getAllHistoryValueReportPivot,
+    getAllHistoryValueTrendingPivot,
+};

src/api/jadwal-shift.jsx

@@ -1,67 +1,55 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllJadwalShift = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `user-schedule?${queryParams.toString()}`,
-            prefix: `jadwal-shift?${queryParams.toString()}`,
+    });
-        });
+
-        return response;
+    return response.data;
-    } catch (error) {
+};
-        console.error('getAllJadwalShift error:', error);
+
-        return {
+const getJadwalShiftById = async (id) => {
-            status: 500,
+    const response = await SendRequest({
-            data: {
+        method: 'get',
-                data: [],
+        prefix: `user-schedule/${id}`,
-                paging: {
+    });
-                    page: 1,
+
-                    limit: 10,
+    return response.data;
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const createJadwalShift = async (queryParams) => {
     const response = await SendRequest({
         method: 'post',
-        prefix: `jadwal-shift`,
+        prefix: `user-schedule`,
-        data: queryParams,
+        params: queryParams,
     });
-    return {
+
-        statusCode: response.statusCode || 200,
+    return response.data;
-        data: response.data,
-        message: response.message
-    };
 };
 
 const updateJadwalShift = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `jadwal-shift/${id}`,
+        prefix: `user-schedule/${id}`,
-        data: queryParams,
+        params: queryParams,
     });
-    return {
+
-        statusCode: response.statusCode || 200,
+    return response.data;
-        data: response.data,
-        message: response.message
-    };
 };
 
 const deleteJadwalShift = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `jadwal-shift/${id}`,
+        prefix: `user-schedule/${id}`,
     });
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
-export { getAllJadwalShift, createJadwalShift, updateJadwalShift, deleteJadwalShift };
+export {
+    getAllJadwalShift,
+    getJadwalShiftById,
+    createJadwalShift,
+    updateJadwalShift,
+    deleteJadwalShift,
+};

src/api/master-brand.jsx

@@ -0,0 +1,109 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllBrands = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `brand?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getBrandById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `brand/${id}`,
+    });
+
+    return response.data;
+};
+
+const createBrand = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `brand`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const updateBrand = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `brand/${id}`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const deleteBrand = async (id) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `brand/${id}`,
+    });
+
+    return response.data;
+};
+
+const getErrorCodesByBrandId = async (brandId, queryParams) => {
+    const query = queryParams ? `?${queryParams.toString()}` : '';
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `error-code/brand/${brandId}${query}`,
+    });
+
+    return response.data;
+};
+
+const getErrorCodeById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `error-code/${id}`,
+    });
+
+    return response.data;
+};
+
+const createErrorCode = async (brandId, queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `error-code/brand/${brandId}`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const updateErrorCode = async (brandId, errorCodeId, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `error-code/brand/${brandId}/${errorCodeId}`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const deleteErrorCode = async (brandId, errorCode) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `error-code/brand/${brandId}/${errorCode}`,
+    });
+
+    return response.data;
+};
+
+export {
+    getAllBrands,
+    getBrandById,
+    createBrand,
+    updateBrand,
+    deleteBrand,
+    getErrorCodesByBrandId,
+    getErrorCodeById,
+    createErrorCode,
+    updateErrorCode,
+    deleteErrorCode
+};

src/api/master-device.jsx

@@ -1,88 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllDevice = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `device?${queryParams.toString()}`,
-            prefix: `device?${queryParams.toString()}`,
+    });
-        });
-        console.log('getAllDevice response:', response);
-        console.log('Query params:', queryParams.toString());
 
-        // Backend response structure:
+    return response.data;
-        // {
-        //   statusCode: 200,
-        //   data: [...devices],
-        //   paging: {
-        //     current_page: 1,
-        //     current_limit: 10,
-        //     total_limit: 50,
-        //     total_page: 5
-        //   }
-        // }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: response.paging.current_page || 1,
-                        limit: response.paging.current_limit || 10,
-                        total: totalData,
-                        page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination (old behavior)
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllDevice error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getDeviceById = async (id) => {
@@ -90,6 +14,7 @@ const getDeviceById = async (id) => {
         method: 'get',
         prefix: `device/${id}`,
     });
+
     return response.data;
 };
 
@@ -99,71 +24,27 @@ const createDevice = async (queryParams) => {
         prefix: `device`,
         params: queryParams,
     });
-    console.log('createDevice full response:', response);
-    console.log('createDevice payload sent:', queryParams);
 
-    // Backend returns: { statusCode, message, rows, data: [device_object] }
+    return response.data;
-    // Check if response is empty array (error from SendRequest)
-    if (Array.isArray(response) && response.length === 0) {
-        return {
-            statusCode: 500,
-            data: null,
-            message: 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Extract first item from data array
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const updateDevice = async (device_id, queryParams) => {
+const updateDevice = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `device/${device_id}`,
+        prefix: `device/${id}`,
         params: queryParams,
     });
-    console.log('updateDevice full response:', response);
-    console.log('updateDevice payload sent:', queryParams);
 
-    // Backend returns: { statusCode, message, rows, data: [device_object] }
+    return response.data;
-    // Check if response is empty array (error from SendRequest)
-    if (Array.isArray(response) && response.length === 0) {
-        return {
-            statusCode: 500,
-            data: null,
-            message: 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Extract first item from data array
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const deleteDevice = async (queryParams) => {
+const deleteDevice = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `device/${queryParams}`,
+        prefix: `device/${id}`,
     });
-    console.log('deleteDevice full response:', response);
+
-    // Backend returns: { statusCode, message, rows: null, data: true }
+    return response.data;
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 export { getAllDevice, getDeviceById, createDevice, updateDevice, deleteDevice };

src/api/master-plant-section.jsx

@@ -1,97 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllPlantSection = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        // Ensure queryParams is URLSearchParams object
+        method: 'get',
-        const params = queryParams instanceof URLSearchParams ? queryParams : new URLSearchParams(queryParams);
+        prefix: `plant-sub-section?${queryParams.toString()}`,
+    });
 
-        const response = await SendRequest({
+    return response.data;
-            method: 'get',
-            prefix: `plant-sub-section?${params.toString()}`,
-        });
-        console.log('getAllPlantSection response:', response);
-        console.log('Query params:', params.toString());
-
-        // Backend response structure:
-        // {
-        //   statusCode: 200,
-        //   data: [...plantSections],
-        //   paging: {
-        //     current_page: 1,
-        //     current_limit: 10,
-        //     total_limit: 50,
-        //     total_page: 5
-        //   }
-        // }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            // Extract total_data from first record, or fallback to total_limit or rows
-            const totalData = response.data?.[0]?.total_data || response.paging.total_limit || response.rows || response.data?.length || 0;
-
-            // Use total_limit as total count, handle 0 values for page/limit
-            const currentPage = response.paging.current_page || 1;
-            const currentLimit = response.paging.current_limit || 10;
-            const totalPages = response.paging.total_page || Math.ceil(totalData / currentLimit);
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: currentPage,
-                        limit: currentLimit,
-                        total: totalData,
-                        page_total: totalPages
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination (old behavior)
-        const parsedParams = Object.fromEntries(params);
-        const currentPage = parseInt(parsedParams.page) || 1;
-        const currentLimit = parseInt(parsedParams.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllPlantSection error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getPlantSectionById = async (id) => {
@@ -99,6 +14,7 @@ const getPlantSectionById = async (id) => {
         method: 'get',
         prefix: `plant-sub-section/${id}`,
     });
+
     return response.data;
 };
 
@@ -108,80 +24,33 @@ const createPlantSection = async (queryParams) => {
         prefix: `plant-sub-section`,
         params: queryParams,
     });
-    console.log('createPlantSection full response:', response);
-    console.log('createPlantSection payload sent:', queryParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [plantSection_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const updatePlantSection = async (plant_section_id, queryParams) => {
+const updatePlantSection = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `plant-sub-section/${plant_section_id}`,
+        prefix: `plant-sub-section/${id}`,
         params: queryParams,
     });
-    console.log('updatePlantSection full response:', response);
-    console.log('updatePlantSection payload sent:', queryParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [plantSection_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const deletePlantSection = async (queryParams) => {
+const deletePlantSection = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `plant-sub-section/${queryParams}`,
+        prefix: `plant-sub-section/${id}`,
     });
-    console.log('deletePlantSection full response:', response);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows: null, data: true }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-export { getAllPlantSection, getPlantSectionById, createPlantSection, updatePlantSection, deletePlantSection };
+export {
+    getAllPlantSection,
+    getPlantSectionById,
+    createPlantSection,
+    updatePlantSection,
+    deletePlantSection,
+};

src/api/master-shift.jsx

@@ -1,95 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllShift = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `shift?${queryParams.toString()}`,
-            prefix: `shift?${queryParams.toString()}`,
+    });
-        });
-        console.log('getAllShift response:', response);
-        console.log('Query params:', queryParams.toString());
 
-        // Check if response has error
+    return response.data;
-        if (response.error) {
-            console.error('getAllShift error response:', response);
-            return {
-                status: response.statusCode || 500,
-                data: {
-                    data: [],
-                    paging: {
-                        page: 1,
-                        limit: 10,
-                        total: 0,
-                        page_total: 0
-                    },
-                    total: 0
-                },
-                error: response.message
-            };
-        }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: response.paging.current_page || 1,
-                        limit: response.paging.current_limit || 10,
-                        total: totalData,
-                        page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllShift catch error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getShiftById = async (id) => {
@@ -97,6 +14,7 @@ const getShiftById = async (id) => {
         method: 'get',
         prefix: `shift/${id}`,
     });
+
     return response.data;
 };
 
@@ -106,26 +24,8 @@ const createShift = async (queryParams) => {
         prefix: `shift`,
         params: queryParams,
     });
-    console.log('createShift full response:', response);
-    console.log('createShift payload sent:', queryParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [shift_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 const updateShift = async (id, queryParams) => {
@@ -134,26 +34,8 @@ const updateShift = async (id, queryParams) => {
         prefix: `shift/${id}`,
         params: queryParams,
     });
-    console.log('updateShift full response:', response);
-    console.log('updateShift payload sent:', queryParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [shift_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 const deleteShift = async (id) => {
@@ -161,25 +43,8 @@ const deleteShift = async (id) => {
         method: 'delete',
         prefix: `shift/${id}`,
     });
-    console.log('deleteShift full response:', response);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows: null, data: true }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 export { getAllShift, getShiftById, createShift, updateShift, deleteShift };

src/api/master-status.jsx

@@ -1,89 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
-const getAllStatus = async (queryParams) => {
+const getAllStatuss = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `status?${queryParams.toString()}`,
-            prefix: `status?${queryParams.toString()}`,
+    });
-        });
 
-        if (response.error) {
+    return response.data;
-            console.error('getAllStatus error response:', response);
-            return {
-                status: response.statusCode || 500,
-                data: {
-                    data: [],
-                    paging: {
-                        page: 1,
-                        limit: 10,
-                        total: 0,
-                        page_total: 0
-                    },
-                    total: 0
-                },
-                error: response.message
-            };
-        }
-
-        if (response.paging) {
-            const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: response.paging.current_page || 1,
-                        limit: response.paging.current_limit || 10,
-                        total: totalData,
-                        page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllStatus catch error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getStatusById = async (id) => {
@@ -91,6 +14,7 @@ const getStatusById = async (id) => {
         method: 'get',
         prefix: `status/${id}`,
     });
+
     return response.data;
 };
 
@@ -101,68 +25,26 @@ const createStatus = async (queryParams) => {
         params: queryParams,
     });
 
-    if (response.error) {
+    return response.data;
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const updateStatus = async (status_id, queryParams) => {
+const updateStatus = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `status/${status_id}`,
+        prefix: `status/${id}`,
         params: queryParams,
     });
 
-    if (response.error) {
+    return response.data;
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const deleteStatus = async (queryParams) => {
+const deleteStatus = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `status/${queryParams}`,
+        prefix: `status/${id}`,
     });
 
-    if (response.error) {
+    return response.data;
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-export { getAllStatus, getStatusById, createStatus, updateStatus, deleteStatus };
+export { getAllStatuss, getStatusById, createStatus, updateStatus, deleteStatus };

src/api/master-tag.jsx

@@ -1,93 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllTag = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `tags?${queryParams.toString()}`,
-            prefix: `tags?${queryParams.toString()}`,
+    });
-        });
 
-        // Check if response has error
+    return response.data;
-        if (response.error) {
-            console.error('getAllTag error response:', response);
-            return {
-                status: response.statusCode || 500,
-                data: {
-                    data: [],
-                    paging: {
-                        page: 1,
-                        limit: 10,
-                        total: 0,
-                        page_total: 0
-                    },
-                    total: 0
-                },
-                error: response.message
-            };
-        }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: response.paging.current_page || 1,
-                        limit: response.paging.current_limit || 10,
-                        total: totalData,
-                        page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination (old behavior)
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllTag catch error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getTagById = async (id) => {
@@ -95,6 +14,7 @@ const getTagById = async (id) => {
         method: 'get',
         prefix: `tags/${id}`,
     });
+
     return response.data;
 };
 
@@ -105,74 +25,26 @@ const createTag = async (queryParams) => {
         params: queryParams,
     });
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [tag_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const updateTag = async (tag_id, queryParams) => {
+const updateTag = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `tags/${tag_id}`,
+        prefix: `tags/${id}`,
         params: queryParams,
     });
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [tag_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const deleteTag = async (queryParams) => {
+const deleteTag = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `tags/${queryParams}`,
+        prefix: `tags/${id}`,
     });
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows: null, data: true }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 export { getAllTag, getTagById, createTag, updateTag, deleteTag };

src/api/master-unit.jsx

@@ -1,95 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllUnit = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `unit?${queryParams.toString()}`,
-            prefix: `unit?${queryParams.toString()}`,
+    });
-        });
-        console.log('getAllUnit response:', response);
-        console.log('Query params:', queryParams.toString());
 
-        // Check if response has error
+    return response.data;
-        if (response.error) {
-            console.error('getAllUnit error response:', response);
-            return {
-                status: response.statusCode || 500,
-                data: {
-                    data: [],
-                    paging: {
-                        page: 1,
-                        limit: 10,
-                        total: 0,
-                        page_total: 0
-                    },
-                    total: 0
-                },
-                error: response.message
-            };
-        }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: {
-                        page: response.paging.current_page || 1,
-                        limit: response.paging.current_limit || 10,
-                        total: totalData,
-                        page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
-                    },
-                    total: totalData
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllUnit catch error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getUnitById = async (id) => {
@@ -97,101 +14,37 @@ const getUnitById = async (id) => {
         method: 'get',
         prefix: `unit/${id}`,
     });
+
     return response.data;
 };
 
 const createUnit = async (queryParams) => {
-    // Map frontend fields to backend fields
-    const backendParams = {
-        unit_name: queryParams.name,
-        is_active: queryParams.is_active,
-    };
-
     const response = await SendRequest({
         method: 'post',
         prefix: `unit`,
-        params: backendParams,
+        params: queryParams,
     });
-    console.log('createUnit full response:', response);
-    console.log('createUnit payload sent:', backendParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [unit_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const updateUnit = async (unit_id, queryParams) => {
+const updateUnit = async (id, queryParams) => {
-    // Map frontend fields to backend fields
-    const backendParams = {
-        unit_name: queryParams.name,
-        is_active: queryParams.is_active,
-    };
-
     const response = await SendRequest({
         method: 'put',
-        prefix: `unit/${unit_id}`,
+        prefix: `unit/${id}`,
-        params: backendParams,
+        params: queryParams,
     });
-    console.log('updateUnit full response:', response);
-    console.log('updateUnit payload sent:', backendParams);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows, data: [unit_object] }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data?.[0] || response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
-const deleteUnit = async (queryParams) => {
+const deleteUnit = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `unit/${queryParams}`,
+        prefix: `unit/${id}`,
     });
-    console.log('deleteUnit full response:', response);
 
-    // Check if response has error flag
+    return response.data;
-    if (response.error) {
-        return {
-            statusCode: response.statusCode || 500,
-            data: null,
-            message: response.message || 'Request failed',
-            rows: 0
-        };
-    }
-
-    // Backend returns: { statusCode, message, rows: null, data: true }
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-        rows: response.rows
-    };
 };
 
 export { getAllUnit, getUnitById, createUnit, updateUnit, deleteUnit };

src/api/notification.jsx

@@ -0,0 +1,95 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllNotification = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `notification?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getNotificationById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `notification/${id}`,
+    });
+
+    return response.data;
+};
+
+const getNotificationDetail = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `notification/${id}`,
+    });
+
+    return response.data;
+};
+
+// Create new notification log
+const createNotificationLog = async (data) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: 'notification-log',
+        params: data,
+    });
+    return response.data;
+};
+
+// Get notification logs by notification_error_id
+const getNotificationLogByNotificationId = async (notificationId) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `notification-log/notification_error/${notificationId}`,
+    });
+    return response.data;
+};
+
+// update is_read status
+const updateIsRead = async (notificationId) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `notification/${notificationId}`,
+    });
+    return response.data;
+};
+
+// Resend notification to specific user
+const resendNotificationToUser = async (notificationId, userId) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `notification/${notificationId}/resend/${userId}`,
+    });
+    return response.data;
+};
+
+// Resend Chat by User
+const resendChatByUser = async (notificationId, userPhone) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `notification-user/resend/${notificationId}/${userPhone}`,
+    });
+    return response.data;
+};
+
+// Resend Chat All User
+const resendChatAllUser = async (notificationId) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `notification/resend/${notificationId}`,
+    });
+    return response.data;
+};
+
+export {
+    getAllNotification,
+    getNotificationById,
+    getNotificationDetail,
+    createNotificationLog,
+    getNotificationLogByNotificationId,
+    updateIsRead,
+    resendNotificationToUser,
+    resendChatByUser,
+    resendChatAllUser,
+};

src/api/role.jsx

@@ -1,70 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllRole = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        const response = await SendRequest({
+        method: 'get',
-            method: 'get',
+        prefix: `roles?${queryParams.toString()}`,
-            prefix: `roles?${queryParams.toString()}`,
+    });
-        });
 
-        console.log('Role API Response:', response);
+    return response.data;
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            // Backend already provides pagination info
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: response.data || [],
-                    paging: response.paging,
-                    total: response.paging.total || 0
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-        const totalData = allData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = allData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit),
-                },
-                total: totalData,
-            },
-        };
-    } catch (error) {
-        console.error('getAllRole error:', error);
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getRoleById = async (id) => {
@@ -72,6 +14,7 @@ const getRoleById = async (id) => {
         method: 'get',
         prefix: `roles/${id}`,
     });
+
     return response.data;
 };
 
@@ -82,107 +25,26 @@ const createRole = async (queryParams) => {
         params: queryParams,
     });
 
-    console.log('Create Role API Response:', response);
+    return response.data;
-
-    // Check for error status (not 200, 201, or success)
-    const isSuccess =
-        response.statusCode === 200 || response.statusCode === 201 || response.status === 'success';
-
-    if (!isSuccess && response.statusCode >= 400) {
-        let errorMessage = response.message || 'Gagal menambahkan role';
-
-        // Handle SQL unique constraint violation
-        if (
-            errorMessage.includes('UNIQUE KEY constraint') ||
-            errorMessage.includes('duplicate key')
-        ) {
-            errorMessage = `Role dengan nama "${queryParams.role_name}" sudah ada. Silakan gunakan nama lain.`;
-        }
-
-        return {
-            statusCode: response.statusCode,
-            data: response.data,
-            message: errorMessage,
-        };
-    }
-
-    // Return full response with statusCode
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message || 'Berhasil menambahkan role',
-    };
 };
 
-const updateRole = async (role_id, queryParams) => {
+const updateRole = async (id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `roles/${role_id}`,
+        prefix: `roles/${id}`,
         params: queryParams,
     });
 
-    console.log('Update Role API Response:', response);
+    return response.data;
-
-    // Check for error status (not 200, 201, or success)
-    const isSuccess =
-        response.statusCode === 200 || response.statusCode === 201 || response.status === 'success';
-
-    if (!isSuccess && response.statusCode >= 400) {
-        let errorMessage = response.message || 'Gagal mengubah role';
-
-        // Handle SQL unique constraint violation
-        if (
-            errorMessage.includes('UNIQUE KEY constraint') ||
-            errorMessage.includes('duplicate key')
-        ) {
-            errorMessage = `Role dengan nama "${queryParams.role_name}" sudah ada. Silakan gunakan nama lain.`;
-        }
-
-        return {
-            statusCode: response.statusCode,
-            data: response.data,
-            message: errorMessage,
-        };
-    }
-
-    // Return full response with statusCode
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message || 'Berhasil mengubah role',
-    };
 };
 
-const deleteRole = async (queryParams) => {
+const deleteRole = async (id) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `roles/${queryParams}`,
+        prefix: `roles/${id}`,
     });
 
-    console.log('Delete API Response:', response);
+    return response.data;
-
-    // Check for errors
-    if (response.statusCode !== 200) {
-        let errorMessage = response.message || 'Gagal menghapus role';
-
-        // Handle foreign key constraint
-        if (errorMessage.includes('REFERENCE constraint') || errorMessage.includes('foreign key')) {
-            errorMessage = 'Role tidak dapat dihapus karena masih digunakan oleh user.';
-        }
-
-        return {
-            statusCode: response.statusCode,
-            data: response.data,
-            message: errorMessage,
-        };
-    }
-
-    // Return full response with statusCode
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message,
-    };
 };
 
 export { getAllRole, getRoleById, createRole, updateRole, deleteRole };

src/api/sparepart.jsx

@@ -0,0 +1,50 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllSparepart = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `sparepart?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getSparepartById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `sparepart/${id}`,
+    });
+
+    return response.data;
+};
+
+const createSparepart = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `sparepart`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const updateSparepart = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `sparepart/${id}`,
+        params: queryParams,
+    });
+
+    return response.data;
+};
+
+const deleteSparepart = async (id) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `sparepart/${id}`,
+    });
+
+    return response.data;
+};
+
+export { getAllSparepart, getSparepartById, createSparepart, updateSparepart, deleteSparepart };

src/api/user-admin.jsx

@@ -1,15 +1,11 @@
-// user-admin.jsx
-import axios from 'axios';
 import { SendRequest } from '../components/Global/ApiRequest';
 
-const baseURL = import.meta.env.VITE_API_SERVER;
-
 const getAllUser = async (queryParams) => {
     const response = await SendRequest({
         method: 'get',
         prefix: `admin-user?${queryParams.toString()}`,
     });
-    return response;
+    return response.data;
 };
 
 const getUserDetail = async (id) => {
@@ -17,7 +13,7 @@ const getUserDetail = async (id) => {
         method: 'get',
         prefix: `admin-user/${id}`,
     });
-    return response;
+    return response.data;
 };
 
 const updateUser = async (id, data) => {
@@ -26,7 +22,7 @@ const updateUser = async (id, data) => {
         prefix: `admin-user/${id}`,
         params: data,
     });
-    return response;
+    return response.data;
 };
 
 const deleteUser = async (id) => {
@@ -34,7 +30,7 @@ const deleteUser = async (id) => {
         method: 'delete',
         prefix: `admin-user/${id}`,
     });
-    return response;
+    return response.data;
 };
 
 const approvalUser = async (id, queryParams) => {
@@ -43,42 +39,7 @@ const approvalUser = async (id, queryParams) => {
         prefix: `admin-user/approve/${id}`,
         params: queryParams,
     });
-    return response;
+    return response.data;
 };
 
-const uploadFile = async (formData) => {
+export { getAllUser, getUserDetail, updateUser, deleteUser, approvalUser };
-    try {
-        const token = localStorage.getItem('token')?.replace(/"/g, '') || '';
-        const url = `${baseURL}/file-upload`;
-
-        const response = await axios.post(url, formData, {
-            headers: {
-                Authorization: `Bearer ${token}`,
-                'Accept-Language': 'en_US',
-                'Content-Type': 'multipart/form-data',
-            },
-        });
-
-        return {
-            statusCode: response.data?.statusCode ?? 0,
-            message: response.data?.message ?? '',
-            data: response.data?.data ?? {},
-        };
-    } catch (error) {
-        console.error('❌ ERROR di uploadFile:', error);
-        return {
-            statusCode: error?.response?.status || 500,
-            message: error?.response?.data?.message || 'Upload gagal',
-            data: {},
-        };
-    }
-};
-
-
-
-
-
-
-
-
-export { getAllUser, getUserDetail, updateUser, deleteUser, approvalUser, uploadFile };

src/api/user.jsx

@@ -1,97 +1,12 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllUser = async (queryParams) => {
-    try {
+    const response = await SendRequest({
-        console.log('getAllUser queryParams:', queryParams.toString());
+        method: 'get',
+        prefix: `user?${queryParams.toString()}`,
+    });
 
-        const response = await SendRequest({
+    return response.data;
-            method: 'get',
-            prefix: `user?${queryParams.toString()}`,
-        });
-
-        console.log('getAllUser response:', response);
-
-        // Backend now handles pagination, just return the response
-        // Expected backend response structure:
-        // {
-        //   statusCode: 200,
-        //   data: [...users],
-        //   paging: { page, limit, total, page_total }
-        // }
-
-        // Check if backend returns paginated data
-        if (response.paging) {
-            // Filter out super admin users (is_sa = true)
-            const allData = response.data || [];
-            const filteredData = allData.filter(user => user.is_sa !== true && user.is_sa !== 1);
-
-            // Recalculate pagination info after filtering
-            const totalAfterFilter = filteredData.length;
-            const currentPage = response.paging.page || 1;
-            const currentLimit = response.paging.limit || 10;
-
-            return {
-                status: response.statusCode || 200,
-                data: {
-                    data: filteredData,
-                    paging: {
-                        page: currentPage,
-                        limit: currentLimit,
-                        total: totalAfterFilter,
-                        page_total: Math.ceil(totalAfterFilter / currentLimit)
-                    },
-                    total: totalAfterFilter
-                }
-            };
-        }
-
-        // Fallback: If backend returns all data without pagination (old behavior)
-        const params = Object.fromEntries(queryParams);
-        const currentPage = parseInt(params.page) || 1;
-        const currentLimit = parseInt(params.limit) || 10;
-
-        const allData = response.data || [];
-
-        // Filter out users with is_sa = true or 1 (client-side filtering)
-        const filteredData = allData.filter(user => user.is_sa !== true && user.is_sa !== 1);
-        const totalData = filteredData.length;
-
-        // Client-side pagination
-        const startIndex = (currentPage - 1) * currentLimit;
-        const endIndex = startIndex + currentLimit;
-        const paginatedData = filteredData.slice(startIndex, endIndex);
-
-        return {
-            status: response.statusCode || 200,
-            data: {
-                data: paginatedData,
-                paging: {
-                    page: currentPage,
-                    limit: currentLimit,
-                    total: totalData,
-                    page_total: Math.ceil(totalData / currentLimit)
-                },
-                total: totalData
-            }
-        };
-    } catch (error) {
-        console.error('getAllUser error:', error);
-        // Return empty data on error to prevent app crash
-        return {
-            status: 500,
-            data: {
-                data: [],
-                paging: {
-                    page: 1,
-                    limit: 10,
-                    total: 0,
-                    page_total: 0
-                },
-                total: 0
-            },
-            error: error.message
-        };
-    }
 };
 
 const getUserById = async (id) => {
@@ -99,6 +14,7 @@ const getUserById = async (id) => {
         method: 'get',
         prefix: `user/${id}`,
     });
+
     return response.data;
 };
 
@@ -108,12 +24,8 @@ const createUser = async (queryParams) => {
         prefix: `user`,
         params: queryParams,
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const updateUser = async (user_id, queryParams) => {
@@ -122,12 +34,8 @@ const updateUser = async (user_id, queryParams) => {
         prefix: `user/${user_id}`,
         params: queryParams,
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const deleteUser = async (queryParams) => {
@@ -135,12 +43,8 @@ const deleteUser = async (queryParams) => {
         method: 'delete',
         prefix: `user/${queryParams}`,
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const approveUser = async (user_id) => {
@@ -148,12 +52,8 @@ const approveUser = async (user_id) => {
         method: 'put',
         prefix: `user/${user_id}/approve`,
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const rejectUser = async (user_id) => {
@@ -161,12 +61,8 @@ const rejectUser = async (user_id) => {
         method: 'put',
         prefix: `user/${user_id}/reject`,
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const toggleActiveUser = async (user_id, is_active) => {
@@ -174,15 +70,11 @@ const toggleActiveUser = async (user_id, is_active) => {
         method: 'put',
         prefix: `user/${user_id}`,
         params: {
-            is_active: is_active
+            is_active: is_active,
         },
     });
-    // Return full response with statusCode
+
-    return {
+    return response.data;
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message
-    };
 };
 
 const changePassword = async (user_id, new_password) => {
@@ -190,18 +82,21 @@ const changePassword = async (user_id, new_password) => {
         method: 'put',
         prefix: `user/change-password/${user_id}`,
         params: {
-            new_password: new_password
+            new_password: new_password,
         },
     });
 
-    console.log('Change Password Response:', response);
+    return response.data;
-
-    // Return full response with statusCode
-    return {
-        statusCode: response.statusCode || 200,
-        data: response.data,
-        message: response.message || 'Password berhasil diubah'
-    };
 };
 
-export { getAllUser, getUserById, createUser, updateUser, deleteUser, approveUser, rejectUser, toggleActiveUser, changePassword };
+export {
+    getAllUser,
+    getUserById,
+    createUser,
+    updateUser,
+    deleteUser,
+    approveUser,
+    rejectUser,
+    toggleActiveUser,
+    changePassword,
+};

src/assets/svg/air_dryer_A_rev.svg

@@ -26,27 +26,29 @@
     <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
   </g>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
-  <g transform="matrix(0.826913, 0, 0, 0.698383, 0.443817, 3.138935)">
+  <g>
-    <rect x="752" y="355.455" width="42.438" height="3.527" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <rect x="756.328" y="359.271" width="34.034" height="53.968" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <g>
-    <rect x="756.146" y="352.019" width="34.034" height="3.38" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+      <rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="773.446" cy="384.7" rx="11.751" ry="11.009"/>
+      <rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
+      <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
+    </g>
   </g>
   <rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
   <rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="Dry1_HeatTempCelsius">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
@@ -108,12 +110,12 @@
   <rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
   <rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
   <g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
@@ -177,17 +179,17 @@
   <rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
   <rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
   <rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
   <rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
@@ -205,15 +207,15 @@
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
   <rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
   <rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">##</text>
+  
   <rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
   <rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
@@ -227,12 +229,33 @@
   <rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="334.165" cy="232.104" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_4021"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.502" cy="233.796" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT A (01-CL-10532-A)</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4005">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4004">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4001">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4002">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4003">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4009">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4010">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4011">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4008">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4007">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4006">##</text>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_4018"/>
+  <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_4019"/>
+  <ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_4016"/>
+  <ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_4017"/>
+  <ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_4020"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_4018"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_4021"/>
 </svg>

src/assets/svg/air_dryer_B_rev.svg

@@ -3,7 +3,7 @@
   <defs>
     <bx:grid x="0" y="0" width="25" height="25"/>
   </defs>
-  <rect y="10.407" width="972.648" height="439.023" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
+  <rect y="10.407" width="972.648" height="440.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
   <g transform="matrix(0.826913, 0, 0, 0.698383, 74.03907, 53.375034)">
     <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
     <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
@@ -26,27 +26,26 @@
     <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
   </g>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
-  <g transform="matrix(0.826913, 0, 0, 0.698383, 0.443817, 3.138935)">
+  <g>
-    <rect x="752" y="355.455" width="42.438" height="3.527" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <rect x="756.328" y="359.271" width="34.034" height="53.968" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <g>
-    <rect x="756.146" y="352.019" width="34.034" height="3.38" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+      <rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="773.446" cy="384.7" rx="11.751" ry="11.009"/>
+      <rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
+      <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
+    </g>
   </g>
   <rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
   <rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="Dry1_HeatTempCelsius">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
@@ -108,12 +107,10 @@
   <rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
   <rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
   <g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
@@ -177,17 +174,14 @@
   <rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
   <rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
   <rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
   <rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
@@ -205,15 +199,12 @@
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
   <rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
   <rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">##</text>
   <rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
   <rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
@@ -227,12 +218,33 @@
   <rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="334.165" cy="232.104" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.502" cy="233.796" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT B (01-CL-10535-B)</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5005">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5004">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5001">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5002">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5003">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5009">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5010">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5011">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5008">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5007">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5006">##</text>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_5018"/>
+  <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_5019"/>
+  <ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_5016"/>
+  <ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_5017"/>
+  <ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_5020"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_5021"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_5018"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_5021"/>
 </svg>

src/assets/svg/air_dryer_C_rev.svg

@@ -3,7 +3,7 @@
   <defs>
     <bx:grid x="0" y="0" width="25" height="25"/>
   </defs>
-  <rect y="10.407" width="972.648" height="439.023" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
+  <rect y="10.407" width="972.648" height="440.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
   <g transform="matrix(0.826913, 0, 0, 0.698383, 74.03907, 53.375034)">
     <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
     <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
@@ -26,27 +26,26 @@
     <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
   </g>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
-  <g transform="matrix(0.826913, 0, 0, 0.698383, 0.443817, 3.138935)">
+  <g>
-    <rect x="752" y="355.455" width="42.438" height="3.527" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <rect x="756.328" y="359.271" width="34.034" height="53.968" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+    <g>
-    <rect x="756.146" y="352.019" width="34.034" height="3.38" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);"/>
+      <rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
-    <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="773.446" cy="384.7" rx="11.751" ry="11.009"/>
+      <rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
+      <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
+    </g>
   </g>
   <rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
   <rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="Dry1_HeatTempCelsius">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
   <rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
   <path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
@@ -108,12 +107,10 @@
   <rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
   <rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
   <rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
   <g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
@@ -177,17 +174,14 @@
   <rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
   <rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
   <rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
   <rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
   <rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
@@ -205,15 +199,12 @@
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
   <rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
   <rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
   <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
-  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">##</text>
   <rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
   <rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
@@ -227,12 +218,34 @@
   <rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="334.165" cy="232.104" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
+  
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.502" cy="233.796" rx="13.582" ry="12.517"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
   <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
   <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT C (01-CL-10539-C)</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6005">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6004">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6001">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6002">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6003">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6009">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6010">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6011">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6008">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6007">####.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6006">##</text>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_6018"/>
+  <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_6019"/>
+  <ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_6016"/>
+  <ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_6017"/>
+  <ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_6020"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_6018"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_6021"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_6021"/>
 </svg>

src/assets/svg/overview-airdryer.svg

@@ -0,0 +1,443 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" viewBox="0 0 950 500">
+  <defs>
+    <bx:grid x="0" y="0" width="25" height="25"/>
+  </defs>
+  <rect x="12.226" y="12.005" width="924.818" height="476.396" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <rect x="25" y="75" width="900" height="400" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
+  <rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
+  <g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
+    <path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 433.101 105.475 L 433.101 57.586 L 441.571 57.586 L 441.571 105.475 L 433.101 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 420.411 105.475 L 420.411 57.586 L 428.871 57.586 L 428.871 105.475 L 420.411 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 407.721 105.475 L 407.721 57.586 L 416.181 57.586 L 416.181 105.475 L 407.721 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 395.021 105.475 L 395.021 57.586 L 403.481 57.586 L 403.481 105.475 L 395.021 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 382.221 105.475 L 382.221 57.586 L 390.791 57.586 L 390.791 105.475 L 382.221 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 369.521 105.475 L 369.521 57.586 L 377.991 57.586 L 377.991 105.475 L 369.521 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 81.579 L 371.641 76.064 L 375.871 76.064 L 375.871 81.579 L 371.641 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.531 94.446 L 371.531 88.931 L 375.871 88.931 L 375.871 94.446 L 371.531 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 87.093 L 371.641 83.417 L 375.981 83.417 L 375.981 87.093 L 371.641 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 99.96 L 371.641 96.284 L 375.871 96.284 L 375.871 99.96 L 371.641 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 81.579 L 384.331 76.064 L 388.561 76.064 L 388.561 81.579 L 384.331 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 94.446 L 384.331 88.931 L 388.561 88.931 L 388.561 94.446 L 384.331 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 87.093 L 384.331 83.417 L 388.671 83.417 L 388.671 87.093 L 384.331 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 99.96 L 384.331 96.284 L 388.561 96.284 L 388.561 99.96 L 384.331 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 81.579 L 397.031 76.064 L 401.371 76.064 L 401.371 81.579 L 397.031 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 94.446 L 397.031 88.931 L 401.261 88.931 L 401.261 94.446 L 397.031 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.141 87.093 L 397.141 83.417 L 401.371 83.417 L 401.371 87.093 L 397.141 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 99.96 L 397.031 96.284 L 401.371 96.284 L 401.371 99.96 L 397.031 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 105.475 L 385.451 101.798 L 387.561 101.798 L 387.561 105.475 L 385.451 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 105.475 L 372.751 101.798 L 374.871 101.798 L 374.871 105.475 L 372.751 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 61.262 L 372.751 57.586 L 374.871 57.586 L 374.871 61.262 L 372.751 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 61.262 L 385.451 57.586 L 387.561 57.586 L 387.561 61.262 L 385.451 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 61.262 L 398.141 57.586 L 400.261 57.586 L 400.261 61.262 L 398.141 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 105.475 L 398.141 101.798 L 400.261 101.798 L 400.261 105.475 L 398.141 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 80.611 L 451.141 80.611 L 451.141 82.449 L 449.031 82.449 L 449.031 80.611 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 76.935 L 451.141 76.935 L 451.141 78.87 L 449.031 78.87 L 449.031 76.935 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 84.287 L 451.141 84.287 L 451.141 86.126 L 449.031 86.126 L 449.031 84.287 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 73.258 L 451.141 73.258 L 451.141 75.097 L 449.031 75.097 L 449.031 73.258 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 87.964 L 451.141 87.964 L 451.141 89.802 L 449.031 89.802 L 449.031 87.964 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 69.582 L 451.141 69.582 L 451.141 71.42 L 449.031 71.42 L 449.031 69.582 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 91.64 L 451.141 91.64 L 451.141 93.478 L 449.031 93.478 L 449.031 91.64 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 80.611 L 438.451 80.611 L 438.451 82.449 L 436.331 82.449 L 436.331 80.611 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 76.935 L 438.451 76.935 L 438.451 78.87 L 436.331 78.87 L 436.331 76.935 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 84.287 L 438.451 84.287 L 438.451 86.126 L 436.331 86.126 L 436.331 84.287 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 73.258 L 438.451 73.258 L 438.451 75.097 L 436.331 75.097 L 436.331 73.258 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 87.964 L 438.451 87.964 L 438.451 89.802 L 436.331 89.802 L 436.331 87.964 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 69.582 L 438.451 69.582 L 438.451 71.42 L 436.331 71.42 L 436.331 69.582 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 91.64 L 438.451 91.64 L 438.451 93.478 L 436.331 93.478 L 436.331 91.64 Z"/>
+    <path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
+    <path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
+  </g>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">AirDryer A</text>
+  <rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
+  <rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">AirDryer B</text>
+  <rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
+  <rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">AirDryer C</text>
+  <rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 125 L 350 125 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 250 L 350 250 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 375 L 350 375 L 350 275 L 400 275"/>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
+    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
+    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
+  </g>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 400 L 725 400"/>
+  <rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="425.352" y="167.628">PLC AirDryer</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.3</text>
+  <rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, 99.999998)" style="">
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
+    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
+    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
+  </g>
+  <rect x="724.832" y="299.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725" y="325" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="317.628">PC Server</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3.000031, 24.863983)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em">​</tspan></text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="316.458" y="50.984">OVERVIEW AIR DRYER</text>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 475"/>
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1058.006891, 44.212168)" style="">
+    <g id="Group_Base" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504   V98.984H71.957z"/>
+    </g>
+    <g id="Group_Supports" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338   l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563   l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339   l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338   l-0.338,0.338L56.191,102.363z"/>
+    </g>
+    <g id="Group_Pipes" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_1_)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
+      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_2_)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
+      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
+      <path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
+      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
+      <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_5_)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
+      <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#SVGID_6_)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563   l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449   l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
+    </g>
+    <g id="Group_Column2" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#SVGID_7_)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378   C25.176,10.25,26.914,13.628,26.914,13.628"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378   C25.442,10.25,26.914,13.628,26.914,13.628z"/>
+    </g>
+    <g id="Group_Column1" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#SVGID_8_)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52   C61.661,10.108,62.948,13.628,62.948,13.628z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52   C61.589,10.108,62.948,13.628,62.948,13.628z"/>
+    </g>
+    <g id="Group_Boards" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
+      <path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
+    </g>
+    <g id="Group_Points" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
+    </g>
+    <g id="Group_Connectors" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
+    </g>
+  </g>
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1061.049982, 169.212228)" style="">
+    <g id="group-1" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504   V98.984H71.957z"/>
+    </g>
+    <g id="group-2" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338   l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563   l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339   l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338   l-0.338,0.338L56.191,102.363z"/>
+    </g>
+    <g id="group-3" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-1" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-1)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
+      <linearGradient id="gradient-2" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-2)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
+      <linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-3)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
+      <path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
+      <linearGradient id="gradient-4" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-4)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
+      <linearGradient id="gradient-5" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-5)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
+      <linearGradient id="gradient-6" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-6)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563   l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449   l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
+    </g>
+    <g id="group-4" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-7" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#gradient-7)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378   C25.176,10.25,26.914,13.628,26.914,13.628"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378   C25.442,10.25,26.914,13.628,26.914,13.628z"/>
+    </g>
+    <g id="group-5" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-8" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#gradient-8)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52   C61.661,10.108,62.948,13.628,62.948,13.628z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52   C61.589,10.108,62.948,13.628,62.948,13.628z"/>
+    </g>
+    <g id="group-6" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
+      <path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
+    </g>
+    <g id="group-7" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
+    </g>
+    <g id="group-8" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
+    </g>
+  </g>
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1061.04986, 294.212174)" style="">
+    <g id="group-9" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504   V98.984H71.957z"/>
+    </g>
+    <g id="group-10" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338   l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563   l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339   l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338   l-0.338,0.338L56.191,102.363z"/>
+    </g>
+    <g id="group-11" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-9" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-9)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
+      <linearGradient id="gradient-10" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-10)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
+      <linearGradient id="gradient-11" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-11)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
+      <path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
+      <linearGradient id="gradient-12" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-12)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
+      <linearGradient id="gradient-13" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-13)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
+      <linearGradient id="gradient-14" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#999999"/>
+        <stop offset="0.5" style="stop-color:#CCCCCC"/>
+        <stop offset="1" style="stop-color:#999999"/>
+      </linearGradient>
+      <path fill="url(#gradient-14)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563   l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449   l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
+    </g>
+    <g id="group-12" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-15" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#gradient-15)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378   C25.176,10.25,26.914,13.628,26.914,13.628"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378   C25.442,10.25,26.914,13.628,26.914,13.628z"/>
+    </g>
+    <g id="group-13" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <linearGradient id="gradient-16" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
+        <stop offset="0" style="stop-color:#B2B2B2"/>
+        <stop offset="0.5" style="stop-color:#E5E5E5"/>
+        <stop offset="1" style="stop-color:#B2B2B2"/>
+      </linearGradient>
+      <path fill="url(#gradient-16)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52   C61.661,10.108,62.948,13.628,62.948,13.628z"/>
+      <path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52   C61.589,10.108,62.948,13.628,62.948,13.628z"/>
+    </g>
+    <g id="group-14" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
+      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
+      <path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
+    </g>
+    <g id="group-15" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
+      <path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
+      <path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
+    </g>
+    <g id="group-16" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
+      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
+    </g>
+  </g>
+</svg>

src/assets/svg/overview-compressor.svg

@@ -0,0 +1,251 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" viewBox="0 0 950 500">
+  <defs>
+    <bx:grid x="0" y="0" width="25" height="25"/>
+  </defs>
+  <rect x="12.226" y="12.005" width="924.818" height="462.995" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <rect x="25" y="75" width="900" height="375" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
+  <rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678418, 46.611243)" style="">
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
+    <path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
+    <path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
+    <path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
+    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
+  </g>
+  <g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
+    <path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 433.101 105.475 L 433.101 57.586 L 441.571 57.586 L 441.571 105.475 L 433.101 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 420.411 105.475 L 420.411 57.586 L 428.871 57.586 L 428.871 105.475 L 420.411 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 407.721 105.475 L 407.721 57.586 L 416.181 57.586 L 416.181 105.475 L 407.721 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 395.021 105.475 L 395.021 57.586 L 403.481 57.586 L 403.481 105.475 L 395.021 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 382.221 105.475 L 382.221 57.586 L 390.791 57.586 L 390.791 105.475 L 382.221 105.475 Z"/>
+    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 369.521 105.475 L 369.521 57.586 L 377.991 57.586 L 377.991 105.475 L 369.521 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 81.579 L 371.641 76.064 L 375.871 76.064 L 375.871 81.579 L 371.641 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.531 94.446 L 371.531 88.931 L 375.871 88.931 L 375.871 94.446 L 371.531 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 87.093 L 371.641 83.417 L 375.981 83.417 L 375.981 87.093 L 371.641 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 99.96 L 371.641 96.284 L 375.871 96.284 L 375.871 99.96 L 371.641 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 81.579 L 384.331 76.064 L 388.561 76.064 L 388.561 81.579 L 384.331 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 94.446 L 384.331 88.931 L 388.561 88.931 L 388.561 94.446 L 384.331 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 87.093 L 384.331 83.417 L 388.671 83.417 L 388.671 87.093 L 384.331 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 99.96 L 384.331 96.284 L 388.561 96.284 L 388.561 99.96 L 384.331 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 81.579 L 397.031 76.064 L 401.371 76.064 L 401.371 81.579 L 397.031 81.579 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 94.446 L 397.031 88.931 L 401.261 88.931 L 401.261 94.446 L 397.031 94.446 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.141 87.093 L 397.141 83.417 L 401.371 83.417 L 401.371 87.093 L 397.141 87.093 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 99.96 L 397.031 96.284 L 401.371 96.284 L 401.371 99.96 L 397.031 99.96 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 105.475 L 385.451 101.798 L 387.561 101.798 L 387.561 105.475 L 385.451 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 105.475 L 372.751 101.798 L 374.871 101.798 L 374.871 105.475 L 372.751 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 61.262 L 372.751 57.586 L 374.871 57.586 L 374.871 61.262 L 372.751 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 61.262 L 385.451 57.586 L 387.561 57.586 L 387.561 61.262 L 385.451 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 61.262 L 398.141 57.586 L 400.261 57.586 L 400.261 61.262 L 398.141 61.262 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 105.475 L 398.141 101.798 L 400.261 101.798 L 400.261 105.475 L 398.141 105.475 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 80.611 L 451.141 80.611 L 451.141 82.449 L 449.031 82.449 L 449.031 80.611 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 76.935 L 451.141 76.935 L 451.141 78.87 L 449.031 78.87 L 449.031 76.935 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 84.287 L 451.141 84.287 L 451.141 86.126 L 449.031 86.126 L 449.031 84.287 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 73.258 L 451.141 73.258 L 451.141 75.097 L 449.031 75.097 L 449.031 73.258 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 87.964 L 451.141 87.964 L 451.141 89.802 L 449.031 89.802 L 449.031 87.964 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 69.582 L 451.141 69.582 L 451.141 71.42 L 449.031 71.42 L 449.031 69.582 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 91.64 L 451.141 91.64 L 451.141 93.478 L 449.031 93.478 L 449.031 91.64 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 80.611 L 438.451 80.611 L 438.451 82.449 L 436.331 82.449 L 436.331 80.611 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 76.935 L 438.451 76.935 L 438.451 78.87 L 436.331 78.87 L 436.331 76.935 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 84.287 L 438.451 84.287 L 438.451 86.126 L 436.331 86.126 L 436.331 84.287 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 73.258 L 438.451 73.258 L 438.451 75.097 L 436.331 75.097 L 436.331 73.258 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 87.964 L 438.451 87.964 L 438.451 89.802 L 436.331 89.802 L 436.331 87.964 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 69.582 L 438.451 69.582 L 438.451 71.42 L 436.331 71.42 L 436.331 69.582 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 91.64 L 438.451 91.64 L 438.451 93.478 L 436.331 93.478 L 436.331 91.64 Z"/>
+    <path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
+    <path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
+  </g>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">COMPRESSOR A</text>
+  <rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
+  <rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">COMPRESSOR B</text>
+  <rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
+  <rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">COMPRESSOR C</text>
+  <rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678391, 171.611261)" style="">
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
+    <path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
+    <path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
+    <path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
+    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
+  </g>
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678387, 296.611283)" style="">
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
+    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
+    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
+    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
+    <path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
+    <path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
+    <path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
+    <path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
+    <path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
+    <path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
+    <path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
+    <path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
+    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
+    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
+  </g>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 125 L 350 125 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 250 L 350 250 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 375 L 350 375 L 350 275 L 400 275"/>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
+    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
+    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
+  </g>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 375 L 725 375"/>
+  <rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="417.352" y="167.628">PLC Compressor</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.1</text>
+  <rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, 74.999996)" style="">
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
+    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
+    <path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
+    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
+  </g>
+  <rect x="724.832" y="275" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725" y="300.136" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="292.764">PC Server</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3, 0)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em">​</tspan></text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="312.458" y="50.984">OVERVIEW COMPRESSOR</text>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 450"/>
+</svg>

src/components/Global/ApiRequest.jsx

@@ -1,170 +1,175 @@
-import axios from "axios";
+import axios from 'axios';
-import Swal from "sweetalert2";
+import Swal from 'sweetalert2';
 
 const baseURL = import.meta.env.VITE_API_SERVER;
 
 const instance = axios.create({
-  baseURL,
+    baseURL,
-  withCredentials: true,
+    withCredentials: true,
 });
 
 // axios khusus refresh
 const refreshApi = axios.create({
-  baseURL,
+    baseURL,
-  withCredentials: true,
+    withCredentials: true,
 });
 
-
 instance.interceptors.response.use(
-  (response) => response,
+    (response) => response,
-  async (error) => {
+    async (error) => {
-    const originalRequest = error.config;
+        const originalRequest = error.config;
 
-    console.error("🚨 Response Error Interceptor:", {
+        console.error('🚨 Response Error Interceptor:', {
-      status: error.response?.status,
+            status: error.response?.status,
-      url: originalRequest.url,
+            url: originalRequest.url,
-      message: error.response?.data?.message,
+            message: error.response?.data?.message,
-      hasRetried: originalRequest._retry
+            hasRetried: originalRequest._retry,
-    });
+        });
 
-    if (error.response?.status === 401 && !originalRequest._retry) {
+        if (error.response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
+            originalRequest._retry = true;
 
-      try {
+            try {
-        console.log("🔄 Refresh token dipanggil...");
+                // console.log('🔄 Refresh token dipanggil...');
-        const refreshRes = await refreshApi.post("/auth/refresh-token");
+                const refreshRes = await refreshApi.post('/auth/refresh-token');
 
-        const newAccessToken = refreshRes.data.data.accessToken;
+                const newAccessToken = refreshRes.data.data.accessToken;
-        localStorage.setItem("token", newAccessToken);
+                localStorage.setItem('token', newAccessToken);
-        console.log("✅ Token refreshed successfully");
+                // console.log('✅ Token refreshed successfully');
 
-        // update token di header
+                // update token di header
-        instance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
+                instance.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
-        originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
+                originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
 
-        console.log("🔁 Retrying original request...");
+                // console.log('🔁 Retrying original request...');
-        return instance(originalRequest);
+                return instance(originalRequest);
-      } catch (refreshError) {
+            } catch (refreshError) {
-        console.error("❌ Refresh token gagal:", refreshError.response?.data || refreshError.message);
+                console.error(
-        localStorage.clear();
+                    '❌ Refresh token gagal:',
-        window.location.href = "/signin";
+                    refreshError.response?.data || refreshError.message
-      }
+                );
+                localStorage.clear();
+                window.location.href = '/signin';
+            }
+        }
+
+        return Promise.reject(error);
     }
-
-    return Promise.reject(error);
-  }
 );
 
-async function ApiRequest({
+async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = true } = {}) {
-  method = "GET",
+    const isFormData = params instanceof FormData;
-  params = {},
-  prefix = "/",
-  token = true,
-} = {}) {
-  const isFormData = params instanceof FormData;
 
-  const request = {
+    const request = {
-    method,
+        method,
-    url: prefix,
+        url: prefix,
-    data: params,
+        data: params,
-    headers: {
+        headers: {
-      "Accept-Language": "en_US",
+            'Accept-Language': 'en_US',
-      ...(isFormData ? {} : { "Content-Type": "application/json" }),
+            ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
-    },
+        },
-  };
+    };
 
-  const rawToken = localStorage.getItem("token");
+    const tokenRedirect = sessionStorage.getItem('token_redirect');
-  if (token && rawToken) {
-    const cleanToken = rawToken.replace(/"/g, "");
-    request.headers["Authorization"] = `Bearer ${cleanToken}`;
-    console.log("🔐 Sending request with token:", cleanToken.substring(0, 20) + "...");
-  } else {
-    console.warn("⚠️ No token found in localStorage");
-  }
 
-  console.log("📤 API Request:", { method, url: prefix, hasToken: !!rawToken });
+    let rawToken = '';
 
-  try {
+    if (tokenRedirect !== null) {
-    const response = await instance(request);
+        rawToken = tokenRedirect;
-    console.log("✅ API Response:", { url: prefix, status: response.status, statusCode: response.data?.statusCode });
+        // console.log(`sessionStorage: ${tokenRedirect}`);
-    return { ...response, error: false };
+    } else {
-  } catch (error) {
+        rawToken = localStorage.getItem('token');
-    const status = error?.response?.status || 500;
+        // console.log(`localStorage: ${rawToken}`);
-    const message = error?.response?.data?.message || error.message || "Something Wrong";
-    console.error("❌ API Error:", {
-      url: prefix,
-      status,
-      message,
-      fullError: error?.response?.data
-    });
-
-    if (status !== 401) {
-      await cekError(status, message);
     }
 
-    return { ...error.response, error: true };
+    if (token && rawToken) {
-  }
+        const cleanToken = rawToken.replace(/"/g, '');
+        request.headers['Authorization'] = `Bearer ${cleanToken}`;
+        // console.log('🔐 Sending request with token:', cleanToken.substring(0, 20) + '...');
+    } else {
+        console.warn('⚠️ No token found in localStorage');
+    }
+
+    // console.log('📤 API Request:', { method, url: prefix, hasToken: !!rawToken });
+
+    try {
+        const response = await instance(request);
+        // console.log('✅ API Response:', {
+        //     url: prefix,
+        //     status: response.status,
+        //     statusCode: response.data?.statusCode,
+        // });
+        return { ...response, error: false };
+    } catch (error) {
+        const status = error?.response?.status || 500;
+        const message = error?.response?.data?.message || error.message || 'Something Wrong';
+        console.error('❌ API Error:', {
+            url: prefix,
+            status,
+            message,
+            fullError: error?.response?.data,
+        });
+
+        if (status !== 401) {
+            await cekError(status, message);
+        }
+
+        return { ...error.response, error: true };
+    }
 }
 
-async function cekError(status, message = "") {
+async function cekError(status, message = '') {
-  if (status === 403) {
+    if (status === 403) {
-    await Swal.fire({
+        await Swal.fire({
-      icon: "warning",
+            icon: 'warning',
-      title: "Forbidden",
+            title: 'Forbidden',
-      text: message,
+            text: message,
-    });
+        });
-  } else if (status >= 500) {
+    } else if (status >= 500) {
-    await Swal.fire({
+        await Swal.fire({
-      icon: "error",
+            icon: 'error',
-      title: "Server Error",
+            title: 'Server Error',
-      text: message,
+            text: message,
-    });
+        });
-  } else {
+    } else {
-    await Swal.fire({
+        await Swal.fire({
-      icon: "warning",
+            icon: 'warning',
-      title: "Peringatan",
+            title: 'Peringatan',
-      text: message,
+            text: message,
-    });
+        });
-  }
+    }
 }
 
 const SendRequest = async (queryParams) => {
-  try {
+    try {
-    const response = await ApiRequest(queryParams);
+        const response = await ApiRequest(queryParams);
-    console.log("📦 SendRequest response:", {
-      hasError: response.error,
-      status: response.status,
-      statusCode: response.data?.statusCode,
-      data: response.data
-    });
 
-    // If ApiRequest returned error flag, return error structure
+        // If ApiRequest returned error flag, return error structure
-    if (response.error) {
+        if (response.error) {
-      const errorMsg = response.data?.message || response.statusText || "Request failed";
+            const errorMsg = response.data?.message || response.statusText || 'Request failed';
-      console.error("❌ SendRequest error response:", errorMsg);
 
-      // Return consistent error structure instead of empty array
+            // Return consistent error structure instead of empty array
-      return {
+            return {
-        statusCode: response.status || 500,
+                statusCode: response.status || 500,
-        message: errorMsg,
+                message: errorMsg,
-        data: null,
+                data: null,
-        error: true
+                error: true,
-      };
+            };
+        }
+
+        return response || { statusCode: 200, data: [], message: 'Success' };
+    } catch (error) {
+        console.error('❌ SendRequest catch error:', error);
+
+        // Don't show Swal here, let the calling code handle it
+        // This allows better error handling in each API call
+        return {
+            statusCode: 500,
+            message: error.message || 'Something went wrong',
+            data: null,
+            error: true,
+        };
     }
-
-    return response?.data || { statusCode: 200, data: [], message: "Success" };
-  } catch (error) {
-    console.error("❌ SendRequest catch error:", error);
-
-    // Don't show Swal here, let the calling code handle it
-    // This allows better error handling in each API call
-    return {
-      statusCode: 500,
-      message: error.message || "Something went wrong",
-      data: null,
-      error: true
-    };
-  }
 };
 
 export { ApiRequest, SendRequest };

src/components/Global/CardList.jsx

@@ -12,11 +12,12 @@ const CardList = ({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
 }) => {
-    const getCardStyle = () => {
+    const getCardStyle = (color) => {
-        const color = cardColor ?? '#F3EDEA'; // Orange color
+        const colorStyle = color ?? '#F3EDEA'; // Orange color
         return {
-            border: `2px solid ${color}`,
+            border: `2px solid ${colorStyle}`,
             borderRadius: '8px',
             textAlign: 'center', // Center text
         };
@@ -37,7 +38,7 @@ const CardList = ({
     return (
         <Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'left' }}>
             {data.map((item) => (
-                <Col xs={24} sm={24} md={12} lg={8} key={item.device_id}>
+                <Col xs={24} sm={24} md={12} lg={6} key={item.device_id}>
                     <Card
                         title={
                             <div
@@ -47,50 +48,57 @@ const CardList = ({
                                     alignItems: 'center',
                                 }}
                             >
-                                <span style={getTitleStyle(item.color ?? cardColor)}>
+                                <span
+                                    style={getTitleStyle(fieldColor ? item[fieldColor] : cardColor)}
+                                >
                                     {item[header]}
                                 </span>
                             </div>
                         }
-                        style={getCardStyle()}
+                        style={getCardStyle(fieldColor ? item[fieldColor] : cardColor)}
                         actions={[
-                            <Space
+                            showPreviewModal && (
-                                size="middle"
+                                <EyeOutlined
-                                style={{ display: 'flex', justifyContent: 'center' }}
-                            >
-                                <Button
-                                    type="text"
                                     style={{ color: '#1890ff' }}
-                                    icon={<EyeOutlined />}
+                                    key="preview"
                                     onClick={() => showPreviewModal(item)}
                                 />
-                                <Button
+                            ),
-                                    type="text"
+                            showEditModal && (
+                                <EditOutlined
                                     style={{ color: '#faad14' }}
-                                    icon={<EditOutlined />}
+                                    key="edit"
                                     onClick={() => showEditModal(item)}
                                 />
-                                <Button
+                            ),
-                                    type="text"
+                            showDeleteDialog && (
-                                    danger
+                                <DeleteOutlined
-                                    icon={<DeleteOutlined />}
+                                    style={{ color: '#ff1818' }}
+                                    key="delete"
                                     onClick={() => showDeleteDialog(item)}
                                 />
-                            </Space>,
+                            ),
-                        ]}
+                        ].filter(Boolean)} // <== Hapus elemen yang undefined
                     >
                         <div style={{ textAlign: 'left' }}>
                             {column.map((itemCard, index) => (
                                 <React.Fragment key={index}>
-                                    {!itemCard.hidden && itemCard.title !== 'No' && itemCard.title !== 'Aksi' && (
+                                    {!itemCard.hidden &&
-                                        <p style={{ margin: '8px 0' }}>
+                                        itemCard.title !== 'No' &&
-                                            <Text strong>{itemCard.title}:</Text>{' '}
+                                        itemCard.title !== 'Action' && (
-                                            {itemCard.render
+                                            <p style={{ margin: '8px 0' }}>
-                                                ? itemCard.render(item[itemCard.dataIndex], item, index)
+                                                <Text strong>{itemCard.title}:</Text>{' '}
-                                                : item[itemCard.dataIndex] || item[itemCard.key] || '-'
+                                                {itemCard.render
-                                            }
+                                                    ? itemCard.render(
-                                        </p>
+                                                          item[itemCard.dataIndex],
-                                    )}
+                                                          item,
+                                                          index
+                                                      )
+                                                    : item[itemCard.dataIndex] ||
+                                                      item[itemCard.key] ||
+                                                      '-'}
+                                            </p>
+                                        )}
                                 </React.Fragment>
                             ))}
                         </div>

src/components/Global/DateRealTime.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { Typography } from 'antd';
+
+const { Title, Text } = Typography;
+
+const JamRealtimeAntd = () => {
+    const [waktu, setWaktu] = useState(new Date());
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setWaktu(new Date());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    // Format custom manual untuk konsistensi
+    const formatWaktuLengkap = (date) => {
+        const hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+        const bulan = [
+            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+        ];
+
+        const namaHari = hari[date.getDay()];
+        const tanggal = date.getDate().toString().padStart(2, '0');
+        const namaBulan = bulan[date.getMonth()];
+        const tahun = date.getFullYear();
+        
+        const jam = date.getHours().toString().padStart(2, '0');
+        const menit = date.getMinutes().toString().padStart(2, '0');
+        const detik = date.getSeconds().toString().padStart(2, '0');
+
+        return `${namaHari}, ${tanggal} ${namaBulan} ${tahun} ${jam}:${menit}:${detik}`;
+    };
+
+    return (
+        <Text style={{ 
+            fontSize: '25px', 
+            // fontWeight: 'bold',
+            color: '#1BAA56'
+        }}>
+            {formatWaktuLengkap(waktu)}
+        </Text>
+    );
+};
+
+export default JamRealtimeAntd;

src/components/Global/MqttConnection.jsx

@@ -2,7 +2,16 @@
 import mqtt from 'mqtt';
 
 const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
-const topics = ['PIU_GGCP/Devices/PB'];
+const topics = [
+    'PIU_COD/AIR_DRYER/OVERVIEW',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_A',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_B',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_C',
+    'PIU_COD/COMPRESSOR/OVERVIEW',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_A',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_B',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_C'
+];
 const options = {
     keepalive: 30,
     clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
@@ -66,7 +75,8 @@ const listenMessage = (callback) => {
 
 const setValSvg = (listenTopic, svg) => {
     client.on('message', (topic, message) => {
-        if (topic == listenTopic) {
+        // console.log(topic ,' = ', listenTopic);
+        if (topic === listenTopic) {
             const objChanel = JSON.parse(message);
 
             Object.entries(objChanel).forEach(([key, value]) => {
@@ -78,7 +88,7 @@ const setValSvg = (listenTopic, svg) => {
                     } else if (value === false) {
                         el.style.display = 'none';
                     } else if (!isNaN(value)) {
-                        el.textContent = Number(value ?? 0.0);
+                        el.textContent = Number(value ?? 0.0).toFixed(2);
                     } else {
                         el.textContent = value;
                     }

src/components/Global/TableList.jsx

@@ -1,18 +1,6 @@
 import React, { memo, useState, useEffect, useRef } from 'react';
 import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
-import {
+import { MacCommandOutlined, TableOutlined } from '@ant-design/icons';
-    PlusOutlined,
-    FilterOutlined,
-    EditOutlined,
-    DeleteOutlined,
-    EyeOutlined,
-    SearchOutlined,
-    FilePdfOutlined,
-    AppstoreOutlined,
-    TableOutlined,
-} from '@ant-design/icons';
-import { setFilterData } from './DataFilter';
-import CardDevice from '../../pages/master/device/component/CardDevice';
 import CardList from './CardList';
 
 const { Text } = Typography;
@@ -29,41 +17,118 @@ const TableList = memo(function TableList({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
+    firstLoad = true,
+    columnDynamic = false,
+    cardComponent, // New prop for custom card component
+    onStockUpdate, // Prop to pass to card component
+    onGetData, // Callback to execute when data is received
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
     const [data, setData] = useState([]);
-    const [pagingResponse, setPagingResponse] = useState({
-        totalData: 0,
-        perPage: 0,
-        totalPage: 0,
-    });
 
     const [pagination, setPagination] = useState({
-        current: 1,
+        current_page: 1,
-        limit: 10,
+        current_limit: 10,
-        total: 0,
+        total_limit: 0,
+        total_page: 1,
     });
 
-    const [viewMode, setViewMode] = useState('card');
+    const [columnsDynamic, setColumnsDynamic] = useState(columns);
+
+    const [viewMode, setViewMode] = useState('table');
 
     const { useBreakpoint } = Grid;
 
+    const [renderCount, setRenderCount] = useState(firstLoad ? 1 : 0);
+
     useEffect(() => {
-        filter(1, 10);
+        if (renderCount < 1) {
+            setRenderCount(renderCount + 1);
+            return;
+        } else {
+            filter(1, pagination.current_limit);
+        }
     }, [triger]);
 
     const filter = async (currentPage, pageSize) => {
         setGridLoading(true);
 
         const paging = {
-            page: currentPage,
+            page: Number(currentPage),
-            limit: pageSize,
+            limit: Number(pageSize),
         };
 
         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]);
+        }
+
+        const fetchedData = resData?.data ?? [];
+
+        // Panggil callback jika disediakan
+        if (onGetData && typeof onGetData === 'function') {
+            onGetData(fetchedData);
+        }
+
+        setData(fetchedData);
+
+        const pagingData = resData?.paging;
+
+        if (pagingData) {
+            setPagination((prev) => ({
+                ...prev,
+                current_page: pagingData.current_page || 1,
+                current_limit: pagingData.current_limit || 10,
+                total_limit: pagingData.total_limit || 0,
+                total_page: pagingData.total_page || 1,
+            }));
+        }
+
+        setGridLoading(false);
+
         if (resData) {
             setTimeout(() => {
                 setGridLoading(false);
@@ -72,29 +137,6 @@ const TableList = memo(function TableList({
             setGridLoading(false);
             return;
         }
-
-        const dataToSet = resData.data?.data ?? resData.data ?? [];
-        setData(dataToSet);
-        setFilterData(dataToSet);
-
-        if (resData.status == 200) {
-            const pagingData = resData.data?.paging;
-
-            if (pagingData) {
-                setPagingResponse({
-                    totalData: pagingData.total || 0,
-                    perPage: pagingData.limit || 0,
-                    totalPage: pagingData.page_total || 0,
-                });
-
-                setPagination((prev) => ({
-                    ...prev,
-                    current: pagingData.page || 1,
-                    limit: pagingData.limit || 10,
-                    total: pagingData.total || 0,
-                }));
-            }
-        }
     };
 
     const handlePaginationChange = (page, pageSize) => {
@@ -110,35 +152,41 @@ const TableList = memo(function TableList({
 
     const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
 
+    // Use the custom card component if provided, otherwise default to CardList
+    const CardViewComponent = cardComponent || CardList;
+
     return (
         <div>
             <Segmented
                 options={[
-                    { value: 'card', icon: <AppstoreOutlined /> },
                     { value: 'table', icon: <TableOutlined /> },
+                    { value: 'card', icon: <MacCommandOutlined /> },
                 ]}
                 value={viewMode}
                 onChange={setViewMode}
             />
             {(isMobile && mobile) || viewMode === 'card' ? (
-                <CardList
+                <CardViewComponent
                     cardColor={cardColor}
+                    fieldColor={fieldColor}
                     data={data}
-                    column={columns}
+                    column={columnsDynamic}
                     header={header}
                     showPreviewModal={showPreviewModal}
                     showEditModal={showEditModal}
                     showDeleteDialog={showDeleteDialog}
+                    onStockUpdate={onStockUpdate}
                 />
             ) : (
-                <Row gutter={24}>
+                <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}
                         scroll={{ y: 520 }}
+                        size="small"
                     />
                 </Row>
             )}
@@ -146,8 +194,8 @@ const TableList = memo(function TableList({
             <Row justify="space-between" align="middle">
                 <Col>
                     <div>
-                        Menampilkan {pagingResponse.totalData} Data dari {pagingResponse.totalPage}{' '}
+                        Menampilkan {pagination.current_limit} data halaman{' '}
-                        Halaman
+                        {pagination.current_page} dari total {pagination.total_limit} data
                     </div>
                 </Col>
                 <Col>
@@ -155,9 +203,9 @@ const TableList = memo(function TableList({
                         showSizeChanger
                         onChange={handlePaginationChange}
                         onShowSizeChange={handlePaginationChange}
-                        current={pagination.current}
+                        current={pagination.current_page}
-                        pageSize={pagination.limit}
+                        pageSize={pagination.current_limit}
-                        total={pagination.total}
+                        total={pagination.total_limit}
                     />
                 </Col>
             </Row>
@@ -166,3 +214,4 @@ const TableList = memo(function TableList({
 });
 
 export default TableList;
+

src/components/Global/ToastNotif.jsx

@@ -16,6 +16,7 @@ const NotifOk = ({ icon, title, message }) => {
         icon: icon,
         title: title,
         text: message,
+        html: message.replace(/\n/g, '<br/>'),
     });
 };
 

src/index.css

@@ -20,36 +20,65 @@ html body {
   height: 100vh;
 }
 
-/* Custom Orange Sidebar Menu Styles */
+/* Custom green Sidebar Menu Styles */
-.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
+.custom-green-menu.ant-menu-dark .ant-menu-item-selected {
   background-color: rgba(255, 255, 255, 0.2) !important;
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
+.custom-green-menu.ant-menu-dark .ant-menu-item-selected::after {
   border-right-color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-green-menu.ant-menu-dark .ant-menu-item:hover,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-title:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
+.custom-green-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
   background: rgba(0, 0, 0, 0.2) !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item,
+.custom-green-menu.ant-menu-dark .ant-menu-item,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-title {
   color: rgba(255, 255, 255, 0.9) !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
+.custom-green-menu.ant-menu-dark .ant-menu-item-active,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
   color: white !important;
-}
+}
+
+/*start styling for scrollbar menu */
+.custom-menu-scrollbar::-webkit-scrollbar {
+    width: 8px;
+}
+.custom-menu-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+    margin: 5px 0;
+}
+.custom-menu-scrollbar::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #1BAA56 0%, rgb(5, 75, 34) 100%);
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+.custom-menu-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #2bc56d 0%, rgb(8, 94, 43) 100%);
+}
+.custom-menu-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #1BAA56 transparent;
+}
+/* Hilangkan panah atas/bawah dengan important */
+.custom-menu-scrollbar::-webkit-scrollbar-button {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+/*end styling for scrollbar menu */

src/layout/LayoutHeader.jsx

@@ -5,6 +5,7 @@ import handleLogOut from '../Utils/Auth/Logout';
 import { useBreadcrumb } from './LayoutBreadcrumb';
 import { decryptData } from '../components/Global/Formatter';
 import { useNavigate } from 'react-router-dom';
+import DateRealTime from '../components/Global/DateRealTime';
 
 const { Link, Text } = Typography;
 const { Header } = Layout;
@@ -17,7 +18,7 @@ const LayoutHeader = () => {
     const { token } = theme.useToken() || {};
     const colorBgContainer = token?.colorBgContainer || '#fff';
     const colorBorder = token?.colorBorder || '#d9d9d9';
-    const colorText = token?.colorText || '#000';
+    const colorText = token?.colorText || '#1BAA56';
 
     // Ambil data user dari localStorage
     let userData = null;
@@ -40,15 +41,8 @@ const LayoutHeader = () => {
     // console.log('User data di header:', userData?.user);
 
     // Role handling
-    const roleNameDefault =
+    let roleName = userData?.user?.role_name || 'Guest';
-        userData?.user?.approval ||
+    const userName = userData?.user?.name || userData?.user?.username || userData?.user?.user_name || 'User';
-        userData?.user?.partner_name ||
-        userData?.user?.role_name ||
-        'Guest';
-
-    let roleName = roleNameDefault;
-    const userName =
-        userData?.user?.name || userData?.user?.username || userData?.user?.user_name || 'User';
 
     // Override jika Super Admin
     if (
@@ -73,8 +67,9 @@ const LayoutHeader = () => {
                     paddingBottom: 20,
                     paddingLeft: 24,
                     paddingRight: 24,
-                    minHeight: 100,
+                    // minHeight: 100,
                     boxSizing: 'border-box',
+                    boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)'
                 }}
             >
                 <div
@@ -87,16 +82,39 @@ const LayoutHeader = () => {
                 >
                     <Text
                         style={{
-                            color: colorText,
+                            color: '#1BAA56',
-                            fontSize: 16,
+                            fontSize: 26,
                             fontWeight: 'bold',
                             whiteSpace: 'nowrap',
                         }}
                     >
-                        Login AS {roleName}
+                        {/* Login AS {roleName} */}
+                        CALL OF DUTY
                     </Text>
                 </div>
 
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: 12,
+                    }}
+                >
+                    {/* <Text
+                        style={{
+                            color: '#000000',
+                            fontSize: 20,
+                            fontWeight: 'bold',
+                            whiteSpace: 'nowrap',
+                        }}
+                    > */}
+                        {/* Login AS {roleName} */}
+                        {/* Kamis, 04 November 2025 16:35:00 */}
+                    {/* </Text> */}
+                    <DateRealTime/>
+                </div>
+
                 <div
                     style={{
                         display: 'flex',
@@ -117,7 +135,7 @@ const LayoutHeader = () => {
                     >
                         <UserOutlined style={{ fontSize: 16, color: colorText }} />
                         <Text style={{ marginLeft: 8, color: colorText }} strong>
-                            {userName}
+                            {userName} @ {roleName}
                         </Text>
                     </Button>
                     <Link

src/layout/LayoutMenu.jsx

@@ -29,6 +29,10 @@ import {
     DesktopOutlined,
     NodeExpandOutlined,
     GroupOutlined,
+    SlidersOutlined,
+    SnippetsOutlined,
+    ContactsOutlined,
+    ToolOutlined,
 } from '@ant-design/icons';
 
 const { Text } = Typography;
@@ -49,39 +53,58 @@ const allItems = [
         label: 'Dashboard',
         children: [
             {
-                key: 'dashboard-svg-overview',
+                key: 'dashboard-svg-compressor',
                 icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/overview">Overview</Link>,
+                label: 'Compressor',
+                children: [
+                    {
+                        key: 'dashboard-svg-compressor-overview',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/overview-compressor">Overview</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-a',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-b',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-c',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
+                    },
+                ],
             },
             {
-                key: 'dashboard-svg-compressor-a',
+                key: 'dashboard-svg-airdryer',
                 icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
+                label: 'Air Dryer',
-            },
+                children: [
-            {
+                    {
-                key: 'dashboard-svg-compressor-b',
+                        key: 'dashboard-svg-airdryer-overview',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
+                        label: <Link to="/dashboard-svg/overview-airdryer">Overview</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-compressor-c',
+                        key: 'dashboard-svg-airdryer-airdryer-a',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-airdryer-a',
+                        key: 'dashboard-svg-airdryer-airdryer-b',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-airdryer-b',
+                        key: 'dashboard-svg-airdryer-airdryer-c',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
-            },
+                    },
-            {
+                ],
-                key: 'dashboard-svg-airdryer-c',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
             },
         ],
     },
@@ -91,9 +114,9 @@ const allItems = [
         label: 'Master',
         children: [
             {
-                key: 'master-plant-section',
+                key: 'master-plant-sub-section',
                 icon: <ProductOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/master/plant-section">Plant Section</Link>,
+                label: <Link to="/master/plant-sub-section">Plant Sub Section</Link>,
             },
             {
                 key: 'master-brand-device',
@@ -121,9 +144,31 @@ const allItems = [
                 label: <Link to="/master/status">Status</Link>,
             },
             {
-                key: 'master-shift',
+                key: 'master-sparepart',
-                icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
+                icon: <ToolOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/master/shift">Shift</Link>,
+                label: <Link to="/master/sparepart">Sparepart</Link>,
+            },
+            // {
+            //     key: 'master-shift',
+            //     icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
+            //     label: <Link to="/master/shift">Shift</Link>,
+            // },
+        ],
+    },
+    {
+        key: 'report',
+        icon: <SnippetsOutlined style={{ fontSize: '19px' }} />,
+        label: 'Report',
+        children: [
+            {
+                key: 'report-trending',
+                icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/report/trending">Trending</Link>,
+            },
+            {
+                key: 'report-report',
+                icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/report/report">Report</Link>,
             },
         ],
     },
@@ -133,32 +178,32 @@ const allItems = [
         label: 'History',
         children: [
             {
-                key: 'history-trending',
+                key: 'history-alarm',
-                icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
+                icon: <AlertOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/history/trending">Trending</Link>,
+                label: <Link to="/history/alarm">Alarm</Link>,
             },
             {
-                key: 'history-report',
+                key: 'history-event',
-                icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
+                icon: <SlidersOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/history/report">Report</Link>,
+                label: <Link to="/history/event">Event</Link>,
             },
         ],
     },
+    {
+        key: 'contact',
+        icon: <ContactsOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/contact" className="fontMenus">
+                Contact
+            </Link>
+        ),
+    },
     {
         key: 'notification',
         icon: <BellOutlined style={{ fontSize: '19px' }} />,
         label: (
             <Link to="/notification" className="fontMenus">
-                Notifikasi
+                Notification
-            </Link>
-        ),
-    },
-    {
-        key: 'event-alarm',
-        icon: <AlertOutlined style={{ fontSize: '19px' }} />,
-        label: (
-            <Link to="/event-alarm" className="fontMenus">
-                Event Alarm
             </Link>
         ),
     },
@@ -180,15 +225,15 @@ const allItems = [
             </Link>
         ),
     },
-    {
+    // {
-        key: 'jadwal-shift',
+    //     key: 'jadwal-shift',
-        icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
+    //     icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
-        label: (
+    //     label: (
-            <Link to="/jadwal-shift" className="fontMenus">
+    //         <Link to="/jadwal-shift" className="fontMenus">
-                Jadwal Shift
+    //             Jadwal Shift
-            </Link>
+    //         </Link>
-        ),
+    //     ),
-    },
+    // },
 ];
 
 const LayoutMenu = () => {
@@ -206,44 +251,84 @@ const LayoutMenu = () => {
         if (pathname === '/user') return 'user';
         if (pathname === '/role') return 'role';
         if (pathname === '/notification') return 'notification';
-        if (pathname === '/event-alarm') return 'event-alarm';
         if (pathname === '/jadwal-shift') return 'jadwal-shift';
-        if (pathname === '/dashboard-svg') return 'dashboard-svg';
+        if (pathname === '/contact') return 'contact';
 
         // Handle master routes
         if (pathname.startsWith('/master/')) {
             const subPath = pathParts[1];
-            return `master-${subPath}`;
+            // Convert kebab-case to the actual menu keys
+            const masterKeyMap = {
+                'plant-sub-section': 'master-plant-sub-section',
+                'brand-device': 'master-brand-device',
+                device: 'master-device',
+                unit: 'master-unit',
+                tag: 'master-tag',
+                status: 'master-status',
+                sparepart: 'master-sparepart',
+                shift: 'master-shift',
+            };
+            return masterKeyMap[subPath] || `master-${subPath}`;
         }
 
-        // Handle master routes
+        // Handle dashboard svg routes
         if (pathname.startsWith('/dashboard-svg/')) {
             const subPath = pathParts[1];
+            // Map specific routes to their menu keys
+            if (subPath === 'overview-compressor') return 'dashboard-svg-compressor-overview';
+            if (subPath === 'compressor-a') return 'dashboard-svg-compressor-compressor-a';
+            if (subPath === 'compressor-b') return 'dashboard-svg-compressor-compressor-b';
+            if (subPath === 'compressor-c') return 'dashboard-svg-compressor-compressor-c';
+            if (subPath === 'overview-airdryer') return 'dashboard-svg-airdryer-overview';
+            if (subPath === 'airdryer-a') return 'dashboard-svg-airdryer-airdryer-a';
+            if (subPath === 'airdryer-b') return 'dashboard-svg-airdryer-airdryer-b';
+            if (subPath === 'airdryer-c') return 'dashboard-svg-airdryer-airdryer-c';
+
             return `dashboard-svg-${subPath}`;
         }
 
+        // Handle report routes
+        if (pathname.startsWith('/report/')) {
+            const subPath = pathParts[1];
+            const reportKeyMap = {
+                trending: 'report-trending',
+                report: 'report-report',
+            };
+            return reportKeyMap[subPath] || `report-${subPath}`;
+        }
+
         // Handle history routes
         if (pathname.startsWith('/history/')) {
             const subPath = pathParts[1];
-            return `history-${subPath}`;
+            const historyKeyMap = {
-        }
+                alarm: 'history-alarm',
-
+                event: 'history-event',
-        // Handle shift management routes
+            };
-        if (pathname.startsWith('/shift-management/')) {
+            return historyKeyMap[subPath] || `history-${subPath}`;
-            const subPath = pathParts[1];
-            return `shift-${subPath}`;
         }
 
         return 'home'; // default
     };
 
-    // Function to get parent key from menu key
+    // Function to get parent keys from menu key
-    const getParentKey = (key) => {
+    const getParentKeys = (key) => {
-        if (key.startsWith('master-')) return 'master';
+        const parentKeys = [];
-        if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
+
-        if (key.startsWith('history-')) return 'history';
+        if (key.startsWith('dashboard-svg-compressor-')) {
-        if (key.startsWith('shift-')) return 'shift-management';
+            parentKeys.push('dashboard-svg', 'dashboard-svg-compressor');
-        return null;
+        } else if (key.startsWith('dashboard-svg-airdryer-')) {
+            parentKeys.push('dashboard-svg', 'dashboard-svg-airdryer');
+        } else if (key.startsWith('dashboard-svg-')) {
+            parentKeys.push('dashboard-svg');
+        } else if (key.startsWith('master-')) {
+            parentKeys.push('master');
+        } else if (key.startsWith('report-')) {
+            parentKeys.push('report');
+        } else if (key.startsWith('history-')) {
+            parentKeys.push('history');
+        }
+
+        return parentKeys;
     };
 
     // Update selected and open keys when route changes
@@ -251,11 +336,11 @@ const LayoutMenu = () => {
         const currentKey = getMenuKeyFromPath(location.pathname);
         setSelectedKeys([currentKey]);
 
-        const parentKey = getParentKey(currentKey);
+        const parentKeys = getParentKeys(currentKey);
 
-        // If current menu has parent, open it. Otherwise, close all dropdowns
+        // Always keep the parent menus open when a child is selected
-        if (parentKey) {
+        if (parentKeys.length > 0) {
-            setStateOpenKeys([parentKey]);
+            setStateOpenKeys(parentKeys);
         } else {
             setStateOpenKeys([]);
         }
@@ -281,17 +366,28 @@ const LayoutMenu = () => {
 
     const onOpenChange = (openKeys) => {
         const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
+
+        // If clicking on a menu that was previously closed
         if (currentOpenKey !== undefined) {
             const repeatIndex = openKeys
                 .filter((key) => key !== currentOpenKey)
                 .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
+
             setStateOpenKeys(
                 openKeys
                     .filter((_, index) => index !== repeatIndex)
                     .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
             );
         } else {
-            setStateOpenKeys(openKeys);
+            // If clicking on a menu that was previously open, close only that menu
+            // but keep other parent menus open if they have active children
+            const currentKey = getMenuKeyFromPath(location.pathname);
+            const necessaryParentKeys = getParentKeys(currentKey);
+
+            // Filter out only the menus that are necessary to keep open
+            const filteredOpenKeys = openKeys.filter((key) => necessaryParentKeys.includes(key));
+
+            setStateOpenKeys(filteredOpenKeys);
         }
     };
 
@@ -300,27 +396,17 @@ const LayoutMenu = () => {
 
     const karyawan = () => {
         return allItems
-            .filter(
+            .filter((item) => item.key !== 'setting')
-                (item) => item.key !== 'setting'
-                // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
-                // && item.key !== 'master'
-                // && item.key !== 'master'
-            )
             .map((item) => {
                 if (item.key === 'master') {
                     return {
                         ...item,
-                        // buka command dibawah jika terdapat sub menu yang di sembunyikan
-                        // children: item.children.filter(
-                        //     child => child.key !== 'master-product'
-                        // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
-                        //     && child.key !== 'master-service'
-                        // )
                     };
                 }
                 return item;
             });
     };
+
     const items = isAdmin === 1 ? allItems : karyawan();
 
     return (
@@ -336,7 +422,7 @@ const LayoutMenu = () => {
                 border: 'none',
             }}
             theme="dark"
-            className="custom-orange-menu"
+            className="custom-green-menu"
         />
     );
 };

src/layout/LayoutSidebar.jsx

@@ -7,7 +7,7 @@ const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
         <Sider
-            width={300}
+            width={255}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {
@@ -17,17 +17,37 @@ const LayoutSidebar = () => {
                 // console.log(collapsed, type);
             }}
             style={{
-                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+                background: 'linear-gradient(180deg, #1BAA56 0%,rgb(5, 75, 34) 100%)',
-                overflow: 'auto',
+                // overflow: 'auto',
                 height: '100vh',
                 position: 'fixed',
                 left: 0,
                 top: 0,
                 bottom: 0,
+                borderTopRightRadius: '30px',
+                borderBottomRightRadius: '30px',
+                boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)',
+                zIndex: 9999
             }}
         >
-            <LayoutLogo />
+            <div style={{
-            <LayoutMenu />
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100vh',
+                overflow: 'hidden'
+            }}>
+                {/* Logo section - fixed height */}
+                <div style={{flexShrink: 0,minHeight: '64px'}}>
+                    <LayoutLogo />
+                </div>
+                
+                {/* Menu section - scrollable */}
+                <div style={{flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
+                    <div className="custom-menu-scrollbar" style={{flex: 1, overflowY: 'auto', overflowX: 'hidden', backgroundColor: 'transparent'}}>
+                        <LayoutMenu />
+                    </div>
+                </div>
+            </div>
         </Sider>
     );
 };

src/layout/MainLayout.jsx

@@ -20,7 +20,7 @@ const MainLayout = ({ children }) => {
             <LayoutSidebar />
             <Layout
                 style={{
-                    marginLeft: isDesktop ? '300px' : '0',
+                    marginLeft: isDesktop ? '250px' : '0',
                     overflow: 'auto',
                 }}
             >

src/pages/auth/Registration.jsx

@@ -1,461 +0,0 @@
-// import React, { useState } from 'react';
-// import {
-//     Flex,
-//     Input,
-//     InputNumber,
-//     Form,
-//     Button,
-//     Card,
-//     Space,
-//     Upload,
-//     Divider,
-//     Tooltip,
-//     message,
-//     Select,
-// } from 'antd';
-// import {
-//     UploadOutlined,
-//     UserOutlined,
-//     IdcardOutlined,
-//     PhoneOutlined,
-//     LockOutlined,
-//     InfoCircleOutlined,
-//     MailOutlined,
-// } from '@ant-design/icons';
-// const { Item } = Form;
-// const { Option } = Select;
-// import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
-// import { useNavigate } from 'react-router-dom';
-// import { register, uploadFile, checkUsername } from '../../api/auth';
-// import { NotifAlert } from '../../components/Global/ToastNotif';
-
-// const Registration = () => {
-//     const [form] = Form.useForm();
-//     const navigate = useNavigate();
-//     const [loading, setLoading] = useState(false);
-//     const [fileListKontrak, setFileListKontrak] = useState([]);
-//     const [fileListHsse, setFileListHsse] = useState([]);
-//     const [fileListIcon, setFileListIcon] = useState([]);
-
-//     // Daftar jenis vendor
-//     const vendorTypes = [
-//         { vendor_type: 1, vendor_type_name: 'One-Time' },
-//         { vendor_type: 2, vendor_type_name: 'Rutin' },
-//     ];
-
-//     const onFinish = async (values) => {
-//         setLoading(true);
-//         try {
-//             if (!fileListKontrak.length || !fileListHsse.length) {
-//                 message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
-//                 setLoading(false);
-//                 return;
-//             }
-
-//             const formData = new FormData();
-//             formData.append('path_kontrak', fileListKontrak[0].originFileObj);
-//             formData.append('path_hse_plant', fileListHsse[0].originFileObj);
-//             if (fileListIcon.length) {
-//                 formData.append('path_icon', fileListIcon[0].originFileObj);
-//             }
-
-//             const uploadResponse = await uploadFile(formData);
-
-//             if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
-//                 message.error(uploadResponse.message || 'Gagal mengunggah file.');
-//                 setLoading(false);
-//                 return;
-//             }
-
-//             const params = new URLSearchParams({ username: values.username });
-//             const usernameCheck = await checkUsername(params);
-//             if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
-//                 NotifAlert({
-//                     icon: 'error',
-//                     title: 'Gagal',
-//                     message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
-//                 });
-//                 setLoading(false);
-//                 return;
-//             }
-
-//             const registerData = {
-//                 nama_perusahaan: values.namaPerusahaan,
-//                 no_kontak_wo: values.noKontakWo,
-//                 path_kontrak: uploadResponse.data.pathKontrak || '',
-//                 durasi: values.durasiPekerjaan,
-//                 nilai_csms: values.nilaiCsms.toString(),
-//                 vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
-//                 path_hse_plant: uploadResponse.data.pathHsePlant || '',
-//                 nama_leader: values.penanggungJawab,
-//                 no_identitas: values.noIdentitas,
-//                 no_hp: values.noHandphone,
-//                 email_register: values.username,
-//                 password_register: values.password,
-//             };
-
-//             const response = await register(registerData);
-
-//             if (response.data?.id_register) {
-//                 message.success('Data berhasil disimpan!');
-
-//                 try {
-//                     form.resetFields();
-//                     setFileListKontrak([]);
-//                     setFileListHsse([]);
-//                     setFileListIcon([]);
-
-//                     navigate('/registration-submitted');
-//                 } catch (postSuccessError) {
-//                     message.warning(
-//                         'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
-//                     );
-//                 }
-//             } else {
-//                 message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
-//             }
-//         } catch (error) {
-//             console.error('Error saat registrasi:', error);
-//             NotifAlert({
-//                 icon: 'error',
-//                 title: 'Gagal',
-//                 message: error.message || 'Terjadi kesalahan, silakan coba lagi',
-//             });
-//         } finally {
-//             setLoading(false);
-//         }
-//     };
-
-//     const onCancel = () => {
-//         form.resetFields();
-//         setFileListKontrak([]);
-//         setFileListHsse([]);
-//         setFileListIcon([]);
-//         navigate('/signin');
-//     };
-
-//     const handleChangeKontrak = ({ fileList }) => {
-//         setFileListKontrak(fileList);
-//     };
-
-//     const handleChangeHsse = ({ fileList }) => {
-//         setFileListHsse(fileList);
-//     };
-
-//     const handleChangeIcon = ({ fileList }) => {
-//         setFileListIcon(fileList);
-//     };
-
-//     const beforeUpload = (file, fieldname) => {
-//         const isValidType = [
-//             'image/jpeg',
-//             'image/jpg',
-//             'image/png',
-//             fieldname !== 'path_icon' ? 'application/pdf' : null,
-//         ]
-//             .filter(Boolean)
-//             .includes(file.type);
-//         const isNotEmpty = file.size > 0;
-//         const isSizeValid = file.size / 1024 / 1024 < 10;
-
-//         if (!isValidType) {
-//             message.error(
-//                 `Hanya file ${
-//                     fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
-//                 } yang diperbolehkan!`
-//             );
-//             return false;
-//         }
-//         if (!isNotEmpty) {
-//             message.error('File tidak boleh kosong!');
-//             return false;
-//         }
-//         if (!isSizeValid) {
-//             message.error('Ukuran file maksimal 10MB!');
-//             return false;
-//         }
-//         return true;
-//     };
-
-//     return (
-//         <Flex
-//             align="center"
-//             justify="center"
-//             style={{
-//                 minHeight: '100vh',
-//                 backgroundImage: `url(${sypiu_ggcp})`,
-//                 backgroundSize: 'cover',
-//                 backgroundPosition: 'center',
-//                 padding: '20px',
-//             }}
-//         >
-//             <Card
-//                 style={{
-//                     width: '100%',
-//                     maxWidth: 800,
-//                     background: 'rgba(255, 255, 255, 0.9)',
-//                     backdropFilter: 'blur(10px)',
-//                     borderRadius: '12px',
-//                     boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
-//                     padding: '24px',
-//                 }}
-//                 title={
-//                     <Flex align="center" justify="space-between">
-//                         <h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
-//                         <Button
-//                             type="link"
-//                             icon={<InfoCircleOutlined />}
-//                             onClick={() => navigate('/signin')}
-//                         >
-//                             Kembali
-//                         </Button>
-//                     </Flex>
-//                 }
-//             >
-//                 <Form
-//                     form={form}
-//                     onFinish={onFinish}
-//                     layout="horizontal"
-//                     labelCol={{ span: 8 }}
-//                     wrapperCol={{ span: 16 }}
-//                     labelAlign="left"
-//                     style={{ maxWidth: 800 }}
-//                 >
-//                     {/* Informasi Perusahaan */}
-//                     <Divider
-//                         orientation="left"
-//                         orientationMargin={0}
-//                         style={{
-//                             color: '#23A55A',
-//                             fontWeight: 'bold',
-//                             marginLeft: 0,
-//                             paddingLeft: 0,
-//                         }}
-//                     >
-//                         Informasi Perusahaan
-//                     </Divider>
-//                     <Item
-//                         label="Nama Perusahaan"
-//                         name="namaPerusahaan"
-//                         rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
-//                     >
-//                         <Input
-//                             prefix={<UserOutlined />}
-//                             placeholder="Masukkan Nama Perusahaan"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="Durasi Pekerjaan (Hari)"
-//                         name="durasiPekerjaan"
-//                         rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
-//                     >
-//                         <InputNumber
-//                             min={1}
-//                             style={{ width: '100%' }}
-//                             placeholder="Masukkan Durasi Pekerjaan"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="No Kontrak Kerja / Agreement"
-//                         name="noKontakWo"
-//                         rules={[
-//                             { required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
-//                         ]}
-//                     >
-//                         <Input
-//                             style={{
-//                                 width: '100%',
-//                             }}
-//                             placeholder="Masukkan No Kontrak Kerja / Agreement"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="Lampiran Kontrak Kerja"
-//                         name="lampiranKontrak"
-//                         rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
-//                     >
-//                         <Upload
-//                             beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
-//                             fileList={fileListKontrak}
-//                             onChange={handleChangeKontrak}
-//                             maxCount={1}
-//                         >
-//                             <Button icon={<UploadOutlined />} size="large">
-//                                 Unggah PDF/JPG
-//                             </Button>
-//                         </Upload>
-//                     </Item>
-//                     <Item
-//                         label="HSSE Plan"
-//                         name="hssePlan"
-//                         rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
-//                     >
-//                         <Upload
-//                             beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
-//                             fileList={fileListHsse}
-//                             onChange={handleChangeHsse}
-//                             maxCount={1}
-//                         >
-//                             <Button icon={<UploadOutlined />} size="large">
-//                                 Unggah PDF/JPG
-//                             </Button>
-//                         </Upload>
-//                     </Item>
-//                     <Item
-//                         label="Nilai CSMS"
-//                         name="nilaiCsms"
-//                         rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
-//                     >
-//                         <InputNumber
-//                             min={0}
-//                             max={100}
-//                             style={{ width: '100%' }}
-//                             placeholder="Masukkan Nilai CSMS"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="Jenis Vendor"
-//                         name="jenisVendor"
-//                         rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
-//                     >
-//                         <Select
-//                             placeholder="Pilih Jenis Vendor"
-//                             size="large"
-//                             style={{ width: '100%' }}
-//                         >
-//                             {vendorTypes.map((vendor) => (
-//                                 <Option key={vendor.vendor_type} value={vendor.vendor_type}>
-//                                     {vendor.vendor_type_name}
-//                                 </Option>
-//                             ))}
-//                         </Select>
-//                     </Item>
-
-//                     {/* Informasi Penanggung Jawab */}
-//                     <Divider
-//                         orientation="left"
-//                         orientationMargin={0}
-//                         style={{
-//                             color: '#23A55A',
-//                             fontWeight: 'bold',
-//                             marginLeft: 0,
-//                             paddingLeft: 0,
-//                         }}
-//                     >
-//                         Informasi Penanggung Jawab
-//                     </Divider>
-//                     <Item
-//                         label="Nama Penanggung Jawab"
-//                         name="penanggungJawab"
-//                         rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
-//                     >
-//                         <Input
-//                             prefix={<UserOutlined />}
-//                             placeholder="Masukkan Nama Penanggung Jawab"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="No Handphone"
-//                         name="noHandphone"
-//                         rules={[
-//                             { required: true, message: 'Masukkan No Handphone!' },
-//                             {
-//                                 pattern: /^(\+62|0)[0-9]{9,12}$/,
-//                                 message:
-//                                     'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
-//                             },
-//                         ]}
-//                     >
-//                         <Input
-//                             prefix={<PhoneOutlined />}
-//                             placeholder="Masukkan No Handphone (+62)"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="No Identitas"
-//                         name="noIdentitas"
-//                         rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
-//                     >
-//                         <Input
-//                             prefix={<IdcardOutlined />}
-//                             placeholder="Masukkan No Identitas"
-//                             size="large"
-//                         />
-//                     </Item>
-
-//                     {/* Akun Pengguna */}
-//                     <Divider
-//                         orientation="left"
-//                         orientationMargin={0}
-//                         style={{
-//                             color: '#23A55A',
-//                             fontWeight: 'bold',
-//                             marginLeft: 0,
-//                             paddingLeft: 0,
-//                         }}
-//                     >
-//                         Akun Pengguna (digunakan sebagai user login SYPIU)
-//                     </Divider>
-//                     <Item
-//                         label="Email"
-//                         name="username"
-//                         rules={[
-//                             { required: true, message: 'Masukkan Email!' },
-//                             { type: 'email', message: 'Format email tidak valid!' },
-//                         ]}
-//                     >
-//                         <Input
-//                             prefix={<MailOutlined />}
-//                             placeholder="Masukkan Email"
-//                             size="large"
-//                         />
-//                     </Item>
-//                     <Item
-//                         label="Password"
-//                         name="password"
-//                         rules={[
-//                             { required: true, message: 'Masukkan Password!' },
-//                             { min: 6, message: 'Password minimal 6 karakter!' },
-//                         ]}
-//                     >
-//                         <Input.Password
-//                             prefix={<LockOutlined />}
-//                             placeholder="Masukkan Password"
-//                             size="large"
-//                         />
-//                     </Item>
-
-//                     {/* Tombol */}
-//                     <Item wrapperCol={{ offset: 8, span: 16 }}>
-//                         <Space style={{ marginTop: '24px', width: '100%' }}>
-//                             <Button
-//                                 type="primary"
-//                                 htmlType="submit"
-//                                 size="large"
-//                                 loading={loading}
-//                                 style={{
-//                                     backgroundColor: '#23A55A',
-//                                     borderColor: '#23A55A',
-//                                     width: 120,
-//                                 }}
-//                             >
-//                                 Simpan
-//                             </Button>
-//                             <Button onClick={onCancel} size="large" style={{ width: 120 }}>
-//                                 Batal
-//                             </Button>
-//                         </Space>
-//                     </Item>
-//                 </Form>
-//             </Card>
-//         </Flex>
-//     );
-// };
-
-// export default Registration;

src/pages/auth/SignIn.jsx

@@ -3,7 +3,7 @@ import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { NotifAlert } from '../../components/Global/ToastNotif';
 import { SendRequest } from '../../components/Global/ApiRequest';
-import bg_cod from 'assets/bg_cod.jpg';
+import bg_cod from 'assets/bg-cod-1.jpg';
 import logo from 'assets/freepik/LOGOPIU.png';
 
 const SignIn = () => {
@@ -31,8 +31,9 @@ const SignIn = () => {
                 prefix: 'auth/generate-captcha',
                 token: false,
             });
-            setCaptchaSvg(res.data.svg || '');
+
-            setCaptchaText(res.data.text || '');
+            setCaptchaSvg(res.data?.data?.svg || '');
+            setCaptchaText(res.data?.data?.text || '');
         } catch (err) {
             console.error('Error fetching captcha:', err);
         }
@@ -57,8 +58,8 @@ const SignIn = () => {
                 withCredentials: true,
             });
 
-            const user = res?.data?.user || res?.user;
+            const user = res?.data?.data?.user || res?.user;
-            const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
+            const accessToken = res?.data?.data?.accessToken || res?.tokens?.accessToken;
 
             if (user && accessToken) {
                 localStorage.setItem('token', accessToken);

src/pages/blank/RedirectWa.jsx

@@ -0,0 +1,49 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { verifyRedirect } from '../../api/auth';
+import { encryptData } from '../../components/Global/Formatter';
+import NotFound from './NotFound';
+import Waiting from './Waiting';
+import NotificationDetailTab from '../notificationDetail/IndexNotificationDetail';
+
+export default function RedirectWa() {
+    const [idData, setIdData] = useState(0);
+    const [ready, setReady] = useState(0);
+
+    const location = useLocation();
+
+    // URLSearchParams untuk ambil query
+    const queryParams = new URLSearchParams(location.search);
+    const token = queryParams.get('token');
+
+    const handleInitForm = async (encodedToken) => {
+        const originalToken = decodeURIComponent(encodedToken);
+        // console.log(originalToken);
+
+        const response = await verifyRedirect({
+            tokenRedirect: originalToken,
+        });
+
+        console.log('tes', response);
+
+        const tokenResult = JSON.stringify(response.data?.data?.accessToken);
+
+        sessionStorage.setItem('token_redirect', tokenResult);
+        response.data.auth = true;
+        sessionStorage.setItem('session', encryptData(response?.data));
+
+        setIdData(response.data.data.idData);
+
+        setReady(1);
+    };
+
+    useEffect(() => {
+        handleInitForm(token);
+    }, [idData]);
+
+    if (ready == 0) return <Waiting />;
+
+    if (idData === 0) return <NotFound />;
+
+    return <NotificationDetailTab id={idData} />;
+}

src/pages/contact/IndexContact.jsx

@@ -0,0 +1,72 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListContact from './component/ListContact';
+import DetailContact from './component/DetailContact';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexContact = memo(function IndexContact() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+    const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+    const [contactType, setContactType] = useState('operator');
+
+    const setMode = (param) => {
+        setShowModal(param !== 'list');
+        setReadOnly(param === 'preview');
+        setActionMode(param);
+    };
+
+    const handleContactSaved = (contactData, actionMode) => {
+        setLastSavedContact({ contactData, actionMode });
+
+        // Clear after processing
+        setTimeout(() => setLastSavedContact(null), 100);
+    };
+
+    const [lastSavedContact, setLastSavedContact] = useState(null);
+
+    
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Contact</Text> },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    return (
+        <React.Fragment>
+            <ListContact
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                lastSavedContact={lastSavedContact}
+                setContactType={setContactType}
+            />
+            <DetailContact
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+                onContactSaved={handleContactSaved}
+                contactType={contactType}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexContact;

src/pages/contact/component/DetailContact.jsx

@@ -0,0 +1,272 @@
+import React, { memo, useEffect, useState } from 'react';
+import { Modal, Input, Button, Switch, ConfigProvider, Typography, Divider, Select } from 'antd';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+import { validateRun } from '../../../Utils/validate';
+import { createContact, updateContact } from '../../../api/contact';
+
+const { Text } = Typography;
+
+const DetailContact = memo(function DetailContact(props) {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        id: '',
+        name: '',
+        phone: '',
+        is_active: true,
+    };
+
+    const [formData, setFormData] = useState(defaultData);
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+
+        // Validasi untuk field phone - hanya angka yang diperbolehkan
+        if (name === 'phone') {
+            const cleanedValue = value.replace(/[^0-9+\-\s()]/g, '');
+            setFormData((prev) => ({
+                ...prev,
+                [name]: cleanedValue,
+            }));
+        } else {
+            setFormData((prev) => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
+    };
+
+  
+    const handleStatusToggle = (checked) => {
+        setFormData({
+            ...formData,
+            is_active: checked,
+        });
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        // Validation rules
+        const validationRules = [
+            { field: 'name', label: 'Contact Name', required: true },
+            { field: 'phone', label: 'Phone', required: true },
+        ];
+
+        if (
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
+                setConfirmLoading(false);
+            })
+        )
+            return;
+
+        // Custom validation untuk name - minimal 3 karakter
+        if (formData.name && formData.name.length < 3) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Nama contact minimal 3 karakter',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Custom validation untuk phone - Indonesian phone format
+        const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
+        if (formData.phone && !phoneRegex.test(formData.phone.replace(/[\s\-\(\)]/g, ''))) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Nomor telepon harus format Indonesia (+628XXXXXXXXX atau 08XXXXXXXXX)',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        try {
+            const contactData = {
+                contact_name: formData.name,
+                contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
+                is_active: formData.is_active,
+            };
+
+            let response;
+            if (props.actionMode === 'edit') {
+                response = await updateContact(
+                    props.selectedData.contact_id || props.selectedData.id,
+                    contactData
+                );
+            } else {
+                response = await createContact(contactData);
+            }
+
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Data Contact "${formData.name}" berhasil ${
+                    props.actionMode === 'add' ? 'ditambahkan' : 'diperbarui'
+                }.`,
+            });
+
+            props.onContactSaved?.(response.data, props.actionMode);
+            handleCancel();
+        } catch (error) {
+            console.error('Save failed:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.response?.data?.message || 'Terjadi kesalahan saat menyimpan data.',
+            });
+        } finally {
+            setConfirmLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        props.setActionMode('list');
+        props.setSelectedData(null);
+    };
+
+    useEffect(() => {
+        if (props.showModal) {
+            if (props.actionMode === 'edit' && props.selectedData) {
+                setFormData({
+                    name: props.selectedData.contact_name || props.selectedData.name,
+                    phone: props.selectedData.contact_phone || props.selectedData.phone,
+                    is_active:
+                        props.selectedData.is_active || props.selectedData.status === 'active',
+                });
+            } else if (props.actionMode === 'add') {
+                setFormData({
+                    name: '',
+                    phone: '',
+                    is_active: true,
+                });
+            }
+        }
+    }, [props.showModal, props.actionMode, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'edit'
+                    ? 'Edit'
+                    : 'Detail'
+            } Kontak`}
+            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>,
+            ]}
+        >
+            <div style={{ padding: '8px 0' }}>
+                {/* Status field only show in add mode*/}
+                {props.actionMode === 'add' && (
+                    <>
+                        <div>
+                            <div>
+                                <Text strong>Status</Text>
+                            </div>
+                            <div
+                                style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}
+                            >
+                                <div style={{ marginRight: '8px' }}>
+                                    <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>Name</Text>
+                    <Text style={{ color: 'red' }}> *</Text>
+                    <Input
+                        name="name"
+                        value={formData.name}
+                        onChange={handleInputChange}
+                        placeholder="Enter Name"
+                        readOnly={props.readOnly}
+                    />
+                </div>
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Phone</Text>
+                    <Text style={{ color: 'red' }}> *</Text>
+                    <Input
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleInputChange}
+                        placeholder="Enter Phone Number"
+                        readOnly={props.readOnly}
+                        maxLength={15}
+                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
+                    />
+                </div>
+                {/* Contact Type */}
+                {/* <div style={{ marginBottom: 12 }}>
+                    <Text strong>Contact Type</Text>
+                    <Text style={{ color: 'red' }}> *</Text>
+                    <Select
+                        value={formData.contact_type || undefined}
+                        onChange={handleContactTypeChange}
+                        placeholder="Select Contact Type"
+                        disabled={props.readOnly}
+                        style={{ width: '100%' }}
+                    >
+                        <Select.Option value="operator">Operator</Select.Option>
+                        <Select.Option value="gudang">Gudang</Select.Option>
+                    </Select>
+                </div> */}
+            </div>
+        </Modal>
+    );
+});
+
+export default DetailContact;

src/pages/contact/component/ListContact.jsx

@@ -0,0 +1,487 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Row, Col, Input, Tabs, Space, ConfigProvider, Card, Tag, Switch } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    UserOutlined,
+    PhoneOutlined,
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { getAllContact, deleteContact, updateContact } from '../../../api/contact';
+
+const ContactCard = memo(function ContactCard({
+    contact,
+    showEditModal,
+    showDeleteModal,
+    onStatusToggle,
+}) {
+    const handleStatusToggle = async (checked) => {
+        try {
+            const updatedContact = {
+                contact_name: contact.contact_name || contact.name,
+                contact_phone: contact.contact_phone || contact.phone,
+                is_active: checked,
+                contact_type: contact.contact_type,
+            };
+
+            await updateContact(contact.contact_id || contact.id, updatedContact);
+
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Status "${contact.contact_name || contact.name}" berhasil diperbarui.`,
+            });
+
+            // Refresh contacts list
+            onStatusToggle && onStatusToggle();
+        } catch (error) {
+            console.error('Error updating contact status:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memperbarui status kontak',
+            });
+        }
+    };
+
+    return (
+        <Col xs={24} sm={12} md={8} lg={6}>
+            <div
+                className="contact-card"
+                style={{
+                    marginBottom: 16,
+                    borderRadius: 8,
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    height: '100%',
+                    padding: '16px',
+                    backgroundColor: '#f5f5f5',
+                    border: '1px solid #e8e8e8',
+                    transition: 'all 0.3s ease',
+                    cursor: 'pointer',
+                }}
+                onMouseEnter={(e) => {
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+                }}
+                onMouseLeave={(e) => {
+                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+                }}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        position: 'relative',
+                    }}
+                >
+                    {/* Type Badge - Top Left */}
+                    {/* <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
+                        <Tag
+                            color={
+                                contact.contact_type === 'operator'
+                                    ? 'blue'
+                                    : contact.contact_type === 'gudang'
+                                    ? 'orange'
+                                    : 'default'
+                            }
+                            style={{ fontSize: '11px' }}
+                        >
+                            {contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
+                        </Tag>
+                    </div> */}
+
+                    {/* Status Slider - Top Right */}
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            zIndex: 1,
+                            padding: '4px 8px',
+                        }}
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <Switch
+                                checked={contact.status === 'active'}
+                                onChange={handleStatusToggle}
+                                style={{
+                                    backgroundColor:
+                                        contact.status === 'active' ? '#52c41a' : '#d9d9d9',
+                                }}
+                            />
+                            <span
+                                style={{
+                                    fontSize: '12px',
+                                    color: contact.status === 'active' ? '#52c41a' : '#ff4d4f',
+                                    fontWeight: 500,
+                                }}
+                            >
+                                {contact.status === 'active' ? 'Active' : 'Inactive'}
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Main Content */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 12,
+                            flex: 1,
+                            paddingTop: '28px',
+                        }}
+                    >
+                        <div
+                            className="avatar"
+                            style={{
+                                width: 55,
+                                height: 55,
+                                borderRadius: '50%',
+                                backgroundColor:
+                                    contact.status === 'active' ? '#52c41a' : '#ff4d4f',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0,
+                            }}
+                        >
+                            <UserOutlined style={{ color: 'white', fontSize: '25px' }} />
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                            <div
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: '16px',
+                                    marginBottom: '4px',
+                                    color: '#262626',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }}
+                            >
+                                {contact.contact_name || contact.name}
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    fontSize: '14px',
+                                }}
+                            >
+                                <PhoneOutlined style={{ marginRight: 6, color: '#1890ff' }} />
+                                <span
+                                    style={{
+                                        color: contact.status === 'active' ? '#262626' : '#262626',
+                                    }}
+                                >
+                                    {contact.contact_phone || contact.phone}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Edit and Delete Buttons - Bottom Right */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: '8px',
+                            marginTop: '8px',
+                        }}
+                    >
+                        <Space>
+                            <Button
+                                type="default"
+                                size="small"
+                                style={{
+                                    backgroundColor: '#fff7e6',
+                                    borderColor: '#faad14',
+                                    color: '#faad14',
+                                    padding: '2px 6px',
+                                    fontSize: '11px',
+                                    height: '24px',
+                                }}
+                                icon={
+                                    <EditOutlined style={{ color: '#faad14', fontSize: '11px' }} />
+                                }
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    showEditModal(contact);
+                                }}
+                            >
+                                Edit info
+                            </Button>
+                            <Button
+                                type="default"
+                                danger
+                                size="small"
+                                style={{
+                                    backgroundColor: '#fff1f0',
+                                    borderColor: 'red',
+                                    padding: '2px 6px',
+                                    fontSize: '11px',
+                                    height: '24px',
+                                }}
+                                icon={<DeleteOutlined style={{ fontSize: '11px' }} />}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    showDeleteModal(contact);
+                                }}
+                            >
+                                Delete
+                            </Button>
+                        </Space>
+                    </div>
+                </div>
+            </div>
+        </Col>
+    );
+});
+
+const ListContact = memo(function ListContact(props) {
+    const [activeTab, setActiveTab] = useState('all');
+    const [filteredContacts, setFilteredContacts] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+
+    // Default filter object matching plantSection pattern
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+
+    // Fetch contacts from API
+    const fetchContacts = async () => {
+        setLoading(true);
+        try {
+            // Build search parameters matching database pattern
+            const searchParams = { ...formDataFilter };
+
+            // Add specific filters if not "all"
+            if (activeTab !== 'all') {
+                if (activeTab === 'operator') {
+                    searchParams.code = 'operator';
+                } else if (activeTab === 'gudang') {
+                    searchParams.code = 'gudang';
+                }
+            }
+
+            const queryParams = new URLSearchParams();
+            Object.entries(searchParams).forEach(([key, value]) => {
+                if (value !== '' && value !== null && value !== undefined) {
+                    queryParams.append(key, value);
+                }
+            });
+
+            const response = await getAllContact(queryParams);
+            setFilteredContacts(response.data || []);
+        } catch (error) {
+            console.error('Error fetching contacts:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memuat data kontak',
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Fetch contacts on component mount
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
+            return;
+        }
+        fetchContacts();
+    }, []);
+
+    // Refetch when filters change
+    useEffect(() => {
+        fetchContacts();
+    }, [formDataFilter, activeTab]);
+
+    // Listen for saved contact data
+    useEffect(() => {
+        if (props.lastSavedContact) {
+            fetchContacts();
+        }
+    }, [props.lastSavedContact]);
+
+    const getFilteredContacts = () => {
+        return filteredContacts;
+    };
+
+    const showEditModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+
+        props.setContactType?.(activeTab);
+    };
+
+    const showDeleteModal = (contact) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi Hapus',
+            message: `Kontak "${contact.contact_name || contact.name}" akan dihapus?`,
+            onConfirm: () => handleDelete(contact),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (contact) => {
+        try {
+            await deleteContact(contact.contact_id || contact.id);
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Kontak "${contact.contact_name || contact.name}" berhasil dihapus.`,
+            });
+            // Refetch contacts after deletion
+            fetchContacts();
+        } catch (error) {
+            console.error('Error deleting contact:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal menghapus kontak',
+            });
+        }
+    };
+
+    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 by name..."
+                                    value={formDataFilter.criteria}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setFormDataFilter({ criteria: value });
+                                        if (value === '') {
+                                            setFormDataFilter(defaultFilter);
+                                        }
+                                    }}
+                                    onSearch={(value) => setFormDataFilter({ criteria: value })}
+                                    allowClear={{
+                                        clearIcon: (
+                                            <span onClick={() => setFormDataFilter(defaultFilter)}>
+                                                ✕
+                                            </span>
+                                        ),
+                                    }}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Add Contact
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} style={{ marginTop: '16px' }}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            {/* Tabs  */}
+                            {/* <Tabs
+                                activeKey={activeTab}
+                                onChange={setActiveTab}
+                                size="large"
+                                items={[
+                                    {
+                                        key: 'all',
+                                        label: 'All',
+                                    },
+                                    {
+                                        key: 'operator',
+                                        label: 'Operator',
+                                    },
+                                    {
+                                        key: 'gudang',
+                                        label: 'Gudang',
+                                    },
+                                ]}
+                            /> */}
+                        </div>
+
+                        {getFilteredContacts().length === 0 ? (
+                            <div style={{ textAlign: 'center', padding: '40px' }}>
+                                <span style={{ color: '#8c8c8c' }}>
+                                    {loading ? 'Loading contacts...' : 'No contacts found'}
+                                </span>
+                            </div>
+                        ) : (
+                            <Row gutter={[16, 16]}>
+                                {getFilteredContacts().map((contact) => (
+                                    <ContactCard
+                                        key={contact.contact_id || contact.id}
+                                        contact={{
+                                            ...contact,
+                                            id: contact.contact_id || contact.id,
+                                            name: contact.contact_name || contact.name,
+                                            phone: contact.contact_phone || contact.phone,
+                                            status: contact.is_active ? 'active' : 'inactive',
+                                        }}
+                                        showEditModal={showEditModal}
+                                        showDeleteModal={showDeleteModal}
+                                        onStatusToggle={fetchContacts}
+                                    />
+                                ))}
+                            </Row>
+                        )}
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListContact;

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/eventAlarm/component/ListEventAlarm.jsx

@@ -1,246 +0,0 @@
-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';
-
-// Dummy data untuk riwayat alarm
-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',
-            key: 'no',
-            width: '5%',
-            align: 'center',
-            render: (_, __, index) => index + 1,
-        },
-        {
-            title: 'Tanggal',
-            dataIndex: 'tanggal',
-            key: 'tanggal',
-            width: '15%',
-        },
-        {
-            title: 'Plant Sub Section',
-            dataIndex: 'plant_sub_section',
-            key: 'plant_sub_section',
-            width: '25%',
-        },
-        {
-            title: 'Device',
-            dataIndex: 'device',
-            key: 'device',
-            width: '15%',
-        },
-        {
-            title: 'Tag',
-            dataIndex: 'tag',
-            key: 'tag',
-            width: '15%',
-        },
-        {
-            title: 'Engineer',
-            dataIndex: 'engineer',
-            key: 'engineer',
-            width: '15%',
-        },
-    ];
-    const [trigerFilter, setTrigerFilter] = useState(false);
-    const [alarmsData] = useState(initialAlarmsData);
-
-    const defaultFilter = { search: '' };
-    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
-    const [searchValue, setSearchValue] = useState('');
-
-    const navigate = useNavigate();
-
-    // Dummy data function to simulate API call
-    const getAllEventAlarm = async (params) => {
-        // Simulate API delay
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        // Extract URLSearchParams
-        const searchParam = params.get('search') || '';
-        const page = parseInt(params.get('page')) || 1;
-        const limit = parseInt(params.get('limit')) || 10;
-
-        console.log('getAllEventAlarm called with:', { searchParam, page, limit });
-
-        // Filter by search
-        let filteredAlarms = alarmsData;
-        if (searchParam) {
-            const searchLower = searchParam.toLowerCase();
-            filteredAlarms = alarmsData.filter(
-                (alarm) =>
-                    alarm.tanggal.toLowerCase().includes(searchLower) ||
-                    alarm.plant_sub_section.toLowerCase().includes(searchLower) ||
-                    alarm.device.toLowerCase().includes(searchLower) ||
-                    alarm.tag.toLowerCase().includes(searchLower) ||
-                    alarm.engineer.toLowerCase().includes(searchLower)
-            );
-        }
-
-        // Pagination logic
-        const totalData = filteredAlarms.length;
-        const totalPages = Math.ceil(totalData / limit);
-        const startIndex = (page - 1) * limit;
-        const endIndex = startIndex + limit;
-        const paginatedData = filteredAlarms.slice(startIndex, endIndex);
-
-        return {
-            status: 200,
-            statusCode: 200,
-            data: {
-                data: paginatedData,
-                total: totalData,
-                paging: {
-                    page: page,
-                    limit: limit,
-                    total: totalData,
-                    page_total: totalPages,
-                },
-            },
-        };
-    };
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            if (props.actionMode == 'list') {
-                setFormDataFilter(defaultFilter);
-                doFilter();
-            }
-        } else {
-            navigate('/signin');
-        }
-    }, [props.actionMode, alarmsData]);
-
-    const doFilter = () => {
-        setTrigerFilter((prev) => !prev);
-    };
-
-    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 alarm by tanggal, plant, device, tag, engineer..."
-                                    value={searchValue}
-                                    onChange={(e) => {
-                                        const value = e.target.value;
-                                        setSearchValue(value);
-                                        // Auto search when clearing by backspace/delete
-                                        if (value === '') {
-                                            setFormDataFilter({ search: '' });
-                                            setTrigerFilter((prev) => !prev);
-                                        }
-                                    }}
-                                    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 ListEventAlarm;

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,158 @@
+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';
+import { getAllHistoryAlarm } from '../../../../api/history-value';
+
+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: '15%',
+            // render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
+        },
+        {
+            title: 'Tag Name',
+            dataIndex: 'tag_name',
+            key: 'tag_name',
+            width: '40%',
+        },
+        {
+            title: 'Value',
+            dataIndex: 'new_val',
+            key: 'new_val',
+            width: '10%',
+            render: (_, record) => Number(record.new_val).toFixed(4),
+        },
+        {
+            title: 'Threshold',
+            dataIndex: 'threshold',
+            key: 'threshold',
+            width: '10%',
+            render: (_, record) => {
+                switch (record.status) {
+                    case 1:
+                        return (
+                            <span>
+                                {record.lim_low} : {record.lim_high}
+                            </span>
+                        );
+                    case 2:
+                        return <span>{`< ${record.lim_low_crash}`}</span>;
+                    case 3:
+                        return (
+                            <span>
+                                {record.lim_low_crash} : {record.lim_low}
+                            </span>
+                        );
+                    case 4:
+                        return (
+                            <span>
+                                {record.lim_high} : {record.lim_high_crash}
+                            </span>
+                        );
+                    case 5:
+                        return <span>{`> ${record.lim_high_crash}`}</span>;
+                    default:
+                        return <span>Undefined</span>;
+                }
+            },
+        },
+        {
+            title: 'Condition',
+            dataIndex: 'condition',
+            key: 'condition',
+            width: '20%',
+            render: (_, record) => (
+                <Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
+                    {record.condition}
+                </Button>
+            ),
+        },
+        {
+            title: 'Stat',
+            dataIndex: 'status',
+            key: 'status',
+            width: '5%',
+        },
+    ];
+
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        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={getAllHistoryAlarm}
+                            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

@@ -0,0 +1,117 @@
+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';
+import { getAllHistoryEvent } from '../../../../api/history-value';
+
+const ListHistoryEvent = memo(function ListHistoryEvent(props) {
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Datetime',
+            dataIndex: 'datetime',
+            key: 'datetime',
+            width: '15%',
+            // render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
+        },
+        {
+            title: 'Tag Name',
+            dataIndex: 'tagname',
+            key: 'tagname',
+            width: '40%',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+            width: '20%',
+            render: (_, record) => (
+                <Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
+                    {record.description}
+                </Button>
+            ),
+        },
+        {
+            title: 'Stat',
+            dataIndex: 'status',
+            key: 'status',
+            width: '5%',
+        },
+    ];
+
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        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={getAllHistoryEvent}
+                            queryParams={formDataFilter}
+                            columns={columns}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+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/home/SvgAirDryerA.jsx

@@ -3,11 +3,12 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/air_dryer_A_rev.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/air_dryer_A_rev.svg';
+// const filePathSvg = '/src/assets/svg/air_dryer_A_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_A';
 
 const SvgAirDryerA = () => {
     return (

src/pages/home/SvgAirDryerB.jsx

@@ -3,11 +3,12 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/air_dryer_B_rev.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/air_dryer_B_rev.svg';
+// const filePathSvg = '/src/assets/svg/air_dryer_B_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_B';
 
 const SvgAirDryerB = () => {
     return (

src/pages/home/SvgAirDryerC.jsx

@@ -3,11 +3,12 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/air_dryer_C_rev.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/air_dryer_C_rev.svg';
+// const filePathSvg = '/src/assets/svg/air_dryer_C_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_C';
 
 const SvgAirDryerC = () => {
     return (

src/pages/home/SvgCompressorA.jsx

@@ -3,11 +3,12 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/compressorA_rev.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/test-new.svg';
+// const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
 
 const SvgCompressorA = () => {
     return (

src/pages/home/SvgCompressorB.jsx

@@ -3,11 +3,10 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/compressorB_rev.svg';
 
 const { Text } = Typography;
-
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
-const filePathSvg = '/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgCompressorB = () => {
     return (

src/pages/home/SvgCompressorC.jsx

@@ -3,11 +3,12 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/compressorC_rev.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/test-new.svg';
+// const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
 
 const SvgCompressorC = () => {
     return (

src/pages/home/SvgOverviewAirDryer.jsx

@@ -3,13 +3,14 @@ import { Card, Typography, Flex } from 'antd';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import SvgTemplate from './SvgTemplate';
 import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/overview-airdryer.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/test-new.svg';
+// const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
 
-const SvgOverview = () => {
+const SvgOverviewAirDryer = () => {
     return (
         <SvgTemplate>
             <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
@@ -17,4 +18,4 @@ const SvgOverview = () => {
     );
 };
 
-export default SvgOverview;
+export default SvgOverviewAirDryer;

src/pages/home/SvgOverviewCompressor.jsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+import filePathSvg from '../../assets/svg/overview-compressor.svg';
+
+const { Text } = Typography;
+
+// const filePathSvg = '/src/assets/svg/test-new.svg';
+const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
+
+const SvgOverviewCompressor = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgOverviewCompressor;

src/pages/home/SvgTest.jsx

@@ -3,10 +3,11 @@ import { Card, Typography, Flex } from 'antd';
 // import { ReactSVG } from 'react-svg';
 import { setValSvg } from '../../components/Global/MqttConnection';
 import { ReactSVG } from 'react-svg';
+import filePathSvg from '../../assets/svg/test-new.svg';
 
 const { Text } = Typography;
 
-const filePathSvg = '/svg/test-new.svg';
+// const filePathSvg = '/src/assets/svg/test-new.svg';
 const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgTest = () => {

src/pages/jadwalShift/component/DetailJadwalShift.jsx

@@ -1,68 +1,164 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { Modal, Select, Typography, Button, ConfigProvider } from 'antd';
-    Modal,
-    Input,
-    Typography,
-    Button,
-    ConfigProvider,
-    Row,
-    Col
-} from 'antd';
 import { NotifOk } from '../../../components/Global/ToastNotif';
+import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
+import { getAllUser } from '../../../api/user';
+import { getAllShift } from '../../../api/master-shift';
+import { validateRun } from '../../../Utils/validate';
 
 const { Text } = Typography;
+const { Option } = Select;
 
 const DetailJadwalShift = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [employees, setEmployees] = useState([]);
+    const [shifts, setShifts] = useState([]);
+    const [loadingData, setLoadingData] = useState(false);
 
     const defaultData = {
         id: '',
-        nama_shift: '',
+        user_id: null,
-        jam_masuk: '',
+        shift_id: null,
-        jam_pulang: '',
+        schedule_id: '',
-        username: '',
+        user_phone: null,
-        nama_employee: '',
-        whatsapp: ''
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
+
+    const handleSelectChange = (name, value) => {
+        const updates = { [name]: value };
+
+        if (name === 'user_id') {
+            const selectedEmployee = employees.find((emp) => emp.user_id === value);
+            updates.user_phone = selectedEmployee?.user_phone || '-';
+        }
+
+        setFormData({
+            ...formData,
+            ...updates,
+        });
+    };
 
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
     };
 
+    const fetchData = async () => {
+        setLoadingData(true);
+        try {
+            const params = new URLSearchParams({
+                page: 1,
+                limit: 100,
+            });
+
+            const [usersResponse, shiftsResponse] = await Promise.all([
+                getAllUser(params),
+                getAllShift(params),
+            ]);
+
+            const userData = usersResponse?.data || usersResponse || [];
+            const shiftData = shiftsResponse?.data || shiftsResponse || [];
+
+            setEmployees(Array.isArray(userData) ? userData : []);
+            setShifts(Array.isArray(shiftData) ? shiftData : []);
+        } catch (error) {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal memuat data karyawan atau shift.',
+            });
+        } finally {
+            setLoadingData(false);
+        }
+    };
+
     const handleSave = async () => {
         setConfirmLoading(true);
-        // This is a dummy save function for slicing purposes
+
-        setTimeout(() => {
+        // Daftar aturan validasi
-            setConfirmLoading(false);
+        const validationRules = [
+            { field: 'user_id', label: 'Nama Karyawan', required: true },
+            { field: 'shift_id', label: 'Shift', required: true },
+        ];
+
+        if (
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: errorMessages,
+                });
+                setConfirmLoading(false);
+            })
+        )
+            return;
+
+        try {
+            const payload = {
+                user_id: formData.user_id,
+                shift_id: formData.shift_id,
+            };
+
+            // Add schedule_id only if editing and it exists
+            if (props.actionMode === 'edit' && formData.schedule_id) {
+                payload.schedule_id = formData.schedule_id;
+            }
+
+            const response =
+                props.actionMode === 'edit'
+                    ? await updateJadwalShift(formData.id, payload)
+                    : await createJadwalShift(payload);
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
+
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Jadwal berhasil ${action}.`,
+                });
+
+                props.setActionMode('list');
+            } else {
+                NotifOk({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
+        } catch (error) {
             NotifOk({
-                icon: 'success',
+                icon: 'error',
-                title: 'Berhasil',
+                title: 'Error',
-                message: 'Data dummy berhasil disimpan.',
+                message: error.message || 'Terjadi kesalahan pada server.',
             });
-            props.setActionMode('list');
+        } finally {
-        }, 1000);
+            setConfirmLoading(false);
+        }
     };
 
     useEffect(() => {
+        if (props.showModal) {
+            fetchData();
+        }
+
         if (props.selectedData) {
-            setFormData(props.selectedData);
+            setFormData({
+                id: props.selectedData.id || '',
+                user_id: props.selectedData.user_id || null,
+                shift_id: props.selectedData.shift_id || null,
+                schedule_id: props.selectedData.schedule_id || '',
+                user_phone: props.selectedData.whatsapp || props.selectedData.user_phone || null,
+            });
         } else {
             setFormData(defaultData);
         }
-    }, [props.showModal, props.selectedData]);
+    }, [props.showModal, props.selectedData, props.actionMode]);
-
-    // Dummy handler for slicing
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData({ ...FormData, [name]: value });
-    };
 
     return (
         <Modal
-            title={`${ 
+            title={`${
                 props.actionMode === 'add'
                     ? 'Tambah'
                     : props.actionMode === 'preview'
@@ -71,7 +167,6 @@ const DetailJadwalShift = (props) => {
             } Jadwal Shift`}
             open={props.showModal}
             onCancel={handleCancel}
-            width={800}
             footer={[
                 <React.Fragment key="modal-footer">
                     <ConfigProvider
@@ -107,64 +202,75 @@ const DetailJadwalShift = (props) => {
                 </React.Fragment>,
             ]}
         >
-            {FormData && (
+            {formData && (
                 <div>
-                    <Row gutter={[16, 16]}>
+                    <div style={{ marginBottom: 12 }}>
-                        <Col span={12}>
+                        <Text strong>Nama Karyawan</Text>
-                            <Text strong>Nama Karyawan</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
-                            <Input
+                        <Select
-                                name="nama_employee"
+                            value={formData.user_id}
-                                value={FormData.nama_employee}
+                            onChange={(value) => handleSelectChange('user_id', value)}
-                                onChange={handleInputChange}
+                            placeholder="Pilih karyawan"
-                                readOnly={props.readOnly}
+                            disabled={props.readOnly || loadingData}
-                            />
+                            loading={loadingData}
-                        </Col>
+                            showSearch
-                        <Col span={12}>
+                            optionFilterProp="children"
-                            <Text strong>Username</Text>
+                            filterOption={(input, option) =>
-                            <Input
+                                option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                                name="username"
+                            }
-                                value={FormData.username}
+                            style={{ width: '100%' }}
-                                onChange={handleInputChange}
+                        >
-                                readOnly={props.readOnly}
+                            {employees
-                            />
+                                .filter((emp) => emp.user_id != null)
-                        </Col>
+                                .map((emp) => (
-                        <Col span={12}>
+                                    <Option key={`emp-${emp.user_id}`} value={emp.user_id}>
-                            <Text strong>Nama Shift</Text>
+                                        {emp.user_fullname || emp.user_name}
-                            <Input
+                                    </Option>
-                                name="nama_shift"
+                                ))}
-                                value={FormData.nama_shift}
+                        </Select>
-                                onChange={handleInputChange}
+                    </div>
-                                readOnly={props.readOnly}
+
-                            />
+                    <div style={{ marginBottom: 12 }}>
-                        </Col>
+                        <Text strong>No. Telepon</Text>
-                        <Col span={12}>
+                        <div
-                            <Text strong>Whatsapp</Text>
+                            style={{
-                            <Input
+                                padding: '8px 12px',
-                                name="whatsapp"
+                                backgroundColor: '#f5f5f5',
-                                value={FormData.whatsapp}
+                                borderRadius: '6px',
-                                onChange={handleInputChange}
+
-                                readOnly={props.readOnly}
+                                marginTop: '4px',
-                            />
+                                color: formData.user_phone ? '#000' : '#999',
-                        </Col>
+                            }}
-                        <Col span={12}>
+                        >
-                            <Text strong>Jam Masuk</Text>
+                            {formData.user_phone || 'Pilih karyawan terlebih dahulu'}
-                            <Input
+                        </div>
-                                name="jam_masuk"
+                    </div>
-                                value={FormData.jam_masuk}
+
-                                onChange={handleInputChange}
+                    <div style={{ marginBottom: 12 }}>
-                                readOnly={props.readOnly}
+                        <Text strong>Shift</Text>
-                            />
+                        <Text style={{ color: 'red' }}> *</Text>
-                        </Col>
+                        <Select
-                        <Col span={12}>
+                            value={formData.shift_id}
-                            <Text strong>Jam Pulang</Text>
+                            onChange={(value) => handleSelectChange('shift_id', value)}
-                            <Input
+                            placeholder="Pilih shift"
-                                name="jam_pulang"
+                            disabled={props.readOnly || loadingData}
-                                value={FormData.jam_pulang}
+                            loading={loadingData}
-                                onChange={handleInputChange}
+                            showSearch
-                                readOnly={props.readOnly}
+                            optionFilterProp="children"
-                            />
+                            filterOption={(input, option) =>
-                        </Col>
+                                option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    </Row>
+                            }
+                            style={{ width: '100%' }}
+                        >
+                            {shifts
+                                .filter((shift) => shift.shift_id != null)
+                                .map((shift) => (
+                                    <Option key={`shift-${shift.shift_id}`} value={shift.shift_id}>
+                                        {shift.shift_name}
+                                    </Option>
+                                ))}
+                        </Select>
+                    </div>
                 </div>
             )}
         </Modal>

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -1,115 +1,167 @@
 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,
+    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';
-import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
+import { getAllShift } from '../../../api/master-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 defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [groupedSchedules, setGroupedSchedules] = useState({});
+    const [loading, setLoading] = useState(false);
     const [searchValue, setSearchValue] = useState('');
+    const [selectedSchedules, setSelectedSchedules] = useState([]);
+    const [editingShift, setEditingShift] = useState(null);
+    const [pendingChanges, setPendingChanges] = useState({});
+    const [employeeOptions, setEmployeeOptions] = useState([]);
+    const [shiftOptions, setShiftOptions] = useState([]);
     const navigate = useNavigate();
 
-    const getData = async (queryParams) => {
+    const formatRelativeTimestamp = (timestamp) => {
-        try {
+        const now = new Date();
-            const params = new URLSearchParams({
+        const date = new Date(timestamp);
-                page: queryParams.page || 1,
+        const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-                limit: queryParams.limit || 10,
+        const startOfYesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
-                criteria: queryParams.criteria || ''
-            });
 
-            const response = await getAllJadwalShift(params);
+        let dayString;
-            return response;
+        if (date >= startOfToday) {
-        } catch (error) {
+            dayString = 'Hari ini';
-            console.error('Error fetching jadwal shift:', error);
+        } else if (date >= startOfYesterday) {
-            NotifAlert({
+            dayString = 'Kemarin';
-                icon: 'error',
+        } else {
-                title: 'Error',
+            dayString = date.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' });
-                message: 'Gagal mengambil data jadwal shift.',
+        }
-            });
+
-            return {
+        const timeString = date
-                status: 500,
+            .toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false })
-                data: {
+            .replace('.', ':');
-                    data: [],
+        return `${dayString}, ${timeString}`;
-                    paging: {
+    };
-                        page: 1,
+
-                        limit: 10,
+    const fetchData = async () => {
-                        total: 0,
+        setLoading(true);
-                        page_total: 0
+        try {
+            const paging = {
+                page: 1,
+                limit: 1000,
+            };
+
+            const params = new URLSearchParams({ ...paging, ...formDataFilter });
+
+            // Fetch both schedules and shifts data
+            const [schedulesResponse, shiftsResponse] = await Promise.all([
+                getAllJadwalShift(params),
+                getAllShift(params),
+            ]);
+
+            // Handle nested data structure from backend
+            const rawData = schedulesResponse?.data || schedulesResponse || [];
+            const shifts = shiftsResponse?.data || shiftsResponse || [];
+
+            setShiftOptions(shifts);
+
+            // Parse backend response structure: [{ shift: { shift_id, shift_name, users: [...] } }]
+            const grouped = {};
+            const allUsers = [];
+
+            rawData.forEach((item) => {
+                if (item.shift && item.shift.shift_name) {
+                    const shift = item.shift;
+                    const shiftName = shift.shift_name.toUpperCase().trim();
+
+                    // Initialize shift group
+                    if (!grouped[shiftName]) {
+                        grouped[shiftName] = {
+                            shift_id: shift.shift_id,
+                            users: [],
+                            lastUpdate: { user: 'N/A', timestamp: '1970-01-01T00:00:00Z' },
+                        };
+                    }
+
+                    // Process users in this shift
+                    if (shift.users && Array.isArray(shift.users)) {
+                        shift.users.forEach((user) => {
+                            const normalizedUser = {
+                                id: user.user_schedule_id,
+                                user_schedule_id: user.user_schedule_id,
+                                user_id: user.user_id,
+                                shift_id: shift.shift_id,
+                                shift_name: shift.shift_name,
+                                nama_employee: user.user_fullname || user.user_name || 'Unknown',
+                                whatsapp: user.user_phone || '-',
+                                user_fullname: user.user_fullname,
+                                user_name: user.user_name,
+                                user_phone: user.user_phone,
+                                updated_at: user.updated_at,
+                                created_at: user.created_at,
+                                updated_by: user.updated_by,
+                            };
+
+                            grouped[shiftName].users.push(normalizedUser);
+                            allUsers.push(normalizedUser);
+
+                            // Update last update timestamp
+                            const currentUpdate = new Date(
+                                user.updated_at || user.created_at || new Date()
+                            );
+                            const lastUpdate = new Date(grouped[shiftName].lastUpdate.timestamp);
+                            if (currentUpdate > lastUpdate) {
+                                grouped[shiftName].lastUpdate = {
+                                    user: user.updated_by || 'N/A',
+                                    timestamp: currentUpdate.toISOString(),
+                                };
+                            }
+                        });
                     }
                 }
-            };
+            });
+
+            setEmployeeOptions(allUsers);
+
+            // Add empty shifts that don't have users yet
+            shifts.forEach((shift) => {
+                const shiftName = shift.shift_name.toUpperCase().trim();
+                if (!grouped[shiftName]) {
+                    grouped[shiftName] = {
+                        shift_id: shift.shift_id,
+                        users: [],
+                        lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() },
+                    };
+                }
+            });
+
+            setGroupedSchedules(grouped);
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Gagal Memuat Data',
+                message: 'Terjadi kesalahan saat memuat data jadwal shift.',
+            });
+        } finally {
+            setLoading(false);
         }
     };
 
@@ -125,6 +177,12 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
         }
     }, [props.actionMode]);
 
+    useEffect(() => {
+        if (props.actionMode === 'list') {
+            fetchData();
+        }
+    }, [trigerFilter]);
+
     const doFilter = () => {
         setTrigerFilter((prev) => !prev);
     };
@@ -156,52 +214,150 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
     };
 
     const showDeleteDialog = (param) => {
-        const dateStr = param.schedule_date ? new Date(param.schedule_date).toLocaleDateString('id-ID') : 'tanggal tidak diketahui';
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi Hapus',
-            message: `Jadwal shift tanggal ${dateStr} akan dihapus?`,
+            message: `Jadwal untuk karyawan "${param.nama_employee}" akan dihapus?`,
-            onConfirm: () => handleDelete(param.schedule_id),
+            onConfirm: () => handleDelete(param.id),
             onCancel: () => props.setSelectedData(null),
         });
     };
 
     const handleDelete = async (id) => {
-        try {
+        const response = await deleteJadwalShift(id);
-            const response = await deleteJadwalShift(id);
+        if (response.statusCode === 200) {
-            if (response.statusCode === 200) {
+            NotifAlert({
-                NotifAlert({
+                icon: 'success',
-                    icon: 'success',
+                title: 'Berhasil',
-                    title: 'Berhasil',
+                message: 'Jadwal berhasil dihapus.',
-                    message: 'Data Jadwal Shift berhasil dihapus.',
+            });
-                });
+            doFilter();
-                doFilter();
+        } else {
-            } else {
-                NotifAlert({
-                    icon: 'error',
-                    title: 'Error',
-                    message: response.message || 'Gagal menghapus data jadwal shift.',
-                });
-            }
-        } catch (error) {
-            console.error('Error deleting jadwal shift:', error);
             NotifAlert({
                 icon: 'error',
-                title: 'Error',
+                title: 'Gagal',
-                message: 'Terjadi kesalahan saat menghapus data.',
+                message: response?.message || 'Gagal menghapus jadwal.',
             });
         }
     };
 
+    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 = (id, isChecked) => {
+        if (isChecked) {
+            setSelectedSchedules((prev) => [...prev, id]);
+        } else {
+            setSelectedSchedules((prev) => prev.filter((scheduleId) => scheduleId !== id));
+        }
+    };
+
+    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((id) => {
+            const originalSchedule = groupedSchedules[editingShift].users.find(
+                (u) => u.id.toString() === id
+            );
+            const changes = pendingChanges[id];
+
+            // Build payload according to backend schema
+            const payload = {
+                user_id: changes.user_id || originalSchedule.user_id,
+                shift_id: changes.shift_id || originalSchedule.shift_id,
+            };
+
+            if (originalSchedule.schedule_id) {
+                payload.schedule_id = originalSchedule.schedule_id;
+            }
+
+            return updateJadwalShift(id, payload);
+        });
+
+        try {
+            await Promise.all(updatePromises);
+            NotifOk({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Semua perubahan berhasil disimpan.',
+            });
+            doFilter();
+            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.`,
+                });
+                doFilter();
+                setEditingShift(null);
+                setSelectedSchedules([]);
+            },
+        });
+    };
+
     return (
         <React.Fragment>
             <Card>
-                <Row>
+                <Title level={3}>Jadwal Shift</Title>
+                <Divider />
+
+                {/* <Row>
                     <Col xs={24}>
-                        <Row justify="space-between" align="middle" gutter={[8, 8]}>
+                        <Row justify="end" align="middle" gutter={[8, 8]}>
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
-                                    placeholder="Cari jadwal shift..."
+                                    placeholder="Cari berdasarkan nama..."
                                     value={searchValue}
                                     onChange={(e) => {
                                         const value = e.target.value;
@@ -211,9 +367,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
                                         }
                                     }}
                                     onSearch={handleSearch}
-                                    allowClear={{
+                                    allowClear
-                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
-                                    }}
                                     enterButton={
                                         <Button
                                             type="primary"
@@ -222,56 +376,447 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
                                                 backgroundColor: '#23A55A',
                                                 borderColor: '#23A55A',
                                             }}
-                                        >
+                                        />
-                                            Search
-                                        </Button>
                                     }
                                     size="large"
                                 />
                             </Col>
-                            <Col>
-                                <Space wrap size="small">
-                                    <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' }}>
+                </Row> */}
-                        <TableList
+
-                            mobile
+                <div style={{ marginTop: '24px' }}>
-                            cardColor={'#42AAFF'}
+                    {loading ? (
-                            header={'schedule_date'}
+                        <Text>Memuat data...</Text>
-                            showPreviewModal={showPreviewModal}
+                    ) : Object.keys(groupedSchedules).length === 0 ? (
-                            showEditModal={showEditModal}
+                        <Text>Tidak ada data jadwal untuk ditampilkan.</Text>
-                            showDeleteDialog={showDeleteDialog}
+                    ) : (
-                            getData={getData}
+                        ['SHIFT PAGI', 'SHIFT SORE', 'SHIFT MALAM']
-                            queryParams={formDataFilter}
+                            .filter((shiftName) => groupedSchedules[shiftName])
-                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            .map((shiftName) => (
-                            triger={trigerFilter}
+                                <div key={shiftName} style={{ marginBottom: '32px' }}>
-                        />
+                                    {' '}
-                    </Col>
+                                    {/* Container for each shift section */}
-                </Row>
+                                    <Row
+                                        justify="space-between"
+                                        align="middle"
+                                        style={{
+                                            paddingBottom: '12px',
+                                            borderBottom: '1px solid #f0f0f0',
+                                            marginBottom: '16px',
+                                        }}
+                                    >
+                                        <Col>
+                                            <Title level={5} style={{ margin: 0 }}>
+                                                {shiftName} (
+                                                {groupedSchedules[shiftName].users.length} Karyawan)
+                                            </Title>
+                                        </Col>
+                                        {editingShift === shiftName ? (
+                                            <Col>
+                                                <Space wrap>
+                                                    <Button
+                                                        key="cancel"
+                                                        onClick={cancelShiftEditMode}
+                                                    >
+                                                        Batal
+                                                    </Button>
+                                                    <Button
+                                                        key="delete"
+                                                        type="primary"
+                                                        danger
+                                                        onClick={handleBulkDelete}
+                                                        disabled={selectedSchedules.length === 0}
+                                                    >
+                                                        Hapus Dipilih ({selectedSchedules.length})
+                                                    </Button>
+                                                    <Button
+                                                        key="save"
+                                                        type="primary"
+                                                        onClick={handleBulkSave}
+                                                        style={{
+                                                            backgroundColor: '#23A55A',
+                                                            borderColor: '#23A55A',
+                                                        }}
+                                                    >
+                                                        Simpan Perubahan
+                                                    </Button>
+                                                </Space>
+                                            </Col>
+                                        ) : (
+                                            <Col>
+                                                <Space wrap>
+                                                    <Button
+                                                        key="add"
+                                                        type="primary"
+                                                        icon={<PlusOutlined />}
+                                                        onClick={() => showAddModal()}
+                                                        style={{
+                                                            backgroundColor: '#23A55A',
+                                                            borderColor: '#23A55A',
+                                                        }}
+                                                        disabled={editingShift !== null}
+                                                    >
+                                                        Tambah Jadwal Shift
+                                                    </Button>
+                                                    <ConfigProvider
+                                                        key="edit-config"
+                                                        theme={{
+                                                            components: {
+                                                                Button: {
+                                                                    defaultBg: 'white',
+                                                                    defaultColor: '#23A55A',
+                                                                    defaultBorderColor: '#23A55A',
+                                                                },
+                                                            },
+                                                        }}
+                                                    >
+                                                        <Button
+                                                            icon={<EditOutlined />}
+                                                            onClick={() => handleShiftEditMode(shiftName)}
+                                                            disabled={editingShift !== null}
+                                                        >
+                                                            Edit
+                                                        </Button>
+                                                    </ConfigProvider>
+                                                </Space>
+                                            </Col>
+                                        )}
+                                    </Row>
+                                    {/* Horizontal scrollable container for employee cards */}
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            overflowX: 'auto',
+                                            gap: '16px',
+                                            paddingTop: '8px',
+                                            paddingBottom: '10px',
+                                            minWidth: `${4 * (320 + 16)}px`,
+                                        }}
+                                    >
+                                        {groupedSchedules[shiftName].users.length > 0 ? (
+                                            groupedSchedules[shiftName].users.map((user) => (
+                                                <Card
+                                                    key={user.id}
+                                                    hoverable
+                                                    style={{
+                                                        width: 320,
+                                                        height: 240,
+                                                        flexShrink: 0,
+                                                        textAlign: 'left',
+                                                        border: '1px solid #42AAFF',
+                                                        opacity:
+                                                            editingShift !== null &&
+                                                            editingShift !== shiftName
+                                                                ? 0.5
+                                                                : 1,
+                                                        pointerEvents:
+                                                            editingShift !== null &&
+                                                            editingShift !== shiftName
+                                                                ? 'none'
+                                                                : 'auto',
+                                                    }}
+                                                    styles={{
+                                                        body: { padding: '16px', height: '100%' },
+                                                    }}
+                                                >
+                                                    {editingShift === shiftName ? (
+                                                        // EDIT MODE VIEW
+                                                        <div
+                                                            style={{
+                                                                display: 'flex',
+                                                                height: '100%',
+                                                                gap: '12px',
+                                                                padding: '16px 4px',
+                                                            }}
+                                                        >
+                                                            <div
+                                                                style={{
+                                                                    display: 'flex',
+                                                                    alignItems: 'flex-start',
+                                                                    paddingTop: '8px',
+                                                                }}
+                                                            >
+                                                                <Checkbox
+                                                                    checked={selectedSchedules.includes(
+                                                                        user.id
+                                                                    )}
+                                                                    onChange={(e) =>
+                                                                        handleSelectSchedule(
+                                                                            user.id,
+                                                                            e.target.checked
+                                                                        )
+                                                                    }
+                                                                    style={{
+                                                                        transform: 'scale(1.4)',
+                                                                    }}
+                                                                />
+                                                            </div>
+                                                            <div
+                                                                style={{
+                                                                    flex: 1,
+                                                                    display: 'flex',
+                                                                    flexDirection: 'column',
+                                                                    justifyContent: 'center',
+                                                                    gap: '14px',
+                                                                    paddingRight: '4px',
+                                                                }}
+                                                            >
+                                                                <div>
+                                                                    <Text
+                                                                        strong
+                                                                        style={{
+                                                                            fontSize: '11px',
+                                                                            color: '#8c8c8c',
+                                                                            display: 'block',
+                                                                            marginBottom: '6px',
+                                                                        }}
+                                                                    >
+                                                                        KARYAWAN
+                                                                    </Text>
+                                                                    <Select
+                                                                        showSearch
+                                                                        style={{ width: '100%' }}
+                                                                        placeholder="Pilih Karyawan"
+                                                                        optionFilterProp="children"
+                                                                        defaultValue={user.user_id}
+                                                                        onChange={(value) =>
+                                                                            handleBulkUpdateChange(
+                                                                                user.id,
+                                                                                'user_id',
+                                                                                value
+                                                                            )
+                                                                        }
+                                                                        size="large"
+                                                                    >
+                                                                        {employeeOptions.map(
+                                                                            (emp) => (
+                                                                                <Select.Option
+                                                                                    key={
+                                                                                        emp.user_id ||
+                                                                                        emp.id
+                                                                                    }
+                                                                                    value={
+                                                                                        emp.user_id ||
+                                                                                        emp.id
+                                                                                    }
+                                                                                >
+                                                                                    {emp.user_fullname ||
+                                                                                        emp.user_name ||
+                                                                                        emp.nama_employee}
+                                                                                </Select.Option>
+                                                                            )
+                                                                        )}
+                                                                    </Select>
+                                                                </div>
+                                                                <div>
+                                                                    <Text
+                                                                        strong
+                                                                        style={{
+                                                                            fontSize: '11px',
+                                                                            color: '#8c8c8c',
+                                                                            display: 'block',
+                                                                            marginBottom: '6px',
+                                                                        }}
+                                                                    >
+                                                                        NO. TELEPON
+                                                                    </Text>
+                                                                    <Input
+                                                                        value={
+                                                                            pendingChanges[user.id]
+                                                                                ?.user_id
+                                                                                ? employeeOptions.find(
+                                                                                      (emp) =>
+                                                                                          emp.user_id ===
+                                                                                          pendingChanges[
+                                                                                              user
+                                                                                                  .id
+                                                                                          ]?.user_id
+                                                                                  )?.user_phone ||
+                                                                                  user.whatsapp
+                                                                                : user.whatsapp
+                                                                        }
+                                                                        readOnly
+                                                                        style={{
+                                                                            backgroundColor:
+                                                                                '#f5f5f5',
+                                                                            color: '#595959',
+                                                                            cursor: 'not-allowed',
+                                                                        }}
+                                                                        size="large"
+                                                                    />
+                                                                </div>
+                                                                <div>
+                                                                    <Text
+                                                                        strong
+                                                                        style={{
+                                                                            fontSize: '11px',
+                                                                            color: '#8c8c8c',
+                                                                            display: 'block',
+                                                                            marginBottom: '6px',
+                                                                        }}
+                                                                    >
+                                                                        SHIFT
+                                                                    </Text>
+                                                                    <Select
+                                                                        showSearch
+                                                                        style={{ width: '100%' }}
+                                                                        placeholder="Pilih Shift"
+                                                                        optionFilterProp="children"
+                                                                        defaultValue={user.shift_id}
+                                                                        onChange={(value) =>
+                                                                            handleBulkUpdateChange(
+                                                                                user.id,
+                                                                                'shift_id',
+                                                                                value
+                                                                            )
+                                                                        }
+                                                                        size="large"
+                                                                    >
+                                                                        {shiftOptions.map(
+                                                                            (shift) => (
+                                                                                <Select.Option
+                                                                                    key={
+                                                                                        shift.shift_id
+                                                                                    }
+                                                                                    value={
+                                                                                        shift.shift_id
+                                                                                    }
+                                                                                >
+                                                                                    {
+                                                                                        shift.shift_name
+                                                                                    }
+                                                                                </Select.Option>
+                                                                            )
+                                                                        )}
+                                                                    </Select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    ) : (
+                                                        // NORMAL VIEW
+                                                        <div
+                                                            style={{
+                                                                display: 'flex',
+                                                                flexDirection: 'column',
+                                                                justifyContent: 'space-between',
+                                                                height: '100%',
+                                                            }}
+                                                        >
+                                                            <div
+                                                                style={{
+                                                                    backgroundColor: '#42AAFF',
+                                                                    color: '#FFFFFF',
+                                                                    padding: '9px 12px',
+                                                                    borderRadius: '15px',
+                                                                    marginBottom: '8px',
+                                                                }}
+                                                            >
+                                                                <Text
+                                                                    strong
+                                                                    style={{
+                                                                        fontSize: '18px',
+                                                                        color: '#FFFFFF',
+                                                                        display: 'block',
+                                                                        marginBottom: '4px',
+                                                                    }}
+                                                                >
+                                                                    {user.nama_employee}
+                                                                </Text>
+                                                                <Text
+                                                                    style={{
+                                                                        fontSize: '14px',
+                                                                        color: '#FFFFFF',
+                                                                    }}
+                                                                >
+                                                                    {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(
+                                                                        user.updated_at ||
+                                                                            user.created_at ||
+                                                                            new Date()
+                                                                    )}{' '}
+                                                                    <br />
+                                                                    oleh {user.updated_by || 'N/A'}
+                                                                </Text>
+                                                                <Space>
+                                                                    <Button
+                                                                        type="text"
+                                                                        size="small"
+                                                                        icon={<EyeOutlined />}
+                                                                        onClick={() =>
+                                                                            showPreviewModal(user)
+                                                                        }
+                                                                        style={{
+                                                                            color: '#1890ff',
+                                                                            borderColor: '#1890ff',
+                                                                        }}
+                                                                        title="View"
+                                                                    />
+                                                                    <Button
+                                                                        type="text"
+                                                                        size="small"
+                                                                        icon={<EditOutlined />}
+                                                                        onClick={() =>
+                                                                            showEditModal(user)
+                                                                        }
+                                                                        style={{
+                                                                            color: '#faad14',
+                                                                            borderColor: '#faad14',
+                                                                        }}
+                                                                        title="Edit"
+                                                                    />
+                                                                    <Button
+                                                                        danger
+                                                                        type="text"
+                                                                        size="small"
+                                                                        icon={<DeleteOutlined />}
+                                                                        onClick={() =>
+                                                                            showDeleteDialog(user)
+                                                                        }
+                                                                        style={{
+                                                                            borderColor: '#ff4d4f',
+                                                                        }}
+                                                                        title="Delete"
+                                                                    />
+                                                                </Space>
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                </Card>
+                                            ))
+                                        ) : (
+                                            <Text type="secondary" style={{ marginLeft: '16px' }}>
+                                                Tidak ada karyawan yang dijadwalkan untuk shift ini.
+                                            </Text>
+                                        )}
+                                    </div>
+                                </div>
+                            ))
+                    )}
+                </div>
             </Card>
         </React.Fragment>
     );
 });
 
-export default ListJadwalShift;
+export default ListJadwalShift;

src/pages/master/brand/ErrorCode.jsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Card, Typography, Button, Modal, Form, Input, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import TableList from '../../../components/Global/TableList';
+// import { getAllErrorCodesByBrand, createErrorCode, updateErrorCode, deleteErrorCode } from '../../api/master-errorcode'; // Mock this later
+
+const { Title } = Typography;
+
+// Mock API functions for now
+const mockApi = {
+    errorCodes: [
+        { error_code_id: 1, brand_id: 1, error_code: 'E-001', description: 'Paper Jam' },
+        { error_code_id: 2, brand_id: 1, error_code: 'E-002', description: 'Low Ink' },
+    ],
+    getAllErrorCodesByBrand: async (brandId) => {
+        return { status: 200, data: { data: mockApi.errorCodes.filter(ec => ec.brand_id == brandId) } };
+    },
+    createErrorCode: async (data) => {
+        const newId = Math.max(...mockApi.errorCodes.map(ec => ec.error_code_id)) + 1;
+        const newErrorCode = { ...data, error_code_id: newId };
+        mockApi.errorCodes.push(newErrorCode);
+        return { statusCode: 201, data: newErrorCode };
+    },
+    updateErrorCode: async (id, data) => {
+        const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
+        if (index !== -1) {
+            mockApi.errorCodes[index] = { ...mockApi.errorCodes[index], ...data };
+            return { statusCode: 200, data: mockApi.errorCodes[index] };
+        }
+        return { statusCode: 404, message: 'Not Found' };
+    },
+    deleteErrorCode: async (id) => {
+        const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
+        if (index !== -1) {
+            mockApi.errorCodes.splice(index, 1);
+            return { statusCode: 200 };
+        }
+        return { statusCode: 404, message: 'Not Found' };
+    }
+};
+
+const ErrorCodePage = () => {
+    const { brandId } = useParams();
+    const navigate = useNavigate();
+    const [form] = Form.useForm();
+
+    const [errorCodes, setErrorCodes] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [editingErrorCode, setEditingErrorCode] = useState(null);
+
+    const fetchData = async () => {
+        setLoading(true);
+        const response = await mockApi.getAllErrorCodesByBrand(brandId);
+        if (response.status === 200) {
+            setErrorCodes(response.data.data);
+        }
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, [brandId]);
+
+    const columns = [
+        { title: 'Error Code', dataIndex: 'error_code', key: 'error_code' },
+        { title: 'Description', dataIndex: 'description', key: 'description' },
+        {
+            title: 'Action',
+            key: 'action',
+            render: (_, record) => (
+                <>
+                    <Button type="link" onClick={() => handleEdit(record)}>Edit</Button>
+                    <Button type="link" danger onClick={() => handleDelete(record.error_code_id)}>Delete</Button>
+                </>
+            ),
+        },
+    ];
+
+    const handleAdd = () => {
+        setEditingErrorCode(null);
+        form.resetFields();
+        setIsModalVisible(true);
+    };
+
+    const handleEdit = (errorCode) => {
+        setEditingErrorCode(errorCode);
+        form.setFieldsValue(errorCode);
+        setIsModalVisible(true);
+    };
+
+    const handleDelete = async (id) => {
+        await mockApi.deleteErrorCode(id);
+        message.success('Error code deleted successfully');
+        fetchData();
+    };
+
+    const handleModalOk = async () => {
+        try {
+            const values = await form.validateFields();
+            if (editingErrorCode) {
+                await mockApi.updateErrorCode(editingErrorCode.error_code_id, values);
+                message.success('Error code updated successfully');
+            } else {
+                await mockApi.createErrorCode({ ...values, brand_id: brandId });
+                message.success('Error code created successfully');
+            }
+            setIsModalVisible(false);
+            fetchData();
+        } catch (error) {
+            console.log('Validate Failed:', error);
+        }
+    };
+
+    return (
+        <Card>
+            <Title level={4}>Manage Error Codes for Brand ID: {brandId}</Title>
+            <Button
+                type="primary"
+                icon={<PlusOutlined />}
+                onClick={handleAdd}
+                style={{ marginBottom: 16 }}
+            >
+                Add Error Code
+            </Button>
+            <TableList
+                columns={columns}
+                getData={async () => ({ data: { data: errorCodes } })}
+                triger={brandId}
+            />
+            <Modal
+                title={editingErrorCode ? 'Edit Error Code' : 'Add Error Code'}
+                visible={isModalVisible}
+                onOk={handleModalOk}
+                onCancel={() => setIsModalVisible(false)}
+            >
+                <Form form={form} layout="vertical">
+                    <Form.Item name="error_code" label="Error Code" rules={[{ required: true }]}>
+                        <Input />
+                    </Form.Item>
+                    <Form.Item name="description" label="Description" rules={[{ required: true }]}>
+                        <Input.TextArea />
+                    </Form.Item>
+                </Form>
+            </Modal>
+        </Card>
+    );
+};
+
+export default ErrorCodePage;

src/pages/master/brand/FormBrand.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Form, Input, Button, Typography, Card, message } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { createBrand } from '../../api/master-brand';
+
+const { Title } = Typography;
+
+const FormBrand = () => {
+    const [form] = Form.useForm();
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+
+    const onFinish = async (values) => {
+        setLoading(true);
+        try {
+            const response = await createBrand(values);
+            if (response.statusCode === 200 || response.statusCode === 201) {
+                message.success('Brand created successfully!');
+                const newBrandId = response.data.brand_id;
+                // Redirect to the error code page for the new brand
+                navigate(`/master/brand/${newBrandId}/error-codes`);
+            } else {
+                message.error(response.message || 'Failed to create brand.');
+            }
+        } catch (error) {
+            message.error('An error occurred while creating the brand.');
+            console.error(error);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <Card>
+            <Title level={4}>Add New Brand</Title>
+            <Form
+                form={form}
+                layout="vertical"
+                onFinish={onFinish}
+                autoComplete="off"
+            >
+                <Form.Item
+                    name="brand_name"
+                    label="Brand Name"
+                    rules={[{ required: true, message: 'Please input the brand name!' }]}
+                >
+                    <Input placeholder="Enter brand name" />
+                </Form.Item>
+
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" loading={loading}>
+                        Lanjut ke Error Code
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+export default FormBrand;

src/pages/master/brandDevice/IndexBrandDevice.jsx

@@ -1,8 +1,6 @@
-
+import React, { memo, useEffect } from 'react';
-import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ListBrandDevice from './component/ListBrandDevice';
-import DetailBrandDevice from './component/DetailBrandDevice';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { Typography } from 'antd';
 
@@ -12,35 +10,6 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
 
-    const [actionMode, setActionMode] = useState('list');
-    const [selectedData, setSelectedData] = useState(null);
-    const [readOnly, setReadOnly] = useState(false);
-    const [showModal, setShowmodal] = useState(false);
-
-    const setMode = (param) => {
-        setActionMode(param);
-        switch (param) {
-            case 'add':
-                setReadOnly(false);
-                setShowmodal(true);
-                break;
-
-            case 'edit':
-                setReadOnly(false);
-                setShowmodal(true);
-                break;
-
-            case 'preview':
-                setReadOnly(true);
-                setShowmodal(true);
-                break;
-
-            default:
-                setShowmodal(false);
-                break;
-        }
-    };
-
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -55,23 +24,9 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
 
     return (
         <React.Fragment>
-            <ListBrandDevice
+            <ListBrandDevice />
-                actionMode={actionMode}
-                setActionMode={setMode}
-                selectedData={selectedData}
-                setSelectedData={setSelectedData}
-                readOnly={readOnly}
-            />
-            <DetailBrandDevice
-                setActionMode={setMode}
-                selectedData={selectedData}
-                setSelectedData={setSelectedData}
-                readOnly={readOnly}
-                showModal={showModal}
-                actionMode={actionMode}
-            />
         </React.Fragment>
     );
 });
 
-export default IndexBrandDevice;
+export default IndexBrandDevice;

src/pages/master/brandDevice/ViewBrandDevice.jsx

@@ -0,0 +1,766 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import {
+    Divider,
+    Typography,
+    Button,
+    Steps,
+    Form,
+    Row,
+    Col,
+    Card,
+    Spin,
+    Tag,
+    Space,
+    ConfigProvider,
+    Empty
+} from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { NotifAlert } from '../../../components/Global/ToastNotif';
+import { getBrandById, getErrorCodesByBrandId } from '../../../api/master-brand';
+import { getFileUrl, getFolderFromFileType } from '../../../api/file-uploads';
+import { SendRequest } from '../../../components/Global/ApiRequest';
+import ListErrorCode from './component/ListErrorCode';
+import BrandForm from './component/BrandForm';
+import ErrorCodeForm from './component/ErrorCodeForm';
+import SolutionForm from './component/SolutionForm';
+import SparepartSelect from './component/SparepartSelect';
+
+const { Title, Text } = Typography;
+const { Step } = Steps;
+
+const ViewBrandDevice = () => {
+    const navigate = useNavigate();
+    const { id } = useParams();
+    const location = useLocation();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [brandForm] = Form.useForm();
+    const [errorCodeForm] = Form.useForm();
+    const [solutionForm] = Form.useForm();
+
+    const [brandData, setBrandData] = useState(null);
+    const [errorCodes, setErrorCodes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [selectedErrorCode, setSelectedErrorCode] = useState(null);
+    const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
+    const [errorCodeIcon, setErrorCodeIcon] = useState(null);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const [searchText, setSearchText] = useState('');
+
+
+    const [solutionFields, setSolutionFields] = useState([0]);
+    const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
+    const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
+    const [currentSolutionData, setCurrentSolutionData] = useState([]);
+
+
+    const [brandInfo, setBrandInfo] = useState({});
+
+    const resetSolutionFields = () => {
+        if (solutionForm && solutionForm.resetFields) {
+            solutionForm.resetFields();
+            solutionForm.setFieldsValue({
+                solution_items: {
+                    0: {
+                        name: '',
+                        type: 'text',
+                        text: '',
+                        status: true
+                    }
+                }
+            });
+        }
+        setCurrentSolutionData([]);
+    };
+
+    const getSolutionData = () => {
+        if (!solutionForm) return [];
+        try {
+            const values = solutionForm.getFieldsValue(true);
+
+            let solutions = [];
+
+            if (values.solution_items) {
+                if (Array.isArray(values.solution_items)) {
+                    solutions = values.solution_items.filter(Boolean);
+                } else if (typeof values.solution_items === 'object') {
+                    solutions = Object.values(values.solution_items).filter(Boolean);
+                }
+            }
+
+            return solutions;
+        } catch (error) {
+            return [];
+        }
+    };
+
+
+    useEffect(() => {
+        const savedPhase = location.state?.phase || localStorage.getItem(`brand_device_${id}_last_phase`);
+        if (savedPhase) {
+            setCurrentStep(parseInt(savedPhase));
+            localStorage.removeItem(`brand_device_${id}_last_phase`);
+        }
+    }, [location.state, id]);
+
+
+    useEffect(() => {
+        setBreadcrumbItems([
+            {
+                title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
+            },
+            {
+                title: (
+                    <span
+                        style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
+                        onClick={() => navigate('/master/brand-device')}
+                    >
+                        Brand Device
+                    </span>
+                ),
+            },
+            {
+                title: (
+                    <span style={{ fontSize: '14px', fontWeight: 'bold' }}>
+                        View Brand Device
+                    </span>
+                ),
+            },
+        ]);
+    }, [setBreadcrumbItems, navigate]);
+
+    useEffect(() => {
+        const fetchBrandData = async () => {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                navigate('/signin');
+                return;
+            }
+
+            try {
+                setLoading(true);
+                const response = await getBrandById(id);
+
+                if (response && response.statusCode === 200) {
+                    const brandData = response.data;
+
+                    const brandInfoData = {
+                        brand_code: brandData.brand_code,
+                        brand_name: brandData.brand_name,
+                        brand_type: brandData.brand_type || '',
+                        brand_manufacture: brandData.brand_manufacture || '',
+                        brand_model: brandData.brand_model || '',
+                        is_active: brandData.is_active
+                    };
+
+                    setBrandInfo(brandInfoData);
+                    setBrandData(brandData);
+                    brandForm.setFieldsValue(brandInfoData);
+
+                    if (brandData.brand_id) {
+                        try {
+                            const errorCodesResponse = await getErrorCodesByBrandId(id || brandData.brand_id);
+                            if (errorCodesResponse && errorCodesResponse.statusCode === 200) {
+                                const apiErrorData = errorCodesResponse.data || [];
+                                const existingCodes = apiErrorData.map(ec => ({
+                                    ...ec,
+                                    tempId: `existing_${ec.error_code_id}`,
+                                    status: 'existing',
+                                    solution: ec.solution || [],
+                                    spareparts: ec.spareparts || []
+                                }));
+                                setErrorCodes(existingCodes);
+                            }
+                        } catch (error) {
+                        }
+                    }
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Error',
+                        message: response?.message || 'Failed to fetch brand device data',
+                    });
+                }
+            } catch (error) {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Error',
+                    message: error.message || 'Failed to fetch brand device data',
+                });
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchBrandData();
+    }, [id, navigate, brandForm]);
+
+    useEffect(() => {
+        if (currentStep === 1 && id) {
+            setTrigerFilter(prev => !prev);
+        }
+    }, [currentStep, id]);
+
+
+    useEffect(() => {
+        if (currentStep === 1 && errorCodes.length > 0 && !selectedErrorCode) {
+            handleErrorCodeSelect(errorCodes[0]);
+        }
+    }, [currentStep, errorCodes]);
+
+    const setSolutionsForExistingRecord = (solutions, targetForm) => {
+
+        if (!targetForm || !solutions || solutions.length === 0) {
+            return;
+        }
+
+        targetForm.resetFields();
+
+        const solutionItems = {};
+        const newSolutionFields = [];
+        const newSolutionTypes = {};
+        const newSolutionStatuses = {};
+
+        solutions.forEach((solution, index) => {
+            const fieldKey = index;
+            newSolutionFields.push(fieldKey);
+
+            const isFileType = solution.type_solution && solution.type_solution !== 'text';
+            newSolutionTypes[fieldKey] = isFileType ? 'file' : 'text';
+            newSolutionStatuses[fieldKey] = solution.is_active;
+
+            let fileObject = null;
+            if (isFileType && (solution.path_solution || solution.path_document)) {
+                fileObject = {
+                    uploadPath: solution.path_solution || solution.path_document,
+                    path_solution: solution.path_solution || solution.path_document,
+                    name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File',
+                    type_solution: solution.type_solution,
+                    isExisting: true,
+                    size: 0,
+                    url: solution.path_solution || solution.path_document
+                };
+            }
+
+            solutionItems[fieldKey] = {
+                brand_code_solution_id: solution.brand_code_solution_id,
+                name: solution.solution_name || '',
+                type: isFileType ? 'file' : 'text',
+                text: solution.text_solution || '',
+                status: solution.is_active,
+                file: fileObject,
+                fileUpload: fileObject,
+                path_solution: solution.path_solution || solution.path_document || null,
+                fileName: solution.file_upload_name || null
+            };
+        });
+
+        setSolutionFields(newSolutionFields);
+        setSolutionTypes(newSolutionTypes);
+        setSolutionStatuses(newSolutionStatuses);
+
+        targetForm.resetFields();
+
+        setTimeout(() => {
+            targetForm.setFieldsValue({
+                solution_items: solutionItems
+            });
+
+            setTimeout(() => {
+                Object.keys(solutionItems).forEach(key => {
+                    const solution = solutionItems[key];
+                    targetForm.setFieldValue(['solution_items', key, 'name'], solution.name);
+                    targetForm.setFieldValue(['solution_items', key, 'type'], solution.type);
+                    targetForm.setFieldValue(['solution_items', key, 'text'], solution.text);
+                    targetForm.setFieldValue(['solution_items', key, 'file'], solution.file);
+                    targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
+                    targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
+                    targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
+                    targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
+                });
+
+                const finalValues = targetForm.getFieldsValue();
+            }, 100);
+        }, 100);
+    };
+
+    const handleErrorCodeSelect = async (errorCode) => {
+
+        setSelectedErrorCode(errorCode);
+
+        try {
+
+            const directResponse = await SendRequest({
+                method: 'get',
+                prefix: `error-code/${errorCode.error_code_id}`,
+            });
+
+            const apiResponse = directResponse.data;
+
+            if (apiResponse && apiResponse.statusCode === 200 && apiResponse.data) {
+                const fullErrorCodeData = {
+                    ...apiResponse.data,
+                    tempId: `existing_${apiResponse.data.error_code_id}`
+                };
+
+                const formValues = {
+                    error_code: fullErrorCodeData.error_code,
+                    error_code_name: fullErrorCodeData.error_code_name,
+                    error_code_description: fullErrorCodeData.error_code_description || '',
+                    error_code_color: fullErrorCodeData.error_code_color && fullErrorCodeData.error_code_color !== '' ? fullErrorCodeData.error_code_color : '#000000',
+                    status: fullErrorCodeData.is_active,
+                };
+
+                errorCodeForm.setFieldsValue(formValues);
+
+                if (fullErrorCodeData.path_icon && fullErrorCodeData.path_icon !== '') {
+                    const iconData = {
+                        name: fullErrorCodeData.path_icon.split('/').pop(),
+                        uploadPath: fullErrorCodeData.path_icon,
+                    };
+                    setErrorCodeIcon(iconData);
+                } else {
+                    setErrorCodeIcon(null);
+                }
+
+                if (apiResponse.data.solution && apiResponse.data.solution.length > 0) {
+                    setCurrentSolutionData(apiResponse.data.solution);
+                    setSolutionsForExistingRecord(apiResponse.data.solution, solutionForm);
+                }
+
+                if (apiResponse.data.spareparts && apiResponse.data.spareparts.length > 0) {
+                    setSelectedSparepartIds(apiResponse.data.spareparts.map(sp => sp.sparepart_id));
+                } else {
+                    setSelectedSparepartIds([]);
+                }
+            } else {
+                const basicErrorCodeData = {
+                    ...errorCode,
+                    tempId: `existing_${errorCode.error_code_id}`
+                };
+
+                const formValues = {
+                    error_code: basicErrorCodeData.error_code,
+                    error_code_name: basicErrorCodeData.error_code_name,
+                    error_code_description: basicErrorCodeData.error_code_description || '',
+                    error_code_color: basicErrorCodeData.error_code_color && basicErrorCodeData.error_code_color !== '' ? basicErrorCodeData.error_code_color : '#000000',
+                    status: basicErrorCodeData.is_active,
+                };
+
+                errorCodeForm.setFieldsValue(formValues);
+
+                if (basicErrorCodeData.path_icon && basicErrorCodeData.path_icon !== '') {
+                    const iconData = {
+                        name: basicErrorCodeData.path_icon.split('/').pop(),
+                        uploadPath: basicErrorCodeData.path_icon,
+                    };
+                    setErrorCodeIcon(iconData);
+                } else {
+                    setErrorCodeIcon(null);
+                }
+
+                resetSolutionFields();
+                setSelectedSparepartIds([]);
+            }
+        } catch (error) {
+            const basicErrorCodeData = {
+                ...errorCode,
+                tempId: `existing_${errorCode.error_code_id}`
+            };
+
+            const formValues = {
+                error_code: basicErrorCodeData.error_code,
+                error_code_name: basicErrorCodeData.error_code_name,
+                error_code_description: basicErrorCodeData.error_code_description || '',
+                error_code_color: basicErrorCodeData.error_code_color && basicErrorCodeData.error_code_color !== '' ? basicErrorCodeData.error_code_color : '#000000',
+                status: basicErrorCodeData.is_active,
+            };
+
+            errorCodeForm.setFieldsValue(formValues);
+
+            if (basicErrorCodeData.path_icon && basicErrorCodeData.path_icon !== '') {
+                const iconData = {
+                    name: basicErrorCodeData.path_icon.split('/').pop(),
+                    uploadPath: basicErrorCodeData.path_icon,
+                };
+                setErrorCodeIcon(iconData);
+            } else {
+                setErrorCodeIcon(null);
+            }
+
+            resetSolutionFields();
+            setSelectedSparepartIds([]);
+        }
+    };
+
+    const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
+        setBrandInfo(allValues);
+    }, [setBrandInfo]);
+
+    const handleSearch = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchText('');
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleFileView = (fileName) => {
+        try {
+            let fileUrl = '';
+            let actualFileName = '';
+
+            const filePath = fileName || '';
+            if (filePath) {
+                actualFileName = filePath.split('/').pop();
+            }
+
+            if (actualFileName) {
+                const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                const folder = getFolderFromFileType(fileExtension);
+                fileUrl = getFileUrl(folder, actualFileName);
+            }
+
+            if (!fileUrl && filePath) {
+                fileUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
+            }
+
+            if (fileUrl && actualFileName) {
+                const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+                const pdfExtensions = ['pdf'];
+
+                if (imageExtensions.includes(fileExtension) || pdfExtensions.includes(fileExtension)) {
+                    const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
+                    window.open(viewerUrl, '_blank', 'noopener,noreferrer');
+                } else {
+                    window.open(fileUrl, '_blank', 'noopener,noreferrer');
+                }
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Error',
+                    message: 'File URL not found'
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Failed to open file preview'
+            });
+        }
+    };
+
+    const handleNextStep = () => {
+        setCurrentStep(1);
+    };
+
+    const renderStepContent = () => {
+        if (currentStep === 0) {
+            return (
+                <div style={{ position: 'relative' }}>
+                    {loading && (
+                        <div
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                zIndex: 10,
+                                borderRadius: '8px',
+                            }}
+                        >
+                            <Spin size="large" />
+                        </div>
+                    )}
+                    <BrandForm
+                        form={brandForm}
+                        onValuesChange={handleBrandFormValuesChange}
+                        isEdit={false}
+                        readOnly={true}
+                    />
+                </div>
+            );
+        }
+
+        if (currentStep === 1) {
+            return (
+                <Row gutter={[16, 8]} style={{ minHeight: '70vh' }}>
+                    <Col xs={24} md={8} lg={8}>
+                        <ListErrorCode
+                            brandId={id}
+                            selectedErrorCode={selectedErrorCode}
+                            onErrorCodeSelect={handleErrorCodeSelect}
+                            tempErrorCodes={[]}
+                            trigerFilter={trigerFilter}
+                            searchText={searchText}
+                            onSearchChange={(value) => {
+                                setSearchText(value);
+                                if (value === '') {
+                                    setTrigerFilter((prev) => !prev);
+                                }
+                            }}
+                            onSearch={handleSearch}
+                            onSearchClear={handleSearchClear}
+                            isReadOnly={true}
+                        />
+                    </Col>
+
+                    <Col xs={24} md={16} lg={16}>
+                        <div style={{
+                            paddingLeft: '12px'
+                        }}>
+                            {selectedErrorCode ? (
+                                <Card
+                                    title={
+                                        <span style={{
+                                            fontSize: '16px',
+                                            fontWeight: '600',
+                                            color: '#262626',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '8px'
+                                        }}>
+                                            <span style={{
+                                                width: '4px',
+                                                height: '20px',
+                                                backgroundColor: '#23A55A',
+                                                borderRadius: '2px'
+                                            }}></span>
+                                            Error Code Form
+                                        </span>
+                                    }
+                                    style={{
+                                        width: '100%',
+                                        boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+                                        borderRadius: '12px'
+                                    }}
+                                    styles={{
+                                        body: { padding: '16px 24px 12px 24px' },
+                                        header: {
+                                            padding: '16px 24px',
+                                            borderBottom: '1px solid #f0f0f0',
+                                            backgroundColor: '#fafafa'
+                                        }
+                                    }}
+                                >
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                        <div style={{
+                                            padding: '16px',
+                                            border: '1px solid #f0f0f0',
+                                            borderRadius: '10px',
+                                            backgroundColor: '#ffffff',
+                                            marginBottom: '0',
+                                            transition: 'all 0.3s ease',
+                                            boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                        }}>
+                                            <div style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '8px',
+                                                marginBottom: '12px',
+                                                paddingBottom: '8px',
+                                                borderBottom: '1px solid #f5f5f5'
+                                            }}>
+                                                <div style={{
+                                                    width: '3px',
+                                                    height: '16px',
+                                                    backgroundColor: '#23A55A',
+                                                    borderRadius: '2px'
+                                                }}></div>
+                                                <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                    Error Code Details
+                                                </h4>
+                                            </div>
+                                            <ErrorCodeForm
+                                                errorCodeForm={errorCodeForm}
+                                                isErrorCodeFormReadOnly={true}
+                                                errorCodeIcon={errorCodeIcon}
+                                                onErrorCodeIconUpload={() => { }}
+                                                onErrorCodeIconRemove={() => { }}
+                                                isEdit={true}
+                                            />
+                                        </div>
+
+                                        <Row gutter={[20, 0]} style={{ marginTop: '0' }}>
+                                            <Col xs={24} md={12} lg={12}>
+                                                <div style={{
+                                                    padding: '16px',
+                                                    border: '1px solid #f0f0f0',
+                                                    borderRadius: '10px',
+                                                    backgroundColor: '#ffffff',
+                                                    transition: 'all 0.3s ease',
+                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                                }}>
+                                                    <div style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: '8px',
+                                                        marginBottom: '12px',
+                                                        paddingBottom: '8px',
+                                                        borderBottom: '1px solid #f5f5f5'
+                                                    }}>
+                                                        <div style={{
+                                                            width: '3px',
+                                                            height: '16px',
+                                                            backgroundColor: '#1890ff',
+                                                            borderRadius: '2px'
+                                                        }}></div>
+                                                        <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                            Solution
+                                                        </h4>
+                                                    </div>
+                                                    <SolutionForm
+                                                        solutionForm={solutionForm}
+                                                        solutionFields={solutionFields}
+                                                        solutionTypes={solutionTypes}
+                                                        solutionStatuses={solutionStatuses}
+                                                        onAddSolutionField={() => { }}
+                                                        onRemoveSolutionField={() => { }}
+                                                        onSolutionTypeChange={() => { }}
+                                                        onSolutionStatusChange={() => { }}
+                                                        onSolutionFileUpload={() => { }}
+                                                        onFileView={(fileData) => {
+                                                            if (fileData && (fileData.url || fileData.uploadPath)) {
+                                                                window.open(fileData.url || fileData.uploadPath, '_blank');
+                                                            }
+                                                        }}
+                                                        isReadOnly={true}
+                                                        solutionData={currentSolutionData}
+                                                    />
+                                                </div>
+                                            </Col>
+                                            <Col xs={24} md={12} lg={12}>
+                                                <div style={{
+                                                    padding: '16px',
+                                                    border: '1px solid #f0f0f0',
+                                                    borderRadius: '10px',
+                                                    backgroundColor: '#ffffff',
+                                                    transition: 'all 0.3s ease',
+                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
+                                                }}>
+                                                    <div style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: '8px',
+                                                        marginBottom: '12px',
+                                                        paddingBottom: '8px',
+                                                        borderBottom: '1px solid #f5f5f5'
+                                                    }}>
+                                                        <div style={{
+                                                            width: '3px',
+                                                            height: '16px',
+                                                            backgroundColor: '#faad14',
+                                                            borderRadius: '2px'
+                                                        }}></div>
+                                                        <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                                            Sparepart Selection
+                                                        </h4>
+                                                    </div>
+                                                    <div style={{
+                                                        maxHeight: '45vh',
+                                                        overflow: 'auto',
+                                                        border: '1px solid #e8e8e8',
+                                                        borderRadius: '8px',
+                                                        padding: '12px',
+                                                        backgroundColor: '#fafafa'
+                                                    }}>
+                                                        <SparepartSelect
+                                                            selectedSparepartIds={selectedSparepartIds}
+                                                            onSparepartChange={() => { }}
+                                                            isReadOnly={true}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </Col>
+                                        </Row>
+                                    </div>
+                                </Card>
+                            ) : (
+                                <div style={{
+                                    height: '100%', display: 'flex', flexDirection: 'column',
+                                    justifyContent: 'center', alignItems: 'center',
+                                    backgroundColor: '#ffffff', borderRadius: '12px',
+                                    border: '1px dashed #d9d9d9', color: '#8c8c8c', padding: '48px'
+                                }}>
+                                    <Empty description="Select an error code to view details" />
+                                </div>
+                            )}
+                        </div>
+                    </Col>
+                </Row>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Switch: {
+                        colorPrimary: '#23A55A',
+                        colorPrimaryHover: '#23A55A',
+                    },
+                },
+            }}
+        >
+            <Card>
+                <Steps current={currentStep} style={{ marginBottom: 24 }}>
+                    <Step title="Brand Device Details" />
+                    <Step title="Error Codes & Solutions" />
+                </Steps>
+                {renderStepContent()}
+                <Divider />
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <div>
+                        {currentStep === 1 && (
+                            <Button
+                                onClick={() => setCurrentStep(0)}
+                            >
+                                Back to Brand Info
+                            </Button>
+                        )}
+                    </div>
+                    <div>
+                        {currentStep === 0 && (
+                            <Button
+                                type="primary"
+                                onClick={handleNextStep}
+                                style={{
+                                    backgroundColor: '#23A55A',
+                                    borderColor: '#23A55A',
+                                }}
+                            >
+                                Error Code
+                            </Button>
+                        )}
+                        {currentStep === 1 && (
+                            <Button
+                                type="primary"
+                                onClick={() => navigate('/master/brand-device')}
+                                style={{
+                                    backgroundColor: '#23A55A',
+                                    borderColor: '#23A55A',
+                                }}
+                            >
+                                Selesai
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </Card>
+        </ConfigProvider>
+    );
+};
+
+export default ViewBrandDevice;

src/pages/master/brandDevice/ViewFilePage.jsx

@@ -0,0 +1,461 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Card, Button, Typography, Spin, Alert, Space } from 'antd';
+import { NotifAlert } from '../../../components/Global/ToastNotif';
+import { ArrowLeftOutlined, FilePdfOutlined, FileImageOutlined, DownloadOutlined } from '@ant-design/icons';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { getBrandById } from '../../../api/master-brand';
+import {
+    downloadFile,
+    getFile,
+    getFileUrl,
+    getFolderFromFileType,
+} from '../../../api/file-uploads';
+
+const { Title } = Typography;
+
+const ViewFilePage = () => {
+    const params = useParams();
+    const { id, fileType, fileName } = params;
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [brandData, setBrandData] = useState(null);
+    const [actualFileName, setActualFileName] = useState('');
+    const [pdfBlobUrl, setPdfBlobUrl] = useState(null);
+    const [pdfLoading, setPdfLoading] = useState(false);
+
+    const isFromEdit = window.location.pathname.includes('/edit/');
+
+    let fallbackId = id;
+    let fallbackFileType = fileType;
+    let fallbackFileName = fileName;
+
+    if (!fileName || !fileType || !id) {
+
+        const urlParts = window.location.pathname.split('/');
+
+        const viewIndex = urlParts.indexOf('view');
+        const editIndex = urlParts.indexOf('edit');
+        const actionIndex = viewIndex !== -1 ? viewIndex : editIndex;
+
+        if (actionIndex !== -1 && urlParts.length > actionIndex + 4) {
+            fallbackId = urlParts[actionIndex + 1];
+            fallbackFileType = urlParts[actionIndex + 3];
+            fallbackFileName = decodeURIComponent(urlParts[actionIndex + 4]);
+        }
+    }
+
+    useEffect(() => {
+        setPdfBlobUrl(null);
+        setPdfLoading(false);
+        setError(null);
+
+        const fetchData = async () => {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                navigate('/signin');
+                return;
+            }
+
+            try {
+                const actualId = fallbackId || id;
+                const actualFileName = fallbackFileName || fileName;
+
+                const brandResponse = await getBrandById(actualId);
+                if (brandResponse && brandResponse.statusCode === 200) {
+                    setBrandData(brandResponse.data);
+                }
+
+                const decodedFileName = decodeURIComponent(actualFileName);
+                setActualFileName(decodedFileName);
+
+                const fileExtension = decodedFileName.split('.').pop().toLowerCase();
+                if (fileExtension === 'pdf') {
+                    setPdfLoading(true);
+                    const folder = getFolderFromFileType('pdf');
+                    try {
+                        const blobData = await getFile(folder, decodedFileName);
+                        const blobUrl = window.URL.createObjectURL(blobData);
+                        setPdfBlobUrl(blobUrl);
+                    } catch (pdfError) {
+                        setError('Failed to load PDF file: ' + (pdfError.message || pdfError));
+                        setPdfBlobUrl(null);
+                    } finally {
+                        setPdfLoading(false);
+                    }
+                }
+
+                setLoading(false);
+            } catch (error) {
+                setError('Failed to load data');
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+
+        return () => {
+            if (pdfBlobUrl) {
+                window.URL.revokeObjectURL(pdfBlobUrl);
+            }
+        };
+    }, [id, fileName, fileType, navigate]);
+
+    useEffect(() => {
+        if (brandData) {
+            const breadcrumbItems = [
+                { title: <strong style={{ fontSize: '14px' }}>• Master</strong> },
+                {
+                    title: <strong style={{ fontSize: '14px' }} onClick={() => navigate('/master/brand-device')}>Brand Device</strong>
+                }
+            ];
+
+            if (isFromEdit) {
+                breadcrumbItems.push({
+                    title: <strong style={{ fontSize: '14px' }} onClick={() => navigate(`/master/brand-device/edit/${fallbackId || id}`)}>Edit Brand Device</strong>
+                });
+            } else {
+                breadcrumbItems.push({
+                    title: <strong style={{ fontSize: '14px' }} onClick={() => navigate(`/master/brand-device/view/${fallbackId || id}`)}>View Brand Device</strong>
+                });
+            }
+
+            breadcrumbItems.push({ title: <strong style={{ fontSize: '14px' }}>View Document</strong> });
+
+            setBreadcrumbItems(breadcrumbItems);
+        }
+    }, [brandData, id, isFromEdit, fallbackId, navigate, setBreadcrumbItems]);
+
+    const handleBack = () => {
+        if (isFromEdit) {
+            const savedPhase = localStorage.getItem(`brand_device_edit_${fallbackId || id}_last_phase`);
+
+            if (savedPhase) {
+                localStorage.removeItem(`brand_device_edit_${fallbackId || id}_last_phase`);
+            }
+
+            const targetPhase = savedPhase ? parseInt(savedPhase) : 1;
+
+            navigate(`/master/brand-device/edit/${fallbackId || id}`, {
+                state: { phase: targetPhase, fromFileViewer: true },
+                replace: true
+            });
+        } else {
+            navigate(`/master/brand-device/view/${fallbackId || id}`, {
+                state: { phase: 1 },
+                replace: true
+            });
+        }
+    };
+
+    const renderContent = () => {
+        if (error) {
+            return (
+                <Alert
+                    message="Error Loading File"
+                    description={error}
+                    type="error"
+                    showIcon
+                    style={{ margin: '20px 0' }}
+                />
+            );
+        }
+
+        const displayFileName = actualFileName || 'Loading...';
+        const fileExtension = displayFileName.split('.').pop().toLowerCase();
+        const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
+        const isPdf = fileExtension === 'pdf';
+
+
+        if (loading) {
+            return (
+                <div style={{ textAlign: 'center', padding: '50px' }}>
+                    {isImage ? (
+                        <div style={{
+                            width: '100%',
+                            height: '300px',
+                            backgroundColor: '#f5f5f5',
+                            border: '1px solid #d9d9d9',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: '#999'
+                        }}>
+                            <div>
+                                <FileImageOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
+                                <div>Loading image...</div>
+                            </div>
+                        </div>
+                    ) : isPdf ? (
+                        <div style={{
+                            width: '100%',
+                            height: '400px',
+                            backgroundColor: '#f5f5f5',
+                            border: '1px solid #d9d9d9',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: '#999'
+                        }}>
+                            <div>
+                                <FilePdfOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
+                                <div>Loading PDF...</div>
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{
+                            width: '100%',
+                            height: '200px',
+                            backgroundColor: '#f5f5f5',
+                            border: '1px solid #d9d9d9',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: '#999'
+                        }}>
+                            <div>
+                                <FilePdfOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
+                                <div>Loading file...</div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            );
+        }
+
+        if (isImage) {
+            return (
+                <div style={{ textAlign: 'center', padding: '20px' }}>
+                    <img
+                        src={getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName)}
+                        alt={actualFileName}
+                        style={{
+                            maxWidth: '100%',
+                            maxHeight: '70vh',
+                            objectFit: 'contain',
+                            border: '1px solid #d9d9d9',
+                            borderRadius: '8px'
+                        }}
+                        onError={() => setError('Failed to load image')}
+                    />
+                </div>
+            );
+        }
+
+        if (isPdf) {
+            const displayUrl = pdfBlobUrl || getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName);
+
+            return (
+                <div style={{ height: '75vh', width: '100%', border: '1px solid #d9d9d9', borderRadius: '8px', overflow: 'hidden' }}>
+                    {pdfBlobUrl ? (
+                        <iframe
+                            src={pdfBlobUrl}
+                            title={actualFileName}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                border: 'none',
+                                borderRadius: '8px'
+                            }}
+                            onError={() => {
+                                setError('Failed to load PDF. Please try downloading the file.');
+                            }}
+                        />
+                    ) : pdfLoading ? (
+                        <div style={{
+                            height: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            flexDirection: 'column',
+                            gap: '16px',
+                            backgroundColor: '#f5f5f5'
+                        }}>
+                            <Spin size="large" />
+                            <div style={{ fontSize: '16px', color: '#666', textAlign: 'center' }}>
+                                <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>Memuat PDF...</div>
+                                <div>Silakan tunggu sebentar</div>
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{
+                            height: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            flexDirection: 'column',
+                            gap: '16px',
+                            backgroundColor: '#f5f5f5'
+                        }}>
+                            <FilePdfOutlined style={{ fontSize: '48px', color: '#ff4d4f' }} />
+                            <div style={{ fontSize: '16px', color: '#666', textAlign: 'center' }}>
+                                <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>PDF tidak dapat dimuat</div>
+                                <div>Silakan download file untuk melihat kontennya</div>
+                            </div>
+                            <div style={{ display: 'flex', gap: '12px' }}>
+                                <Button
+                                    type="primary"
+                                    onClick={() => {
+                                        const folder = getFolderFromFileType(fallbackFileType || fileType);
+                                        downloadFile(folder, actualFileName);
+                                    }}
+                                    icon={<DownloadOutlined />}
+                                >
+                                    Download PDF
+                                </Button>
+                                <Button
+                                    onClick={() => {
+                                        setPdfLoading(true);
+                                        const folder = getFolderFromFileType('pdf');
+                                        getFile(folder, actualFileName)
+                                            .then(blobData => {
+                                                const blobUrl = window.URL.createObjectURL(blobData);
+                                                setPdfBlobUrl(blobUrl);
+                                            })
+                                            .catch(error => {
+                                                setError('Failed to load PDF file: ' + (error.message || error));
+                                                setPdfBlobUrl(null);
+                                            })
+                                            .finally(() => {
+                                                setPdfLoading(false);
+                                            });
+                                    }}
+                                >
+                                    Coba Lagi
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            );
+        }
+
+        return (
+            <div style={{ textAlign: 'center', padding: '50px' }}>
+                <FilePdfOutlined style={{ fontSize: '48px', color: '#ff4d4f', marginBottom: '16px' }} />
+                <div style={{ fontSize: '16px', marginBottom: '8px' }}>Preview tidak tersedia untuk jenis file ini</div>
+                <div style={{ color: '#666', marginBottom: '16px' }}>{actualFileName}</div>
+                <div style={{ marginTop: '16px' }}>
+                    <Button type="primary" href={getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName)} target="_blank" rel="noopener noreferrer">
+                        Buka di Tab Baru
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    const getFileIcon = () => {
+        const displayFileName = actualFileName || 'Loading...';
+        const fileExtension = displayFileName.split('.').pop().toLowerCase();
+        const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
+        const isPdf = fileExtension === 'pdf';
+
+        if (isImage) return <FileImageOutlined style={{ color: '#1890ff', fontSize: '20px' }} />;
+        if (isPdf) return <FilePdfOutlined style={{ color: '#ff4d4f', fontSize: '20px' }} />;
+        return <FilePdfOutlined style={{ color: '#ff4d4f', fontSize: '20px' }} />;
+    };
+
+    const getFileTypeColor = () => {
+        const displayFileName = actualFileName || 'Loading...';
+        const fileExtension = displayFileName.split('.').pop().toLowerCase();
+        const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
+        const isPdf = fileExtension === 'pdf';
+
+        if (isImage) return '#1890ff';
+        if (isPdf) return '#ff4d4f';
+        return '#ff4d4f';
+    };
+
+    return (
+        <div style={{ padding: '24px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+            <Card>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                        {getFileIcon()}
+                        <div>
+                            <Title level={4} style={{ margin: 0 }}>
+                                {actualFileName || 'Loading...'}
+                            </Title>
+                            {brandData ? (
+                                <div style={{ color: '#666', fontSize: '14px' }}>
+                                    Brand: {brandData.brand_name} | ID: {brandData.brand_id}
+                                </div>
+                            ) : (
+                                <div style={{ color: '#666', fontSize: '14px' }}>
+                                    Loading brand information...
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <Space>
+                        <Button
+                            icon={<ArrowLeftOutlined />}
+                            onClick={handleBack}
+                        >
+                            Kembali
+                        </Button>
+                        <Button
+                            type="primary"
+                            onClick={() => {
+                                const folder = getFolderFromFileType(fallbackFileType || fileType);
+                                downloadFile(folder, actualFileName);
+                            }}
+                            disabled={loading}
+                        >
+                            Download File
+                        </Button>
+                    </Space>
+                </div>
+
+
+                <div style={{ marginBottom: '16px' }}>
+                    <div style={{
+                        display: 'inline-block',
+                        padding: '4px 12px',
+                        backgroundColor: getFileTypeColor() + '15',
+                        border: `1px solid ${getFileTypeColor()}30`,
+                        borderRadius: '16px',
+                        fontSize: '12px',
+                        fontWeight: 'bold',
+                        color: getFileTypeColor()
+                    }}>
+                        {(fallbackFileType || fileType || 'FILE')?.toUpperCase()}
+                    </div>
+                </div>
+
+                <div style={{ position: 'relative' }}>
+
+                    {loading && (
+                        <div style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+                            backdropFilter: 'blur(0.8px)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            zIndex: 5,
+                            borderRadius: '8px'
+                        }}>
+                            <Spin size="large" />
+                        </div>
+                    )}
+
+                    <div style={{ filter: loading ? 'blur(0.5px)' : 'none', transition: 'filter 0.3s ease' }}>
+                        {renderContent()}
+                    </div>
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+export default ViewFilePage;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Form, Input, Row, Col, Typography, Switch } from 'antd';
+
+const { Text } = Typography;
+
+const BrandForm = ({
+    form,
+    onValuesChange,
+    isEdit = false,
+    brandInfo = null,
+    readOnly = false,
+}) => {
+    const isActive = Form.useWatch('is_active', form) ?? true;
+
+    React.useEffect(() => {
+        if (brandInfo && brandInfo.brand_code) {
+            form.setFieldsValue({
+                brand_code: brandInfo.brand_code
+            });
+        }
+    }, [brandInfo, form]);
+
+    return (
+        <div>
+            <Form
+                layout="vertical"
+                form={form}
+                onValuesChange={onValuesChange}
+                initialValues={{
+                    brand_name: '',
+                    brand_type: '',
+                    brand_model: '',
+                    brand_manufacture: '',
+                    is_active: true,
+                }}
+            >
+                <Form.Item label="Status">
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Form.Item name="is_active" valuePropName="checked" noStyle>
+                            <Switch
+                                style={{ backgroundColor: isActive ? '#23A55A' : '#bfbfbf' }}
+                                disabled={readOnly}
+                            />
+                        </Form.Item>
+                        <Text style={{ marginLeft: 8 }}>
+                            {isActive ? 'Running' : 'Offline'}
+                        </Text>
+                    </div>
+                </Form.Item>
+
+                <Form.Item label="Brand Code" name="brand_code">
+                    <Input
+                        disabled={true}
+                        style={{
+                            backgroundColor: '#f5f5f5',
+                            cursor: 'not-allowed'
+                        }}
+                    />
+                </Form.Item>
+
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item
+                            label="Brand Name"
+                            name="brand_name"
+                            rules={[{ required: !readOnly, message: 'Brand Name wajib diisi!' }]}
+                        >
+                            <Input disabled={readOnly} />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item
+                            label="Manufacturer"
+                            name="brand_manufacture"
+                            rules={[{ required: !readOnly, message: 'Manufacturer wajib diisi!' }]}
+                        >
+                            <Input placeholder="Enter Manufacturer" disabled={readOnly} />
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item label="Brand Type" name="brand_type">
+                            <Input placeholder="Enter Brand Type (Optional)" disabled={readOnly} />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item label="Model" name="brand_model">
+                            <Input placeholder="Enter Model (Optional)" disabled={readOnly} />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </div>
+    );
+};
+
+export default BrandForm;

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

@@ -0,0 +1,397 @@
+import React, { useState } from 'react';
+import { Card, Typography, Tag, Button, Modal, Row, Col, Space } from 'antd';
+import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+
+const { Text, Title } = Typography;
+
+const CustomSparepartCard = ({
+    sparepart,
+    isSelected = false,
+    isReadOnly = false,
+    showPreview = true,
+    showDelete = false,
+    onPreview,
+    onDelete,
+    onCardClick,
+    loading = false,
+    size = 'small',
+    style = {},
+}) => {
+    const [previewModalVisible, setPreviewModalVisible] = useState(false);
+
+    const getImageSrc = () => {
+        if (sparepart.sparepart_foto) {
+            if (sparepart.sparepart_foto.startsWith('http')) {
+                return sparepart.sparepart_foto;
+            } else {
+                const fileName = sparepart.sparepart_foto.split('/').pop();
+                if (fileName === 'defaultSparepartImg.jpg') {
+                    return `/assets/defaultSparepartImg.jpg`;
+                } else {
+                    const token = localStorage.getItem('token');
+                    const baseURL = import.meta.env.VITE_API_SERVER || '';
+                    return `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
+                }
+            }
+        }
+        return 'https://via.placeholder.com/150';
+    };
+
+    const handlePreview = () => {
+        if (onPreview) {
+            onPreview(sparepart);
+        } else {
+            setPreviewModalVisible(true);
+        }
+    };
+
+    const truncateText = (text, maxLength = 15) => {
+        if (!text) return 'Unnamed';
+        return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+    };
+
+    const handleCardClick = () => {
+        if (!isReadOnly && onCardClick) {
+            onCardClick(sparepart);
+        }
+    };
+
+    const getCardActions = () => {
+        const actions = [];
+
+        if (showPreview) {
+            actions.push(
+                <Button
+                    key="preview"
+                    type="text"
+                    icon={<EyeOutlined />}
+                    title="Lihat Detail"
+                    style={{ color: '#1890ff' }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        handlePreview();
+                    }}
+                />
+            );
+        }
+
+        if (showDelete && !isReadOnly) {
+            actions.push(
+                <Button
+                    key="delete"
+                    type="text"
+                    icon={<DeleteOutlined />}
+                    title="Hapus"
+                    style={{ color: '#ff4d4f' }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete?.(sparepart);
+                    }}
+                />
+            );
+        }
+
+        return actions;
+    };
+
+    const getCardStyle = () => {
+        const baseStyle = {
+            borderRadius: '12px',
+            overflow: 'hidden',
+            border: isSelected ? '2px solid #1890ff' : '1px solid #E0E0E0',
+            cursor: isReadOnly ? 'default' : 'pointer',
+            position: 'relative',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+            transition: 'all 0.3s ease'
+        };
+
+        switch (size) {
+            case 'small':
+                return {
+                    ...baseStyle,
+                    height: '180px',
+                    minHeight: '180px'
+                };
+            case 'large':
+                return {
+                    ...baseStyle,
+                    height: '280px',
+                    minHeight: '280px'
+                };
+            default:
+                return {
+                    ...baseStyle,
+                    height: '220px',
+                    minHeight: '220px'
+                };
+        }
+    };
+
+    return (
+        <>
+            <div
+                style={{
+                    border: '1px solid #f0f0f0',
+                    borderRadius: '6px',
+                    padding: '12px 16px',
+                    marginBottom: '8px',
+                    backgroundColor: 'white',
+                    cursor: onCardClick && !isReadOnly ? 'pointer' : 'default',
+                    transition: 'all 0.2s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+                onClick={handleCardClick}
+            >
+                <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
+                        <Text
+                            strong
+                            style={{
+                                fontSize: '14px',
+                                color: '#262626',
+                                marginRight: '12px'
+                            }}
+                            title={sparepart.sparepart_name || sparepart.name || 'Unnamed'}
+                        >
+                            {truncateText(sparepart.sparepart_name || sparepart.name || 'Unnamed')}
+                        </Text>
+                        <Tag
+                            color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
+                            style={{ fontSize: '11px', margin: 0 }}
+                        >
+                            {sparepart.sparepart_stok || 'Not Available'}
+                        </Tag>
+                    </div>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Text style={{ fontSize: '12px', color: '#666', marginRight: '4px' }}>
+                                qty:
+                            </Text>
+                            <Text
+                                style={{
+                                    fontSize: '12px',
+                                    fontWeight: 600,
+                                    color: '#262626'
+                                }}
+                            >
+                                {sparepart.sparepart_qty || 0}
+                            </Text>
+                        </div>
+                    </div>
+                </div>
+
+                <Space size="small">
+                    {showPreview && (
+                        <Button
+                            type="text"
+                            icon={<EyeOutlined />}
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handlePreview();
+                            }}
+                            title="Preview"
+                        />
+                    )}
+                    {showDelete && !isReadOnly && (
+                        <Button
+                            type="text"
+                            icon={<DeleteOutlined />}
+                            size="small"
+                            danger
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onDelete?.(sparepart);
+                            }}
+                            title="Remove"
+                        />
+                    )}
+                </Space>
+            </div>
+
+
+            <Modal
+                title="Sparepart Details"
+                open={previewModalVisible}
+                onCancel={() => setPreviewModalVisible(false)}
+                footer={[
+                    <Button key="close" onClick={() => setPreviewModalVisible(false)}>
+                        Close
+                    </Button>
+                ]}
+                width={800}
+                centered
+                styles={{ body: { padding: '24px' } }}
+            >
+                <Row gutter={[24, 24]}>
+                    <Col span={10}>
+                        <div style={{ textAlign: 'center' }}>
+                            <div
+                                style={{
+                                    backgroundColor: '#f0f0f0',
+                                    width: '220px',
+                                    height: '220px',
+                                    margin: '0 auto 16px',
+                                    position: 'relative',
+                                    borderRadius: '12px',
+                                    overflow: 'hidden',
+                                    border: '1px solid #E0E0E0',
+                                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
+                                }}
+                            >
+                                <img
+                                    src={getImageSrc()}
+                                    alt={sparepart.sparepart_name || 'Sparepart'}
+                                    style={{
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'cover'
+                                    }}
+                                    onError={(e) => {
+                                        e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
+                                    }}
+                                />
+                            </div>
+
+
+                            {sparepart.sparepart_item_type && (
+                                <div style={{ marginBottom: '12px' }}>
+                                    <Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
+                                        {sparepart.sparepart_item_type}
+                                    </Tag>
+                                </div>
+                            )}
+
+
+                            <div style={{
+                                textAlign: 'left',
+                                background: '#f8f9fa',
+                                padding: '12px',
+                                borderRadius: '8px',
+                                marginTop: '25px'
+                            }}>
+                                <div style={{ marginBottom: '8px' }}>
+                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
+                                    <Tag
+                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
+                                        style={{ marginLeft: '8px', fontSize: '12px' }}
+                                    >
+                                        {sparepart.sparepart_stok || 'Not Available'}
+                                    </Tag>
+                                </div>
+                                <div>
+                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
+                                    <Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
+                                        {sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
+                                    </Text>
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+
+                    <Col span={14}>
+                        <div>
+
+                            <Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
+                                {sparepart.sparepart_name || 'Unnamed'}
+                            </Title>
+
+
+                            <div style={{ marginBottom: '24px' }}>
+                                <Row gutter={[16, 12]}>
+                                    <Col span={24}>
+                                        <div style={{
+                                            padding: '12px',
+                                            backgroundColor: '#fafafa',
+                                            borderRadius: '8px',
+                                            border: '1px solid #f0f0f0'
+                                        }}>
+                                            <Row gutter={16}>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_code || 'N/A'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_merk || '-'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_unit || '-'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                            </Row>
+                                        </div>
+                                    </Col>
+
+                                    {sparepart.sparepart_model && (
+                                        <Col span={24}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
+                                                <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                    {sparepart.sparepart_model}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    )}
+
+                                    {sparepart.sparepart_description && (
+                                        <Col span={24}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
+                                                <div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
+                                                    {sparepart.sparepart_description}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    )}
+                                </Row>
+                            </div>
+
+
+                            {sparepart.created_at && (
+                                <div>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
+                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
+                                                    {dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
+                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
+                                                    {dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            )}
+                        </div>
+                    </Col>
+                </Row>
+            </Modal>
+        </>
+    );
+};
+
+export default CustomSparepartCard;

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

@@ -1,310 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
-
-const { Text } = Typography;
-
-const DetailBrandDevice = (props) => {
-    const [confirmLoading, setConfirmLoading] = useState(false);
-
-    const defaultData = {
-        brand_id: '',
-        brandName: '',
-        brandType: '',
-        manufacturer: '',
-        model: '',
-        status: 'Active',
-    };
-
-    const [FormData, setFormData] = useState(defaultData);
-
-    const handleCancel = () => {
-        props.setSelectedData(null);
-        props.setActionMode('list');
-    };
-
-    const handleSave = async () => {
-        setConfirmLoading(true);
-
-        // Validasi required fields
-        if (!FormData.brandName) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Brand Name Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.brandType) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Type Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.manufacturer) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Manufacturer Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.model) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Model Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.status) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Status Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        const payload = {
-            brandName: FormData.brandName,
-            brandType: FormData.brandType,
-            manufacturer: FormData.manufacturer,
-            model: FormData.model,
-            status: FormData.status,
-        };
-
-        try {
-            // Simulate API call
-            await new Promise((resolve) => setTimeout(resolve, 500));
-
-            const response = {
-                statusCode: FormData.brand_id ? 200 : 201,
-                data: {
-                    brandName: FormData.brandName,
-                },
-            };
-
-            console.log('Save Brand Device Response:', response);
-
-            // Check if response is successful
-            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-                NotifOk({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `Data Brand Device "${
-                        response.data?.brandName || FormData.brandName
-                    }" berhasil ${FormData.brand_id ? 'diubah' : 'ditambahkan'}.`,
-                });
-
-                props.setActionMode('list');
-            } else {
-                NotifAlert({
-                    icon: 'error',
-                    title: 'Gagal',
-                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
-                });
-            }
-        } catch (error) {
-            console.error('Save Brand Device Error:', error);
-            NotifAlert({
-                icon: 'error',
-                title: 'Error',
-                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
-            });
-        }
-
-        setConfirmLoading(false);
-    };
-
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData({
-            ...FormData,
-            [name]: value,
-        });
-    };
-
-    const handleSelectChange = (name, value) => {
-        setFormData({
-            ...FormData,
-            [name]: value,
-        });
-    };
-
-    const handleStatusToggle = (event) => {
-        const isChecked = event;
-        setFormData({
-            ...FormData,
-            status: isChecked ? true : false,
-        });
-    };
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            if (props.selectedData != null) {
-                setFormData(props.selectedData);
-            } else {
-                setFormData(defaultData);
-            }
-        } else {
-            // navigate('/signin'); // Uncomment if useNavigate is imported
-        }
-    }, [props.showModal]);
-
-    return (
-        <Modal
-            title={`${
-                props.actionMode === 'add'
-                    ? 'Tambah'
-                    : props.actionMode === 'preview'
-                    ? 'Preview'
-                    : 'Edit'
-            } Brand Device`}
-            open={props.showModal}
-            onCancel={handleCancel}
-            footer={[
-                <>
-                    <ConfigProvider
-                        theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
-                            components: {
-                                Button: {
-                                    defaultBg: 'white',
-                                    defaultColor: '#23A55A',
-                                    defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
-                                    defaultHoverBorderColor: '#23A55A',
-                                },
-                            },
-                        }}
-                    >
-                        <Button onClick={handleCancel}>Batal</Button>
-                    </ConfigProvider>
-                    <ConfigProvider
-                        theme={{
-                            token: {
-                                colorBgContainer: '#209652',
-                            },
-                            components: {
-                                Button: {
-                                    defaultBg: '#23a55a',
-                                    defaultColor: '#FFFFFF',
-                                    defaultBorderColor: '#23a55a',
-                                    defaultHoverColor: '#FFFFFF',
-                                    defaultHoverBorderColor: '#23a55a',
-                                },
-                            },
-                        }}
-                    >
-                        {!props.readOnly && (
-                            <Button loading={confirmLoading} onClick={handleSave}>
-                                Simpan
-                            </Button>
-                        )}
-                    </ConfigProvider>
-                </>,
-            ]}
-        >
-            {FormData && (
-                <div>
-                    <div>
-                        <div>
-                            <Text strong>Status</Text>
-                        </div>
-                        <div
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginTop: '8px',
-                            }}
-                        >
-                            <div style={{ marginRight: '8px' }}>
-                                <Switch
-                                    disabled={props.readOnly}
-                                    style={{
-                                        backgroundColor:
-                                            FormData.status === true ? '#23A55A' : '#bfbfbf',
-                                    }}
-                                    checked={FormData.status === true}
-                                    onChange={handleStatusToggle}
-                                />
-                            </div>
-                            <div>
-                                <Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
-                            </div>
-                        </div>
-                    </div>
-                    <Divider style={{ margin: '12px 0' }} />
-                    <div hidden>
-                        <Text strong>Brand ID</Text>
-                        <Input
-                            name="brand_id"
-                            value={FormData.brand_id}
-                            onChange={handleInputChange}
-                            disabled
-                        />
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Brand Name</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="brandName"
-                            value={FormData.brandName}
-                            onChange={handleInputChange}
-                            placeholder="Enter Brand Name"
-                            readOnly={props.readOnly}
-                        />
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Type</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="brandType"
-                            value={FormData.brandType}
-                            onChange={handleInputChange}
-                            placeholder="Enter Type (e.g., PLC)"
-                            readOnly={props.readOnly}
-                        />
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Manufacturer</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="manufacturer"
-                            value={FormData.manufacturer}
-                            onChange={handleInputChange}
-                            placeholder="Enter Manufacturer"
-                            readOnly={props.readOnly}
-                        />
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Model</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="model"
-                            value={FormData.model}
-                            onChange={handleInputChange}
-                            placeholder="Enter Model"
-                            readOnly={props.readOnly}
-                        />
-                    </div>
-                </div>
-            )}
-        </Modal>
-    );
-};
-
-export default DetailBrandDevice;

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

@@ -0,0 +1,288 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Switch, Typography, ConfigProvider, Card, Button } from 'antd';
+import { FileOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
+import FileUploadHandler from './FileUploadHandler';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { getFileUrl, getFolderFromFileType } from '../../../../api/file-uploads';
+
+const { Text } = Typography;
+
+const ErrorCodeForm = ({
+    errorCodeForm,
+    isErrorCodeFormReadOnly = false,
+    errorCodeIcon,
+    onErrorCodeIconUpload,
+    onErrorCodeIconRemove,
+    isEdit = false,
+}) => {
+    const [currentIcon, setCurrentIcon] = useState(null);
+    const statusWatch = Form.useWatch('status', errorCodeForm) ?? true;
+
+    useEffect(() => {
+        if (errorCodeIcon && typeof errorCodeIcon === 'object' && Object.keys(errorCodeIcon).length > 0) {
+            setCurrentIcon(errorCodeIcon);
+        } else {
+            setCurrentIcon(null);
+        }
+    }, [errorCodeIcon]);
+
+    const handleIconRemove = () => {
+        setCurrentIcon(null);
+        onErrorCodeIconRemove();
+    };
+
+    const renderIconUpload = () => {
+        if (currentIcon) {
+            const displayFileName = currentIcon.name || currentIcon.uploadPath?.split('/').pop() || currentIcon.url?.split('/').pop() || 'Icon File';
+
+            return (
+                <Card
+                    style={{
+                        marginTop: 8,
+                        borderRadius: 8,
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                        border: '1px solid #e8e8e8'
+                    }}
+                    styles={{ body: { padding: '16px' } }}
+                >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                        <div style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 48,
+                            height: 48,
+                            borderRadius: 8,
+                            backgroundColor: '#f0f5ff',
+                            flexShrink: 0
+                        }}>
+                            <FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+                        </div>
+
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{
+                                fontSize: 13,
+                                fontWeight: 600,
+                                color: '#262626',
+                                marginBottom: 4,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            }}>
+                                {displayFileName}
+                            </div>
+                            <div style={{ fontSize: 12, color: '#8c8c8c' }}>
+                                {currentIcon.size ? `${(currentIcon.size / 1024).toFixed(1)} KB` : 'Icon uploaded'}
+                            </div>
+                        </div>
+
+                        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+                            <Button
+                                type="primary"
+                                size="middle"
+                                icon={<EyeOutlined />}
+                                style={{
+                                    fontSize: 12,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 4
+                                }}
+                                onClick={() => {
+                                    try {
+                                        let iconUrl = '';
+                                        let actualFileName = '';
+
+                                        const filePath = currentIcon.uploadPath || currentIcon.url || currentIcon.path || '';
+                                        const iconDisplayName = currentIcon.name || '';
+
+                                        if (iconDisplayName) {
+                                            actualFileName = iconDisplayName;
+                                        } else if (filePath) {
+                                            actualFileName = filePath.split('/').pop();
+                                        }
+
+                                        if (actualFileName) {
+                                            const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                                            const folder = getFolderFromFileType(fileExtension);
+                                            iconUrl = getFileUrl(folder, actualFileName);
+                                        }
+
+                                        if (!iconUrl && filePath) {
+                                            iconUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
+                                        }
+
+                                        if (iconUrl && actualFileName) {
+                                            const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                                            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+                                            const pdfExtensions = ['pdf'];
+
+                                            if (imageExtensions.includes(fileExtension) || pdfExtensions.includes(fileExtension)) {
+                                                const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
+                                                window.open(viewerUrl, '_blank', 'noopener,noreferrer');
+                                            } else {
+                                                window.open(iconUrl, '_blank', 'noopener,noreferrer');
+                                            }
+                                        } else {
+                                            NotifAlert({
+                                                icon: 'error',
+                                                title: 'Error',
+                                                message: `File URL not found. FileName: ${actualFileName}, FilePath: ${filePath}`
+                                            });
+                                        }
+                                    } catch (error) {
+                                        NotifAlert({
+                                            icon: 'error',
+                                            title: 'Error',
+                                            message: `Failed to open file preview: ${error.message}`
+                                        });
+                                    }
+                                }}
+                            />
+                            <Button
+                                danger
+                                size="middle"
+                                icon={<DeleteOutlined />}
+                                style={{
+                                    fontSize: 12,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }}
+                                onClick={handleIconRemove}
+                                disabled={isErrorCodeFormReadOnly}
+                            />
+                        </div>
+                    </div>
+                </Card>
+            );
+        } else {
+            return (
+                <FileUploadHandler
+                    type="error_code"
+                    existingFile={null}
+                    accept="image/*"
+                    onFileUpload={(fileData) => {
+                        setCurrentIcon(fileData);
+                        onErrorCodeIconUpload(fileData);
+                    }}
+                    onFileRemove={handleIconRemove}
+                    buttonText="Upload Icon"
+                    buttonStyle={{
+                        width: '100%',
+                        borderColor: '#23A55A',
+                        color: '#23A55A',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    uploadText="Upload error code icon"
+                    disabled={isErrorCodeFormReadOnly}
+                />
+            );
+        }
+    };
+
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Switch: {
+                        colorPrimary: '#23A55A',
+                        colorPrimaryHover: '#23A55A',
+                    },
+                },
+            }}
+        >
+            <Form
+                form={errorCodeForm}
+                layout="vertical"
+                initialValues={{
+                    status: true,
+                    error_code_color: '#000000'
+                }}
+            >
+                {/* Header bar with color picker, icon upload, and status toggle */}
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    marginBottom: '16px',
+                    gap: '16px'
+                }}>
+                    {/* Color picker on left */}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                        <Form.Item
+                            name="error_code_color"
+                            noStyle
+                            getValueFromEvent={(e) => e.target.value}
+                            getValueProps={(value) => ({ value: value || '#000000' })}
+                        >
+                            <input
+                                type="color"
+                                style={{
+                                    width: '120px',
+                                    height: '40px',
+                                    border: '1px solid #d9d9d9',
+                                    borderRadius: 4,
+                                    cursor: isErrorCodeFormReadOnly ? 'not-allowed' : 'pointer',
+                                }}
+                                disabled={isErrorCodeFormReadOnly}
+                            />
+                        </Form.Item>
+
+                        {/* Icon upload beside color picker */}
+                        <div style={{ flex: 1, maxWidth: '300px' }}>
+                            {renderIconUpload()}
+                        </div>
+                    </div>
+
+                    {/* Status toggle on right */}
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Form.Item name="status" valuePropName="checked" noStyle>
+                            <Switch
+                                disabled={isErrorCodeFormReadOnly}
+                            />
+                        </Form.Item>
+                        <Text style={{ marginLeft: 8 }}>
+                            {statusWatch ? 'Active' : 'Inactive'}
+                        </Text>
+                    </div>
+                </div>
+
+                {/* Error Code and Error Name in one row with 1/3 and 2/3 ratio */}
+                <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
+                    <Form.Item
+                        label="Error Code"
+                        name="error_code"
+                        rules={[{ required: true, message: 'Error code wajib diisi!' }]}
+                        style={{ flex: 1, marginBottom: 0, maxWidth: '33.33%' }}
+                    >
+                        <Input
+                            placeholder="Enter error code"
+                            disabled={isErrorCodeFormReadOnly}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Error Name"
+                        name="error_code_name"
+                        rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
+                        style={{ flex: 2, marginBottom: 0, maxWidth: '66.67%' }}
+                    >
+                        <Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
+                    </Form.Item>
+                </div>
+
+                <Form.Item label="Description" name="error_code_description">
+                    <Input.TextArea
+                        placeholder="Enter error description"
+                        rows={3}
+                        disabled={isErrorCodeFormReadOnly}
+                    />
+                </Form.Item>
+            </Form>
+        </ConfigProvider>
+    );
+};
+
+export default ErrorCodeForm;

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

@@ -0,0 +1,421 @@
+import React, { useState } from 'react';
+import { Upload, Modal, Button, Typography, Space, Image } from 'antd';
+import { UploadOutlined, EyeOutlined, DeleteOutlined, FileOutlined } from '@ant-design/icons';
+import { NotifOk, NotifAlert } from '../../../../components/Global/ToastNotif';
+import { uploadFile, getFolderFromFileType, getFileUrl, getFileType } from '../../../../api/file-uploads';
+
+const { Text } = Typography;
+
+const FileUploadHandler = ({
+    type = 'solution',
+    maxCount = 1,
+    accept = '.pdf,.jpg,.jpeg,.png,.gif',
+    disabled = false,
+
+    fileList = [],
+    onFileUpload,
+    onFileRemove,
+
+    existingFile = null,
+    clearSignal = null,
+    debugProps = {},
+
+    uploadText = 'Click or drag file to this area to upload',
+    uploadHint = 'Support for PDF and image files only',
+    buttonText = 'Upload File',
+    buttonType = 'default',
+
+    containerStyle = {},
+    buttonStyle = {},
+    showPreview = true
+}) => {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
+    const [previewTitle, setPreviewTitle] = useState('');
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadedFile, setUploadedFile] = useState(null);
+
+    React.useEffect(() => {
+        if (clearSignal !== null && clearSignal > 0) {
+            setUploadedFile(null);
+        }
+    }, [clearSignal, debugProps]);
+
+    const getBase64 = (file) =>
+        new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+        });
+
+    const handlePreview = async (file) => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj);
+        }
+        setPreviewImage(file.url || file.preview);
+        setPreviewOpen(true);
+        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+    };
+
+    const validateFile = (file) => {
+        const isAllowedType = [
+            'application/pdf',
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+        ].includes(file.type);
+
+        if (!isAllowedType) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
+            });
+            return false;
+        }
+
+        return true;
+    };
+
+    const handleFileUpload = async (file) => {
+        if (isUploading) {
+            return false;
+        }
+
+        if (!validateFile(file)) {
+            return false;
+        }
+
+        try {
+            setIsUploading(true);
+
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const fileType = isImage ? 'image' : 'pdf';
+            const folder = getFolderFromFileType(fileType);
+
+            const uploadResponse = await uploadFile(file, folder);
+
+            const isSuccess = uploadResponse && (
+                uploadResponse.statusCode === 200 ||
+                uploadResponse.statusCode === 201
+            );
+
+            if (!isSuccess) {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: uploadResponse?.message || `Gagal mengupload ${file.name}`,
+                });
+                setIsUploading(false);
+                return false;
+            }
+
+            let actualPath = '';
+            if (uploadResponse && typeof uploadResponse === 'object') {
+                if (uploadResponse.data && uploadResponse.data.path_document) {
+                    actualPath = uploadResponse.data.path_document;
+                }
+                else if (uploadResponse.path_document) {
+                    actualPath = uploadResponse.path_document;
+                }
+                else if (uploadResponse.data && uploadResponse.data.path_solution) {
+                    actualPath = uploadResponse.data.path_solution;
+                }
+                else if (uploadResponse.data && typeof uploadResponse.data === 'object') {
+                    if (uploadResponse.data.file_url) {
+                        actualPath = uploadResponse.data.file_url;
+                    } else if (uploadResponse.data.url) {
+                        actualPath = uploadResponse.data.url;
+                    } else if (uploadResponse.data.path) {
+                        actualPath = uploadResponse.data.path;
+                    } else if (uploadResponse.data.location) {
+                        actualPath = uploadResponse.data.location;
+                    } else if (uploadResponse.data.filePath) {
+                        actualPath = uploadResponse.data.filePath;
+                    } else if (uploadResponse.data.file_path) {
+                        actualPath = uploadResponse.data.file_path;
+                    } else if (uploadResponse.data.publicUrl) {
+                        actualPath = uploadResponse.data.publicUrl;
+                    } else if (uploadResponse.data.public_url) {
+                        actualPath = uploadResponse.data.public_url;
+                    }
+                }
+                else if (uploadResponse && typeof uploadResponse === 'string') {
+                    actualPath = uploadResponse;
+                }
+            }
+
+
+            if (actualPath) {
+                let fileObject;
+
+                if (type === 'error_code') {
+                    fileObject = {
+                        name: file.name,
+                        path_icon: actualPath,
+                        uploadPath: actualPath,
+                        url: actualPath,
+                        size: file.size,
+                        type: file.type,
+                        fileExtension
+                    };
+                } else {
+                    fileObject = {
+                        name: file.name,
+                        path_solution: actualPath,
+                        uploadPath: actualPath,
+                        type_solution: fileType,
+                        size: file.size,
+                        type: file.type
+                    };
+                }
+
+                onFileUpload(fileObject);
+                setUploadedFile(fileObject);
+
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `${file.name} berhasil diupload!`
+                });
+
+                setIsUploading(false);
+                return false;
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: `Gagal mengupload ${file.name}. Tidak dapat menemukan path file dalam response.`,
+                });
+                setIsUploading(false);
+                return false;
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
+            });
+            setIsUploading(false);
+            return false;
+        }
+    };
+
+    const handleFileChange = ({ fileList }) => {
+        if (fileList && fileList.length > 0 && fileList[0] && fileList[0].originFileObj) {
+            handleFileUpload(fileList[0].originFileObj);
+        }
+    };
+
+    const handleRemove = () => {
+        if (existingFile && onFileRemove) {
+            onFileRemove(existingFile);
+        } else if (onFileRemove) {
+            onFileRemove(null);
+        }
+    };
+
+    const renderExistingFile = () => {
+        const fileToShow = existingFile || uploadedFile;
+        if (!fileToShow) {
+            return null;
+        }
+
+        const filePath = fileToShow.uploadPath || fileToShow.url || fileToShow.path_icon || fileToShow.path_solution;
+        const fileName = fileToShow.name || filePath?.split('/').pop() || 'Unknown file';
+        const fileType = getFileType(fileName);
+        const isImage = fileType === 'image';
+
+        const handlePreview = () => {
+            if (!showPreview || !filePath) return;
+
+            if (isImage) {
+                const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
+                const filename = filePath.split('/').pop();
+                const imageUrl = getFileUrl(folder, filename);
+
+                if (imageUrl) {
+                    setPreviewImage(imageUrl);
+                    setPreviewOpen(true);
+                    setPreviewTitle(fileName);
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Error',
+                        message: 'Cannot generate image preview URL',
+                    });
+                }
+            } else {
+                const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
+                const filename = filePath.split('/').pop();
+                const fileUrl = getFileUrl(folder, filename);
+
+                if (fileUrl) {
+                    window.open(fileUrl, '_blank', 'noopener,noreferrer');
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Error',
+                        message: 'Cannot generate file preview URL',
+                    });
+                }
+            }
+        };
+
+        const getThumbnailUrl = () => {
+            if (!isImage || !filePath) return null;
+
+            const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
+            const filename = filePath.split('/').pop();
+            return getFileUrl(folder, filename);
+        };
+
+        const thumbnailUrl = getThumbnailUrl();
+
+        return (
+            <div style={{ marginTop: 12 }}>
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '8px',
+                    border: '1px solid #d9d9d9',
+                    borderRadius: 4,
+                    backgroundColor: '#fafafa'
+                }}>
+                    {isImage ? (
+                        <img
+                            src={thumbnailUrl || filePath}
+                            alt={fileName}
+                            style={{
+                                width: 50,
+                                height: 50,
+                                objectFit: 'cover',
+                                border: '1px solid #d9d9d9',
+                                borderRadius: 4,
+                                cursor: showPreview ? 'pointer' : 'default'
+                            }}
+                            onClick={handlePreview}
+                            onError={(e) => {
+                                e.target.src = filePath;
+                            }}
+                        />
+                    ) : (
+                        <div
+                            style={{
+                                width: 50,
+                                height: 50,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                border: '1px solid #d9d9d9',
+                                borderRadius: 4,
+                                backgroundColor: '#f5f5f5',
+                                cursor: showPreview ? 'pointer' : 'default'
+                            }}
+                            onClick={handlePreview}
+                        >
+                            <FileOutlined style={{ fontSize: 24, color: '#666' }} />
+                        </div>
+                    )}
+
+                    <div style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 12, fontWeight: 500 }}>
+                            {fileName}
+                        </Text>
+                        <br />
+                        <Text type="secondary" style={{ fontSize: 10 }}>
+                            {fileType === 'image' ? 'Image' : fileType === 'pdf' ? 'PDF' : 'File'}
+                            {fileToShow.size && ` • ${(fileToShow.size / 1024).toFixed(1)} KB`}
+                        </Text>
+                    </div>
+
+                    <div style={{ display: 'flex', gap: 4 }}>
+                        {showPreview && (
+                            <Button
+                                type="text"
+                                icon={<EyeOutlined />}
+                                size="small"
+                                onClick={handlePreview}
+                                title={isImage ? "Preview Image" : "Open File"}
+                            />
+                        )}
+
+                        <Button
+                            type="text"
+                            danger
+                            icon={<DeleteOutlined />}
+                            size="small"
+                            onClick={handleRemove}
+                            title="Remove File"
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const uploadProps = {
+        name: 'file',
+        multiple: false,
+        accept,
+        disabled: disabled || isUploading,
+        fileList: [],
+        beforeUpload: () => false,
+        onChange: handleFileChange,
+        onPreview: handlePreview,
+        maxCount,
+    };
+
+    return (
+        <div style={{ ...containerStyle }}>
+            {!existingFile && (
+                <Upload {...uploadProps}>
+                    {type === 'drag' ? (
+                        <Upload.Dragger>
+                            <p className="ant-upload-drag-icon">
+                                <UploadOutlined />
+                            </p>
+                            <p className="ant-upload-text">{uploadText}</p>
+                            <p className="ant-upload-hint">{uploadHint}</p>
+                        </Upload.Dragger>
+                    ) : (
+                        <Button
+                            type={buttonType}
+                            icon={<UploadOutlined />}
+                            loading={isUploading}
+                            style={{ ...buttonStyle }}
+                        >
+                            {isUploading ? 'Uploading...' : buttonText}
+                        </Button>
+                    )}
+                </Upload>
+            )}
+
+
+
+            {showPreview && (
+                <Modal
+                    open={previewOpen}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={() => setPreviewOpen(false)}
+                    width={600}
+                    style={{ top: 100 }}
+                >
+                    {previewImage && (
+                        <img
+                            alt={previewTitle}
+                            style={{ width: '100%' }}
+                            src={previewImage}
+                        />
+                    )}
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+export default FileUploadHandler;

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

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag } from 'antd';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Spin } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -7,45 +7,10 @@ import {
     SearchOutlined,
     EyeOutlined,
 } from '@ant-design/icons';
-import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { NotifAlert, NotifConfirmDialog, NotifOk } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
 import TableList from '../../../../components/Global/TableList';
-
+import { getAllBrands, deleteBrand } from '../../../../api/master-brand';
-// Dummy data
-const initialBrandDeviceData = [
-    {
-        brand_id: 1,
-        brandName: 'Siemens S7-1200',
-        brandType: 'PLC',
-        manufacturer: 'Siemens',
-        model: 'S7-1200',
-        status: 'Active',
-    },
-    {
-        brand_id: 2,
-        brandName: 'Allen Bradley CompactLogix',
-        brandType: 'PLC',
-        manufacturer: 'Rockwell Automation',
-        model: 'CompactLogix 5370',
-        status: 'Active',
-    },
-    {
-        brand_id: 3,
-        brandName: 'Schneider Modicon M580',
-        brandType: 'PLC',
-        manufacturer: 'Schneider Electric',
-        model: 'M580',
-        status: 'Active',
-    },
-    {
-        brand_id: 4,
-        brandName: 'Mitsubishi FX5U',
-        brandType: 'PLC',
-        manufacturer: 'Mitsubishi',
-        model: 'FX5U',
-        status: 'Inactive',
-    },
-];
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
@@ -57,50 +22,38 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     },
     {
         title: 'Brand Device ',
-        dataIndex: 'brandName',
+        dataIndex: 'brand_name',
-        key: 'brandName',
+        key: 'brand_name',
         width: '20%',
     },
-    {
-        title: 'Type',
-        dataIndex: 'brandType',
-        key: 'brandType',
-        width: '15%',
-    },
     {
         title: 'Manufacturer',
-        dataIndex: 'manufacturer',
+        dataIndex: 'brand_manufacture',
-        key: 'manufacturer',
+        key: 'brand_manufacture',
         width: '20%',
     },
     {
-        title: 'model',
+        title: 'Status',
-        dataIndex: 'model',
+        dataIndex: 'is_active',
-        key: 'model',
+        key: 'is_active',
-        width: '15%',
-    },
-    {
-        title: 'status',
-        dataIndex: 'status',
-        key: 'status',
         width: '10%',
         align: 'center',
-        render: (_, { status }) => (
+        render: (_, { is_active }) => (
             <>
-                {status === 'Active' ? (
+                {is_active === true ? (
                     <Tag color={'green'} key={'status'}>
-                        Active
+                        Running
                     </Tag>
                 ) : (
                     <Tag color={'red'} key={'status'}>
-                        Inactive
+                        Offline
                     </Tag>
                 )}
             </>
         ),
     },
     {
-        title: 'Aksi',
+        title: 'Action',
         key: 'action',
         align: 'center',
         width: '15%',
@@ -137,131 +90,87 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 
 const ListBrandDevice = memo(function ListBrandDevice(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
-    const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData);
 
-    const defaultFilter = { search: '' };
+    const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
-    const [searchValue, setSearchValue] = useState('');
+    const [searchText, setSearchText] = useState('');
 
     const navigate = useNavigate();
 
-    // Dummy data function to simulate API call - now uses state
-    const getAllBrandDevice = async (params) => {
-        // Simulate API delay
-        await new Promise((resolve) => setTimeout(resolve, 300));
-
-        // Extract URLSearchParams - TableList sends URLSearchParams object
-        const searchParam = params.get('search') || '';
-        const page = parseInt(params.get('page')) || 1;
-        const limit = parseInt(params.get('limit')) || 10;
-
-        console.log('getAllBrandDevice called with:', { searchParam, page, limit });
-
-        // Filter by search
-        let filteredBrandDevices = brandDeviceData;
-        if (searchParam) {
-            const searchLower = searchParam.toLowerCase();
-            filteredBrandDevices = brandDeviceData.filter(
-                (brand) =>
-                    brand.brandName.toLowerCase().includes(searchLower) ||
-                    brand.brandType.toLowerCase().includes(searchLower) ||
-                    brand.manufacturer.toLowerCase().includes(searchLower) ||
-                    brand.model.toLowerCase().includes(searchLower)
-            );
-        }
-
-        // Pagination logic
-        const totalData = filteredBrandDevices.length;
-        const totalPages = Math.ceil(totalData / limit);
-        const startIndex = (page - 1) * limit;
-        const endIndex = startIndex + limit;
-        const paginatedData = filteredBrandDevices.slice(startIndex, endIndex);
-
-        // Return structure that matches TableList expectation
-        return {
-            status: 200,
-            statusCode: 200,
-            data: {
-                data: paginatedData,
-                total: totalData,
-                paging: {
-                    page: page,
-                    limit: limit,
-                    total: totalData,
-                    page_total: totalPages,
-                },
-            },
-        };
-    };
-
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode == 'list') {
+            if (props.actionMode === 'list') {
                 setFormDataFilter(defaultFilter);
                 doFilter();
             }
         } else {
             navigate('/signin');
         }
-    }, [props.actionMode, brandDeviceData]);
+    }, [props.actionMode, navigate]);
 
     const doFilter = () => {
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchText });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
-        setSearchValue('');
+        setSearchText('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
     const showPreviewModal = (param) => {
-        props.setSelectedData(param);
+        navigate(`/master/brand-device/view/${param.brand_id}`);
-        props.setActionMode('preview');
     };
 
     const showEditModal = (param = null) => {
-        props.setSelectedData(param);
+        if (param) {
-        props.setActionMode('edit');
+            navigate(`/master/brand-device/edit/${param.brand_id}`);
-    };
+        } else {
-
+            navigate('/master/brand-device/add');
-    const showAddModal = (param = null) => {
+        }
-        props.setSelectedData(param);
-        props.setActionMode('add');
     };
 
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi',
-            message: 'Apakah anda yakin hapus data "' + param.brandName + '" ?',
+            message: 'Apakah anda yakin hapus data "' + param.brand_name + '" ?',
-            onConfirm: () => handleDelete(param.brand_id),
+            onConfirm: () => handleDelete(param.brand_id, param.brand_name),
-            onCancel: () => props.setSelectedData(null),
+            onCancel: () => { },
         });
     };
 
-    const handleDelete = async (brand_id) => {
+    const handleDelete = async (brand_id, brand_name) => {
-        // Find brand name before deleting
+        try {
-        const brandToDelete = brandDeviceData.find((brand) => brand.brand_id === brand_id);
+            const response = await deleteBrand(brand_id);
 
-        // Simulate delete API call
+            if (response && response.statusCode === 200) {
-        await new Promise((resolve) => setTimeout(resolve, 300));
+                NotifOk({
-
+                    icon: 'success',
-        // Remove from state
+                    title: 'Berhasil',
-        const updatedBrands = brandDeviceData.filter((brand) => brand.brand_id !== brand_id);
+                    message: `Brand ${brand_name} deleted successfully.`,
-        setBrandDeviceData(updatedBrands);
+                });
-
+                doFilter();
-        NotifAlert({
+            } else {
-            icon: 'success',
+                NotifAlert({
-            title: 'Berhasil',
+                    icon: 'error',
-            message: `Data Brand Device "${brandToDelete?.brandName || ''}" berhasil dihapus.`,
+                    title: 'Gagal',
-        });
+                    message: response?.message || 'Gagal menghapus Data Brand Device',
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Gagal menghapus Data Brand Device',
+            });
+        }
     };
 
     return (
@@ -273,13 +182,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
                             <Col xs={24} sm={24} md={12} lg={12}>
                                 <Input.Search
                                     placeholder="Search brand device..."
-                                    value={searchValue}
+                                    value={searchText}
                                     onChange={(e) => {
                                         const value = e.target.value;
-                                        setSearchValue(value);
+                                        setSearchText(value);
-                                        // Auto search when clearing by backspace/delete
                                         if (value === '') {
-                                            setFormDataFilter({ search: '' });
+                                            setFormDataFilter({ criteria: '' });
                                             setTrigerFilter((prev) => !prev);
                                         }
                                     }}
@@ -320,10 +228,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
                                     >
                                         <Button
                                             icon={<PlusOutlined />}
-                                            onClick={() => showAddModal()}
+                                            onClick={() => {
+                                                navigate('/master/brand-device/add');
+                                            }}
                                             size="large"
                                         >
-                                            Tambah Brand Device
+                                            Add data
                                         </Button>
                                     </ConfigProvider>
                                 </Space>
@@ -334,11 +244,11 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
                         <TableList
                             mobile
                             cardColor={'#42AAFF'}
-                            header={'tag_name'}
+                            header={'brand_name'}
                             showPreviewModal={showPreviewModal}
                             showEditModal={showEditModal}
                             showDeleteDialog={showDeleteDialog}
-                            getData={getAllBrandDevice}
+                            getData={getAllBrands}
                             queryParams={formDataFilter}
                             columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
                             triger={trigerFilter}

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

@@ -0,0 +1,315 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Card, Input, Button, Row, Col, Empty } from 'antd';
+import { PlusOutlined, SearchOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { getErrorCodesByBrandId, deleteErrorCode } from '../../../../api/master-brand';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+
+const ListErrorCode = ({
+    brandId,
+    selectedErrorCode,
+    onErrorCodeSelect,
+    onAddNew,
+    tempErrorCodes = [],
+    trigerFilter,
+    searchText,
+    onSearchChange,
+    onSearch,
+    onSearchClear,
+    isReadOnly = false,
+    errorCodes: propErrorCodes = null
+}) => {
+    const [errorCodes, setErrorCodes] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [pagination, setPagination] = useState({
+        current_page: 1,
+        current_limit: 15,
+        total_limit: 0,
+        total_page: 0,
+    });
+    const [currentPage, setCurrentPage] = useState(1);
+    const pageSize = 15;
+
+    const queryParams = useMemo(() => {
+        const params = new URLSearchParams();
+        params.set('page', currentPage.toString());
+        params.set('limit', pageSize.toString());
+        if (searchText) {
+            params.set('criteria', searchText);
+        }
+        return params;
+    }, [searchText, currentPage, pageSize]);
+
+    const fetchErrorCodes = async () => {
+        if (!brandId) {
+            setErrorCodes([]);
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await getErrorCodesByBrandId(brandId, queryParams);
+
+            if (response && response.statusCode === 200) {
+                const apiErrorData = response.data || [];
+                const allErrorCodes = [
+                    ...apiErrorData.map(ec => ({
+                        ...ec,
+                        tempId: `existing_${ec.error_code_id}`,
+                        status: 'existing'
+                    })),
+                    ...tempErrorCodes.filter(ec => ec.status !== 'deleted')
+                ];
+
+                setErrorCodes(allErrorCodes);
+
+                if (response.paging) {
+                    setPagination({
+                        current_page: response.paging.current_page || 1,
+                        current_limit: response.paging.current_limit || 15,
+                        total_limit: response.paging.total_limit || 0,
+                        total_page: response.paging.total_page || 0,
+                    });
+                }
+            } else {
+                setErrorCodes([]);
+            }
+        } catch (error) {
+            setErrorCodes([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (isReadOnly && propErrorCodes) {
+
+            setErrorCodes(propErrorCodes);
+            setLoading(false);
+        } else {
+
+            fetchErrorCodes();
+        }
+    }, [brandId, queryParams, tempErrorCodes, trigerFilter, isReadOnly, propErrorCodes]);
+
+    const handlePrevious = () => {
+        if (pagination.current_page > 1) {
+            setCurrentPage(pagination.current_page - 1);
+        }
+    };
+
+    const handleNext = () => {
+        if (pagination.current_page < pagination.total_page) {
+            setCurrentPage(pagination.current_page + 1);
+        }
+    };
+
+    const handleSearch = () => {
+        setCurrentPage(1);
+        if (onSearch) {
+            onSearch();
+        }
+    };
+
+    const handleSearchClear = () => {
+        setCurrentPage(1);
+        if (onSearchClear) {
+            onSearchClear();
+        }
+    };
+
+    const handleDelete = async (item, e) => {
+        e.stopPropagation();
+
+        if (item.status === 'existing' && item.error_code_id) {
+            NotifConfirmDialog({
+                icon: 'warning',
+                title: 'Hapus Error Code',
+                message: `Apakah Anda yakin ingin menghapus error code ${item.error_code}?`,
+                onConfirm: () => performDelete(item),
+                onCancel: () => { },
+                confirmButtonText: 'Hapus'
+            });
+        }
+    };
+
+    const performDelete = async (item) => {
+        try {
+
+            if (!item.error_code_id || item.error_code_id === 'undefined') {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Error',
+                    message: 'Error code ID tidak valid'
+                });
+                return;
+            }
+
+            if (!item.brand_id || item.brand_id === 'undefined') {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Error',
+                    message: 'Brand ID tidak valid'
+                });
+                return;
+            }
+
+            const response = await deleteErrorCode(item.brand_id, item.error_code_id);
+
+            if (response && response.statusCode === 200) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Error code berhasil dihapus'
+                });
+                fetchErrorCodes();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: 'Gagal menghapus error code'
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Terjadi kesalahan saat menghapus error code'
+            });
+        }
+    };
+
+    return (
+        <Card
+            title="Daftar Error Code"
+            style={{ width: '100%', minWidth: '472px' }}
+            styles={{ body: { padding: '12px' } }}
+        >
+            <Input.Search
+                placeholder="Cari error code..."
+                value={searchText}
+                onChange={(e) => {
+                    const value = e.target.value;
+                    if (onSearchChange) {
+                        onSearchChange(value);
+                    }
+                }}
+                onSearch={handleSearch}
+                allowClear
+                enterButton={
+                    <Button
+                        type="primary"
+                        icon={<SearchOutlined />}
+                        onClick={handleSearch}
+                        style={{
+                            backgroundColor: '#23A55A',
+                            borderColor: '#23A55A',
+                            height: '32px'
+                        }}
+                    >
+                        Search
+                    </Button>
+                }
+                size="default"
+                style={{
+                    marginBottom: 12,
+                    height: '32px',
+                    width: '100%',
+                }}
+            />
+
+            <div style={{
+                height: '90vh',
+                border: '1px solid #d9d9d9',
+                borderRadius: '6px',
+                overflow: 'auto',
+                marginBottom: 12,
+                backgroundColor: '#fafafa'
+            }}>
+                {errorCodes.length === 0 ? (
+                    <Empty
+                        description="Belum ada error code"
+                        style={{ marginTop: 50 }}
+                    />
+                ) : (
+                    <div style={{ padding: '8px' }}>
+                        {errorCodes.map((item) => (
+                            <div
+                                key={item.tempId || item.error_code_id}
+                                style={{
+                                    cursor: 'pointer',
+                                    padding: '8px 12px',
+                                    borderRadius: '6px',
+                                    marginBottom: '4px',
+                                    border: selectedErrorCode?.tempId === item.tempId ? '2px solid #23A55A' : '1px solid #d9d9d9',
+                                    backgroundColor: selectedErrorCode?.tempId === item.tempId ? '#f6ffed' : '#fff',
+                                    transition: 'all 0.2s ease'
+                                }}
+                                onClick={() => onErrorCodeSelect(item)}
+                            >
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                    <div style={{ flex: 1 }}>
+                                        <div style={{ fontWeight: 'bold', fontSize: '12px' }}>
+                                            {item.error_code}
+                                        </div>
+                                        <div style={{ fontSize: '11px', color: '#666' }}>
+                                            {item.error_code_name}
+                                        </div>
+                                    </div>
+                                    {item.status === 'existing' && (
+                                        <Button
+                                            type="text"
+                                            danger
+                                            size="small"
+                                            icon={<DeleteOutlined />}
+                                            onClick={(e) => handleDelete(item, e)}
+                                            style={{
+                                                padding: '2px 6px',
+                                                height: '24px',
+                                                fontSize: '11px',
+                                                border: '1px solid #ff4d4f'
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {pagination.total_limit > 0 && (
+                <Row justify="space-between" align="middle" gutter={16}>
+                    <Col flex="auto">
+                        <span style={{ fontSize: '12px', color: '#666' }}>
+                            Menampilkan {pagination.current_limit} data halaman{' '}
+                            {pagination.current_page} dari total {pagination.total_limit} data
+                        </span>
+                    </Col>
+                    <Col flex="none">
+                        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                            <Button
+                                icon={<LeftOutlined />}
+                                onClick={handlePrevious}
+                                disabled={pagination.current_page <= 1}
+                                size="small"
+                            >
+                            </Button>
+                            <span style={{ fontSize: '12px', color: '#666', minWidth: '60px', textAlign: 'center' }}>
+                                {pagination.current_page} / {pagination.total_page}
+                            </span>
+                            <Button
+                                icon={<RightOutlined />}
+                                onClick={handleNext}
+                                disabled={pagination.current_page >= pagination.total_page}
+                                size="small"
+                            >
+                            </Button>
+                        </div>
+                    </Col>
+                </Row>
+            )}
+        </Card>
+    );
+};
+
+export default ListErrorCode;

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

@@ -1,33 +0,0 @@
-import React, { memo } from 'react';
-import { Row, Col } from 'antd';
-
-const ListErrorMaster = memo(function ListErrorMaster(props) {
-    return (
-        <React.Fragment>
-            <Row>
-                <Col xs={24}>
-                    <div
-                        style={{
-                            textAlign: 'center',
-                            padding: '100px 20px',
-                            backgroundColor: '#f5f5f5',
-                            borderRadius: '8px',
-                        }}
-                    >
-                        <h2
-                            style={{
-                                fontSize: '24px',
-                                color: '#595959',
-                                marginBottom: '16px',
-                            }}
-                        >
-                            Cooming soon
-                        </h2>
-                    </div>
-                </Col>
-            </Row>
-        </React.Fragment>
-    );
-});
-
-export default ListErrorMaster;

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

@@ -0,0 +1,496 @@
+import React, { useState } from 'react';
+import { Form, Input, Button, Switch, Radio, Typography, Space, Card, ConfigProvider } from 'antd';
+import { DeleteOutlined, EyeOutlined, FileOutlined } from '@ant-design/icons';
+import FileUploadHandler from './FileUploadHandler';
+import { NotifAlert } from '../../../../components/Global/ToastNotif';
+import { getFileUrl, getFolderFromFileType } from '../../../../api/file-uploads';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const SolutionFieldNew = ({
+    fieldKey,
+    fieldName,
+    index,
+    solutionType,
+    solutionStatus,
+    isReadOnly = false,
+    canRemove = true,
+    onTypeChange,
+    onStatusChange,
+    onRemove,
+    onFileUpload,
+    onFileView,
+    fileList = [],
+    originalSolutionData = null
+}) => {
+    const form = Form.useFormInstance();
+    const [currentFile, setCurrentFile] = useState(null);
+    const [isDeleted, setIsDeleted] = useState(false);
+
+    const fileUpload = Form.useWatch(['solution_items', fieldKey, 'fileUpload'], form);
+    const file = Form.useWatch(['solution_items', fieldKey, 'file'], form);
+    const nameValue = Form.useWatch(['solution_items', fieldKey, 'name'], form);
+    const fileNameValue = Form.useWatch(['solution_items', fieldKey, 'fileName'], form);
+    const statusValue = Form.useWatch(['solution_items', fieldKey, 'status'], form) ?? true;
+
+    const pathSolution = Form.useWatch(['solution_items', fieldKey, 'path_solution'], form);
+
+    const [deleteCounter, setDeleteCounter] = useState(0);
+    
+    React.useEffect(() => {
+        if (!nameValue || nameValue === '') {
+            setCurrentFile(null);
+            setIsDeleted(false);
+            setDeleteCounter(prev => prev + 1);
+        }
+    }, [nameValue]);
+
+    React.useEffect(() => {
+        const getFileFromFormValues = () => {
+            const hasValidFileUpload = fileUpload && typeof fileUpload === 'object' && Object.keys(fileUpload).length > 0;
+            const hasValidFile = file && typeof file === 'object' && Object.keys(file).length > 0;
+            const hasValidPath = pathSolution && pathSolution.trim() !== '';
+
+            const wasExplicitlyDeleted =
+                (fileUpload === null || file === null || pathSolution === null) &&
+                !hasValidFileUpload &&
+                !hasValidFile &&
+                !hasValidPath;
+
+            if (wasExplicitlyDeleted) {
+                return null;
+            }
+
+            if (solutionType === 'text') {
+                return null;
+            }
+
+            if (hasValidFileUpload) {
+                return fileUpload;
+            }
+            if (hasValidFile) {
+                return file;
+            }
+            if (hasValidPath) {
+                return {
+                    name: fileNameValue || pathSolution.split('/').pop() || 'File',
+                    uploadPath: pathSolution,
+                    url: pathSolution,
+                    path: pathSolution
+                };
+            }
+
+            return null;
+        };
+
+        const fileFromForm = getFileFromFormValues();
+
+        if (JSON.stringify(currentFile) !== JSON.stringify(fileFromForm)) {
+            setCurrentFile(fileFromForm);
+        }
+    }, [fileUpload, file, pathSolution, solutionType, deleteCounter, fileNameValue, fieldKey]);
+
+
+    const renderSolutionContent = () => {
+        if (solutionType === 'text') {
+            return (
+                <Form.Item
+                    name={['solution_items', fieldKey, 'text']}
+                    rules={[{ required: true, message: 'Text solution wajib diisi!' }]}
+                >
+                    <TextArea
+                        placeholder="Enter solution text"
+                        rows={3}
+                        disabled={isReadOnly}
+                        style={{ fontSize: 12 }}
+                    />
+                </Form.Item>
+            );
+        }
+
+        if (solutionType === 'file') {
+            const hasOriginalFile = originalSolutionData && (
+                originalSolutionData.path_solution ||
+                originalSolutionData.path_document
+            );
+
+            let displayFile = null;
+
+            if (currentFile && Object.keys(currentFile).length > 0) {
+                displayFile = currentFile;
+            }
+            else if (hasOriginalFile && !isDeleted) {
+                displayFile = {
+                    name: originalSolutionData.file_upload_name ||
+                        (originalSolutionData.path_solution || originalSolutionData.path_document)?.split('/').pop() ||
+                        'File',
+                    uploadPath: originalSolutionData.path_solution || originalSolutionData.path_document,
+                    url: originalSolutionData.path_solution || originalSolutionData.path_document,
+                    path: originalSolutionData.path_solution || originalSolutionData.path_document,
+                    isExisting: true
+                };
+            }
+            else if (fileUpload && typeof fileUpload === 'object' && Object.keys(fileUpload).length > 0) {
+                displayFile = fileUpload;
+            }
+            else if (file && typeof file === 'object' && Object.keys(file).length > 0) {
+                displayFile = file;
+            }
+            else if (pathSolution && pathSolution.trim() !== '') {
+                displayFile = {
+                    name: pathSolution.split('/').pop() || 'File',
+                    uploadPath: pathSolution,
+                    url: pathSolution,
+                    path: pathSolution
+                };
+            }
+
+  
+            if (displayFile) {
+                const getFileNameFromPath = () => {
+                    const filePath = displayFile.uploadPath || displayFile.url || displayFile.path || '';
+                    if (filePath) {
+                        const fileName = filePath.split('/').pop();
+                        return fileName || 'Uploaded File';
+                    }
+                    return displayFile.name || 'Uploaded File';
+                };
+
+                const displayFileName = getFileNameFromPath();
+
+                return (
+                    <Card
+                        style={{
+                            marginBottom: 8,
+                            borderRadius: 8,
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                            border: '1px solid #e8e8e8'
+                        }}
+                        styles={{ body: { padding: '16px' } }}
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                width: 48,
+                                height: 48,
+                                borderRadius: 8,
+                                backgroundColor: '#f0f5ff',
+                                flexShrink: 0
+                            }}>
+                                <FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+                            </div>
+
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                                <div style={{
+                                    fontSize: 13,
+                                    fontWeight: 600,
+                                    color: '#262626',
+                                    marginBottom: 4,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap'
+                                }}>
+                                    {displayFileName}
+                                </div>
+                                <div style={{ fontSize: 12, color: '#8c8c8c' }}>
+                                    {displayFile.size ? `${(displayFile.size / 1024).toFixed(1)} KB` : 'File uploaded'}
+                                </div>
+                            </div>
+
+                            <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+                                <Button
+                                    type="primary"
+                                    size="middle"
+                                    icon={<EyeOutlined />}
+                                    style={{
+                                        fontSize: 12,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 4
+                                    }}
+                                    onClick={() => {
+                                        try {
+                                            let fileUrl = '';
+                                            let actualFileName = '';
+
+                                            const filePath = displayFile.uploadPath || displayFile.url || displayFile.path || '';
+
+                                            if (filePath) {
+                                                actualFileName = filePath.split('/').pop();
+
+                                                if (actualFileName) {
+                                                    const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                                                    const folder = getFolderFromFileType(fileExtension);
+
+                                                    fileUrl = getFileUrl(folder, actualFileName);
+
+                                                }
+                                            }
+
+                                            if (!fileUrl && filePath) {
+                                                fileUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
+                                            }
+
+                                            if (fileUrl && actualFileName) {
+                                                const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
+                                                const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+
+                                                if (imageExtensions.includes(fileExtension)) {
+                                                    const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
+                                                    window.open(viewerUrl, '_blank', 'noopener,noreferrer');
+                                                } else {
+                                                    window.open(fileUrl, '_blank', 'noopener,noreferrer');
+                                                }
+                                            } else {
+                                                NotifAlert({
+                                                    icon: 'error',
+                                                    title: 'Error',
+                                                    message: 'File URL not found'
+                                                });
+                                            }
+                                        } catch (error) {
+                                            NotifAlert({
+                                                icon: 'error',
+                                                title: 'Error',
+                                                message: 'Failed to open file preview'
+                                            });
+                                        }
+                                    }}
+                                />
+                                <Button
+                                    danger
+                                    size="middle"
+                                    icon={<DeleteOutlined />}
+                                    style={{
+                                        fontSize: 12,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }}
+                                    onClick={() => {
+                                        setIsDeleted(true);
+
+                                        form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
+                                        form.setFieldValue(['solution_items', fieldKey, 'file'], null);
+                                        form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
+                                        form.setFieldValue(['solution_items', fieldKey, 'fileName'], null);
+
+                                        setCurrentFile(null);
+
+                                        if (onFileUpload && typeof onFileUpload === 'function') {
+                                            onFileUpload(null);
+                                        }
+
+                                        setDeleteCounter(prev => prev + 1);
+
+                                        setTimeout(() => {
+                                            form.validateFields(['solution_items', fieldKey]);
+                                        }, 50);
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Card>
+                );
+            } else {
+                return (
+                    <FileUploadHandler
+                        type="solution"
+                        existingFile={null}
+                        clearSignal={deleteCounter}
+                        debugProps={{
+                            currentFile: !!currentFile,
+                            deleteCounter,
+                            shouldClear: !currentFile && deleteCounter > 0
+                        }}
+                        onFileUpload={(fileObject) => {
+                            setIsDeleted(false);
+
+                            const filePath = fileObject.path_solution || fileObject.uploadPath || fileObject.path || fileObject.url;
+
+                            const fileWithKey = {
+                                ...fileObject,
+                                solutionId: fieldKey,
+                                path_solution: filePath,
+                                uploadPath: filePath
+                            };
+
+                            if (onFileUpload && typeof onFileUpload === 'function') {
+                                onFileUpload(fileWithKey);
+                            }
+
+                            form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], fileWithKey);
+                            form.setFieldValue(['solution_items', fieldKey, 'file'], fileWithKey);
+                            form.setFieldValue(['solution_items', fieldKey, 'type'], 'file');
+                            form.setFieldValue(['solution_items', fieldKey, 'path_solution'], filePath);
+                            form.setFieldValue(['solution_items', fieldKey, 'fileName'], fileObject.name);
+
+                            setTimeout(() => {
+                                const values = form.getFieldValue(['solution_items', fieldKey]);
+                                const pathSolutionValue = form.getFieldValue(['solution_items', fieldKey, 'path_solution']);
+                            }, 100);
+
+                            setCurrentFile(fileWithKey);
+                        }}
+                        onFileRemove={() => {
+                            form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
+                            form.setFieldValue(['solution_items', fieldKey, 'file'], null);
+                            form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
+
+                            setCurrentFile(null);
+
+                            if (onFileUpload && typeof onFileUpload === 'function') {
+                                onFileUpload(null);
+                            }
+
+                            setDeleteCounter(prev => prev + 1);
+                        }}
+                        disabled={isReadOnly}
+                        buttonText="Upload File"
+                        buttonStyle={{ width: '100%', fontSize: 12 }}
+                        uploadText="Upload solution file (includes images, PDF, documents)"
+                        acceptFileTypes="*"
+                    />
+                );
+            }
+        }
+
+        return null;
+    };
+
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Switch: {
+                        colorPrimary: '#23A55A',
+                        colorPrimaryHover: '#23A55A',
+                    },
+                },
+            }}
+        >
+            <div style={{
+                border: '1px solid #d9d9d9',
+                borderRadius: 6,
+                padding: 12,
+                marginBottom: 12,
+                backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
+            }}>
+            <div style={{
+                marginBottom: 8,
+                gap: 8
+            }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                    <Text strong style={{
+                        fontSize: 12,
+                        color: '#262626',
+                        display: 'block'
+                    }}>
+                        Solution #{index + 1}
+                    </Text>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                            <Form.Item name={['solution_items', fieldKey, 'status']} valuePropName="checked" noStyle>
+                                <Switch
+                                    size="small"
+                                    disabled={isReadOnly}
+                                    onChange={(checked) => {
+                                        onStatusChange(fieldKey, checked);
+                                    }}
+                                />
+                            </Form.Item>
+                            <Text style={{
+                                fontSize: 11,
+                                color: '#666',
+                                whiteSpace: 'nowrap'
+                            }}>
+                                {statusValue ? 'Active' : 'Inactive'}
+                            </Text>
+                        </div>
+
+                        {canRemove && !isReadOnly && (
+                            <Button
+                                type="text"
+                                danger
+                                size="small"
+                                icon={<DeleteOutlined />}
+                                onClick={onRemove}
+                                style={{
+                                    fontSize: 12,
+                                    padding: '2px 4px',
+                                    height: '24px'
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                <Form.Item
+                    name={['solution_items', fieldKey, 'name']}
+                    rules={[{ required: true, message: 'Solution name wajib diisi!' }]}
+                    style={{ margin: 0 }}
+                >
+                    <Input
+                        placeholder="Solution name"
+                        disabled={isReadOnly}
+                        size="default"
+                        style={{ fontSize: 13 }}
+                    />
+                </Form.Item>
+
+            </div>
+
+            <Form.Item
+                name={['solution_items', fieldKey, 'type']}
+                rules={[{ required: true, message: 'Solution type wajib diisi!' }]}
+                style={{ marginBottom: 8 }}
+                initialValue={solutionType || 'text'}
+            >
+                <Radio.Group
+                    onChange={(e) => {
+                        const newType = e.target.value;
+
+                        if (newType === 'text') {
+                            form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
+                            form.setFieldValue(['solution_items', fieldKey, 'file'], null);
+                            form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
+                            form.setFieldValue(['solution_items', fieldKey, 'fileName'], null);
+                            setCurrentFile(null);
+                            setIsDeleted(true);
+
+                            if (onFileUpload && typeof onFileUpload === 'function') {
+                                onFileUpload(null);
+                            }
+                        } else if (newType === 'file') {
+                            form.setFieldValue(['solution_items', fieldKey, 'text'], null);
+                            setIsDeleted(false);
+                        }
+
+                        onTypeChange(fieldKey, newType);
+                    }}
+                    disabled={isReadOnly}
+                    size="small"
+                >
+                    <Radio value="text" style={{ fontSize: 12 }}>Text</Radio>
+                    <Radio value="file" style={{ fontSize: 12 }}>File</Radio>
+                </Radio.Group>
+            </Form.Item>
+
+            <Form.Item
+                name={['solution_items', fieldKey, 'status']}
+                initialValue={solutionStatus !== false ? true : false}
+                noStyle
+            >
+                <input type="hidden" />
+            </Form.Item>
+
+            {renderSolutionContent()}
+            </div>
+        </ConfigProvider>
+    );
+};
+
+export default SolutionFieldNew;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Typography, Divider, Button, Form } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import SolutionFieldNew from './SolutionField';
+
+const { Text } = Typography;
+
+const SolutionForm = ({
+    solutionForm,
+    solutionFields,
+    solutionTypes,
+    solutionStatuses,
+    onAddSolutionField,
+    onRemoveSolutionField,
+    onSolutionTypeChange,
+    onSolutionStatusChange,
+    onSolutionFileUpload,
+    onFileView,
+    fileList,
+    isReadOnly = false,
+    solutionData = [],
+}) => {
+
+    return (
+        <div style={{ marginBottom: 0 }}>
+
+            <Form form={solutionForm} layout="vertical">
+                <div style={{
+                    maxHeight: '400px',
+                    overflowY: 'auto',
+                    paddingRight: '8px'
+                }}>
+                    {solutionFields.map((field, displayIndex) => (
+                        <SolutionFieldNew
+                            key={field}
+                            fieldKey={field}
+                            fieldName={['solution_items', field]}
+                            index={displayIndex}
+                            solutionType={solutionTypes[field]}
+                            solutionStatus={solutionStatuses[field]}
+                            onTypeChange={onSolutionTypeChange}
+                            onStatusChange={onSolutionStatusChange}
+                            onRemove={() => onRemoveSolutionField(field)}
+                            onFileUpload={onSolutionFileUpload}
+                            onFileView={onFileView}
+                            fileList={fileList}
+                            isReadOnly={isReadOnly}
+                            canRemove={solutionFields.length > 1 && displayIndex > 0}
+                            originalSolutionData={solutionData[displayIndex]}
+                        />
+                    ))}
+                </div>
+
+                {!isReadOnly && (
+                    <div style={{ marginBottom: 8, marginTop: 12 }}>
+                        <Button
+                            type="dashed"
+                            onClick={onAddSolutionField}
+                            icon={<PlusOutlined />}
+                            style={{
+                                width: '100%',
+                                borderColor: '#23A55A',
+                                color: '#23A55A',
+                                height: '32px',
+                                fontSize: '12px'
+                            }}
+                        >
+                            Add sollution
+                        </Button>
+                    </div>
+                )}
+            </Form>
+        </div>
+    );
+};
+
+export default SolutionForm;

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Select, Typography, Tag, Spin, Empty, Button } from 'antd';
+import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { getAllSparepart } from '../../../../api/sparepart';
+import CustomSparepartCard from './CustomSparepartCard';
+
+const { Text, Title } = Typography;
+const { Option } = Select;
+
+const SparepartSelect = ({
+    selectedSparepartIds = [],
+    onSparepartChange,
+    isReadOnly = false
+}) => {
+    const [spareparts, setSpareparts] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedSpareparts, setSelectedSpareparts] = useState([]);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+
+    useEffect(() => {
+        fetchSpareparts();
+    }, []);
+
+    useEffect(() => {
+        if (selectedSparepartIds && selectedSparepartIds.length > 0) {
+            const fullSelectedSpareparts = spareparts.filter(sp =>
+                selectedSparepartIds.includes(sp.sparepart_id)
+            );
+            setSelectedSpareparts(fullSelectedSpareparts);
+        } else {
+            setSelectedSpareparts([]);
+        }
+    }, [selectedSparepartIds, spareparts]);
+
+    const fetchSpareparts = async (searchQuery = '') => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            params.set('limit', '10');
+
+            if (searchQuery && searchQuery.trim() !== '') {
+                params.set('criteria', searchQuery.trim());
+            }
+
+            const response = await getAllSparepart(params);
+            if (response && (response.statusCode === 200 || response.data)) {
+                const sparepartData = response.data?.data || response.data || [];
+                setSpareparts(sparepartData);
+            } else {
+                setSpareparts([]);
+            }
+        } catch (error) {
+            setSpareparts([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSparepartSelect = (sparepartId) => {
+        const selectedSparepart = spareparts.find(sp => sp.sparepart_id === sparepartId);
+
+        if (selectedSparepart) {
+            const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepartId);
+
+            if (!isAlreadySelected) {
+                const newSelectedSpareparts = [...selectedSpareparts, selectedSparepart];
+                setSelectedSpareparts(newSelectedSpareparts);
+
+                const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
+                onSparepartChange(newSelectedIds);
+            }
+        }
+        setDropdownOpen(false);
+    };
+
+    const handleSearch = (value) => {
+        fetchSpareparts(value);
+    };
+
+    const onDropdownOpenChange = (open) => {
+        setDropdownOpen(open);
+        if (open) {
+            fetchSpareparts();
+        }
+    };
+
+    const handleRemoveSparepart = (sparepartId) => {
+        const newSelectedSpareparts = selectedSpareparts.filter(sp => sp.sparepart_id !== sparepartId);
+        setSelectedSpareparts(newSelectedSpareparts);
+
+        const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
+        onSparepartChange(newSelectedIds);
+    };
+
+    const renderSparepartCard = (sparepart, isSelected = false) => {
+        const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
+
+        return (
+            <CustomSparepartCard
+                key={sparepart.sparepart_id}
+                sparepart={sparepart}
+                isSelected={isSelected}
+                isReadOnly={isReadOnly}
+                showPreview={true}
+                showDelete={isAlreadySelected && !isReadOnly}
+                onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
+                onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
+            />
+        );
+    };
+
+    return (
+        <>
+
+            {!isReadOnly && (
+                <div style={{
+                    marginBottom: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'white',
+                    padding: '8px 0',
+                    borderBottom: '1px solid #f0f0f0'
+                }}>
+                    <Select
+                        placeholder="search and select sparepart"
+                        style={{ width: '100%' }}
+                        loading={loading}
+                        onSelect={handleSparepartSelect}
+                        value={null}
+                        showSearch
+                        onSearch={handleSearch}
+                        filterOption={false}
+                        open={dropdownOpen}
+                        onOpenChange={onDropdownOpenChange}
+                        suffixIcon={<PlusOutlined />}
+                    >
+                        {spareparts
+                            .filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
+                            .slice(0, 10)
+                            .map((sparepart) => (
+                                <Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
+                                    <div>
+                                        <Text strong>{sparepart.sparepart_name || sparepart.name || 'Unnamed'}</Text>
+                                        <Text type="secondary" style={{ marginLeft: 8 }}>
+                                            ({sparepart.sparepart_code || 'No code'})
+                                        </Text>
+                                    </div>
+                                </Option>
+                            ))}
+                    </Select>
+                </div>
+            )}
+
+
+            <div>
+                {selectedSpareparts.length > 0 ? (
+                    <div>
+                        <Title level={5} style={{ marginBottom: 16 }}>
+                            Selected Spareparts ({selectedSpareparts.length})
+                        </Title>
+                        <div>
+                            {selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
+                        </div>
+                    </div>
+                ) : (
+                    <Empty
+                        image={Empty.PRESENTED_IMAGE_SIMPLE}
+                        description="No spareparts selected"
+                        style={{ margin: '20px 0' }}
+                    />
+                )}
+            </div>
+        </>
+    );
+};
+
+export default SparepartSelect;

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
-import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
-
-const { Text } = Typography;
-
-const CardDevice = ({ data, showPreviewModal, showEditModal, showDeleteDialog }) => {
-    const getCardStyle = () => {
-        const color = '#FF8C42'; // Orange color
-        return {
-            border: `2px solid ${color}`,
-            borderRadius: '8px',
-            textAlign: 'center' // Center text
-        };
-    };
-
-    const getTitleStyle = () => {
-        const backgroundColor = '#FF8C42'; // Orange color
-        return {
-            backgroundColor,
-            color: '#fff',
-            padding: '2px 8px',
-            borderRadius: '4px',
-            display: 'inline-block',
-        };
-    };
-
-    return (
-        <Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'center' }}>
-            {data.map((item) => (
-                <Col xs={24} sm={12} md={8} lg={6} key={item.device_id}>
-                    <Card
-                        title={
-                            <span style={getTitleStyle()}>
-                                {item.device_name}
-                            </span>
-                        }
-                        style={getCardStyle()}
-                        actions={[
-                            <Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
-                                <Button
-                                    type="text"
-                                    style={{ color: '#1890ff' }}
-                                    icon={<EyeOutlined />}
-                                    onClick={() => showPreviewModal(item)}
-                                />
-                                <Button
-                                    type="text"
-                                    style={{ color: '#faad14' }}
-                                    icon={<EditOutlined />}
-                                    onClick={() => showEditModal(item)}
-                                />
-                                <Button
-                                    type="text"
-                                    danger
-                                    icon={<DeleteOutlined />}
-                                    onClick={() => showDeleteDialog(item)}
-                                />
-                            </Space>,
-                        ]}
-                    >
-                        <p>
-                            <Text strong>Code:</Text> {item.device_code}
-                        </p>
-                        <p>
-                            <Text strong>Location:</Text> {item.device_location}
-                        </p>
-                        <p>
-                            <Text strong>IP Address:</Text> {item.ip_address}
-                        </p>
-                        <p>
-                            <Text strong>Status:</Text>{' '}
-                            <Tag color={item.device_status ? 'green' : 'red'}>
-                                {item.device_status ? 'Running' : 'Offline'}
-                            </Tag>
-                        </p>
-                    </Card>
-                </Col>
-            ))}
-        </Row>
-    );
-};
-
-export default CardDevice;

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

@@ -1,182 +1,87 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
-    Modal,
-    Input,
-    Divider,
-    Typography,
-    Switch,
-    Button,
-    ConfigProvider,
-    Radio,
-    Select,
-} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
-import { createApd, getJenisPermit, updateApd } from '../../../../api/master-apd';
+import { createDevice, updateDevice } from '../../../../api/master-device';
-import { createDevice, updateDevice, getAllDevice } from '../../../../api/master-device';
+import { getAllBrands } from '../../../../api/master-brand';
-import { Checkbox } from 'antd';
+import { validateRun } from '../../../../Utils/validate';
-const CheckboxGroup = Checkbox.Group;
 
 const { Text } = Typography;
 const { TextArea } = Input;
 
 const DetailDevice = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [brands, setBrands] = useState([]);
+    const [loadingBrands, setLoadingBrands] = useState(false);
 
     const defaultData = {
         device_id: '',
         device_code: '',
         device_name: '',
+        brand_id: '',
+        brand_code: '',
         is_active: true,
-        device_location: 'Building A',
+        device_location: '',
         device_description: '',
         ip_address: '',
+        listen_channel: '',
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
-    const [nextDeviceCode, setNextDeviceCode] = useState('Auto-fill');
-
-    const [jenisPermit, setJenisPermit] = useState([]);
-    const [checkedList, setCheckedList] = useState([]);
-
-    const onChange = (list) => {
-        setCheckedList(list);
-    };
-
-    const onChangeRadio = (e) => {
-        setFormData({
-            ...FormData,
-            type_input: e.target.value,
-        });
-    };
-
-    const getDataJenisPermit = async () => {
-        setCheckedList([]);
-        const result = await getJenisPermit();
-        const data = result.data ?? [];
-        const names = data.map((item) => ({
-            value: item.id_jenis_permit,
-            label: item.nama_jenis_permit,
-        }));
-        setJenisPermit(names);
-    };
 
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
     };
 
-    const validateIPAddress = (ip) => {
-        const ipRegex =
-            /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
-        return ipRegex.test(ip);
-    };
-
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Validasi required fields
+        // Daftar aturan validasi
-        // if (!FormData.device_code) {
+        const validationRules = [
-        //     NotifOk({
+            { field: 'device_name', label: 'Device Name', required: true },
-        //         icon: 'warning',
+            { field: 'ip_address', label: 'Ip Address', required: true, ip: true },
-        //         title: 'Peringatan',
+            { field: 'brand_id', label: 'Brand Device', required: true },
-        //         message: 'Kolom Device Code Tidak Boleh Kosong',
+        ];
-        //     });
-        //     setConfirmLoading(false);
-        //     return;
-        // }
 
-        if (!FormData.device_name) {
+        if (
-            NotifOk({
+            validateRun(formData, validationRules, (errorMessages) => {
-                icon: 'warning',
+                NotifOk({
-                title: 'Peringatan',
+                    icon: 'warning',
-                message: 'Kolom Device Name Tidak Boleh Kosong',
+                    title: 'Peringatan',
-            });
+                    message: errorMessages,
-            setConfirmLoading(false);
+                });
+                setConfirmLoading(false);
+            })
+        )
             return;
-        }
-
-        if (!FormData.device_location) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Device Location Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.ip_address) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom IP Address Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        // Validasi format IP
-        if (!validateIPAddress(FormData.ip_address)) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Format IP Address Tidak Valid',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (props.permitDefault && checkedList.length === 0) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Jenis Permit Tidak Boleh Kosong',
-            });
-
-            setConfirmLoading(false);
-            return;
-        }
-
-        // Backend validation schema doesn't include device_code
-        const payload = {
-            device_name: FormData.device_name,
-            is_active: FormData.is_active,
-            device_location: FormData.device_location,
-            ip_address: FormData.ip_address,
-        };
-
-        // For CREATE: device_description is required (cannot be empty)
-        // For UPDATE: device_description is optional
-        if (!FormData.device_id) {
-            // Creating - ensure description is not empty
-            payload.device_description = FormData.device_description || '-';
-        } else {
-            // Updating - include description as-is
-            payload.device_description = FormData.device_description;
-        }
-
-        console.log('Payload to send:', payload);
 
         try {
-            let response;
+            const payload = {
-            if (!FormData.device_id) {
+                device_name: formData.device_name,
-                response = await createDevice(payload);
+                is_active: formData.is_active,
-            } else {
+                device_location: formData.device_location,
-                response = await updateDevice(FormData.device_id, payload);
+                device_description:
-            }
+                    formData.device_description && formData.device_description.trim() !== ''
+                        ? formData.device_description
+                        : ' ',
+                ip_address: formData.ip_address,
+                brand_id: formData.brand_id,
+                listen_channel: formData.listen_channel,
+            };
 
-            console.log('Save Device Response:', response);
+            const response = formData.device_id
+                ? await updateDevice(formData.device_id, payload)
+                : await createDevice(payload);
 
             // Check if response is successful
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-                // Response.data is now a single object (already extracted from array)
+                const deviceName = response.data?.device_name || formData.device_name;
-                const deviceName = response.data?.device_name || FormData.device_name;
 
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
                     message: `Data Device "${deviceName}" berhasil ${
-                        FormData.device_id ? 'diubah' : 'ditambahkan'
+                        formData.device_id ? 'diubah' : 'ditambahkan'
                     }.`,
                 });
 
@@ -203,7 +108,14 @@ const DetailDevice = (props) => {
     const handleInputChange = (e) => {
         const { name, value } = e.target;
         setFormData({
-            ...FormData,
+            ...formData,
+            [name]: value,
+        });
+    };
+
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...formData,
             [name]: value,
         });
     };
@@ -211,78 +123,48 @@ const DetailDevice = (props) => {
     const handleStatusToggle = (event) => {
         const isChecked = event;
         setFormData({
-            ...FormData,
+            ...formData,
             is_active: isChecked ? true : false,
         });
     };
 
-    const generateNextDeviceCode = async () => {
+    // Fungsi untuk mengambil daftar brand
+    const fetchBrands = async () => {
+        setLoadingBrands(true);
         try {
-            const params = new URLSearchParams({ limit: 10000 });
+            const response = await getAllBrands(new URLSearchParams());
-            const response = await getAllDevice(params);
+            if (response && response.data) {
-
+                setBrands(response.data || []);
-            if (response && response.data && response.data.data) {
-                const devices = response.data.data;
-
-                if (devices.length === 0) {
-                    setNextDeviceCode('DVC001');
-                    return;
-                }
-
-                // Extract numeric part from device codes and find the maximum
-                const deviceNumbers = devices
-                    .map((device) => {
-                        const match = device.device_code?.match(/dvc(\d+)/i);
-                        return match ? parseInt(match[1], 10) : 0;
-                    })
-                    .filter((num) => !isNaN(num));
-
-                const maxNumber = deviceNumbers.length > 0 ? Math.max(...deviceNumbers) : 0;
-                const nextNumber = maxNumber + 1;
-
-                // Format with leading zeros (DVC001, DVC002, etc.)
-                const nextCode = `DVC${String(nextNumber).padStart(3, '0')}`;
-                setNextDeviceCode(nextCode);
-            } else {
-                setNextDeviceCode('DVC001');
             }
         } catch (error) {
-            console.error('Error generating next device code:', error);
+            console.error('Error fetching brands:', error);
-            setNextDeviceCode('Auto-fill');
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Gagal mengambil data brand',
+            });
+        } finally {
+            setLoadingBrands(false);
         }
     };
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
+        if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
-        if (token) {
+            fetchBrands();
-            if (props.showModal) {
-                // Only call getDataJenisPermit if permitDefault is enabled
-                if (props.permitDefault) {
-                    getDataJenisPermit();
-                }
-
-                // Generate next device code only for add mode
-                if (props.actionMode === 'add' && !props.selectedData) {
-                    generateNextDeviceCode();
-                }
-            }
-
-            if (props.selectedData != null) {
-                setFormData(props.selectedData);
-                if (props.permitDefault && props.selectedData.jenis_permit_default_arr) {
-                    setCheckedList(props.selectedData.jenis_permit_default_arr);
-                }
-            } else {
-                setFormData(defaultData);
-            }
-        } else {
-            // navigate('/signin'); // Uncomment if useNavigate is imported
         }
     }, [props.showModal, props.actionMode]);
 
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.showModal, props.selectedData, props.actionMode]);
+
     return (
         <Modal
-            // title={`${FormData.id_apd === '' ? 'Tambah' : 'Edit'} APD`}
+            // title={`${formData.id_apd === '' ? 'Tambah' : 'Edit'} APD`}
             title={`${
                 props.actionMode === 'add'
                     ? 'Tambah'
@@ -305,7 +187,6 @@ const DetailDevice = (props) => {
                                     defaultBorderColor: '#23A55A',
                                     defaultHoverColor: '#23A55A',
                                     defaultHoverBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
                                 },
                             },
                         }}
@@ -337,7 +218,7 @@ const DetailDevice = (props) => {
                 </React.Fragment>,
             ]}
         >
-            {FormData && (
+            {formData && (
                 <div>
                     <div>
                         <div>
@@ -355,14 +236,14 @@ const DetailDevice = (props) => {
                                     disabled={props.readOnly}
                                     style={{
                                         backgroundColor:
-                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
+                                            formData.is_active === true ? '#23A55A' : '#bfbfbf',
                                     }}
-                                    checked={FormData.is_active === true}
+                                    checked={formData.is_active === true}
                                     onChange={handleStatusToggle}
                                 />
                             </div>
                             <div>
-                                <Text>{FormData.is_active === true ? 'Running' : 'Offline'}</Text>
+                                <Text>{formData.is_active === true ? 'Running' : 'Offline'}</Text>
                             </div>
                         </div>
                     </div>
@@ -371,7 +252,7 @@ const DetailDevice = (props) => {
                         <Text strong>Device ID</Text>
                         <Input
                             name="device_id"
-                            value={FormData.device_id}
+                            value={formData.device_id}
                             onChange={handleInputChange}
                             disabled
                         />
@@ -381,34 +262,58 @@ const DetailDevice = (props) => {
                         <Text strong>Device Code</Text>
                         <Input
                             name="device_code"
-                            value={FormData.device_code || nextDeviceCode}
+                            value={formData.device_code}
-                            placeholder={nextDeviceCode}
+                            placeholder={'Device Code Auto Fill'}
                             disabled
                             style={{
                                 backgroundColor: '#f5f5f5',
                                 cursor: 'not-allowed',
-                                color: FormData.device_code ? '#000000' : '#bfbfbf'
+                                color: formData.device_code ? '#000000' : '#bfbfbf',
                             }}
                         />
                     </div>
+
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
                             name="device_name"
-                            value={FormData.device_name}
+                            value={formData.device_name}
                             onChange={handleInputChange}
                             placeholder="Enter Device Name"
                             readOnly={props.readOnly}
                         />
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Device Location</Text>
+                        <Text strong>Brand Device</Text>
                         <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            name="brand_id"
+                            value={formData.brand_id}
+                            onChange={(value) => handleSelectChange('brand_id', value)}
+                            placeholder="Select Brand Device"
+                            disabled={props.readOnly}
+                            loading={loadingBrands}
+                            style={{ width: '100%' }}
+                            allowClear
+                            showSearch
+                            filterOption={(input, option) =>
+                                option.children.toLowerCase().includes(input.toLowerCase())
+                            }
+                        >
+                            {brands.map((brand) => (
+                                <Select.Option key={brand.brand_id} value={brand.brand_id}>
+                                    {`${brand.brand_code} - ${brand.brand_name} `}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Device Location</Text>
                         <Input
                             type="text"
                             name="device_location"
-                            value={FormData.device_location}
+                            value={formData.device_location}
                             onChange={handleInputChange}
                             placeholder="Enter Device Location"
                             readOnly={props.readOnly}
@@ -419,36 +324,33 @@ const DetailDevice = (props) => {
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
                             name="ip_address"
-                            value={FormData.ip_address}
+                            value={formData.ip_address}
                             onChange={handleInputChange}
                             placeholder="e.g. 192.168.1.1"
                             readOnly={props.readOnly}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Listen Channel</Text>
+                        <Input
+                            name="listen_channel"
+                            value={formData.listen_channel}
+                            onChange={handleInputChange}
+                            placeholder="Enter Listen Channel"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Description</Text>
                         <TextArea
                             name="device_description"
-                            value={FormData.device_description}
+                            value={formData.device_description}
                             onChange={handleInputChange}
                             placeholder="Enter Device Description (Optional)"
                             readOnly={props.readOnly}
                             rows={4}
                         />
                     </div>
-                    {props.permitDefault && (
-                        <div>
-                            <Text strong>Jenis Permit</Text>
-                            <Text style={{ color: 'red' }}> *</Text>
-
-                            <CheckboxGroup
-                                options={jenisPermit}
-                                value={checkedList}
-                                onChange={onChange}
-                                disabled={props.readOnly}
-                            />
-                        </div>
-                    )}
                 </div>
             )}
         </Modal>

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, Button, ConfigProvider } from 'antd';
 import { jsPDF } from 'jspdf';
 import logoPiEnergi from '../../../../assets/images/logo/pi-energi.png';
@@ -22,12 +22,12 @@ const GeneratePdf = (props) => {
     };
 
     const generatePdf = async () => {
-        const {images, title} = await kopReportPdf(logoPiEnergi, 'COLD WORK PERMIT');
+        const { images, title } = await kopReportPdf(logoPiEnergi, 'COLD WORK PERMIT');
 
         const doc = new jsPDF({
-            orientation: "portrait",
+            orientation: 'portrait',
-            unit: "mm",
+            unit: 'mm',
-            format: "a4"
+            format: 'a4',
         });
 
         const width = 45;
@@ -45,32 +45,32 @@ const GeneratePdf = (props) => {
         doc.setFontSize(11);
         doc.setFont('helvetica', 'normal');
 
-        doc.setLineWidth(0.2); 
+        doc.setLineWidth(0.2);
         doc.line(10, 32, 200, 32);
-        doc.setLineWidth(0.6); 
+        doc.setLineWidth(0.6);
         doc.line(10, 32.8, 200, 32.8);
 
-        doc.text("Tanggal Pengajuan", 10, 42);
+        doc.text('Tanggal Pengajuan', 10, 42);
-        doc.text(":", 59, 42);
+        doc.text(':', 59, 42);
 
-        doc.text("Deskripsi Pekerjaan", 10, 48);
+        doc.text('Deskripsi Pekerjaan', 10, 48);
-        doc.text(":", 59, 48);
+        doc.text(':', 59, 48);
-        
-        doc.text("No. Permit", 10, 54);
-        doc.text(":", 59, 54);
-        doc.text("Spesifik Lokasi", 120, 54);
-        doc.text(":", 160, 54);
 
-        doc.text("No. Order", 10, 60);
+        doc.text('No. Permit', 10, 54);
-        doc.text(":", 59, 60);
+        doc.text(':', 59, 54);
-        doc.text("Jum. Personil Terlihat", 120, 60);
+        doc.text('Spesifik Lokasi', 120, 54);
-        doc.text(":", 160, 60);
+        doc.text(':', 160, 54);
 
-        doc.text("Peralatan yang digunakan", 10, 66);
+        doc.text('No. Order', 10, 60);
-        doc.text(":", 59, 66);
+        doc.text(':', 59, 60);
+        doc.text('Jum. Personil Terlihat', 120, 60);
+        doc.text(':', 160, 60);
 
-        doc.text("Jenis APD yang digunakan", 10, 72);
+        doc.text('Peralatan yang digunakan', 10, 66);
-        doc.text(":", 59, 72);
+        doc.text(':', 59, 66);
+
+        doc.text('Jenis APD yang digunakan', 10, 72);
+        doc.text(':', 59, 72);
 
         const blob = doc.output('blob');
         const url = URL.createObjectURL(blob);
@@ -84,7 +84,7 @@ const GeneratePdf = (props) => {
 
     return (
         <Modal
-            width='60%'
+            width="60%"
             title="Preview PDF"
             open={props.showPdf}
             // open={true}
@@ -101,7 +101,6 @@ const GeneratePdf = (props) => {
                                     defaultBorderColor: '#23A55A',
                                     defaultHoverColor: '#23A55A',
                                     defaultHoverBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
                                 },
                             },
                         }}

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

@@ -13,8 +13,16 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
 import { useNavigate } from 'react-router-dom';
 import { deleteDevice, getAllDevice } from '../../../../api/master-device';
 import TableList from '../../../../components/Global/TableList';
+import { getAllBrands } from '../../../../api/master-brand';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
     {
         title: 'ID',
         dataIndex: 'device_id',
@@ -27,6 +35,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'device_code',
         key: 'device_code',
         width: '10%',
+        hidden: true,
     },
     {
         title: 'Device Name',
@@ -34,6 +43,13 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'device_name',
         width: '20%',
     },
+    {
+        title: 'Brand Device',
+        dataIndex: 'brand_name',
+        key: 'brand_name',
+        width: '20%',
+        render: (brand_name) => brand_name || '-'
+    },
     {
         title: 'Location',
         dataIndex: 'device_location',
@@ -46,15 +62,22 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'ip_address',
         width: '10%',
     },
+    {
+        title: 'Listen Channel',
+        dataIndex: 'listen_channel',
+        key: 'listen_channel',
+        width: '10%',
+        render: (listen_channel) => listen_channel || '-'
+    },
     {
         title: 'Status',
-        dataIndex: 'device_status',
+        dataIndex: 'is_active',
-        key: 'device_status',
+        key: 'is_active',
         width: '10%',
         align: 'center',
-        render: (_, { device_status }) => (
+        render: (_, { is_active }) => (
             <>
-                {device_status === true ? (
+                {is_active === true ? (
                     <Tag color={'green'} key={'status'}>
                         Running
                     </Tag>
@@ -67,7 +90,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         ),
     },
     {
-        title: 'Aksi',
+        title: 'Action',
         key: 'aksi',
         align: 'center',
         width: '15%',
@@ -235,7 +258,7 @@ const ListDevice = memo(function ListDevice(props) {
                                             onClick={() => showAddModal()}
                                             size="large"
                                         >
-                                            Tambah Data
+                                            Add data
                                         </Button>
                                     </ConfigProvider>
                                 </Space>

src/pages/master/plantSubSection/IndexPlantSubSection.jsx

@@ -1,13 +1,13 @@
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import ListPlantSection from './component/ListPlantSection';
+import ListPlantSection from './component/ListPlantSubSection';
-import DetailPlantSection from './component/DetailPlantSection';
+import DetailPlantSection from './component/DetailPlantSubSection';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 import { Typography } from 'antd';
 
 const { Text } = Typography;
 
-const IndexPlantSection = memo(function IndexPlantSection() {
+const IndexPlantSubSection = memo(function IndexPlantSubSection() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
 
@@ -71,4 +71,4 @@ const IndexPlantSection = memo(function IndexPlantSection() {
     );
 });
 
-export default IndexPlantSection;
+export default IndexPlantSubSection;

src/pages/master/plantSubSection/component/DetailPlantSubSection.jsx

@@ -1,37 +1,51 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
-    Modal,
-    Input,
-    Typography,
-    Switch,
-    Button,
-    ConfigProvider,
-    Divider,
-} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
-import { createPlantSection, updatePlantSection, getAllPlantSection } from '../../../../api/master-plant-section';
+import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
+import { validateRun } from '../../../../Utils/validate';
+import TextArea from 'antd/es/input/TextArea';
 
 const { Text } = Typography;
 
-const DetailPlantSection = (props) => {
+const DetailPlantSubSection = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
     const defaultData = {
-        sub_section_id: '',
+        plant_sub_section_id: '',
-        sub_section_code: '',
+        plant_sub_section_code: '',
-        sub_section_name: '',
+        plant_sub_section_name: '',
+        table_name_value: '', // Fix field name
+        plant_sub_section_description: '',
         is_active: true,
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
-    const [nextPlantSectionCode, setNextPlantSectionCode] = useState('Auto-fill');
 
     const handleInputChange = (e) => {
-        const { name, value } = e.target;
+        // Handle different input types
-        setFormData({
+        let name, value;
-            ...FormData,
+
-            [name]: value,
+        if (e && e.target) {
-        });
+            // Standard input
+            name = e.target.name;
+            value = e.target.value;
+        } else if (e && e.type === 'change') {
+            // Switch or other components
+            name = e.name || e.target?.name;
+            value = e.value !== undefined ? e.value : e.checked;
+        } else {
+            // Fallback
+            return;
+        }
+
+        // console.log(`📝 Input change: ${name} = ${value}`);
+
+        if (name) {
+            setFormData((prev) => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
     };
 
     const handleCancel = () => {
@@ -42,52 +56,63 @@ const DetailPlantSection = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        if (!FormData.sub_section_name) {
+        // Daftar aturan validasi
-            NotifOk({
+        const validationRules = [
-                icon: 'warning',
+            { field: 'plant_sub_section_name', label: 'Plant Sub Section Name', required: true },
-                title: 'Peringatan',
+        ];
-                message: 'Kolom Plant Sub Section Name Tidak Boleh Kosong',
+
-            });
+        if (
-            setConfirmLoading(false);
+            validateRun(formData, validationRules, (errorMessages) => {
+                NotifOk({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: errorMessages,
+                });
+                setConfirmLoading(false);
+            })
+        )
             return;
-        }
 
         try {
-            let response;
+            // console.log('💾 Current formData before save:', formData);
-            let payload;
 
-            if (props.actionMode === 'edit') {
+            const payload = {
-                payload = { 
+                plant_sub_section_name: formData.plant_sub_section_name,
-                    is_active: FormData.is_active,
+                plant_sub_section_description:
-                    sub_section_name: FormData.sub_section_name
+                    formData.plant_sub_section_description &&
-                };
+                    formData.plant_sub_section_description.trim() !== ''
-                response = await updatePlantSection(FormData.sub_section_id, payload);
+                        ? formData.plant_sub_section_description
-            } else {
+                        : ' ',
-                // Backend generates the code, so we only send the name and status
+                table_name_value: formData.table_name_value, // Fix field name
-                payload = {
+                is_active: formData.is_active,
-                    sub_section_name: FormData.sub_section_name,
+            };
-                    is_active: FormData.is_active,
+
-                }
+            // console.log('📤 Payload to be sent:', payload);
-                response = await createPlantSection(payload);
+
-            }
+            const response =
+                props.actionMode === 'edit'
+                    ? await updatePlantSection(formData.plant_sub_section_id, payload)
+                    : await createPlantSection(payload);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                 const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
+
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
                     message: `Data Plant Section berhasil ${action}.`,
                 });
+
                 props.setActionMode('list');
             } else {
-                NotifAlert({
+                NotifOk({
                     icon: 'error',
                     title: 'Gagal',
                     message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
                 });
             }
         } catch (error) {
-            NotifAlert({
+            NotifOk({
                 icon: 'error',
                 title: 'Error',
                 message: error.message || 'Terjadi kesalahan pada server.',
@@ -96,68 +121,33 @@ const DetailPlantSection = (props) => {
             setConfirmLoading(false);
         }
     };
-    
+
     const handleStatusToggle = (checked) => {
         setFormData({
-            ...FormData,
+            ...formData,
             is_active: checked,
         });
     };
 
-    const generateNextPlantSectionCode = async () => {
-        try {
-            const params = new URLSearchParams({ limit: 10000 });
-            const response = await getAllPlantSection(params);
-
-            if (response && response.data && response.data.data) {
-                const sections = response.data.data;
-
-                if (sections.length === 0) {
-                    setNextPlantSectionCode('SUB001');
-                    return;
-                }
-
-                // Extract numeric part from plant section codes and find the maximum
-                const sectionNumbers = sections
-                    .map((section) => {
-                        const match = section.sub_section_code?.match(/sub(\d+)/i);
-                        return match ? parseInt(match[1], 10) : 0;
-                    })
-                    .filter((num) => !isNaN(num));
-
-                const maxNumber = sectionNumbers.length > 0 ? Math.max(...sectionNumbers) : 0;
-                const nextNumber = maxNumber + 1;
-
-                // Format with leading zeros (SUB001, SUB002, etc.)
-                const nextCode = `SUB${String(nextNumber).padStart(3, '0')}`;
-                setNextPlantSectionCode(nextCode);
-            } else {
-                setNextPlantSectionCode('SUB001');
-            }
-        } catch (error) {
-            console.error('Error generating next plant section code:', error);
-            setNextPlantSectionCode('Auto-fill');
-        }
-    };
-
     useEffect(() => {
-        if (props.showModal) {
+        //  console.log('🔄 Modal state changed:', {
-            // Generate next plant section code only for add mode
+        //     showModal: props.showModal,
-            if (props.actionMode === 'add' && !props.selectedData) {
+        //     actionMode: props.actionMode,
-                generateNextPlantSectionCode();
+        //     selectedData: props.selectedData,
-            }
+        // });
-        }
 
         if (props.selectedData) {
+            // console.log('📋 Setting form data from selectedData:', props.selectedData);
             setFormData(props.selectedData);
         } else {
+            // console.log('📋 Resetting to default data');
             setFormData(defaultData);
         }
     }, [props.showModal, props.selectedData, props.actionMode]);
 
     return (
         <Modal
-            title={`${ 
+            title={`${
                 props.actionMode === 'add'
                     ? 'Tambah'
                     : props.actionMode === 'preview'
@@ -201,7 +191,7 @@ const DetailPlantSection = (props) => {
                 </React.Fragment>,
             ]}
         >
-            {FormData && (
+            {formData && (
                 <div>
                     <div>
                         <div>
@@ -212,16 +202,14 @@ const DetailPlantSection = (props) => {
                                 <Switch
                                     disabled={props.readOnly}
                                     style={{
-                                        backgroundColor: FormData.is_active ? '#23A55A' : '#bfbfbf',
+                                        backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
                                     }}
-                                    checked={FormData.is_active}
+                                    checked={formData.is_active}
                                     onChange={handleStatusToggle}
                                 />
                             </div>
                             <div>
-                                <Text>
+                                <Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
-                                    {FormData.is_active ? 'Active' : 'Inactive'}
-                                </Text>
                             </div>
                         </div>
                     </div>
@@ -229,16 +217,16 @@ const DetailPlantSection = (props) => {
 
                     {/* Plant Section Code - Auto Increment & Read Only */}
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Plant Section Code</Text>
+                        <Text strong>Plant Sub Section Code</Text>
                         <Input
                             name="sub_section_code"
-                            value={FormData.sub_section_code || nextPlantSectionCode}
+                            value={formData.sub_section_code || ''}
-                            placeholder={nextPlantSectionCode}
+                            placeholder={'Plant Sub Section Code Auto Fill'}
                             disabled
                             style={{
                                 backgroundColor: '#f5f5f5',
                                 cursor: 'not-allowed',
-                                color: FormData.sub_section_code ? '#000000' : '#bfbfbf'
+                                color: formData.sub_section_code ? '#000000' : '#bfbfbf',
                             }}
                         />
                     </div>
@@ -247,17 +235,38 @@ const DetailPlantSection = (props) => {
                         <Text strong>Plant Sub Section Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
-                            name="sub_section_name"
+                            name="plant_sub_section_name"
-                            value={FormData.sub_section_name}
+                            value={formData.plant_sub_section_name}
                             onChange={handleInputChange}
                             placeholder="Enter Plant Sub Section Name"
                             readOnly={props.readOnly}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Table Name Value</Text>
+                        <Input
+                            name="table_name_value"
+                            value={formData.table_name_value}
+                            onChange={handleInputChange}
+                            placeholder="Enter Table Name Value (Optional)"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Description</Text>
+                        <TextArea
+                            name="plant_sub_section_description"
+                            value={formData.plant_sub_section_description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Description (Optional)"
+                            readOnly={props.readOnly}
+                            rows={4}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>
     );
 };
 
-export default DetailPlantSection;
+export default DetailPlantSubSection;

src/pages/master/plantSubSection/component/ListPlantSubSection.jsx

@@ -14,31 +14,55 @@ import TableList from '../../../../components/Global/TableList';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
-        title: 'Section Code',
+        title: 'No',
-        dataIndex: 'sub_section_code',
+        key: 'no',
-        key: 'sub_section_code',
+        width: '5%',
-        width: '20%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Plant Sub Section Code',
+        dataIndex: 'plant_sub_section_code',
+        key: 'plant_sub_section_code',
+        width: '10%',
+        align: 'center',
+        hidden: true,
     },
     {
         title: 'Plant Sub Section Name',
-        dataIndex: 'sub_section_name',
+        dataIndex: 'plant_sub_section_name',
-        key: 'sub_section_name',
+        key: 'plant_sub_section_name',
-        width: '40%',
+        width: '15%',
+    },
+    {
+        title: 'Description',
+        dataIndex: 'plant_sub_section_description',
+        key: 'plant_sub_section_description',
+        width: '30%',
+        render: (text) => text || '-',
     },
     {
         title: 'Status',
         dataIndex: 'is_active',
         key: 'is_active',
-        width: '15%',
+        width: '10%',
         align: 'center',
-        render: (status) => (
+        render: (_, { is_active }) => (
-            <Tag color={status ? 'green' : 'red'}>
+            <>
-                {status ? 'Active' : 'Inactive'}
+                {is_active === true ? (
-            </Tag>
+                    <Tag color={'green'} key={'status'}>
+                        Running
+                    </Tag>
+                ) : (
+                    <Tag color={'red'} key={'status'}>
+                        Offline
+                    </Tag>
+                )}
+            </>
         ),
     },
     {
-        title: 'Aksi',
+        title: 'Action',
         key: 'aksi',
         align: 'center',
         width: '15%',
@@ -46,29 +70,32 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
             <Space>
                 <Button
                     type="text"
-                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined />}
-                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
                     onClick={() => showPreviewModal(record)}
+                    style={{ color: '#1890ff', borderColor: '#1890ff' }}
+                    title="View"
                 />
                 <Button
                     type="text"
-                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined />}
-                    icon={<EditOutlined style={{ color: '#faad14' }} />}
                     onClick={() => showEditModal(record)}
+                    style={{ color: '#faad14', borderColor: '#faad14' }}
+                    title="Edit"
                 />
                 <Button
                     type="text"
                     danger
-                    style={{ borderColor: 'red' }}
                     icon={<DeleteOutlined />}
                     onClick={() => showDeleteDialog(record)}
+                    style={{ borderColor: '#ff4d4f' }}
+                    title="Delete"
                 />
             </Space>
         ),
     },
 ];
 
-const ListPlantSection = memo(function ListPlantSection(props) {
+const ListPlantSubSection = memo(function ListPlantSubSection(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -121,8 +148,8 @@ const ListPlantSection = memo(function ListPlantSection(props) {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi Hapus',
-            message: 'Plant Section "' + param.sub_section_name + '" akan dihapus?',
+            message: `Plant Sub Section "${param.plant_sub_section_name}" akan dihapus?`,
-            onConfirm: () => handleDelete(param.sub_section_id),
+            onConfirm: () => handleDelete(param.plant_sub_section_id),
             onCancel: () => props.setSelectedData(null),
         });
     };
@@ -199,7 +226,7 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                                             onClick={() => showAddModal()}
                                             size="large"
                                         >
-                                            Tambah Data
+                                            Add data
                                         </Button>
                                     </ConfigProvider>
                                 </Space>
@@ -210,7 +237,7 @@ const ListPlantSection = memo(function ListPlantSection(props) {
                         <TableList
                             mobile
                             cardColor={'#42AAFF'}
-                            header={'sub_section_name'}
+                            header={'plant_sub_section_name'}
                             showPreviewModal={showPreviewModal}
                             showEditModal={showEditModal}
                             showDeleteDialog={showDeleteDialog}
@@ -226,4 +253,4 @@ const ListPlantSection = memo(function ListPlantSection(props) {
     );
 });
 
-export default ListPlantSection;
+export default ListPlantSubSection;

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

@@ -1,13 +1,25 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import {
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+    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';
 
 dayjs.extend(utc);
 
 const { Text } = Typography;
+const timeFormat = 'HH:mm';
 
 const DetailShift = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
@@ -20,7 +32,15 @@ const DetailShift = (props) => {
         is_active: true,
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
 
     const handleCancel = () => {
         props.setSelectedData(null);
@@ -30,214 +50,150 @@ const DetailShift = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Validasi required fields
+        // Daftar aturan validasi
-        if (!FormData.shift_name || FormData.shift_name.trim() === '') {
+        const validationRules = [
-            NotifOk({
+            { field: 'shift_name', label: 'Shift Name', required: true },
-                icon: 'warning',
+            { field: 'start_time', label: 'Start Time', required: true },
-                title: 'Peringatan',
+            { field: 'end_time', label: 'End Time', required: true },
-                message: 'Kolom Nama Shift Tidak Boleh Kosong',
+        ];
-            });
-            setConfirmLoading(false);
-            return;
-        }
 
-        if (!FormData.start_time || FormData.start_time.trim() === '') {
+        if (
-            NotifOk({
+            validateRun(formData, validationRules, (errorMessages) => {
-                icon: 'warning',
+                NotifOk({
-                title: 'Peringatan',
+                    icon: 'warning',
-                message: 'Kolom Jam Mulai Tidak Boleh Kosong',
+                    title: 'Peringatan',
-            });
+                    message: errorMessages,
-            setConfirmLoading(false);
+                });
+                setConfirmLoading(false);
+            })
+        )
             return;
-        }
 
-        if (!FormData.end_time || FormData.end_time.trim() === '') {
+        // Validasi format waktu
+        if (!formData.start_time || !formData.end_time) {
             NotifOk({
                 icon: 'warning',
                 title: 'Peringatan',
-                message: 'Kolom Jam Selesai Tidak Boleh Kosong',
+                message: 'Waktu Mulai dan Waktu Selesai wajib diisi.',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        // Validate time format
-        const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
-        if (!timePattern.test(FormData.start_time)) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message:
-                    'Format Jam Mulai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 08:00)',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!timePattern.test(FormData.end_time)) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message:
-                    'Format Jam Selesai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 17:00)',
             });
             setConfirmLoading(false);
             return;
         }
 
         try {
-            if (FormData.shift_id) {
+            // Pastikan format waktu HH:mm sesuai validasi BE (regex: /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/)
-                // Update existing shift
+            const formatTimeForAPI = (timeValue) => {
-                const payload = {
+                if (!timeValue) return '';
-                    shift_name: FormData.shift_name,
-                    start_time: FormData.start_time,
-                    end_time: FormData.end_time,
-                    is_active: FormData.is_active,
-                };
 
-                const response = await updateShift(FormData.shift_id, payload);
+                // Jika sudah dalam format HH:mm, return langsung
-                console.log('updateShift response:', response);
+                if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
-
+                    return timeValue;
-                if (response.statusCode === 200) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data Shift "${FormData.shift_name}" berhasil diubah.`,
-                    });
-                    props.setActionMode('list');
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal mengubah data Shift.',
-                    });
                 }
+
+                // 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: formatTimeForAPI(formData.start_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)) {
+                const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
+
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Shift berhasil ${action}.`,
+                });
+
+                props.setActionMode('list');
             } else {
-                // Create new shift
+                NotifOk({
-                const payload = {
+                    icon: 'error',
-                    shift_name: FormData.shift_name,
+                    title: 'Gagal',
-                    start_time: FormData.start_time,
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
-                    end_time: FormData.end_time,
+                });
-                    is_active: FormData.is_active,
-                };
-
-                const response = await createShift(payload);
-                console.log('createShift response:', response);
-
-                if (response.statusCode === 200 || response.statusCode === 201) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data Shift "${FormData.shift_name}" berhasil ditambahkan.`,
-                    });
-                    props.setActionMode('list');
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal menambahkan data Shift.',
-                    });
-                }
             }
         } catch (error) {
-            console.error('Save Shift Error:', error);
+            NotifOk({
-            NotifAlert({
                 icon: 'error',
                 title: 'Error',
-                message: error.message || 'Terjadi kesalahan saat menyimpan data.',
+                message: error.message || 'Terjadi kesalahan pada server.',
             });
+        } finally {
+            setConfirmLoading(false);
         }
-
-        setConfirmLoading(false);
     };
 
-    // Helper function to format time input
+    const handleTimeChange = (time, _, field) => {
-    const formatTimeInput = (value) => {
+        // Pastikan format HH:mm yang konsisten sesuai validasi BE
-        if (!value) return value;
+        const formattedTime = time && time.isValid() ? time.format('HH:mm') : '';
-
-        // Remove any whitespace
-        value = value.trim();
-
-        // If user inputs single digit hour like "8:00", convert to "08:00"
-        const timeRegex = /^(\d{1,2}):(\d{2})(:\d{2})?$/;
-        const match = value.match(timeRegex);
-
-        if (match) {
-            const hours = match[1].padStart(2, '0');
-            const minutes = match[2];
-            const seconds = match[3] || '';
-            return `${hours}:${minutes}${seconds}`;
-        }
-
-        return value;
-    };
-
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-
-        // Just set the value without formatting during typing
         setFormData({
-            ...FormData,
+            ...formData,
-            [name]: value,
+            [field]: formattedTime,
         });
     };
 
-    // Format time when user leaves the input field (onBlur)
+    const handleStatusToggle = (checked) => {
-    const handleTimeBlur = (e) => {
-        const { name, value } = e.target;
-
-        if (name === 'start_time' || name === 'end_time') {
-            const formattedValue = formatTimeInput(value);
-            setFormData({
-                ...FormData,
-                [name]: formattedValue,
-            });
-        }
-    };
-
-    const handleStatusToggle = (isChecked) => {
         setFormData({
-            ...FormData,
+            ...formData,
-            is_active: isChecked,
+            is_active: checked,
         });
     };
 
-    // Helper function to extract time from ISO timestamp using dayjs
-    const extractTime = (timeString) => {
-        if (!timeString) return '';
-
-        // If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
-        if (timeString.includes('T')) {
-            return dayjs.utc(timeString).format('HH:mm');
-        }
-
-        // If it's already in HH:mm:ss format, remove seconds
-        if (timeString.includes(':')) {
-            const parts = timeString.split(':');
-            return `${parts[0]}:${parts[1]}`;
-        }
-
-        return timeString;
-    };
-
     useEffect(() => {
-        const token = localStorage.getItem('token');
+        if (props.selectedData) {
-        if (token) {
+            // Konversi waktu dari berbagai format ke HH:mm menggunakan dayjs
-            if (props.selectedData != null) {
+            const convertTimeToString = (timeValue) => {
-                // Only set fields that are in defaultData
+                if (!timeValue) return '';
-                const filteredData = {
+
-                    shift_id: props.selectedData.shift_id || '',
+                // Jika sudah dalam format HH:mm, return langsung
-                    shift_name: props.selectedData.shift_name || '',
+                if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
-                    start_time: extractTime(props.selectedData.start_time) || '',
+                    return timeValue;
-                    end_time: extractTime(props.selectedData.end_time) || '',
+                }
-                    is_active: props.selectedData.is_active ?? true,
+
-                };
+                // Jika dalam format ISO (1970-01-01T08:00:00.000Z), extract jam:menit dalam UTC
-                setFormData(filteredData);
+                const time = dayjs.utc(timeValue);
-            } else {
+                if (time.isValid()) {
-                setFormData(defaultData);
+                    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.showModal, props.selectedData, props.actionMode]);
 
     return (
         <Modal
@@ -251,34 +207,27 @@ const DetailShift = (props) => {
             open={props.showModal}
             onCancel={handleCancel}
             footer={[
-                <>
+                <React.Fragment key="modal-footer">
                     <ConfigProvider
                         theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
                             components: {
                                 Button: {
                                     defaultBg: 'white',
                                     defaultColor: '#23A55A',
                                     defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
                                 },
                             },
                         }}
                     >
-                        <Button onClick={handleCancel}>Batal</Button>
+                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
                     </ConfigProvider>
                     <ConfigProvider
                         theme={{
-                            token: {
-                                colorBgContainer: '#209652',
-                            },
                             components: {
                                 Button: {
                                     defaultBg: '#23a55a',
                                     defaultColor: '#FFFFFF',
                                     defaultBorderColor: '#23a55a',
-                                    defaultHoverColor: '#FFFFFF',
-                                    defaultHoverBorderColor: '#23a55a',
                                 },
                             },
                         }}
@@ -289,85 +238,71 @@ const DetailShift = (props) => {
                             </Button>
                         )}
                     </ConfigProvider>
-                </>,
+                </React.Fragment>,
             ]}
         >
-            {FormData && (
+            {formData && (
                 <div>
-                    {/* Status Toggle */}
+                    <div>
-                    <div style={{ marginBottom: 12 }}>
                         <div>
                             <Text strong>Status</Text>
                         </div>
-                        <div
+                        <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginTop: '8px',
-                            }}
-                        >
                             <div style={{ marginRight: '8px' }}>
                                 <Switch
                                     disabled={props.readOnly}
                                     style={{
-                                        backgroundColor:
+                                        backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
-                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
                                     }}
-                                    checked={FormData.is_active === true}
+                                    checked={formData.is_active}
                                     onChange={handleStatusToggle}
                                 />
                             </div>
                             <div>
-                                <Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
+                                <Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
                             </div>
                         </div>
                     </div>
+                    <Divider style={{ margin: '12px 0' }} />
+
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Nama Shift</Text>
+                        <Text strong>Shift Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
                             name="shift_name"
-                            value={FormData.shift_name}
+                            value={formData.shift_name}
                             onChange={handleInputChange}
-                            placeholder="Masukkan Nama Shift"
+                            placeholder="Contoh: Pagi, Sore, Malam"
                             readOnly={props.readOnly}
                         />
                     </div>
+
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Jam Mulai</Text>
+                        <Text strong>Shift Time</Text>
                         <Text style={{ color: 'red' }}> *</Text>
-                        <Input
+                        <Space.Compact block style={{ marginTop: '4px' }}>
-                            name="start_time"
+                            <TimePicker
-                            value={FormData.start_time}
+                                format={timeFormat}
-                            onChange={handleInputChange}
+                                onChange={(time, timeString) =>
-                            placeholder="Masukkan Jam Mulai"
+                                    handleTimeChange(time, timeString, 'start_time')
-                            readOnly={props.readOnly}
+                                }
-                            maxLength={8}
+                                style={{ width: '50%' }}
-                        />
+                                placeholder="Start Time "
-                        <Text
+                                disabled={props.readOnly}
-                            type="secondary"
+                            />
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
+                            <TimePicker
-                        >
+                                value={
-                            Contoh: 08:00 atau 08:00:00
+                                    formData.end_time ? dayjs(formData.end_time, timeFormat) : null
-                        </Text>
+                                }
-                    </div>
+                                format={timeFormat}
-                    <div style={{ marginBottom: 12 }}>
+                                onChange={(time, timeString) =>
-                        <Text strong>Jam Selesai</Text>
+                                    handleTimeChange(time, timeString, 'end_time')
-                        <Text style={{ color: 'red' }}> *</Text>
+                                }
-                        <Input
+                                style={{ width: '50%' }}
-                            name="end_time"
+                                placeholder="End Time "
-                            value={FormData.end_time}
+                                disabled={props.readOnly}
-                            onChange={handleInputChange}
+                            />
-                            placeholder="Masukkan Jam Selesai"
+                        </Space.Compact>
-                            readOnly={props.readOnly}
-                            maxLength={8}
-                        />
-                        <Text
-                            type="secondary"
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
-                        >
-                            Contoh: 17:00 atau 17:00:00
-                        </Text>
                     </div>
                 </div>
             )}