From d219e0145b65505da9440db80cb7e8ef5c078873 Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Thu, 27 Nov 2025 13:34:42 +0700
Subject: [PATCH] UI improvements and bug fixes for line and switch controls

Enhanced CardLine layout and added user CLI usage indicator. Updated info_line font size for better readability. Improved DrawerControl to show 'DISCONNECTED' status when switch is unavailable. Fixed ModalTerminal issue mapping to handle undefined values. Commented out overflowX style in App for layout flexibility.
---
 FRONTEND/src/App.tsx                         |  2 +-
 FRONTEND/src/components/CardLine.tsx         | 18 ++++++++++++++++--
 FRONTEND/src/components/Component.module.css |  2 +-
 FRONTEND/src/components/DrawerControl.tsx    | 10 ++++++++--
 FRONTEND/src/components/ModalTerminal.tsx    | 12 +++++++-----
 5 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index 3f08729..5bae57d 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -501,7 +501,7 @@ function App() {
                         style={{
                           margin: 0,
                           width: "100%",
-                          overflowX: "hidden",
+                          // overflowX: "hidden",
                         }}
                       >
                         {station.lines.map((line, i) => (
diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index c2de65d..1c211ae 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -212,7 +212,7 @@ const CardLine = ({
                   </Box>
                 </Flex>
                 <Box w={"100%"}>
-                  <Flex direction={"column"} gap={"4px"} w={"100%"}>
+                  <Flex justify={"space-between"} gap={"4px"} w={"100%"}>
                     <div className={classes.info_line}>
                       PID:{" "}
                       <Text
@@ -238,6 +238,20 @@ const CardLine = ({
                         ""
                       )}
                     </div>
+                    <div
+                      style={{
+                        fontSize: "11px",
+                        color: "red",
+                      }}
+                    >
+                      {line?.userOpenCLI
+                        ? (line?.userOpenCLI === user?.userName
+                            ? "You are"
+                            : line?.userOpenCLI + " is") + " using"
+                        : ""}
+                    </div>
+                  </Flex>
+                  <Flex direction={"column"} gap={"4px"} w={"100%"}>
                     <div className={classes.info_line}>
                       SN:{" "}
                       <Text
@@ -257,7 +271,7 @@ const CardLine = ({
                       </Text>
                     </div>
                   </Flex>
-                  <Flex justify={"space-between"} w={"100%"}>
+                  <Flex justify={"space-between"} w={"100%"} display={"none"}>
                     <Box>
                       {/* {line?.tickets && line?.tickets?.length > 0 ? (
                         <Text fz={"13px"}>
diff --git a/FRONTEND/src/components/Component.module.css b/FRONTEND/src/components/Component.module.css
index 21b4142..9c0d388 100644
--- a/FRONTEND/src/components/Component.module.css
+++ b/FRONTEND/src/components/Component.module.css
@@ -10,7 +10,7 @@
 
 .info_line {
   color: dimgrey;
-  font-size: 11px;
+  font-size: 12px;
   display: flex;
   align-items: center;
   gap: 4px;
diff --git a/FRONTEND/src/components/DrawerControl.tsx b/FRONTEND/src/components/DrawerControl.tsx
index 5392d98..e7921dd 100644
--- a/FRONTEND/src/components/DrawerControl.tsx
+++ b/FRONTEND/src/components/DrawerControl.tsx
@@ -884,8 +884,14 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
           }}
         >
           <Box ps={"8px"} pt={"4px"}>
-            {dataStation?.switch ? (
-              RenderAPCStatus(dataStation?.switch)
+            {dataStation?.switch_control_ip ? (
+              dataStation?.switch ? (
+                RenderAPCStatus(dataStation?.switch)
+              ) : (
+                <Text fw={800} c="red" fz={"12px"}>
+                  DISCONNECTED
+                </Text>
+              )
             ) : (
               <Text fw={800} c="red" fz={"12px"}>
                 Switch not available
diff --git a/FRONTEND/src/components/ModalTerminal.tsx b/FRONTEND/src/components/ModalTerminal.tsx
index 4109e60..9c0177b 100644
--- a/FRONTEND/src/components/ModalTerminal.tsx
+++ b/FRONTEND/src/components/ModalTerminal.tsx
@@ -520,11 +520,13 @@ const ModalTerminal = ({
                         <Text size="sm" fw={"bold"}>
                           Issue:
                         </Text>
-                        {line?.latestScenario?.detectAI?.issue?.map((el, i) => (
-                          <Box key={i}>
-                            <Text size="sm">- {el}</Text>
-                          </Box>
-                        ))}
+                        {(line?.latestScenario?.detectAI?.issue || [])?.map(
+                          (el, i) => (
+                            <Box key={i}>
+                              <Text size="sm">- {el}</Text>
+                            </Box>
+                          )
+                        )}
                       </Box>
                     </Box>
                   ) : (