chore(ops): migrate clube67 to newwhats.clube67.com directory

2026-05-18 03:26:41 +02:00
parent 298b1c64b0
commit 5ec6bd6354
576 changed files with 29016 additions and 235673 deletions
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { Calendar, Link, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+
+interface GoogleConnectButtonProps {
+    ownerId: string; // Ex: 'admin' ou o ID do dentista
+    isConnected: boolean;
+    onStatusChange?: () => void;
+}
+
+export const GoogleConnectButton: React.FC<GoogleConnectButtonProps> = ({ ownerId, isConnected, onStatusChange }) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleConnect = async () => {
+        setIsLoading(true);
+        try {
+            const response = await fetch(`http://localhost:3005/api/auth/google/url?dentistId=${ownerId}`);
+            const { url } = await response.json();
+
+            // Abrir em popup para manter o contexto
+            const width = 600;
+            const height = 700;
+            const left = window.screen.width / 2 - width / 2;
+            const top = window.screen.height / 2 - height / 2;
+
+            const popup = window.open(
+                url,
+                'google-auth',
+                `width=${width},height=${height},left=${left},top=${top}`
+            );
+
+            // Verificar se o popup fechou a cada 1s
+            const checkPopup = setInterval(() => {
+                if (!popup || popup.closed) {
+                    clearInterval(checkPopup);
+                    setIsLoading(false);
+                    if (onStatusChange) onStatusChange();
+                }
+            }, 1000);
+
+        } catch (error) {
+            console.error('Erro ao conectar Google Agenda:', error);
+            setIsLoading(false);
+        }
+    };
+
+    const handleDisconnect = async () => {
+        if (!confirm('Deseja realmente desconectar esta agenda?')) return;
+
+        setIsLoading(true);
+        try {
+            await fetch(`http://localhost:3005/api/auth/google/${ownerId}`, { method: 'DELETE' });
+            if (onStatusChange) onStatusChange();
+        } catch (error) {
+            console.error('Erro ao desconectar:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (isConnected) {
+        return (
+            <div className="flex items-center gap-3 bg-emerald-50 border border-emerald-100 p-4 rounded-2xl">
+                <div className="p-2 bg-emerald-500 rounded-xl">
+                    <CheckCircle2 size={18} className="text-white" />
+                </div>
+                <div className="flex-1">
+                    <p className="text-[10px] font-black text-emerald-800 uppercase tracking-tight">Google Agenda Conectada</p>
+                    <p className="text-[9px] text-emerald-600 font-bold uppercase tracking-widest mt-0.5">Sincronização Ativa</p>
+                </div>
+                <button
+                    onClick={handleDisconnect}
+                    disabled={isLoading}
+                    className="text-[9px] font-black text-red-500 hover:text-red-700 uppercase tracking-widest px-3 py-1 bg-white border border-red-100 rounded-lg shadow-sm transition-all"
+                >
+                    {isLoading ? <Loader2 size={12} className="animate-spin" /> : 'Desconectar'}
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <button
+            onClick={handleConnect}
+            disabled={isLoading}
+            className="w-full group relative overflow-hidden flex items-center gap-4 bg-white border-2 border-gray-100 p-4 rounded-2xl hover:border-blue-500 hover:shadow-xl hover:shadow-blue-50/50 transition-all duration-300"
+        >
+            <div className="p-3 bg-gray-50 group-hover:bg-blue-600 rounded-xl transition-colors duration-300">
+                <Calendar size={20} className="text-gray-400 group-hover:text-white transition-colors duration-300" />
+            </div>
+            <div className="text-left">
+                <p className="text-xs font-black text-gray-800 uppercase tracking-tight group-hover:text-blue-600">Conectar Google Agenda</p>
+                <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Sincronize horários externos</p>
+            </div>
+            {isLoading && (
+                <div className="absolute right-4">
+                    <Loader2 size={18} className="text-blue-600 animate-spin" />
+                </div>
+            )}
+        </button>
+    );
+};