Merge pull request 'add space' (#43 ) from lavoce into main

Reviewed-on: #43
Merge pull request 'lavoce' (#42 ) from lavoce into main
2026-04-14 07:25:48 +00:00 · 2026-04-10 05:35:38 +00:00 · 2026-02-12 05:32:33 +00:00 · 2026-01-20 04:32:42 +00:00 · 2026-01-13 05:39:38 +00:00 · 2026-01-12 04:29:21 +00:00
16 changed files with 201 additions and 923 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.config

 node_modules
 dist
--- a/public/web.config
+++ b/public/web.config
@@ -3,7 +3,7 @@
    <system.webServer>
        <rewrite>
            <rules>
-                <rule name="reactViteSypiu">
+                <rule name="CallOfDuty">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
--- a/src/api/notification.jsx
+++ b/src/api/notification.jsx
@@ -91,25 +91,6 @@ const searchData = async (queryParams) => {
    return response.data;
 };

-// Reminder Monthly
-const reminderMonthly = async (id, queryParams) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notifikasi-wa/reminder-monthly/${id}`,
-        params: queryParams,
-    });
-    return response.data;
-};
-
-const reminderCustom= async (id, queryParams) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notifikasi-wa/reminder-custom/${id}`,
-        params: queryParams,
-    });
-    return response.data;
-};
-
 export {
    getAllNotification,
    getNotificationById,
@@ -121,6 +102,4 @@ export {
    resendChatByUser,
    resendChatAllUser,
    searchData,
-    reminderMonthly,
-    reminderCustom,
 };
--- a/src/assets/svg/air_dryer_A_rev.svg
+++ b/src/assets/svg/air_dryer_A_rev.svg
@@ -240,8 +240,8 @@
  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517" id="c_4018"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517" id="c_4021"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.772" cy="237.876" rx="13.582" ry="12.517" id="c_4021"/>
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id=""/> -->
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="320.687" rx="13.582" ry="12.517" id="-2"/> -->
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.259" rx="13.582" ry="12.517" id="c_-2"/> -->
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="237.483" rx="13.582" ry="12.517" id="c_-3"/> -->
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id=""/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="320.687" rx="13.582" ry="12.517" id="-2"/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.259" rx="13.582" ry="12.517" id="c_-2"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="237.483" rx="13.582" ry="12.517" id="c_-3"/>
 </svg>
--- a/src/assets/svg/air_dryer_B_rev.svg
+++ b/src/assets/svg/air_dryer_B_rev.svg
@@ -232,7 +232,7 @@
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5008">####.##</text>
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5007">####.##</text>
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5006">##</text>
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.517" rx="13.582" ry="12.517" id=""/> -->
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.517" rx="13.582" ry="12.517" id=""/>
  <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_5019"/>
  <ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_5016"/>
  <ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_5017"/>
@@ -241,7 +241,7 @@
  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517" id="c_5018"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517" id="c_5021"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517" id="c_5021"/>
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="320.662" rx="13.582" ry="12.517" id=""/> -->
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.125" rx="13.582" ry="12.517" id="c_-2"/> -->
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.418" cy="234.26" rx="13.582" ry="12.517" id="c_-3"/> -->
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="320.662" rx="13.582" ry="12.517" id=""/>
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.125" rx="13.582" ry="12.517" id="c_-2"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.418" cy="234.26" rx="13.582" ry="12.517" id="c_-3"/>
 </svg>
--- a/src/assets/svg/air_dryer_C_rev.svg
+++ b/src/assets/svg/air_dryer_C_rev.svg
@@ -232,7 +232,7 @@
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6008">####.##</text>
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6007">####.##</text>
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6006">##</text>
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.517" rx="13.582" ry="12.517" id=""/> -->
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.517" rx="13.582" ry="12.517" id=""/>
  <ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_6019"/>
  <ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_6016"/>
  <ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_6017"/>
@@ -241,7 +241,7 @@
  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517" id="c_6018"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517" id="c_6021"/>
  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.418" cy="237.483" rx="13.582" ry="12.517" id="c_6021"/>
-  <!-- <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.692" rx="13.582" ry="12.517" id="c_-2"/> -->
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.095" rx="13.582" ry="12.517" id=""/> -->
-  <!-- <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.418" cy="237.483" rx="13.582" ry="12.517" id="c_-3"/> -->
+  <ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="763.418" cy="322.692" rx="13.582" ry="12.517" id="c_-2"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.095" rx="13.582" ry="12.517" id=""/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.418" cy="237.483" rx="13.582" ry="12.517" id="c_-3"/>
 </svg>
--- a/src/assets/svg/overview-airdryer.svg
+++ b/src/assets/svg/overview-airdryer.svg
@@ -3,12 +3,12 @@
  <defs>
    <bx:grid x="0" y="0" width="25" height="25"/>
  </defs>
-  <rect x="12.259" y="8.086" width="924.818" height="441.914" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
-  <rect x="25" y="66.111" width="900" height="358.889" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
-  <rect x="75.168" y="97.354" width="100.126" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="75.168" y="118.75" width="100.126" height="43.75" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="150.26" cy="129.561" rx="11.265" ry="9.613"/>
-  <g transform="matrix(1.133434, 0, 0, 1.08014, 15.782269, 151.992333)" style="">
+  <rect x="12.226" y="12.005" width="924.818" height="476.396" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <rect x="25" y="75" width="900" height="400" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
+  <rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
+  <g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
    <path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
@@ -53,31 +53,31 @@
    <path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
    <path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
  </g>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">AirDryer A</text>
-  <rect x="75.168" y="140.625" width="99.958" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)" id="c_4009">####</text>
-  <rect x="75" y="206.73" width="100.126" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="75" y="228.125" width="100.126" height="43.75" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="150.092" cy="238.935" rx="11.265" ry="9.613"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">AirDryer B</text>
-  <rect x="75" y="250" width="99.958" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)" id="c_5009">####</text>
-  <rect x="75" y="316.104" width="100.126" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="75" y="337.5" width="100.126" height="43.75" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="150.092" cy="348.311" rx="11.265" ry="9.613"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">AirDryer C</text>
-  <rect x="75" y="359.375" width="99.958" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)" id="c_6009">####</text>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 275.084 118.75 L 375.042 118.75 L 375.042 250 L 425.021 250"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 275.084 228.125 L 375.042 228.125 L 375.042 250 L 425.021 250"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 275.084 337.5 L 375.042 337.5 L 375.042 250 L 425.021 250"/>
-  <g transform="matrix(0.99958, 0, 0, 0.875, 75.168186, -78.125439)" style="">
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">AirDryer A</text>
+  <rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
+  <rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">AirDryer B</text>
+  <rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
+  <rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">AirDryer C</text>
+  <rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 125 L 350 125 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 250 L 350 250 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 375 L 350 375 L 350 275 L 400 275"/>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
@@ -96,17 +96,17 @@
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
  </g>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 549.968 228.125 L 599.947 228.125 L 599.947 184.375 L 749.884 184.375"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 549.968 228.125 L 599.947 228.125 L 599.947 359.375 L 749.884 359.375"/>
