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

Reviewed-on: #2

.env.example

@@ -0,0 +1,5 @@
+VITE_API_SERVER=http://36.66.16.49:9528/api
+VITE_MQTT_SERVER=ws://localhost:1884
+VITE_MQTT_USERNAME=
+VITE_MQTT_PASSWORD=
+VITE_KEY_SESSION=PetekRombonganPetekMorekMorakMarek

package.json

@@ -29,6 +29,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.22.3",
+    "react-svg": "^16.3.0",
     "sweetalert2": "^11.17.2"
   },
   "devDependencies": {

src/App.css

@@ -0,0 +1,6 @@
+/* Global Card Styling */
+.ant-card {
+    border-radius: 12px !important;
+    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.07) !important;
+    margin-bottom: 24px !important;
+}

src/App.jsx

@@ -1,44 +1,52 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import SignIn from './pages/auth/SignIn';
+import SignUp from './pages/auth/Signup';
 import { ProtectedRoute } from './ProtectedRoute';
 import NotFound from './pages/blank/NotFound';
-import { getSessionData } from './components/Global/Formatter';
 
-// dashboard
+// Dashboard
 import Home from './pages/home/Home';
 import Blank from './pages/blank/Blank';
 
-// master
+// Master
 import IndexDevice from './pages/master/device/IndexDevice';
+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 IndexStatus from './pages/master/status/IndexStatus';
+import IndexShift from './pages/master/shift/IndexShift';
 
-// Setting
+// Jadwal Shift
+import IndexJadwalShift from './pages/jadwalShift/IndexJadwalShift';
+
+// History
+import IndexTrending from './pages/history/trending/IndexTrending';
+import IndexReport from './pages/history/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';
+
+// Shift Management
+import IndexMember from './pages/shiftManagement/member/IndexMember';
+
+import SvgTest from './pages/home/SvgTest';
 
 const App = () => {
-    const session = getSessionData();
-    // console.log(session);
-
-    const isAdmin =
-        session?.user?.role_id != `${import.meta.env.VITE_ROLE_VENDOR}` &&
-        session?.user?.role_id &&
-        session?.user?.role_id != null &&
-        session?.user?.role_id != 0;
-
     return (
-        <BrowserRouter
-            future={{
-                v7_startTransition: true,
-                v7_relativeSplatPath: true,
-            }}
-        >
+        <BrowserRouter>
             <Routes>
-                {isAdmin ? (
-                    <Route path="/" element={<Navigate to="/dashboard/home" />} />
-                ) : (
-                    <Route path="/" element={<Navigate to="/dashboard/home-vendor" />} />
-                )}
-
+                {/* Public Routes */}
+                <Route path="/" element={<Navigate to="/signin" replace />} />
                 <Route path="/signin" element={<SignIn />} />
+                <Route path="/signup" element={<SignUp />} />
+                <Route path="/svg" element={<SvgTest />} />
+
+                {/* Protected Routes */}
                 <Route path="/dashboard" element={<ProtectedRoute />}>
                     <Route path="home" element={<Home />} />
                     <Route path="blank" element={<Blank />} />
@@ -46,8 +54,44 @@ const App = () => {
 
                 <Route path="/master" element={<ProtectedRoute />}>
                     <Route path="device" element={<IndexDevice />} />
+                    <Route path="tag" element={<IndexTag />} />
+                    <Route path="unit" element={<IndexUnit />} />
+                    <Route path="brand-device" element={<IndexBrandDevice />} />
+                    <Route path="plant-section" element={<IndexPlantSection />} />
+                    <Route path="shift" element={<IndexShift />} />
+                    <Route path="status" element={<IndexStatus />} />
                 </Route>
 
+                <Route path="/jadwal-shift" 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 index element={<IndexNotification />} />
+                </Route>
+
+                <Route path="/event-alarm" element={<ProtectedRoute />}>
+                    <Route index element={<IndexEventAlarm />} />
+                </Route>
+
+                <Route path="/role" element={<ProtectedRoute />}>
+                    <Route index element={<IndexRole />} />
+                </Route>
+
+                <Route path="/user" element={<ProtectedRoute />}>
+                    <Route index element={<IndexUser />} />
+                </Route>
+
+                <Route path="/shift-management" element={<ProtectedRoute />}>
+                    <Route path="member" element={<IndexMember />} />
+                </Route>
+
+                {/* Catch-all */}
                 <Route path="*" element={<NotFound />} />
             </Routes>
         </BrowserRouter>

src/ProtectedRoute.jsx

@@ -1,20 +1,25 @@
 import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import MainLayout from './layout/MainLayout';
-
-import { getSessionData } from './components/Global/Formatter';
+import { NotifAlert } from './components/Global/ToastNotif';
 
 export const ProtectedRoute = () => {
-    const session = getSessionData();
-    // console.log(session);
+  // cek token di localStorage
+  const token = localStorage.getItem('token');
+  const isAuthenticated = !!token;
 
-    const isAuthenticated = session?.auth ?? false;
-    if (!isAuthenticated) {
-        return <Navigate to="/signin" replace />;
-    }
-    return (
-        <MainLayout>
-            <Outlet />
-        </MainLayout>
-    );
+  if (!isAuthenticated) {
+    NotifAlert({
+      icon: 'warning',
+      title: 'Session Habis',
+      message: 'Silahkan login terlebih dahulu',
+    });
+    return <Navigate to="/signin" replace />;
+  }
+
+  return (
+    <MainLayout>
+      <Outlet />
+    </MainLayout>
+  );
 };

src/Utils/Auth/Logout.jsx

@@ -1,7 +1,13 @@
-const handleLogOut = () => {
-    localStorage.removeItem('Auth');
-    localStorage.removeItem('session');
-    window.location.replace('/signin');
-}
+const handleLogOut = (navigate) => {
+    // Hapus semua data localStorage
+    localStorage.clear();
 
-export default handleLogOut;
+    // Redirect ke halaman signin
+    if (navigate) {
+        navigate('/signin', { replace: true });
+    } else {
+        window.location.replace('/signin');
+    }
+};
+
+export default handleLogOut;

src/Utils/Auth/SignIn.jsx

@@ -8,18 +8,14 @@ const handleSignIn = async (values) => {
 
     // return false
     if (response?.status == 200) {
-        /* you can change this according to your authentication protocol */
         let token = JSON.stringify(response.data?.token);
-        let role = JSON.stringify(response.data?.user?.role_id);
 
         localStorage.setItem('token', token);
         response.data.auth = true;
         localStorage.setItem('session', encryptData(response?.data));
-        if (role === `${import.meta.env.VITE_ROLE_VENDOR}`) {
-            window.location.replace('/dashboard/home-vendor');
-        } else {
-            window.location.replace('/dashboard/home');
-        }
+
+        // langsung redirect ke dashboard utama
+        window.location.replace('/dashboard/home');
     } else {
         NotifAlert({
             icon: 'error',

src/api/auth.jsx

@@ -10,20 +10,10 @@ const login = async (params) => {
     return response || [];
 };
 
-const uploadFile = async (formData) => {
-    const response = await RegistrationRequest({
-        method: 'post',
-        prefix: 'file-upload',
-        params: formData,
-        headers: { 'Content-Type': 'multipart/form-data' },
-    });
-    return response || {};
-};
-
 const register = async (params) => {
     const response = await RegistrationRequest({
         method: 'post',
-        prefix: 'register',
+        prefix: 'auth/register',
         params: params,
         headers: { 'Content-Type': 'application/json' },
     });
@@ -49,4 +39,4 @@ const checkUsername = async (queryParams) => {
 };
 
 
-export { login, uploadFile, register, verifyRedirect, checkUsername };
+export { login, register, verifyRedirect, checkUsername };

src/api/jadwal-shift.jsx

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

src/api/master-device.jsx

@@ -0,0 +1,169 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllDevice = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `device?${queryParams.toString()}`,
+        });
+        console.log('getAllDevice response:', response);
+        console.log('Query params:', queryParams.toString());
+
+        // Backend response structure:
+        // {
+        //   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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `device/${id}`,
+    });
+    return response.data;
+};
+
+const createDevice = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `device`,
+        params: queryParams,
+    });
+    console.log('createDevice full response:', response);
+    console.log('createDevice payload sent:', queryParams);
+
+    // Backend returns: { statusCode, message, rows, data: [device_object] }
+    // 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 response = await SendRequest({
+        method: 'put',
+        prefix: `device/${device_id}`,
+        params: queryParams,
+    });
+    console.log('updateDevice full response:', response);
+    console.log('updateDevice payload sent:', queryParams);
+
+    // Backend returns: { statusCode, message, rows, data: [device_object] }
+    // 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 response = await SendRequest({
+        method: 'delete',
+        prefix: `device/${queryParams}`,
+    });
+    console.log('deleteDevice full response:', response);
+    // Backend returns: { statusCode, message, rows: null, data: true }
+    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

@@ -0,0 +1,187 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllPlantSection = async (queryParams) => {
+    try {
+        // Ensure queryParams is URLSearchParams object
+        const params = queryParams instanceof URLSearchParams ? queryParams : new URLSearchParams(queryParams);
+
+        const response = await SendRequest({
+            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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `plant-sub-section/${id}`,
+    });
+    return response.data;
+};
+
+const createPlantSection = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `plant-sub-section`,
+        params: queryParams,
+    });
+    console.log('createPlantSection full response:', response);
+    console.log('createPlantSection payload sent:', queryParams);
+
+    // Check if response has error flag
+    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 response = await SendRequest({
+        method: 'put',
+        prefix: `plant-sub-section/${plant_section_id}`,
+        params: queryParams,
+    });
+    console.log('updatePlantSection full response:', response);
+    console.log('updatePlantSection payload sent:', queryParams);
+
+    // Check if response has error flag
+    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 response = await SendRequest({
+        method: 'delete',
+        prefix: `plant-sub-section/${queryParams}`,
+    });
+    console.log('deletePlantSection full response:', response);
+
+    // Check if response has error flag
+    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 };

src/api/master-shift.jsx

@@ -0,0 +1,75 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllShift = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `shift?${queryParams.toString()}`,
+        });
+        return response;
+    } catch (error) {
+        console.error('getAllShift 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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `shift/${id}`,
+    });
+    return response.data;
+};
+
+const createShift = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `shift`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const updateShift = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `shift/${id}`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const deleteShift = async (id) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `shift/${id}`,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+export { getAllShift, getShiftById, createShift, updateShift, deleteShift };

src/api/master-tag.jsx

@@ -0,0 +1,178 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllTag = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `tags?${queryParams.toString()}`,
+        });
+
+        // Check if response has error
+        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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `tags/${id}`,
+    });
+    return response.data;
+};
+
+const createTag = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `tags`,
+        params: queryParams,
+    });
+
+    // Check if response has error flag
+    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 response = await SendRequest({
+        method: 'put',
+        prefix: `tags/${tag_id}`,
+        params: queryParams,
+    });
+
+    // Check if response has error flag
+    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 response = await SendRequest({
+        method: 'delete',
+        prefix: `tags/${queryParams}`,
+    });
+
+    // Check if response has error flag
+    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

@@ -0,0 +1,197 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllUnit = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `unit?${queryParams.toString()}`,
+        });
+        console.log('getAllUnit response:', response);
+        console.log('Query params:', queryParams.toString());
+
+        // Check if response has error
+        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) => {
+    const response = await SendRequest({
+        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,
+    });
+    console.log('createUnit full response:', response);
+    console.log('createUnit payload sent:', backendParams);
+
+    // Check if response has error flag
+    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) => {
+    // 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}`,
+        params: backendParams,
+    });
+    console.log('updateUnit full response:', response);
+    console.log('updateUnit payload sent:', backendParams);
+
+    // Check if response has error flag
+    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 response = await SendRequest({
+        method: 'delete',
+        prefix: `unit/${queryParams}`,
+    });
+    console.log('deleteUnit full response:', response);
+
+    // Check if response has error flag
+    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/role.jsx

@@ -0,0 +1,188 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllRole = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `roles?${queryParams.toString()}`,
+        });
+
+        console.log('Role API Response:', response);
+
+        // 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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `roles/${id}`,
+    });
+    return response.data;
+};
+
+const createRole = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `roles`,
+        params: queryParams,
+    });
+
+    console.log('Create Role API Response:', response);
+
+    // 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 response = await SendRequest({
+        method: 'put',
+        prefix: `roles/${role_id}`,
+        params: queryParams,
+    });
+
+    console.log('Update Role API Response:', response);
+
+    // 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 response = await SendRequest({
+        method: 'delete',
+        prefix: `roles/${queryParams}`,
+    });
+
+    console.log('Delete API Response:', response);
+
+    // 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/user.jsx

