chức năng copy ở tất cả các view có PID, SN, full PID + SN

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?.pid || ""
-                              line?.inventory?.sn || ""
-                            }`
                           );
                         }}
                         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

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;
+
+

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}

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