From fd86aabf32f192d7cc4ca245a8b883b31390bbf5 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 12 Jun 2025 22:55:10 +0000
Subject: [PATCH] Refactor: Improve WhatsApp groups UI

Hide debug information and focus on essential data in the WhatsApp groups screen.
---
 .../whatsappGroups/CreateGroupFormSimple.tsx  | 154 ++++++++++++++++++
 src/pages/GruposWhatsApp.tsx                  |   6 -
 2 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 src/components/whatsappGroups/CreateGroupFormSimple.tsx

diff --git a/src/components/whatsappGroups/CreateGroupFormSimple.tsx b/src/components/whatsappGroups/CreateGroupFormSimple.tsx
new file mode 100644
index 0000000..7e85694
--- /dev/null
+++ b/src/components/whatsappGroups/CreateGroupFormSimple.tsx
@@ -0,0 +1,154 @@
+
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { verificarInstanciaWhatsApp } from '@/services/gruposWhatsAppService';
+import { findOrCreateWhatsAppGroup } from '@/services/whatsAppGroupsService';
+import { createN8nWorkflow } from '@/services/n8nWorkflowService';
+
+interface CreateGroupFormProps {
+  userEmail: string;
+  onSuccess: () => void;
+}
+
+const CreateGroupFormSimple = ({ userEmail, onSuccess }: CreateGroupFormProps) => {
+  const { toast } = useToast();
+  const [nomeGrupo, setNomeGrupo] = useState('');
+  const [carregando, setCarregando] = useState(false);
+  const [mensagemStatus, setMensagemStatus] = useState<{
+    tipo: 'info' | 'success' | 'error';
+    texto: string;
+  } | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!nomeGrupo.trim()) {
+      toast({
+        title: 'Erro',
+        description: 'Por favor, informe o nome do grupo',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setCarregando(true);
+    setMensagemStatus(null);
+
+    try {
+      // Verificar se o usuário tem instância WhatsApp
+      setMensagemStatus({ tipo: 'info', texto: 'Verificando sua instância do WhatsApp...' });
+      
+      const instanciaInfo = await verificarInstanciaWhatsApp();
+      
+      if (!instanciaInfo.hasInstance) {
+        setMensagemStatus({ 
+          tipo: 'error', 
+          texto: 'Você precisa ter uma instância do WhatsApp conectada. Acesse o menu "Conectar WhatsApp" primeiro.' 
+        });
+        return;
+      }
+
+      // Criar ou encontrar grupo
+      setMensagemStatus({ tipo: 'info', texto: 'Cadastrando grupo...' });
+      
+      const grupo = await findOrCreateWhatsAppGroup(nomeGrupo.trim());
+      if (!grupo) {
+        throw new Error('Falha ao criar o grupo');
+      }
+
+      // Criar workflow no n8n
+      setMensagemStatus({ tipo: 'info', texto: 'Configurando automação...' });
+      
+      await createN8nWorkflow({
+        groupId: grupo.id,
+        groupName: nomeGrupo.trim(),
+        userEmail: userEmail
+      });
+
+      setMensagemStatus({ 
+        tipo: 'success', 
+        texto: 'Grupo cadastrado com sucesso! Agora você pode usar este grupo em suas transações.' 
+      });
+
+      toast({
+        title: 'Sucesso',
+        description: 'Grupo cadastrado e configurado com sucesso!',
+      });
+
+      // Limpar formulário
+      setNomeGrupo('');
+      
+      // Atualizar lista de grupos
+      onSuccess();
+
+    } catch (error) {
+      console.error('Erro ao cadastrar grupo:', error);
+      setMensagemStatus({ 
+        tipo: 'error', 
+        texto: 'Erro ao cadastrar grupo. Tente novamente.' 
+      });
+      
+      toast({
+        title: 'Erro',
+        description: 'Não foi possível cadastrar o grupo do WhatsApp',
+        variant: 'destructive',
+      });
+    } finally {
+      setCarregando(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cadastrar novo grupo</CardTitle>
+        <CardDescription>
+          Cadastre um grupo do WhatsApp para receber notificações de suas transações
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="nomeGrupo">Nome do grupo</Label>
+            <Input
+              id="nomeGrupo"
+              type="text"
+              placeholder="Digite o nome do grupo do WhatsApp"
+              value={nomeGrupo}
+              onChange={(e) => setNomeGrupo(e.target.value)}
+              disabled={carregando}
+            />
+          </div>
+
+          {mensagemStatus && (
+            <Alert variant={mensagemStatus.tipo === 'error' ? 'destructive' : 'default'}>
+              {mensagemStatus.tipo === 'error' && <AlertCircle className="h-4 w-4" />}
+              {mensagemStatus.tipo === 'success' && <CheckCircle2 className="h-4 w-4" />}
+              {mensagemStatus.tipo === 'info' && <Loader2 className="h-4 w-4 animate-spin" />}
+              <AlertDescription>{mensagemStatus.texto}</AlertDescription>
+            </Alert>
+          )}
+
+          <Button type="submit" disabled={carregando || !nomeGrupo.trim()}>
+            {carregando ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Cadastrando...
+              </>
+            ) : (
+              'Cadastrar grupo'
+            )}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CreateGroupFormSimple;
diff --git a/src/pages/GruposWhatsApp.tsx b/src/pages/GruposWhatsApp.tsx
index d1ee560..925b00f 100644
--- a/src/pages/GruposWhatsApp.tsx
+++ b/src/pages/GruposWhatsApp.tsx
@@ -8,21 +8,16 @@ import { WhatsAppGroup } from '@/types/financialTypes';
 import { useToast } from '@/hooks/use-toast';
 import CreateGroupForm from '@/components/whatsappGroups/CreateGroupForm';
 import GroupsList from '@/components/whatsappGroups/GroupsList';
-import DebugInfo from '@/components/whatsappGroups/DebugInfo';
 
 const GruposWhatsApp = () => {
   const { toast } = useToast();
   const [grupos, setGrupos] = useState<WhatsAppGroup[]>([]);
   const [carregando, setCarregando] = useState<boolean>(true);
   const [userEmail, setUserEmail] = useState<string>('');
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [debugInfo, setDebugInfo] = useState<string | null>(null);
 
   // Buscar os grupos do usuário ao carregar a página
   const buscarGrupos = async () => {
     setCarregando(true);
-    setErrorMessage(null);
-    setDebugInfo(null);
     try {
       const gruposData = await listarGruposWhatsApp();
       setGrupos(gruposData);
@@ -66,7 +61,6 @@ const GruposWhatsApp = () => {
           </div>
         </div>
 
-        <DebugInfo errorMessage={errorMessage} debugInfo={debugInfo} />
         <CreateGroupForm userEmail={userEmail} onSuccess={buscarGrupos} />
         <GroupsList grupos={grupos} carregando={carregando} />
       </div>