@@ -0,0 +1,207 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllUser = async (queryParams) => {
+    try {
+        console.log('getAllUser queryParams:', queryParams.toString());
+
+        const response = await SendRequest({
+            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) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `user/${id}`,
+    });
+    return response.data;
+};
+
+const createUser = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `user`,
+        params: queryParams,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const updateUser = async (user_id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}`,
+        params: queryParams,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const deleteUser = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `user/${queryParams}`,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const approveUser = async (user_id) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}/approve`,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const rejectUser = async (user_id) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}/reject`,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const toggleActiveUser = async (user_id, is_active) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}`,
+        params: {
+            is_active: is_active
+        },
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const changePassword = async (user_id, new_password) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/change-password/${user_id}`,
+        params: {
+            new_password: new_password
+        },
+    });
+
+    console.log('Change Password Response:', response);
+
+    // 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 };

src/components/Global/ApiRequest.jsx

@@ -1,127 +1,170 @@
-import axios from 'axios';
-import Swal from 'sweetalert2';
+import axios from "axios";
+import Swal from "sweetalert2";
 
-async function ApiRequest(
-    urlParams = { method: 'GET', params: {}, url: '', prefix: '/', token: true }
-) {
-    const baseURLDef = `${import.meta.env.VITE_API_SERVER}`;
-    const instance = axios.create({
-        baseURL: urlParams.url ?? baseURLDef,
+const baseURL = import.meta.env.VITE_API_SERVER;
+
+const instance = axios.create({
+  baseURL,
+  withCredentials: true,
+});
+
+// axios khusus refresh
+const refreshApi = axios.create({
+  baseURL,
+  withCredentials: true,
+});
+
+
+instance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    console.error("🚨 Response Error Interceptor:", {
+      status: error.response?.status,
+      url: originalRequest.url,
+      message: error.response?.data?.message,
+      hasRetried: originalRequest._retry
     });
 
-    const isFormData = urlParams.params instanceof FormData;
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
 
-    const request = {
-        method: urlParams.method,
-        url: urlParams.prefix ?? '/',
-        data: urlParams.params,
-        // yang lama
-        // headers: {
-        //     'Content-Type': 'application/json',
-        //     'Accept-Language': 'en_US',
-        // },
+      try {
+        console.log("🔄 Refresh token dipanggil...");
+        const refreshRes = await refreshApi.post("/auth/refresh-token");
 
-        // yang baru
-        headers: {
-            'Accept-Language': 'en_US',
-            ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
-        },
-    };
+        const newAccessToken = refreshRes.data.data.accessToken;
+        localStorage.setItem("token", newAccessToken);
+        console.log("✅ Token refreshed successfully");
 
-    if (urlParams.params === 'doc') {
-        request.responseType = 'arraybuffer';
-        request.headers['Content-Type'] = 'blob';
+        // update token di header
+        instance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
+        originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
+
+        console.log("🔁 Retrying original request...");
+        return instance(originalRequest);
+      } catch (refreshError) {
+        console.error("❌ Refresh token gagal:", refreshError.response?.data || refreshError.message);
+        localStorage.clear();
+        window.location.href = "/signin";
+      }
     }
 
-    // console.log(request);
+    return Promise.reject(error);
+  }
+);
 
-    // console.log('prefix', urlParams.prefix);
+async function ApiRequest({
+  method = "GET",
+  params = {},
+  prefix = "/",
+  token = true,
+} = {}) {
+  const isFormData = params instanceof FormData;
 
-    const tokenRedirect = sessionStorage.getItem('token_redirect');
+  const request = {
+    method,
+    url: prefix,
+    data: params,
+    headers: {
+      "Accept-Language": "en_US",
+      ...(isFormData ? {} : { "Content-Type": "application/json" }),
+    },
+  };
 
-    let stringToken = '';
+  const rawToken = localStorage.getItem("token");
+  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");
+  }
 
-    if (tokenRedirect !== null) {
-        stringToken = tokenRedirect;
-        // console.log(`sessionStorage: ${tokenRedirect}`);
-    } else {
-        stringToken = localStorage.getItem('token');
-        // console.log(`localStorage: ${stringToken}`);
+  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);
     }
 
-    if (urlParams.prefix !== 'auth/login') {
-        const tokenWithQuotes = stringToken;
-        const token = tokenWithQuotes.replace(/"/g, '');
-        const AUTH_TOKEN = `Bearer ${token}`;
-        instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-    } else if (urlParams.token == true) {
-        const tokenWithQuotes = stringToken;
-        const token = tokenWithQuotes.replace(/"/g, '');
-        const AUTH_TOKEN = `Bearer ${token}`;
-        instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-    }
-
-    return await instance(request)
-        .then(function (response) {
-            const responseCustom = response;
-            responseCustom.error = false;
-            return responseCustom;
-        })
-        .catch(function (error) {
-            console.log('error', error.toJSON());
-
-            const errorData = error.toJSON();
-
-            const respError = error.response ?? {};
-            cekError(
-                errorData.status,
-                error?.response?.data?.message ?? errorData?.message ?? 'Something Wrong'
-            );
-            respError.error = true;
-            return respError;
-        });
+    return { ...error.response, error: true };
+  }
 }
 
-async function cekError(props, message = '') {
-    console.log('status code', props);
-    if (props === 401) {
-        Swal.fire({
-            icon: 'warning',
-            title: 'Peringatan',
-            text: `${message}, Silahkan login`,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                localStorage.clear();
-                location.replace('/signin');
-            } else if (result.isDenied) {
-                Swal.fire('Changes are not saved', '', 'info');
-            }
-        });
-    } else {
-        Swal.fire({
-            icon: 'warning',
-            title: 'Peringatan',
-            text: message,
-        }).then((result) => {});
-    }
+async function cekError(status, message = "") {
+  if (status === 403) {
+    await Swal.fire({
+      icon: "warning",
+      title: "Forbidden",
+      text: message,
+    });
+  } else if (status >= 500) {
+    await Swal.fire({
+      icon: "error",
+      title: "Server Error",
+      text: message,
+    });
+  } else {
+    await Swal.fire({
+      icon: "warning",
+      title: "Peringatan",
+      text: message,
+    });
+  }
 }
 
 const SendRequest = async (queryParams) => {
-    try {
-        const response = await ApiRequest(queryParams);
-        return response || [];
-    } catch (error) {
-        console.log('error', error);
-        if (error.response) {
-            console.error('Error Status:', error.response.status); // Status error, misal: 401
-            console.error('Error Data:', error.response.data); // Detail pesan error
-            console.error('Error Pesan:', error.response.data.message); //Pesan error
-        } else {
-            console.error('Error:', error.message);
-        }
-        Swal.fire({ icon: 'error', text: error });
-        // return error;
+  try {
+    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 (response.error) {
+      const errorMsg = response.data?.message || response.statusText || "Request failed";
+      console.error("❌ SendRequest error response:", errorMsg);
+
+      // Return consistent error structure instead of empty array
+      return {
+        statusCode: response.status || 500,
+        message: errorMsg,
+        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

@@ -0,0 +1,102 @@
+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 CardList = ({
+    data,
+    column,
+    header,
+    showPreviewModal,
+    showEditModal,
+    showDeleteDialog,
+    cardColor,
+}) => {
+    const getCardStyle = () => {
+        const color = cardColor ?? '#F3EDEA'; // Orange color
+        return {
+            border: `2px solid ${color}`,
+            borderRadius: '8px',
+            textAlign: 'center', // Center text
+        };
+    };
+
+    const getTitleStyle = (color) => {
+        const backgroundColor = color ?? '#FCF2ED';
+        return {
+            backgroundColor,
+            color: '#fff',
+            padding: '2px 8px',
+            borderRadius: '4px',
+            display: 'inline-block', // ganti inline-block → block
+            width: 'fit-content', // biar lebarnya tetap menyesuaikan teks
+        };
+    };
+
+    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}>
+                    <Card
+                        title={
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between', // kiri & kanan
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <span style={getTitleStyle(item.color ?? cardColor)}>
+                                    {item[header]}
+                                </span>
+                            </div>
+                        }
+                        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>,
+                        ]}
+                    >
+                        <div style={{ textAlign: 'left' }}>
+                            {column.map((itemCard) => (
+                                <>
+                                    {!itemCard.hidden && !itemCard.render && (
+                                        <p>
+                                            <Text strong>{itemCard.title}:</Text>{' '}
+                                            {item[itemCard.key]}
+                                        </p>
+                                    )}
+                                    {itemCard.render && itemCard.render}
+                                </>
+                            ))}
+                        </div>
+                    </Card>
+                </Col>
+            ))}
+        </Row>
+    );
+};
+
+export default CardList;

src/components/Global/MqttConnection.jsx

@@ -1,19 +1,18 @@
 // mqttService.js
 import mqtt from 'mqtt';
 
-const mqttUrl = 'ws://36.66.16.49:9001';
-const topics = ['SYPIU_GGCP', 'SYPIU_GGCP/list-permit/changed','SYPIU_GGCP/list-user/changed'];
-
+const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
+const topics = ['PIU_GGCP/Devices/PB'];
 const options = {
-  keepalive: 30,
-  clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
-  protocolId: 'MQTT',
-  protocolVersion: 4,
-  clean: true,
-  reconnectPeriod: 1000,
-  connectTimeout: 30 * 1000,
-  username: 'ide', // jika ada
-  password: 'aremania', // jika ada
+    keepalive: 30,
+    clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
+    protocolId: 'MQTT',
+    protocolVersion: 4,
+    clean: true,
+    reconnectPeriod: 1000,
+    connectTimeout: 30 * 1000,
+    username: `${import.meta.env.VITE_MQTT_USERNAME ?? ''}`, // jika ada
+    password: `${import.meta.env.VITE_MQTT_PASSWORD ?? ''}`, // jika ada
 };
 
 const client = mqtt.connect(mqttUrl, options);
@@ -22,37 +21,37 @@ const client = mqtt.connect(mqttUrl, options);
 let isConnected = false;
 
 client.on('connect', () => {
-  console.log('MQTT Connected');
-  isConnected = true;
+    console.log('MQTT Connected');
+    isConnected = true;
 
-  // Subscribe default topic
-  client.subscribe(topics, (err) => {
-    if (err) console.error('Subscribe error:', err);
-    else console.log(`Subscribed to topics: ${topics.join(', ')}`);
-  });
+    // Subscribe default topic
+    client.subscribe(topics, (err) => {
+        if (err) console.error('Subscribe error:', err);
+        else console.log(`Subscribed to topics: ${topics.join(', ')}`);
+    });
 });
 
 client.on('error', (err) => {
-  console.error('Connection error: ', err);
-  client.end();
+    console.error('Connection error: ', err);
+    client.end();
 });
 
 client.on('close', () => {
-  console.log('MQTT Disconnected');
-  isConnected = false;
+    console.log('MQTT Disconnected');
+    isConnected = false;
 });
 
 /**
  * Publish message to MQTT
- * @param {string} topic 
- * @param {string} message 
+ * @param {string} topic
+ * @param {string} message
  */
 const publishMessage = (topic, message) => {
-  if (client && isConnected && message.trim() !== '') {
-    client.publish(topic, message);
-  } else {
-    console.warn('MQTT not connected or message empty');
-  }
+    if (client && isConnected && message.trim() !== '') {
+        client.publish(topic, message);
+    } else {
+        console.warn('MQTT not connected or message empty');
+    }
 };
 
 /**
@@ -60,13 +59,33 @@ const publishMessage = (topic, message) => {
  * @param {function} callback - Function(topic, message)
  */
 const listenMessage = (callback) => {
-  client.on('message', (topic, message) => {
-    callback(topic, message.toString());
-  });
+    client.on('message', (topic, message) => {
+        callback(topic, message.toString());
+    });
 };
 
-export {
-  publishMessage,
-  listenMessage,
-  client,
+const setValSvg = (listenTopic, svg) => {
+    client.on('message', (topic, message) => {
+        if (topic == listenTopic) {
+            const objChanel = JSON.parse(message);
+
+            Object.entries(objChanel).forEach(([key, value]) => {
+                // console.log(key, value);
+                const el = svg.getElementById(key);
+                if (el) {
+                    if (value === true) {
+                        el.style.display = ''; // sembunyikan
+                    } else if (value === false) {
+                        el.style.display = 'none';
+                    } else if (!isNaN(value)) {
+                        el.textContent = Number(value ?? 0.0);
+                    } else {
+                        el.textContent = value;
+                    }
+                }
+            });
+        }
+    });
 };
+
+export { publishMessage, listenMessage, setValSvg };

src/components/Global/RegisterRequest.jsx

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const RegistrationRequest = async ({ method, prefix, params, headers = {} }) => {
     const baseURL = `${import.meta.env.VITE_API_SERVER}`;
-    
+
     try {
         const response = await axios({
             method: method,
@@ -22,4 +22,4 @@ const RegistrationRequest = async ({ method, prefix, params, headers = {} }) =>
     }
 };
 
-export default RegistrationRequest;
+export default RegistrationRequest;

src/components/Global/TableList.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect, useRef } from 'react';
-import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag } from 'antd';
+import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
 import {
     PlusOutlined,
     FilterOutlined,
@@ -8,57 +8,15 @@ import {
     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;
 
-const defCard = {
-    r1: {
-        style: { fontWeight: 'bold', fontSize: 13 },
-        type: 'primary',
-        color: '',
-        text: 'Cold Work Permit',
-        name: '',
-    },
-    r2: {
-        style: { marginLeft: 8, fontSize: 13 },
-        type: 'primary',
-        color: 'success',
-        text: 'Pengajuan',
-        name: '',
-    },
-    r3: {
-        style: { fontSize: 12 },
-        type: 'secondary',
-        color: '',
-        text: 'No. IVR/20250203/XXV/III',
-        name: '',
-    },
-    r4: {
-        style: { fontSize: 12 },
-        type: 'primary',
-        color: '',
-        text: '3 Feb 2025',
-        name: '',
-    },
-    r5: {
-        style: { fontSize: 12 },
-        type: 'primary',
-        color: '',
-        text: 'Lokasi Gudang Robang',
-        name: '',
-    },
-    r6: {
-        style: { fontSize: 12 },
-        type: 'primary',
-        color: '',
-        text: 'maka tambahkan user tersebut dalam user_partner dengan partner baru yang ditambahkan diatas',
-        name: '',
-    },
-    action: (e) => {},
-};
-
 const TableList = memo(function TableList({
     getData,
     queryParams,
@@ -66,6 +24,11 @@ const TableList = memo(function TableList({
     triger,
     mobile,
     rowSelection = null,
+    header = 'name',
+    showPreviewModal,
+    showEditModal,
+    showDeleteDialog,
+    cardColor,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -82,6 +45,8 @@ const TableList = memo(function TableList({
         total: 0,
     });
 
+    const [viewMode, setViewMode] = useState('card');
+
     const { useBreakpoint } = Grid;
 
     useEffect(() => {
@@ -110,16 +75,16 @@ const TableList = memo(function TableList({
 
         if (resData.status == 200) {
             setPagingResponse({
-                totalData: resData.data.total,
-                perPage: resData.data.paging.page_total,
-                totalPage: resData.data.paging.limit,
+                totalData: resData.paging.total_limit,
+                perPage: resData.paging.page_total,
+                totalPage: resData.paging.total_page,
             });
 
             setPagination((prev) => ({
                 ...prev,
-                current: resData.data.paging.page,
-                limit: resData.data.paging.limit,
-                total: resData.data.paging.total,
+                current: resData.paging.current_page,
+                limit: resData.paging.current_limit,
+                total: resData.paging.total_limit,
             }));
         }
     };
@@ -139,141 +104,55 @@ const TableList = memo(function TableList({
 
     return (
         <div>
-            {isMobile && mobile ? (
-                <Row gutter={24}>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-                        {data.map((item) => (
-                            <Card
-                                key={item.id}
-                                title={
-                                    (mobile.r1 || mobile.r2) && (
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                            }}
-                                        >
-                                            {mobile.r1 && (
-                                                <span style={mobile.r1.style ?? {}}>
-                                                    {item[mobile.r1.name] ?? mobile.r1.text ?? ''}
-                                                </span>
-                                            )}
-                                            {mobile.r2 && (
-                                                <Tag
-                                                    color={mobile.r2.color ?? ''}
-                                                    style={mobile.r2.style ?? {}}
-                                                >
-                                                    {item[mobile.r2.name] ?? mobile.r2.text ?? ''}
-                                                </Tag>
-                                            )}
-                                        </div>
-                                    )
-                                }
-                                style={{ width: '100%' }}
-                            >
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                                    {mobile.r3 && mobile.r4 && (
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: 8,
-                                                justifyContent: 'space-between',
-                                            }}
-                                        >
-                                            <Text
-                                                type={mobile.r3 ? mobile.r3.type ?? 'primary' : ''}
-                                                style={mobile.r3 ? mobile.r3.style ?? {} : {}}
-                                            >
-                                                {item[mobile.r3 ? mobile.r3.name : ''] ?? ''}
-                                            </Text>
-                                            <Text style={mobile.r4 ? mobile.r4.style ?? {} : {}}>
-                                                {item[mobile.r4 ? mobile.r4.name : ''] ?? ''}
-                                            </Text>
-                                        </div>
-                                    )}
-                                    {mobile.r5 && (
-                                        <Text
-                                            type={mobile.r5 ? mobile.r5.type ?? 'secondary' : ''}
-                                            style={mobile.r5 ? mobile.r5.style ?? {} : {}}
-                                        >
-                                            {item[mobile.r5 ? mobile.r5.name : ''] ?? ''}
-                                        </Text>
-                                    )}
-                                </div>
-                                {mobile.r6 && (
-                                    <div>
-                                        <Text
-                                            type={mobile.r6 ? mobile.r6.type ?? 'primary' : ''}
-                                            style={mobile.r6 ? mobile.r6.style ?? {} : {}}
-                                        >
-                                            {item[mobile.r6 ? mobile.r6.name : ''] ?? ''}
-                                        </Text>
-                                    </div>
-                                )}
-                                <div
-                                    style={{
-                                        marginTop: 16,
-                                        borderTop: '1px solid #f0f0f0',
-                                        paddingTop: 8,
-                                        textAlign: 'right',
-                                    }}
-                                >
-                                    <Button
-                                        type="primary"
-                                        size="small"
-                                        shape="round"
-                                        icon={<EyeOutlined />}
-                                        onClick={(e) => {
-                                            mobile.action(item);
-                                        }}
-                                    >
-                                        Detail
-                                    </Button>
-                                </div>
-                            </Card>
-                        ))}
-                    </div>
-                </Row>
+            <Segmented
+                options={[
+                    { value: 'card', icon: <AppstoreOutlined /> },
+                    { value: 'table', icon: <TableOutlined /> },
+                ]}
+                value={viewMode}
+                onChange={setViewMode}
+            />
+            {(isMobile && mobile) || viewMode === 'card' ? (
+                <CardList
+                    cardColor={cardColor}
+                    data={data}
+                    column={columns}
+                    header={header}
+                    showPreviewModal={showPreviewModal}
+                    showEditModal={showEditModal}
+                    showDeleteDialog={showDeleteDialog}
+                />
             ) : (
                 <Row gutter={24}>
-                    {/* TABLE */}
                     <Table
                         rowSelection={rowSelection || null}
                         columns={columns}
                         dataSource={data.map((item, index) => ({ ...item, key: index }))}
                         pagination={false}
                         loading={gridLoading}
-                        scroll={{
-                            y: 520,
-                            x: 1300,
-                        }}
+                        scroll={{ y: 520 }}
                     />
-
-                    {/* PAGINATION */}
-                    <Col xs={24} style={{ marginTop: '16px' }}>
-                        <Row justify="space-between" align="middle">
-                            <Col>
-                                <div>
-                                    Menampilkan {pagingResponse.totalData} Data dari{' '}
-                                    {pagingResponse.perPage} Halaman
-                                </div>
-                            </Col>
-                            <Col>
-                                <Pagination
-                                    showSizeChanger
-                                    onChange={handlePaginationChange}
-                                    onShowSizeChange={handlePaginationChange}
-                                    current={pagination.current}
-                                    pageSize={pagination.pageSize}
-                                    total={pagination.total}
-                                />
-                            </Col>
-                        </Row>
-                    </Col>
                 </Row>
             )}
+            {/* PAGINATION */}
+            <Row justify="space-between" align="middle">
+                <Col>
+                    <div>
+                        Menampilkan {pagingResponse.totalPage} Data dari {pagingResponse.perPage}{' '}
+                        Halaman
+                    </div>
+                </Col>
+                <Col>
+                    <Pagination
+                        showSizeChanger
+                        onChange={handlePaginationChange}
+                        onShowSizeChange={handlePaginationChange}
+                        current={pagination.current}
+                        pageSize={pagination.pageSize}
+                        total={pagination.total}
+                    />
+                </Col>
+            </Row>
         </div>
     );
 });

src/context/AuthContext.jsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, useEffect } from "react";
+import { SendRequest } from "../utils/api";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // fetch user info saat mount
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const res = await SendRequest({ prefix: "/auth/me", method: "GET" });
+        setUser(res);
+      } catch (err) {
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
+
+  const login = (accessToken) => {
+    localStorage.setItem("token", accessToken);
+  };
+
+  const logout = () => {
+    localStorage.clear();
+    setUser(null);
+    window.location.href = "/signin";
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, login, logout, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

src/index.css

@@ -18,4 +18,38 @@
 html body {
   margin: 0;
   height: 100vh;
+}
+
+/* Custom Orange Sidebar Menu Styles */
+.custom-orange-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 {
+  border-right-color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-orange-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 {
+  color: white !important;
+}
+
+.custom-orange-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-orange-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-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+  color: white !important;
 }

src/layout/LayoutHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Layout, theme, Space, Typography, Breadcrumb, Button } from 'antd';
+import { Layout, Typography, Breadcrumb, Button, theme } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 import handleLogOut from '../Utils/Auth/Logout';
 import { useBreadcrumb } from './LayoutBreadcrumb';
@@ -12,18 +12,52 @@ const { Header } = Layout;
 const LayoutHeader = () => {
     const { breadcrumbItems } = useBreadcrumb();
     const navigate = useNavigate();
-    const {
-        token: { colorBgContainer, colorBorder, colorText },
-    } = theme.useToken();
 
-    // Ambil data user dari localStorage dan dekripsi
+    // Ambil token warna dari theme Ant Design
+    const { token } = theme.useToken() || {};
+    const colorBgContainer = token?.colorBgContainer || '#fff';
+    const colorBorder = token?.colorBorder || '#d9d9d9';
+    const colorText = token?.colorText || '#000';
+
+    // Ambil data user dari localStorage
+    let userData = null;
+
     const sessionData = localStorage.getItem('session');
-    const userData = sessionData ? decryptData(sessionData) : null;
-    // console.log(userData);
+    if (sessionData) {
+        userData = decryptData(sessionData);
+    } else {
+        const userRaw = localStorage.getItem('user');
+        if (userRaw) {
+            try {
+                // bungkus biar konsisten { user: {...} }
+                userData = { user: JSON.parse(userRaw) };
+            } catch (e) {
+                console.error('Gagal parse user dari localStorage:', e);
+            }
+        }
+    }
 
-    const roleName = userData?.user?.approval || userData?.user?.partner_name || 'Guest';
+    // console.log('User data di header:', userData?.user);
 
-    const userName = userData?.user?.name || userData?.user?.username || 'User';
+    // Role handling
+    const roleNameDefault =
+        userData?.user?.approval ||
+        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 (
+        userData?.user?.is_sa === true ||
+        userData?.user?.is_sa === 'true' ||
+        userData?.user?.is_sa === 1
+    ) {
+        roleName = 'Super Admin';
+    }
 
     return (
         <>
@@ -35,11 +69,11 @@ const LayoutHeader = () => {
                     alignItems: 'center',
                     flexWrap: 'wrap',
                     rowGap: 10,
-                    paddingTop:15,
+                    paddingTop: 15,
                     paddingBottom: 20,
                     paddingLeft: 24,
                     paddingRight: 24,
-                    minHeight: 100, 
+                    minHeight: 100,
                     boxSizing: 'border-box',
                 }}
             >
@@ -88,8 +122,7 @@ const LayoutHeader = () => {
                     </Button>
                     <Link
                         onClick={() => {
-                            handleLogOut();
-                            navigate('/signin');
+                            handleLogOut(navigate);
                         }}
                         aria-label="Log out from the application"
                         style={{

src/layout/LayoutLogo.jsx

@@ -10,14 +10,14 @@ const LayoutLogo = () => {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                backgroundColor: '#001529',
                 padding: '1rem',
                 borderRadius: '1rem',
             }}
         >
             <div
                 style={{
-                    background: 'radial-gradient(circle at center, rgba(255,255,255,0.95), rgba(220,220,220,0.5))',
+                    background:
+                        'radial-gradient(circle at center, rgba(255,255,255,0.95), rgba(220,220,220,0.5))',
                     borderRadius: '50%',
                     width: 160,
                     height: 160,
@@ -26,7 +26,7 @@ const LayoutLogo = () => {
                     alignItems: 'center',
                     boxShadow: '0 6px 20px rgba(0, 0, 0, 0.2)',
                     position: 'relative',
-                    overflow: 'hidden'
+                    overflow: 'hidden',
                 }}
             >
                 {/* Ring sebelum logo utama */}
@@ -37,7 +37,7 @@ const LayoutLogo = () => {
                         width: 160,
                         height: 160,
                         position: 'absolute',
-                        zIndex: 1
+                        zIndex: 1,
                     }}
                 />
 
@@ -66,4 +66,4 @@ const LayoutLogo = () => {
     );
 };
 
-export default LayoutLogo;
+export default LayoutLogo;

src/layout/LayoutMenu.jsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { Menu, Typography, Image } from 'antd';
 import { getSessionData } from '../components/Global/Formatter';
-import { HomeOutlined,
+import {
+    HomeOutlined,
     DatabaseOutlined,
     SettingOutlined,
     UserOutlined,
@@ -12,7 +13,19 @@ import { HomeOutlined,
     HistoryOutlined,
     DollarOutlined,
     RollbackOutlined,
-    ProductOutlined
+    ProductOutlined,
+    TagOutlined,
+    AppstoreOutlined,
+    MobileOutlined,
+    WarningOutlined,
+    LineChartOutlined,
+    FileTextOutlined,
+    BellOutlined,
+    AlertOutlined,
+    SafetyOutlined,
+    TeamOutlined,
+    ClockCircleOutlined,
+    CalendarOutlined,
 } from '@ant-design/icons';
 
 const { Text } = Typography;
@@ -20,30 +33,185 @@ const { Text } = Typography;
 const allItems = [
     {
         key: 'home',
-        icon: <HomeOutlined style={{fontSize:'19px'}} />,
-        label: <Link to="/dashboard/home" className='fontMenus'>Home</Link>,
+        icon: <HomeOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/dashboard/home" className="fontMenus">
+                Home
+            </Link>
+        ),
     },
     {
         key: 'master',
-        icon: <DatabaseOutlined style={{fontSize:'19px'}} />,
+        icon: <DatabaseOutlined style={{ fontSize: '19px' }} />,
         label: 'Master',
         children: [
+            {
+                key: 'master-plant-section',
+                icon: <ProductOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/plant-section">Plant Section</Link>,
+            },
+            {
+                key: 'master-brand-device',
+                icon: <AntDesignOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/brand-device">Brand Device</Link>,
+            },
             {
                 key: 'master-device',
-                icon: <DatabaseOutlined style={{fontSize:'19px'}} />,
+                icon: <MobileOutlined style={{ fontSize: '19px' }} />,
                 label: <Link to="/master/device">Device</Link>,
             },
+            {
+                key: 'master-tag',
+                icon: <TagOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/tag">Tag</Link>,
+            },
+            {
+                key: 'master-unit',
+                icon: <AppstoreOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/unit">Unit</Link>,
+            },
+            {
+                key: 'master-status',
+                icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/status">Status</Link>,
+            },
+            {
+                key: 'master-shift',
+                icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/shift">Shift</Link>,
+            },
         ],
     },
+    {
+        key: 'history',
+        icon: <HistoryOutlined style={{ fontSize: '19px' }} />,
+        label: 'History',
+        children: [
+            {
+                key: 'history-trending',
+                icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/history/trending">Trending</Link>,
+            },
+            {
+                key: 'history-report',
+                icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/history/report">Report</Link>,
+            },
+        ],
+    },
+    {
+        key: 'notification',
+        icon: <BellOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/notification" className="fontMenus">
+                Notifikasi
+            </Link>
+        ),
+    },
+    {
+        key: 'event-alarm',
+        icon: <AlertOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/event-alarm" className="fontMenus">
+                Event Alarm
+            </Link>
+        ),
+    },
+    {
+        key: 'role',
+        icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/role" className="fontMenus">
+                Role
+            </Link>
+        ),
+    },
+    {
+        key: 'user',
+        icon: <UserOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/user" className="fontMenus">
+                User
+            </Link>
+        ),
+    },
+    {
+        key: 'jadwal-shift',
+        icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/jadwal-shift" className="fontMenus">
+                Jadwal Shift
+            </Link>
+        ),
+    },
 ];
 
 const LayoutMenu = () => {
+    const location = useLocation();
     const [stateOpenKeys, setStateOpenKeys] = useState(['home']);
+    const [selectedKeys, setSelectedKeys] = useState(['home']);
 
-    const getLevelKeys = items1 => {
+    // Function to get menu key from current path
+    const getMenuKeyFromPath = (pathname) => {
+        // Remove leading slash and split path
+        const pathParts = pathname.replace(/^\//, '').split('/');
+
+        // Handle different route patterns
+        if (pathname === '/dashboard/home') return 'home';
+        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';
+
+        // Handle master routes
+        if (pathname.startsWith('/master/')) {
+            const subPath = pathParts[1];
+            return `master-${subPath}`;
+        }
+
+        // Handle history routes
+        if (pathname.startsWith('/history/')) {
+            const subPath = pathParts[1];
+            return `history-${subPath}`;
+        }
+
+        // Handle shift management routes
+        if (pathname.startsWith('/shift-management/')) {
+            const subPath = pathParts[1];
+            return `shift-${subPath}`;
+        }
+
+        return 'home'; // default
+    };
+
+    // Function to get parent key from menu key
+    const getParentKey = (key) => {
+        if (key.startsWith('master-')) return 'master';
+        if (key.startsWith('history-')) return 'history';
+        if (key.startsWith('shift-')) return 'shift-management';
+        return null;
+    };
+
+    // Update selected and open keys when route changes
+    useEffect(() => {
+        const currentKey = getMenuKeyFromPath(location.pathname);
+        setSelectedKeys([currentKey]);
+
+        const parentKey = getParentKey(currentKey);
+
+        // If current menu has parent, open it. Otherwise, close all dropdowns
+        if (parentKey) {
+            setStateOpenKeys([parentKey]);
+        } else {
+            setStateOpenKeys([]);
+        }
+    }, [location.pathname]);
+
+    const getLevelKeys = (items1) => {
         const key = {};
         const func = (items2, level = 1) => {
-            items2.forEach(item => {
+            items2.forEach((item) => {
                 if (item.key) {
                     key[item.key] = level;
                 }
@@ -58,12 +226,16 @@ const LayoutMenu = () => {
 
     const levelKeys = getLevelKeys(allItems);
 
-    const onOpenChange = openKeys => {
-        const currentOpenKey = openKeys.find(key => stateOpenKeys.indexOf(key) === -1);
+    const onOpenChange = (openKeys) => {
+        const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
         if (currentOpenKey !== undefined) {
-            const repeatIndex = openKeys.filter(key => key !== currentOpenKey).findIndex(key => levelKeys[key] === levelKeys[currentOpenKey]);
+            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]),
+                openKeys
+                    .filter((_, index) => index !== repeatIndex)
+                    .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
             );
         } else {
             setStateOpenKeys(openKeys);
@@ -73,38 +245,46 @@ const LayoutMenu = () => {
     const session = getSessionData();
     const isAdmin = session?.user?.user_id;
 
-    const karyawan = ()=>{
-        return allItems.filter(
-            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'
-                    // )
+    const karyawan = () => {
+        return allItems
+            .filter(
+                (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;
-        });
+                return item;
+            });
     };
     const items = isAdmin === 1 ? allItems : karyawan();
 
     return (
         <Menu
-            theme="dark"
             mode="inline"
             items={items}
-            defaultSelectedKeys={['home']}
+            selectedKeys={selectedKeys}
             openKeys={stateOpenKeys}
             onOpenChange={onOpenChange}
+            style={{
+                background: 'transparent',
+                color: 'white',
+                border: 'none',
+            }}
+            theme="dark"
+            className="custom-orange-menu"
         />
     );
 };
-export default LayoutMenu;
+export default LayoutMenu;

src/layout/LayoutSidebar.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { Layout } from 'antd';
 import LayoutLogo from './LayoutLogo';
 import LayoutMenu from './LayoutMenu';
@@ -6,7 +6,8 @@ import LayoutMenu from './LayoutMenu';
 const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
-        <Sider width={300}
+        <Sider
+            width={300}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {
@@ -15,11 +16,20 @@ const LayoutSidebar = () => {
             onCollapse={(collapsed, type) => {
                 // console.log(collapsed, type);
             }}
+            style={{
+                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+                overflow: 'auto',
+                height: '100vh',
+                position: 'fixed',
+                left: 0,
+                top: 0,
+                bottom: 0,
+            }}
         >
             <LayoutLogo />
             <LayoutMenu />
         </Sider>
-    )
-}
+    );
+};
 
-export default LayoutSidebar
+export default LayoutSidebar;

src/layout/MainLayout.jsx

@@ -1,33 +1,38 @@
-import React from 'react';
-import { Layout, theme } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Layout, theme, Grid } from 'antd';
 import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
-
 const { Content } = Layout;
+const { useBreakpoint } = Grid;
 
 const MainLayout = ({ children }) => {
-  const {
-    token: { colorBgContainer, borderRadiusLG },
-  } = theme.useToken();
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
 
-  return (
-    <Layout style={{ height: '100vh' }}>
-      <LayoutSidebar />
-      <Layout
-      style={{
-        overflow: 'auto',
+    const screens = useBreakpoint();
+    const isDesktop = screens.lg;
 
-      }}>
-        <LayoutHeader />
-        <Content
-          style={{
-            margin: '24px 16px 0',
-            flex: '1 0 auto',
-          }}
-        >
-          {/* <div
+    return (
+        <Layout style={{ height: '100vh' }}>
+            <LayoutSidebar />
+            <Layout
+                style={{
+                    marginLeft: isDesktop ? '300px' : '0',
+                    overflow: 'auto',
+                }}
+            >
+                <LayoutHeader />
+                <Content
+                    style={{
+                        margin: '0 10px',
+                        flex: '1 0 auto',
+                        padding: '8px 8px',
+                    }}
+                >
+                    {/* <div
             style={{
               padding: 24,
               minHeight: '100%',
@@ -35,12 +40,12 @@ const MainLayout = ({ children }) => {
               borderRadius: borderRadiusLG,
             }}
           > */}
-            {children}
-          {/* </div> */}
-        </Content>
-        {/* <LayoutFooter /> */}
-      </Layout>
-    </Layout>
-  );
+                    {children}
+                    {/* </div> */}
+                </Content>
+                {/* <LayoutFooter /> */}
+            </Layout>
+        </Layout>
+    );
 };
-export default MainLayout;
+export default MainLayout;

src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import './App.css'
 import { BreadcrumbProvider } from './layout/LayoutBreadcrumb.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/pages/auth/Registration.jsx

@@ -1,461 +1,461 @@
-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';
+// 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([]);
+// 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' },
-    ];
+//     // 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 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 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);
+//             const uploadResponse = await uploadFile(formData);
 
-            if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
-                message.error(uploadResponse.message || 'Gagal mengunggah file.');
-                setLoading(false);
-                return;
-            }
+//             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 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 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);
+//             const response = await register(registerData);
 
-            if (response.data?.id_register) {
-                message.success('Data berhasil disimpan!');
+//             if (response.data?.id_register) {
+//                 message.success('Data berhasil disimpan!');
 
-                try {
-                    form.resetFields();
-                    setFileListKontrak([]);
-                    setFileListHsse([]);
-                    setFileListIcon([]);
+//                 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);
-        }
-    };
+//                     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 onCancel = () => {
+//         form.resetFields();
+//         setFileListKontrak([]);
+//         setFileListHsse([]);
+//         setFileListIcon([]);
+//         navigate('/signin');
+//     };
 
-    const handleChangeKontrak = ({ fileList }) => {
-        setFileListKontrak(fileList);
-    };
+//     const handleChangeKontrak = ({ fileList }) => {
+//         setFileListKontrak(fileList);
+//     };
 
-    const handleChangeHsse = ({ fileList }) => {
-        setFileListHsse(fileList);
-    };
+//     const handleChangeHsse = ({ fileList }) => {
+//         setFileListHsse(fileList);
+//     };
 
-    const handleChangeIcon = ({ fileList }) => {
-        setFileListIcon(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;
+//     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;
-    };
+//         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>
+//     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>
+//                     {/* 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>
+//                     {/* 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>
-    );
-};
+//                     {/* 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;
+// export default Registration;

src/pages/auth/SignIn.jsx

@@ -1,186 +1,179 @@
+import React, { useEffect, useState } from 'react';
 import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
-import React from 'react';
-import handleSignIn from '../../Utils/Auth/SignIn';
-import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
-import logo from 'assets/freepik/LOGOPIU.png';
 import { useNavigate } from 'react-router-dom';
 import { NotifAlert } from '../../components/Global/ToastNotif';
-import { decryptData } from '../../components/Global/Formatter';
+import { SendRequest } from '../../components/Global/ApiRequest';
+import bg_cod from 'assets/bg_cod.jpg';
+import logo from 'assets/freepik/LOGOPIU.png';
 
 const SignIn = () => {
-    const [captchaSvg, setCaptchaSvg] = React.useState('');
-    const [userInput, setUserInput] = React.useState('');
-    const [message, setMessage] = React.useState('');
-    const [captchaText, setcaptchaText] = React.useState('');
-
+    const [form] = Form.useForm();
+    const [captchaSvg, setCaptchaSvg] = useState('');
+    const [captchaText, setCaptchaText] = useState('');
+    const [loading, setLoading] = useState(false);
     const navigate = useNavigate();
-    // let url = `${import.meta.env.VITE_API_SERVER}/users`;
 
-    React.useEffect(() => {
+    const defaultSignIn = {
+        identifier: 'superadmin@cod.com',
+        password: '@Superadmin123',
+        captcha: '',
+    };
+
+    const moveToSignUp = () => {
+        navigate('/signup');
+    };
+
+    // ambil captcha
+    const fetchCaptcha = async () => {
+        try {
+            const res = await SendRequest({
+                method: 'get',
+                prefix: 'auth/generate-captcha',
+                token: false,
+            });
+            setCaptchaSvg(res.data.svg || '');
+            setCaptchaText(res.data.text || '');
+        } catch (err) {
+            console.error('Error fetching captcha:', err);
+        }
+    };
+
+    useEffect(() => {
         fetchCaptcha();
     }, []);
 
-    // Fetch the CAPTCHA SVG from the backend
-    const fetchCaptcha = async () => {
+    const handleOnSubmit = async (values) => {
+        setLoading(true);
         try {
-            // let url = `${import.meta.env.VITE_API_SERVER}/operation`
-            // const response = await fetch('http://localhost:9528/generate-captcha');
-            const response = await fetch(
-                `${import.meta.env.VITE_API_SERVER}/auth/generate-captcha`,
-                {
-                    credentials: 'include', // Wajib untuk mengirim cookie
-                }
-            );
+            const res = await SendRequest({
+                method: 'post',
+                prefix: 'auth/login',
+                params: {
+                    identifier: values.identifier,
+                    password: values.password,
+                    captcha: values.captcha,
+                    captchaText: captchaText,
+                },
+                withCredentials: true,
+            });
 
-            // Ambil header
-            const captchaToken = response.headers.get('X-Captcha-Token');
+            const user = res?.data?.user || res?.user;
+            const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
 
-            // console.log('Captcha Token:', decryptData(captchaToken));
+            if (user && accessToken) {
+                localStorage.setItem('token', accessToken);
+                localStorage.setItem('user', JSON.stringify(user));
 
-            setcaptchaText(decryptData(captchaToken));
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Login Berhasil',
+                    message: res?.message || 'Selamat datang!',
+                });
 
-            const data = await response.text();
-            setCaptchaSvg(data);
-        } catch (error) {
-            console.error('Error fetching CAPTCHA:', error);
-        }
-    };
-
-    const handleOnSubmit = async (e) => {
-        // console.log('Received values of form: ', e);
-        // e.preventDefault();
-
-        try {
-            // const response = await fetch(`${import.meta.env.VITE_API_SERVER}/auth/verify-captcha`, {
-            //     method: 'POST',
-            //     headers: { 'Content-Type': 'application/json' },
-            //     credentials: 'include', // WAJIB: Agar cookie CAPTCHA dikirim
-            //     body: JSON.stringify({ captcha: userInput }),
-            // });
-
-            // const data = await response.json();
-            // console.log(data);
-
-            const data = {
-                success: captchaText === userInput ? true : false,
-            };
-
-            if (data.success) {
-                setMessage('CAPTCHA verified successfully!');
-                await handleSignIn(e);
+                navigate('/dashboard/home');
+            }
+        } catch (err) {
+            // hanya handle invalid captcha disini
+            if (err?.response?.data?.message?.toLowerCase().includes('captcha')) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: 'Invalid captcha',
+                });
+                fetchCaptcha();
             } else {
-                setMessage('CAPTCHA verification failed. Try again.');
-                fetchCaptcha(); // Refresh CAPTCHA on failure
                 NotifAlert({
                     icon: 'error',
-                    title: 'Gagal',
-                    message: data.message || 'CAPTCHA verification failed. Try again.',
+                    title: 'Login Gagal',
+                    message: err?.message || 'Terjadi kesalahan',
                 });
+                fetchCaptcha();
             }
-        } catch (error) {
-            console.error('Error verifying CAPTCHA:', error);
-            setMessage('An error occurred. Please try again.');
+        } finally {
+            setLoading(false);
         }
-
-        setUserInput(''); // Clear the input field
-    };
-
-    const moveToRegistration = (e) => {
-        // e.preventDefault();
-        // navigate("/signup")
-        navigate('/registration');
     };
 
     return (
-        <>
-            <Flex
-                align="center"
-                justify="center"
-                // vertical
-                style={{
-                    height: '100vh',
-                    // marginTop: '10vh',
-                    // backgroundImage: `url('https://via.placeholder.com/300')`,
-                    backgroundImage: `url(${sypiu_ggcp})`,
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                }}
-            >
-                <Card
-                    style={{
-                        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-                    }}
+        <Flex
+            align="center"
+            justify="center"
+            style={{
+                height: '100vh',
+                backgroundImage: `url(${bg_cod})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}
+        >
+            <Card style={{ boxShadow: '0px 4px 8px rgba(0,0,0,0.1)' }}>
+                <Flex align="center" justify="center">
+                    <Image src={logo} height={150} width={220} preview={false} alt="logo" />
+                </Flex>
+                <br />
+                <Form
+                    form={form}
+                    layout="vertical"
+                    style={{ width: '250px' }}
+                    onFinish={handleOnSubmit}
+                    initialValues={defaultSignIn}
                 >