-  <rect x="424.853" y="140.506" width="125.116" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="425.021" y="162.5" width="124.947" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="425.352" y="167.628" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">PLC AirDryer</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">IP : 192.168.0.3</text>
-  <rect x="749.884" y="96.756" width="125.116" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="750.053" y="118.75" width="124.947" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">PC Station</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">IP : 192.168.0.2</text>
-  <g transform="matrix(0.99958, 0, 0, 0.875, 75.168186, 96.875524)" style="">
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 400 L 725 400"/>
+  <rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="425.352" y="167.628">PLC AirDryer</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.3</text>
+  <rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, 99.999998)" style="">
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
@@ -125,13 +125,13 @@
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
  </g>
-  <rect x="749.716" y="271.756" width="125.116" height="21.994" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="749.884" y="293.75" width="124.947" height="21.875" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="317.628" transform="matrix(0.99958, 0, 0, 0.875, 25.188995, 9.375002)">PC Server</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(0.99958, 0, 0, 0.875, 22.190208, 31.131118)">IP : 192.168.0.99<tspan x="751.0999755859375" dy="1em"></tspan></text>
+  <rect x="724.832" y="299.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725" y="325" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="317.628">PC Server</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3.000031, 24.863983)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em"></tspan></text>
  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="316.458" y="50.984">OVERVIEW AIR DRYER</text>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 649.927 75 L 649.927 109.235 L 649.927 240.485 L 649.927 425"/>
-  <g transform="matrix(0.999579, 0, 0, 0.777807, -1032.377984, 48.060908)" style="">
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 475"/>
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1058.006891, 44.212168)" style="">
    <g id="Group_Base" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
@@ -234,7 +234,7 @@
      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
    </g>
  </g>
-  <g transform="matrix(0.999579, 0, 0, 0.777807, -1035.419488, 157.436745)" style="">
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1061.049982, 169.212228)" style="">
    <g id="group-1" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
@@ -337,7 +337,7 @@
      <path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
    </g>
  </g>
-  <g transform="matrix(0.999579, 0, 0, 0.777807, -1035.419366, 266.810713)" style="">
+  <g transform="matrix(0.999999, 0, 0, 0.888921, -1061.04986, 294.212174)" style="">
    <g id="group-9" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
      <path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z   "/>
--- a/src/assets/svg/overview-compressor.svg
+++ b/src/assets/svg/overview-compressor.svg
@@ -3,12 +3,12 @@
  <defs>
    <bx:grid x="0" y="0" width="25" height="25"/>
  </defs>
-  <rect y="12.005" width="924.818" height="437.995" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" x="12.012"/>
-  <rect y="59" width="900" height="375" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);" x="25"/>
-  <rect x="75" y="98.845" width="100.147" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="75" y="121.667" width="100.147" height="46.667" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="150.108" cy="133.198" rx="11.267" ry="10.255"/>
-  <g transform="matrix(1.115917, 0, 0, 1.04224, 14.334309, 48.503848)" style="">
+  <rect x="12.226" y="12.005" width="924.818" height="462.995" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <rect x="25" y="75" width="900" height="375" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
+  <rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678418, 46.611243)" style="">
    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
@@ -47,7 +47,7 @@
    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
  </g>
-  <g transform="matrix(1.133672, 0, 0, 1.15215, 15.601832, 157.124169)" style="">
+  <g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
    <path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
    <path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
    <path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
@@ -92,28 +92,28 @@
    <path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
    <path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
  </g>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">COMPRESSOR A</text>
-  <rect x="75" y="145" width="99.979" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)" id="c_1012">####</text>
-  <rect x="74.832" y="215.511" width="100.147" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="74.832" y="238.333" width="100.147" height="46.667" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="149.941" cy="249.865" rx="11.267" ry="10.255"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">COMPRESSOR B</text>
-  <rect x="74.832" y="261.667" width="99.979" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)" id="c_2012">####</text>
-  <rect x="74.832" y="332.178" width="100.147" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="74.832" y="355" width="100.147" height="46.667" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
-  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="149.941" cy="366.531" rx="11.267" ry="10.255"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">COMPRESSOR C</text>
-  <rect x="74.832" y="378.333" width="99.979" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">On/Off</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">H</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)" id="c_3012">####</text>
-  <g transform="matrix(1.115917, 0, 0, 1.04224, 14.334339, 165.170587)" style="">
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">COMPRESSOR A</text>
+  <rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
+  <rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">COMPRESSOR B</text>
+  <rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
+  <rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
+  <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">COMPRESSOR C</text>
+  <rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678391, 171.611261)" style="">
    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
@@ -152,7 +152,7 @@
    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
  </g>
-  <g transform="matrix(1.115917, 0, 0, 1.04224, 14.334345, 281.837234)" style="">
+  <g transform="matrix(1.116151, 0, 0, 1.116686, -10.678387, 296.611283)" style="">
    <path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
    <path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
    <path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
@@ -191,10 +191,10 @@
    <path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
    <path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
  </g>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 324.947 121.667 L 374.937 121.667 L 374.937 261.667 L 424.926 261.667"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 324.947 238.333 L 374.937 238.333 L 374.937 261.667 L 424.926 261.667"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 324.947 355 L 374.937 355 L 374.937 261.667 L 424.926 261.667"/>
-  <g transform="matrix(0.99979, 0, 0, 0.933333, 75.000027, -88.333371)" style="">
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 125 L 350 125 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 250 L 350 250 L 350 275 L 400 275"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 375 L 350 375 L 350 275 L 400 275"/>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
@@ -213,17 +213,17 @@
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
  </g>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 549.901 238.333 L 599.89 238.333 L 599.89 191.667 L 749.858 191.667"/>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 549.901 238.333 L 599.89 238.333 L 599.89 355 L 749.858 355"/>
-  <rect x="424.759" y="144.873" width="125.142" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="424.926" y="168.333" width="124.974" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="417.352" y="167.628" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">PLC Compressor</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">IP : 192.168.0.1</text>
-  <rect x="749.858" y="98.206" width="125.142" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="750.026" y="121.667" width="124.974" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">PC Station</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">IP : 192.168.0.2</text>
-  <g transform="matrix(0.99979, 0, 0, 0.933333, 75.000027, 75.000027)" style="">
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 375 L 725 375"/>
+  <rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="417.352" y="167.628">PLC Compressor</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.1</text>
+  <rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
+  <g transform="matrix(1, 0, 0, 1, 49.999999, 74.999996)" style="">
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
    <path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
@@ -242,10 +242,10 @@
    <path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
    <circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
  </g>
-  <rect x="749.69" y="261.667" width="125.142" height="23.46" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
-  <rect x="749.858" y="285.127" width="124.974" height="23.333" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="292.764" transform="matrix(0.99979, 0, 0, 0.933333, 25.010492, 5.000001)">PC Server</text>
-  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(0.99979, 0, 0, 0.933333, 22.011123, 5.000001)">IP : 192.168.0.99<tspan x="751.0999755859375" dy="1em"></tspan></text>
+  <rect x="724.832" y="275" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
+  <rect x="725" y="300.136" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="292.764">PC Server</text>
+  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3, 0)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em"></tspan></text>
  <text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="312.458" y="50.984">OVERVIEW COMPRESSOR</text>
-  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 649.879 60.253 L 649.879 99.16 L 649.879 248.324 L 649.879 433.164"/>
+  <path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 450"/>
 </svg>
