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

@@ -501,7 +501,7 @@ function App() {
                         style={{
                           margin: 0,
                           width: "100%",
-                          overflowX: "hidden",
+                          // overflowX: "hidden",
                         }}
                       >
                         {station.lines.map((line, i) => (

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"}>

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;

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

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>
                   ) : (