-                    <Flex align="center" justify="center">
-                        <Image
-                            // src="/src/assets/freepik/LOGOPIU.png"
-                            src={logo}
-                            height={150}
-                            width={220}
-                            preview={false}
-                            alt="signin"
-                        />
-                    </Flex>
-                    <br />
-                    <Form onFinish={handleOnSubmit} layout="vertical" style={{ width: '250px' }}>
-                        <Form.Item
-                            label="Username"
-                            name="username"
-                            rules={[
-                                {
-                                    required: true,
-                                    // type: "email",
-                                },
-                            ]}
-                        >
-                            <Input placeholder="username" size="large" />
-                        </Form.Item>
-
-                        <Form.Item
-                            label="Password"
-                            name="password"
-                            rules={[
-                                {
-                                    required: true,
-                                    message: 'Please input your password!',
-                                },
-                            ]}
-                        >
-                            <Input.Password placeholder="password" size="large" />
-                        </Form.Item>
-                        <div
-                            style={{ marginLeft: 45 }}
-                            dangerouslySetInnerHTML={{ __html: captchaSvg }}
-                        />
-                        {/* {message} */}
-                        <Input
-                            style={{ marginTop: 10, marginBottom: 15 }}
-                            type="text"
-                            placeholder="Enter CAPTCHA text"
-                            size="large"
-                            value={userInput}
-                            onChange={(e) => setUserInput(e.target.value)}
-                        />
-
-                        <Form.Item>
-                            <Space direction="vertical" style={{ width: '100%' }}>
-                                <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
-                                    Sign In
-                                </Button>
-                            </Space>
-                        </Form.Item>
-                    </Form>
-                    <Button
-                        type="primary"
-                        htmlType="submit"
-                        style={{ width: '100%' }}
-                        onClick={() => moveToRegistration()}
+                    <Form.Item
+                        label="Email / Username"
+                        name="identifier"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Email / Username tidak boleh kosong',
+                            },
+                        ]}
                     >
-                        Registration
-                    </Button>
-                </Card>
-            </Flex>
-        </>
+                        <Input placeholder="Email / Username" size="large" />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Password"
+                        name="password"
+                        rules={[{ required: true, message: 'Password tidak boleh kosong' }]}
+                    >
+                        <Input.Password placeholder="Password" size="large" />
+                    </Form.Item>
+
+                    <div
+                        style={{ textAlign: 'center' }}
+                        dangerouslySetInnerHTML={{ __html: captchaSvg }}
+                    />
+
+                    <Form.Item
+                        label="CAPTCHA"
+                        name="captcha"
+                        rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}
+                    >
+                        <Input placeholder="Masukkan CAPTCHA" size="large" />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                            <Button
+                                type="primary"
+                                htmlType="submit"
+                                loading={loading}
+                                style={{ width: '100%' }}
+                            >
+                                Sign In
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+                <Button
+                    type="primary"
+                    htmlType="submit"
+                    style={{ width: '100%' }}
+                    onClick={() => moveToSignUp()}
+                >
+                    Registration
+                </Button>
+            </Card>
+        </Flex>
     );
 };
 

src/pages/auth/Signup.jsx

@@ -1,158 +1,201 @@
-import { Flex, Input, Form, Button, Card, Space, Image } from 'antd'
-import React from 'react'
-// import handleSignIn from '../../Utils/Auth/SignIn';
-import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
-import {useNavigate} from "react-router-dom";
+import React, { useState } from 'react';
+import { Flex, Input, Form, Button, Card, Space, Image, Row, Col } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import bg_cod from 'assets/bg_cod.jpg';
+import logo from 'assets/freepik/LOGOPIU.png';
+import { register } from '../../api/auth';
+import { NotifOk, NotifAlert } from '../../components/Global/ToastNotif';
 
 const SignUp = () => {
+    const [loading, setLoading] = useState(false);
+    const [form] = Form.useForm();
+    const navigate = useNavigate();
 
-  const [captchaSvg, setCaptchaSvg] = React.useState('');
-  const [userInput, setUserInput] = React.useState('');
-  const [message, setMessage] = React.useState('');
+    const [isRegistered, setIsRegistered] = useState(false);
 
-  const navigate = useNavigate();
-  // let url = `${import.meta.env.VITE_API_SERVER}/users`;
+    const moveToSignin = () => {
+        navigate('/signin');
+    };
 
-  React.useEffect(() => {
-    fetchCaptcha();
-  }, []);
+    const handleSignUp = async (values) => {
+        const { user_fullname, user_name, user_email, user_phone, user_password, confirmPassword } =
+            values;
 
-  // Fetch the CAPTCHA SVG from the backend
-  const fetchCaptcha = async () => {
-    try {
-        const response = await fetch('http://localhost:9528/generate-captcha');
-        const data = await response.text();
-        setCaptchaSvg(data);
-    } catch (error) {
-        console.error('Error fetching CAPTCHA:', error);
-    }
-  };
-
-  const handleOnSubmt = async (e) => {
-    // console.log('Received values of form: ', e);
-    // await handleSignIn(e);
-    e.preventDefault();
-
-    try {
-        const response = await fetch('http://localhost:5000/verify-captcha', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ userInput }),
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            setMessage('CAPTCHA verified successfully!');
-        } else {
-            setMessage('CAPTCHA verification failed. Try again.');
-            fetchCaptcha(); // Refresh CAPTCHA on failure
+        // Validasi confirm password
+        if (user_password !== confirmPassword) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Password Tidak Sama',
+                message: 'Password dan confirm password harus sama',
+            });
+            form.resetFields(['password', 'confirmPassword']);
+            return;
         }
-    } catch (error) {
-        console.error('Error verifying CAPTCHA:', error);
-        setMessage('An error occurred. Please try again.');
-    }
 
-    setUserInput(''); // Clear the input field    
-  }
-  
-  const moveToSignin = (e) => {
-    // e.preventDefault();
-    navigate("/signin")
-  }
+        // Validasi nomor telepon Indonesia
+        const phoneRegex = /^(?:\+62|62|0)8[1-9][0-9]{6,11}$/;
+        if (!phoneRegex.test(user_phone)) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Format Telepon Salah',
+                message: 'Nomor telepon tidak valid (harus nomor Indonesia)',
+            });
+            form.resetFields(['user_phone']);
+            return;
+        }
 
-  return (
-    <>
+        // Validasi password kompleks
+        const passwordErrors = [];
+        if (user_password.length < 8) passwordErrors.push('Minimal 8 karakter');
+        if (!/[A-Z]/.test(user_password)) passwordErrors.push('Harus ada huruf kapital');
+        if (!/[0-9]/.test(user_password)) passwordErrors.push('Harus ada angka');
+        if (!/[!@#$%^&*(),.?":{}|<>]/.test(user_password))
+            passwordErrors.push('Harus ada karakter spesial');
+        if (passwordErrors.length) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Password Tidak Valid',
+                message: passwordErrors.join(', '),
+            });
+            form.resetFields(['user_password', 'confirmPassword']);
+            return;
+        }
 
-      <Flex 
-        align='center' 
-        justify='center' 
-        // vertical 
-        style={{ 
-          height: '100vh',
-          // marginTop: '10vh',
-          // backgroundImage: `url('https://via.placeholder.com/300')`,
-          backgroundImage: `url(${sypiu_ggcp})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      >
-        <Card
-          style={{
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-          }}
+        setLoading(true);
+        try {
+            const res = await register({
+                user_fullname,
+                user_name,
+                user_email,
+                user_phone,
+                user_password,
+            });
+
+            NotifOk({
+                icon: 'success',
+                title: 'Registrasi Berhasil',
+                message: res?.data?.message || 'Berhasil menambahkan user.',
+            });
+
+            form.resetFields();
+            setIsRegistered(true);
+            // navigate('/signin');
+        } catch (err) {
+            console.error('Register error:', err);
+            const errorMessage = err?.response?.data?.message || err.message || 'Terjadi kesalahan';
+
+            NotifAlert({
+                icon: 'error',
+                title: 'Registrasi Gagal',
+                message: errorMessage || 'Terjadi kesalahan',
+            });
+            if (errorMessage.toLowerCase().includes('already')) {
+                form.resetFields();
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Flex
+            align="center"
+            justify="center"
+            style={{
+                minHeight: '100vh',
+                backgroundImage: `url(${bg_cod})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                padding: '20px',
+            }}
         >
-          <Flex align='center' justify='center'>
-            <Image src='/vite.svg' height={150} width={150} preview={false} alt='signin' />
-          </Flex>
-          <br />
-          <Form
-            onFinish={handleOnSubmt}
-            layout='vertical'
-            style={{ width: '250px' }}
-          >
-
-            <Form.Item label="Email" name="email"
-              rules={[
-                {
-                  required: true,
-                  type: 'email'
-                },
-              ]}
+            <Card
+                style={{
+                    width: '100%',
+                    maxWidth: 450,
+                    borderRadius: '12px',
+                    boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
+                    padding: '10px',
+                    textAlign: 'center',
+                }}
             >
-              <Input placeholder='email' size='large' />
-            </Form.Item>
+                <Image src={logo} height={150} width={220} preview={false} alt="logo" />
 
-            <Form.Item label="Password" name="password"
-              rules={[
-                {
-                  required: true,
-                  message: 'Please input your password!'
-                },
-              ]}
-            >
-              <Input.Password placeholder='password' size='large' />
-            </Form.Item>
-            <div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
+                <h2 style={{ marginBottom: '20px', color: '#1a3c34' }}>Registration</h2>
 
-            <Form.Item label="Captcha" name="captcha"
-              rules={[
-                {
-                  required: true,
-                  type: 'text'
-                },
-              ]}
-            >
-              <Input placeholder='Enter CAPTCHA text' size='large' />
-            </Form.Item>
+                <Form form={form} onFinish={handleSignUp} layout="vertical">
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="Full Name"
+                                name="user_fullname"
+                                rules={[{ required: true }]}
+                            >
+                                <Input placeholder="Full Name" size="large" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="Name" name="user_name" rules={[{ required: true }]}>
+                                <Input placeholder="Name" size="large" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
 
-            {/* <input
-              type="text"
-              placeholder="Enter CAPTCHA text"
-              value={userInput}
-              onChange={(e) => setUserInput(e.target.value)}
-            /> */}
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="Email"
+                                name="user_email"
+                                rules={[
+                                    {
+                                        required: true,
+                                        type: 'email',
+                                        message: 'Please input a valid email!',
+                                    },
+                                ]}
+                            >
+                                <Input placeholder="Email" size="large" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="Phone" name="user_phone" rules={[{ required: true }]}>
+                                <Input placeholder="Phone" size="large" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
 
-            <Form.Item>
-              <Space direction='vertical' style={{ width: '100%' }}>
-                <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
-                  Registrasi
+                    <Form.Item label="Password" name="user_password" rules={[{ required: true }]}>
+                        <Input.Password placeholder="Password" size="large" />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Confirm Password"
+                        name="confirmPassword"
+                        rules={[{ required: true }]}
+                    >
+                        <Input.Password placeholder="Confirm Password" size="large" />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                            <Button
+                                type="primary"
+                                htmlType="submit"
+                                loading={loading}
+                                style={{ width: '100%' }}
+                            >
+                                Sign Up
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+
+                <Button type="primary" style={{ width: '100%' }} onClick={moveToSignin}>
+                    Sign In
                 </Button>
-              </Space>
-            </Form.Item>
+            </Card>
+        </Flex>
+    );
+};
 
-          </Form>
-          <Button 
-            type="primary" 
-            htmlType="submit" 
-            style={{ width: '100%' }}
-            onClick={() => moveToSignin()}
-          >
-            Sign In
-          </Button>
-        </Card>
-      </Flex>
-    </>
-  )
-}
-
-export default SignUp
+export default SignUp;

src/pages/eventAlarm/IndexEventAlarm.jsx

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,246 @@
+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/report/IndexReport.jsx

@@ -0,0 +1,275 @@
+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

@@ -0,0 +1,297 @@
+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/history/trending/trending.css

@@ -0,0 +1,118 @@
+.trending-container {
+    padding: 20px;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+}
+
+/* Filter Card */
+.filter-card {
+    margin-bottom: 24px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.filter-header {
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.filter-item {
+    margin-bottom: 8px;
+}
+
+/* Statistic Cards */
+.stat-card {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+}
+
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+}
+
+.stat-card-red::before {
+    background-color: #ff4d4f;
+}
+
+.stat-card-orange::before {
+    background-color: #ff9f43;
+}
+
+.stat-card-green::before {
+    background-color: #52c41a;
+}
+
+.stat-card-blue::before {
+    background-color: #1890ff;
+}
+
+.stat-icon {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    opacity: 0.2;
+}
+
+.stat-card-red .stat-icon {
+    color: #ff4d4f;
+}
+
+.stat-card-orange .stat-icon {
+    color: #ff9f43;
+}
+
+.stat-card-green .stat-icon {
+    color: #52c41a;
+}
+
+.stat-card-blue .stat-icon {
+    color: #1890ff;
+}
+
+/* Chart Cards */
+.chart-card {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    height: 100%;
+}
+
+.chart-header {
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .trending-container {
+        padding: 12px;
+    }
+
+    .stat-card {
+        margin-bottom: 12px;
+    }
+
+    .chart-card {
+        margin-bottom: 16px;
+    }
+}
+
+/* Custom Ant Design overrides */
+.trending-container .ant-statistic-title {
+    margin-bottom: 4px;
+}
+
+.trending-container .ant-statistic-content {
+    font-size: 28px;
+}
+
+.trending-container .ant-card-body {
+    padding: 20px;
+}

src/pages/home/Home.jsx

@@ -9,44 +9,39 @@ const Home = () => {
     const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
 
     useEffect(() => {
-        const handleResize = () => {
-            setIsMobile(window.innerWidth <= 768);
-        };
+        const handleResize = () => setIsMobile(window.innerWidth <= 768);
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            setBreadcrumbItems([
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            • Dashboard
-                        </Text>
-                    ),
-                },
-                {
-                    title: (
-                        <Text strong style={{ fontSize: '14px' }}>
-                            Home
-                        </Text>
-                    ),
-                },
-            ]);
-        } else {
-            navigate('/signin');
-        }
+        setBreadcrumbItems([
+            {
+                title: (
+                    <Text strong style={{ fontSize: '14px' }}>
+                        Dashboard
+                    </Text>
+                ),
+            },
+            {
+                title: (
+                    <Text strong style={{ fontSize: '14px' }}>
+                        Home
+                    </Text>
+                ),
+            },
+        ]);
     }, []);
 
     return (
         <Card>
             <Flex align="center" justify="center">
-                <Text strong style={{fontSize:'30px'}}>Wellcome Call Of Duty App</Text>
+                <Text strong style={{ fontSize: '30px' }}>
+                    Welcome to Call Of Duty App
+                </Text>
             </Flex>
         </Card>
     );
 };
 
-export default Home;
+export default Home;

src/pages/home/SvgTest.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+// import { ReactSVG } from 'react-svg';
+import { setValSvg } from '../../components/Global/MqttConnection';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgTest = () => {
+    return (
+        <>
+            <Card>
+                <Flex align="center" justify="center">
+                    <Text strong style={{ fontSize: '30px' }}>
+                        Example SVG Value By Mqtt
+                    </Text>
+                </Flex>
+            </Card>
+            <ReactSVG
+                src={filePathSvg}
+                beforeInjection={(svg) => {
+                    setValSvg(topicMqtt, svg);
+                }}
+            />
+        </>
+    );
+};
+
+export default SvgTest;

src/pages/jadwalShift/IndexJadwalShift.jsx

@@ -0,0 +1,74 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListJadwalShift from './component/ListJadwalShift';
+import DetailJadwalShift from './component/DetailJadwalShift';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexJadwalShift = memo(function IndexJadwalShift() {
+    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) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowModal(false);
+                break;
+        }
+        setActionMode(param);
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Jadwal</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Jadwal Shift</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ListJadwalShift
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailJadwalShift
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexJadwalShift;

