From e119d9c83135987fffd978cf2015481f344b2756 Mon Sep 17 00:00:00 2001
From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com>
Date: Tue, 2 Dec 2025 14:59:48 +0700
Subject: [PATCH] =?UTF-8?q?ch=E1=BB=A9c=20n=C4=83ng=20copy=20=E1=BB=9F=20t?=
 =?UTF-8?q?=E1=BA=A5t=20c=E1=BA=A3=20c=C3=A1c=20view=20c=C3=B3=20PID,=20SN?=
 =?UTF-8?q?,=20full=20PID=20+=20SN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FRONTEND/src/components/CardLine.tsx      | 43 ++++++++++++++---
 FRONTEND/src/components/CopyIcon.tsx      | 46 ++++++++++++++++++
 FRONTEND/src/components/DragTabs.tsx      |  2 +-
 FRONTEND/src/components/ModalTerminal.tsx | 59 +++++++++++++++++++++--
 4 files changed, 139 insertions(+), 11 deletions(-)
 create mode 100644 FRONTEND/src/components/CopyIcon.tsx

diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index bc6ff2a..8a22305 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -10,6 +10,7 @@ import { notifications } from "@mantine/notifications";
 import { listBaudDefault } from "../untils/constanst";
 import { IconCaretRight } from "@tabler/icons-react";
 import { motion } from "motion/react";