--- a/src/components/Global/AppInput.jsx
+++ b/src/components/Global/AppInput.jsx
@@ -1,52 +0,0 @@
-import { Input } from "antd";
-import { useEffect, useState, useRef } from "react";
-
-const InputNumber = ({ 
-    name,
-    value = 0,
-    onChange,
-    ...props
-}) => {
-    const [inputValue, setInputValue] = useState(
-        value !== null && value !== undefined ? value.toString() : ''
-    );
-
-    useEffect(() => {
-        const newValue = value !== null && value !== undefined ? value.toString() : '';
-        setInputValue(newValue);
-    }, [value]);
-
-    const handleChange = (e) => {
-        const rawValue = e.target.value;
-        if (/^\d*$/.test(rawValue)) {
-            setInputValue(rawValue);
-            const numValue = rawValue === '' ? 0 : parseInt(rawValue, 10);
-            
-            // Kirim event object sintetis yang konsisten dengan handler biasa
-            onChange?.({
-                target: {
-                    name: name,
-                    value: numValue
-                }
-            });
-        }
-    };
-
-    const handleFocus = (e) => {
-        // Pilih semua teks saat fokus (opsional)
-        e.target.select();
-    };
-
-    return (
-        <Input
-            {...props}
-            name={name} // Teruskan name ke input
-            value={inputValue}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            style={{ textAlign: 'left' }}
-        />
-    );
-};
-
-export { InputNumber };
--- a/src/components/Global/MqttConnection.jsx
+++ b/src/components/Global/MqttConnection.jsx
@@ -99,17 +99,13 @@ const handleBoolean = (svg, el, value) => {
    const id1 = dryerIds[i - (i % 2)];
    const id2 = dryerIds[i - (i % 2) + 1];

-    const els1 = svg.querySelectorAll(`#${id1}`);
-    const els2 = svg.querySelectorAll(`#${id2}`);
+    const el1 = svg.getElementById(id1);
+    const el2 = svg.getElementById(id2);

-    if (!els1 || !els2) return;
+    if (!el1 || !el2) return;

-    els1.forEach(el => {
-        el.style.fill = value ? 'rgb(216,216,216)' : 'rgb(255, 204, 63)';
-    });
-    els2.forEach(el => {
-        el.style.fill = value ? 'rgb(255, 204, 63)' : 'rgb(216,216,216)';
-    });
+    el1.style.fill = value ? 'rgb(216,216,216)' : 'yellow';
+    el2.style.fill = value ? 'yellow' : 'rgb(216,216,216)';
 };

 const handleNumber = (el, value) => {
--- a/src/components/Global/ToastNotif.jsx
+++ b/src/components/Global/ToastNotif.jsx
@@ -20,19 +20,6 @@ const NotifOk = ({ icon, title, message }) => {
    });
 };

-const NotifSmall = ({ icon, title, message }) => {
-    Swal.fire({
-        toast: true,
-        position: 'top-end',
-        icon: icon,
-        title: title,
-        text: message,
-        showConfirmButton: false,
-        timer: 2000,
-        timerProgressBar: true,
-    });
-};
-
 const NotifConfirmDialog = ({
    icon,
    title,
@@ -80,4 +67,4 @@ const QuestionConfirmSubmit = ({ icon, title, message, onConfirm, onCancel }) =>
    });
 };

-export { NotifAlert, NotifOk, NotifSmall, NotifConfirmDialog, QuestionConfirmSubmit };
+export { NotifAlert, NotifOk, NotifConfirmDialog, QuestionConfirmSubmit };
--- a/src/pages/contact/component/DetailContact.jsx
+++ b/src/pages/contact/component/DetailContact.jsx
@@ -13,7 +13,6 @@ const DetailContact = memo(function DetailContact(props) {
        id: '',
        name: '',
        phone: '',
-        email: '',
        is_active: true,
    };

@@ -35,22 +34,6 @@ const DetailContact = memo(function DetailContact(props) {
                [name]: value,
            }));
        }
-
-        if (name === 'email') {
-            const email = value.trim();
-            setFormData((prev) => ({
-                ...prev,
-                [name]: email,
-            }));
-
-            setErrors((prev) => ({
-                ...prev,
-                email:
-                    email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-                        ? 'Format email tidak valid'
-                        : '',
-            }));
-        }
    };

  
