Improve UI logic and port name handling in components

Updated DrawerControl to refine 'Select All' button logic and label. Adjusted FormAddEdit layout proportions for station info and lines. Enhanced ModalTerminal with normalized port name comparison and display. Improved TerminalXTerm loading state management and terminal reset behavior.

FRONTEND/src/components/DrawerControl.tsx

@@ -892,7 +892,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
             className={classes.buttonMenuTool}
             disabled={isSubmit}
             title={
-              listPortsSelected.length === listPorts.flat().length
+              listPortsSelected.length === listPorts.flat().length &&
+              listPorts.flat().length > 0
                 ? "Deselect All"
                 : "Select All"
             }
@@ -908,10 +909,10 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               }
             }}
           >
-            {listPortsSelected.length === listPorts.flat().length
-              ? "Deselect All"
-              : "Select All"}{" "}
-            {"(" + listPorts.flat().length + ")"}
+            {listPortsSelected.length === listPorts.flat().length &&
+            listPorts.flat().length > 0
+              ? "Clear All"
+              : "Select All"}
           </Button>
           <Button
             className={classes.buttonMenuTool}

FRONTEND/src/components/FormAddEdit.tsx

@@ -401,7 +401,7 @@ const StationSetting = ({
       >
         <Flex justify={"space-between"} gap={"sm"}>
           {/* Station info */}
-          <Box w={"40%"}>
+          <Box w={"30%"}>
             <TextInput
               required
               name="name"
@@ -689,7 +689,7 @@ const StationSetting = ({
             </div>
           </Box>
           {/* Lines */}
-          <Box w={"60%"}>
+          <Box w={"70%"}>
             <Table
               verticalSpacing="xs"
               horizontalSpacing="lg"

FRONTEND/src/components/ModalTerminal.tsx

@@ -351,12 +351,32 @@ const ModalTerminal = ({
 
   const findSwitchPort = (portName: string): SwitchPortsProps | null => {
     if (listPorts?.length > 0) {
-      const port = listPorts.find((el) => el.name === portName);
+      const port = listPorts.find(
+        (el) => normalizePortName(el.name) === normalizePortName(portName)
+      );
       if (port) return port;
     }
     return null;
   };
 
+  const normalizePortName = (port: string): string => {
+    if (!port) return "";
+
+    // Example inputs: "Fa0/1", "Gi0/0/1", "Fa0/0/2"
+    const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
+
+    if (!match) return port;
+
+    const type = match[1]; // Fa, Gi, Te, etc.
+    const numbers = match[2]; // "0/1" / "0/0/1" / "0/0/2"
+
+    // Get the last part after slash
+    const parts = numbers.split("/");
+    const last = parts[parts.length - 1];
+
+    return `${type?.slice(0, 2)}${last}`;
+  };
+
   return (
     <Box>
       <Modal
@@ -494,11 +514,11 @@ const ModalTerminal = ({
                       {line?.interface ? (
                         findSwitchPort(line?.interface)?.status === "ON" ? (
                           <Text size="sm" ml={"4px"} c={"green"}>
-                            Connected ({line?.interface})
+                            Connected ({normalizePortName(line?.interface)})
                           </Text>
                         ) : (
                           <Text size="sm" ml={"4px"} c={"red"}>
-                            Not Connected ({line?.interface})
+                            Not Connected ({normalizePortName(line?.interface)})
                           </Text>
                         )
                       ) : (

FRONTEND/src/components/TerminalXTerm.tsx

@@ -144,8 +144,12 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
     if (cliOpened) {
       setTimeout(() => {
         setLoading(false);
-      }, 500);
+      }, 100);
       if (fitRef.current) fitRef.current?.fit();
+    } else {
+      setLoading(true);
+      setIsInit(false);
+      terminal.current?.reset();
     }
   }, [cliOpened]);
 
@@ -170,8 +174,8 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
 
   useEffect(() => {
     return () => {
-      setLoading(true);
-      setIsInit(false);
+      // setLoading(true);
+      // setIsInit(false);
       // if (terminal.current) {
       //   terminal?.current.clear();
       //   terminal?.current.dispose();