src/pages/jadwalShift/component/DetailJadwalShift.jsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from 'react';
+import {
+    Modal,
+    Input,
+    Typography,
+    Button,
+    ConfigProvider,
+    Row,
+    Col
+} from 'antd';
+import { NotifOk } from '../../../components/Global/ToastNotif';
+
+const { Text } = Typography;
+
+const DetailJadwalShift = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        id: '',
+        nama_shift: '',
+        jam_masuk: '',
+        jam_pulang: '',
+        username: '',
+        nama_employee: '',
+        whatsapp: ''
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+        // This is a dummy save function for slicing purposes
+        setTimeout(() => {
+            setConfirmLoading(false);
+            NotifOk({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Data dummy berhasil disimpan.',
+            });
+            props.setActionMode('list');
+        }, 1000);
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.showModal, props.selectedData]);
+
+    // Dummy handler for slicing
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...FormData, [name]: value });
+    };
+
+    return (
+        <Modal
+            title={`${ 
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Jadwal Shift`}
+            open={props.showModal}
+            onCancel={handleCancel}
+            width={800}
+            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>,
+            ]}
+        >
+            {FormData && (
+                <div>
+                    <Row gutter={[16, 16]}>
+                        <Col span={12}>
+                            <Text strong>Nama Karyawan</Text>
+                            <Input
+                                name="nama_employee"
+                                value={FormData.nama_employee}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Username</Text>
+                            <Input
+                                name="username"
+                                value={FormData.username}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Nama Shift</Text>
+                            <Input
+                                name="nama_shift"
+                                value={FormData.nama_shift}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Whatsapp</Text>
+                            <Input
+                                name="whatsapp"
+                                value={FormData.whatsapp}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Jam Masuk</Text>
+                            <Input
+                                name="jam_masuk"
+                                value={FormData.jam_masuk}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Jam Pulang</Text>
+                            <Input
+                                name="jam_pulang"
+                                value={FormData.jam_pulang}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                    </Row>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailJadwalShift;

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -0,0 +1,282 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import TableList from '../../../components/Global/TableList';
+
+// --- DUMMY DATA (Initial State) --- //
+const initialDummyData = [
+    {
+        id: 1,
+        nama_shift: 'Shift Pagi',
+        jam_masuk: '07:00',
+        jam_pulang: '15:00',
+        username: 'd.sanjaya',
+        nama_employee: 'Dede Sanjaya',
+        whatsapp: '081234567890'
+    },
+    {
+        id: 2,
+        nama_shift: 'Shift Siang',
+        jam_masuk: '15:00',
+        jam_pulang: '23:00',
+        username: 'a.wijaya',
+        nama_employee: 'Andi Wijaya',
+        whatsapp: '081234567891'
+    },
+    {
+        id: 3,
+        nama_shift: 'Shift Malam',
+        jam_masuk: '23:00',
+        jam_pulang: '07:00',
+        username: 'b.cahya',
+        nama_employee: 'Budi Cahya',
+        whatsapp: '081234567892'
+    },
+];
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'Nama Karyawan',
+        dataIndex: 'nama_employee',
+        key: 'nama_employee',
+    },
+    {
+        title: 'Username',
+        dataIndex: 'username',
+        key: 'username',
+    },
+    {
+        title: 'Nama Shift',
+        dataIndex: 'nama_shift',
+        key: 'nama_shift',
+    },
+    {
+        title: 'Jam Masuk',
+        dataIndex: 'jam_masuk',
+        key: 'jam_masuk',
+    },
+    {
+        title: 'Jam Pulang',
+        dataIndex: 'jam_pulang',
+        key: 'jam_pulang',
+    },
+    {
+        title: 'Whatsapp',
+        dataIndex: 'whatsapp',
+        key: 'whatsapp',
+    },
+    {
+        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 [dataSource, setDataSource] = useState(initialDummyData);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
+
+    // --- DUMMY API --- //
+    const getDummyData = (queryParams) => {
+        return new Promise((resolve) => {
+            const { criteria } = queryParams;
+            let data = dataSource;
+            if (criteria) {
+                data = dataSource.filter(item => 
+                    item.nama_employee.toLowerCase().includes(criteria.toLowerCase()) ||
+                    item.username.toLowerCase().includes(criteria.toLowerCase())
+                );
+            }
+            setTimeout(() => {
+                resolve({
+                    status: 200,
+                    data: {
+                        data: data,
+                        paging: {
+                            page: 1,
+                            limit: 10,
+                            total: data.length,
+                            page_total: 1
+                        }
+                    }
+                });
+            }, 100);
+        });
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode === 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode, dataSource]); // Added dataSource to dependency array
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi Hapus',
+            message: `Jadwal shift untuk "${param.nama_employee}" akan dihapus?`,
+            onConfirm: () => handleDelete(param.id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = (id) => {
+        setDataSource(prevData => prevData.filter(item => item.id !== id));
+        NotifAlert({
+            icon: 'success',
+            title: 'Berhasil',
+            message: 'Data Jadwal Shift berhasil dihapus.',
+        });
+        doFilter(); // Trigger a re-fetch from the new state
+    };
+
+    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="Cari berdasarkan nama atau username..."
+                                    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>
+                            <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' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'nama_employee'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getDummyData}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListJadwalShift;

src/pages/master/brandDevice/IndexBrandDevice.jsx

@@ -0,0 +1,77 @@
+
+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';
+
+const { Text } = Typography;
+
+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) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Brand Device</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <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;

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

@@ -0,0 +1,310 @@
+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/ListBrandDevice.jsx

@@ -0,0 +1,353 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    EyeOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import TableList from '../../../../components/Global/TableList';
+
+// 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) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Brand Device ',
+        dataIndex: 'brandName',
+        key: 'brandName',
+        width: '20%',
+    },
+    {
+        title: 'Type',
+        dataIndex: 'brandType',
+        key: 'brandType',
+        width: '15%',
+    },
+    {
+        title: 'Manufacturer',
+        dataIndex: 'manufacturer',
+        key: 'manufacturer',
+        width: '20%',
+    },
+    {
+        title: 'model',
+        dataIndex: 'model',
+        key: 'model',
+        width: '15%',
+    },
+    {
+        title: 'status',
+        dataIndex: 'status',
+        key: 'status',
+        width: '10%',
+        align: 'center',
+        render: (_, { status }) => (
+            <>
+                {status === 'Active' ? (
+                    <Tag color={'green'} key={'status'}>
+                        Active
+                    </Tag>
+                ) : (
+                    <Tag color={'red'} key={'status'}>
+                        Inactive
+                    </Tag>
+                )}
+            </>
+        ),
+    },
+    {
+        title: 'Aksi',
+        key: 'action',
+        align: 'center',
+        width: '15%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    icon={<EyeOutlined />}
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListBrandDevice = memo(function ListBrandDevice(props) {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData);
+
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = 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') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode, brandDeviceData]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ search: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ search: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus data "' + param.brandName + '" ?',
+            onConfirm: () => handleDelete(param.brand_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (brand_id) => {
+        // Find brand name before deleting
+        const brandToDelete = brandDeviceData.find((brand) => brand.brand_id === brand_id);
+
+        // Simulate delete API call
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        // Remove from state
+        const updatedBrands = brandDeviceData.filter((brand) => brand.brand_id !== brand_id);
+        setBrandDeviceData(updatedBrands);
+
+        NotifAlert({
+            icon: 'success',
+            title: 'Berhasil',
+            message: `Data Brand Device "${brandToDelete?.brandName || ''}" berhasil dihapus.`,
+        });
+    };
+
+    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 brand device..."
+                                    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>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Brand Device
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'tag_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllBrandDevice}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListBrandDevice;

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

@@ -0,0 +1,33 @@
+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/device/IndexDevice.jsx

@@ -66,7 +66,7 @@ const IndexDevice = memo(function IndexDevice() {
                 setSelectedData={setSelectedData}
                 readOnly={readOnly}
                 showModal={showModal}
-                permitDefault={true}
+                permitDefault={false}
                 actionMode={actionMode}
             />
             {actionMode == 'generatepdf' && (

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

@@ -0,0 +1,84 @@
+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,21 +1,35 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Radio } from 'antd';
+import {
+    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 { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;
 
 const { Text } = Typography;
+const { TextArea } = Input;
 
 const DetailDevice = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
     const defaultData = {
-        id_apd: '',
-        nama_apd: '',
-        type_input: 1,
+        device_id: '',
+        device_code: '',
+        device_name: '',
         is_active: true,
-        jenis_permit_default: [],
+        device_location: 'Building A',
+        device_description: '',
+        ip_address: '',
     };
 
     const [FormData, setFormData] = useState(defaultData);
@@ -50,16 +64,63 @@ const DetailDevice = (props) => {
         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);
 
-        if (!FormData.nama_apd) {
+        // Validasi required fields
+        // if (!FormData.device_code) {
+        //     NotifOk({
+        //         icon: 'warning',
+        //         title: 'Peringatan',
+        //         message: 'Kolom Device Code Tidak Boleh Kosong',
+        //     });
+        //     setConfirmLoading(false);
+        //     return;
+        // }
+
+        if (!FormData.device_name) {
             NotifOk({
                 icon: 'warning',
                 title: 'Peringatan',
-                message: 'Kolom Nama APD Tidak Boleh Kosong',
+                message: 'Kolom Device Name Tidak Boleh Kosong',
             });
+            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;
         }
@@ -75,53 +136,64 @@ const DetailDevice = (props) => {
             return;
         }
 
+        // Backend validation schema doesn't include device_code
         const payload = {
-            nama_apd: FormData.nama_apd,
+            device_name: FormData.device_name,
             is_active: FormData.is_active,
-            type_input: FormData.type_input,
-            jenis_permit_default: checkedList,
+            device_location: FormData.device_location,
+            ip_address: FormData.ip_address,
         };
 
-        if (props.permitDefault) {
-            try {
-                let response;
-                if (!FormData.id_apd) {
-                    response = await createApd(payload);
-                } else {
-                    response = await updateApd(FormData.id_apd, payload);
-                }
+        // 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;
+        }
 
-                if (response.statusCode === 200) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data "${response.data.nama_apd}" berhasil ${
-                            FormData.id_apd ? 'diubah' : 'ditambahkan'
-                        }.`,
-                    });
+        console.log('Payload to send:', payload);
 
-                    props.setActionMode('list');
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Terjadi kesalahan saat menyimpan data.',
-                    });
-                }
-            } catch (error) {
+        try {
+            let response;
+            if (!FormData.device_id) {
+                response = await createDevice(payload);
+            } else {
+                response = await updateDevice(FormData.device_id, payload);
+            }
+
+            console.log('Save Device Response:', response);
+
+            // 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;
+
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Device "${deviceName}" berhasil ${
+                        FormData.device_id ? 'diubah' : 'ditambahkan'
+                    }.`,
+                });
+
+                props.setActionMode('list');
+            } else {
                 NotifAlert({
                     icon: 'error',
-                    title: 'Error',
-                    message: 'Terjadi kesalahan pada server. Coba lagi nanti.',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
                 });
             }
-        } else {
-            props.setData((prevData) => [
-                ...prevData,
-                { nama_apd: payload.nama_apd, type_input: payload.type_input },
-            ]);
-
-            props.setActionMode('list');
+        } catch (error) {
+            console.error('Save Device Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
+            });
         }
 
         setConfirmLoading(false);
@@ -146,15 +218,21 @@ const DetailDevice = (props) => {
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            getDataJenisPermit();
+            // Only call getDataJenisPermit if permitDefault is enabled
+            if (props.permitDefault) {
+                getDataJenisPermit();
+            }
+
             if (props.selectedData != null) {
                 setFormData(props.selectedData);
-                setCheckedList(props.selectedData.jenis_permit_default_arr);
+                if (props.permitDefault && props.selectedData.jenis_permit_default_arr) {
+                    setCheckedList(props.selectedData.jenis_permit_default_arr);
+                }
             } else {
                 setFormData(defaultData);
             }
         } else {
-            navigate('/signin');
+            // navigate('/signin'); // Uncomment if useNavigate is imported
         }
     }, [props.showModal]);
 
@@ -217,74 +295,98 @@ const DetailDevice = (props) => {
         >
             {FormData && (
                 <div>
-                    {props.permitDefault && (
-                        <>
-                            <div>
-                                <div>
-                                    <Text strong>Aktif</Text>
-                                </div>
-                                <div
+                    <div>
+                        <div>
+                            <Text strong>Device Status</Text>
+                        </div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginTop: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '8px' }}>
+                                <Switch
+                                    disabled={props.readOnly}
                                     style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        marginTop: '8px',
+                                        backgroundColor:
+                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
                                     }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    FormData.is_active == 1 ? '#23A55A' : '#bfbfbf',
-                                            }}
-                                            checked={FormData.is_active == 1 ? true : false}
-                                            onChange={handleStatusToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>
-                                            {FormData.is_active == 1 ? 'Aktif' : 'Non Aktif'}
-                                        </Text>
-                                    </div>
-                                </div>
+                                    checked={FormData.is_active === true}
+                                    onChange={handleStatusToggle}
+                                />
                             </div>
-                            <Divider style={{ margin: '5px 0' }} />
-                        </>
-                    )}
+                            <div>
+                                <Text>{FormData.is_active === true ? 'Running' : 'Offline'}</Text>
+                            </div>
+                        </div>
+                    </div>
+                    <Divider style={{ margin: '12px 0' }} />
                     <div hidden>
                         <Text strong>Device ID</Text>
                         <Input
-                            name="id_apd"
-                            value={FormData.id_apd}
+                            name="device_id"
+                            value={FormData.device_id}
                             onChange={handleInputChange}
                             disabled
                         />
                     </div>
-                    <div>
+                    {/* <div style={{ marginBottom: 12 }}>
+                        <Text strong>Device Code</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="device_code"
+                            value={FormData.device_code}
+                            onChange={handleInputChange}
+                            placeholder="Enter Device Code"
+                            readOnly={props.readOnly}
+                        />
+                    </div> */}
+                    <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Input
-                            name="nama_apd"
-                            value={FormData.nama_apd}
+                            name="device_name"
+                            value={FormData.device_name}
                             onChange={handleInputChange}
+                            placeholder="Enter Device Name"
                             readOnly={props.readOnly}
                         />
                     </div>
-                    <div style={{ marginTop: 4, marginBottom: 4 }}>
-                        <Text strong>Tipe Input</Text>
-                        <Text style={{ color: 'red', marginLeft: 4 }}>*</Text>
-                        <div>
-                            <Radio.Group
-                                value={FormData.type_input}
-                                options={[
-                                    { value: 1, label: 'Check' },
-                                    { value: 2, label: 'Text' },
-                                    { value: 3, label: 'Number' },
-                                ]}
-                                onChange={onChangeRadio}
-                                disabled={props.readOnly}
-                            />
-                        </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Device Location</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            type="text"
+                            name="device_location"
+                            value={FormData.device_location}
+                            onChange={handleInputChange}
+                            placeholder="Enter Device Location"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>IP Address</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="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>Device Description</Text>
+                        <TextArea
+                            name="device_description"
+                            value={FormData.device_description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Device Description (Optional)"
+                            readOnly={props.readOnly}
+                            rows={4}
+                        />
                     </div>
                     {props.permitDefault && (
                         <div>
@@ -305,4 +407,4 @@ const DetailDevice = (props) => {
     );
 };
 
-export default DetailDevice;
+export default DetailDevice;

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

@@ -1,58 +1,66 @@
 import React, { memo, useState, useEffect } from 'react';
-import { 
-    Space,
-    Tag,
-    ConfigProvider,
-    Button, Row, Col, Card, Divider, Form, Input, Dropdown } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Segmented } from 'antd';
 import {
     PlusOutlined,
-    FilterOutlined,
     EditOutlined,
     DeleteOutlined,
     EyeOutlined,
     SearchOutlined,
-    FilePdfOutlined,
-    FileExcelOutlined,
-    EllipsisOutlined
+    AppstoreOutlined,
+    TableOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
-import { deleteApd, getAllApd } from '../../../../api/master-apd';
+import { deleteDevice, getAllDevice } from '../../../../api/master-device';
 import TableList from '../../../../components/Global/TableList';
-import { getFilterData } from '../../../../components/Global/DataFilter';
-import ExcelJS from 'exceljs';
-import { saveAs } from 'file-saver';
-import logoPiEnergi from '../../../../assets/images/logo/pi-energi.png';
 
-const columns = (items, handleClickMenu) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
         title: 'ID',
-        dataIndex: 'id_apd',
-        key: 'id_apd',
+        dataIndex: 'device_id',
+        key: 'device_id',
         width: '5%',
         hidden: 'true',
     },
     {
-        title: 'Device Name',
-        dataIndex: 'nama_apd',
-        key: 'nama_apd',
-        width: '55%',
+        title: 'Device Code',
+        dataIndex: 'device_code',
+        key: 'device_code',
+        width: '10%',
     },
     {
-        title: 'Aktif',
-        dataIndex: 'is_active',
-        key: 'is_active',
+        title: 'Device Name',
+        dataIndex: 'device_name',
+        key: 'device_name',
+        width: '20%',
+    },
+    {
+        title: 'Location',
+        dataIndex: 'device_location',
+        key: 'device_location',
+        width: '10%',
+    },
+    {
+        title: 'IP Address',
+        dataIndex: 'ip_address',
+        key: 'ip_address',
+        width: '10%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'device_status',
+        key: 'device_status',
         width: '10%',
         align: 'center',
-        render: (_, { is_active }) => (
+        render: (_, { device_status }) => (
             <>
-                {is_active === true ? (
-                    <Tag color={'green'} key={'aaa'}>
-                        Aktif
+                {device_status === true ? (
+                    <Tag color={'green'} key={'status'}>
+                        Running
                     </Tag>
                 ) : (
-                    <Tag color={'red'} key={'aaa'}>
-                        Non-Aktif
+                    <Tag color={'red'} key={'status'}>
+                        Offline
                     </Tag>
                 )}
             </>
@@ -62,38 +70,46 @@ const columns = (items, handleClickMenu) => [
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '5%',
+        width: '15%',
         render: (_, record) => (
-            <Dropdown
-                menu={{
-                    items,
-                    onClick: ({key})=>handleClickMenu(key, record)
-                }}
-                trigger={['click']}
-                placement="bottomRight"
-            >
+            <Space>
                 <Button
-                    shape="default"
-                    icon={<EllipsisOutlined />}
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
                 />
-            </Dropdown>
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
         ),
     },
 ];
 
 const ListDevice = memo(function ListDevice(props) {
-    const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
 
-    const defaultFilter = { nama_apd: '' };
+    const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
 
     const navigate = useNavigate();
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode == 'list') {
+            if (props.actionMode === 'list') {
                 setFormDataFilter(defaultFilter);
                 doFilter();
             }
@@ -102,21 +118,19 @@ const ListDevice = memo(function ListDevice(props) {
         }
     }, [props.actionMode]);
 
-    const toggleFilter = () => {
-        setFormDataFilter(defaultFilter);
-        setShowFilter((prev) => !prev);
-    };
-
     const doFilter = () => {
         setTrigerFilter((prev) => !prev);
     };
 
-    const handleInputChangeFilter = (e) => {
-        const { name, value } = e.target;
-        setFormDataFilter((prevData) => ({
-            ...prevData,
-            [name]: value,
-        }));
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
     };
 
     const showPreviewModal = (param) => {
@@ -137,179 +151,68 @@ const ListDevice = memo(function ListDevice(props) {
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
-            title: 'Konfirmasi',
-            message: 'Apakah anda yakin hapus data "' + param.nama_apd + '" ?',
-            onConfirm: () => handleDelete(param.id_apd),
+            title: 'Konfirmasi Hapus',
+            message: 'Device "' + param.device_name + '" akan dihapus?',
+            onConfirm: () => handleDelete(param.device_id),
             onCancel: () => props.setSelectedData(null),
         });
     };
 
-    const handleDelete = async (id_apd) => {
-        const response = await deleteApd(id_apd);
+    const handleDelete = async (device_id) => {
+        const response = await deleteDevice(device_id);
 
-        if (response.statusCode == 200) {
+        if (response.statusCode === 200 && response.data === true) {
             NotifAlert({
                 icon: 'success',
                 title: 'Berhasil',
-                message: 'Data Data "' + response.data[0].nama_apd + '" berhasil dihapus.',
+                message: response.message || 'Data Device berhasil dihapus.',
             });
             doFilter();
         } else {
             NotifOk({
                 icon: 'error',
                 title: 'Gagal',
-                message: 'Gagal Menghapus Data Data "' + response.data[0].nama_apd + '"',
+                message: response?.message || 'Gagal Menghapus Data Device',
             });
         }
     };
 
-    const generatePdf = () => {
-        props.setActionMode('generatepdf');
-    };
-
-    const exportExcel = async()=>{
-        const data = getFilterData();
-
-        const workbook = new ExcelJS.Workbook();
-        const sheet = workbook.addWorksheet('Data APD');
-        let rowCursor = 1;
-        // Kop Logo PIE
-        if (logoPiEnergi) {
-            const response = await fetch(logoPiEnergi);
-            const blob = await response.blob();
-            const buffer = await blob.arrayBuffer();
-
-            const imageId = workbook.addImage({
-                buffer,
-                extension: 'png',
-            });
-
-            // Tempatkan gambar di pojok atas
-            sheet.addImage(imageId, {
-                tl: { col: 0.2, row: 0.8 },
-                ext: { width: 163, height: 80 },
-            });
-
-            sheet.getRow(5).height = 15; // biar ada jarak ke tabel
-            rowCursor = 3;
-        }
-
-        // Tambah Judul
-        const titleCell = sheet.getCell(`C${rowCursor}`);
-        titleCell.value = 'Data APD';
-        titleCell.font = { size: 20, bold: true, color: { argb: 'FF00AEEF' } };
-        titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
-        sheet.mergeCells(`C${rowCursor}:F${rowCursor}`);
-
-        // Header tabel
-        const headers = [
-            'ID APD',
-            'Nama APD',
-            'Deskripsi',
-            'Jenis Permit Default',
-            'Aktif',
-            'Dibuat',
-            'Diubah',
-        ];
-        sheet.addRow(headers);
-        const headerRow = sheet.getRow(6);
-        headerRow.font = { bold: true, size: 12 };
-        headerRow.eachCell((cell) => {
-            cell.alignment = {
-                horizontal: 'center', // rata tengah kiri-kanan
-                vertical: 'middle',   // rata tengah atas-bawah
-            };
-        });
-
-        // Tambahkan data
-        data.forEach((item) => {
-            sheet.addRow([
-                item.id_apd,
-                item.nama_apd,
-                item.deskripsi_apd ?? '',
-                item.jenis_permit_default ?? '',
-                item.is_active ? 'Ya' : 'Tidak',
-                new Date(item.created_at).toLocaleString(),
-                new Date(item.updated_at).toLocaleString(),
-            ]);
-        });
-
-        // Auto width
-        sheet.columns.forEach((col) => {
-            let maxLength = 10;
-            col.eachCell({ includeEmpty: true }, (cell) => {
-            const len = cell.value?.toString().length || 0;
-            if (len > maxLength) maxLength = len;
-            });
-            col.width = maxLength + 2;
-        });
-
-        // Export
-        const buffer = await workbook.xlsx.writeBuffer();
-        saveAs(new Blob([buffer]), 'Data_APD.xlsx');
-    };
-
-    const handleClickMenu = (key, record) => {
-        switch (key) {
-            case 'preview':
-                showPreviewModal(record);
-                break;
-
-            case 'edit':
-                showEditModal(record);
-                break;
-
-            case 'delete':
-                showDeleteDialog(record);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    const menu = [
-        {
-            key: 'preview',
-            label: <span style={{fontSize:'17px'}}>Preview</span>,
-            icon: <EyeOutlined style={{fontSize:'17px', marginTop:'5px'}} />,
-        },
-        {
-            key: 'edit',
-            label: <span style={{fontSize:'17px'}}>Edit</span>,
-            icon: <EditOutlined style={{fontSize:'17px'}} />,
-        },
-        {
-            key: 'delete',
-            label: <span style={{fontSize:'17px'}}>Delete</span>,
-            icon: <DeleteOutlined style={{fontSize:'17px'}} />,
-            danger: true,
-        },
-    ];
-
     return (
         <React.Fragment>
             <Card>
                 <Row>
                     <Col xs={24}>
                         <Row justify="space-between" align="middle" gutter={[8, 8]}>
-                            <Col>
-                                <ConfigProvider
-                                    theme={{
-                                        token: { colorBgContainer: '#E9F6EF' },
-                                        components: {
-                                            Button: {
-                                                defaultBg: 'white',
-                                                defaultColor: '#23A55A',
-                                                defaultBorderColor: '#23A55A',
-                                            },
-                                        },
+                            <Col xs={24} sm={24} md={12} lg={12}>
+                                <Input.Search
+                                    placeholder="Search device by name, code, or location..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        if (value === '') {
+                                            setFormDataFilter({ criteria: '' });
+                                            setTrigerFilter((prev) => !prev);
+                                        }
                                     }}
-                                >
-                                    <Button onClick={toggleFilter} icon={<FilterOutlined />}>
-                                        Filter
-                                    </Button>
-                                </ConfigProvider>
+                                    onSearch={handleSearch}
+                                    allowClear={{
+                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                                    }}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
                             </Col>
                             <Col>
                                 <Space wrap size="small">
@@ -330,6 +233,7 @@ const ListDevice = memo(function ListDevice(props) {
                                         <Button
                                             icon={<PlusOutlined />}
                                             onClick={() => showAddModal()}
+                                            size="large"
                                         >
                                             Tambah Data
                                         </Button>
@@ -338,64 +242,17 @@ const ListDevice = memo(function ListDevice(props) {
                             </Col>
                         </Row>
                     </Col>
-
-                    {/* filter */}
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
-                        {showFilter && (
-                            <>
-                                <Divider />
-                                <Form layout="vertical">
-                                    <Form.Item label="Nama APD">
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                gap: '8px',
-                                                alignItems: 'center',
-                                                maxWidth: '500px',
-                                                width: '100%',
-                                            }}
-                                        >
-                                            <Input
-                                                name="nama_apd"
-                                                value={formDataFilter.nama_apd}
-                                                onChange={handleInputChangeFilter}
-                                                placeholder="Enter Nama APD"
-                                                style={{ height: '40px' }}
-                                            />
-                                            <ConfigProvider
-                                                theme={{
-                                                    token: {
-                                                        colorText: 'white',
-                                                        colorBgContainer: 'purple',
-                                                    },
-                                                    components: {
-                                                        Button: {
-                                                            defaultBg: 'white',
-                                                            defaultColor: '#23A55A',
-                                                            defaultBorderColor: '#23A55A',
-                                                        },
-                                                    },
-                                                }}
-                                            >
-                                                <Button
-                                                    icon={<SearchOutlined />}
-                                                    onClick={doFilter}
-                                                    style={{ height: '40px' }}
-                                                >
-                                                    Cari
-                                                </Button>
-                                            </ConfigProvider>
-                                        </div>
-                                    </Form.Item>
-                                </Form>
-                            </>
-                        )}
-                    </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
-                            getData={getAllApd}
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'device_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllDevice}
                             queryParams={formDataFilter}
-                            columns={columns(menu, handleClickMenu)}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
                             triger={trigerFilter}
                         />
                     </Col>
@@ -405,4 +262,4 @@ const ListDevice = memo(function ListDevice(props) {
     );
 });
 
-export default ListDevice;
+export default ListDevice;

src/pages/master/plantSection/IndexPlantSection.jsx

@@ -0,0 +1,74 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListPlantSection from './component/ListPlantSection';
+import DetailPlantSection from './component/DetailPlantSection';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexPlantSection = memo(function IndexPlantSection() {
+    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) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowModal(false);
+                break;
+        }
+        setActionMode(param);
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ListPlantSection
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailPlantSection
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexPlantSection;

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

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import {
+    Modal,
+    Input,
+    Typography,
+    Switch,
+    Button,
+    ConfigProvider,
+    Divider,
+} from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
+
+const { Text } = Typography;
+
+const DetailPlantSection = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        sub_section_id: '',
+        sub_section_code: '',
+        sub_section_name: '',
+        is_active: true,
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.sub_section_name) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Plant Sub Section Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        try {
+            let response;
+            let payload;
+
+            if (props.actionMode === 'edit') {
+                payload = { 
+                    is_active: FormData.is_active,
+                    sub_section_name: FormData.sub_section_name
+                };
+                response = await updatePlantSection(FormData.sub_section_id, payload);
+            } else {
+                // Backend generates the code, so we only send the name and status
+                payload = {
+                    sub_section_name: FormData.sub_section_name,
+                    is_active: FormData.is_active,
+                }
+                response = 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({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
+        } catch (error) {
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server.',
+            });
+        } finally {
+            setConfirmLoading(false);
+        }
+    };
+    
+    const handleStatusToggle = (checked) => {
+        setFormData({
+            ...FormData,
+            is_active: checked,
+        });
+    };
+
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.showModal, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${ 
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Plant Section`}
+            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>,
+            ]}
+        >
+            {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.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' }} />
+
+                    {props.actionMode !== 'add' && (
+                        <div style={{ marginBottom: 12 }}>
+                            <Text strong>Plant Section Code</Text>
+                            <Input
+                                name="sub_section_code"
+                                value={FormData.sub_section_code}
+                                disabled
+                            />
+                        </div>
+                    )}
+
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Plant Sub Section Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="sub_section_name"
+                            value={FormData.sub_section_name}
+                            onChange={handleInputChange}
+                            placeholder="Enter Plant Sub Section Name"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailPlantSection;

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

@@ -0,0 +1,229 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import { deletePlantSection, getAllPlantSection } from '../../../../api/master-plant-section';
+import TableList from '../../../../components/Global/TableList';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'Section Code',
+        dataIndex: 'sub_section_code',
+        key: 'sub_section_code',
+        width: '20%',
+    },
+    {
+        title: 'Plant Sub Section Name',
+        dataIndex: 'sub_section_name',
+        key: 'sub_section_name',
+        width: '40%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '15%',
+        align: 'center',
+        render: (status) => (
+            <Tag color={status ? 'green' : 'red'}>
+                {status ? 'Active' : 'Inactive'}
+            </Tag>
+        ),
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '15%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListPlantSection = memo(function ListPlantSection(props) {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode === 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi Hapus',
+            message: 'Plant Section "' + param.sub_section_name + '" akan dihapus?',
+            onConfirm: () => handleDelete(param.sub_section_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (sub_section_id) => {
+        const response = await deletePlantSection(sub_section_id);
+        if (response.statusCode === 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Data Plant Section berhasil dihapus.',
+            });
+            doFilter();
+        } else {
+            NotifAlert({
+                icon: 'error',
+                title: 'Gagal',
+                message: response?.message || 'Gagal Menghapus Data Plant Section',
+            });
+        }
+    };
+
+    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 section by name or code..."
+                                    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>
+                            <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' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'sub_section_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllPlantSection}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListPlantSection;

src/pages/master/shift/IndexShift.jsx

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import ListShift from './component/ListShift';
+import DetailShift from './component/DetailShift';
+import { getAllShift } from '../../../api/master-shift';
+
+const IndexShift = () => {
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+    const [shiftData, setShiftData] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            const localData = localStorage.getItem('shiftData');
+            if (localData) {
+                setShiftData(JSON.parse(localData));
+            } else {
+                const response = await getAllShift();
+                if (response.data) {
+                    setShiftData(response.data.data);
+                    localStorage.setItem('shiftData', JSON.stringify(response.data.data));
+                }
+            }
+        } catch (error) {
+            console.error("Error fetching shift data:", error);
+        }
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const handleAddShift = (newShift) => {
+        const newData = { ...newShift, id: Date.now() }; // Simulate adding an ID
+        const updatedData = [newData, ...shiftData];
+        setShiftData(updatedData);
+        localStorage.setItem('shiftData', JSON.stringify(updatedData));
+        setActionMode('list');
+    };
+
+    const handleUpdateShift = (updatedShift) => {
+        const updatedData = shiftData.map(shift => shift.id === updatedShift.id ? updatedShift : shift);
+        setShiftData(updatedData);
+        localStorage.setItem('shiftData', JSON.stringify(updatedData));
+        setActionMode('list');
+    };
+
+    const handleDeleteShift = (id) => {
+        const updatedData = shiftData.filter(shift => shift.id !== id);
+        setShiftData(updatedData);
+        localStorage.setItem('shiftData', JSON.stringify(updatedData));
+    };
+
+
+    return (
+        <>
+            {actionMode === 'list' && (
+                <ListShift
+                    setActionMode={setActionMode}
+                    setSelectedData={setSelectedData}
+                    shiftData={shiftData}
+                    loading={loading}
+                    onDelete={handleDeleteShift}
+                    fetchData={fetchData}
+                />
+            )}
+            {(actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') && (
+                <DetailShift
+                    actionMode={actionMode}
+                    selectedData={selectedData}
+                    setActionMode={setActionMode}
+                    setSelectedData={setSelectedData}
+                    onAdd={handleAddShift}
+                    onUpdate={handleUpdateShift}
+                />
+            )}
+        </> 
+    );
+};
+
+export default IndexShift;

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

@@ -0,0 +1,193 @@
+import { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createShift, updateShift } from '../../../../api/master-shift';
+
+const { Text } = Typography;
+
+const DetailShift = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const readOnly = props.actionMode === 'preview';
+
+    const defaultData = {
+        id: '',
+        nama_shift: '',
+        jam_shift: '',
+        status: true, // default to active
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.nama_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Nama Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.jam_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Jam Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            nama_shift: FormData.nama_shift,
+            jam_shift: FormData.jam_shift,
+            status: FormData.status,
+        };
+
+        try {
+            if (FormData.id) {
+                props.onUpdate(payload);
+            } else {
+                props.onAdd(payload);
+            }
+            NotifOk({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Data Shift "${payload.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
+            });
+        } catch (error) {
+            console.error('Save Shift 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 handleStatusToggle = (checked) => {
+        setFormData({ ...FormData, status: checked });
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.actionMode, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`}
+            open={props.actionMode !== 'list'}
+            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',
+                                },
+                            },
+                        }}
+                    >
+                        {!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={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 style={{ marginBottom: 12 }}>
+                        <Text strong>Nama Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="nama_shift"
+                            value={FormData.nama_shift}
+                            onChange={handleInputChange}
+                            placeholder="Masukkan Nama Shift"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Jam Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="jam_shift"
+                            value={FormData.jam_shift}
+                            onChange={handleInputChange}
+                            placeholder="Contoh: 08:00 - 17:00"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailShift;

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

@@ -0,0 +1,183 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Input, ConfigProvider, Card, Tag, Table, Space } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    EyeOutlined,
+    SyncOutlined,
+} from '@ant-design/icons';
+import { NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+
+const ListShift = (props) => {
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
+        }
+    }, [navigate]);
+
+    const handleSearch = (value) => {
+        // This will be handled by the parent component if server-side search is needed
+        console.log('Search value:', value);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        // This will be handled by the parent component if server-side search is needed
+    };
+
+    const showPreviewModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (record) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
+            onConfirm: () => props.onDelete(record.id),
+        });
+    };
+
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Nama Shift',
+            dataIndex: 'nama_shift',
+            key: 'nama_shift',
+        },
+        {
+            title: 'Jam Shift',
+            dataIndex: 'jam_shift',
+            key: 'jam_shift',
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            align: 'center',
+            render: (status) => (
+                <Tag color={status ? 'green' : 'red'}>
+                    {status ? 'Active' : 'Inactive'}
+                </Tag>
+            ),
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            align: 'center',
+            width: '15%',
+            render: (_, record) => (
+                <Space>
+                    <Button
+                        icon={<EyeOutlined />}
+                        onClick={() => showPreviewModal(record)}
+                        style={{
+                            color: '#1890ff',
+                            borderColor: '#1890ff',
+                        }}
+                    />
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={() => showEditModal(record)}
+                        style={{
+                            color: '#faad14',
+                            borderColor: '#faad14',
+                        }}
+                    />
+                    <Button
+                        danger
+                        icon={<DeleteOutlined />}
+                        onClick={() => showDeleteDialog(record)}
+                        style={{
+                            borderColor: '#ff4d4f',
+                        }}
+                    />
+                </Space>
+            ),
+        },
+    ];
+
+    const filteredData = props.shiftData.filter(item => 
+        item.nama_shift.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
+    return (
+        <Card>
+            <Row justify="space-between" align="middle" gutter={[16, 16]}>
+                <Col xs={24} sm={12} md={10} lg={8}>
+                    <Input.Search
+                        placeholder="Cari nama shift..."
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        onSearch={handleSearch}
+                        allowClear={{
+                            clearIcon: <span onClick={handleSearchClear}>x</span>,
+                        }}
+                        enterButton={<Button type="primary" icon={<SearchOutlined />} style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}>Cari</Button>}
+                        size="large"
+                    />
+                </Col>
+                <Col>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#23A55A',
+                                    defaultHoverBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button
+                            icon={<PlusOutlined />}
+                            onClick={showAddModal}
+                            size="large"
+                        >
+                            Tambah Shift
+                        </Button>
+                    </ConfigProvider>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: 16 }}>
+                <Col span={24}>
+                    <Table 
+                        columns={columns} 
+                        dataSource={filteredData} 
+                        loading={props.loading} 
+                        rowKey="id"
+                    />
+                </Col>
+            </Row>
+        </Card>
+    );
+};
+
+export default memo(ListShift);