@@ -68,7 +51,6 @@ const DetailContact = memo(function DetailContact(props) {
        const validationRules = [
            { field: 'name', label: 'Contact Name', required: true },
            { field: 'phone', label: 'Phone', required: true },
-            { field: 'email', label: 'Email', required: false },
        ];

        if (
@@ -102,23 +84,10 @@ const DetailContact = memo(function DetailContact(props) {
            return;
        }

-        // Validasi Email
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (formData.email && !emailRegex.test(formData.email.trim())) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Format email tidak valid.',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
        try {
            const contactData = {
                contact_name: formData.name,
                contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
-                email: formData.email?.trim(),
                is_active: formData.is_active,
            };

@@ -165,7 +134,6 @@ const DetailContact = memo(function DetailContact(props) {
                setFormData({
                    name: props.selectedData.contact_name || props.selectedData.name,
                    phone: props.selectedData.contact_phone || props.selectedData.phone,
-                    email: props.selectedData.contact_email || props.selectedData.email,
                    is_active:
                        props.selectedData.is_active || props.selectedData.status === 'active',
                });
@@ -173,7 +141,6 @@ const DetailContact = memo(function DetailContact(props) {
                setFormData({
                    name: '',
                    phone: '',
-                    email: '',
                    is_active: true,
                });
            }
@@ -282,19 +249,6 @@ const DetailContact = memo(function DetailContact(props) {
                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
                    />
                </div>
-                <div style={{ marginBottom: 12 }}>
-                    <Text strong>Email</Text>
-                    {/* <Text style={{ color: 'red' }}> *</Text> */}
-                    <Input
-                        name="email"
-                        value={formData.email}
-                        onChange={handleInputChange}
-                        placeholder="Enter Email Number"
-                        readOnly={props.readOnly}
-                        maxLength={64}
-                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
-                    />
-                </div>
                {/* Contact Type */}
                {/* <div style={{ marginBottom: 12 }}>
                    <Text strong>Contact Type</Text>
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/src/pages/master/device/component/DetailDevice.jsx
@@ -1,22 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import {
-    Modal,
-    Input,
-    Divider,
-    Typography,
-    Switch,
-    Button,
-    ConfigProvider,
-    Select,
-    DatePicker,
-} from 'antd';
-import { NotifAlert, NotifOk, NotifSmall } from '../../../../components/Global/ToastNotif';
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createDevice, updateDevice } from '../../../../api/master-device';
-import { reminderMonthly, reminderCustom } from '../../../../api/notification';
 import { getAllBrands } from '../../../../api/master-brand';
 import { validateRun } from '../../../../Utils/validate';
-import { toApiDateFormatter } from '../../../../components/Global/Formatter';
-import dayjs from 'dayjs';

 const { Text } = Typography;
 const { TextArea } = Input;
@@ -36,12 +23,7 @@ const DetailDevice = (props) => {
        device_location: '',
        device_description: '',
        ip_address: '',
-        listen_channel: null,
-        reminder_at: null,
-        reminder_at_monthly: null,
-        start_date: null,
-        end_date: null,
-        period: null,
+        listen_channel: '',
    };

    const [formData, setFormData] = useState(defaultData);
@@ -85,26 +67,12 @@ const DetailDevice = (props) => {
                ip_address: formData.ip_address,
                brand_id: formData.brand_id,
                listen_channel: formData.listen_channel,
-                listen_channel_reminder: formData.listen_channel_reminder,
-                reminder_at: formData.reminder_at,
-                reminder_at_monthly: formData.period !== 'custom' ? formData.reminder_at_monthly : null,
-                start_date: formData.start_date,
-                end_date: formData.end_date,
            };

-            console.log(payload);
-
            const response = formData.device_id
                ? await updateDevice(formData.device_id, payload)
                : await createDevice(payload);

-            const response2 = formData.period !== 'custom'
-                ? await updateDevice(formData.device_id, { reminder_at_monthly: formData.reminder_at_monthly,})
-                : await updateDevice(formData.device_id, {
-                                                            start_date: formData.start_date, 
-                                                            end_date: formData.end_date,
-                                                        });
-
            // Check if response is successful
            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                const deviceName = response.data?.device_name || formData.device_name;
@@ -125,25 +93,6 @@ const DetailDevice = (props) => {
                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
                });
            }
-
-            // Check if response Reminder At(Monthly) or Period are successful
-            const tipe = formData.period !== 'custom' ? 'Reminder At(Monthly)' : 'Period';
-            if (response2 && (response2.statusCode === 200 || response2.statusCode === 201)) {
-                NotifSmall({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `${tipe} berhasil disimpan`,
-                });
-            } else {
-                NotifSmall({
-                    icon: 'error',
-                    title: 'Gagal',
-                    message:
-                        response?.message ||
-                        `Terjadi kesalahan saat menyimpan ${tipe}`,
-                });
-            }
-
        } catch (error) {
            console.error('Save Device Error:', error);
            NotifAlert({
@@ -179,13 +128,6 @@ const DetailDevice = (props) => {
        });
    };

-    const handleDateChange = (field, value) => {
-        setFormData({
-            ...formData,
-            [field]: value,
-        });
-    };
-
    // Fungsi untuk mengambil daftar brand
    const fetchBrands = async () => {
        setLoadingBrands(true);
@@ -206,56 +148,6 @@ const DetailDevice = (props) => {
        }
    };

-    useEffect(() => {
-        if (formData.start_date && formData.end_date) {
-            const start = dayjs(formData.start_date);
-            const end = dayjs(formData.end_date);
-
-            let periodValue = 'custom';
-
-            if (end.isSame(start.add(1, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '1';
-            } else if (end.isSame(start.add(3, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '3';
-            } else if (end.isSame(start.add(6, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '6';
-            }
-
-            setFormData((prev) => ({
-                ...prev,
-                period: periodValue,
-            }));
-        }
-    }, [formData.start_date, formData.end_date]);
-
-    const handleMonthly = (field, value) => {
-    setFormData((prev) => {
-        const data = {
-            ...prev,
-            [field]: value,
-        };
-
-        if (value !== 'custom') {
-            const months = Number(value);
-
-            const startDate = dayjs().startOf('day');
-            const endDate = startDate
-                .add(months, 'month')
-                .subtract(1, 'day')
-                .endOf('day');
-
-            data.start_date = startDate.toISOString();
-            data.end_date = endDate.toISOString();
-            data.reminder_at_monthly = null;
-        } else {
-            data.start_date = null;
-            data.end_date = null;
-        }
-
-        return data;
-    });
-};
-
    useEffect(() => {
        if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
            fetchBrands();
@@ -277,8 +169,8 @@ const DetailDevice = (props) => {
                props.actionMode === 'add'
                    ? 'Tambah'
                    : props.actionMode === 'preview'
-                      ? 'Preview'
-                      : 'Edit'
+                    ? 'Preview'
+                    : 'Edit'
            } Device`}
            open={props.showModal}
            // open={true}
@@ -326,10 +218,9 @@ const DetailDevice = (props) => {
                </React.Fragment>,
            ]}
        >
-            <Divider />
            {formData && (
                <div>
-                    <div style={{ marginBottom: 12 }}>
+                    <div>
                        <div>
                            <Text strong>Device Status</Text>
                        </div>
@@ -356,7 +247,7 @@ const DetailDevice = (props) => {
                            </div>
                        </div>
                    </div>
-                    {/* <Divider style={{ margin: '12px 0' }} /> */}
+                    <Divider style={{ margin: '12px 0' }} />
                    <div hidden>
                        <Text strong>Device ID</Text>
                        <Input
@@ -439,149 +330,15 @@ const DetailDevice = (props) => {
                            readOnly={props.readOnly}
                        />
                    </div>
-                    <div style={{ marginBottom: 12 }}></div>
-                    <div style={{ marginBottom: 12 }}></div>
-                    <div style={{ display: 'flex', gap: 16 }}>
-                        <div style={{ flex: 1 }}>
-                            {' '}
-                            <Text strong>Channel Error</Text>
-                            <Input
-                                name="listen_channel"
-                                value={formData.listen_channel}
-                                onChange={handleInputChange}
-                                placeholder="Enter Listen Channel"
-                                readOnly={props.readOnly}
-                            />
-                        </div>
-                        <div style={{ flex: 1 }}>
-                            <Text strong>Channel Reminder</Text>
-                            <Input
-                                name="listen_channel_reminder"
-                                value={formData.listen_channel_reminder}
-                                onChange={handleInputChange}
-                                placeholder="Enter Listen Channel Reminder"
-                                readOnly={props.readOnly}
-                            />
-                        </div>
-                    </div>
                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Reminder At(Yearly)</Text>
-                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                            <DatePicker
-                                value={
-                                    formData.reminder_at
-                                        ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
-                                        : null
-                                }
-                                onChange={(date) =>
-                                    handleDateChange(
-                                        'reminder_at',
-                                        date ? date.toISOString() : null
-                                    )
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-
-                            <Button
-                                danger
-                                onClick={() =>
-                                    setFormData((prev) => ({
-                                        ...prev,
-                                        reminder_at: null,
-                                    }))
-                                }
-                            >
-                                Clear
-                            </Button>
-                        </div>
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Period</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-
-                        <Select
-                            value={formData.period}
-                            onChange={(value) => handleMonthly('period', value)}
-                            placeholder="Select Period"
-                            style={{ width: '100%' }}
-                        >
-                            <Select.Option value="1">1 Monthly</Select.Option>
-                            <Select.Option value="3">3 Monthly</Select.Option>
-                            <Select.Option value="6">6 Monthly</Select.Option>
-                            <Select.Option value="custom">Custom</Select.Option>
-                        </Select>
-                    </div>
-                    {formData.period === 'custom' && (
-                        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
-                            <DatePicker
-                                placeholder="Start Date"
-                                value={formData.start_date ? dayjs(formData.start_date) : null}
-                                onChange={(date) =>
-                                    handleDateChange('start_date', date ? date.toISOString() : null)
-                                }
-                                disabledDate={(current) =>
-                                    formData.end_date &&
-                                    current &&
-                                    current.isAfter(dayjs(formData.end_date), 'day')
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-
-                            <DatePicker
-                                placeholder="End Date"
-                                value={formData.end_date ? dayjs(formData.end_date) : null}
-                                onChange={(date) =>
-                                    handleDateChange('end_date', date ? date.toISOString() : null)
-                                }
-                                disabledDate={(current) =>
-                                    formData.start_date &&
-                                    current &&
-                                    current.isBefore(dayjs(formData.start_date), 'day')
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-                        </div>
-                    )}
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Reminder At(Monthly)</Text>
-                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                            <DatePicker
-                                disabled={formData.period === 'custom'}
-                                value={
-                                    formData.reminder_at_monthly
-                                        ? dayjs(formData.reminder_at_monthly) // ✅ langsung parse ISO
-                                        : null
-                                }
-                                onChange={(date) =>
-                                    handleDateChange(
-                                        'reminder_at_monthly',
-                                        date ? date.toISOString() : null
-                                    )
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-
-                            <Button
-                                disabled={formData.period === 'custom'}
-                                danger
-                                onClick={() =>
-                                    setFormData((prev) => ({
-                                        ...prev,
-                                        reminder_at_monthly: null,
-                                    }))
-                                }
-                            >
-                                Clear
-                            </Button>
-                        </div>
+                        <Text strong>Listen Channel</Text>
+                        <Input
+                            name="listen_channel"
+                            value={formData.listen_channel}
+                            onChange={handleInputChange}
+                            placeholder="Enter Listen Channel"
+                            readOnly={props.readOnly}
+                        />
                    </div>
                    <div style={{ marginBottom: 12 }}>
                        <Text strong>Device Description</Text>
--- a/src/pages/master/sparepart/component/DetailSparepart.jsx
+++ b/src/pages/master/sparepart/component/DetailSparepart.jsx
@@ -11,7 +11,6 @@ import {
    Row,
    Col,
    Image,
-    Checkbox,
 } from 'antd';
 import { PlusOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
@@ -38,68 +37,9 @@ const DetailSparepart = (props) => {
    const [previewTitle, setPreviewTitle] = useState('');
    const [isHovering, setIsHovering] = useState(false);

-    const optionsMonthly = [
-        {
-            key: 1,
-            value: 1,
-            text: '1 Month',
-        },
-        {
-            key: 3,
-            value: 3,
-            text: '3 Month',
-        },
-        {
-            key: 6,
-            value: 6,
-            text: '6 Month',
-        },
-    ];
-
-    const optionsYearly = [
-        {
-            key: 1,
-            value: 1,
-            text: '1 Year',
-        },
-        {
-            key: 2,
-            value: 2,
-            text: '2 Year',
-        },
-        {
-            key: 3,
-            value: 3,
-            text: '3 Year',
-        },
-        {
-            key: 4,
-            value: 4,
-            text: '4 Year',
-        },
-        {
-            key: 5,
-            value: 5,
-            text: '5 Year',
-        },
-        {
-            key: 6,
-            value: 6,
-            text: '6 Year',
-        },
-    ];
-    const [checkedListM, setCheckedListM] = useState([]);
-    const [checkAllM, setCheckAllM] = useState(false);
-    const [indeterminateM, setIndeterminateM] = useState(false);
-
-    const [checkedList, setCheckedList] = useState([]);
-    const [checkAll, setCheckAll] = useState(false);
-    const [indeterminate, setIndeterminate] = useState(false);
-
    const defaultData = {
        sparepart_id: '',
        sparepart_name: '',
-        sparepart_number: '',
        sparepart_description: '',
        sparepart_model: '',
        sparepart_item_type: null,
@@ -296,10 +236,6 @@ const DetailSparepart = (props) => {
                payload.sparepart_foto = imageUrl;
            }

-            payload.sparepart_number = formData.sparepart_number;
-            payload.sparepart_yearly = checkedList;
-            payload.sparepart_monthly = checkedListM;
-
            // console.log('Sending payload:', payload);

            const response = formData.sparepart_id
@@ -346,36 +282,6 @@ const DetailSparepart = (props) => {
        setFormData({ ...formData, [name]: value });
    };

-    const onChangeCheckboxM = (list) => {
-        setCheckedListM(list);
-
-        setIndeterminateM(!!list.length && list.length < optionsMonthly.length);
-        setCheckAllM(list.length === optionsMonthly.length);
-    };
-
-    const onCheckAllChangeM = (e) => {
-        const checked = e.target.checked;
-
-        setCheckedListM(checked ? optionsMonthly.map((item) => item.value) : []);
-        setIndeterminateM(false);
-        setCheckAllM(checked);
-    };
-
-    const onChangeCheckbox = (list) => {
-        setCheckedList(list);
-
-        setIndeterminate(!!list.length && list.length < optionsYearly.length);
-        setCheckAll(list.length === optionsYearly.length);
-    };
-
-    const onCheckAllChange = (e) => {
-        const checked = e.target.checked;
-
-        setCheckedList(checked ? optionsYearly.map((item) => item.value) : []);
-        setIndeterminate(false);
-        setCheckAll(checked);
-    };
-
    useEffect(() => {
        if (props.selectedData) {
            setFormData(props.selectedData);
@@ -412,19 +318,9 @@ const DetailSparepart = (props) => {
            } else {
                setFileList([]);
            }
-            setCheckedListM(JSON.parse(props.selectedData.sparepart_monthly));
-            setCheckedList(JSON.parse(props.selectedData.sparepart_yearly));
        } else {
            setFormData(defaultData);
            setFileList([]);
-
-            setIndeterminateM(false);
-            setCheckedListM([]);
-            setCheckAllM(false);
-
-            setIndeterminate(false);
-            setCheckedList([]);
-            setCheckAll(false);
        }
    }, [props.showModal, props.selectedData, props.actionMode]);

@@ -437,13 +333,12 @@ const DetailSparepart = (props) => {

    return (
        <Modal
-            width="40rem"
            title={`${
                props.actionMode === 'add'
                    ? 'Tambah'
                    : props.actionMode === 'preview'
-                      ? 'Preview'
-                      : 'Edit'
+                    ? 'Preview'
+                    : 'Edit'
            } Sparepart`}
            open={props.showModal}
            onCancel={handleCancel}
@@ -568,7 +463,7 @@ const DetailSparepart = (props) => {
                                        <div
                                            style={{
                                                width: '180px', // Fixed width for square
-                                                height: '240px',
+                                                height: '180px',
                                                border: '1px dashed #d9d9d9',
                                                borderRadius: '8px',
                                                display: 'flex',
@@ -590,17 +485,6 @@ const DetailSparepart = (props) => {
                        {/* Kolom untuk field lainnya */}
                        <Col span={14}>
                            <Row gutter={[16, 16]}>
-                                <Col span={24}>
-                                    <Text strong>Part Number</Text>
-                                    <Text style={{ color: 'red' }}> *</Text>
-                                    <Input
-                                        name="sparepart_number"
-                                        value={formData.sparepart_number}
-                                        onChange={handleInputChange}
-                                        placeholder="Enter Sparepart Number"
-                                        readOnly={props.readOnly}
-                                    />
-                                </Col>
                                <Col span={24}>
                                    <Text strong>Sparepart Name</Text>
                                    <Text style={{ color: 'red' }}> *</Text>
@@ -676,78 +560,7 @@ const DetailSparepart = (props) => {
                            />
                        </Col>
                    </Row>
-                    <ConfigProvider
-                        theme={{
-                            token: {
-                                colorPrimary: '#23A55A',
-                            },
-                        }}
-                    >

-                        {/* Yearly */}
-                        <Row style={{ marginTop: 16 }}>
-                            <Col>
-                                <Checkbox
-                                    indeterminate={indeterminate}
-                                    onChange={onCheckAllChange}
-                                    checked={checkAll}
-                                >
-                                    {checkAll ? 'Unselect All Years' : 'Select All Years'}
-                                </Checkbox>
-                            </Col>
-                        </Row>
-                        <Row style={{ marginTop: 10 }}>
-                            <Col span={24}>
-                                <Checkbox.Group
-                                    value={checkedList}
-                                    onChange={onChangeCheckbox}
-                                    style={{
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                    }}
-                                >
-                                    {optionsYearly.map((item) => (
-                                        <Checkbox key={item.key} value={item.value}>
-                                            {item.text}
-                                        </Checkbox>
-                                    ))}
-                                </Checkbox.Group>
-                            </Col>
-                        </Row>
-
-                        {/* Monthly */}
-                        <Row style={{ marginTop: 16 }}>
-                            <Col>
-                                <Checkbox
-                                    indeterminate={indeterminateM}
-                                    onChange={onCheckAllChangeM}
-                                    checked={checkAllM}
-                                >
-                                    {checkAllM ? 'Unselect All Months' : 'Select All Months'}
-                                </Checkbox>
-                            </Col>
-                        </Row>
-                        <Row style={{ marginTop: 10 }}>
-                            <Col span={24}>
-                                <Checkbox.Group
-                                    value={checkedListM}
-                                    onChange={onChangeCheckboxM}
-                                    style={{
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                    }}
-                                >
-                                    {optionsMonthly.map((item) => (
-                                        <Checkbox key={item.key} value={item.value}>
-                                            {item.text}
-                                        </Checkbox>
-                                    ))}
-                                </Checkbox.Group>
-                            </Col>
-                        </Row>
-                    </ConfigProvider>
                    <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                        <Col span={24}>
                            <Text strong>Description</Text>
--- a/src/pages/master/sparepart/component/ListSparepart.jsx
+++ b/src/pages/master/sparepart/component/ListSparepart.jsx
@@ -36,12 +36,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
        key: 'sparepart_name',
        width: '20%',
    },
-    {
-        title: 'Sparepart Number',
-        dataIndex: 'sparepart_number',
-        key: 'sparepart_number',
-        width: '20%',
-    },
    {
        title: 'Description',
        dataIndex: 'sparepart_description',
@@ -283,8 +277,8 @@ const ListSparepart = memo(function ListSparepart(props) {
                            onStockUpdate={doFilter}
                            onGetData={(data) => {
                                if(data && data.length > 0) {
-                                    // console.log('Sample sparepart data from API:', data[0]);
-                                    // console.log('Available fields:', Object.keys(data[0] || {}));
+                                    console.log('Sample sparepart data from API:', data[0]);
+                                    console.log('Available fields:', Object.keys(data[0] || {}));
                                }
                            }} // Log untuk debugging field-field yang tersedia
                        />
--- a/src/pages/notificationDetail/IndexNotificationDetail.jsx
+++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx
@@ -102,8 +102,6 @@ const transformNotificationData = (apiData) => {
            brand_name: apiData.brand_name,
        },
        users: apiData.users || [],
-        is_reminder: apiData.is_reminder || false,
-        spareparts_reminder: apiData.spareparts_reminder || [],
    };
 };

@@ -355,7 +353,7 @@ const NotificationDetailTab = (props) => {
                            }}
                        >
                            <Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
-                                Notification Detail
+                                Error Notification Detail
                            </Typography.Title>
                        </div>
                    </div>
@@ -363,61 +361,59 @@ const NotificationDetailTab = (props) => {
                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
                        <Row gutter={[8, 8]}>
                            {/* Kolom Kiri: Data Kompresor */}
-
-                            {notification.is_reminder == false && (
-                                <Col xs={24} lg={8}>
-                                    <Card
-                                        size="small"
-                                        style={{ height: '100%', borderColor: '#d4380d' }}
-                                        bodyStyle={{ padding: '16px' }}
+                            <Col xs={24} lg={8}>
+                                <Card
+                                    size="small"
+                                    style={{ height: '100%', borderColor: '#d4380d' }}
+                                    bodyStyle={{ padding: '16px' }}
+                                >
+                                    <Space
+                                        direction="vertical"
+                                        size="large"
+                                        style={{ width: '100%' }}
                                    >
-                                        <Space
-                                            direction="vertical"
-                                            size="large"
-                                            style={{ width: '100%' }}
-                                        >
-                                            <Row gutter={16} align="middle">
-                                                <Col>
-                                                    <div
-                                                        style={{
-                                                            width: '32px',
-                                                            height: '32px',
-                                                            borderRadius: '50%',
-                                                            backgroundColor: '#d4380d',
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            color: '#ffffff',
-                                                            fontSize: '18px',
-                                                        }}
-                                                    >
-                                                        <CloseOutlined />
-                                                    </div>
-                                                </Col>
-                                                <Col>
-                                                    <Text>{notification.title}</Text>
-                                                    <div style={{ marginTop: '2px' }}>
-                                                        <Text strong style={{ fontSize: '16px' }}>
-                                                            Error Code {notification.issue}
-                                                        </Text>
-                                                    </div>
-                                                </Col>
-                                            </Row>
-                                            <div>
-                                                <Text strong>Plant Subsection</Text>
-                                                <div>{notification.location}</div>
-                                                <Text
-                                                    strong
-                                                    style={{ display: 'block', marginTop: '8px' }}
+                                        <Row gutter={16} align="middle">
+                                            <Col>
+                                                <div
+                                                    style={{
+                                                        width: '32px',
+                                                        height: '32px',
+                                                        borderRadius: '50%',
+                                                        backgroundColor: '#d4380d',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        color: '#ffffff',
+                                                        fontSize: '18px',
+                                                    }}
                                                >
-                                                    Date & Time
-                                                </Text>
-                                                <div>{notification.timestamp}</div>
-                                            </div>
-                                        </Space>
-                                    </Card>
-                                </Col>
-                            )}
+                                                    <CloseOutlined />
+                                                </div>
+                                            </Col>
+                                            <Col>
+                                                <Text>{notification.title}</Text>
+                                                <div style={{ marginTop: '2px' }}>
+                                                    <Text strong style={{ fontSize: '16px' }}>
+                                                        Error Code {notification.issue}
+                                                    </Text>
+                                                </div>
+                                            </Col>
+                                        </Row>
+                                        <div>
+                                            <Text strong>Plant Subsection</Text>
+                                            <div>{notification.location}</div>
+                                            <Text
+                                                strong
+                                                style={{ display: 'block', marginTop: '8px' }}
+                                            >
+                                                Date & Time
+                                            </Text>
+                                            <div>{notification.timestamp}</div>
+                                        </div>
+                                    </Space>
+                                </Card>
+                            </Col>
+
                            {/* Kolom Tengah: Informasi Teknis */}
                            <Col xs={24} lg={8}>
                                <Card
@@ -462,159 +458,6 @@ const NotificationDetailTab = (props) => {
                                </Card>
                            </Col>

-                            {notification.is_reminder == true && (
-                                <Col xs={24} md={8}>
-                                    <div>
-                                        <Card hoverable bodyStyle={{ padding: '12px' }}>
-                                            <Space>
-                                                <ToolOutlined
-                                                    style={{ fontSize: '16px', color: '#1890ff' }}
-                                                />
-                                                <Text
-                                                    strong
-                                                    style={{ fontSize: '16px', color: '#262626' }}
-                                                >
-                                                    Spare Part Reminder Maintenance
-                                                </Text>
-                                            </Space>
-
-                                            <Space
-                                                direction="vertical"
-                                                size="small"
-                                                style={{ width: '100%' }}
-                                            >
-                                                {notification.spareparts_reminder &&
-                                                notification.spareparts_reminder.length > 0 ? (
-                                                    notification.spareparts_reminder.map(
-                                                        (sparepart, index) => (
-                                                            <Card
-                                                                size="small"
-                                                                key={index}
-                                                                bodyStyle={{ padding: '12px' }}
-                                                                hoverable
-                                                            >
-                                                                <Row gutter={16} align="top">
-                                                                    <Col
-                                                                        span={7}
-                                                                        style={{
-                                                                            textAlign: 'center',
-                                                                        }}
-                                                                    >
-                                                                        <div
-                                                                            style={{
-                                                                                width: '100%',
-                                                                                height: '60px',
-                                                                                backgroundColor:
-                                                                                    '#f0f0f0',
-                                                                                display: 'flex',
-                                                                                alignItems:
-                                                                                    'center',
-                                                                                justifyContent:
-                                                                                    'center',
-                                                                                borderRadius: '4px',
-                                                                                marginBottom: '8px',
-                                                                            }}
-                                                                        >
-                                                                            <ToolOutlined
-                                                                                style={{
-                                                                                    fontSize:
-                                                                                        '24px',
-                                                                                    color: '#bfbfbf',
-                                                                                }}
-                                                                            />
-                                                                        </div>
-                                                                        <Text
-                                                                            style={{
-                                                                                fontSize: '12px',
-                                                                                color:
-                                                                                    sparepart.sparepart_stok ===
-                                                                                        'Available' ||
-                                                                                    sparepart.sparepart_stok ===
-                                                                                        'available'
-                                                                                        ? '#52c41a'
-                                                                                        : '#ff4d4f',
-                                                                                fontWeight: 500,
-                                                                            }}
-                                                                        >
-                                                                            {
-                                                                                sparepart.sparepart_stok
-                                                                            }
-                                                                        </Text>
-                                                                    </Col>
-                                                                    <Col span={17}>
-                                                                        <Space
-                                                                            direction="vertical"
-                                                                            size={4}
-                                                                            style={{
-                                                                                width: '100%',
-                                                                            }}
-                                                                        >
-                                                                            <Text strong>
-                                                                                {
-                                                                                    sparepart.sparepart_name
-                                                                                }
-                                                                            </Text>
-                                                                            <Paragraph
-                                                                                style={{
-                                                                                    fontSize:
-                                                                                        '12px',
-                                                                                    margin: 0,
-                                                                                    color: '#595959',
-                                                                                }}
-                                                                            >
-                                                                                {sparepart.sparepart_description ||
-                                                                                    'Deskripsi tidak tersedia'}
-                                                                            </Paragraph>
-                                                                            <div
-                                                                                style={{
-                                                                                    border: '1px solid #d9d9d9',
-                                                                                    borderRadius:
-                                                                                        '4px',
-                                                                                    padding:
-                                                                                        '4px 8px',
-                                                                                    fontSize:
-                                                                                        '11px',
-                                                                                    color: '#8c8c8c',
-                                                                                    marginTop:
-                                                                                        '8px',
-                                                                                }}
-                                                                            >
-                                                                                Kode:{' '}
-                                                                                {
-                                                                                    sparepart.sparepart_code
-                                                                                }{' '}
-                                                                                | Qty:{' '}
-                                                                                {
-                                                                                    sparepart.sparepart_qty
-                                                                                }{' '}
-                                                                                | Unit:{' '}
-                                                                                {
-                                                                                    sparepart.sparepart_unit
-                                                                                }
-                                                                            </div>
-                                                                        </Space>
-                                                                    </Col>
-                                                                </Row>
-                                                            </Card>
-                                                        )
-                                                    )
-                                                ) : (
-                                                    <div
-                                                        style={{
-                                                            textAlign: 'center',
-                                                            padding: '20px',
-                                                            color: '#8c8c8c',
-                                                        }}
-                                                    >
-                                                        Tidak ada spare parts terkait
-                                                    </div>
-                                                )}
-                                            </Space>
-                                        </Card>
-                                    </div>
-                                </Col>
-                            )}
-
                            {/* Kolom Kanan: User History */}
                            <Col xs={24} lg={8}>
                                <Card title="User History" size="small" style={{ height: '100%' }}>
@@ -702,7 +545,10 @@ const NotificationDetailTab = (props) => {
                        <Row gutter={[8, 8]}>
                            <Col xs={24} md={8}>
                                <div>
-                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
+                                    <Card
+                                        hoverable
+                                        bodyStyle={{ padding: '12px'}}
+                                    >
                                        <Space>
                                            <BookOutlined
                                                style={{ fontSize: '16px', color: '#1890ff' }}
@@ -854,7 +700,10 @@ const NotificationDetailTab = (props) => {
                            </Col>
                            <Col xs={24} md={8}>
                                <div>
-                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
+                                    <Card
+                                        hoverable
+                                        bodyStyle={{ padding: '12px'}}
+                                    >
                                        <Space>
                                            <ToolOutlined
                                                style={{ fontSize: '16px', color: '#1890ff' }}
@@ -979,7 +828,7 @@ const NotificationDetailTab = (props) => {
                            </Col>
                            <Col xs={24} md={8}>
                                <div>
-                                    <Card bodyStyle={{ padding: '12px' }}>
+                                    <Card bodyStyle={{ padding: '12px'}}>
                                        <Space>
                                            <HistoryOutlined
                                                style={{ fontSize: '16px', color: '#1890ff' }}
Author	SHA1	Message	Date
Bragas Rexita Ecos Fernanda	ce55126bf8	Merge pull request 'add space' (#43 ) from lavoce into main Reviewed-on: #43	2026-04-14 07:25:48 +00:00
Bragas Rexita Ecos Fernanda	11ac6ad9ba	Merge pull request 'lavoce' (#42 ) from lavoce into main Reviewed-on: #42	2026-04-10 05:35:38 +00:00
Bragas Rexita Ecos Fernanda	d02d7d87da	Merge pull request 'Repair image svg' (#41 ) from lavoce into main Reviewed-on: #41	2026-02-12 05:32:33 +00:00
Bragas Rexita Ecos Fernanda	255c1e64c7	Merge pull request 'lavoce' (#40 ) from lavoce into main Reviewed-on: #40	2026-01-20 04:32:42 +00:00
Bragas Rexita Ecos Fernanda	90b882daf3	Merge pull request 'fix(color): change design & color for icon notification' (#39 ) from lavoce into main Reviewed-on: #39	2026-01-13 05:39:38 +00:00
Bragas Rexita Ecos Fernanda	cc6a52ccbf	Merge pull request 'lavoce' (#38 ) from lavoce into main Reviewed-on: #38	2026-01-12 04:29:21 +00:00
Bragas Rexita Ecos Fernanda	03d5646565	Merge pull request 'lavoce' (#37 ) from lavoce into main Reviewed-on: #37	2026-01-08 07:44:22 +00:00
Bragas Rexita Ecos Fernanda	4d8af01316	Merge pull request 'fixing typo detail notification user' (#36 ) from lavoce into main Reviewed-on: #36	2026-01-08 05:38:53 +00:00
Bragas Rexita Ecos Fernanda	8f32f29c03	Merge pull request 'lavoce' (#35 ) from lavoce into main Reviewed-on: #35	2026-01-08 04:52:16 +00:00
Bragas Rexita Ecos Fernanda	5a7d64a05b	Merge pull request 'fix: resize add log card' (#34 ) from lavoce into main Reviewed-on: #34	2026-01-07 03:33:48 +00:00
Bragas Rexita Ecos Fernanda	e74b802a60	Merge pull request 'lavoce' (#33 ) from lavoce into main Reviewed-on: #33	2026-01-06 11:30:27 +00:00
Bragas Rexita Ecos Fernanda	f436865b7f	Merge pull request 'lavoce' (#32 ) from lavoce into main Reviewed-on: #32	2026-01-05 03:41:39 +00:00
Bragas Rexita Ecos Fernanda	48437c3c50	Merge pull request 'lavoce' (#30 ) from lavoce into main Reviewed-on: #30	2025-12-31 03:20:51 +00:00
Bragas Rexita Ecos Fernanda	a33c9b3b92	Merge pull request 'lavoce' (#29 ) from lavoce into main Reviewed-on: #29	2025-12-23 05:22:06 +00:00
Bragas Rexita Ecos Fernanda	58d1f5c7ab	Merge pull request 'Repair and replace svg' (#28 ) from lavoce into main Reviewed-on: #28	2025-12-22 09:38:05 +00:00
Bragas Rexita Ecos Fernanda	c10a5bf62d	Merge pull request 'lavoce' (#27 ) from lavoce into main Reviewed-on: #27	2025-12-22 09:28:34 +00:00
Bragas Rexita Ecos Fernanda	6cc5042956	Merge pull request 'repair' (#26 ) from lavoce into main Reviewed-on: #26	2025-11-28 07:17:06 +00:00
Bragas Rexita Ecos Fernanda	5079f8d316	Merge pull request 'lavoce' (#25 ) from lavoce into main Reviewed-on: #25	2025-11-28 07:12:41 +00:00
Bragas Rexita Ecos Fernanda	7073390de7	Merge pull request 'lavoce' (#24 ) from lavoce into main Reviewed-on: #24	2025-11-28 05:50:36 +00:00
Bragas Rexita Ecos Fernanda	4226a24e79	Merge pull request 'lavoce' (#23 ) from lavoce into main Reviewed-on: #23	2025-11-28 05:10:26 +00:00
Bragas Rexita Ecos Fernanda	038009433f	Merge pull request 'lavoce' (#22 ) from lavoce into main Reviewed-on: #22	2025-11-25 03:50:54 +00:00
Bragas Rexita Ecos Fernanda	64ba51b17c	Merge pull request 'lavoce' (#21 ) from lavoce into main Reviewed-on: #21	2025-11-20 03:44:05 +00:00
Bragas Rexita Ecos Fernanda	47d0638a42	Merge pull request 'lavoce' (#20 ) from lavoce into main Reviewed-on: #20	2025-11-19 01:05:19 +00:00
Bragas Rexita Ecos Fernanda	d8c5f3ed44	Merge pull request 'lavoce' (#19 ) from lavoce into main Reviewed-on: #19	2025-11-18 00:26:36 +00:00
Bragas Rexita Ecos Fernanda	affd9146bb	Merge pull request 'lavoce' (#18 ) from lavoce into main Reviewed-on: #18	2025-11-17 08:27:39 +00:00
Bragas Rexita Ecos Fernanda	4022b3f8f4	Merge pull request 'lavoce' (#17 ) from lavoce into main Reviewed-on: #17	2025-11-10 07:57:17 +00:00
Bragas Rexita Ecos Fernanda	446a4e2b95	Merge pull request 'lavoce' (#16 ) from lavoce into main Reviewed-on: #16	2025-11-10 06:33:35 +00:00
Bragas Rexita Ecos Fernanda	83a475c708	Merge pull request 'Repair beautiful apps' (#15 ) from lavoce into main Reviewed-on: #15	2025-11-04 10:01:47 +00:00
Bragas Rexita Ecos Fernanda	ab1c510a77	Merge pull request 'Repair bg-signin' (#14 ) from lavoce into main Reviewed-on: #14	2025-11-04 08:48:59 +00:00
yogiedigital	59859c6d18	Update public/web.config	2025-11-04 07:03:57 +00:00
yogiedigital	2bd27937dc	Update public/web.config	2025-11-04 07:02:55 +00:00
yogiedigital	1058c660d6	Update public/web.config	2025-11-04 07:01:10 +00:00
yogiedigital	35b2167791	Update public/web.config	2025-11-04 06:53:05 +00:00
yogiedigital	ec676983d0	Update .gitignore	2025-11-04 06:51:39 +00:00
yogiedigital	c07c5f8235	Update .gitignore	2025-11-04 06:47:31 +00:00
Bragas Rexita Ecos Fernanda	b32ad97034	Merge pull request 'Add side bar menus mobile mode' (#13 ) from lavoce into main Reviewed-on: #13	2025-11-04 06:42:09 +00:00
Bragas Rexita Ecos Fernanda	76244f6f6e	Merge pull request 'lavoce' (#12 ) from lavoce into main Reviewed-on: #12	2025-11-04 06:23:15 +00:00
Bragas Rexita Ecos Fernanda	0a128cbb3c	Merge pull request 'lavoce' (#11 ) from lavoce into main Reviewed-on: #11	2025-10-28 09:47:36 +00:00
Bragas Rexita Ecos Fernanda	bd4ab26680	Merge pull request 'lavoce' (#10 ) from lavoce into main Reviewed-on: #10	2025-10-28 04:48:54 +00:00
Bragas Rexita Ecos Fernanda	3e728a1ff5	Merge pull request 'lavoce' (#9 ) from lavoce into main Reviewed-on: #9	2025-10-27 03:48:58 +00:00
Bragas Rexita Ecos Fernanda	9db143972e	Merge pull request 'lavoce' (#8 ) from lavoce into main Reviewed-on: #8	2025-10-25 09:19:36 +00:00
Bragas Rexita Ecos Fernanda	029ea269a7	Merge pull request 'lavoce' (#7 ) from lavoce into main Reviewed-on: #7	2025-10-24 05:43:32 +00:00
Bragas Rexita Ecos Fernanda	4cdaa042da	Merge pull request 'lavoce' (#6 ) from lavoce into main Reviewed-on: #6	2025-10-23 07:28:11 +00:00
Bragas Rexita Ecos Fernanda	56af2a16c0	Merge pull request 'update file svg to src assets' (#5 ) from lavoce into main Reviewed-on: #5	2025-10-23 04:52:13 +00:00
Bragas Rexita Ecos Fernanda	deadf2ffb4	Merge pull request 'lavoce' (#4 ) from lavoce into main Reviewed-on: #4	2025-10-23 04:27:57 +00:00
Bragas Rexita Ecos Fernanda	4da80c7089	Merge pull request 'lavoce' (#3 ) from lavoce into main Reviewed-on: #3	2025-10-22 05:59:57 +00:00
yogiedigital	56e3ce78a6	Merge pull request 'lavoce' (#2 ) from lavoce into main Reviewed-on: #2	2025-10-20 04:06:02 +00:00
yogiedigital	7c2a019dd2	Merge pull request 'lavoce' (#1 ) from lavoce into main Reviewed-on: #1	2025-09-17 08:39:35 +00:00