Merge pull request 'add connect button to computer card' (#6) from newRemoteUI into main

Reviewed-on: http://203.171.20.94:3000/PhuongDM/TTMT.ManageWebGUI/pulls/6

src/components/cards/computer-card.tsx

@@ -1,11 +1,15 @@
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Badge } from "@/components/ui/badge";
-import { Monitor, Wifi, WifiOff, Loader2 } from "lucide-react";
+import { Monitor, Wifi, WifiOff, Loader2, Maximize2, X } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { FolderStatusPopover } from "../folder-status-popover";
 import { useGetClientFolderStatusForDevice } from "@/hooks/queries";
 import type { ClientFolderStatus } from "@/types/folder";
+import { Button } from "@/components/ui/button";
+import { getRemoteDesktopUrl } from "@/services/remote-control.service";
+import { BASE_URL } from "@/config/api";
+import { toast } from "sonner";
 export function ComputerCard({
   device,
   position,
@@ -17,6 +21,10 @@ export function ComputerCard({
   folderStatus?: ClientFolderStatus;
   isCheckingFolder?: boolean;
 }) {
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [showRemote, setShowRemote] = useState(false);
+  const [proxyUrl, setProxyUrl] = useState<string | null>(null);
+
   if (!device) {
     return (
       <div className="relative flex flex-col items-center justify-center w-24 h-24 rounded-lg border-2 border-dashed border-muted-foreground/30 bg-muted/20">
@@ -33,6 +41,46 @@ export function ComputerCard({
   const firstNetworkInfo = device.networkInfos?.[0];
   const agentVersion = device.version;
 
+  const handleConnect = async () => {
+    if (!device?.id) {
+      toast.error("Không tìm thấy nodeID của thiết bị.");
+      return;
+    }
+
+    try {
+      setIsConnecting(true);
+      const response = await getRemoteDesktopUrl(device.id);
+      const originalUrl = new URL(response.url);
+      const pathAndQuery = originalUrl.pathname + originalUrl.search;
+      const cleanPath = pathAndQuery.startsWith("/")
+        ? pathAndQuery.substring(1)
+        : pathAndQuery;
+      const baseWithoutApi = BASE_URL.replace("/api", "");
+      const proxyUrlFull = `${baseWithoutApi}/api/meshcentral/proxy/${cleanPath}`;
+
+      setProxyUrl(proxyUrlFull);
+      setShowRemote(true);
+    } catch (error: any) {
+      toast.error(
+        error?.response?.data?.message || "Không thể kết nối remote cho thiết bị này."
+      );
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleCloseRemote = () => {
+    setShowRemote(false);
+    setProxyUrl(null);
+  };
+
+  const handleFullscreen = () => {
+    const iframe = document.getElementById(`mesh-iframe-${device.id}`) as HTMLIFrameElement;
+    if (iframe?.requestFullscreen) {
+      iframe.requestFullscreen();
+    }
+  };
+
   function DeviceFolderCheck() {
     const deviceId = device.id;
     const room = device.room;
@@ -127,6 +175,26 @@ export function ComputerCard({
         </div>
       )}
 
+      <div>
+        <div className="text-xs text-muted-foreground mb-1">Kết nối</div>
+        <Button
+          type="button"
+          size="sm"
+          onClick={handleConnect}
+          disabled={isOffline || isConnecting}
+          className="w-full"
+        >
+          {isConnecting ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Đang kết nối...
+            </>
+          ) : (
+            "Connect"
+          )}
+        </Button>
+      </div>
+
       <div>
         <div className="text-xs text-muted-foreground mb-1">Kiểm tra thư mục</div>
         <DeviceFolderCheck />
@@ -148,62 +216,102 @@ export function ComputerCard({
   );
 
   return (
-    <Popover>
+    <>
-      <PopoverTrigger asChild>
+      <Popover>
-        <div
+        <PopoverTrigger asChild>
-          className={cn(
-            "relative flex flex-col items-center justify-center w-24 h-24 rounded-lg border-2 transition-all hover:scale-105 cursor-pointer",
-            isOffline
-              ? "bg-red-50 border-red-300 hover:border-red-400 hover:shadow-lg"
-              : "bg-green-50 border-green-300 hover:border-green-400 hover:shadow-lg"
-          )}
-        >
           <div
             className={cn(
-              "absolute -top-2 -left-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold",
+              "relative flex flex-col items-center justify-center w-24 h-24 rounded-lg border-2 transition-all hover:scale-105 cursor-pointer",
-              isOffline ? "bg-red-500 text-white" : "bg-green-500 text-white"
+              isOffline
+                ? "bg-red-50 border-red-300 hover:border-red-400 hover:shadow-lg"
+                : "bg-green-50 border-green-300 hover:border-green-400 hover:shadow-lg"
             )}
           >
-            {position}
+            <div
-          </div>
-
-          {/* Folder Status Icon */}
-          {device && !isOffline && (
-            <div className="absolute -top-2 -right-2">
-              <FolderStatusPopover
-                deviceId={device.networkInfos?.[0]?.macAddress || device.id}
-                status={folderStatus}
-                isLoading={isCheckingFolder}
-              />
-            </div>
-          )}
-
-          <Monitor className={cn("h-6 w-6 mb-1", isOffline ? "text-red-600" : "text-green-600")} />
-          {firstNetworkInfo?.ipAddress && (
-            <div className="text-[10px] font-mono text-center mb-1 px-1 truncate w-full">
-              {firstNetworkInfo.ipAddress}
-              {agentVersion && (
-                <div className="text-[10px] font-mono text-center mb-1 px-1 truncate w-full">
-                  v{agentVersion}
-                </div>
-              )}
-            </div>
-          )}
-          <div className="flex items-center gap-1">
-            <span
               className={cn(
-                "text-xs font-medium",
+                "absolute -top-2 -left-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold",
-                isOffline ? "text-red-700" : "text-green-700"
+                isOffline ? "bg-red-500 text-white" : "bg-green-500 text-white"
               )}
             >
-              {isOffline ? "Off" : "On"}
+              {position}
-            </span>
+            </div>
+
+            {/* Folder Status Icon */}
+            {device && !isOffline && (
+              <div className="absolute -top-2 -right-2">
+                <FolderStatusPopover
+                  deviceId={device.networkInfos?.[0]?.macAddress || device.id}
+                  status={folderStatus}
+                  isLoading={isCheckingFolder}
+                />
+              </div>
+            )}
+
+            <Monitor className={cn("h-6 w-6 mb-1", isOffline ? "text-red-600" : "text-green-600")} />
+            {firstNetworkInfo?.ipAddress && (
+              <div className="text-[10px] font-mono text-center mb-1 px-1 truncate w-full">
+                {firstNetworkInfo.ipAddress}
+                {agentVersion && (
+                  <div className="text-[10px] font-mono text-center mb-1 px-1 truncate w-full">
+                    v{agentVersion}
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="flex items-center gap-1">
+              <span
+                className={cn(
+                  "text-xs font-medium",
+                  isOffline ? "text-red-700" : "text-green-700"
+                )}
+              >
+                {isOffline ? "Off" : "On"}
+              </span>
+            </div>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto" side="top" align="center">
+          <DeviceInfo />
+        </PopoverContent>
+      </Popover>
+
+      {showRemote && proxyUrl && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/65 p-4">
+          <div className="relative h-[90vh] w-[90vw] overflow-hidden rounded-lg border bg-background shadow-2xl">
+            <div className="flex items-center justify-between border-b bg-muted/50 px-3 py-2">
+              <p className="text-sm font-medium">Remote Session - {device.id}</p>
+              <div className="flex gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  type="button"
+                  onClick={handleFullscreen}
+                  title="Fullscreen"
+                >
+                  <Maximize2 className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  type="button"
+                  onClick={handleCloseRemote}
+                  aria-label="Đóng"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <iframe
+              id={`mesh-iframe-${device.id}`}
+              title="Remote Desktop"
+              src={proxyUrl}
+              className="h-[calc(90vh-44px)] w-full border-0"
+              allowFullScreen
+              allow="clipboard-read; clipboard-write; camera; microphone"
+            />
           </div>
         </div>
-      </PopoverTrigger>
+      )}
-      <PopoverContent className="w-auto" side="top" align="center">
+    </>
-        <DeviceInfo />
-      </PopoverContent>
-    </Popover>
   );
 }