Merge branch 'lavoce' of https://gitea.idetama.id/yogiedigital/cod-fe into lavoce

Reviewed-on: #31

src/App.jsx

@@ -53,6 +53,7 @@ import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
 
 // Image Viewer
 import ImageViewer from './Utils/ImageViewer';
+import RedirectWa from './pages/blank/RedirectWa';
 
 const App = () => {
     return (
@@ -72,6 +73,8 @@ const App = () => {
                     element={<IndexVerificationSparepart />}
                 />
 
+                <Route path="/redirect" element={<RedirectWa />} />
+
                 {/* Protected Routes */}
                 <Route path="/dashboard" element={<ProtectedRoute />}>
                     <Route path="home" element={<Home />} />

src/api/notification.jsx

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

src/assets/svg/air_dryer_A_rev.svg

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

src/assets/svg/air_dryer_B_rev.svg

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

src/assets/svg/air_dryer_C_rev.svg

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

src/components/Global/ApiRequest.jsx

@@ -30,18 +30,18 @@ instance.interceptors.response.use(
             originalRequest._retry = true;
 
             try {
-                console.log('🔄 Refresh token dipanggil...');
+                // console.log('🔄 Refresh token dipanggil...');
                 const refreshRes = await refreshApi.post('/auth/refresh-token');
 
                 const newAccessToken = refreshRes.data.data.accessToken;
                 localStorage.setItem('token', newAccessToken);
-                console.log('✅ Token refreshed successfully');
+                // console.log('✅ Token refreshed successfully');
 
                 // update token di header
                 instance.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
                 originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
 
-                console.log('🔁 Retrying original request...');
+                // console.log('🔁 Retrying original request...');
                 return instance(originalRequest);
             } catch (refreshError) {
                 console.error(
@@ -70,24 +70,35 @@ async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = t
         },
     };
 
-    const rawToken = localStorage.getItem('token');
+    const tokenRedirect = sessionStorage.getItem('token_redirect');
+
+    let rawToken = '';
+
+    if (tokenRedirect !== null) {
+        rawToken = tokenRedirect;
+        // console.log(`sessionStorage: ${tokenRedirect}`);
+    } else {
+        rawToken = localStorage.getItem('token');
+        // console.log(`localStorage: ${rawToken}`);
+    }
+
     if (token && rawToken) {
         const cleanToken = rawToken.replace(/"/g, '');
         request.headers['Authorization'] = `Bearer ${cleanToken}`;
-        console.log('🔐 Sending request with token:', cleanToken.substring(0, 20) + '...');
+        // console.log('🔐 Sending request with token:', cleanToken.substring(0, 20) + '...');
     } else {
         console.warn('⚠️ No token found in localStorage');
     }
 
-    console.log('📤 API Request:', { method, url: prefix, hasToken: !!rawToken });
+    // console.log('📤 API Request:', { method, url: prefix, hasToken: !!rawToken });
 
     try {
         const response = await instance(request);
-        console.log('✅ API Response:', {
-            url: prefix,
-            status: response.status,
-            statusCode: response.data?.statusCode,
-        });
+        // console.log('✅ API Response:', {
+        //     url: prefix,
+        //     status: response.status,
+        //     statusCode: response.data?.statusCode,
+        // });
         return { ...response, error: false };
     } catch (error) {
         const status = error?.response?.status || 500;
@@ -132,17 +143,10 @@ async function cekError(status, message = '') {
 const SendRequest = async (queryParams) => {
     try {
         const response = await ApiRequest(queryParams);
-        console.log('📦 SendRequest response:', {
-            hasError: response.error,
-            status: response.status,
-            statusCode: response.data?.statusCode,
-            data: response.data,
-        });
 
         // If ApiRequest returned error flag, return error structure
         if (response.error) {
             const errorMsg = response.data?.message || response.statusText || 'Request failed';
-            console.error('❌ SendRequest error response:', errorMsg);
 
             // Return consistent error structure instead of empty array
             return {

src/components/Global/MqttConnection.jsx

@@ -2,7 +2,16 @@
 import mqtt from 'mqtt';
 
 const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
-const topics = ['cod/air_dryer/air_dryer1'];
+const topics = [
+    'PIU_COD/AIR_DRYER/OVERVIEW',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_A',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_B',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_C',
+    'PIU_COD/COMPRESSOR/OVERVIEW',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_A',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_B',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_C'
+];
 const options = {
     keepalive: 30,
     clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),

src/layout/LayoutMenu.jsx

@@ -146,7 +146,7 @@ const allItems = [
             {
                 key: 'master-sparepart',
                 icon: <ToolOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/master/sparepart">sparepart</Link>,
+                label: <Link to="/master/sparepart">Sparepart</Link>,
             },
             // {
             //     key: 'master-shift',

src/pages/blank/RedirectWa.jsx

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

src/pages/contact/component/ListContact.jsx

@@ -267,9 +267,6 @@ const ListContact = memo(function ListContact(props) {
                 }
             }
 
-            // Backend doesn't support is_active filter or order parameter
-            // Contact hanya supports: criteria, name, code, limit, page
-
             const queryParams = new URLSearchParams();
             Object.entries(searchParams).forEach(([key, value]) => {
                 if (value !== '' && value !== null && value !== undefined) {
@@ -309,11 +306,10 @@ const ListContact = memo(function ListContact(props) {
     // Listen for saved contact data
     useEffect(() => {
         if (props.lastSavedContact) {
-            fetchContacts(); // Refetch all contacts when data is saved
+            fetchContacts();
         }
     }, [props.lastSavedContact]);
 
-    // Get contacts (already filtered by backend)
     const getFilteredContacts = () => {
         return filteredContacts;
     };
@@ -326,7 +322,7 @@ const ListContact = memo(function ListContact(props) {
     const showAddModal = () => {
         props.setSelectedData(null);
         props.setActionMode('add');
-        // Pass the current active tab to determine contact type
+
         props.setContactType?.(activeTab);
     };
 

src/pages/home/SvgAirDryerA.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_A_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_A_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_A';
 
 const SvgAirDryerA = () => {
     return (

src/pages/home/SvgAirDryerB.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_B_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_B_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_B';
 
 const SvgAirDryerB = () => {
     return (

src/pages/home/SvgAirDryerC.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_C_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_C_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_C';
 
 const SvgAirDryerC = () => {
     return (

src/pages/home/SvgCompressorA.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorA_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
 
 const SvgCompressorA = () => {
     return (

src/pages/home/SvgCompressorB.jsx

@@ -6,7 +6,7 @@ import SvgViewer from './SvgViewer';
 import filePathSvg from '../../assets/svg/compressorB_rev.svg';
 
 const { Text } = Typography;
-const topicMqtt = 'cod/air_dryer/air_dryer1';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
 
 const SvgCompressorB = () => {
     return (

src/pages/home/SvgCompressorC.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorC_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
 
 const SvgCompressorC = () => {
     return (

src/pages/home/SvgOverviewAirDryer.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-airdryer.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
 
 const SvgOverviewAirDryer = () => {
     return (

src/pages/home/SvgOverviewCompressor.jsx

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-compressor.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
 
 const SvgOverviewCompressor = () => {
     return (

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -352,7 +352,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
                 <Title level={3}>Jadwal Shift</Title>
                 <Divider />
 
-                <Row>
+                {/* <Row>
                     <Col xs={24}>
                         <Row justify="end" align="middle" gutter={[8, 8]}>
                             <Col xs={24} sm={24} md={12} lg={12}>
@@ -383,7 +383,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
                             </Col>
                         </Row>
                     </Col>
-                </Row>
+                </Row> */}
 
                 <div style={{ marginTop: '24px' }}>
                     {loading ? (

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -13,13 +13,18 @@ import {
     Space,
     ConfigProvider,
 } from 'antd';
-import {
-    EditOutlined,
-    DeleteOutlined
-} from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { getBrandById, createBrand, createErrorCode, getErrorCodesByBrandId, updateErrorCode, deleteErrorCode, deleteBrand } from '../../../api/master-brand';
+import {
+    getBrandById,
+    createBrand,
+    createErrorCode,
+    getErrorCodesByBrandId,
+    updateErrorCode,
+    deleteErrorCode,
+    deleteBrand,
+} from '../../../api/master-brand';
 import BrandForm from './component/BrandForm';
 import ErrorCodeForm from './component/ErrorCodeForm';
 import SolutionForm from './component/SolutionForm';
@@ -42,7 +47,9 @@ const AddBrandDevice = () => {
     const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const tab = searchParams.get('tab');
-    const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : (location.state?.phase || 0));
+    const [currentStep, setCurrentStep] = useState(
+        tab === 'error-codes' ? 1 : location.state?.phase || 0
+    );
     const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
     const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
     const [searchText, setSearchText] = useState('');
@@ -68,7 +75,7 @@ const AddBrandDevice = () => {
             const values = solutionForm.getFieldsValue(true);
             const solutions = [];
 
-            solutionFields.forEach(fieldKey => {
+            solutionFields.forEach((fieldKey) => {
                 let solution = null;
 
                 if (values.solution_items && values.solution_items[fieldKey]) {
@@ -85,9 +92,16 @@ const AddBrandDevice = () => {
                 if (solutionType === 'text') {
                     isValid = solution.text && solution.text.trim() !== '';
                 } else if (solutionType === 'file') {
-                    const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== '';
-                    const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0);
-                    const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0);
+                    const hasPathSolution =
+                        solution.path_solution && solution.path_solution.trim() !== '';
+                    const hasFileUpload =
+                        solution.fileUpload &&
+                        typeof solution.fileUpload === 'object' &&
+                        Object.keys(solution.fileUpload).length > 0;
+                    const hasFile =
+                        solution.file &&
+                        typeof solution.file === 'object' &&
+                        Object.keys(solution.file).length > 0;
                     isValid = hasPathSolution || hasFileUpload || hasFile;
                 }
 
@@ -118,9 +132,9 @@ const AddBrandDevice = () => {
                             text: '',
                             status: true,
                             file: null,
-                            fileUpload: null
-                        }
-                    }
+                            fileUpload: null,
+                        },
+                    },
                 });
             }, 100);
         }
@@ -128,7 +142,6 @@ const AddBrandDevice = () => {
     };
 
     const setSolutionsForExistingRecord = (solutions, targetForm) => {
-
         if (!targetForm || !solutions || solutions.length === 0) {
             return;
         }
@@ -153,11 +166,14 @@ const AddBrandDevice = () => {
                 fileObject = {
                     uploadPath: solution.path_solution || solution.path_document,
                     path_solution: solution.path_solution || solution.path_document,
-                    name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File',
+                    name:
+                        solution.file_upload_name ||
+                        (solution.path_solution || solution.path_document).split('/').pop() ||
+                        'File',
                     type_solution: solution.type_solution,
                     isExisting: true,
                     size: 0,
-                    url: solution.path_solution || solution.path_document
+                    url: solution.path_solution || solution.path_document,
                 };
             }
 
@@ -170,7 +186,7 @@ const AddBrandDevice = () => {
                 file: fileObject,
                 fileUpload: fileObject,
                 path_solution: solution.path_solution || solution.path_document || null,
-                fileName: solution.file_upload_name || null
+                fileName: solution.file_upload_name || null,
             };
         });
 
@@ -180,28 +196,35 @@ const AddBrandDevice = () => {
 
         setSolutionStatuses(newSolutionStatuses);
 
-
         targetForm.resetFields();
 
         setTimeout(() => {
             targetForm.setFieldsValue({
-                solution_items: solutionItems
+                solution_items: solutionItems,
             });
 
             setTimeout(() => {
-                Object.keys(solutionItems).forEach(key => {
+                Object.keys(solutionItems).forEach((key) => {
                     const solution = solutionItems[key];
                     targetForm.setFieldValue(['solution_items', key, 'name'], solution.name);
                     targetForm.setFieldValue(['solution_items', key, 'type'], solution.type);
                     targetForm.setFieldValue(['solution_items', key, 'text'], solution.text);
                     targetForm.setFieldValue(['solution_items', key, 'file'], solution.file);
-                    targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
+                    targetForm.setFieldValue(
+                        ['solution_items', key, 'fileUpload'],
+                        solution.fileUpload
+                    );
                     targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
-                    targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
-                    targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
+                    targetForm.setFieldValue(
+                        ['solution_items', key, 'path_solution'],
+                        solution.path_solution
+                    );
+                    targetForm.setFieldValue(
+                        ['solution_items', key, 'fileName'],
+                        solution.fileName
+                    );
                 });
 
-
                 const finalValues = targetForm.getFieldsValue();
             }, 100);
         }, 100);
@@ -209,14 +232,14 @@ const AddBrandDevice = () => {
 
     const handleAddSolutionField = () => {
         const newKey = Math.max(...solutionFields, 0) + 1;
-        setSolutionFields(prev => [...prev, newKey]);
-        setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
-        setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
+        setSolutionFields((prev) => [...prev, newKey]);
+        setSolutionTypes((prev) => ({ ...prev, [newKey]: 'text' }));
+        setSolutionStatuses((prev) => ({ ...prev, [newKey]: true }));
     };
 
     const handleRemoveSolutionField = (fieldKey) => {
         if (solutionFields.length > 1) {
-            setSolutionFields(prev => prev.filter(key => key !== fieldKey));
+            setSolutionFields((prev) => prev.filter((key) => key !== fieldKey));
             const newTypes = { ...solutionTypes };
             const newStatuses = { ...solutionStatuses };
             delete newTypes[fieldKey];
@@ -233,7 +256,7 @@ const AddBrandDevice = () => {
     };
 
     const handleSolutionTypeChange = (fieldKey, type) => {
-        setSolutionTypes(prev => ({ ...prev, [fieldKey]: type }));
+        setSolutionTypes((prev) => ({ ...prev, [fieldKey]: type }));
 
         if (type === 'file') {
             solutionForm.setFieldValue(['solution_items', fieldKey, 'text'], '');
@@ -246,7 +269,7 @@ const AddBrandDevice = () => {
     };
 
     const handleSolutionStatusChange = (fieldKey, status) => {
-        setSolutionStatuses(prev => ({ ...prev, [fieldKey]: status }));
+        setSolutionStatuses((prev) => ({ ...prev, [fieldKey]: status }));
     };
 
     const handleNextStep = async () => {
@@ -259,7 +282,7 @@ const AddBrandDevice = () => {
                 brand_type: brandValues.brand_type || '',
                 brand_manufacture: brandValues.brand_manufacture || '',
                 brand_model: brandValues.brand_model || '',
-                is_active: brandValues.is_active !== undefined ? brandValues.is_active : true
+                is_active: brandValues.is_active !== undefined ? brandValues.is_active : true,
             };
 
             const response = await createBrand(brandApiData);
@@ -268,7 +291,7 @@ const AddBrandDevice = () => {
                 const newBrandInfo = {
                     ...brandValues,
                     brand_id: response.data.brand_id,
-                    brand_code: response.data.brand_code
+                    brand_code: response.data.brand_code,
                 };
                 setBrandInfo(newBrandInfo);
                 setTemporaryBrandId(response.data.brand_id);
@@ -307,8 +330,7 @@ const AddBrandDevice = () => {
         if (isTemporaryBrand && temporaryBrandId) {
             try {
                 await deleteBrand(temporaryBrandId);
-            } catch (error) {
-            }
+            } catch (error) {}
         }
         navigate('/master/brand-device');
     };
@@ -360,8 +382,6 @@ const AddBrandDevice = () => {
         setTrigerFilter((prev) => !prev);
     };
 
-
-
     const resetErrorCodeForm = () => {
         errorCodeForm.resetFields();
         errorCodeForm.setFieldsValue({
@@ -391,16 +411,16 @@ const AddBrandDevice = () => {
                 return;
             }
 
-            if (!solutionData || solutionData.length === 0) {
-                NotifAlert({
-                    icon: 'warning',
-                    title: 'Perhatian',
-                    message: 'Setiap error code harus memiliki minimal 1 solution!',
-                });
-                return;
-            }
+            // if (!solutionData || solutionData.length === 0) {
+            //     NotifAlert({
+            //         icon: 'warning',
+            //         title: 'Perhatian',
+            //         message: 'Setiap error code harus memiliki minimal 1 solution!',
+            //     });
+            //     return;
+            // }
 
-            const formattedSolutions = solutionData.map(solution => {
+            const formattedSolutions = solutionData.map((solution) => {
                 const solutionType = solution.type || 'text';
 
                 let typeSolution = solutionType === 'text' ? 'text' : 'image';
@@ -422,7 +442,11 @@ const AddBrandDevice = () => {
                 } else {
                     formattedSolution.text_solution = '';
 
-                    formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || '';
+                    formattedSolution.path_solution =
+                        solution.path_solution ||
+                        solution.file?.uploadPath ||
+                        solution.fileUpload?.uploadPath ||
+                        '';
                 }
 
                 if (formattedSolution.brand_code_solution_id) {
@@ -440,7 +464,7 @@ const AddBrandDevice = () => {
                 path_icon: errorCodeIcon?.uploadPath || '',
                 is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
                 solution: formattedSolutions,
-                spareparts: selectedSparepartIds || []
+                spareparts: selectedSparepartIds || [],
             };
 
             let response;
@@ -456,11 +480,13 @@ const AddBrandDevice = () => {
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
-                    message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!',
+                    message: editingErrorCodeKey
+                        ? 'Error code berhasil diupdate!'
+                        : 'Error code berhasil ditambahkan!',
                 });
 
                 resetErrorCodeForm();
-                setTrigerFilter(prev => !prev);
+                setTrigerFilter((prev) => !prev);
             } else {
                 NotifAlert({
                     icon: 'error',
@@ -479,12 +505,10 @@ const AddBrandDevice = () => {
         }
     };
 
-
     const handleErrorCodeIconRemove = () => {
         setErrorCodeIcon(null);
     };
 
-
     const handleFinish = async () => {
         setConfirmLoading(true);
         try {
@@ -506,10 +530,10 @@ const AddBrandDevice = () => {
                     const response = await getErrorCodesByBrandId(brandInfo.brand_id, queryParams);
 
                     if (response && response.statusCode === 200 && response.data) {
-                        const freshErrorCodes = response.data.map(ec => ({
+                        const freshErrorCodes = response.data.map((ec) => ({
                             ...ec,
                             tempId: `existing_${ec.error_code_id}`,
-                            status: 'existing'
+                            status: 'existing',
                         }));
                         setApiErrorCodes(freshErrorCodes);
 
@@ -517,7 +541,8 @@ const AddBrandDevice = () => {
                             NotifAlert({
                                 icon: 'warning',
                                 title: 'Perhatian',
-                                message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
+                                message:
+                                    'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
                             });
                             return;
                         }
@@ -526,7 +551,8 @@ const AddBrandDevice = () => {
                             NotifAlert({
                                 icon: 'warning',
                                 title: 'Perhatian',
-                                message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
+                                message:
+                                    'Harap tambahkan minimal 1 error code sebelum menyelesaikan.',
                             });
                             return;
                         }
@@ -591,11 +617,7 @@ const AddBrandDevice = () => {
                             <Spin size="large" />
                         </div>
                     )}
-                    <BrandForm
-                        form={brandForm}
-                        isEdit={false}
-                        brandInfo={brandInfo}
-                    />
+                    <BrandForm form={brandForm} isEdit={false} brandInfo={brandInfo} />
                 </div>
             );
         }
@@ -635,70 +657,99 @@ const AddBrandDevice = () => {
                     </Col>
 
                     <Col xs={24} md={16} lg={16}>
-                        <div style={{
-                            paddingLeft: '12px'
-                        }}>
+                        <div
+                            style={{
+                                paddingLeft: '12px',
+                            }}
+                        >
                             <Card
                                 title={
-                                    <span style={{
-                                        fontSize: '16px',
-                                        fontWeight: '600',
-                                        color: '#262626',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: '8px'
-                                    }}>
-                                        <span style={{
-                                            width: '4px',
-                                            height: '20px',
-                                            backgroundColor: '#23A55A',
-                                            borderRadius: '2px'
-                                        }}></span>
-                                        Error Code Form
-                                    </span>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <span
+                                            style={{
+                                                fontSize: '16px',
+                                                fontWeight: '600',
+                                                color: '#262626',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '8px',
+                                            }}
+                                        >
+                                            <span
+                                                style={{
+                                                    width: '4px',
+                                                    height: '20px',
+                                                    backgroundColor: '#23A55A',
+                                                    borderRadius: '2px',
+                                                }}
+                                            ></span>
+                                            Error Code Form
+                                        </span>
+                                        <Button
+                                            type="primary"
+                                            size="large"
+                                            onClick={handleSaveErrorCode}
+                                            loading={confirmLoading}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                                borderRadius: '8px',
+                                                height: '40px',
+                                                padding: '0 24px',
+                                                fontWeight: '500',
+                                                boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
+                                                transition: 'all 0.3s ease',
+                                            }}
+                                            onMouseEnter={(e) => {
+                                                e.target.style.boxShadow =
+                                                    '0 4px 8px rgba(35, 165, 90, 0.3)';
+                                            }}
+                                            onMouseLeave={(e) => {
+                                                e.target.style.boxShadow =
+                                                    '0 2px 4px rgba(35, 165, 90, 0.2)';
+                                            }}
+                                        >
+                                            {editingErrorCodeKey
+                                                ? 'Update Error Code'
+                                                : 'Save Error Code'}
+                                        </Button>
+                                    </div>
                                 }
                                 style={{
                                     width: '100%',
                                     boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
-                                    borderRadius: '12px'
+                                    borderRadius: '12px',
                                 }}
                                 styles={{
                                     body: { padding: '16px 24px 12px 24px' },
                                     header: {
                                         padding: '16px 24px',
                                         borderBottom: '1px solid #f0f0f0',
-                                        backgroundColor: '#fafafa'
-                                    }
+                                        backgroundColor: '#fafafa',
+                                    },
                                 }}
                             >
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                                    <div style={{
-                                        padding: '16px',
-                                        border: '1px solid #f0f0f0',
-                                        borderRadius: '10px',
-                                        backgroundColor: '#ffffff',
-                                        marginBottom: '0',
-                                        transition: 'all 0.3s ease',
-                                        boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                    }}>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '8px',
-                                            marginBottom: '12px',
-                                            paddingBottom: '8px',
-                                            borderBottom: '1px solid #f5f5f5'
-                                        }}>
-                                            <div style={{
-                                                width: '3px',
-                                                height: '16px',
-                                                backgroundColor: '#23A55A',
-                                                borderRadius: '2px'
-                                            }}></div>
-                                            <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
-                                                Error Code Details
-                                            </h4>
-                                        </div>
+                                <div
+                                    style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+                                >
+                                    <div
+                                        style={{
+                                            padding: '16px',
+                                            border: '1px solid #f0f0f0',
+                                            borderRadius: '10px',
+                                            backgroundColor: '#ffffff',
+                                            marginBottom: '0',
+                                            transition: 'all 0.3s ease',
+                                            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                        }}
+                                    >
                                         <ErrorCodeForm
                                             errorCodeForm={errorCodeForm}
                                             isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
@@ -711,29 +762,42 @@ const AddBrandDevice = () => {
 
                                     <Row gutter={[20, 0]} style={{ marginTop: '0' }}>
                                         <Col xs={24} md={12} lg={12}>
-                                            <div style={{
-                                                padding: '16px',
-                                                border: '1px solid #f0f0f0',
-                                                borderRadius: '10px',
-                                                backgroundColor: '#ffffff',
-                                                transition: 'all 0.3s ease',
-                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                            }}>
-                                                <div style={{
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: '8px',
-                                                    marginBottom: '12px',
-                                                    paddingBottom: '8px',
-                                                    borderBottom: '1px solid #f5f5f5'
-                                                }}>
-                                                    <div style={{
-                                                        width: '3px',
-                                                        height: '16px',
-                                                        backgroundColor: '#1890ff',
-                                                        borderRadius: '2px'
-                                                    }}></div>
-                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                            <div
+                                                style={{
+                                                    padding: '16px',
+                                                    border: '1px solid #f0f0f0',
+                                                    borderRadius: '10px',
+                                                    backgroundColor: '#ffffff',
+                                                    transition: 'all 0.3s ease',
+                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                                }}
+                                            >
+                                                <div
+                                                    style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: '8px',
+                                                        marginBottom: '12px',
+                                                        paddingBottom: '8px',
+                                                        borderBottom: '1px solid #f5f5f5',
+                                                    }}
+                                                >
+                                                    <div
+                                                        style={{
+                                                            width: '3px',
+                                                            height: '16px',
+                                                            backgroundColor: '#1890ff',
+                                                            borderRadius: '2px',
+                                                        }}
+                                                    ></div>
+                                                    <h4
+                                                        style={{
+                                                            margin: 0,
+                                                            color: '#262626',
+                                                            fontSize: '14px',
+                                                            fontWeight: '600',
+                                                        }}
+                                                    >
                                                         Solution
                                                     </h4>
                                                 </div>
@@ -743,14 +807,23 @@ const AddBrandDevice = () => {
                                                     solutionTypes={solutionTypes}
                                                     solutionStatuses={solutionStatuses}
                                                     onAddSolutionField={handleAddSolutionField}
-                                                    onRemoveSolutionField={handleRemoveSolutionField}
+                                                    onRemoveSolutionField={
+                                                        handleRemoveSolutionField
+                                                    }
                                                     onSolutionTypeChange={handleSolutionTypeChange}
-                                                    onSolutionStatusChange={handleSolutionStatusChange}
-                                                    onSolutionFileUpload={(fileData) => {
-                                                    }}
+                                                    onSolutionStatusChange={
+                                                        handleSolutionStatusChange
+                                                    }
+                                                    onSolutionFileUpload={(fileData) => {}}
                                                     onFileView={(fileData) => {
-                                                        if (fileData && (fileData.url || fileData.uploadPath)) {
-                                                            window.open(fileData.url || fileData.uploadPath, '_blank');
+                                                        if (
+                                                            fileData &&
+                                                            (fileData.url || fileData.uploadPath)
+                                                        ) {
+                                                            window.open(
+                                                                fileData.url || fileData.uploadPath,
+                                                                '_blank'
+                                                            );
                                                         }
                                                     }}
                                                     isReadOnly={false}
@@ -759,40 +832,55 @@ const AddBrandDevice = () => {
                                             </div>
                                         </Col>
                                         <Col xs={24} md={12} lg={12}>
-                                            <div style={{
-                                                padding: '16px',
-                                                border: '1px solid #f0f0f0',
-                                                borderRadius: '10px',
-                                                backgroundColor: '#ffffff',
-                                                transition: 'all 0.3s ease',
-                                                boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
-                                            }}>
-                                                <div style={{
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: '8px',
-                                                    marginBottom: '12px',
-                                                    paddingBottom: '8px',
-                                                    borderBottom: '1px solid #f5f5f5'
-                                                }}>
-                                                    <div style={{
-                                                        width: '3px',
-                                                        height: '16px',
-                                                        backgroundColor: '#faad14',
-                                                        borderRadius: '2px'
-                                                    }}></div>
-                                                    <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
+                                            <div
+                                                style={{
+                                                    padding: '16px',
+                                                    border: '1px solid #f0f0f0',
+                                                    borderRadius: '10px',
+                                                    backgroundColor: '#ffffff',
+                                                    transition: 'all 0.3s ease',
+                                                    boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+                                                }}
+                                            >
+                                                <div
+                                                    style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: '8px',
+                                                        marginBottom: '12px',
+                                                        paddingBottom: '8px',
+                                                        borderBottom: '1px solid #f5f5f5',
+                                                    }}
+                                                >
+                                                    <div
+                                                        style={{
+                                                            width: '3px',
+                                                            height: '16px',
+                                                            backgroundColor: '#faad14',
+                                                            borderRadius: '2px',
+                                                        }}
+                                                    ></div>
+                                                    <h4
+                                                        style={{
+                                                            margin: 0,
+                                                            color: '#262626',
+                                                            fontSize: '14px',
+                                                            fontWeight: '600',
+                                                        }}
+                                                    >
                                                         Sparepart Selection
                                                     </h4>
                                                 </div>
-                                                <div style={{
-                                                    maxHeight: '45vh',
-                                                    overflow: 'auto',
-                                                    border: '1px solid #e8e8e8',
-                                                    borderRadius: '8px',
-                                                    padding: '12px',
-                                                    backgroundColor: '#fafafa'
-                                                }}>
+                                                <div
+                                                    style={{
+                                                        maxHeight: '45vh',
+                                                        overflow: 'auto',
+                                                        border: '1px solid #e8e8e8',
+                                                        borderRadius: '8px',
+                                                        padding: '12px',
+                                                        backgroundColor: '#fafafa',
+                                                    }}
+                                                >
                                                     <SparepartSelect
                                                         selectedSparepartIds={selectedSparepartIds}
                                                         onSparepartChange={setSelectedSparepartIds}
@@ -803,15 +891,16 @@ const AddBrandDevice = () => {
                                         </Col>
                                     </Row>
 
-                                    <div style={{
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        alignItems: 'center',
-                                        padding: '16px 0 0 0',
-                                        borderTop: '1px solid #f0f0f0',
-                                        marginTop: '12px'
-                                    }}>
-
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            padding: '16px 0 0 0',
+                                            borderTop: '1px solid #f0f0f0',
+                                            marginTop: '12px',
+                                        }}
+                                    >
                                         {editingErrorCodeKey && (
                                             <Button
                                                 size="large"
@@ -824,7 +913,7 @@ const AddBrandDevice = () => {
                                                     height: '40px',
                                                     padding: '0 24px',
                                                     fontWeight: '500',
-                                                    transition: 'all 0.3s ease'
+                                                    transition: 'all 0.3s ease',
                                                 }}
                                                 onMouseEnter={(e) => {
                                                     e.target.style.borderColor = '#ff4d4f';
@@ -838,34 +927,6 @@ const AddBrandDevice = () => {
                                                 Cancel
                                             </Button>
                                         )}
-
-
-                                        <div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
-                                            <Button
-                                                type="primary"
-                                                size="large"
-                                                onClick={handleSaveErrorCode}
-                                                loading={confirmLoading}
-                                                style={{
-                                                    backgroundColor: '#23A55A',
-                                                    borderColor: '#23A55A',
-                                                    borderRadius: '8px',
-                                                    height: '40px',
-                                                    padding: '0 24px',
-                                                    fontWeight: '500',
-                                                    boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
-                                                    transition: 'all 0.3s ease'
-                                                }}
-                                                onMouseEnter={(e) => {
-                                                    e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
-                                                }}
-                                                onMouseLeave={(e) => {
-                                                    e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
-                                                }}
-                                            >
-                                                {editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
-                                            </Button>
-                                        </div>
                                     </div>
                                 </div>
                             </Card>
@@ -886,7 +947,7 @@ const AddBrandDevice = () => {
 
         setBreadcrumbItems([
             {
-                title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
+                title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>,
             },
             {
                 title: (
@@ -910,12 +971,11 @@ const AddBrandDevice = () => {
         if (location.state?.fromFileViewer && location.state.phase !== undefined) {
             setCurrentStep(location.state.phase);
         }
-
     }, [setBreadcrumbItems, navigate, searchParams, location.state]);
 
     useEffect(() => {
         if (brandInfo.brand_id && currentStep === 1) {
-            setTrigerFilter(prev => !prev);
+            setTrigerFilter((prev) => !prev);
         }
     }, [brandInfo.brand_id, currentStep]);
 
@@ -928,8 +988,7 @@ const AddBrandDevice = () => {
                         const errorCodes = response.data || [];
                         setApiErrorCodes(errorCodes);
                     }
-                } catch (error) {
-                }
+                } catch (error) {}
             }
         };
         fetchErrorCodes();
@@ -940,8 +999,7 @@ const AddBrandDevice = () => {
             if (isTemporaryBrand && temporaryBrandId && currentStep === 0) {
                 try {
                     await deleteBrand(temporaryBrandId);
-                } catch (error) {
-                }
+                } catch (error) {}
             }
         };
 
@@ -952,7 +1010,6 @@ const AddBrandDevice = () => {
         };
     }, [isTemporaryBrand, temporaryBrandId, currentStep]);
 
-
     return (
         <ConfigProvider
             theme={{
@@ -1003,14 +1060,9 @@ const AddBrandDevice = () => {
                 <Divider />
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                     <div>
-                        <Button onClick={handleCancel}>
-                            Cancel
-                        </Button>
+                        <Button onClick={handleCancel}>Cancel</Button>
                         {currentStep === 1 && (
-                            <Button
-                                onClick={handlePrevStep}
-                                style={{ marginLeft: 8 }}
-                            >
+                            <Button onClick={handlePrevStep} style={{ marginLeft: 8 }}>
                                 Kembali ke Brand Info
                             </Button>
                         )}
@@ -1026,7 +1078,7 @@ const AddBrandDevice = () => {
                                     borderColor: '#23A55A',
                                 }}
                             >
-                                Lanjut
+                                Error Code
                             </Button>
                         )}
                         {currentStep === 1 && (
@@ -1039,7 +1091,7 @@ const AddBrandDevice = () => {
                                     borderColor: '#23A55A',
                                 }}
                             >
-                                Selesai
+                                Done
                             </Button>
                         )}
                     </div>

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -479,14 +479,14 @@ const EditBrandDevice = () => {
                 return;
             }
 
-            if (!solutionData || solutionData.length === 0) {
-                NotifAlert({
-                    icon: 'warning',
-                    title: 'Perhatian',
-                    message: 'Setiap error code harus memiliki minimal 1 solution!',
-                });
-                return;
-            }
+            // if (!solutionData || solutionData.length === 0) {
+            //     NotifAlert({
+            //         icon: 'warning',
+            //         title: 'Perhatian',
+            //         message: 'Setiap error code harus memiliki minimal 1 solution!',
+            //     });
+            //     return;
+            // }
 
             const formattedSolutions = solutionData.map(solution => {
                 const solutionType = solution.type || 'text';
@@ -724,22 +724,53 @@ const EditBrandDevice = () => {
                         }}>
                             <Card
                                 title={
-                                    <span style={{
-                                        fontSize: '16px',
-                                        fontWeight: '600',
-                                        color: '#262626',
+                                    <div style={{
                                         display: 'flex',
                                         alignItems: 'center',
-                                        gap: '8px'
+                                        justifyContent: 'space-between',
+                                        width: '100%'
                                     }}>
                                         <span style={{
-                                            width: '4px',
-                                            height: '20px',
-                                            backgroundColor: '#23A55A',
-                                            borderRadius: '2px'
-                                        }}></span>
-                                        Error Code Form
-                                    </span>
+                                            fontSize: '16px',
+                                            fontWeight: '600',
+                                            color: '#262626',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '8px'
+                                        }}>
+                                            <span style={{
+                                                width: '4px',
+                                                height: '20px',
+                                                backgroundColor: '#23A55A',
+                                                borderRadius: '2px'
+                                            }}></span>
+                                            Error Code Form
+                                        </span>
+                                        <Button
+                                            type="primary"
+                                            size="large"
+                                            onClick={handleSaveErrorCode}
+                                            loading={confirmLoading}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                                borderRadius: '8px',
+                                                height: '40px',
+                                                padding: '0 24px',
+                                                fontWeight: '500',
+                                                boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
+                                                transition: 'all 0.3s ease'
+                                            }}
+                                            onMouseEnter={(e) => {
+                                                e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
+                                            }}
+                                            onMouseLeave={(e) => {
+                                                e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
+                                            }}
+                                        >
+                                            {editingErrorCodeKey ? 'Update Error Code' : 'Save Error Code'}
+                                        </Button>
+                                    </div>
                                 }
                                 style={{
                                     width: '100%',
@@ -765,24 +796,6 @@ const EditBrandDevice = () => {
                                         transition: 'all 0.3s ease',
                                         boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
                                     }}>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '8px',
-                                            marginBottom: '12px',
-                                            paddingBottom: '8px',
-                                            borderBottom: '1px solid #f5f5f5'
-                                        }}>
-                                            <div style={{
-                                                width: '3px',
-                                                height: '16px',
-                                                backgroundColor: '#23A55A',
-                                                borderRadius: '2px'
-                                            }}></div>
-                                            <h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
-                                                Error Code Details
-                                            </h4>
-                                        </div>
                                         <ErrorCodeForm
                                             errorCodeForm={errorCodeForm}
                                             isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
@@ -925,34 +938,6 @@ const EditBrandDevice = () => {
                                                 Cancel
                                             </Button>
                                         )}
-
-
-                                        <div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
-                                            <Button
-                                                type="primary"
-                                                size="large"
-                                                onClick={handleSaveErrorCode}
-                                                loading={confirmLoading}
-                                                style={{
-                                                    backgroundColor: '#23A55A',
-                                                    borderColor: '#23A55A',
-                                                    borderRadius: '8px',
-                                                    height: '40px',
-                                                    padding: '0 24px',
-                                                    fontWeight: '500',
-                                                    boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
-                                                    transition: 'all 0.3s ease'
-                                                }}
-                                                onMouseEnter={(e) => {
-                                                    e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
-                                                }}
-                                                onMouseLeave={(e) => {
-                                                    e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
-                                                }}
-                                            >
-                                                {editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
-                                            </Button>
-                                        </div>
                                     </div>
                                 </div>
                             </Card>
@@ -1016,7 +1001,7 @@ const EditBrandDevice = () => {
                                     borderColor: '#23A55A',
                                 }}
                             >
-                                Selesai
+                                Done
                             </Button>
                         )}
                     </div>

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

@@ -46,6 +46,11 @@ const CustomSparepartCard = ({
         }
     };
 
+    const truncateText = (text, maxLength = 15) => {
+        if (!text) return 'Unnamed';
+        return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+    };
+
     const handleCardClick = () => {
         if (!isReadOnly && onCardClick) {
             onCardClick(sparepart);
@@ -125,210 +130,88 @@ const CustomSparepartCard = ({
 
     return (
         <>
-            <Card
-                hoverable={!!onCardClick && !isReadOnly}
-                style={getCardStyle()}
-                styles={{
-                    body: {
-                        padding: 0,
-                        height: 'calc(100% - 48px)',
-                        display: 'flex',
-                        flexDirection: 'column'
-                    }
+            <div
+                style={{
+                    border: '1px solid #f0f0f0',
+                    borderRadius: '6px',
+                    padding: '12px 16px',
+                    marginBottom: '8px',
+                    backgroundColor: 'white',
+                    cursor: onCardClick && !isReadOnly ? 'pointer' : 'default',
+                    transition: 'all 0.2s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
                 }}
-                actions={getCardActions()}
                 onClick={handleCardClick}
             >
-                <div style={{ display: 'flex', height: '100%' }}>
-
-                    <div style={{
-                        width: size === 'small' ? '90px' : '110px',
-                        flexShrink: 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        padding: size === 'small' ? '12px' : '16px',
-                        backgroundColor: '#fafafa',
-                        borderRight: '1px solid #f0f0f0',
-                        position: 'relative'
-                    }}>
-                        {sparepart.sparepart_item_type && (
-                            <Tag
-                                color="blue"
-                                style={{
-                                    marginBottom: '8px',
-                                    fontSize: '10px',
-                                    fontWeight: 500
-                                }}
-                            >
-                                {sparepart.sparepart_item_type}
-                            </Tag>
-                        )}
-                        <div
+                <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
+                        <Text
+                            strong
                             style={{
-                                width: size === 'small' ? '65px' : '75px',
-                                height: size === 'small' ? '65px' : '75px',
-                                backgroundColor: '#f0f0f0',
-                                borderRadius: '8px',
-                                overflow: 'hidden',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                border: '1px solid #e8e8e8'
+                                fontSize: '14px',
+                                color: '#262626',
+                                marginRight: '12px'
                             }}
+                            title={sparepart.sparepart_name || sparepart.name || 'Unnamed'}
                         >
-                            <img
-                                src={getImageSrc()}
-                                alt={sparepart.sparepart_name || 'Sparepart'}
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    objectFit: 'cover'
-                                }}
-                                onError={(e) => {
-                                    e.target.src = 'https://via.placeholder.com/75';
-                                }}
-                            />
-                        </div>
-
-
-                        {isSelected && (
-                            <div
-                                style={{
-                                    position: 'absolute',
-                                    top: '8px',
-                                    right: '8px',
-                                    backgroundColor: '#52c41a',
-                                    borderRadius: '50%',
-                                    width: '18px',
-                                    height: '18px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
-                                    zIndex: 2
-                                }}
-                            >
-                                <CheckOutlined style={{ color: 'white', fontSize: '10px' }} />
-                            </div>
-                        )}
+                            {truncateText(sparepart.sparepart_name || sparepart.name || 'Unnamed')}
+                        </Text>
+                        <Tag
+                            color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
+                            style={{ fontSize: '11px', margin: 0 }}
+                        >
+                            {sparepart.sparepart_stok || 'Not Available'}
+                        </Tag>
                     </div>
 
-
-                    <div style={{
-                        flex: 1,
-                        padding: size === 'small' ? '12px' : '16px',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        overflow: 'hidden'
-                    }}>
-                        <div style={{ flex: 1, overflow: 'hidden' }}>
-                            <Title
-                                level={size === 'small' ? 5 : 4}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Text style={{ fontSize: '12px', color: '#666', marginRight: '4px' }}>
+                                qty:
+                            </Text>
+                            <Text
                                 style={{
-                                    margin: `0 0 ${size === 'small' ? '6px' : '8px'} 0`,
-                                    fontSize: size === 'small' ? '12px' : '14px',
+                                    fontSize: '12px',
                                     fontWeight: 600,
-                                    lineHeight: '1.4',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    display: '-webkit-box',
-                                    WebkitLineClamp: size === 'small' ? 2 : 3,
-                                    WebkitBoxOrient: 'vertical'
+                                    color: '#262626'
                                 }}
                             >
-                                {sparepart.sparepart_name || sparepart.name || 'Unnamed'}
-                            </Title>
-
-
-                            <div style={{ marginBottom: size === 'small' ? '6px' : '8px' }}>
-
-                                <div style={{ marginBottom: '4px' }}>
-                                    <Tag
-                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
-                                        style={{
-                                            fontSize: size === 'small' ? '9px' : '10px',
-                                            padding: '0 4px',
-                                            margin: 0,
-                                            height: 'auto'
-                                        }}
-                                    >
-                                        {sparepart.sparepart_stok || 'Not Available'}
-                                    </Tag>
-                                </div>
-
-
-                                <div style={{ display: 'flex', alignItems: 'center' }}>
-                                    <Text
-                                        style={{
-                                            fontSize: size === 'small' ? '10px' : '11px',
-                                            fontWeight: 500,
-                                            color: '#262626',
-                                            marginRight: '4px'
-                                        }}
-                                    >
-                                        qty:
-                                    </Text>
-                                    <Text
-                                        style={{
-                                            fontSize: size === 'small' ? '10px' : '11px',
-                                            color: sparepart.sparepart_qty > 0 ? '#52c41a' : '#ff4d4f',
-                                            fontWeight: 600
-                                        }}
-                                    >
-                                        {sparepart.sparepart_qty || 0}
-                                        {sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ''}
-                                    </Text>
-                                </div>
-                            </div>
-
-                            <div style={{ marginBottom: size === 'small' ? '4px' : '6px' }}>
-                                <Text
-                                    code
-                                    style={{
-                                        fontSize: size === 'small' ? '10px' : '11px',
-                                        backgroundColor: '#f5f5f5',
-                                        padding: '2px 6px',
-                                        borderRadius: '3px'
-                                    }}
-                                >
-                                    {sparepart.sparepart_code || 'No code'}
-                                </Text>
-                            </div>
-
-                            {(sparepart.sparepart_merk || sparepart.sparepart_model) && (
-                                <div style={{
-                                    fontSize: size === 'small' ? '9px' : '10px',
-                                    color: '#666',
-                                    lineHeight: '1.4',
-                                    marginBottom: '4px'
-                                }}>
-                                    {sparepart.sparepart_merk && (
-                                        <div>Brand: {sparepart.sparepart_merk}</div>
-                                    )}
-                                    {sparepart.sparepart_model && (
-                                        <div>Model: {sparepart.sparepart_model}</div>
-                                    )}
-                                </div>
-                            )}
+                                {sparepart.sparepart_qty || 0}
+                            </Text>
                         </div>
-
-                        <Text
-                            type="secondary"
-                            style={{
-                                fontSize: size === 'small' ? '9px' : '10px',
-                                marginTop: 'auto',
-                                paddingTop: '4px',
-                                borderTop: '1px solid #f0f0f0'
-                            }}
-                        >
-                            {sparepart.updated_at && dayjs(sparepart.updated_at).format('DD MMM YYYY')}
-                        </Text>
                     </div>
                 </div>
-            </Card>
+
+                <Space size="small">
+                    {showPreview && (
+                        <Button
+                            type="text"
+                            icon={<EyeOutlined />}
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handlePreview();
+                            }}
+                            title="Preview"
+                        />
+                    )}
+                    {showDelete && !isReadOnly && (
+                        <Button
+                            type="text"
+                            icon={<DeleteOutlined />}
+                            size="small"
+                            danger
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onDelete?.(sparepart);
+                            }}
+                            title="Remove"
+                        />
+                    )}
+                </Space>
+            </div>
 
 
             <Modal

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

@@ -201,56 +201,19 @@ const ErrorCodeForm = ({
                     error_code_color: '#000000'
                 }}
             >
-                <Form.Item
-                    label="Status"
-                    name="status"
-                    valuePropName="checked"
-                >
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <Form.Item name="status" valuePropName="checked" noStyle>
-                            <Switch
-                                disabled={isErrorCodeFormReadOnly}
-                            />
-                        </Form.Item>
-                        <Text style={{ marginLeft: 8 }}>
-                            {statusWatch ? 'Active' : 'Inactive'}
-                        </Text>
-                    </div>
-                </Form.Item>
-
-                <Form.Item
-                    label="Error Code"
-                    name="error_code"
-                    rules={[{ required: true, message: 'Error code wajib diisi!' }]}
-                >
-                    <Input
-                        placeholder="Enter error code"
-                        disabled={isErrorCodeFormReadOnly}
-                    />
-                </Form.Item>
-
-                <Form.Item
-                    label="Error Name"
-                    name="error_code_name"
-                    rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
-                >
-                    <Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
-                </Form.Item>
-
-                <Form.Item label="Description" name="error_code_description">
-                    <Input.TextArea
-                        placeholder="Enter error description"
-                        rows={3}
-                        disabled={isErrorCodeFormReadOnly}
-                    />
-                </Form.Item>
-
-                <Form.Item label="Color & Icon">
-                    <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
+                {/* Header bar with color picker, icon upload, and status toggle */}
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    marginBottom: '16px',
+                    gap: '16px'
+                }}>
+                    {/* Color picker on left */}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                         <Form.Item
                             name="error_code_color"
                             noStyle
-                            style={{ flex: '0 0 auto' }}
                             getValueFromEvent={(e) => e.target.value}
                             getValueProps={(value) => ({ value: value || '#000000' })}
                         >
@@ -267,11 +230,55 @@ const ErrorCodeForm = ({
                             />
                         </Form.Item>
 
-                        <Form.Item noStyle style={{ flex: '1 1 auto' }}>
+                        {/* Icon upload beside color picker */}
+                        <div style={{ flex: 1, maxWidth: '300px' }}>
                             {renderIconUpload()}
-                        </Form.Item>
+                        </div>
                     </div>
 
+                    {/* Status toggle on right */}
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Form.Item name="status" valuePropName="checked" noStyle>
+                            <Switch
+                                disabled={isErrorCodeFormReadOnly}
+                            />
+                        </Form.Item>
+                        <Text style={{ marginLeft: 8 }}>
+                            {statusWatch ? 'Active' : 'Inactive'}
+                        </Text>
+                    </div>
+                </div>
+
+                {/* Error Code and Error Name in one row with 1/3 and 2/3 ratio */}
+                <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
+                    <Form.Item
+                        label="Error Code"
+                        name="error_code"
+                        rules={[{ required: true, message: 'Error code wajib diisi!' }]}
+                        style={{ flex: 1, marginBottom: 0, maxWidth: '33.33%' }}
+                    >
+                        <Input
+                            placeholder="Enter error code"
+                            disabled={isErrorCodeFormReadOnly}
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Error Name"
+                        name="error_code_name"
+                        rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
+                        style={{ flex: 2, marginBottom: 0, maxWidth: '66.67%' }}
+                    >
+                        <Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
+                    </Form.Item>
+                </div>
+
+                <Form.Item label="Description" name="error_code_description">
+                    <Input.TextArea
+                        placeholder="Enter error description"
+                        rows={3}
+                        disabled={isErrorCodeFormReadOnly}
+                    />
                 </Form.Item>
             </Form>
         </ConfigProvider>

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

@@ -214,7 +214,6 @@ const ListErrorCode = ({
                     marginBottom: 12,
                     height: '32px',
                     width: '100%',
-                    maxWidth: '300px'
                 }}
             />
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Select, Typography, Tag, Spin, Empty, Button, Row, Col } from 'antd';
+import { Select, Typography, Tag, Spin, Empty, Button } from 'antd';
 import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { getAllSparepart } from '../../../../api/sparepart';
 import CustomSparepartCard from './CustomSparepartCard';
@@ -36,7 +36,7 @@ const SparepartSelect = ({
         setLoading(true);
         try {
             const params = new URLSearchParams();
-            params.set('limit', '1000');
+            params.set('limit', '10');
 
             if (searchQuery && searchQuery.trim() !== '') {
                 params.set('criteria', searchQuery.trim());
@@ -96,20 +96,16 @@ const SparepartSelect = ({
         const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
 
         return (
-            <Col xs={24} sm={24} md={12} lg={12} key={sparepart.sparepart_id}>
-                <CustomSparepartCard
-                    sparepart={sparepart}
-                    isSelected={isSelected}
-                    isReadOnly={isReadOnly}
-                    showPreview={true}
-                    showDelete={isAlreadySelected && !isReadOnly}
-                    onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
-                    onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
-                    style={{
-                        border: isAlreadySelected ? '2px solid #52c41a' : undefined,
-                    }}
-                />
-            </Col>
+            <CustomSparepartCard
+                key={sparepart.sparepart_id}
+                sparepart={sparepart}
+                isSelected={isSelected}
+                isReadOnly={isReadOnly}
+                showPreview={true}
+                showDelete={isAlreadySelected && !isReadOnly}
+                onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
+                onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
+            />
         );
     };
 
@@ -141,7 +137,7 @@ const SparepartSelect = ({
                     >
                         {spareparts
                             .filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
-                            .slice(0, 5)
+                            .slice(0, 10)
                             .map((sparepart) => (
                                 <Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
                                     <div>
@@ -163,9 +159,9 @@ const SparepartSelect = ({
                         <Title level={5} style={{ marginBottom: 16 }}>
                             Selected Spareparts ({selectedSpareparts.length})
                         </Title>
-                        <Row gutter={[16, 16]}>
+                        <div>
                             {selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
-                        </Row>
+                        </div>
                     </div>
                 ) : (
                     <Empty

src/pages/master/brandDevice/hooks/errorCode.js

@@ -1,263 +0,0 @@
-import { useState, useEffect } from 'react';
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
-
-export const useErrorCodeLogic = (errorCodeForm, fileList) => {
-    const [solutionFields, setSolutionFields] = useState([0]);
-    const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
-    const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
-    const [firstSolutionValid, setFirstSolutionValid] = useState(false);
-    const [solutionsToDelete, setSolutionsToDelete] = useState(new Set());
-
-    const checkPreviousSolutionValid = (currentSolutionIndex) => {
-        for (let i = 0; i < currentSolutionIndex; i++) {
-            const fieldId = solutionFields[i];
-            const solutionType = solutionTypes[fieldId];
-
-            const solutionName = errorCodeForm.getFieldValue(`solution_name_${fieldId}`);
-            if (!solutionName || solutionName.trim() === '') {
-                return false;
-            }
-
-            if (solutionType === 'text') {
-                const textSolution = errorCodeForm.getFieldValue(`text_solution_${fieldId}`);
-                if (!textSolution || textSolution.trim() === '') {
-                    return false;
-                }
-            } else if (solutionType === 'file') {
-                const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
-                if (filesForSolution.length === 0) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    };
-
-    const checkFirstSolutionValid = () => {
-        if (solutionFields.length === 0) {
-            setFirstSolutionValid(false);
-            return false;
-        }
-        const isValid = checkPreviousSolutionValid(1);
-        setFirstSolutionValid(isValid);
-        return isValid;
-    };
-
-    const handleAddSolutionField = () => {
-        const currentSolutionCount = solutionFields.length;
-        const nextSolutionNumber = currentSolutionCount + 1;
-
-        if (!checkPreviousSolutionValid(currentSolutionCount)) {
-            let incompleteSolutionIndex = -1;
-            for (let i = 0; i < currentSolutionCount; i++) {
-                const fieldId = solutionFields[i];
-                const solutionType = solutionTypes[fieldId];
-                const solutionName = errorCodeForm.getFieldValue(`solution_name_${fieldId}`);
-                let hasContent = false;
-
-                if (solutionType === 'text') {
-                    const textSolution = errorCodeForm.getFieldValue(`text_solution_${fieldId}`);
-                    hasContent = textSolution && textSolution.trim();
-                } else if (solutionType === 'file') {
-                    const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
-                    hasContent = filesForSolution.length > 0;
-                }
-
-                if (!solutionName?.trim() || !hasContent) {
-                    incompleteSolutionIndex = i + 1;
-                    break;
-                }
-            }
-
-            NotifAlert({
-                icon: 'warning',
-                title: 'Perhatian',
-                message: `Harap lengkapi Solution ${incompleteSolutionIndex} terlebih dahulu sebelum menambah Solution ${nextSolutionNumber}!`
-            });
-            return;
-        }
-
-        const newId = `new-${Date.now()}`;
-        setSolutionFields(prev => [...prev, newId]);
-        setSolutionTypes(prev => ({ ...prev, [newId]: 'text' }));
-        setSolutionStatuses(prev => ({ ...prev, [newId]: true }));
-        errorCodeForm.setFieldValue(`solution_status_${newId}`, true);
-        errorCodeForm.setFieldValue(`solution_type_${newId}`, 'text');
-    };
-
-    const handleRemoveSolutionField = (id) => {
-        const isNewSolution = !id.toString().startsWith('existing-');
-
-        if (isNewSolution) {
-            if (solutionFields.length > 1) {
-                setSolutionFields(solutionFields.filter(fieldId => fieldId !== id));
-                setSolutionTypes(prev => {
-                    const newTypes = { ...prev };
-                    delete newTypes[id];
-                    return newTypes;
-                });
-                setSolutionStatuses(prev => {
-                    const newStatuses = { ...prev };
-                    delete newStatuses[id];
-                    return newStatuses;
-                });
-                setSolutionsToDelete(prev => {
-                    const newSet = new Set(prev);
-                    newSet.delete(id);
-                    return newSet;
-                });
-            } else {
-                NotifAlert({
-                    icon: 'warning',
-                    title: 'Perhatian',
-                    message: 'Setiap error code harus memiliki minimal 1 solution!'
-                });
-            }
-        } else {
-            const solutionName = errorCodeForm.getFieldValue(`solution_name_${id}`);
-            const solutionType = solutionTypes[id];
-            let isEmpty = true;
-
-            const existingSolution = window.currentSolutionData?.[id];
-            const hasExistingData = existingSolution && (
-                (existingSolution.solution_name && existingSolution.solution_name.trim()) ||
-                (existingSolution.text_solution && existingSolution.text_solution.trim()) ||
-                (existingSolution.path_solution && existingSolution.path_solution.trim())
-            );
-
-            if (solutionType === 'text') {
-                const textSolution = errorCodeForm.getFieldValue(`text_solution_${id}`);
-                isEmpty = !solutionName?.trim() && !textSolution?.trim() && !hasExistingData;
-            } else if (solutionType === 'file') {
-                const filesForSolution = fileList.filter(file => file.solutionId === id);
-                isEmpty = !solutionName?.trim() && filesForSolution.length === 0 && !hasExistingData;
-            }
-
-            if (isEmpty) {
-                if (solutionFields.length > 1) {
-                    setSolutionFields(solutionFields.filter(fieldId => fieldId !== id));
-                    setSolutionTypes(prev => {
-                        const newTypes = { ...prev };
-                        delete newTypes[id];
-                        return newTypes;
-                    });
-                    setSolutionStatuses(prev => {
-                        const newStatuses = { ...prev };
-                        delete newStatuses[id];
-                        return newStatuses;
-                    });
-
-                    if (window.currentSolutionData) {
-                        delete window.currentSolutionData[id];
-                    }
-
-                    setSolutionsToDelete(prev => {
-                        const newSet = new Set(prev);
-                        newSet.delete(id);
-                        return newSet;
-                    });
-                } else {
-                    NotifAlert({
-                        icon: 'warning',
-                        title: 'Perhatian',
-                        message: 'Setiap error code harus memiliki minimal 1 solution!'
-                    });
-                }
-            } else {
-                if (solutionFields.length > 1) {
-                    setSolutionsToDelete(prev => new Set(prev).add(id));
-
-                    const solutionElement = document.querySelector(`[data-solution-id="${id}"]`);
-                    if (solutionElement) {
-                        solutionElement.style.opacity = '0.5';
-                        solutionElement.style.border = '2px dashed #ff4d4f';
-                    }
-
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: 'Solution ditandai untuk dihapus. Klik "Update Error Code" untuk menyimpan perubahan.'
-                    });
-                } else {
-                    NotifAlert({
-                        icon: 'warning',
-                        title: 'Perhatian',
-                        message: 'Setiap error code harus memiliki minimal 1 solution!'
-                    });
-                }
-            }
-        }
-    };
-
-    const handleSolutionTypeChange = (fieldId, type) => {
-        setSolutionTypes(prev => ({ ...prev, [fieldId]: type }));
-    };
-
-    const handleSolutionStatusChange = (fieldId, status) => {
-        setSolutionStatuses(prev => ({
-            ...prev,
-            [fieldId]: status
-        }));
-    };
-
-    const setSolutionsForExistingRecord = (solutions, errorCodeForm) => {
-        const newSolutionFields = [];
-        const newSolutionTypes = {};
-        const newSolutionStatuses = {};
-        const newSolutionData = {};
-
-        solutions.forEach((solution, index) => {
-            const fieldId = `existing-${index}`;
-            newSolutionFields.push(fieldId);
-            newSolutionTypes[fieldId] = solution.type_solution || 'text';
-            newSolutionStatuses[fieldId] = solution.is_active !== false;
-            newSolutionData[fieldId] = {
-                ...solution
-            };
-
-            setTimeout(() => {
-                errorCodeForm.setFieldsValue({
-                    [`solution_name_${fieldId}`]: solution.solution_name,
-                    [`text_solution_${fieldId}`]: solution.text_solution || '',
-                    [`solution_status_${fieldId}`]: solution.is_active !== false,
-                    [`solution_type_${fieldId}`]: solution.type_solution === 'image' || solution.type_solution === 'pdf' ? 'file' : solution.type_solution
-                });
-            }, 100);
-        });
-
-        setSolutionFields(newSolutionFields);
-        setSolutionTypes(newSolutionTypes);
-        setSolutionStatuses(newSolutionStatuses);
-        window.currentSolutionData = newSolutionData;
-    };
-
-    const resetSolutionFields = () => {
-        setSolutionFields([0]);
-        setSolutionTypes({ 0: 'text' });
-        setSolutionStatuses({ 0: true });
-        setFirstSolutionValid(false);
-        setSolutionsToDelete(new Set());
-    };
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            checkFirstSolutionValid();
-        }, 100);
-        return () => clearTimeout(timer);
-    }, [solutionFields, solutionTypes, fileList, errorCodeForm]);
-
-    return {
-        solutionFields,
-        solutionTypes,
-        solutionStatuses,
-        firstSolutionValid,
-        solutionsToDelete,
-        handleAddSolutionField,
-        handleRemoveSolutionField,
-        handleSolutionTypeChange,
-        handleSolutionStatusChange,
-        resetSolutionFields,
-        checkFirstSolutionValid,
-        setSolutionsForExistingRecord
-    };
-};

src/pages/master/brandDevice/hooks/solution.js

@@ -1,453 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export const useSolutionLogic = (solutionForm) => {
-    const [solutionFields, setSolutionFields] = useState([0]);
-    const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
-    const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
-    const [solutionsToDelete, setSolutionsToDelete] = useState([]);
-
-    useEffect(() => {
-        setTimeout(() => {
-            if (solutionForm) {
-                solutionForm.setFieldsValue({
-                    solution_items: {
-                        0: {
-                            name: 'Solution 1',
-                            status: true,
-                            type: 'text',
-                            text: 'Solution description',
-                            file: null,
-                            fileUpload: null
-                        }
-                    }
-                });
-            }
-        }, 100);
-    }, [solutionForm]);
-
-    const handleAddSolutionField = () => {
-        const newKey = Date.now();
-
-        setSolutionFields(prev => [...prev, newKey]);
-        setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
-        setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
-
-        setTimeout(() => {
-            const currentFormValues = solutionForm.getFieldsValue(true);
-            const existingNames = [];
-
-            Object.keys(currentFormValues).forEach(key => {
-                if (key.startsWith('solution_items,') || key.startsWith('solution_items.')) {
-                    const solutionData = currentFormValues[key];
-                    if (solutionData && solutionData.name) {
-                        existingNames.push(solutionData.name);
-                    }
-                }
-            });
-
-            if (currentFormValues.solution_items) {
-                Object.values(currentFormValues.solution_items).forEach(solution => {
-                    if (solution && solution.name) {
-                        existingNames.push(solution.name);
-                    }
-                });
-            }
-
-            let solutionNumber = solutionFields.length + 1;
-            let defaultName = `Solution ${solutionNumber}`;
-
-            while (existingNames.includes(defaultName)) {
-                solutionNumber++;
-                defaultName = `Solution ${solutionNumber}`;
-            }
-
-            solutionForm.setFieldValue(['solution_items', newKey, 'name'], defaultName);
-            solutionForm.setFieldValue(['solution_items', newKey, 'type'], 'text');
-            solutionForm.setFieldValue(['solution_items', newKey, 'text'], 'Solution description');
-            solutionForm.setFieldValue(['solution_items', newKey, 'status'], true);
-            solutionForm.setFieldValue(['solution_items', newKey, 'file'], null);
-            solutionForm.setFieldValue(['solution_items', newKey, 'fileUpload'], null);
-        }, 100);
-    };
-
-    const handleRemoveSolutionField = (key) => {
-        if (solutionFields.length <= 1) {
-            return;
-        }
-
-        setSolutionFields(prev => prev.filter(field => field !== key));
-
-        const newTypes = { ...solutionTypes };
-        const newStatuses = { ...solutionStatuses };
-        delete newTypes[key];
-        delete newStatuses[key];
-
-        setSolutionTypes(newTypes);
-        setSolutionStatuses(newStatuses);
-
-        setTimeout(() => {
-            try {
-                solutionForm.setFieldValue(['solution_items', key], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'name'], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'type'], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'text'], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'status'], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'file'], undefined);
-                solutionForm.setFieldValue(['solution_items', key, 'fileUpload'], undefined);
-            } catch (error) {
-            }
-        }, 50);
-    };
-
-    const handleSolutionTypeChange = (key, value) => {
-        setSolutionTypes(prev => ({ ...prev, [key]: value }));
-
-        setTimeout(() => {
-            const fieldName = ['solution_items', key];
-            const currentSolutionData = solutionForm.getFieldsValue([fieldName]) || {};
-            const solutionData = currentSolutionData[`solution_items,${key}`] || currentSolutionData[`solution_items.${key}`] || {};
-
-            if (value === 'text') {
-                const updatedSolutionData = {
-                    ...solutionData,
-                    fileUpload: null,
-                    file: null,
-                    path_solution: null,
-                    fileName: null,
-                    text: solutionData.text || 'Solution description'
-                };
-
-                solutionForm.setFieldValue([...fieldName, 'fileUpload'], null);
-                solutionForm.setFieldValue([...fieldName, 'file'], null);
-                solutionForm.setFieldValue([...fieldName, 'path_solution'], null);
-                solutionForm.setFieldValue([...fieldName, 'fileName'], null);
-                solutionForm.setFieldValue([...fieldName, 'text'], updatedSolutionData.text);
-            } else if (value === 'file') {
-                const updatedSolutionData = {
-                    ...solutionData,
-                    text: '',
-                    fileUpload: null,
-                    file: null,
-                    path_solution: null,
-                    fileName: null
-                };
-                solutionForm.setFieldValue([...fieldName, 'text'], '');
-                solutionForm.setFieldValue([...fieldName, 'fileUpload'], null);
-                solutionForm.setFieldValue([...fieldName, 'file'], null);
-                solutionForm.setFieldValue([...fieldName, 'path_solution'], null);
-                solutionForm.setFieldValue([...fieldName, 'fileName'], null);
-            }
-        }, 0);
-    };
-
-    const handleSolutionStatusChange = (key, value) => {
-        setSolutionStatuses(prev => ({ ...prev, [key]: value }));
-    };
-
-    const resetSolutionFields = () => {
-        setSolutionFields([0]);
-        setSolutionTypes({ 0: 'text' });
-        setSolutionStatuses({ 0: true });
-
-        if (!solutionForm || !solutionForm.resetFields) {
-            return;
-        }
-
-        solutionForm.resetFields();
-        setTimeout(() => {
-            solutionForm.setFieldsValue({
-                solution_items: {
-                    0: {
-                        name: 'Solution 1',
-                        status: true,
-                        type: 'text',
-                        text: 'Solution description',
-                        file: null,
-                        fileUpload: null
-                    }
-                }
-            });
-
-            solutionForm.setFieldValue(['solution_items', 0, 'name'], 'Solution 1');
-            solutionForm.setFieldValue(['solution_items', 0, 'type'], 'text');
-            solutionForm.setFieldValue(['solution_items', 0, 'text'], 'Solution description');
-            solutionForm.setFieldValue(['solution_items', 0, 'status'], true);
-            solutionForm.setFieldValue(['solution_items', 0, 'file'], null);
-            solutionForm.setFieldValue(['solution_items', 0, 'fileUpload'], null);
-
-        }, 100);
-    };
-
-    const checkFirstSolutionValid = () => {
-        if (!solutionForm || !solutionForm.getFieldsValue) {
-            return false;
-        }
-        const values = solutionForm.getFieldsValue();
-
-        const firstField = solutionFields[0];
-        if (!firstField) {
-            return false;
-        }
-
-        const solutionKey = firstField.key || firstField;
-        const commaPath = `solution_items,${solutionKey}`;
-        const dotPath = `solution_items.${solutionKey}`;
-        const firstSolution = values[commaPath] || values[dotPath];
-
-        if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') {
-            return false;
-        }
-
-        if (solutionTypes[solutionKey] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
-            return false;
-        }
-
-        return true;
-    };
-
-    const getSolutionData = () => {
-        try {
-            const values = solutionForm.getFieldsValue(true);
-            const result = [];
-
-            solutionFields.forEach(key => {
-                let solution = null;
-
-                try {
-                    solution = solutionForm.getFieldValue(['solution_items', key]);
-                } catch (error) {
-                }
-
-                if (!solution && values.solution_items && values.solution_items[key]) {
-                    solution = values.solution_items[key];
-                }
-
-                if (!solution) {
-                    const commaKey = `solution_items,${key}`;
-                    solution = values[commaKey];
-                }
-
-                if (!solution) {
-                    const dotKey = `solution_items.${key}`;
-                    solution = values[dotKey];
-                }
-
-                if (!solution) {
-                    const allKeys = Object.keys(values);
-                    const foundKey = allKeys.find(k =>
-                        k.includes(key.toString()) &&
-                        k.includes('solution_items')
-                    );
-                    if (foundKey) {
-                        solution = values[foundKey];
-                    }
-                }
-
-                if (!solution) {
-                    const rawValues = solutionForm.getFieldsValue();
-
-                    if (rawValues.solution_items && rawValues.solution_items[key]) {
-                        solution = rawValues.solution_items[key];
-                    }
-                }
-
-                if (!solution) {
-                    return;
-                }
-
-
-                const hasName = solution.name && solution.name.trim() !== '';
-
-                if (!hasName) {
-                    return;
-                }
-
-                const solutionType = solutionTypes[key] || solution.type || 'text';
-                let isValidType = true;
-
-                if (solutionType === 'text') {
-                    isValidType = solution.text && solution.text.trim() !== '';
-                    if (!isValidType) {
-                        return;
-                    }
-                } else if (solutionType === 'file') {
-                    const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== '';
-                    const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0);
-                    const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0);
-
-                    isValidType = hasPathSolution || hasFileUpload || hasFile;
-                    if (!isValidType) {
-                        return;
-                    }
-                }
-
-                let pathSolution = '';
-                let fileObject = null;
-                const typeSolution = solutionTypes[key] || solution.type || 'text';
-
-                if (typeSolution === 'file') {
-                    if (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0) {
-                        pathSolution = solution.fileUpload.path_solution || solution.fileUpload.uploadPath || '';
-                        fileObject = solution.fileUpload;
-                    } else if (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0) {
-                        pathSolution = solution.file.path_solution || solution.file.uploadPath || '';
-                        fileObject = solution.file;
-                    } else if (solution.file && typeof solution.file === 'string' && solution.file.trim() !== '') {
-                        pathSolution = solution.file;
-                    } else if (solution.path_solution && solution.path_solution.trim() !== '') {
-                        pathSolution = solution.path_solution;
-                    } else {
-                    }
-                }
-
-                let finalTypeSolution = typeSolution;
-                if (typeSolution === 'file') {
-                    if (fileObject && fileObject.type_solution) {
-                        finalTypeSolution = fileObject.type_solution;
-                    } else {
-                        finalTypeSolution = 'image';
-                    }
-                }
-
-                const finalSolution = {
-                    solution_name: solution.name,
-                    type_solution: finalTypeSolution,
-                    is_active: solution.status !== false && solution.status !== undefined ? solution.status : (solutionStatuses[key] !== false),
-                };
-
-                if (typeSolution === 'text') {
-                    finalSolution.text_solution = solution.text || '';
-                    finalSolution.path_solution = '';
-                } else {
-                    finalSolution.text_solution = '';
-                    finalSolution.path_solution = pathSolution;
-                }
-
-                result.push(finalSolution);
-            });
-
-            return result;
-        } catch (error) {
-            return [];
-        }
-    };
-
-    const setSolutionsForExistingRecord = (solutions, form) => {
-        if (!solutions || solutions.length === 0) return;
-
-        const newFields = solutions.map((solution, index) => solution.id || index);
-
-        setSolutionFields(newFields);
-
-        const solutionsValues = {};
-        const newTypes = {};
-        const newStatuses = {};
-
-        solutions.forEach((solution, index) => {
-            const key = solution.brand_code_solution_id || solution.id || index;
-
-            let fileObject = null;
-            if (solution.path_solution && solution.path_solution.trim() !== '') {
-                const fileName = solution.file_upload_name || solution.path_solution.split('/').pop() || `file_${index}`;
-
-                fileObject = {
-                    uploadPath: solution.path_solution,
-                    path_solution: solution.path_solution,
-                    name: fileName,
-                    type_solution: solution.type_solution || 'image',
-                    isExisting: true,
-                    size: 0,
-                    type: solution.type_solution === 'pdf' ? 'application/pdf' : 'image/jpeg',
-                    fileExtension: solution.type_solution === 'pdf' ? 'pdf' : (fileName.split('.').pop().toLowerCase() || 'jpg')
-                };
-            }
-
-            const isFileType = solution.type_solution && solution.type_solution !== 'text' && fileObject;
-
-            solutionsValues[key] = {
-                name: solution.solution_name || '',
-                type: isFileType ? 'file' : 'text',
-                text: solution.text_solution || '',
-                file: fileObject,
-                fileUpload: fileObject,
-                status: solution.is_active !== false,
-                path_solution: solution.path_solution || ''
-            };
-            newTypes[key] = isFileType ? 'file' : 'text';
-            newStatuses[key] = solution.is_active !== false;
-        });
-
-        const nestedFormValues = {
-            solution_items: {}
-        };
-
-        Object.keys(solutionsValues).forEach(key => {
-            const solution = solutionsValues[key];
-            nestedFormValues.solution_items[key] = {
-                name: solution.name,
-                type: solution.type,
-                text: solution.text,
-                file: solution.file,
-                fileUpload: solution.fileUpload,
-                status: solution.status,
-                path_solution: solution.path_solution
-            };
-        });
-
-        form.setFieldsValue(nestedFormValues);
-
-        const fallbackFormValues = {};
-        Object.keys(solutionsValues).forEach(key => {
-            const solution = solutionsValues[key];
-            fallbackFormValues[`solution_items,${key}`] = {
-                name: solution.name,
-                type: solution.type,
-                text: solution.text,
-                file: solution.file,
-                fileUpload: solution.fileUpload,
-                status: solution.status,
-                path_solution: solution.path_solution
-            };
-        });
-
-        form.setFieldsValue(fallbackFormValues);
-
-        Object.keys(solutionsValues).forEach(key => {
-            const solution = solutionsValues[key];
-            form.setFieldValue([`solution_items,${key}`, 'name'], solution.name);
-            form.setFieldValue([`solution_items,${key}`, 'type'], solution.type);
-            form.setFieldValue([`solution_items,${key}`, 'text'], solution.text);
-            form.setFieldValue([`solution_items,${key}`, 'file'], solution.file);
-            form.setFieldValue([`solution_items,${key}`, 'fileUpload'], solution.fileUpload);
-            form.setFieldValue([`solution_items,${key}`, 'status'], solution.status);
-            form.setFieldValue([`solution_items,${key}`, 'path_solution'], solution.path_solution);
-
-            form.setFieldValue(['solution_items', key, 'name'], solution.name);
-            form.setFieldValue(['solution_items', key, 'type'], solution.type);
-            form.setFieldValue(['solution_items', key, 'text'], solution.text);
-            form.setFieldValue(['solution_items', key, 'file'], solution.file);
-            form.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
-            form.setFieldValue(['solution_items', key, 'status'], solution.status);
-            form.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
-        });
-
-        setSolutionTypes(newTypes);
-        setSolutionStatuses(newStatuses);
-    };
-
-    return {
-        solutionFields,
-        solutionTypes,
-        solutionStatuses,
-        solutionsToDelete,
-        firstSolutionValid: checkFirstSolutionValid(),
-        handleAddSolutionField,
-        handleRemoveSolutionField,
-        handleSolutionTypeChange,
-        handleSolutionStatusChange,
-        resetSolutionFields,
-        checkFirstSolutionValid,
-        getSolutionData,
-        setSolutionsForExistingRecord,
-    };
-};

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

@@ -38,7 +38,7 @@ const DetailPlantSubSection = (props) => {
             return;
         }
 
-        console.log(`📝 Input change: ${name} = ${value}`);
+        // console.log(`📝 Input change: ${name} = ${value}`);
 
         if (name) {
             setFormData((prev) => ({
@@ -74,16 +74,20 @@ const DetailPlantSubSection = (props) => {
             return;
 
         try {
-            console.log('💾 Current formData before save:', formData);
+            // console.log('💾 Current formData before save:', formData);
 
             const payload = {
                 plant_sub_section_name: formData.plant_sub_section_name,
-                plant_sub_section_description: (formData.plant_sub_section_description && formData.plant_sub_section_description.trim() !== '') ? formData.plant_sub_section_description : ' ',
+                plant_sub_section_description:
+                    formData.plant_sub_section_description &&
+                    formData.plant_sub_section_description.trim() !== ''
+                        ? formData.plant_sub_section_description
+                        : ' ',
                 table_name_value: formData.table_name_value, // Fix field name
                 is_active: formData.is_active,
             };
 
-            console.log('📤 Payload to be sent:', payload);
+            // console.log('📤 Payload to be sent:', payload);
 
             const response =
                 props.actionMode === 'edit'
@@ -126,17 +130,17 @@ const DetailPlantSubSection = (props) => {
     };
 
     useEffect(() => {
-        console.log('🔄 Modal state changed:', {
-            showModal: props.showModal,
-            actionMode: props.actionMode,
-            selectedData: props.selectedData,
-        });
+        //  console.log('🔄 Modal state changed:', {
+        //     showModal: props.showModal,
+        //     actionMode: props.actionMode,
+        //     selectedData: props.selectedData,
+        // });
 
         if (props.selectedData) {
-            console.log('📋 Setting form data from selectedData:', props.selectedData);
+            // console.log('📋 Setting form data from selectedData:', props.selectedData);
             setFormData(props.selectedData);
         } else {
-            console.log('📋 Resetting to default data');
+            // console.log('📋 Resetting to default data');
             setFormData(defaultData);
         }
     }, [props.showModal, props.selectedData, props.actionMode]);

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

@@ -112,9 +112,9 @@ const DetailShift = (props) => {
                 is_active: formData.is_active,
             };
 
-            console.log('Payload yang dikirim:', payload);
-            console.log('Type start_time:', typeof payload.start_time, payload.start_time);
-            console.log('Type end_time:', typeof payload.end_time, payload.end_time);
+            // console.log('Payload yang dikirim:', payload);
+            // console.log('Type start_time:', typeof payload.start_time, payload.start_time);
+            // console.log('Type end_time:', typeof payload.end_time, payload.end_time);
 
             const response =
                 props.actionMode === 'edit'

src/pages/master/sparepart/component/DetailSparepart.jsx

@@ -95,11 +95,11 @@ const DetailSparepart = (props) => {
             const newFile = fileList.length > 0 ? fileList[0] : null;
 
             if (newFile && newFile.originFileObj) {
-                console.log('Uploading file:', newFile.originFileObj);
+                // console.log('Uploading file:', newFile.originFileObj);
                 const uploadResponse = await uploadFile(newFile.originFileObj, 'images');
 
                 // Log untuk debugging
-                console.log('Upload response:', uploadResponse);
+                // console.log('Upload response:', uploadResponse);
 
                 // Cek berbagai kemungkinan struktur respons dari API
                 let uploadedUrl = null;
@@ -169,7 +169,7 @@ const DetailSparepart = (props) => {
                 }
 
                 if (uploadedUrl) {
-                    console.log('Successfully extracted image URL:', uploadedUrl);
+                    // console.log('Successfully extracted image URL:', uploadedUrl);
                     imageUrl = uploadedUrl;
                 } else {
                     console.error('Upload response structure:', uploadResponse);
@@ -209,7 +209,10 @@ const DetailSparepart = (props) => {
                 sparepart_name: formData.sparepart_name, // Wajib
             };
 
-            payload.sparepart_description = (formData.sparepart_description && formData.sparepart_description.trim() !== '') ? formData.sparepart_description : ' ';
+            payload.sparepart_description =
+                formData.sparepart_description && formData.sparepart_description.trim() !== ''
+                    ? formData.sparepart_description
+                    : ' ';
             if (formData.sparepart_model && formData.sparepart_model.trim() !== '') {
                 payload.sparepart_model = formData.sparepart_model;
             }
@@ -233,13 +236,13 @@ const DetailSparepart = (props) => {
                 payload.sparepart_foto = imageUrl;
             }
 
-            console.log('Sending payload:', payload);
+            // console.log('Sending payload:', payload);
 
             const response = formData.sparepart_id
                 ? await updateSparepart(formData.sparepart_id, payload)
                 : await createSparepart(payload);
 
-            console.log('API response:', response);
+            // console.log('API response:', response);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                 NotifOk({

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

@@ -164,7 +164,7 @@ const ListUnit = memo(function ListUnit(props) {
     const handleDelete = async (param) => {
         try {
             const response = await deleteUnit(param.unit_id);
-            console.log('deleteUnit response:', response);
+            // console.log('deleteUnit response:', response);
 
             if (response.statusCode === 200) {
                 NotifAlert({

src/pages/notification/component/UserHistoryModal.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { Modal, Typography, Card, Row, Col, Avatar, Tag, Button, Space } from 'antd';
-import { UserOutlined, PhoneOutlined, CheckCircleOutlined, SyncOutlined, SendOutlined } from '@ant-design/icons';
+import {
+    UserOutlined,
+    PhoneOutlined,
+    CheckCircleOutlined,
+    SyncOutlined,
+    SendOutlined,
+} from '@ant-design/icons';
 
 const { Text } = Typography;
 
@@ -41,9 +47,17 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
     const getStatusTag = (status) => {
         switch (status) {
             case 'delivered':
-                return <Tag icon={<CheckCircleOutlined />} color="success">Delivered</Tag>;
+                return (
+                    <Tag icon={<CheckCircleOutlined />} color="success">
+                        Delivered
+                    </Tag>
+                );
             case 'sent':
-                return <Tag icon={<SyncOutlined spin />} color="processing">Sent</Tag>;
+                return (
+                    <Tag icon={<SyncOutlined spin />} color="processing">
+                        Sent
+                    </Tag>
+                );
             case 'failed':
                 return <Tag color="error">Failed</Tag>;
             default:
@@ -55,7 +69,7 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
         <Modal
             title={
                 <Text strong style={{ fontSize: '18px' }}>
-                    User History Notification
+                    History User Notification
                 </Text>
             }
             open={visible}
@@ -78,7 +92,13 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
                                         <Avatar size="large" icon={<UserOutlined />} />
                                         <div>
                                             <Text strong>{user.name}</Text>
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '4px',
+                                                }}
+                                            >
                                                 <PhoneOutlined style={{ color: '#8c8c8c' }} />
                                                 <Text type="secondary">{user.phone}</Text>
                                             </div>

src/pages/notification/detail/UserHistory.jsx

@@ -1,14 +1,37 @@
 import React from 'react';
 import { Button, Row, Col, Card, Badge, Typography, Space, Divider } from 'antd';
-import { SendOutlined, MobileOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
+import {
+    SendOutlined,
+    MobileOutlined,
+    CheckCircleFilled,
+    ArrowLeftOutlined,
+} from '@ant-design/icons';
 
 const { Text } = Typography;
 
 // Dummy data for user history
 const userHistoryData = [
-    { id: 1, name: 'John Doe', phone: '081234567890', status: 'Delivered', timestamp: '04-11-2025 11:40 WIB' },
-    { id: 2, name: 'Jane Smith', phone: '087654321098', status: 'Delivered', timestamp: '04-11-2025 11:41 WIB' },
-    { id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
+    {
+        id: 1,
+        name: 'John Doe',
+        phone: '081234567890',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:40 WIB',
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        phone: '087654321098',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:41 WIB',
+    },
+    {
+        id: 3,
+        name: 'Peter Jones',
+        phone: '082345678901',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:42 WIB',
+    },
 ];
 
 const UserHistory = ({ notification, onBack }) => {
@@ -18,7 +41,9 @@ const UserHistory = ({ notification, onBack }) => {
                 <Col>
                     <Space align="center">
                         <Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack} />
-                        <Typography.Title level={4} style={{ margin: 0 }}>User History Notification</Typography.Title>
+                        <Typography.Title level={4} style={{ margin: 0 }}>
+                            History User Notification
+                        </Typography.Title>
                     </Space>
                     <Text type="secondary" style={{ marginLeft: '40px' }}>
                         {notification.title} - {notification.issue}
@@ -27,25 +52,34 @@ const UserHistory = ({ notification, onBack }) => {
             </Row>
 
             <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-                {userHistoryData.map(user => (
-                    <Card key={user.id} style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}>
+                {userHistoryData.map((user) => (
+                    <Card
+                        key={user.id}
+                        style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}
+                    >
                         <Row align="middle" justify="space-between">
                             <Col>
                                 <Space align="center">
                                     <Text strong>{user.name}</Text>
                                     <Text>|</Text>
-                                    <Text><MobileOutlined /> {user.phone}</Text>
+                                    <Text>
+                                        <MobileOutlined /> {user.phone}
+                                    </Text>
                                     <Text>|</Text>
                                     <Badge status="success" text={user.status} />
                                 </Space>
                                 <Divider style={{ margin: '8px 0' }} />
                                 <Space align="center">
                                     <CheckCircleFilled style={{ color: '#52c41a' }} />
-                                    <Text type="secondary">Success Delivered at {user.timestamp}</Text>
+                                    <Text type="secondary">
+                                        Success Delivered at {user.timestamp}
+                                    </Text>
                                 </Space>
                             </Col>
                             <Col>
-                                <Button type="primary" ghost icon={<SendOutlined />}>Resend</Button>
+                                <Button type="primary" ghost icon={<SendOutlined />}>
+                                    Resend
+                                </Button>
                             </Col>
                         </Row>
                     </Card>

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

@@ -9,6 +9,8 @@ import {
 import { getAllPlantSection } from '../../../../api/master-plant-section';
 import jsPDF from 'jspdf';
 import autoTable from 'jspdf-autotable';
+import ExcelJS from 'exceljs';
+import { saveAs } from 'file-saver';
 
 const { Text } = Typography;
 
@@ -54,9 +56,9 @@ const ListReport = memo(function ListReport(props) {
     };
 
     const fetchData = async (page = 1, pageSize = 10, showModal = false) => {
-        if (!plantSubSection) {
-            return;
-        }
+        // if (!plantSubSection) {
+        //     return;
+        // }
 
         if (showModal) {
             setIsLoadingModal(true);
@@ -195,8 +197,34 @@ const ListReport = memo(function ListReport(props) {
         fetchData(pagination.current, pagination.pageSize, false);
     };
 
-    const handleSearch = () => {
-        fetchData(1, pagination.pageSize, true);
+    const handleSearch = async () => {
+        setIsLoadingModal(true);
+
+        try {
+            const formattedDateStart = startDate.format('YYYY-MM-DD');
+            const formattedDateEnd = endDate.format('YYYY-MM-DD');
+
+            const params = new URLSearchParams({
+                plant_sub_section_id: plantSubSection,
+                from: formattedDateStart,
+                to: formattedDateEnd,
+                interval: periode,
+                page: 1,
+                limit: 1000,
+            });
+
+            const pivotResponse = await getAllHistoryValueReportPivot(params);
+
+            // Jika response sukses, proses data
+            if (pivotResponse && pivotResponse.data) {
+                await fetchData(1, pagination.pageSize, false);
+            }
+        } catch (error) {
+            console.error('Error fetching data:', error);
+            // Error akan ditangkap oleh api-request.js dan muncul Swal otomatis
+        } finally {
+            setIsLoadingModal(false);
+        }
     };
 
     const handleReset = () => {
@@ -247,6 +275,168 @@ const ListReport = memo(function ListReport(props) {
         { value: 120, label: '2 Hour', disabled: false },
     ];
 
+    const exportToExcel = async () => {
+        if (pivotData.length === 0) {
+            alert('No data to export');
+            return;
+        }
+
+        const tagMapping = {};
+        valueReportData.forEach(item => {
+            if (item.tag_name && item.tag_number) {
+                tagMapping[item.tag_name] = item.tag_number;
+            }
+        });
+
+        const selectedSection = plantSubSectionList.find(
+            item => item.plant_sub_section_id === plantSubSection
+        );
+        const sectionName = selectedSection ? selectedSection.plant_sub_section_name : 'Unknown';
+
+        // Buat struktur pivot yang sama seperti di tabel
+        const timeMap = new Map();
+        const tagSet = new Set();
+
+        pivotData.forEach((row) => {
+            const tagName = row.id;
+            tagSet.add(tagName);
+
+            const dataPoints = row.data || [];
+            dataPoints.forEach((item) => {
+                if (item && typeof item === 'object' && 'x' in item && 'y' in item) {
+                    const datetime = item.x;
+                    if (!timeMap.has(datetime)) {
+                        timeMap.set(datetime, {});
+                    }
+                    timeMap.get(datetime)[tagName] = item.y;
+                }
+            });
+        });
+
+        const sortedTimes = Array.from(timeMap.keys()).sort();
+        const sortedTags = Array.from(tagSet).sort();
+
+        const pivotTableData = sortedTimes.map((datetime) => {
+            const rowData = {
+                datetime: datetime,
+            };
+
+            sortedTags.forEach((tagName) => {
+                rowData[tagName] = timeMap.get(datetime)[tagName];
+            });
+
+            return rowData;
+        });
+
+        console.log('Excel Pivot data:', pivotTableData.slice(0, 5));
+        console.log('Total rows for Excel:', pivotTableData.length);
+
+        const workbook = new ExcelJS.Workbook();
+        const ws = workbook.addWorksheet('Pivot Report');
+
+        // Buat header info (3 baris pertama)
+        ws.addRow(['PT. PUPUK INDONESIA UTILITAS']);
+        ws.addRow(['GRESIK GAS COGENERATION PLANT']);
+        ws.addRow([`${sectionName}`]);
+        ws.addRow([]); // Baris kosong sebagai pemisah
+
+        // Buat header kolom dengan tag number
+        const headerRow = [
+            'Datetime',
+            ...sortedTags.map(tag => tagMapping[tag] || tag)
+        ];
+        ws.addRow(headerRow);
+
+        // Buat data rows - PERBAIKAN: Simpan sebagai number murni
+        pivotTableData.forEach((rowData) => {
+            const row = [dayjs(rowData.datetime).format('DD-MM-YYYY HH:mm')];
+            sortedTags.forEach((tagName) => {
+                const value = rowData[tagName];
+                // Simpan sebagai number, bukan string
+                if (value !== undefined && value !== null) {
+                    row.push(Number(value));
+                } else {
+                    row.push('-');
+                }
+            });
+            ws.addRow(row);
+        });
+
+        // Set column widths
+        ws.getColumn(1).width = 18; // Datetime column
+        for (let i = 2; i <= sortedTags.length + 1; i++) {
+            ws.getColumn(i).width = 12; // Tag columns
+        }
+
+        // Merge cells untuk header info
+        const totalCols = sortedTags.length + 1;
+        ws.mergeCells(1, 1, 1, totalCols); // Baris 1
+        ws.mergeCells(2, 1, 2, totalCols); // Baris 2
+        ws.mergeCells(3, 1, 3, totalCols); // Baris 3
+
+        // Style untuk header info (3 baris pertama - bold dan center)
+        for (let i = 1; i <= 3; i++) {
+            const cell = ws.getCell(i, 1);
+            cell.font = { bold: true, size: 12 };
+            cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
+        }
+
+        // Style untuk header kolom (bold, background color, center, border)
+        const headerRowIndex = 5; // Baris header
+        for (let col = 1; col <= totalCols; col++) {
+            const cell = ws.getCell(headerRowIndex, col);
+            cell.font = { bold: true, size: 11 };
+            cell.fill = {
+                type: 'pattern',
+                pattern: 'solid',
+                fgColor: { argb: 'FFDCDCDC' }
+            };
+            cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
+            cell.border = {
+                top: { style: 'thin', color: { argb: 'FF000000' } },
+                bottom: { style: 'thin', color: { argb: 'FF000000' } },
+                left: { style: 'thin', color: { argb: 'FF000000' } },
+                right: { style: 'thin', color: { argb: 'FF000000' } }
+            };
+        }
+
+        // Style untuk data cells (border dan alignment) - PERBAIKAN: Format number dengan 2 desimal
+        for (let row = headerRowIndex + 1; row <= ws.rowCount; row++) {
+            for (let col = 1; col <= totalCols; col++) {
+                const cell = ws.getCell(row, col);
+
+                cell.alignment = {
+                    horizontal: 'center',
+                    vertical: 'middle',
+                    wrapText: true
+                };
+                cell.border = {
+                    top: { style: 'thin', color: { argb: 'FF000000' } },
+                    bottom: { style: 'thin', color: { argb: 'FF000000' } },
+                    left: { style: 'thin', color: { argb: 'FF000000' } },
+                    right: { style: 'thin', color: { argb: 'FF000000' } }
+                };
+
+                // Format number dengan 2 desimal untuk kolom value (kolom 2 dst)
+                if (col > 1) {
+                    const cellValue = cell.value;
+                    // Hanya set format number jika cell berisi angka
+                    if (typeof cellValue === 'number') {
+                        cell.numFmt = '0.00';
+                    }
+                }
+            }
+        }
+
+        // Generate file name
+        const fileName = `Report_Pivot_${startDate.format('DD-MM-YYYY')}_to_${endDate.format('DD-MM-YYYY')}.xlsx`;
+
+        // Save file
+        const buffer = await workbook.xlsx.writeBuffer();
+        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        saveAs(blob, fileName);
+    };
+
     const exportToPDF = async () => {
         if (pivotData.length === 0) {
             alert('No data to export');
@@ -393,7 +583,7 @@ const ListReport = memo(function ListReport(props) {
             doc.setFontSize(9);
             doc.setFont('helvetica', 'bold');
             doc.setFontSize(10);
-            doc.text(`Plant Section : ${sectionName}`, marginLeft + col1Width + col2Width / 2, 41, { align: 'center' });
+            doc.text(`${sectionName}`, marginLeft + col1Width + col2Width / 2, 38, { align: 'center' });
         };
 
         // Hitung total kolom tag chunks
@@ -534,7 +724,7 @@ const ListReport = memo(function ListReport(props) {
             autoTable(doc, {
                 head: [headerRow],
                 body: pdfRows,
-                startY: isFirstPage ? 50 : 15,
+                startY: isFirstPage ? 43 : 15,
                 theme: 'grid',
                 rowPageBreak: 'avoid',
                 styles: {
@@ -542,7 +732,7 @@ const ListReport = memo(function ListReport(props) {
                     cellPadding: 1.5,
                     minCellHeight: 8,
                     lineColor: [0, 0, 0],
-                    lineWidth: 0.1,
+                    lineWidth: 0.5,
                     halign: 'center',
                     valign: 'middle',
                     overflow: 'linebreak',
@@ -554,7 +744,7 @@ const ListReport = memo(function ListReport(props) {
                     halign: 'center',
                     valign: 'middle',
                     lineColor: [0, 0, 0],
-                    lineWidth: 0.3,
+                    lineWidth: 0.5,
                 },
                 columnStyles: {
                     0: {
@@ -694,11 +884,23 @@ const ListReport = memo(function ListReport(props) {
                                     type="primary"
                                     icon={<DownloadOutlined />}
                                     onClick={exportToPDF}
-                                    disabled={false}
+                                    disabled={pivotData.length === 0}
+                                    style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
                                 >
                                     Export PDF
                                 </Button>
                             </Col>
+                            <Col>
+                                <Button
+                                    type="primary"
+                                    icon={<DownloadOutlined />}
+                                    onClick={exportToExcel}
+                                    disabled={pivotData.length === 0}
+                                    style={{ backgroundColor: '#28a745', borderColor: '#28a745' }}
+                                >
+                                    Export Excel
+                                </Button>
+                            </Col>
                             <Col>
                                 <Button
                                     onClick={handleReset}

src/pages/report/trending/ReportTrending.jsx

@@ -130,9 +130,26 @@ const ReportTrending = memo(function ReportTrending(props) {
         }
     };
 
+    // Fungsi untuk menentukan apakah rentang tanggal lebih dari 1 hari
+    const isMultipleDays = () => {
+        return !startDate.isSame(endDate, 'day');
+    };
+
+    // Format sumbu X yang otomatis menyesuaikan
     const formatXAxis = (tickItem) => {
         const date = new Date(tickItem);
-        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        
+        // Jika rentang lebih dari 1 hari, tampilkan tanggal + waktu
+        if (isMultipleDays()) {
+            const day = date.getDate().toString().padStart(2, '0');
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+            return `${day}/${month} ${hours}:${minutes}`;
+        }
+        
+        // Jika hanya 1 hari, tampilkan waktu saja
+        return `${hours}:${minutes}`;
     };
 
     const CustomTooltip = ({ active, payload, label }) => {

src/pages/user/component/ChangePasswordModal.jsx

@@ -115,7 +115,7 @@ const ChangePasswordModal = (props) => {
         try {
             const response = await changePassword(props.selectedUser.user_id, formData.newPassword);
 
-            console.log('Change Password Response:', response);
+            // console.log('Change Password Response:', response);
 
             if (response && response.statusCode === 200) {
                 NotifOk({

src/pages/user/component/DetailUser.jsx

@@ -220,35 +220,27 @@ const DetailUser = (props) => {
 
         // For update mode: only send email if it has changed
         if (FormData.user_id) {
-            // Only include email if it has changed from original
             if (FormData.user_email !== originalEmail) {
                 payload.user_email = FormData.user_email;
             }
-            // Add is_active for update mode
+
             payload.is_active = FormData.is_active;
         } else {
-            // For create mode: always send email
             payload.user_email = FormData.user_email;
         }
 
-        // Only add role_id if it exists (backend requires number >= 1, no null)
         if (FormData.role_id) {
             payload.role_id = FormData.role_id;
         }
 
         // Add password and name for new user (create mode)
         if (!FormData.user_id) {
-            payload.user_name = FormData.user_name; // Username only for create
-            payload.user_password = FormData.password; // Backend expects 'user_password'
-            // Don't send confirmPassword, is_sa for create
+            payload.user_name = FormData.user_name;
+            payload.user_password = FormData.password;
         }
-        // For update mode:
-        // - Don't send 'user_name' (username is immutable)
-        // - is_active is now sent for update mode
-        // - Only send email if it has changed
 
         try {
-            console.log('Payload being sent:', payload);
+            // console.log('Payload being sent:', payload);
 
             let response;
             if (!FormData.user_id) {
@@ -257,11 +249,10 @@ const DetailUser = (props) => {
                 response = await updateUser(FormData.user_id, payload);
             }
 
-            console.log('Save User Response:', response);
+            // console.log('Save User Response:', response);
 
             // Check if response is successful
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-                // If in edit mode and newPassword is provided, change password
                 if (FormData.user_id && FormData.newPassword) {
                     try {
                         const passwordResponse = await changePassword(
@@ -385,9 +376,9 @@ const DetailUser = (props) => {
                 search: '',
             });
 
-            console.log('Fetching roles with params:', queryParams.toString());
+            // console.log('Fetching roles with params:', queryParams.toString());
             const response = await getAllRole(queryParams);
-            console.log('Fetched roles response:', response);
+            // console.log('Fetched roles response:', response);
 
             // Handle different response structures
             if (response && response.data) {
@@ -408,7 +399,7 @@ const DetailUser = (props) => {
                 }
 
                 setRoleList(roles);
-                console.log('Setting role list:', roles);
+                // console.log('Setting role list:', roles);
             } else {
                 // Add mock data as fallback
                 console.warn('No response data, using mock data');
@@ -418,7 +409,7 @@ const DetailUser = (props) => {
                     { role_id: 3, role_name: 'User', role_level: 3 },
                 ];
                 setRoleList(mockRoles);
-                console.log('Setting mock role list:', mockRoles);
+                // console.log('Setting mock role list:', mockRoles);
             }
         } catch (error) {
             console.error('Error fetching roles:', error);
@@ -429,7 +420,7 @@ const DetailUser = (props) => {
                 { role_id: 3, role_name: 'User', role_level: 3 },
             ];
             setRoleList(mockRoles);
-            console.log('Setting mock role list due to error:', mockRoles);
+            // console.log('Setting mock role list due to error:', mockRoles);
 
             // Only show error notification if we don't have fallback data
             if (process.env.NODE_ENV === 'development') {
@@ -1146,9 +1137,7 @@ const DetailUser = (props) => {
                             ))}
                         </Select>
                         {errors.role_id && (
-                            <Text style={{ color: 'red', fontSize: '12px' }}>
-                                {errors.role_id}
-                            </Text>
+                            <Text style={{ color: 'red', fontSize: '12px' }}>{errors.role_id}</Text>
                         )}
                     </div>
                 </div>