From f9e685fcbd8bf3555f03bd7501826fe0e114d04f Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Tue, 11 Nov 2025 13:15:29 +0700
Subject: [PATCH] Update

---
 BACKEND/app/services/line_connection.ts      | 10 ++--
 FRONTEND/src/App.css                         |  9 +++-
 FRONTEND/src/App.tsx                         | 52 +++++++++++++++++++-
 FRONTEND/src/components/CardLine.tsx         |  2 +-
 FRONTEND/src/components/Component.module.css |  6 ++-
 FRONTEND/src/components/TerminalXTerm.tsx    |  2 +-
 6 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/BACKEND/app/services/line_connection.ts b/BACKEND/app/services/line_connection.ts
index cd8741e..9ff2033 100644
--- a/BACKEND/app/services/line_connection.ts
+++ b/BACKEND/app/services/line_connection.ts
@@ -92,8 +92,7 @@ export default class LineConnection {
       })
 
       this.client.on('data', (data) => {
-        if (this.connecting) return
-        let message = data.toString()
+        let message = this.connecting ? cleanData(data.toString()) : data.toString()
         let rawData = ''
         if (this.isRunningScript) {
           this.waitingScenario = true
@@ -127,7 +126,12 @@ export default class LineConnection {
             this.getInventory()
           }, 3000)
         }
-        appendLog(message, this.config.stationId, this.config.lineNumber, this.config.port)
+        appendLog(
+          cleanData(message),
+          this.config.stationId,
+          this.config.lineNumber,
+          this.config.port
+        )
       })
 
       this.client.on('error', (err) => {
diff --git a/FRONTEND/src/App.css b/FRONTEND/src/App.css
index 6577239..06868ae 100644
--- a/FRONTEND/src/App.css
+++ b/FRONTEND/src/App.css
@@ -4,6 +4,11 @@
   /* background-color: aliceblue; */
 }
 
-button:focus{
+button:focus {
   outline: none;
-}
\ No newline at end of file
+}
+
+.xterm-viewport {
+  overflow-y: hidden !important;
+  overscroll-behavior: contain;
+}
diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index 28757c7..559912a 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -412,7 +412,57 @@ function App() {
                     setShowBottomShadow(y < maxScroll - 2);
                   }}
                 >
-                  {station.lines.length > 0 ? (
+                  {station.lines.length > 8 ? (
+                    <Grid
+                      style={{
+                        marginLeft: "3%",
+                        width: "90%",
+                        display: "flex",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <Grid.Col span={6}>
+                        <Flex wrap="wrap" gap="sm" justify={"center"}>
+                          {station.lines.slice(0, 8).map((line, i) => (
+                            <CardLine
+                              key={i}
+                              socket={socket}
+                              stationItem={station}
+                              line={line}
+                              selectedLines={selectedLines}
+                              setSelectedLines={setSelectedLines}
+                              openTerminal={openTerminal}
+                              loadTerminal={
+                                loadingTerminal &&
+                                Number(station.id) === Number(activeTab)
+                              }
+                            />
+                          ))}
+                        </Flex>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Flex wrap="wrap" gap="sm" justify={"center"}>
+                          {station.lines
+                            .slice(8, station.lines.length)
+                            .map((line, i) => (
+                              <CardLine
+                                key={i}
+                                socket={socket}
+                                stationItem={station}
+                                line={line}
+                                selectedLines={selectedLines}
+                                setSelectedLines={setSelectedLines}
+                                openTerminal={openTerminal}
+                                loadTerminal={
+                                  loadingTerminal &&
+                                  Number(station.id) === Number(activeTab)
+                                }
+                              />
+                            ))}
+                        </Flex>
+                      </Grid.Col>
+                    </Grid>
+                  ) : station.lines.length <= 8 && station.lines.length > 0 ? (
                     <Flex wrap="wrap" gap="sm" justify={"center"}>
                       {station.lines.map((line, i) => (
                         <CardLine
diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index 10680ac..5d52397 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -109,7 +109,7 @@ const CardLine = ({
             e.preventDefault();
             e.stopPropagation();
           }}
-          style={{ height: "175px", width: "300px" }}
+          style={{ height: "175px", width: "332px" }}
         >
           <TerminalCLI
             cliOpened={loadTerminal}
diff --git a/FRONTEND/src/components/Component.module.css b/FRONTEND/src/components/Component.module.css
index d34f250..5378881 100644
--- a/FRONTEND/src/components/Component.module.css
+++ b/FRONTEND/src/components/Component.module.css
@@ -1,5 +1,5 @@
 .card_line {
-  width: 320px;
+  width: 350px;
   height: 250px;
   padding: 8px;
   gap: 8px;
@@ -107,3 +107,7 @@
   /* border-bottom: solid rgba(201, 201, 201, 0.377) 1px;
   border-top: solid rgba(201, 201, 201, 0.377) 1px; */
 }
+
+.hideScrollBar::-webkit-scrollbar {
+  display: none;
+}
diff --git a/FRONTEND/src/components/TerminalXTerm.tsx b/FRONTEND/src/components/TerminalXTerm.tsx
index d4c6a60..0295454 100644
--- a/FRONTEND/src/components/TerminalXTerm.tsx
+++ b/FRONTEND/src/components/TerminalXTerm.tsx
@@ -182,7 +182,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
           height: "100%",
           backgroundColor: "black",
           paddingBottom: customStyle.paddingBottom ?? "10px",
-          minHeight: customStyle.maxHeight ?? "73vh",
+          maxHeight: customStyle.maxHeight ?? "73vh",
         }}
       >
         <div