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,6 +216,7 @@ export function ComputerCard({
   );
 
   return (
+    <>
       <Popover>
         <PopoverTrigger asChild>
           <div
@@ -205,5 +274,44 @@ export function ComputerCard({
           <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>
+      )}
+    </>
   );
 }