From 13ee2d5569300d798d620fb71c886f6ad949c158 Mon Sep 17 00:00:00 2001
From: Sidney Gomes <sidney.gomes1989@gmail.com>
Date: Thu, 23 Jul 2026 22:53:53 -0300
Subject: [PATCH] Update WhatsappConnectCard to automatically load status on
 mount and show a reset button in all connection states

---
 src/components/WhatsappConnectCard.tsx | 44 +++++++++++++++++++-------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/WhatsappConnectCard.tsx b/src/components/WhatsappConnectCard.tsx
index 4c2495c..cdc72f6 100644
--- a/src/components/WhatsappConnectCard.tsx
+++ b/src/components/WhatsappConnectCard.tsx
@@ -37,6 +37,10 @@ export const WhatsappConnectCard: React.FC<WhatsappConnectCardProps> = ({ token
     }
   };
 
+  useEffect(() => {
+    fetchStatus();
+  }, [token]);
+
   const handleLogout = async () => {
     if (!token) return;
     setLoading(true);
@@ -106,23 +110,39 @@ export const WhatsappConnectCard: React.FC<WhatsappConnectCardProps> = ({ token
             <p className="text-xs text-zinc-400 text-center max-w-xs">
               Abra o WhatsApp no seu celular, vá em "Aparelhos Conectados" e escaneie o código acima.
             </p>
-            <button
-              onClick={fetchStatus}
-              className="text-xs text-green-400 hover:text-green-300 transition-colors mt-2 cursor-pointer"
-            >
-              Já escaneei (Atualizar)
-            </button>
+            <div className="flex items-center space-x-4 mt-2">
+              <button
+                onClick={fetchStatus}
+                className="text-xs text-green-400 hover:text-green-300 transition-colors cursor-pointer font-bold"
+              >
+                Já escaneei (Atualizar)
+              </button>
+              <button
+                onClick={handleLogout}
+                className="text-xs text-red-400 hover:text-red-300 transition-colors cursor-pointer font-bold"
+              >
+                Resetar Conexão
+              </button>
+            </div>
           </div>
         ) : (
           <div className="flex flex-col items-center space-y-4">
             <QrCode className="w-12 h-12 text-zinc-600" />
             <p className="text-xs text-zinc-400">Nenhuma instância conectada.</p>
-            <button
-              onClick={fetchStatus}
-              className="bg-green-600 hover:bg-green-500 text-white text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer"
-            >
-              Gerar QR Code de Conexão
-            </button>
+            <div className="flex items-center space-x-3">
+              <button
+                onClick={fetchStatus}
+                className="bg-green-600 hover:bg-green-500 text-white text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer"
+              >
+                Gerar QR Code de Conexão
+              </button>
+              <button
+                onClick={handleLogout}
+                className="bg-red-500/10 hover:bg-red-500/20 text-red-500 text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer"
+              >
+                Forçar Exclusão / Resetar
+              </button>
+            </div>
           </div>
         )}
       </div>