Development

src/components/dashboard/LegacySystemsModal.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { FaTimes } from "react-icons/fa";
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+
+interface LegacySystemsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function LegacySystemsModal({
+  isOpen,
+  onClose,
+}: LegacySystemsModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <div
+      className={`fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center transition-all duration-300 ${
+        isOpen ? "opacity-100 visible" : "opacity-0 invisible"
+      }`}
+    >
+      <div
+        ref={modalRef}
+        className={`bg-gray-800 rounded-xl shadow-2xl p-6 m-4 w-full max-w-3xl transform transition-all duration-300 ${
+          isOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-4"
+        } border border-gray-700`}
+      >
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold text-white">
+            Não achou o seu serviço?
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <FaTimes size={20} />
+          </button>
+        </div>
+        <p className="text-gray-300 mb-6">
+          Às vezes, o sistema pode cometer erros ou uma alteração recente pode
+          não ter sido refletida aqui. Se você tem um serviço conosco e não o
+          encontra, pode acessar nossos painéis legados para gerenciá-lo.
+        </p>
+
+        <div className="space-y-6">
+          <a
+            href="https://painel.firehosting.com.br"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-col md:flex-row items-center bg-gray-700/50 hover:bg-gray-700/80 p-4 rounded-lg transition-all duration-300 border border-gray-600"
+          >
+            <Image
+              src="/images/pterodactyl_logo_transparent.png"
+              alt="Pterodactyl Logo"
+              width={80}
+              height={80}
+              className="object-contain mb-4 md:mb-0 md:mr-6"
+            />
+            <div className="text-center md:text-left">
+              <h3 className="text-lg font-semibold text-white">Pterodactyl</h3>
+              <p className="text-gray-400 text-sm">
+                Se você possui algum servidor de jogos conosco, certamente o
+                achará aqui caso não esteja o encontrando.
+              </p>
+            </div>
+          </a>
+
+          <a
+            href="https://vm.firehosting.com.br:4083"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-col md:flex-row items-center bg-gray-700/50 hover:bg-gray-700/80 p-4 rounded-lg transition-all duration-300 border border-gray-600"
+          >
+            <Image
+              src="/images/virtualizor_logo.png"
+              alt="Virtualizor Logo"
+              width={100}
+              height={100}
+              className="object-contain mb-4 md:mb-0 md:mr-6"
+            />
+            <div className="text-center md:text-left">
+              <h3 className="text-lg font-semibold text-white">Virtualizor</h3>
+              <p className="text-gray-400 text-sm">
+                Se você possui alguma VPS Ativa conosco e não a vê aqui, acesse
+                o Virtualizor.
+              </p>
+            </div>
+          </a>
+
+          <div className="flex flex-col md:flex-row items-center bg-gray-700/50 p-4 rounded-lg border border-gray-600 opacity-50 cursor-not-allowed">
+            <Image
+              src="/images/cpanel.png"
+              alt="cPanel Logo"
+              width={80}
+              height={80}
+              className="object-contain mb-4 md:mb-0 md:mr-6"
+            />
+            <div className="text-center md:text-left">
+              <h3 className="text-lg font-semibold text-white">cPanel</h3>
+              <p className="text-gray-400 text-sm">
+                Tem alguma hospedagem de site e não está vendo ela aqui?
+                Certamente, ainda não é possível controlar seus sites por aqui,
+                mas logo logo será.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 p-4 bg-blue-900/30 border border-blue-800 rounded-lg text-sm text-gray-300">
+          <p className="font-medium text-blue-300 mb-1">Esqueceu sua senha?</p>
+          <p>
+            Caso não lembre sua senha do painel legacy, basta clicar na opção "Esqueceu senha" 
+            e o sistema criará uma nova senha para você automaticamente.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/ServersContent.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import {
   FaGamepad,
   FaPlus,
@@ -14,14 +15,17 @@ import {
   FaNetworkWired,
   FaClock,
   FaMapMarkerAlt,
+  FaQuestionCircle,
 } from "react-icons/fa";
 import { useServer } from "@/contexts/ServerContext";
 import { Server } from "@/types/server";
 import { useRouter } from "next/navigation";
+import LegacySystemsModal from "./LegacySystemsModal";
 
 export default function ServersContent() {
   const { servers, loadingServers, serversError, fetchServers } = useServer();
   const router = useRouter();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   if (loadingServers) {
     return (
@@ -361,6 +365,18 @@ export default function ServersContent() {
           </button>
         </div>
       )}
+
+      <div className="text-center mt-8">
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="text-gray-400 hover:text-white transition-colors flex items-center gap-2 mx-auto"
+        >
+          <FaQuestionCircle />
+          Não achou o seu serviço?
+        </button>
+      </div>
+
+      <LegacySystemsModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
     </div>
   );
 }

src/components/dashboard/minecraft/LegacyPanelFeedbackModal.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { FaTimes } from "react-icons/fa";
+import { TriangleAlert, MessageSquare } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+
+interface LegacyPanelFeedbackModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function LegacyPanelFeedbackModal({
+  isOpen,
+  onClose,
+}: LegacyPanelFeedbackModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        modalRef.current &&
+        !modalRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <div
+      className={`fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center transition-all duration-300 ${
+        isOpen ? "opacity-100 visible" : "opacity-0 invisible"
+      }`}
+    >
+      <div
+        ref={modalRef}
+        className={`bg-gray-800 rounded-xl shadow-2xl p-6 m-4 w-full max-w-2xl transform transition-all duration-300 ${
+          isOpen
+            ? "scale-100 opacity-100 translate-y-0"
+            : "scale-95 opacity-0 -translate-y-4"
+        } border border-gray-700`}
+      >
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold text-white">
+            Que tal o painel legado?
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <FaTimes size={20} />
+          </button>
+        </div>
+
+        <p className="text-gray-300 mb-6">
+          Sentimos muito que não tenha tido uma experiência agradável com esse
+          painel. Trabalhamos duro para mantê-lo atualizado e acessível para
+          todos. Caso sinta-se no dever, adoraríamos receber feedback da sua
+          experiência. Se estiver achando algo confuso, você pode usar o painel
+          legado.
+        </p>
+
+        <div className="space-y-6">
+          <a
+            href="https://painel.firehosting.com.br"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-col md:flex-row items-center bg-gray-700/50 hover:bg-gray-700/80 p-4 rounded-lg transition-all duration-300 border border-gray-600"
+          >
+            <Image
+              src="/images/pterodactyl_logo_transparent.png"
+              alt="Pterodactyl Logo"
+              width={80}
+              height={80}
+              className="object-contain mb-4 md:mb-0 md:mr-6"
+            />
+            <div className="text-center md:text-left">
+              <h3 className="text-lg font-semibold text-white">Pterodactyl</h3>
+              <p className="text-gray-400 text-sm">
+                Acesse o painel legado para gerenciar seu servidor Minecraft de
+                maneira alternativa.
+              </p>
+            </div>
+          </a>
+          <div className="mt-3 p-4 bg-yellow-900/30 border border-yellow-800 rounded-lg">
+            <div className="flex items-center">
+              <TriangleAlert className="text-yellow-400 mr-2" />
+
+              <p className="text-sm text-gray-300">
+                Se você esqueceu sua senha do painel legado ou não possui uma,
+                clique na opção "Esqueci minha senha" na tela de login do painel
+                legado para redefini-la.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-3 p-4 bg-blue-900/30 border border-blue-800 rounded-lg">
+            <div className="flex items-center">
+              <MessageSquare className="text-blue-400 mr-2" />
+              <p className="text-sm text-gray-300">
+                Suas sugestões são importantes para nós! Envie seu feedback
+                através do nosso sistema de tickets e ajude-nos a melhorar
+                nossos painéis.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/minecraft/MinecraftServerManager.tsx

@@ -300,7 +300,7 @@ function MinecraftServerManagerContent() {
         wsRef.current = null;
       }
     };
-  }, [accessKey, identifier, getServerConsoleCredentials]);
+  }, [accessKey, identifier, getServerConsoleCredentials, loading, error]);
 
   const handleConsoleUpdate = useCallback((data: any) => {
     if (data.type === 'connection') {

src/components/dashboard/minecraft/MinecraftSettingsContent.tsx

@@ -44,6 +44,8 @@ interface MinecraftSettingsContentProps {
   };
 }
 
+import LegacyPanelFeedbackModal from "./LegacyPanelFeedbackModal";
+
 export default function MinecraftSettingsContent({ server }: MinecraftSettingsContentProps) {
   const { accessKey } = useAuth();
   const [settings, setSettings] = useState<ServerSettings | null>(null);
@@ -56,6 +58,7 @@ export default function MinecraftSettingsContent({ server }: MinecraftSettingsCo
   const [selectedOs, setSelectedOs] = useState<string | null>(null);
   const [changingOs, setChangingOs] = useState(false);
   const [showOsConfirm, setShowOsConfirm] = useState(false);
+  const [showLegacyFeedbackModal, setShowLegacyFeedbackModal] = useState(false);
 
   const [ftpInfo, setFtpInfo] = useState<FtpInfo | null>(null);
   const [loadingFtp, setLoadingFtp] = useState(false);
@@ -667,6 +670,28 @@ export default function MinecraftSettingsContent({ server }: MinecraftSettingsCo
           </div>
         </div>
       )}
+
+      <div className="mt-8 bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6">
+        <div className="flex flex-col sm:flex-row justify-between items-center">
+          <div className="mb-4 sm:mb-0">
+            <h3 className="text-xl font-semibold text-white">Encontrou dificuldades?</h3>
+            <p className="text-gray-400 mt-1">Use o painel legado para gerenciar seu servidor.</p>
+          </div>
+
+          <button
+            onClick={() => setShowLegacyFeedbackModal(true)}
+            className="px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white rounded-lg transition-colors shadow-lg flex items-center space-x-2"
+          >
+            <FaQuestionCircle className="text-purple-300" />
+            <span>Não gostou desse painel?</span>
+          </button>
+        </div>
+      </div>
+
+      <LegacyPanelFeedbackModal 
+        isOpen={showLegacyFeedbackModal}
+        onClose={() => setShowLegacyFeedbackModal(false)}
+      />
     </div>
   );
 }