From 654ab5408e2369cb7537f7b602cdadd7d74d4400 Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Thu, 27 Nov 2025 16:28:16 +0700
Subject: [PATCH] Update DrawerControl.tsx

---
 FRONTEND/src/components/DrawerControl.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/FRONTEND/src/components/DrawerControl.tsx b/FRONTEND/src/components/DrawerControl.tsx
index 48f554d..f257296 100644
--- a/FRONTEND/src/components/DrawerControl.tsx
+++ b/FRONTEND/src/components/DrawerControl.tsx
@@ -835,6 +835,24 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
     return `${last}`;
   };
 
+  const convertPortName = (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}`;
+  };
+
   const changeShowPort = (status: string) => {
     localStorage.setItem("show-switch-port", status);
     setCheckedActive(status);
@@ -847,8 +865,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
     if (checkedActive === "config") {
       const listInterface = stationAPI?.lines
         ?.filter((el) => el.interface)
-        .map((el) => el.interface);
-      return listInterface?.includes(portName);
+        .map((el) => convertPortName(el.interface || ""));
+      return listInterface?.includes(convertPortName(portName));
     }
   };