src/pages/master/status/IndexStatus.jsx

@@ -0,0 +1,167 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+import ListStatus from './component/ListStatus';
+import DetailStatus from './component/DetailStatus';
+
+import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
+
+const { Text } = Typography;
+
+// Mock Data
+const initialData = [
+    {
+        key: '3',
+        statusCode: 3,
+        statusName: 'Done',
+        description: 'Indicates that the process is complete.',
+    },
+    {
+        key: '1',
+        statusCode: 1,
+        statusName: 'Warning',
+        description: 'Indicates a warning condition.',
+    },
+    {
+        key: '2',
+        statusCode: 2,
+        statusName: 'Alarm',
+        description: 'Indicates an alarm condition.',
+    },
+    {
+        key: '4',
+        statusCode: 4,
+        statusName: 'Critical',
+        description: 'Indicates a critical condition.',
+    },
+];
+
+const IndexStatus = memo(function IndexStatus() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+
+    const [data, setData] = useState(initialData);
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [readOnly, setReadOnly] = useState(false);
+
+    // Mock API function
+    const getAllStatus = async (params) => {
+        const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
+        
+        let filteredData = data;
+        if (search) {
+            filteredData = data.filter(item => 
+                item.statusName.toLowerCase().includes(search.toLowerCase())
+            );
+        }
+
+        const start = (page - 1) * limit;
+        const end = start + limit;
+        const paginatedData = filteredData.slice(start, end);
+
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve({
+                    status: 200,
+                    data: {
+                        data: paginatedData,
+                        total: filteredData.length,
+                        paging: {
+                            page: parseInt(page),
+                            limit: parseInt(limit),
+                            total: filteredData.length,
+                        },
+                    },
+                });
+            }, 500);
+        });
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Status</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, [navigate, setBreadcrumbItems]);
+
+    useEffect(() => {
+        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
+            setIsModalVisible(true);
+            setReadOnly(actionMode === 'preview');
+        } else {
+            setIsModalVisible(false);
+        }
+    }, [actionMode]);
+
+    const handleDataSaved = (values) => {
+        let newData = [...data];
+        if (values.key) { // Editing
+            const index = newData.findIndex((item) => values.key === item.key);
+            if (index > -1) {
+                newData.splice(index, 1, values);
+            }
+        } else { // Adding
+            const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
+            newData = [{ key: newKey, ...values }, ...newData];
+        }
+        setData(newData);
+    };
+
+    const handleEdit = (record) => {
+        setSelectedData(record);
+        setActionMode('edit');
+    };
+
+    const handlePreview = (record) => {
+        setSelectedData(record);
+        setActionMode('preview');
+    };
+
+    const handleDelete = (record) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin ingin menghapus status "${record.statusName}"?`,
+            onConfirm: () => {
+                const newData = data.filter((item) => item.key !== record.key);
+                setData(newData);
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Status "${record.statusName}" berhasil dihapus.`,
+                });
+            },
+        });
+    };
+
+    return (
+        <React.Fragment>
+            <ListStatus
+                setActionMode={setActionMode}
+                handleEdit={handleEdit}
+                handleDelete={handleDelete}
+                handlePreview={handlePreview}
+                getAllStatus={getAllStatus}
+                data={data}
+            />
+            <DetailStatus
+                showModal={isModalVisible}
+                setActionMode={setActionMode}
+                selectedData={selectedData}
+                readOnly={readOnly}
+                onDataSaved={handleDataSaved}
+                setSelectedData={setSelectedData}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexStatus;

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

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Form } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const DetailStatus = (props) => {
+    const [form] = Form.useForm();
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        key: '',
+        statusCode: '',
+        statusName: '',
+        description: '',
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+        form.resetFields();
+    };
+
+    const handleSave = async () => {
+        try {
+            const values = await form.validateFields();
+            setConfirmLoading(true);
+
+            const payload = {
+                key: FormData.key,
+                ...values,
+            };
+
+            props.onDataSaved(payload);
+            
+            NotifOk({
+                icon: 'success',
+                title: 'Berhasil',
+                message: `Data Status "${payload.statusName}" berhasil ${
+                    payload.key ? 'diubah' : 'ditambahkan'
+                }.`,
+            });
+
+            setConfirmLoading(false);
+            props.setActionMode('list');
+            form.resetFields();
+        } catch (errorInfo) {
+            console.log('Failed:', errorInfo);
+        }
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+            form.setFieldsValue(props.selectedData);
+        } else {
+            setFormData(defaultData);
+            form.resetFields();
+        }
+    }, [props.showModal, props.selectedData, form]);
+
+    return (
+        <Modal
+            title={
+                <Text style={{ fontSize: '18px' }}>
+                    {props.actionMode === 'add'
+                        ? 'Tambah Data'
+                        : props.actionMode === 'preview'
+                        ? 'Preview Status'
+                        : 'Edit Status'}
+                </Text>
+            }
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={
+                !props.readOnly && (
+                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
+                        <ConfigProvider
+                            theme={{
+                                token: { colorPrimary: '#23A55A' },
+                                components: {
+                                    Button: {
+                                        defaultBg: 'white',
+                                        defaultColor: '#23A55A',
+                                        defaultBorderColor: '#23A55A',
+                                        defaultHoverColor: 'white',
+                                        defaultHoverBg: '#23A55A',
+                                        defaultHoverBorderColor: '#23A55A',
+                                    },
+                                },
+                            }}
+                        >
+                            <Button onClick={handleCancel}>Batal</Button>
+                        </ConfigProvider>
+                        <ConfigProvider
+                            theme={{
+                                token: { colorPrimary: '#23A55A' },
+                                components: {
+                                    Button: {
+                                        defaultBg: '#23A55A',
+                                        defaultColor: 'white',
+                                        defaultBorderColor: '#23A55A',
+                                        defaultHoverColor: 'white',
+                                        defaultHoverBg: '#23A55A',
+                                        defaultHoverBorderColor: '#23A55A',
+                                    },
+                                },
+                            }}
+                        >
+                            <Button type="primary" loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        </ConfigProvider>
+                    </div>
+                )
+            }
+        >
+            <Divider />
+            <Form form={form} layout="vertical" name="detailStatusForm">
+                <Form.Item
+                    name="statusCode"
+                    label={<Text strong>Status Code</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan kode status!' }]}
+                >
+                    <InputNumber
+                        placeholder="Masukan code status"
+                        readOnly={props.readOnly}
+                        style={{ width: '100%' }}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="statusName"
+                    label={<Text strong>Status Name</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan nama status!' }]}
+                >
+                    <Input
+                        placeholder="Masukan nama status"
+                        readOnly={props.readOnly}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="description"
+                    label={<Text strong>Description</Text>}
+                    rules={[{ required: true, message: 'Silakan masukkan deskripsi!' }]}
+                >
+                    <TextArea
+                        placeholder="Masukan deskripsi"
+                        readOnly={props.readOnly}
+                        rows={4}
+                    />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+
+export default DetailStatus;

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Card, Button, Row, Col, Typography, Space, ConfigProvider } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+
+const { Title, Text } = Typography;
+
+const ListStatus = ({
+    setActionMode,
+    handleEdit,
+    handleDelete,
+    handlePreview,
+    data,
+}) => {
+
+    const getCardStyle = (statusName) => {
+        let color;
+        switch (statusName.toLowerCase()) {
+            case 'done':
+                color = '#52c41a'; // green
+                break;
+            case 'warning':
+                color = '#faad14'; // orange
+                break;
+            case 'alarm':
+                color = '#f5222d'; // red
+                break;
+            case 'critical':
+                color = '#000000'; // black
+                break;
+            default:
+                color = '#d9d9d9'; // default antd border color
+        }
+        return { border: `2px solid ${color}` };
+    };
+
+    const getTitleStyle = (statusName) => {
+        let backgroundColor;
+        switch (statusName.toLowerCase()) {
+            case 'done':
+                backgroundColor = '#52c41a'; // green
+                break;
+            case 'warning':
+                backgroundColor = '#faad14'; // orange
+                break;
+            case 'alarm':
+                backgroundColor = '#f5222d'; // red
+                break;
+            case 'critical':
+                backgroundColor = '#000000'; // black
+                break;
+            default:
+                backgroundColor = 'transparent';
+        }
+        return {
+            backgroundColor,
+            color: '#fff',
+            padding: '2px 8px',
+            borderRadius: '4px',
+            display: 'inline-block'
+        };
+    };
+
+    return (
+        <div style={{ padding: 24, minHeight: 360 }}>
+            <Row justify="end" style={{ marginBottom: 16 }}>
+                <Col>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#23A55A',
+                                    defaultHoverBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button 
+                            icon={<PlusOutlined />} 
+                            onClick={() => setActionMode('add')}
+                        >
+                            Tambah Data
+                        </Button>
+                    </ConfigProvider>
+                </Col>
+            </Row>
+            <Row gutter={[16, 16]}>
+                {data.map(item => (
+                    <Col xs={24} sm={12} md={8} lg={6} key={item.key}>
+                        <Card
+                            title={<span style={getTitleStyle(item.statusName)}>{item.statusName}</span>}
+                            style={getCardStyle(item.statusName)}
+                            actions={[
+                                <Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
+                                    <Button style={{ border: '1px solid #1890ff', color: '#1890ff', borderRadius: '6px', padding: '4px 8px' }} icon={<EyeOutlined />} onClick={() => handlePreview(item)} />
+                                    <Button style={{ border: '1px solid #faad14', color: '#faad14', borderRadius: '6px', padding: '4px 8px' }} icon={<EditOutlined />} onClick={() => handleEdit(item)} />
+                                    <Button danger style={{ border: '1px solid red', borderRadius: '6px', padding: '4px 8px' }} icon={<DeleteOutlined />} onClick={() => handleDelete(item)} />
+                                </Space>
+                            ]}
+                        >
+                            <p><Text strong>Code:</Text> {item.statusCode}</p>
+                            <p><Text strong>Description:</Text> {item.description}</p>
+                        </Card>
+                    </Col>
+                ))}
+            </Row>
+        </div>
+    );
+};
+
+export default ListStatus;

src/pages/master/tag/IndexTag.jsx

@@ -0,0 +1,76 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListTag from './component/ListTag';
+import DetailTag from './component/DetailTag';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexTag = memo(function IndexTag() {
+    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) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Tag</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ListTag
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailTag
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexTag;

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

@@ -0,0 +1,627 @@
+import { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Button, ConfigProvider, Switch, Select } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
+import { getAllDevice } from '../../../../api/master-device';
+import { getAllPlantSection } from '../../../../api/master-plant-section';
+import { getAllUnit } from '../../../../api/master-unit';
+
+const { Text } = Typography;
+
+const DetailTag = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [deviceList, setDeviceList] = useState([]);
+    const [loadingDevices, setLoadingDevices] = useState(false);
+    const [plantSubSectionList, setPlantSubSectionList] = useState([]);
+    const [loadingPlantSubSections, setLoadingPlantSubSections] = useState(false);
+    const [unitList, setUnitList] = useState([]);
+    const [loadingUnits, setLoadingUnits] = useState(false);
+
+    const defaultData = {
+        tag_id: '',
+
+        tag_name: '',
+        tag_number: '',
+        data_type: '',
+        unit: '',
+        is_active: true,
+        is_alarm: false,
+        device_id: null,
+
+        sub_section_id: null,
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        // Validasi required fields untuk CREATE
+        if (!FormData.tag_name || FormData.tag_name.trim() === '') {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Tag Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.tag_number || FormData.tag_number === '') {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Tag Number Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Validasi format number untuk tag_number
+        const tagNumberInt = parseInt(FormData.tag_number);
+        if (isNaN(tagNumberInt)) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Tag Number harus berupa angka yang valid',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Validasi duplicate tag_number
+        try {
+            const params = new URLSearchParams({ limit: 10000 }); // Get all tags
+            const response = await getAllTag(params);
+
+            if (response && response.data && response.data.data) {
+                const existingTags = response.data.data;
+
+                // Check if tag_number already exists (exclude current tag when editing)
+                const isDuplicate = existingTags.some((tag) => {
+                    const isSameNumber = parseInt(tag.tag_number) === tagNumberInt;
+                    const isDifferentTag = FormData.tag_id ? tag.tag_id !== FormData.tag_id : true;
+                    return isSameNumber && isDifferentTag;
+                });
+
+                if (isDuplicate) {
+                    NotifOk({
+                        icon: 'warning',
+                        title: 'Peringatan',
+                        message: `Tag Number ${tagNumberInt} sudah digunakan. Silakan gunakan nomor yang berbeda.`,
+                    });
+                    setConfirmLoading(false);
+                    return;
+                }
+            }
+        } catch (error) {
+            console.error('Error checking duplicate tag number:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memvalidasi Tag Number. Silakan coba lagi.',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.data_type || FormData.data_type.trim() === '') {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Data Type Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Validasi data type harus Diskrit atau Analog
+        const validDataTypes = ['Diskrit', 'Analog'];
+        if (!validDataTypes.includes(FormData.data_type)) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: `Data Type harus "Diskrit" atau "Analog". Nilai "${FormData.data_type}" tidak valid. Silakan pilih dari dropdown.`,
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.unit || FormData.unit.trim() === '') {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Unit Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Device validation
+        if (!FormData.device_id) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Device harus dipilih',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        // Prepare payload berdasarkan backend validation schema
+        const payload = {
+            tag_name: FormData.tag_name.trim(),
+            tag_number: parseInt(FormData.tag_number),
+            data_type: FormData.data_type,
+            unit: FormData.unit.trim(),
+            is_active: FormData.is_active,
+            is_alarm: FormData.is_alarm,
+            device_id: parseInt(FormData.device_id),
+        };
+
+        // Add sub_section_id only if it's selected
+        if (FormData.sub_section_id) {
+            payload.sub_section_id = parseInt(FormData.sub_section_id);
+        }
+
+        // Debug logging
+
+        try {
+            let response;
+
+            if (FormData.tag_id) {
+                // Update existing tag
+                response = await updateTag(FormData.tag_id, payload);
+            } else {
+                // Create new tag
+                response = await createTag(payload);
+            }
+
+            // Check if response is successful
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message:
+                        response.message ||
+                        `Data Tag "${response.data?.tag_name || FormData.tag_name}" berhasil ${
+                            FormData.tag_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 Tag Error:', error);
+            console.error('Error details:', 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 handleDeviceChange = (deviceId) => {
+        const selectedDevice = deviceList.find((device) => device.device_id === deviceId);
+        setFormData({
+            ...FormData,
+            device_id: deviceId,
+        });
+    };
+
+    const handleStatusToggle = (isChecked) => {
+        setFormData({
+            ...FormData,
+            is_active: isChecked,
+        });
+    };
+
+    const handleAlarmToggle = (isChecked) => {
+        setFormData({
+            ...FormData,
+            is_alarm: isChecked,
+        });
+    };
+
+    const loadDevices = async () => {
+        setLoadingDevices(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000 });
+            const response = await getAllDevice(params);
+
+            if (response && response.data && response.data.data) {
+                const devices = response.data.data;
+
+                // Filter hanya device yang active (is_active === true)
+                const activeDevices = devices.filter((device) => device.is_active === true);
+
+                setDeviceList(activeDevices);
+            }
+        } catch (error) {
+            console.error('Error loading devices:', error);
+        } finally {
+            setLoadingDevices(false);
+        }
+    };
+
+    const loadPlantSubSections = async () => {
+        setLoadingPlantSubSections(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000 });
+            const response = await getAllPlantSection(params);
+
+            if (response && response.data && response.data.data) {
+                // Filter hanya plant sub section yang active
+                const activePlantSubSections = response.data.data.filter(
+                    (section) => section.is_active === true
+                );
+                setPlantSubSectionList(activePlantSubSections);
+            }
+        } catch (error) {
+            console.error('Error loading plant sub sections:', error);
+        } finally {
+            setLoadingPlantSubSections(false);
+        }
+    };
+
+    const loadUnits = async () => {
+        setLoadingUnits(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000 });
+            const response = await getAllUnit(params);
+
+            if (response && response.data && response.data.data) {
+                const units = response.data.data;
+
+                // Filter hanya unit yang active (is_active === true)
+                const activeUnits = units.filter((unit) => unit.is_active === true);
+
+                setUnitList(activeUnits);
+            }
+        } catch (error) {
+            console.error('Error loading units:', error);
+        } finally {
+            setLoadingUnits(false);
+        }
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.showModal) {
+                // Load devices, plant sub sections, and units when modal opens
+                loadDevices();
+                loadPlantSubSections();
+                loadUnits();
+            }
+
+            if (props.selectedData != null) {
+                // Only set fields that are in defaultData to avoid sending extra fields
+                const filteredData = {
+                    tag_id: props.selectedData.tag_id || '',
+                    tag_code: props.selectedData.tag_code || '',
+                    tag_name: props.selectedData.tag_name || '',
+                    tag_number: props.selectedData.tag_number || '',
+                    data_type: props.selectedData.data_type || '',
+                    unit: props.selectedData.unit || '',
+                    is_active: props.selectedData.is_active ?? true,
+                    is_alarm: props.selectedData.is_alarm ?? false,
+                    device_id: props.selectedData.device_id || null,
+                    device_code: props.selectedData.device_code || '',
+                    device_name: props.selectedData.device_name || '',
+                    sub_section_id: props.selectedData.sub_section_id || null,
+                };
+                setFormData(filteredData);
+            } 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'
+            } Tag`}
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={[
+                <>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#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 hidden>
+                        <Text strong>Tag ID</Text>
+                        <Input
+                            name="tag_id"
+                            value={FormData.tag_id}
+                            onChange={handleInputChange}
+                            disabled
+                        />
+                    </div>
+                    {/* Tag Code hanya ditampilkan saat EDIT atau PREVIEW */}
+                    {(props.actionMode === 'edit' || props.actionMode === 'preview') && (
+                        <div style={{ marginBottom: 12 }}>
+                            <Text strong>Tag Code</Text>
+                            <Input
+                                name="tag_code"
+                                value={FormData.tag_code}
+                                onChange={handleInputChange}
+                                placeholder="Auto Generate"
+                                disabled
+                            />
+                        </div>
+                    )}
+                    {/* Status dan Alarm dalam satu baris */}
+                    <div style={{ marginBottom: 12 }}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                gap: '16px',
+                            }}
+                        >
+                            {/* Status Toggle */}
+                            <div style={{ flex: 1 }}>
+                                <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 === true
+                                                        ? '#23A55A'
+                                                        : '#bfbfbf',
+                                            }}
+                                            checked={FormData.is_active === true}
+                                            onChange={handleStatusToggle}
+                                        />
+                                    </div>
+                                    <div>
+                                        <Text>
+                                            {FormData.is_active === true ? 'Active' : 'Inactive'}
+                                        </Text>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* Alarm Toggle */}
+                            <div style={{ flex: 1 }}>
+                                <div>
+                                    <Text strong>Alarm</Text>
+                                    <Text style={{ color: 'red' }}> *</Text>
+                                </div>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        marginTop: '8px',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}>
+                                        <Switch
+                                            disabled={props.readOnly}
+                                            style={{
+                                                backgroundColor:
+                                                    FormData.is_alarm === true
+                                                        ? '#23A55A'
+                                                        : '#bfbfbf',
+                                            }}
+                                            checked={FormData.is_alarm === true}
+                                            onChange={handleAlarmToggle}
+                                        />
+                                    </div>
+                                    <div>
+                                        <Text>{FormData.is_alarm === true ? 'Yes' : 'No'}</Text>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Tag Number</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="tag_number"
+                            value={FormData.tag_number}
+                            onChange={handleInputChange}
+                            placeholder="Enter Tag Number"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Tag Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="tag_name"
+                            value={FormData.tag_name}
+                            onChange={handleInputChange}
+                            placeholder="Enter Tag Name"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Data Type</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Select Data Type"
+                            value={FormData.data_type || undefined}
+                            onChange={(value) => handleSelectChange('data_type', value)}
+                            disabled={props.readOnly}
+                        >
+                            <Select.Option value="Diskrit">Diskrit</Select.Option>
+                            <Select.Option value="Analog">Analog</Select.Option>
+                        </Select>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Unit</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Select Unit"
+                            value={FormData.unit || undefined}
+                            onChange={(value) => handleSelectChange('unit', value)}
+                            disabled={props.readOnly}
+                            loading={loadingUnits}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {unitList.map((unit) => (
+                                <Select.Option key={unit.unit_id} value={unit.unit_name}>
+                                    {`${unit.unit_code || ''} - ${unit.unit_name || ''}`}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Plant Sub Section</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Select Plant Sub Section"
+                            value={FormData.sub_section_id || undefined}
+                            onChange={(value) => handleSelectChange('sub_section_id', value)}
+                            disabled={props.readOnly}
+                            loading={loadingPlantSubSections}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {plantSubSectionList.map((section) => (
+                                <Select.Option
+                                    key={section.sub_section_id}
+                                    value={section.sub_section_id}
+                                >
+                                    {section.sub_section_name || ''}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Device</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Select Device"
+                            value={FormData.device_id || undefined}
+                            onChange={handleDeviceChange}
+                            disabled={props.readOnly}
+                            loading={loadingDevices}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {deviceList.map((device) => (
+                                <Select.Option key={device.device_id} value={device.device_id}>
+                                    {`${device.device_code || ''} - ${device.device_name || ''}`}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+                    {/* Device ID hidden - value dari dropdown */}
+                    <input type="hidden" name="device_id" value={FormData.device_id || ''} />
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailTag;

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

@@ -0,0 +1,302 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import TableList from '../../../../components/Global/TableList';
+import { getAllTag, deleteTag } from '../../../../api/master-tag';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'ID',
+        dataIndex: 'tag_id',
+        key: 'tag_id',
+        width: '5%',
+        hidden: true,
+    },
+    {
+        title: 'Tag Code',
+        dataIndex: 'tag_code',
+        key: 'tag_code',
+        width: '10%',
+    },
+    {
+        title: 'Tag Name',
+        dataIndex: 'tag_name',
+        key: 'tag_name',
+        width: '15%',
+    },
+    {
+        title: 'Tag Number',
+        dataIndex: 'tag_number',
+        key: 'tag_number',
+        width: '10%',
+        align: 'center',
+    },
+    {
+        title: 'Data Type',
+        dataIndex: 'data_type',
+        key: 'data_type',
+        width: '10%',
+    },
+    {
+        title: 'Unit',
+        dataIndex: 'unit',
+        key: 'unit',
+        width: '8%',
+    },
+    {
+        title: 'Sub Section',
+        dataIndex: 'sub_section_name',
+        key: 'sub_section_name',
+        width: '12%',
+        render: (text) => text || '-',
+    },
+    {
+        title: 'Device',
+        dataIndex: 'device_name',
+        key: 'device_name',
+        width: '12%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '8%',
+        align: 'center',
+        render: (_, { is_active }) => {
+            const color = is_active ? 'green' : 'red';
+            const text = is_active ? 'Active' : 'Inactive';
+            return (
+                <Tag color={color} key={'status'}>
+                    {text}
+                </Tag>
+            );
+        },
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '15%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    icon={<EyeOutlined />}
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    type="text"
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    type="text"
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListTag = memo(function ListTag(props) {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = {
+        criteria: '', // Global search (OR condition)
+        name: '',
+        code: '',
+        data: '',
+        unit: '',
+        device: '',
+        subsection: '',
+    };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode == 'list') {
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter((prev) => ({ ...prev, criteria: searchValue }));
+        doFilter();
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter((prev) => ({ ...prev, criteria: '' }));
+        doFilter();
+    };
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    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.tag_name + '" ?',
+            onConfirm: () => handleDelete(param.tag_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (tag_id) => {
+        try {
+            const response = await deleteTag(tag_id);
+
+            if (response && response.statusCode === 200) {
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: response.message || 'Data Tag berhasil dihapus.',
+                });
+                // Refresh table
+                doFilter();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menghapus data.',
+                });
+            }
+        } catch (error) {
+            console.error('Delete Tag Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
+            });
+        }
+    };
+
+    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 tag by code, name, or type..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        // Auto search when clearing by backspace/delete
+                                        if (value === '') {
+                                            handleSearchClear();
+                                        }
+                                    }}
+                                    onSearch={handleSearch}
+                                    allowClear
+                                    onClear={handleSearchClear}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Data
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'tag_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllTag}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListTag;

src/pages/master/unit/IndexUnit.jsx

@@ -0,0 +1,76 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListUnit from './component/ListUnit';
+import DetailUnit from './component/DetailUnit';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexUnit = memo(function IndexUnit() {
+    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) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Unit</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ListUnit
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailUnit
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexUnit;

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

@@ -0,0 +1,253 @@
+import { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Button, ConfigProvider, Switch } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createUnit, updateUnit } from '../../../../api/master-unit';
+
+const { Text } = Typography;
+
+const DetailUnit = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        unit_id: '',
+        unit_code: '',
+        unit_name: '',
+        is_active: true,
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        // Validasi required fields
+        if (!FormData.unit_name || FormData.unit_name.trim() === '') {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        try {
+            if (FormData.unit_id) {
+                // Update existing unit
+                const payload = {
+                    name: FormData.unit_name,
+                    is_active: FormData.is_active,
+                };
+
+                const response = await updateUnit(FormData.unit_id, payload);
+                console.log('updateUnit response:', response);
+
+                if (response.statusCode === 200) {
+                    // Get updated data to show unit_code in notification
+                    const unitCode = response.data?.unit_code || FormData.unit_code;
+                    NotifOk({
+                        icon: 'success',
+                        title: 'Berhasil',
+                        message: `Data Unit "${unitCode} - ${FormData.unit_name}" berhasil diubah.`,
+                    });
+                    props.setActionMode('list');
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Gagal',
+                        message: response.message || 'Gagal mengubah data Unit.',
+                    });
+                }
+            } else {
+                // Create new unit
+                const payload = {
+                    name: FormData.unit_name,
+                    is_active: FormData.is_active,
+                };
+
+                const response = await createUnit(payload);
+                console.log('createUnit response:', response);
+
+                if (response.statusCode === 200 || response.statusCode === 201) {
+                    // Get unit_code from response
+                    const unitCode = response.data?.unit_code || 'N/A';
+                    NotifOk({
+                        icon: 'success',
+                        title: 'Berhasil',
+                        message: `Data Unit "${unitCode} - ${FormData.unit_name}" berhasil ditambahkan.`,
+                    });
+                    props.setActionMode('list');
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Gagal',
+                        message: response.message || 'Gagal menambahkan data Unit.',
+                    });
+                }
+            }
+        } catch (error) {
+            console.error('Save Unit Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan saat menyimpan data.',
+            });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    const handleStatusToggle = (isChecked) => {
+        setFormData({
+            ...FormData,
+            is_active: isChecked,
+        });
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.selectedData != null) {
+                // Only set fields that are in defaultData
+                const filteredData = {
+                    unit_id: props.selectedData.unit_id || '',
+                    unit_code: props.selectedData.unit_code || '',
+                    unit_name: props.selectedData.unit_name || '',
+                    is_active: props.selectedData.is_active ?? true,
+                };
+                setFormData(filteredData);
+            } else {
+                setFormData(defaultData);
+            }
+        }
+    }, [props.showModal]);
+
+    return (
+        <Modal
+            title={`${
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Unit`}
+            open={props.showModal}
+            onCancel={handleCancel}
+            footer={[
+                <>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#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>
+                    {/* Status Toggle */}
+                    <div style={{ marginBottom: 12 }}>
+                        <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 === true
+                                                ? '#23A55A'
+                                                : '#bfbfbf',
+                                    }}
+                                    checked={FormData.is_active === true}
+                                    onChange={handleStatusToggle}
+                                />
+                            </div>
+                            <div>
+                                <Text>
+                                    {FormData.is_active === true ? 'Active' : 'Inactive'}
+                                </Text>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Unit Code - Display only for edit/preview */}
+                    {FormData.unit_code && (
+                        <div style={{ marginBottom: 12 }}>
+                            <Text strong>Unit Code</Text>
+                            <Input
+                                name="unit_code"
+                                value={FormData.unit_code}
+                                disabled
+                            />
+                        </div>
+                    )}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Name</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="unit_name"
+                            value={FormData.unit_name}
+                            onChange={handleInputChange}
+                            placeholder="Enter Unit Name"
+                            readOnly={props.readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailUnit;

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

@@ -0,0 +1,276 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import TableList from '../../../../components/Global/TableList';
+import { getAllUnit, deleteUnit } from '../../../../api/master-unit';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Unit Code',
+        dataIndex: 'unit_code',
+        key: 'unit_code',
+        width: '20%',
+    },
+    {
+        title: 'Name',
+        dataIndex: 'unit_name',
+        key: 'unit_name',
+        width: '20%',
+    },
+    {
+        title: 'Status',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '10%',
+        align: 'center',
+        render: (_, { is_active }) => {
+            const color = is_active ? 'green' : 'red';
+            const text = is_active ? 'Active' : 'Inactive';
+            return (
+                <Tag color={color} key={'status'}>
+                    {text}
+                </Tag>
+            );
+        },
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '20%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    icon={<EyeOutlined />}
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    type="text"
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    type="text"
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListUnit = memo(function ListUnit(props) {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = {
+        criteria: '',
+    };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode == 'list') {
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter((prev) => ({ ...prev, criteria: searchValue }));
+        doFilter();
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter((prev) => ({ ...prev, criteria: '' }));
+        doFilter();
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    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.unit_code} - ${param.unit_name}" ?`,
+            onConfirm: () => handleDelete(param),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (param) => {
+        try {
+            const response = await deleteUnit(param.unit_id);
+            console.log('deleteUnit response:', response);
+
+            if (response.statusCode === 200) {
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Unit "${param.unit_code} - ${param.unit_name}" berhasil dihapus.`,
+                });
+                // Refresh table
+                doFilter();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response.message || 'Gagal menghapus data Unit.',
+                });
+            }
+        } catch (error) {
+            console.error('Delete Unit Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan saat menghapus data.',
+            });
+        }
+    };
+
+    // Function untuk dipanggil dari DetailUnit setelah create/update
+    const refreshData = () => {
+        doFilter();
+    };
+
+    // Pass refresh function to props
+    if (props.setRefreshData) {
+        props.setRefreshData(refreshData);
+    }
+
+    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 unit by code or name..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        // Auto search when clearing by backspace/delete
+                                        if (value === '') {
+                                            handleSearchClear();
+                                        }
+                                    }}
+                                    onSearch={handleSearch}
+                                    allowClear
+                                    onClear={handleSearchClear}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Data
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'unit_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getAllUnit}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListUnit;

src/pages/notification/IndexNotification.jsx

@@ -0,0 +1,72 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Form, Typography } from 'antd';
+import ListNotification from './component/ListNotification';
+import DetailNotification from './component/DetailNotification';
+
+const { Text } = Typography;
+
+const IndexNotification = memo(function IndexNotification() {
+    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' }}>
+                            • Notifikasi
+                        </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>
+            <ListNotification
+                actionMode={actionMode}
+                setActionMode={setActionMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+            />
+            <DetailNotification
+                visible={isModalVisible}
+                onCancel={handleCancel}
+                form={form}
+                selectedData={selectedData}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexNotification;

src/pages/notification/component/DetailNotification.jsx

@@ -0,0 +1,169 @@
+import React, { memo } from 'react';
+import { Modal, Row, Col, Tag, Divider } from 'antd';
+import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
+
+const DetailNotification = memo(function DetailNotification({ visible, onCancel, form, selectedData }) {
+    const getIconAndColor = (type) => {
+        switch (type) {
+            case 'critical':
+                return {
+                    IconComponent: CloseCircleFilled,
+                    color: '#ff4d4f',
+                    bgColor: '#fff1f0',
+                    tagColor: 'error',
+                };
+            case 'warning':
+                return {
+                    IconComponent: WarningFilled,
+                    color: '#faad14',
+                    bgColor: '#fffbe6',
+                    tagColor: 'warning',
+                };
+            case 'resolved':
+                return {
+                    IconComponent: CheckCircleFilled,
+                    color: '#52c41a',
+                    bgColor: '#f6ffed',
+                    tagColor: 'success',
+                };
+            default:
+                return {
+                    IconComponent: InfoCircleFilled,
+                    color: '#1890ff',
+                    bgColor: '#e6f7ff',
+                    tagColor: 'processing',
+                };
+        }
+    };
+
+    const { IconComponent, color, bgColor, tagColor } = selectedData ? getIconAndColor(selectedData.type) : {};
+
+    return (
+        <Modal
+            title="Detail Notifikasi"
+            open={visible}
+            onCancel={onCancel}
+            onOk={onCancel}
+            okText="Tutup"
+            cancelButtonProps={{ style: { display: 'none' } }}
+            width={700}
+        >
+            {selectedData && (
+                <div>
+                    {/* Header with Icon and Status */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '16px',
+                            marginBottom: '24px',
+                            padding: '16px',
+                            backgroundColor: '#fafafa',
+                            borderRadius: '8px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                width: '64px',
+                                height: '64px',
+                                borderRadius: '50%',
+                                backgroundColor: bgColor,
+                                color: color,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontSize: '32px',
+                                flexShrink: 0,
+                            }}
+                        >
+                            {IconComponent && <IconComponent style={{ fontSize: '32px' }} />}
+                        </div>
+                        <div style={{ flex: 1 }}>
+                            <Tag color={tagColor} style={{ marginBottom: '8px', fontSize: '12px' }}>
+                                {selectedData.type.toUpperCase()}
+                            </Tag>
+                            <div style={{ fontSize: '16px', fontWeight: 600, color: '#262626' }}>
+                                {selectedData.title}
+                            </div>
+                        </div>
+                    </div>
+
+                    <Divider style={{ margin: '16px 0' }} />
+
+                    {/* Information Grid */}
+                    <Row gutter={[16, 16]}>
+                        <Col span={12}>
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                                    PLC
+                                </div>
+                                <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                                    {selectedData.plc}
+                                </div>
+                            </div>
+                        </Col>
+                        <Col span={12}>
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>Tag</div>
+                                <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                                    {selectedData.tag}
+                                </div>
+                            </div>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={[16, 16]}>
+                        <Col span={12}>
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                                    Engineer
+                                </div>
+                                <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                                    {selectedData.engineer}
+                                </div>
+                            </div>
+                        </Col>
+                        <Col span={12}>
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                                    Waktu
+                                </div>
+                                <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                                    {selectedData.time}
+                                </div>
+                            </div>
+                        </Col>
+                    </Row>
+
+                    <Divider style={{ margin: '16px 0' }} />
+
+                    {/* Status */}
+                    <div style={{ marginBottom: '16px' }}>
+                        <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>Status</div>
+                        <Tag color={selectedData.isRead ? 'default' : 'blue'}>
+                            {selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
+                        </Tag>
+                    </div>
+
+                    {/* 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> Notifikasi ini telah dikirim ke engineer yang bersangkutan
+                            untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+});
+
+export default DetailNotification;

src/pages/notification/component/ListNotification.jsx

@@ -0,0 +1,399 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Row, Col, Card, Badge } from 'antd';
+import {
+    CloseCircleFilled,
+    WarningFilled,
+    CheckCircleFilled,
+    InfoCircleFilled,
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+
+// Dummy data untuk notifikasi
+const initialNotifications = [
+    {
+        id: 1,
+        type: 'critical',
+        title: 'Compressor Unit A - Overheat detected (85°C)',
+        plc: 'PLC-001',
+        tag: 'A1-TEMP',
+        engineer: 'Siti Nurhaliza',
+        time: '2 menit lalu',
+        status: 'unread',
+        isRead: false,
+    },
+    {
+        id: 2,
+        type: 'warning',
+        title: 'Compressor Unit C - Pressure slightly high (7.2 bar)',
+        plc: 'PLC-003',
+        tag: 'C3-PRESS',
+        engineer: 'Joko Widodo',
+        time: '15 menit lalu',
+        status: 'unread',
+        isRead: false,
+    },
+    {
+        id: 3,
+        type: 'resolved',
+        title: 'Compressor Unit B - Vibration issue resolved',
+        plc: 'PLC-002',
+        tag: 'B2-VIB',
+        engineer: 'Rudi Santoso',
+        time: '1 jam lalu',
+        status: 'read',
+        isRead: true,
+    },
+    {
+        id: 4,
+        type: 'critical',
+        title: 'Compressor Unit E - Low oil pressure (1.5 bar)',
+        plc: 'PLC-005',
+        tag: 'E1-OIL',
+        engineer: 'Ahmad Yani',
+        time: '2 jam lalu',
+        status: 'unread',
+        isRead: false,
+    },
+    {
+        id: 5,
+        type: 'warning',
+        title: 'Compressor Unit D - Temperature rising (78°C)',
+        plc: 'PLC-004',
+        tag: 'D2-TEMP',
+        engineer: 'Budi Santoso',
+        time: '3 jam lalu',
+        status: 'read',
+        isRead: true,
+    },
+    {
+        id: 6,
+        type: 'resolved',
+        title: 'Compressor Unit F - Maintenance completed',
+        plc: 'PLC-006',
+        tag: 'F1-MAIN',
+        engineer: 'Dewi Lestari',
+        time: '5 jam lalu',
+        status: 'read',
+        isRead: true,
+    },
+];
+
+const ListNotification = memo(function ListNotification(props) {
+    const [notifications, setNotifications] = useState(initialNotifications);
+    const [activeTab, setActiveTab] = useState('all');
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
+        }
+    }, [navigate]);
+
+    const getIconAndColor = (type) => {
+        switch (type) {
+            case 'critical':
+                return {
+                    IconComponent: CloseCircleFilled,
+                    color: '#ff4d4f',
+                    bgColor: '#fff1f0',
+                };
+            case 'warning':
+                return {
+                    IconComponent: WarningFilled,
+                    color: '#faad14',
+                    bgColor: '#fffbe6',
+                };
+            case 'resolved':
+                return {
+                    IconComponent: CheckCircleFilled,
+                    color: '#52c41a',
+                    bgColor: '#f6ffed',
+                };
+            default:
+                return {
+                    IconComponent: InfoCircleFilled,
+                    color: '#1890ff',
+                    bgColor: '#e6f7ff',
+                };
+        }
+    };
+
+    const filterNotifications = (status) => {
+        if (status === 'all') return notifications;
+        if (status === 'unread') return notifications.filter((n) => !n.isRead);
+        if (status === 'read') return notifications.filter((n) => n.isRead);
+        return notifications;
+    };
+
+    const getUnreadCount = () => {
+        return notifications.filter((n) => !n.isRead).length;
+    };
+
+    const handleViewDetail = (notification) => {
+        props.setSelectedData(notification);
+        props.setActionMode('preview');
+
+        // Mark as read
+        setNotifications((prev) =>
+            prev.map((n) => (n.id === notification.id ? { ...n, isRead: true, status: 'read' } : n))
+        );
+    };
+
+    const filteredNotifications = filterNotifications(activeTab);
+
+    const tabButtonStyle = (isActive) => ({
+        padding: '12px 16px',
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: 500,
+        color: isActive ? '#FF6B35' : '#595959',
+        borderBottom: isActive ? '2px solid #FF6B35' : '2px solid transparent',
+        marginBottom: '-1px',
+        transition: 'all 0.3s',
+    });
+
+    return (
+        <React.Fragment>
+            <Card>
+                <Row>
+                    <Col xs={24}>
+                        <h2
+                            style={{
+                                fontSize: '20px',
+                                fontWeight: 600,
+                                margin: '0 0 4px 0',
+                                color: '#262626',
+                            }}
+                        >
+                            Notifikasi
+                        </h2>
+                        <p style={{ margin: '0 0 24px 0', color: '#8c8c8c', fontSize: '14px' }}>
+                            Riwayat notifikasi yang dikirim ke engineer
+                        </p>
+
+                        {/* Tabs */}
+                        <div style={{ borderBottom: '1px solid #f0f0f0', marginBottom: '24px' }}>
+                            <div style={{ display: 'flex', gap: '8px' }}>
+                                <button
+                                    onClick={() => setActiveTab('all')}
+                                    style={tabButtonStyle(activeTab === 'all')}
+                                >
+                                    Semua
+                                </button>
+                                <button
+                                    onClick={() => setActiveTab('unread')}
+                                    style={{
+                                        ...tabButtonStyle(activeTab === 'unread'),
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px',
+                                    }}
+                                >
+                                    Belum Dibaca
+                                    {getUnreadCount() > 0 && (
+                                        <Badge
+                                            count={getUnreadCount()}
+                                            style={{
+                                                backgroundColor: '#ff4d4f',
+                                            }}
+                                        />
+                                    )}
+                                </button>
+                                <button
+                                    onClick={() => setActiveTab('read')}
+                                    style={tabButtonStyle(activeTab === 'read')}
+                                >
+                                    Sudah Dibaca
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Notification List */}
+                        <div>
+                            {filteredNotifications.length === 0 ? (
+                                <div
+                                    style={{
+                                        textAlign: 'center',
+                                        padding: '40px 0',
+                                        color: '#8c8c8c',
+                                    }}
+                                >
+                                    Tidak ada notifikasi
+                                </div>
+                            ) : (
+                                filteredNotifications.map((notification) => {
+                                    const { IconComponent, color, bgColor } = getIconAndColor(
+                                        notification.type
+                                    );
+
+                                    return (
+                                        <div
+                                            key={notification.id}
+                                            style={{
+                                                marginBottom: '12px',
+                                                backgroundColor: '#ffffff',
+                                                border: '1px solid #f0f0f0',
+                                                borderRadius: '8px',
+                                                padding: '16px',
+                                                position: 'relative',
+                                                transition: 'all 0.3s',
+                                                cursor: 'pointer',
+                                            }}
+                                            onMouseEnter={(e) => {
+                                                e.currentTarget.style.boxShadow =
+                                                    '0 2px 8px rgba(0,0,0,0.06)';
+                                                e.currentTarget.style.backgroundColor = '#f6f9ff';
+                                                e.currentTarget.style.borderColor = '#d6e4ff';
+                                            }}
+                                            onMouseLeave={(e) => {
+                                                e.currentTarget.style.boxShadow = 'none';
+                                                e.currentTarget.style.backgroundColor = '#ffffff';
+                                                e.currentTarget.style.borderColor = '#f0f0f0';
+                                            }}
+                                        >
+                                            {/* Dot for unread */}
+                                            {!notification.isRead && (
+                                                <div
+                                                    style={{
+                                                        position: 'absolute',
+                                                        top: '16px',
+                                                        right: '16px',
+                                                        width: '8px',
+                                                        height: '8px',
+                                                        borderRadius: '50%',
+                                                        backgroundColor: '#ff4d4f',
+                                                    }}
+                                                />
+                                            )}
+
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    gap: '16px',
+                                                    alignItems: 'flex-start',
+                                                }}
+                                            >
+                                                {/* Icon */}
+                                                <div
+                                                    style={{
+                                                        width: '48px',
+                                                        height: '48px',
+                                                        borderRadius: '50%',
+                                                        backgroundColor: bgColor,
+                                                        color: color,
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        fontSize: '24px',
+                                                        flexShrink: 0,
+                                                    }}
+                                                >
+                                                    <IconComponent style={{ fontSize: '24px' }} />
+                                                </div>
+
+                                                {/* Content */}
+                                                <div style={{ flex: 1 }}>
+                                                    <div
+                                                        style={{
+                                                            fontSize: '15px',
+                                                            fontWeight: 600,
+                                                            marginBottom: '4px',
+                                                            color: '#262626',
+                                                        }}
+                                                    >
+                                                        {notification.title}
+                                                    </div>
+
+                                                    <div
+                                                        style={{
+                                                            display: 'flex',
+                                                            gap: '8px',
+                                                            marginBottom: '4px',
+                                                            flexWrap: 'wrap',
+                                                        }}
+                                                    >
+                                                        <span
+                                                            style={{
+                                                                fontSize: '13px',
+                                                                color: '#8c8c8c',
+                                                            }}
+                                                        >
+                                                            {notification.plc}
+                                                        </span>
+                                                        <span
+                                                            style={{
+                                                                fontSize: '13px',
+                                                                color: '#d9d9d9',
+                                                            }}
+                                                        >
+                                                            •
+                                                        </span>
+                                                        <span
+                                                            style={{
+                                                                fontSize: '13px',
+                                                                color: '#8c8c8c',
+                                                            }}
+                                                        >
+                                                            Tag: {notification.tag}
+                                                        </span>
+                                                    </div>
+
+                                                    <div
+                                                        style={{
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '8px',
+                                                            flexWrap: 'wrap',
+                                                        }}
+                                                    >
+                                                        <span
+                                                            style={{
+                                                                fontSize: '13px',
+                                                                color: '#8c8c8c',
+                                                            }}
+                                                        >
+                                                            Engineer:{' '}
+                                                            <span style={{ color: '#595959' }}>
+                                                                {notification.engineer}
+                                                            </span>
+                                                        </span>
+                                                        <span
+                                                            style={{
+                                                                fontSize: '13px',
+                                                                color: '#8c8c8c',
+                                                            }}
+                                                        >
+                                                            {notification.time}
+                                                        </span>
+                                                    </div>
+                                                </div>
+
+                                                {/* Button */}
+                                                <Button
+                                                    type="link"
+                                                    onClick={() => handleViewDetail(notification)}
+                                                    style={{
+                                                        color: '#FF6B35',
+                                                        fontSize: '14px',
+                                                        fontWeight: 500,
+                                                    }}
+                                                >
+                                                    Lihat Detail
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListNotification;

src/pages/role/IndexRole.jsx

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

src/pages/role/component/DetailRole.jsx

@@ -0,0 +1,98 @@
+import React, { memo } from 'react';
+import { Modal, Form, Input, Select, Row, Col } from 'antd';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const DetailRole = memo(function DetailRole({
+    visible,
+    onCancel,
+    onOk,
+    form,
+    editingKey,
+    readOnly,
+}) {
+    const getModalTitle = () => {
+        if (readOnly) return 'Detail Role';
+        if (editingKey) return 'Edit Role';
+        return 'Tambah Role';
+    };
+
+    return (
+        <Modal
+            title={getModalTitle()}
+            open={visible}
+            onCancel={onCancel}
+            onOk={onOk}
+            okText={readOnly ? 'Tutup' : editingKey ? 'Simpan' : 'Tambah'}
+            cancelText="Batal"
+            width={600}
+            cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
+        >
+            <Form form={form} layout="vertical" name="roleForm" disabled={readOnly}>
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_name"
+                            label="Nama Role"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Nama role tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <Input placeholder="Masukkan nama role" />
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_level"
+                            label="Level"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Level tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <Select placeholder="Pilih level">
+                                <Option value={1}>Level 1</Option>
+                                <Option value={2}>Level 2</Option>
+                                <Option value={3}>Level 3</Option>
+                                <Option value={4}>Level 4</Option>
+                            </Select>
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Row gutter={16}>
+                    <Col span={24}>
+                        <Form.Item
+                            name="role_description"
+                            label="Deskripsi"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: 'Deskripsi tidak boleh kosong!',
+                                },
+                            ]}
+                        >
+                            <TextArea
+                                rows={4}
+                                placeholder="Masukkan deskripsi role"
+                                maxLength={200}
+                                showCount
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    );
+});
+
+export default DetailRole;

src/pages/role/component/ListRole.jsx

@@ -0,0 +1,245 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import { getAllRole, deleteRole } from '../../../api/role';
+import TableList from '../../../components/Global/TableList';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Nama Role',
+        dataIndex: 'role_name',
+        key: 'role_name',
+        width: '20%',
+    },
+    {
+        title: 'Level',
+        dataIndex: 'role_level',
+        key: 'role_level',
+        width: '10%',
+        align: 'center',
+    },
+    {
+        title: 'Deskripsi',
+        dataIndex: 'role_description',
+        key: 'role_description',
+        width: '40%',
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '15%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    icon={<EyeOutlined />}
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListRole = memo(function ListRole(props) {
+    const [showFilter, setShowFilter] = useState(false);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode == 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const toggleFilter = () => {
+        setFormDataFilter(defaultFilter);
+        setShowFilter((prev) => !prev);
+    };
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus data "' + param.role_name + '" ?',
+            onConfirm: () => handleDelete(param.role_id, param.role_name),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (role_id, role_name) => {
+        const response = await deleteRole(role_id);
+        console.log('Delete Role Response:', response);
+
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Data Role "' + role_name + '" berhasil dihapus.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: response.message || 'Gagal Menghapus Data Role',
+            });
+        }
+    };
+
+    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 role by name, level, or description..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        // Auto search when clearing by backspace/delete
+                                        if (value === '') {
+                                            setFormDataFilter({ criteria: '' });
+                                            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>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Data
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            getData={getAllRole}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListRole;

src/pages/shiftManagement/member/IndexMember.jsx

@@ -0,0 +1,31 @@
+import React, { memo, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexMember = memo(function IndexMember() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Manajemen Shift</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Anggota Shift</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <div>
+            <h1>Anggota Shift Page</h1>
+        </div>
+    );
+});
+
+export default IndexMember;

src/pages/shiftManagement/schedule/IndexSchedule.jsx

@@ -0,0 +1,31 @@
+import React, { memo, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexSchedule = memo(function IndexSchedule() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Manajemen Shift</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Jadwal Shift</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <div>
+            <h1>Jadwal Shift Page</h1>
+        </div>
+    );
+});
+
+export default IndexSchedule;

src/pages/user/IndexUser.jsx

@@ -0,0 +1,90 @@
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ListUser from './component/ListUser';
+import DetailUser from './component/DetailUser';
+import ChangePasswordModal from './component/ChangePasswordModal';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexUser = memo(function IndexUser() {
+    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 [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+    const [selectedUserForPassword, setSelectedUserForPassword] = useState(null);
+
+    const setMode = (param) => {
+        setShowmodal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowmodal(false);
+                break;
+        }
+        setActionMode(param);
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • User
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ListUser
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                setShowChangePasswordModal={setShowChangePasswordModal}
+                setSelectedUserForPassword={setSelectedUserForPassword}
+            />
+            <DetailUser
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+            <ChangePasswordModal
+                showModal={showChangePasswordModal}
+                setShowModal={setShowChangePasswordModal}
+                selectedUser={selectedUserForPassword}
+                setSelectedUser={setSelectedUserForPassword}
+            />
+        </React.Fragment>
+    );
+});
+
+export default IndexUser;

src/pages/user/component/ChangePasswordModal.jsx

@@ -0,0 +1,328 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Input, Typography, Button, ConfigProvider } from 'antd';
+import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+import { changePassword } from '../../../api/user';
+
+const { Text } = Typography;
+
+const ChangePasswordModal = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [formData, setFormData] = useState({
+        newPassword: '',
+        confirmPassword: '',
+    });
+    const [errors, setErrors] = useState({});
+
+    // Password requirements state
+    const [passwordRequirements, setPasswordRequirements] = useState({
+        minLength: false,
+        hasUppercase: false,
+        hasLowercase: false,
+        hasNumber: false,
+        hasSpecialChar: false,
+    });
+
+    const validatePassword = (password) => {
+        if (!password) return 'Password wajib diisi';
+
+        // Must be at least 8 characters long
+        if (password.length < 8) {
+            return 'Password must be at least 8 characters long';
+        }
+
+        // Must contain at least one uppercase letter
+        if (!/[A-Z]/.test(password)) {
+            return 'Password must contain at least one uppercase letter';
+        }
+
+        // Must contain at least one lowercase letter
+        if (!/[a-z]/.test(password)) {
+            return 'Password must contain at least one lowercase letter';
+        }
+
+        // Must contain at least one number
+        if (!/\d/.test(password)) {
+            return 'Password must contain at least one number';
+        }
+
+        // Must contain at least one special character
+        if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+            return 'Password must contain at least one special character';
+        }
+
+        return null;
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+
+        const passwordError = validatePassword(formData.newPassword);
+        if (passwordError) {
+            newErrors.newPassword = passwordError;
+        }
+
+        if (!formData.confirmPassword) {
+            newErrors.confirmPassword = 'Konfirmasi password wajib diisi';
+        } else if (formData.newPassword !== formData.confirmPassword) {
+            newErrors.confirmPassword = 'Password tidak cocok';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleCancel = () => {
+        props.setShowModal(false);
+        props.setSelectedUser(null);
+        setFormData({
+            newPassword: '',
+            confirmPassword: '',
+        });
+        setErrors({});
+        setPasswordRequirements({
+            minLength: false,
+            hasUppercase: false,
+            hasLowercase: false,
+            hasNumber: false,
+            hasSpecialChar: false,
+        });
+    };
+
+    // Check password requirements
+    const checkPasswordRequirements = (password) => {
+        setPasswordRequirements({
+            minLength: password.length >= 8,
+            hasUppercase: /[A-Z]/.test(password),
+            hasLowercase: /[a-z]/.test(password),
+            hasNumber: /\d/.test(password),
+            hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(password),
+        });
+    };
+
+    const handleSave = async () => {
+        if (!validateForm()) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Mohon periksa kembali form Anda',
+            });
+            return;
+        }
+
+        setConfirmLoading(true);
+
+        try {
+            const response = await changePassword(props.selectedUser.user_id, formData.newPassword);
+
+            console.log('Change Password Response:', response);
+
+            if (response && response.statusCode === 200) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Password untuk user "${props.selectedUser.user_fullname}" berhasil diubah.`,
+                });
+
+                handleCancel();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat mengubah password.',
+                });
+            }
+        } catch (error) {
+            console.error('Change Password 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,
+        });
+
+        // Check password requirements on password change
+        if (name === 'newPassword') {
+            checkPasswordRequirements(value);
+        }
+
+        // Clear error for this field
+        if (errors[name]) {
+            setErrors({
+                ...errors,
+                [name]: null,
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (!props.showModal) {
+            setFormData({
+                newPassword: '',
+                confirmPassword: '',
+            });
+            setErrors({});
+        }
+    }, [props.showModal]);
+
+    return (
+        <Modal
+            title={`Ubah Password - ${props.selectedUser?.user_fullname || ''}`}
+            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',
+                                    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',
+                                },
+                            },
+                        }}
+                    >
+                        <Button loading={confirmLoading} onClick={handleSave}>
+                            Simpan
+                        </Button>
+                    </ConfigProvider>
+                </React.Fragment>,
+            ]}
+            width={500}
+        >
+            <div>
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Username</Text>
+                    <Input
+                        value={props.selectedUser?.user_name || ''}
+                        disabled
+                        style={{ backgroundColor: '#f5f5f5' }}
+                    />
+                </div>
+
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Password Baru</Text>
+                    <Text style={{ color: 'red' }}> *</Text>
+                    <Input.Password
+                        name="newPassword"
+                        value={formData.newPassword}
+                        onChange={handleInputChange}
+                        placeholder="Masukkan password baru"
+                        status={errors.newPassword ? 'error' : ''}
+                    />
+                    {errors.newPassword && (
+                        <Text style={{ color: 'red', fontSize: '12px' }}>{errors.newPassword}</Text>
+                    )}
+
+                    {/* Password Requirements Indicator */}
+                    <div style={{ marginTop: '8px', padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+                        <Text style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>Password harus memenuhi:</Text>
+                        <div style={{ marginTop: '4px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+                                {passwordRequirements.minLength ? (
+                                    <CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
+                                ) : (
+                                    <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
+                                )}
+                                <Text style={{ fontSize: '12px', color: passwordRequirements.minLength ? '#52c41a' : '#ff4d4f' }}>
+                                    Minimal 8 karakter
+                                </Text>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+                                {passwordRequirements.hasUppercase ? (
+                                    <CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
+                                ) : (
+                                    <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
+                                )}
+                                <Text style={{ fontSize: '12px', color: passwordRequirements.hasUppercase ? '#52c41a' : '#ff4d4f' }}>
+                                    Minimal 1 huruf besar (A-Z)
+                                </Text>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+                                {passwordRequirements.hasLowercase ? (
+                                    <CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
+                                ) : (
+                                    <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
+                                )}
+                                <Text style={{ fontSize: '12px', color: passwordRequirements.hasLowercase ? '#52c41a' : '#ff4d4f' }}>
+                                    Minimal 1 huruf kecil (a-z)
+                                </Text>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+                                {passwordRequirements.hasNumber ? (
+                                    <CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
+                                ) : (
+                                    <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
+                                )}
+                                <Text style={{ fontSize: '12px', color: passwordRequirements.hasNumber ? '#52c41a' : '#ff4d4f' }}>
+                                    Minimal 1 angka (0-9)
+                                </Text>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '2px' }}>
+                                {passwordRequirements.hasSpecialChar ? (
+                                    <CheckCircleFilled style={{ color: '#52c41a', fontSize: '14px', marginRight: '6px' }} />
+                                ) : (
+                                    <CloseCircleFilled style={{ color: '#ff4d4f', fontSize: '14px', marginRight: '6px' }} />
+                                )}
+                                <Text style={{ fontSize: '12px', color: passwordRequirements.hasSpecialChar ? '#52c41a' : '#ff4d4f' }}>
+                                    Minimal 1 karakter spesial (!@#$%^&*(),.?":&#123;&#125;|&lt;&gt;)
+                                </Text>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div style={{ marginBottom: 12 }}>
+                    <Text strong>Konfirmasi Password</Text>
+                    <Text style={{ color: 'red' }}> *</Text>
+                    <Input.Password
+                        name="confirmPassword"
+                        value={formData.confirmPassword}
+                        onChange={handleInputChange}
+                        placeholder="Konfirmasi password baru"
+                        status={errors.confirmPassword ? 'error' : ''}
+                    />
+                    {errors.confirmPassword && (
+                        <Text style={{ color: 'red', fontSize: '12px' }}>
+                            {errors.confirmPassword}
+                        </Text>
+                    )}
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ChangePasswordModal;

src/pages/user/component/ListUser.jsx

@@ -0,0 +1,471 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+    CheckOutlined,
+    CloseOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import { deleteUser, getAllUser, approveUser, rejectUser } from '../../../api/user';
+import TableList from '../../../components/Global/TableList';
+import Swal from 'sweetalert2';
+
+// Helper function to capitalize first letter
+const capitalizeFirstLetter = (str) => {
+    if (!str) return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+// Helper function to get role tag color based on role_level or role_name
+const getRoleColor = (role_name, role_level) => {
+    // Priority 1: Based on role_level
+    if (role_level) {
+        switch (role_level) {
+            case 1:
+                return 'purple'; // Highest level
+            case 2:
+                return 'blue';
+            case 3:
+                return 'cyan';
+            case 4:
+                return 'green';
+            default:
+                return 'default';
+        }
+    }
+
+    // Priority 2: Based on role_name (fallback for backward compatibility)
+    const roleLower = role_name?.toLowerCase() || '';
+    if (roleLower.includes('admin')) return 'purple';
+    if (roleLower.includes('operator')) return 'blue';
+    if (roleLower.includes('engineer')) return 'cyan';
+    if (roleLower.includes('guest')) return 'default';
+
+    return 'default';
+};
+
+const columns = (
+    showPreviewModal,
+    showEditModal,
+    showDeleteDialog,
+    showApproveDialog,
+    showRejectDialog
+) => [
+    {
+        title: 'ID',
+        dataIndex: 'user_id',
+        key: 'user_id',
+        width: '5%',
+        hidden: 'true',
+    },
+    {
+        title: 'Username',
+        dataIndex: 'user_name',
+        key: 'user_name',
+        width: '12%',
+    },
+    {
+        title: 'Nama Lengkap',
+        dataIndex: 'user_fullname',
+        key: 'user_fullname',
+        width: '15%',
+    },
+    {
+        title: 'Nomor WA',
+        dataIndex: 'user_phone',
+        key: 'user_phone',
+        width: '12%',
+    },
+    {
+        title: 'Level',
+        dataIndex: 'role_level',
+        key: 'role_level',
+        width: '8%',
+        align: 'center',
+        render: (role_level) => role_level || '-',
+    },
+    {
+        title: 'Nama Role',
+        dataIndex: 'role_name',
+        key: 'role_name',
+        width: '12%',
+        render: (_, { role_name, role_level }) => {
+            if (!role_name) return <Tag color={'default'}>Belum Ada Role</Tag>;
+
+            const color = getRoleColor(role_name, role_level);
+            const displayName = capitalizeFirstLetter(role_name);
+
+            return (
+                <Tag color={color} key={'role'}>
+                    {displayName}
+                </Tag>
+            );
+        },
+    },
+    {
+        title: 'Status Approval',
+        dataIndex: 'is_approve',
+        key: 'is_approve',
+        width: '15%',
+        align: 'center',
+        render: (_, record) => {
+            // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
+            if (record.is_approve === 1 || record.is_approve === '1') {
+                // Pending - show both Approve and Reject buttons
+                return (
+                    <Space size="small" direction="vertical">
+                        <Button
+                            type="primary"
+                            size="small"
+                            icon={<CheckOutlined />}
+                            onClick={() => showApproveDialog(record)}
+                            style={{
+                                backgroundColor: '#52c41a',
+                                borderColor: '#52c41a',
+                                width: '100%',
+                            }}
+                        >
+                            Approve
+                        </Button>
+                        <Button
+                            danger
+                            size="small"
+                            icon={<CloseOutlined />}
+                            onClick={() => showRejectDialog(record)}
+                            style={{ width: '100%' }}
+                        >
+                            Reject
+                        </Button>
+                    </Space>
+                );
+            } else if (record.is_approve === 0 || record.is_approve === '0') {
+                // Rejected
+                return (
+                    <Tag color={'red'} key={'status'}>
+                        Rejected
+                    </Tag>
+                );
+            } else if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+                // Approved
+                return (
+                    <Tag color={'green'} key={'status'}>
+                        Approved
+                    </Tag>
+                );
+            }
+            // Default fallback (for false/null which means pending in old system)
+            return (
+                <Tag color={'orange'} key={'status'}>
+                    Pending
+                </Tag>
+            );
+        },
+    },
+    {
+        title: 'Status Active',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '10%',
+        align: 'center',
+        render: (_, record) => {
+            // Only show active status if user is approved
+            if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+                if (record.is_active === true || record.is_active === 1) {
+                    return (
+                        <Tag color={'green'} key={'active'}>
+                            Active
+                        </Tag>
+                    );
+                }
+                return (
+                    <Tag color={'default'} key={'inactive'}>
+                        Inactive
+                    </Tag>
+                );
+            }
+            return <span>-</span>;
+        },
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '12%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListUser = memo(function ListUser(props) {
+    const [showFilter, setShowFilter] = useState(false);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token && props.actionMode == 'list') {
+            setFormDataFilter(defaultFilter);
+            doFilter();
+        } else if (!token) {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const toggleFilter = () => {
+        setFormDataFilter(defaultFilter);
+        setShowFilter((prev) => !prev);
+    };
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showApproveDialog = (param) => {
+        Swal.fire({
+            icon: 'question',
+            title: 'Konfirmasi Approve User',
+            text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?',
+            showCancelButton: true,
+            cancelButtonColor: '#d33',
+            cancelButtonText: 'Batal',
+            confirmButtonColor: '#23A55A',
+            confirmButtonText: 'Approve',
+            reverseButtons: true,
+        }).then((result) => {
+            if (result.isConfirmed) {
+                handleApprove(param.user_id);
+            } else if (result.dismiss) {
+                props.setSelectedData(null);
+            }
+        });
+    };
+
+    const showRejectDialog = (param) => {
+        Swal.fire({
+            icon: 'warning',
+            title: 'Konfirmasi Reject User',
+            text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?',
+            showCancelButton: true,
+            cancelButtonColor: '#23A55A',
+            cancelButtonText: 'Batal',
+            confirmButtonColor: '#d33',
+            confirmButtonText: 'Reject',
+            reverseButtons: true,
+        }).then((result) => {
+            if (result.isConfirmed) {
+                handleReject(param.user_id);
+            } else if (result.dismiss) {
+                props.setSelectedData(null);
+            }
+        });
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus user "' + param.user_fullname + '" ?',
+            onConfirm: () => handleDelete(param.user_id, param.user_fullname),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleApprove = async (user_id) => {
+        const response = await approveUser(user_id);
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User berhasil diapprove.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Approve User',
+            });
+        }
+    };
+
+    const handleReject = async (user_id) => {
+        const response = await rejectUser(user_id);
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User berhasil direject.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Reject User',
+            });
+        }
+    };
+
+    const handleDelete = async (user_id, user_fullname) => {
+        const response = await deleteUser(user_id);
+
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User "' + user_fullname + '" berhasil dihapus.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Menghapus User',
+            });
+        }
+    };
+
+    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 user by username, nama, or role..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        // Auto search when clearing by backspace/delete
+                                        if (value === '') {
+                                            setFormDataFilter({ criteria: '' });
+                                            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>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah User
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            getData={getAllUser}
+                            queryParams={formDataFilter}
+                            columns={columns(
+                                showPreviewModal,
+                                showEditModal,
+                                showDeleteDialog,
+                                showApproveDialog,
+                                showRejectDialog
+                            )}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListUser;

svg/test-new.svg

@@ -0,0 +1,566 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 2750 1600" version="1.1" id="svg2113" xmlns="http://www.w3.org/2000/svg"
+  xmlns:bx="https://boxy-svg.com">
+  <defs id="defs1583">
+    <bx:grid x="0" y="0" width="62.847" height="59.308" />
+  </defs>
+  <rect width="2765.268" height="1601.316" style="fill: rgb(249, 249, 249); stroke: rgb(0, 0, 0);" id="rect1585" />
+  <g transform="matrix(3.756041, 0, 0, 3.411999, -325.08066, -171.136964)" style="" id="g1595">
+    <rect x="111.721" y="167.133" width="2.541" height="6.598" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      id="rect1587" />
+    <rect x="111.373" y="178.442" width="2.889" height="6.598" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      id="rect1589" />
+    <rect x="111.373" y="190.204" width="2.889" height="6.598" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      id="rect1591" />
+    <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      d="M 105.737 163.995 L 103.281 166.267 L 103.337 197.271 L 105.513 200 L 109.364 200 L 111.373 197.271 C 111.373 197.271 111.3 166.386 111.3 166.355 C 111.3 166.325 109.158 163.986 109.158 163.986 L 105.737 163.995 Z"
+      id="path1593" />
+  </g>
+  <rect x="221.266" y="4276.899" height="719.302"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+    transform="matrix(0, -1, 1, 0, 241.54927, -4187.271127)" width="1.854" id="rect1597" />
+  <g style="" transform="matrix(1.967086, 0, 0, 2.764776, 8.509805, 20.443167)" id="g1605">
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 160.097 163.649 L 200 148.321 L 200 163.649 L 160.097 148.321 L 160.097 163.649 Z" id="path1599" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1; transform-origin: 180.051px 148.792px;"
+      d="M 180.051 155.918 L 180.051 141.666" id="path1601" />
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 180.091 141.868 L 163.816 141.868 L 163.902 140.59 L 164.165 139.38 L 164.515 138.17 L 165.127 137.028 L 165.827 135.952 L 166.614 134.944 L 167.578 133.934 L 168.627 133.061 L 169.764 132.255 L 170.99 131.582 L 172.39 130.909 L 173.79 130.439 L 175.277 129.968 L 176.853 129.699 L 178.428 129.497 L 180.091 129.431 L 181.754 129.497 L 183.415 129.699 L 184.904 129.968 L 186.478 130.439 L 187.879 130.909 L 189.191 131.582 L 190.416 132.255 L 191.642 133.061 L 192.692 133.934 L 193.567 134.944 L 194.441 135.952 L 195.054 137.028 L 195.666 138.17 L 196.017 139.38 L 196.279 140.59 L 196.366 141.868 L 180.091 141.868 Z"
+      id="path1603" />
+  </g>
+  <rect x="570.504" y="312.334" width="1.617" height="134.41"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-origin: 571.311px 379.538px;" id="rect1607" />
+  <rect x="192.153" y="622.531" width="170.94" height="200.351" style="fill: rgb(179, 179, 179); stroke: rgb(0, 0, 0);"
+    id="rect1609" />
+  <rect x="363.093" y="636.243" width="11.348" height="175.002" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1611" />
+  <rect x="1311.745" y="222.133" width="24.158" height="66.668"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+    transform="matrix(0, 1, -1, 0, -916.048411, 468.548218)" id="rect1613" />
+  <g transform="matrix(1.967086, 0, 0, 2.255241, -84.857842, 158.144456)" id="g1627">
+    <rect x="-270.583" y="233.554" width="2.468" height="4.532" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1615" />
+    <rect x="-271.043" y="248.421" width="2.928" height="4.29" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1617" />
+    <rect x="207.97" y="-262.356" width="2.928" height="4.551" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 479.012726, 525.711979)" id="rect1619" />
+    <path style="fill: rgb(5, 121, 40); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+      d="M 274.287 273.087 L 271.043 270.353 L 271.117 233.051 L 273.991 229.767 L 279.077 229.767 L 281.731 233.051 C 281.731 233.051 281.634 270.21 281.634 270.248 C 281.634 270.284 278.805 273.098 278.805 273.098 L 274.287 273.087 Z"
+      transform="matrix(-1, 0, 0, -1, 0.000001, 0.000002)" id="path1621" />
+    <rect x="270.583" y="-241.384" width="2.468" height="4.451" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 541.166016, 482.768005)" id="rect1623" />
+    <rect x="-270.583" y="255.823" width="2.468" height="4.658" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1625" />
+  </g>
+  <rect x="1814.407" y="219.287" width="36.797" height="68.004"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1832.81px 253.29px;"
+    transform="matrix(0, 1, -1, 0, -1263.114954, 471.648948)" id="rect1629" />
+  <g transform="matrix(-1.967086, 0, 0, 2.255241, 1061.308724, 158.144456)" style="" id="g1643">
+    <rect x="-270.583" y="233.554" width="2.468" height="4.532" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1631" />
+    <rect x="-271.043" y="248.421" width="2.928" height="4.29" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1633" />
+    <rect x="207.97" y="-262.356" width="2.928" height="4.551" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 479.012726, 525.711979)" id="rect1635" />
+    <path style="fill: rgb(5, 121, 40); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+      d="M 274.287 273.087 L 271.043 270.353 L 271.117 233.051 L 273.991 229.767 L 279.077 229.767 L 281.731 233.051 C 281.731 233.051 281.634 270.21 281.634 270.248 C 281.634 270.284 278.805 273.098 278.805 273.098 L 274.287 273.087 Z"
+      transform="matrix(-1, 0, 0, -1, 0.000001, 0.000002)" id="path1637" />
+    <rect x="270.583" y="-241.384" width="2.468" height="4.451" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 541.166016, 482.768005)" id="rect1639" />
+    <rect x="-270.583" y="255.823" width="2.468" height="4.658" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+      transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1641" />
+  </g>
+  <rect x="603.693" y="580.559" width="11.348" height="284.474" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1645" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+    d="M 507.186 740.424 L 550.252 704.131 L 722.03 703.268 L 765.747 740.642 L 507.186 740.424 Z" id="path1647"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000028, 0.000006)" />
+  <rect x="657.992" y="580.559" width="34.149" height="284.474" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1649" />
+  <rect x="671.676" y="142.765" width="12.37" height="42.847"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 677.862px 164.189px;"
+    transform="matrix(0, 1, -1, 0, -41.394006, 438.822517)" id="rect1651" />
+  <rect x="671.676" y="142.765" width="12.37" height="42.849"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 677.862px 164.191px;"
+    transform="matrix(0, 1, -1, 0, -41.395654, 676.71634)" id="rect1653" />
+  <rect x="671.676" y="142.759" width="12.37" height="42.847"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 677.862px 164.183px;"
+    transform="matrix(0, 1, -1, 0, -41.393823, 469.979671)" id="rect1655" />
+  <rect x="671.676" y="142.763" width="12.37" height="42.849"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 677.862px 164.189px;"
+    transform="matrix(0, 1, -1, 0, -41.396143, 640.873796)" id="rect1657" />
+  <rect x="692.141" y="609.194" width="11.348" height="225.524" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1659" />
+  <rect x="703.489" y="627.978" width="78.52" height="190.076" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1661" />
+  <rect x="734.874" y="627.978" width="11.348" height="190.076" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1663" />
+  <rect x="782.009" y="580.559" width="84.791" height="284.474" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1665" />
+  <rect x="912.958" y="653.978" width="34.351" height="142.639" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1667" />
+  <rect x="387.88" y="481.524" width="3.04" height="170.655" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(0.998593, -0.053021, 0, 1.001409, 560.055851, 178.939058)" id="rect1669" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+    d="M 726.028 743.604 L 808.32 701.986 L 970.629 701.986 L 1052.174 743.604 L 726.028 743.604 Z" id="path1671"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.00006, -0.000073)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 966.433px 728.04px;"
+    d="M 851.71 741.93 L 909.604 714.15 L 1023.79 714.15 L 1081.159 741.93 L 851.71 741.93 Z" id="path1673"
+    transform="matrix(0, 0.872229, -1.146488, 0, 0.00001, 0.000013)" />
+  <rect x="780.851" y="481.524" width="6.12" height="170.655" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(0.998593, -0.053021, 0, 1.001409, 202.605928, 199.545717)" id="rect1675" />
+  <rect x="989.142" y="656.234" width="44.023" height="142.639" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1677" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1040.14px 723.043px;"
+    d="M 839.576 716.183 L 884.529 729.902 L 1200.198 729.902 L 1240.694 716.272 L 839.576 716.183 Z" id="path1679"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000087, -0.000004)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    d="M 1048.001 548.108 L 1048.304 897.975 L 1207.093 897.975 L 1218.978 875.774 L 1219.181 569.45 L 1207.954 548.801 L 1048.001 548.108 Z"
+    id="path1681" />
+  <rect x="1219.18" y="568.827" width="27.547" height="308.201" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1683" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1250.61px 722.928px;"
+    d="M 1073.93 726.31 L 1113.529 719.546 L 1391.606 719.546 L 1427.277 726.267 L 1073.93 726.31 Z" id="path1685"
+    transform="matrix(0, 0.872229, -1.146488, 0, 0.000091, -0.000014)" />
+  <rect x="1254.482" y="596.467" width="44.499" height="254.908" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1687" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1475.41px 727.407px;"
+    d="M 1256.467 722.549 L 1278.178 732.178 L 1672.628 732.254 L 1694.355 722.901 L 1256.467 722.549 Z" id="path1689"
+    transform="matrix(0, 0.872229, -1.146488, 0, 0.000073, 0.000005)" />
+  <rect x="1298.981" y="568.827" width="44.499" height="308.201" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1691" />
+  <rect x="1343.481" y="596.824" width="44.499" height="254.908" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1693" />
+  <rect x="1387.98" y="596.824" width="21.872" height="254.908" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1695" />
+  <rect x="1409.852" y="596.824" width="44.499" height="254.908" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1697" />
+  <rect x="1454.351" y="520.549" width="15.503" height="409.931" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1699" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1486.54px 729.878px;"
+    d="M 1285.741 725.021 L 1305.656 734.65 L 1667.405 734.725 L 1687.333 725.373 L 1285.741 725.021 Z" id="path1701"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000073, 0.000112)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1497.66px 730.53px;"
+    d="M 1312.27 725.673 L 1330.659 735.302 L 1664.657 735.377 L 1683.056 726.025 L 1312.27 725.673 Z" id="path1703"
+    transform="matrix(0, 0.872229, -1.146488, 0, 0.000015, -0.000034)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1508.79px 733.956px;"
+    d="M 1344.755 729.099 L 1361.021 738.727 L 1656.546 738.803 L 1672.82 729.45 L 1344.755 729.099 Z" id="path1705"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000137, 0.000068)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1519.91px 734.718px;"
+    d="M 1368.907 729.861 L 1383.883 739.49 L 1655.938 739.565 L 1670.927 730.213 L 1368.907 729.861 Z" id="path1707"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000023, -0.000055)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1531.04px 734.75px;"
+    d="M 1388.217 729.893 L 1402.375 739.521 L 1659.692 739.597 L 1673.869 730.244 L 1388.217 729.893 Z" id="path1709"
+    transform="matrix(0, 0.872229, -1.146488, 0, 0.000068, -0.000003)" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 1542.17px 732.158px;"
+    d="M 1413.447 727.301 L 1426.21 736.93 L 1658.11 737.005 L 1670.886 727.653 L 1413.447 727.301 Z" id="path1711"
+    transform="matrix(0, 0.872229, -1.146488, 0, -0.000157, 0.000035)" />
+  <rect x="1547.735" y="619.886" width="16.773" height="224.545" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1713" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    d="M 1565.938 502.426 C 1565.938 502.426 1562.4376824661815 892.9090808121027 1566.214 945.552 C 1567.0379405282195 957.0379606625416 1565.9094864891053 963.619303438939 1569.212 966.433 C 1571.519042488712 968.3985687994298 1577.3044475621036 968.2986812007803 1579.505 966.259 C 1582.6326889892484 963.3599605027395 1580.896216996098 956.9246936747566 1581.431 945.552 C 1583.9015586930873 893.0131066227198 1585.3790228328503 546.5920914640369 1581.978 501.716 C 1581.3657807394668 493.6378397282225 1582.3293586890359 489.67728117870035 1579.793 487.501 C 1577.6385435938726 485.6524038423454 1571.744195211586 485.6529690725045 1569.416 487.501 C 1566.5866798051243 489.74680447459815 1565.938 502.426 1565.938 502.426 C 1565.9379999999999 502.42599999999993 1565.938 502.426 1565.938 502.426 C 1565.938 502.426 1565.9380000000003 502.4260000000001 1565.938 502.426"
+    id="path1715"
+    bx:d="M 1565.938 502.426 R 1566.214 945.552 R 1569.212 966.433 R 1579.505 966.259 R 1581.431 945.552 R 1581.978 501.716 R 1579.793 487.501 R 1569.416 487.501 R 1565.938 502.426 R 1565.938 502.426 Z 1@8154597a" />
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;"
+    d="M 1549.808 751.776 L 1677.314 751.035 C 1677.314 751.035 1677.314 726.268 1677.314 725.991 C 1677.314 725.714 1663.065 700.76 1663.065 700.76 L 1564.013 701.59 L 1549.107 726.268 L 1549.808 751.776 Z"
+    id="path1717" transform="matrix(0, 0.872229, -1.146488, 0, 0.000076, -0.000036)" />
+  <rect x="1632.876" y="655.365" width="9.58" height="142.788" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1719" />
+  <rect x="1660.461" y="596.755" width="5.046" height="48.404" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1721" transform="matrix(1, 0, 0, 1, -18.004511, 103.828065)" />
+  <rect x="1647.502" y="676.325" width="8.445" height="101.391" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1723" />
+  <rect x="1673.951" y="577.366" width="4.198" height="91.421" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1725" transform="matrix(1, 0, 0, 1, -18.004511, 103.828065)" />
+  <rect x="1660.144" y="684.807" width="85.36" height="79.267" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1727" />
+  <rect x="1795.977" y="604.057" width="14.617" height="26.594" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -19.971598, 106.083306)" id="rect1729" />
+  <rect x="1749.438" y="661.186" width="24.897" height="132.31" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1731" />
+  <rect x="1757.53" y="559.76" width="10.489" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -19.971598, 106.083306)" id="rect1733" />
+  <rect x="1763.434" y="611.146" width="10.487" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -25.872856, 106.083306)" id="rect1735" />
+  <rect x="1763.432" y="661.737" width="10.487" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -25.872856, 106.083306)" id="rect1737" />
+  <rect x="1365.579" y="186.044" width="1.963" height="36.402" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 380.50336, 492.679508)" id="rect1739" />
+  <rect x="1689.88" y="573.855" width="1.395" height="35.82" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 56.772358, 158.144456)" id="rect1741" />
+  <rect x="1797.053" y="559.491" width="10.489" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -21.938683, 106.083306)" id="rect1743" />
+  <rect x="1800.989" y="610.877" width="10.487" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -25.872856, 106.083306)" id="rect1745" />
+  <rect x="1793.121" y="661.469" width="10.487" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -18.004511, 106.083306)" id="rect1747" />
+  <rect x="1791.424" y="672.34" width="7.064" height="236.318" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1749" />
+  <rect x="1798.487" y="655.365" width="131.944" height="264.986"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" id="rect1751" />
+  <rect x="1803.02" y="661.186" width="122.717" height="253.381" style="fill: rgb(246, 246, 246); stroke: rgb(0, 0, 0);"
+    id="rect1753" />
+  <g style="" transform="matrix(1.018862, 0, 0, 0.560739, 848.629096, 547.548161)" id="g1771">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1755" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1757" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1759" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1761" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1763" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1765" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1767" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1769" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.522625, 848.629096, 533.266483)" id="g1789">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1773" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1775" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1777" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1779" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1781" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1783" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1785" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1787" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.576848, 848.629096, 569.471135)" id="g1807">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1791" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1793" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1795" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1797" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1799" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1801" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1803" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1805" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.580201, 848.629096, 593.583928)" id="g1825">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1809" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1811" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1813" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1815" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1817" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1819" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1821" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1823" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.450487, 848.629096, 651.557073)" id="g1843">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1827" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1829" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1831" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1833" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1835" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1837" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1839" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1841" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.459332, 848.629096, 669.753301)" id="g1861">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1845" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1847" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1849" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1851" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1853" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1855" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1857" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1859" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.522625, 848.629096, 675.022405)" id="g1879">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1863" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1865" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1867" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1869" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1871" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1873" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1875" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1877" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.522625, 848.629096, 698.643987)" id="g1897">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1881" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1883" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1885" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1887" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1889" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1891" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1893" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1895" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.522625, 848.629096, 722.26563)" id="g1915">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1899" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1901" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1903" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1905" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1907" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1909" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1911" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1913" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.522625, 848.629096, 745.887152)" id="g1933">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1917" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1919" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1921" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1923" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1925" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1927" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1929" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1931" />
+  </g>
+  <g style="" transform="matrix(1.018862, 0, 0, 0.39464, 848.629096, 800.136481)" id="g1951">
+    <path style="fill: rgb(230, 230, 230); stroke: rgb(76, 76, 76); stroke-width: 2;"
+      d="M 989.672 289.959 L 989.672 244.761 L 1009.612 244.761 L 1009.612 289.959 L 989.672 289.959 Z" id="path1935" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 250.366 L 1009.612 250.366"
+      id="path1937" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 256.03 L 1009.612 256.03"
+      id="path1939" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 261.635 L 1009.612 261.635"
+      id="path1941" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 267.3 L 1009.612 267.3"
+      id="path1943" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 272.965 L 1009.612 272.965"
+      id="path1945" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 278.629 L 1009.612 278.629"
+      id="path1947" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 989.672 284.234 L 1009.612 284.234"
+      id="path1949" />
+  </g>
+  <rect x="1816.162" y="699.155" width="19.366" height="49.631" style="fill: rgb(242, 189, 189); stroke: rgb(0, 0, 0);"
+    id="rect1953" />
+  <rect x="1888.417" y="699.155" width="19.366" height="49.631" style="fill: rgb(242, 189, 189); stroke: rgb(0, 0, 0);"
+    id="rect1955" />
+  <rect x="1785.603" y="716.96" width="126.859" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1957" />
+  <rect x="1930.432" y="670.354" width="7.064" height="236.318" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1959" />
+  <rect x="-1907.783" y="834.718" width="19.366" height="49.631" style="fill: rgb(242, 189, 189); stroke: rgb(0, 0, 0);"
+    transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1961" />
+  <rect x="-1853.532" y="730.89" width="19.366" height="49.631" style="fill: rgb(242, 189, 189); stroke: rgb(0, 0, 0);"
+    transform="matrix(-1, 0, 0, 1, -18.004396, 103.828089)" id="rect1963" />
+  <rect x="1937.985" y="839.138" width="100.302" height="40.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1965" />
+  <rect x="1937.985" y="846.571" width="24.897" height="24.625" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1967" />
+  <rect x="-1962.883" y="852.523" width="152.247" height="12.88" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(-1, 0, 0, 1, 0, 0)" id="rect1969" />
+  <rect x="1988.046" y="823.358" width="18.559" height="74.071" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1971" />
+  <rect x="987.703" y="358.288" width="5.256" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 994.049751, 467.679142)" id="rect1973" />
+  <rect x="2070.573" y="748.65" width="5.254" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -88.819611, 106.083306)" id="rect1975" />
+  <rect x="866.734" y="341.306" width="5.254" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 1115.019173, 541.748722)" id="rect1977" />
+  <rect x="2038.287" y="839.138" width="38.832" height="40.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1979" />
+  <rect x="2077.119" y="665.843" width="20.987" height="357.686" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1981" />
+  <rect x="987.703" y="358.288" width="5.256" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 1018.901741, 467.679142)" id="rect1983" />
+  <rect x="2136.735" y="748.65" width="5.254" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, -130.128419, 106.083306)" id="rect1985" />
+  <rect x="866.734" y="341.306" width="5.254" height="7.21" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(1, 0, 0, 1, 1139.873544, 541.748722)" id="rect1987" />
+  <rect x="2098.104" y="637.371" width="391.487" height="411.061"
+    style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" id="rect1989" />
+  <rect x="2509.225" y="839.136" width="38.832" height="40.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1991" />
+  <rect x="180.154" y="635.837" width="11.348" height="175.002" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1993" />
+  <rect x="2488.238" y="665.843" width="20.987" height="357.686" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    id="rect1995" />
+  <ellipse style="fill: rgb(16, 255, 40); stroke: rgb(0, 0, 0);" cx="2568.167" cy="859.043" rx="26.011" ry="30.315"
+    id="ellipse1997" />
+  <rect x="2750.419" y="-736.219" width="38.832" height="40.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"
+    transform="matrix(-1, 0, 0, 1, 5482.833562, 1576.26583)" id="rect1999" />
+  <rect x="2612.182" y="751.661" width="61.845" height="7.808" style="fill: rgb(16, 255, 40); stroke: rgb(0, 0, 0);"
+    id="rect2001" transform="matrix(1, 0, 0, 1, -18.004511, 103.828065)" />
+  <ellipse style="fill: rgb(16, 255, 40); stroke: rgb(0, 0, 0);" cx="2675.44" cy="859.952" rx="26.011" ry="30.315"
+    id="ellipse2003" />
+  <text
+    style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;"
+    x="108.414" y="257.057" id="text2017"
+    transform="matrix(1.967086, 0, 0, 2.255241, -18.004511, 103.828065)">STARTER</text>
+  <text
+    style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;"
+    x="1086.976" y="257.057" id="text2019"
+    transform="matrix(1.967086, 0, 0, 2.255241, -18.004511, 103.828065)">GENERATOR</text>
+  <g style="" transform="matrix(1.967086, 0, 0, 2.764776, 508.468418, 20.443167)" id="start">
+    <path style="stroke: rgb(76, 76, 76); stroke-width: 1; fill: rgb(114, 182, 33);"
+      d="M 160.097 163.649 L 200 148.321 L 200 163.649 L 160.097 148.321 L 160.097 163.649 Z" id="path2021" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1; transform-origin: 180.051px 148.792px;"
+      d="M 180.051 155.918 L 180.051 141.666" id="path2023" />
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 180.091 141.868 L 163.816 141.868 L 163.902 140.59 L 164.165 139.38 L 164.515 138.17 L 165.127 137.028 L 165.827 135.952 L 166.614 134.944 L 167.578 133.934 L 168.627 133.061 L 169.764 132.255 L 170.99 131.582 L 172.39 130.909 L 173.79 130.439 L 175.277 129.968 L 176.853 129.699 L 178.428 129.497 L 180.091 129.431 L 181.754 129.497 L 183.415 129.699 L 184.904 129.968 L 186.478 130.439 L 187.879 130.909 L 189.191 131.582 L 190.416 132.255 L 191.642 133.061 L 192.692 133.934 L 193.567 134.944 L 194.441 135.952 L 195.054 137.028 L 195.666 138.17 L 196.017 139.38 L 196.279 140.59 L 196.366 141.868 L 180.091 141.868 Z"
+      id="path2025" />
+  </g>
+  <rect x="221.413" y="1002.801" width="1.854" height="168.654"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-origin: 222.34px 1087.13px;"
+    transform="matrix(0, -1, 1, 0, 763.873214, -637.849971)" id="rect2029" />
+  <rect x="374.641" y="101.049" width="0.825" height="198.326"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-origin: 375.053px 200.208px;"
+    transform="matrix(0, 1, -1, 0, 294.61756, 111.712623)" id="rect2031" />
+  <g transform="matrix(1.967086, 0, 0, 2.255241, -488.110508, 103.828065)" id="g2039">
+    <path style="fill: rgb(192, 192, 192); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 567.451 100 L 600 85.62 L 600 100 L 567.451 85.62 L 567.451 100 Z" id="path2033" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1;" d="M 583.725 92.747 L 583.725 77.736"
+      id="path2035" />
+    <path style="fill: rgb(192, 192, 192); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 570.306 68.59 L 597.145 68.59 L 597.145 77.736 L 570.306 77.736 L 570.306 68.59 Z" id="path2037" />
+  </g>
+  <rect x="767.213" y="177.924" width="1.617" height="134.41"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-origin: 768.019px 245.128px;" id="rect2041" />
+  <rect x="1070.54" y="448.35" height="97.503"
+    style="fill: rgb(216, 216, 216); stroke: rgb(255, 230, 0); transform-origin: 1071.58px 497.101px;" width="2.089"
+    id="rect2043" />
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" x1="724.999" y1="710.607" x2="416.261" y2="944.343"
+    id="line2045" />
+  <rect x="276.022" y="952.397" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2047" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="173.639"
+    y="385.601" id="val_pt008a" transform="matrix(1.967086, 0, 0, 2.255241, -60.004517, 120.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="158.322"
+    y="487.153" id="text2051" transform="matrix(1.967086, 0, 0, 2.255241, -52.444386, 79.824853)">01-PT008-A</text>
+  <rect x="279.22" y="1190.531" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2053" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="171.889"
+    y="502.901" id="val_zt002" transform="matrix(1.967086, 0, 0, 2.255241, -54.735848, 94.476006)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="159.616"
+    y="369.076" id="text2057" transform="matrix(1.967086, 0, 0, 2.255241, -44.004513, 105.828065)">01-ZT002</text>
+  <rect x="522.842" y="951.928" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2059" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="277.994"
+    y="384.55" id="text2061" transform="matrix(1.967086, 0, 0, 2.255241, -19.693392, 121.658036)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="261.191"
+    y="368.446" id="text2063" transform="matrix(1.967086, 0, 0, 2.255241, -3.615977, 109.752755)">01-TE014-A</text>
+  <rect x="524.88" y="1071.852" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2065" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="276.954"
+    y="443.949" id="text2067" transform="matrix(1.967086, 0, 0, 2.255241, -13.004511, 107.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="260.151"
+    y="427.845" id="text2069" transform="matrix(1.967086, 0, 0, 2.255241, -5.004511, 98.828065)">01-TE014-B</text>
+  <rect x="761.776" y="952.548" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2071" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="380.973"
+    y="384.641" id="text2073" transform="matrix(1.967086, 0, 0, 2.255241, 18.995489, 121.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="364.17"
+    y="368.537" id="text2075" transform="matrix(1.967086, 0, 0, 2.255241, 37.810299, 111.378892)">01-TE015-A</text>
+  <rect x="761.73" y="1070.507" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2077" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="379.933"
+    y="444.04" id="text2079" transform="matrix(1.967086, 0, 0, 2.255241, 20.995489, 106.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="363.13"
+    y="427.936" id="text2081" transform="matrix(1.967086, 0, 0, 2.255241, 43.995491, 98.828065)">01-TE015-B</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="263.902"
+    y="487.153" id="text2083" transform="matrix(1.967086, 0, 0, 2.255241, -13.004511, 83.828065)">01-PT008-B</text>
+  <rect x="523.636" y="1188.88" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2085" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="277.469"
+    y="502.901" id="text2087" transform="matrix(1.967086, 0, 0, 2.255241, -16.004511, 92.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="366.542"
+    y="487.153" id="text2089" transform="matrix(1.967086, 0, 0, 2.255241, 37.144352, 81.927483)">01-PT008-C</text>
+  <rect x="763.687" y="1188.982" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2091" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="380.109"
+    y="502.901" id="text2093" transform="matrix(1.967086, 0, 0, 2.255241, 19.144352, 91.927483)">###.##</text>
+  <rect x="1065.115" y="713.167" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2095" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="564.157"
+    y="282.044" id="text2097" transform="matrix(1.967086, 0, 0, 2.255241, -36.004513, 115.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="554.354"
+    y="265.94" id="text2099" transform="matrix(1.967086, 0, 0, 2.255241, -32.004513, 95.828065)">01-KT001</text>
+  <rect x="1519.433" y="431.199" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2101" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="786.983"
+    y="157.016" id="text2103" transform="matrix(1.967086, 0, 0, 2.255241, -22.004511, 114.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="770.18"
+    y="140.912" id="text2105" transform="matrix(1.967086, 0, 0, 2.255241, -2.004511, 91.828065)">01-PDT007</text>
+  <rect x="1517.328" y="300.54" width="131" height="51" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"
+    id="rect2107" />
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16px;" x="785.777"
+    y="104.795" id="text2109" transform="matrix(1.967086, 0, 0, 2.255241, -22.004511, 101.828065)">###.##</text>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 17px;" x="774.974"
+    y="88.691" id="text2111" transform="matrix(1.967086, 0, 0, 2.255241, -12.112564, 88.3145)">01-TE019</text>
+  <g style="" transform="matrix(1.967086, 0, 0, 2.764776, 509.086395, 21.011166)" id="stop">
+    <path style="stroke: rgb(76, 76, 76); stroke-width: 1; fill: rgb(224, 38, 38);"
+      d="M 160.097 163.649 L 200 148.321 L 200 163.649 L 160.097 148.321 L 160.097 163.649 Z" id="path-1" />
+    <path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1; transform-origin: 180.051px 148.792px;"
+      d="M 180.051 155.918 L 180.051 141.666" id="path-2" />
+    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1;"
+      d="M 180.091 141.868 L 163.816 141.868 L 163.902 140.59 L 164.165 139.38 L 164.515 138.17 L 165.127 137.028 L 165.827 135.952 L 166.614 134.944 L 167.578 133.934 L 168.627 133.061 L 169.764 132.255 L 170.99 131.582 L 172.39 130.909 L 173.79 130.439 L 175.277 129.968 L 176.853 129.699 L 178.428 129.497 L 180.091 129.431 L 181.754 129.497 L 183.415 129.699 L 184.904 129.968 L 186.478 130.439 L 187.879 130.909 L 189.191 131.582 L 190.416 132.255 L 191.642 133.061 L 192.692 133.934 L 193.567 134.944 L 194.441 135.952 L 195.054 137.028 L 195.666 138.17 L 196.017 139.38 L 196.279 140.59 L 196.366 141.868 L 180.091 141.868 Z"
+      id="path-3" />
+  </g>
+</svg>