Update loading note, shorten Issue Zulip

BACKEND/app/services/line_connection.ts

@@ -616,6 +616,10 @@ export default class LineConnection {
               return
             }
             if (script?.send_result || script?.sendResult) {
+              this.socketIO.emit('loading_note', {
+                stationId: this.config.stationId,
+                lineId: this.config.id,
+              })
               const detectLog = await this.detectLogWithAI(this.outputALLScenario)
               const result = mapToLineFormat({
                 lineNumber: this.config.lineNumber,
@@ -2318,7 +2322,7 @@ Ports Missing/Down: ${missing.length}\n\n`
       <tr><td style="padding:16px 20px;">
       <div style="display:flex;justify-content:space-between; align-items:center;border-bottom:1px solid #f0f1f3;padding-bottom:10px;">
         <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;">Receiving &amp; Inspection Notes</div>
-        <div style="color:#222222;font-size:11px;font-weight:500;opacity:.65;">${dataIncomingBySN?.packagePo?.receivedBy?.fullName || 'Unknown'} · ${dataIncomingBySN?.packagePo?.receivedDate ? momentTZ(dataIncomingBySN?.packagePo?.receivedDate).tz(timeZone).format('DD MMM, HH:mm') : ''}</div>
+        <div style="color:#222222;font-size:11px;font-weight:500;opacity:.65;">${dataIncomingBySN?.packagePo?.receivedBy?.fullName || 'Unknown'} · ${dataIncomingBySN?.packagePo?.receivedDate ? momentTZ(dataIncomingBySN?.packagePo?.receivedDate).tz(timeZone).format('DD MMM YYYY, HH:mm') : ''}</div>
       </div>
         <div style="padding:10px 14px;background:#fffbeb;border-left:3px solid #f59e0b;border-radius:0 6px 6px 0;font-size:12px;color:#92400e;margin-bottom:8px;">
           <div style="font-weight:700;margin-bottom:4px;font-size:11px;">&#9888; Warning from Warehouse</div>
@@ -2404,7 +2408,7 @@ Ports Missing/Down: ${missing.length}\n\n`
                       ${this?.userTest?.dpelp?.name || 'Unknown'}
                   </div>
                   <div style="margin-top:4px;font-size:10px;color:#9ca3af;">
-                     ${momentTZ(this?.userTest?.dpelp?.time).tz(timeZone).format('DD MMM YYYY, HH:mm')}
+                     ${momentTZ(this?.userTest?.dpelp?.time || new Date()).tz(timeZone).format('DD MMM YYYY, HH:mm')}
                   </div>
               </td>
           </tr></tbody>
@@ -2462,7 +2466,7 @@ Ports Missing/Down: ${missing.length}\n\n`
               <svg viewBox="0 0 20 20" width="17" height="17" fill="none" style="vertical-align:middle;color:#1e40af;"><rect x="2" y="3" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M7 17h6M10 14v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
               <span style="vertical-align:middle;margin-left:8px;">Software Check</span>
             </td>
-            <td align="right" style="padding:7px 12px;color:#1e40af;font-size:11px;font-weight:500;opacity:.65;">${this?.userTest?.dpelp?.name || ''} · ${momentTZ(this?.userTest?.dpelp?.time).tz(timeZone).format('DD MMM YYYY, HH:mm')}</td>
+            <td align="right" style="padding:7px 12px;color:#1e40af;font-size:11px;font-weight:500;opacity:.65;">${this?.userTest?.dpelp?.name || ''} · ${momentTZ(this?.userTest?.dpelp?.time || new Date()).tz(timeZone).format('DD MMM YYYY, HH:mm')}</td>
           </tr>
         </table>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">

BACKEND/providers/socket_io_provider.ts

@@ -1439,6 +1439,11 @@ export class WebSocketIo {
     return html
   }
 
+  shortenResult(text: string) {
+    const match = text.match(/RESULT:.*?(?=SUMMARY:)/s);
+    return match ? match[0].trim().replace(/,\s*$/, '') : text;
+  }
+
   /**
    * Generates a Zulip-compatible Markdown table string from the results array.
    * Uses <br> to force line breaks within the License cell.
@@ -1467,6 +1472,10 @@ export class WebSocketIo {
         ? item.issues.map((i: string) => `• ${i.replace('|', '')}`).join(' --')
         : '- No issues detected.'
 
+      const issue = item.issues?.length ? item.issues.join("\n") : "- No issues detected."
+      const shortenedIssue = this.shortenResult(issue).split("\n")
+      const issuesMdShort = shortenedIssue.map((i: string) => `• ${i.replace('|', '')}`).join(' --')
+
       msg +=
         `| ${item.line || ''}` +
         ` | ${item.pid || ''} ${item.vid ? ` (${item.vid})` : ''}` +
@@ -1474,7 +1483,7 @@ export class WebSocketIo {
         ` | ${item.mac || ''}` +
         ` | ${item.ios || ''}` +
         ` | ${licenseMd}` +
-        ` | ${issuesMd}` +
+        ` | ${issuesMdShort}` +
         ` |\n`
     }
 

FRONTEND/src/App.tsx

@@ -405,6 +405,7 @@ function App() {
             data: data.data,
             inventory: data.inventory,
             latestScenario: data.latestScenario,
+            loadingNote: false,
           },
           data?.stationId,
         );
@@ -549,6 +550,14 @@ function App() {
       }
     });
 
+    socket?.on("loading_note", (data) => {
+      updateValueLineStation(
+        data?.lineId,
+        { loadingNote: true },
+        data?.stationId,
+      );
+    });
+
     // ✅ cleanup on unmount or when socket changes
     return () => {
       socket.off("init");
@@ -569,6 +578,7 @@ function App() {
       socket.off("test_port_physical");
       socket.off("feature_tested");
       socket.off("summary_tested");
+      socket.off("loading_note");
     };
   }, [socket, stations, selectedLine]);
 

FRONTEND/src/components/Components/LoaderOverlay.tsx

@@ -0,0 +1,41 @@
+import { Box, Center, Loader } from "@mantine/core";
+import React from "react";
+
+interface LoaderOverlayProps {
+  isLoading: boolean;
+  children: React.ReactNode;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+const LoaderOverlay: React.FC<LoaderOverlayProps> = ({
+  isLoading,
+  children,
+  size = "md",
+}) => {
+  return (
+    <Box style={{ position: "relative" }}>
+      {children}
+      {isLoading && (
+        <Box
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(255, 255, 255, 0.7)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: "inherit",
+            zIndex: 10,
+          }}
+        >
+          <Loader size={size} />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default LoaderOverlay;

FRONTEND/src/components/Modal/ModalTerminal.tsx

@@ -56,6 +56,7 @@ import ModalRunScenario from "./ModalRunScenario";
 import DrawerScenario from "./ModalScenario";
 import ModalLineHistory from "./ModalLineHistory";
 import AutoProgress from "../Components/AutoProgress";
+import LoaderOverlay from "../Components/LoaderOverlay";
 import { bodyDPELP, convertFromKilobytesString } from "../../untils/helper";
 const apiUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -1079,10 +1080,6 @@ const ModalTerminal = ({
                           mb={"4px"}
                           variant="light"
                           onClick={() => {
-                            setIsDisable(true);
-                            setTimeout(() => {
-                              setIsDisable(false);
-                            }, 3000);
                             socket?.emit("update_note", {
                               lineId: line?.id,
                               stationId: stationItem?.id,
@@ -1104,18 +1101,20 @@ const ModalTerminal = ({
                         </Button>
                       </Flex>
 
-                      <Box>
+                      <LoaderOverlay isLoading={line?.loadingNote || false}>
-                        <Textarea
+                        <Box>
-                          disabled={isDisable}
+                          <Textarea
-                          rows={5}
+                            disabled={isDisable}
-                          size="sm"
+                            rows={5}
-                          placeholder="Report from AI"
+                            size="sm"
-                          value={valueIssue}
+                            placeholder="Report from AI"
-                          onChange={(event) =>
+                            value={valueIssue}
-                            setValueIssue(event.currentTarget.value)
+                            onChange={(event) =>
-                          }
+                              setValueIssue(event.currentTarget.value)
-                        />
+                            }
-                      </Box>
+                          />
+                        </Box>
+                      </LoaderOverlay>
                     </Box>
                     <Box
                       style={{

FRONTEND/src/untils/types.ts

@@ -111,6 +111,7 @@ export type TLine = {
   isReady?: boolean;
   isSkipPhysical?: boolean;
   reasonSkipPhysical?: string;
+  loadingNote?: boolean;
 };
 
 export type TUser = {