chore(ops): migrate clube67 to newwhats.clube67.com directory
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
This commit is contained in:
VPS 4 Deploy Agent
@@ -0,0 +1,363 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, ChevronLeft, ChevronRight, Save, Mail, Calendar, Settings as GearIcon, CheckCircle2 } from 'lucide-react';
|
||||
import { HybridBackend } from '../services/backend.ts';
|
||||
import { Settings, Dentista } from '../types.ts';
|
||||
import { useToast } from '../contexts/ToastContext.tsx';
|
||||
import { GoogleConnectButton } from './GoogleConnectButton.tsx';
|
||||
import { Link as LinkIcon, Copy, Share2 } from 'lucide-react';
|
||||
|
||||
interface AgendaSettingsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
dentists: Dentista[] | null;
|
||||
}
|
||||
|
||||
export const AgendaSettingsModal: React.FC<AgendaSettingsModalProps> = ({ isOpen, onClose, dentists }) => {
|
||||
const [page, setPage] = useState(1);
|
||||
const [config, setConfig] = useState<Settings>({
|
||||
clinicEmail: '',
|
||||
clinicCalendarId: '',
|
||||
googleApiKey: '',
|
||||
googleCalendarIds: {}
|
||||
});
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [connectedAccounts, setConnectedAccounts] = useState<any[]>([]);
|
||||
const toast = useToast();
|
||||
|
||||
const fetchGoogleStatus = async () => {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3005/api/auth/google/status');
|
||||
const data = await response.json();
|
||||
setConnectedAccounts(data);
|
||||
} catch (error) {
|
||||
console.error("Erro ao buscar status do Google:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const loadSettings = async () => {
|
||||
try {
|
||||
const settings = await HybridBackend.getSettings();
|
||||
setConfig({
|
||||
clinicEmail: settings.clinicEmail || '',
|
||||
clinicCalendarId: settings.clinicCalendarId || '',
|
||||
googleApiKey: settings.googleApiKey || '',
|
||||
googleCalendarIds: settings.googleCalendarIds || {}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Erro ao carregar configurações:", error);
|
||||
}
|
||||
};
|
||||
loadSettings();
|
||||
fetchGoogleStatus();
|
||||
setPage(1); // Reset to first page
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const copyInviteLink = (dentistId: string) => {
|
||||
const url = `http://localhost:3005/api/auth/google/url?dentistId=${dentistId}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
toast.success("LINK DE CONVITE COPIADO!");
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await HybridBackend.saveSettings(config);
|
||||
toast.success("CONFIGURAÇÕES SALVAS COM SUCESSO!");
|
||||
onClose();
|
||||
} catch (error) {
|
||||
toast.error("ERRO AO SALVAR CONFIGURAÇÕES.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const totalPages = 3;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 z-[60] flex items-center justify-center backdrop-blur-md p-4">
|
||||
<div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-300 flex flex-col h-[550px] border border-gray-100">
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-10 py-8 border-b border-gray-50 flex justify-between items-center bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-blue-600 rounded-2xl shadow-lg shadow-blue-200">
|
||||
<GearIcon size={24} className="text-white animate-spin-slow" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-black text-gray-900 uppercase tracking-tighter">Configurações da Agenda</h2>
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-0.5">Integrações e Comunicação</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-xl transition-colors text-gray-400">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-1.5 w-full bg-gray-100 flex">
|
||||
<div
|
||||
className="h-full bg-blue-600 transition-all duration-500 ease-out shadow-[0_0_10px_rgba(37,99,235,0.5)]"
|
||||
style={{ width: `${(page / totalPages) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Content Area - Horizontal Slider Simulation */}
|
||||
<div className="flex-1 relative overflow-hidden bg-white">
|
||||
<div
|
||||
className="absolute inset-0 flex transition-transform duration-500 ease-in-out transform-gpu"
|
||||
style={{ transform: `translateX(-${(page - 1) * 100}%)` }}
|
||||
>
|
||||
{/* Page 1: Clinic Emails */}
|
||||
<div className="w-full shrink-0 p-10 animate-in fade-in duration-700">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Mail className="text-blue-600" size={24} />
|
||||
<h3 className="text-sm font-black text-gray-800 uppercase tracking-tight">E-mails da Clínica</h3>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] ml-1">E-mail para Notificações</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="EX: CONTATO@CLINICA.COM"
|
||||
className="w-full bg-gray-50 border-2 border-transparent focus:border-blue-600 focus:bg-white rounded-2xl p-4 font-bold text-gray-800 outline-none transition-all shadow-sm"
|
||||
value={config.clinicEmail}
|
||||
onChange={(e) => setConfig({ ...config, clinicEmail: e.target.value.toUpperCase() })}
|
||||
/>
|
||||
<p className="text-[10px] text-gray-400 italic ml-1">* Este e-mail será usado para alertas de sistema e envio de comprovantes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page 2: Google Setup Tutorial & Central Config */}
|
||||
<div className="w-full shrink-0 p-10 animate-in fade-in duration-700 overflow-y-auto custom-scrollbar">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="text-emerald-600" size={24} />
|
||||
<h3 className="text-sm font-black text-gray-800 uppercase tracking-tight">Configuração Google Agenda</h3>
|
||||
</div>
|
||||
<a href="https://console.cloud.google.com/apis/library/calendar-json.googleapis.com" target="_blank" rel="noreferrer" className="text-[9px] font-black text-white bg-black px-3 py-1.5 rounded-lg hover:opacity-80 transition-all uppercase tracking-widest">
|
||||
1. Ativar API
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||
<div className="space-y-4">
|
||||
<div className="bg-emerald-50 rounded-2xl p-4 border border-emerald-100">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-5 h-5 bg-emerald-600 text-white text-[10px] font-black flex items-center justify-center rounded-full">1</div>
|
||||
<span className="text-[10px] font-black text-emerald-800 uppercase">Google API Key</span>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="COLE A CHAVE AQUI"
|
||||
className="w-full bg-white border border-emerald-200 rounded-xl px-4 py-2 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-emerald-100"
|
||||
value={config.googleApiKey}
|
||||
onChange={(e) => setConfig({ ...config, googleApiKey: e.target.value })}
|
||||
/>
|
||||
<a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noreferrer" className="text-[8px] font-black text-emerald-600 hover:underline mt-2 inline-block uppercase">Criar Credenciais ➔</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 rounded-2xl p-4 border border-blue-100">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-5 h-5 bg-blue-600 text-white text-[10px] font-black flex items-center justify-center rounded-full">2</div>
|
||||
<span className="text-[10px] font-black text-blue-800 uppercase">ID Agenda Clínica</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ID DA AGENDA"
|
||||
className="w-full bg-white border border-blue-200 rounded-xl px-4 py-2 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-blue-100"
|
||||
value={config.clinicCalendarId}
|
||||
onChange={(e) => setConfig({ ...config, clinicCalendarId: e.target.value })}
|
||||
/>
|
||||
<a href="https://calendar.google.com/calendar/r/settings" target="_blank" rel="noreferrer" className="text-[8px] font-black text-blue-600 hover:underline mt-2 inline-block uppercase">Pegar ID nas Configs ➔</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-3xl p-6 text-white">
|
||||
<h4 className="text-[10px] font-black text-blue-400 uppercase tracking-[0.2em] mb-4">Guia de Integração</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex gap-3 text-xs">
|
||||
<CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
|
||||
<span className="text-gray-300">Crie um projeto no <strong>Google Cloud Console</strong>.</span>
|
||||
</li>
|
||||
<li className="flex gap-3 text-xs">
|
||||
<CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
|
||||
<span className="text-gray-300">No menu 'Biblioteca', ative a <strong>Google Calendar API</strong>.</span>
|
||||
</li>
|
||||
<li className="flex gap-3 text-xs">
|
||||
<CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-gray-300">Pegue o <strong>ID da Agenda</strong> nas configurações (Integrar agenda).</span>
|
||||
<a href="https://calendar.google.com/calendar/r/settings" target="_blank" rel="noreferrer" className="text-[9px] font-black text-blue-400 hover:underline flex items-center gap-1 uppercase">
|
||||
Abrir Configurações de Agenda ➔
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-3 text-xs">
|
||||
<CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
|
||||
<span className="text-gray-300">No Google Agenda, torne a agenda <strong>Pública</strong> nas autorizações de acesso.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page 3: Google Calendar Mapping */}
|
||||
<div className="w-full shrink-0 p-10 animate-in fade-in duration-700 overflow-hidden flex flex-col">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="text-emerald-600" size={24} />
|
||||
<h3 className="text-sm font-black text-gray-800 uppercase tracking-tight">Agendas dos Dentistas</h3>
|
||||
</div>
|
||||
<a href="https://calendar.google.com/calendar/u/0/r/settings" target="_blank" rel="noreferrer" className="text-[9px] font-black text-white bg-gray-900 px-3 py-1.5 rounded-lg hover:bg-black transition-colors uppercase tracking-widest">
|
||||
Abrir Google Calendar
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 max-h-[250px] overflow-y-auto pr-4 custom-scrollbar">
|
||||
<div className="bg-blue-50/50 p-4 rounded-2xl border border-blue-100 mb-2">
|
||||
<p className="text-[10px] text-blue-800 font-bold mb-1 uppercase tracking-wider">Nova Integração Inteligente (OAuth2)</p>
|
||||
<p className="text-[10px] text-blue-600 italic">Agora você pode conectar agendas sem precisar torná-las públicas ou usar API Keys.</p>
|
||||
</div>
|
||||
|
||||
{/* ADMIN / CLINIC CONNECTION */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<h4 className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Sua Conta (Administrador)</h4>
|
||||
<GoogleConnectButton
|
||||
ownerId="admin"
|
||||
isConnected={connectedAccounts.some(a => a.owner_id === 'admin' || a.owner_id.includes('@'))}
|
||||
onStatusChange={fetchGoogleStatus}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Contas dos Dentistas</h4>
|
||||
{dentists?.length ? dentists.map((dentist) => {
|
||||
const isConnected = connectedAccounts.some(a => a.owner_id === dentist.id);
|
||||
return (
|
||||
<div key={dentist.id} className="bg-gray-50 rounded-2xl p-4 border border-transparent hover:border-gray-200 transition-all">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: dentist.corAgenda }}></div>
|
||||
<span className="text-xs font-black text-gray-800 uppercase">{dentist.nome}</span>
|
||||
</div>
|
||||
{isConnected ? (
|
||||
<span className="text-[9px] font-black text-emerald-600 bg-emerald-100 px-2 py-1 rounded-lg uppercase">Conectado</span>
|
||||
) : (
|
||||
<span className="text-[9px] font-black text-gray-400 uppercase">Não Vinculado</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<GoogleConnectButton
|
||||
ownerId={dentist.id}
|
||||
isConnected={isConnected}
|
||||
onStatusChange={fetchGoogleStatus}
|
||||
/>
|
||||
</div>
|
||||
{!isConnected && (
|
||||
<button
|
||||
onClick={() => copyInviteLink(dentist.id)}
|
||||
className="p-4 bg-gray-100 text-gray-600 rounded-2xl hover:bg-gray-200 transition-all flex items-center justify-center group"
|
||||
title="Gerar Link para o Dentista"
|
||||
>
|
||||
<Share2 size={18} className="group-hover:scale-110 transition-transform" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Legacy ID support remains for backward compatibility */}
|
||||
<div className="mt-3 pt-3 border-t border-gray-200/50">
|
||||
<label className="text-[9px] font-bold text-gray-400 uppercase ml-1">ID Alternativo (API Key/Legado)</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ID DA AGENDA GOOGLE (SE NÃO USAR OAUTH2)"
|
||||
className="w-full bg-white/50 border border-gray-200 rounded-xl px-4 py-2 text-[10px] font-bold text-gray-500 outline-none focus:ring-1 focus:ring-blue-100 mt-1"
|
||||
value={config.googleCalendarIds?.[dentist.id] || ''}
|
||||
onChange={(e) => setConfig({
|
||||
...config,
|
||||
googleCalendarIds: {
|
||||
...config.googleCalendarIds,
|
||||
[dentist.id]: e.target.value
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}) : (
|
||||
<p className="text-center text-xs text-gray-400 py-10 uppercase font-bold">Nenhum dentista cadastrado.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Navigation */}
|
||||
<div className="px-10 py-8 bg-gray-50/50 border-t border-gray-100 flex justify-between items-center">
|
||||
<div className="flex gap-2">
|
||||
{page > 1 && (
|
||||
<button
|
||||
onClick={() => setPage(page - 1)}
|
||||
className="flex items-center gap-2 px-6 py-3 text-xs font-black text-gray-500 hover:text-gray-900 bg-white rounded-2xl border border-gray-200 hover:shadow-md transition-all uppercase tracking-widest"
|
||||
>
|
||||
<ChevronLeft size={16} /> Anterior
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{page < totalPages ? (
|
||||
<button
|
||||
onClick={() => setPage(page + 1)}
|
||||
className="flex items-center gap-2 px-8 py-4 bg-blue-600 text-white rounded-[1.5rem] text-xs font-black uppercase tracking-widest hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-200 transition-all shadow-lg shadow-blue-100"
|
||||
>
|
||||
Próximo <ChevronRight size={16} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-2 px-10 py-4 bg-emerald-600 text-white rounded-[1.5rem] text-xs font-black uppercase tracking-widest hover:bg-emerald-700 hover:shadow-xl hover:shadow-emerald-200 transition-all shadow-lg shadow-emerald-100 disabled:bg-gray-400"
|
||||
>
|
||||
{isSaving ? 'Salvando...' : <><Save size={16} /> Salvar Tudo</>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.animate-spin-slow {
|
||||
animation: spin 8s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user