From a71f8ee27d4f67be04d45fbfc859be7ddbe9724b Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Mon, 24 Nov 2025 14:35:10 +0700
Subject: [PATCH] Update UI for CardLine and ModalTerminal components

Removed ticket description from CardLine display and clipboard copy. Added buttonControl styles and applied them to control buttons in ModalTerminal. Improved internet status indicator logic and adjusted grid layout for better UI consistency.
---
 FRONTEND/src/components/CardLine.tsx         |  8 ++------
 FRONTEND/src/components/Component.module.css | 10 ++++++++++
 FRONTEND/src/components/ModalTerminal.tsx    | 19 +++++++++++++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index de5853a..43401e7 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -179,10 +179,6 @@ const CardLine = ({
                         navigator.clipboard.writeText(
                           `PID: ${line?.inventory?.pid || ""} | SN: ${
                             line?.inventory?.sn || ""
-                          } | Ticket: ${
-                            line?.tickets && line?.tickets?.length > 0
-                              ? line?.tickets[0].description
-                              : ""
                           }`
                         );
                       }}
@@ -263,13 +259,13 @@ const CardLine = ({
                   </Flex>
                   <Flex justify={"space-between"} w={"100%"}>
                     <Box>
-                      {line?.tickets && line?.tickets?.length > 0 ? (
+                      {/* {line?.tickets && line?.tickets?.length > 0 ? (
                         <Text fz={"13px"}>
                           <i>{line?.tickets[0].description ?? ""}</i>
                         </Text>
                       ) : (
                         ""
-                      )}
+                      )} */}
                     </Box>
                     <div
                       style={{
diff --git a/FRONTEND/src/components/Component.module.css b/FRONTEND/src/components/Component.module.css
index 77e70a5..eb66c15 100644
--- a/FRONTEND/src/components/Component.module.css
+++ b/FRONTEND/src/components/Component.module.css
@@ -138,3 +138,13 @@
   padding-right: 4px !important;
   padding-left: 4px !important;
 }
+
+.buttonControl {
+  font-size: 10px !important;
+  font-weight: 400;
+  width: 50px !important;
+  min-width: 50px !important;
+  height: 26px !important;
+  padding-right: 4px !important;
+  padding-left: 4px !important;
+}
diff --git a/FRONTEND/src/components/ModalTerminal.tsx b/FRONTEND/src/components/ModalTerminal.tsx
index 0aa9e68..876a9c8 100644
--- a/FRONTEND/src/components/ModalTerminal.tsx
+++ b/FRONTEND/src/components/ModalTerminal.tsx
@@ -31,6 +31,7 @@ import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
 import moment from "moment";
 import axios from "axios";
 import { notifications } from "@mantine/notifications";
+import classes from "./Component.module.css";
 const apiUrl = import.meta.env.VITE_BACKEND_URL;
 
 const INIT_TICKET = {
@@ -475,7 +476,14 @@ const ModalTerminal = ({
               <Box>
                 <fieldset>
                   <Flex justify={"center"}>
-                    <IconCircleDot color="green" />
+                    <IconCircleDot
+                      color={
+                        line?.interface &&
+                        findSwitchPort(line?.interface)?.status === "ON"
+                          ? "green"
+                          : "red"
+                      }
+                    />
                     <Flex>
                       <Text size="sm" ml={"sm"}>
                         Internet
@@ -499,6 +507,7 @@ const ModalTerminal = ({
                   </Flex>
                   <Flex justify={"space-around"} mt={"4px"}>
                     <Button
+                      className={classes.buttonControl}
                       disabled={isDisable}
                       fw={400}
                       variant="outline"
@@ -511,6 +520,7 @@ const ModalTerminal = ({
                       ON
                     </Button>
                     <Button
+                      className={classes.buttonControl}
                       disabled={isDisable}
                       fw={400}
                       variant="outline"
@@ -523,6 +533,7 @@ const ModalTerminal = ({
                       OFF
                     </Button>
                     <Button
+                      className={classes.buttonControl}
                       disabled={isDisable}
                       fw={400}
                       variant="outline"
@@ -578,9 +589,9 @@ const ModalTerminal = ({
             </Flex>
           </Grid.Col>
           <Grid.Col
-            span={7}
+            span={10}
             style={{
-              borderRight: "1px solid #ccc",
+              // borderRight: "1px solid #ccc",
               borderLeft: "1px solid #ccc",
             }}
           >
@@ -750,7 +761,7 @@ const ModalTerminal = ({
               </Menu>
             </Flex>
           </Grid.Col>
-          <Grid.Col span={3}>
+          <Grid.Col span={3} display={"none"}>
             <Box>
               <Tooltip
                 label={