+import CopyIcon from "./CopyIcon";
 
 const CardLine = ({
   line,
@@ -220,14 +221,17 @@ const CardLine = ({
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
+                          if (!line?.inventory?.pid) return;
                           navigator.clipboard.writeText(
-                            `PID: ${line?.inventory?.pid || ""} | SN: ${
-                              line?.inventory?.sn || ""
-                            }`
+                            line?.inventory?.pid || ""
                           );
                         }}
                         className={`${classes.info_line} ${classes.buttonCopy}`}
                         fs={"italic"}
+                        style={{
+                          opacity: line?.inventory?.pid ? 1 : 0.5,
+                          cursor: line?.inventory?.pid ? "pointer" : "default",
+                        }}
                       >
                         {line?.inventory?.pid || ""}
                       </Text>
@@ -238,6 +242,14 @@ const CardLine = ({
                       ) : (
                         ""
                       )}
+                      {line?.inventory?.pid && (
+                        <CopyIcon
+                          value={line.inventory?.pid}
+                          label="Copy PID"
+                          copiedLabel="Copied PID"
+                          ml={4}
+                        />
+                      )}
                     </div>
                     <div
                       style={{
@@ -259,17 +271,36 @@ const CardLine = ({
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
+                          if (!line?.inventory?.sn) return;
                           navigator.clipboard.writeText(
-                            `PID: ${line?.inventory?.pid || ""} | SN: ${
-                              line?.inventory?.sn || ""
-                            }`
+                            line?.inventory?.sn || ""
                           );
                         }}
                         className={`${classes.info_line} ${classes.buttonCopy}`}
                         fs={"italic"}
+                        style={{
+                          opacity: line?.inventory?.sn ? 1 : 0.5,
+                          cursor: line?.inventory?.sn ? "pointer" : "default",
+                        }}
                       >
                         {line?.inventory?.sn || ""}
                       </Text>
+                      {line?.inventory?.sn && (
+                        <CopyIcon
+                          value={line.inventory?.sn}
+                          label="Copy SN"
+                          copiedLabel="Copied SN"
+                          ml={4}
+                          mr={4}
+                        />
+                      )}
+                      {line?.inventory?.pid && line?.inventory?.sn && (
+                        <CopyIcon
+                          value={`${line.inventory?.pid} ${line.inventory?.sn}`}
+                          label="Copy PID + SN"
+                          copiedLabel="Copied PID + SN"
+                        />
+                      )}
                     </div>
                     {line?.connecting && (
                       <motion.div
diff --git a/FRONTEND/src/components/CopyIcon.tsx b/FRONTEND/src/components/CopyIcon.tsx
new file mode 100644
index 0000000..31a2f94
--- /dev/null
+++ b/FRONTEND/src/components/CopyIcon.tsx
@@ -0,0 +1,46 @@
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useState } from "react";
+import type React from "react";
+
+interface CopyIconProps {
+  value?: string;
+  label: string; // Tooltip khi chưa copy, ví dụ: "Copy PID"
+  copiedLabel?: string; // Tooltip khi đã copy, ví dụ: "Copied PID"
+  ml?: number;
+  mr?: number;
+}
+
+const CopyIcon = ({ value, label, copiedLabel, ml = 4, mr = 0 }: CopyIconProps) => {
+  const [copied, setCopied] = useState(false);
+
+  if (!value) return null;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1000);
+  };
+
+  const tooltipText = copied ? copiedLabel || label.replace("Copy", "Copied") : label;
+
+  return (
+    <Tooltip label={tooltipText} withArrow openDelay={200}>
+      <ActionIcon
+        size="xs"
+        variant={copied ? "filled" : "light"}
+        color={copied ? "teal" : "blue"}
+        onClick={handleClick}
+        style={{ marginLeft: ml, marginRight: mr }}
+      >
+        {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+      </ActionIcon>
+    </Tooltip>
+  );
+};
+
+export default CopyIcon;
+
+
diff --git a/FRONTEND/src/components/DragTabs.tsx b/FRONTEND/src/components/DragTabs.tsx
index 2222164..07ab364 100644
--- a/FRONTEND/src/components/DragTabs.tsx
+++ b/FRONTEND/src/components/DragTabs.tsx
@@ -240,7 +240,7 @@ export default function DraggableTabs({
             >
               <IconSettings />
             </ActionIcon>
-          </Flex>
+          </Flex>-
           <Tabs.List className={classes.list}>
             <SortableContext
               items={tabs}
diff --git a/FRONTEND/src/components/ModalTerminal.tsx b/FRONTEND/src/components/ModalTerminal.tsx
index 9294af3..d2a1dc5 100644
--- a/FRONTEND/src/components/ModalTerminal.tsx
+++ b/FRONTEND/src/components/ModalTerminal.tsx
@@ -28,6 +28,7 @@ import {
   IconInfoCircle,
 } from "@tabler/icons-react";
 import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
+import CopyIcon from "./CopyIcon";
 import moment from "moment";
 import axios from "axios";
 import { notifications } from "@mantine/notifications";
@@ -479,11 +480,25 @@ const ModalTerminal = ({
                     <strong>{line?.baud || ""}</strong>
                   </Text>
                 </Flex>
-                <Flex mt="4px">
+                <Flex mt="4px" align="center">
                   <Text size="md" mr="6px">
                     PID:
                   </Text>
-                  <Text size="md">{line?.inventory?.pid || ""}</Text>
+                  <Text
+                    size="md"
+                    style={{
+                      opacity: line?.inventory?.pid ? 1 : 0.5,
+                      cursor: line?.inventory?.pid ? "pointer" : "default",
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (!line?.inventory?.pid) return;
+                      navigator.clipboard.writeText(line.inventory?.pid || "");
+                    }}
+                  >
+                    {line?.inventory?.pid || ""}
+                  </Text>
                   {line?.inventory?.vid ? (
                     <Text size="md" ml={"sm"}>
                       {line?.inventory?.vid}
@@ -491,12 +506,48 @@ const ModalTerminal = ({
                   ) : (
                     ""
                   )}
+                  <CopyIcon
+                    value={line?.inventory?.pid}
+                    label="Copy PID"
+                    copiedLabel="Copied PID"
+                    ml={8}
+                  />
                 </Flex>
-                <Flex mt="4px">
+                <Flex mt="4px" align="center">
                   <Text size="md" mr="6px">
                     SN:
                   </Text>
-                  <Text size="md">{line?.inventory?.sn || ""}</Text>
+                  <Text
+                    size="md"
+                    style={{
+                      opacity: line?.inventory?.sn ? 1 : 0.5,
+                      cursor: line?.inventory?.sn ? "pointer" : "default",
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (!line?.inventory?.sn) return;
+                      navigator.clipboard.writeText(line.inventory?.sn || "");
+                    }}
+                  >
+                    {line?.inventory?.sn || ""}
+                  </Text>
+                  <CopyIcon
+                    value={line?.inventory?.sn}
+                    label="Copy SN"
+                    copiedLabel="Copied SN"
+                    ml={8}
+                    mr={8}
+                  />
+                  <CopyIcon
+                    value={
+                      line?.inventory?.pid && line?.inventory?.sn
+                        ? `${line.inventory?.pid} ${line.inventory?.sn}`
+                        : ""
+                    }
+                    label="Copy PID + SN"
+                    copiedLabel="Copied PID + SN"
+                  />
                 </Flex>
                 <Flex mt="4px">
                   <Text size="md" mr={"6px"} fw={"bold"}>