src/components/cards/computer-card.tsx

@@ -1,15 +1,11 @@
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Badge } from "@/components/ui/badge";
-import { Monitor, Wifi, WifiOff, Loader2, Maximize2, X } from "lucide-react";
+import { Monitor, Wifi, WifiOff, Loader2 } 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,
@@ -21,10 +17,6 @@ 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">
@@ -41,46 +33,6 @@ 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;
@@ -175,26 +127,6 @@ 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 />
@@ -216,7 +148,6 @@ export function ComputerCard({
   );
 
   return (
-    <>
     <Popover>
       <PopoverTrigger asChild>
         <div
@@ -274,44 +205,5 @@ 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>
-      )}
-    </>
   );
 }