Antigravity AI Agent
308 lines
17 KiB
TypeScript
308 lines
17 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Filter, MessageSquare, UserPlus, CheckCircle, X, Loader2, Plus, ChevronDown } from 'lucide-react';
|
|
import { HybridBackend } from '../services/backend.ts';
|
|
import { Lead, Dentista } from '../types.ts';
|
|
import { useHybridBackend } from '../hooks/useHybridBackend.ts';
|
|
import { useToast } from '../contexts/ToastContext.tsx';
|
|
|
|
const LoadingSpinner = () => (
|
|
<div className="col-span-3 flex justify-center items-center py-10">
|
|
<Loader2 className="animate-spin text-blue-600" size={32} />
|
|
</div>
|
|
);
|
|
|
|
const ErrorDisplay = ({ error }: { error: Error }) => (
|
|
<div className="col-span-3 text-center py-10 text-red-500 uppercase font-bold text-sm">
|
|
ERRO AO CARREGAR LEADS: {error.message}
|
|
</div>
|
|
);
|
|
|
|
const NovoLeadModal: React.FC<{ onClose: () => void; onSaved: () => void }> = ({ onClose, onSaved }) => {
|
|
const toast = useToast();
|
|
const [form, setForm] = useState({ nome: '', sobrenome: '', whatsapp: '', tipoInteresse: 'Particular' });
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [onClose]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!form.nome || !form.whatsapp) {
|
|
toast.error('PREENCHA NOME E WHATSAPP.');
|
|
return;
|
|
}
|
|
try {
|
|
await HybridBackend.saveLead({
|
|
...form,
|
|
status: 'Novo',
|
|
dataCadastro: new Date().toISOString(),
|
|
} as any);
|
|
toast.success('LEAD CADASTRADO!');
|
|
onSaved();
|
|
onClose();
|
|
} catch {
|
|
toast.error('ERRO AO CADASTRAR LEAD.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-2 lg:p-0">
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md lg:max-w-none lg:w-[90vw] lg:h-[98vh] animate-in fade-in zoom-in-50 duration-200 flex flex-col overflow-hidden">
|
|
<div className="px-5 py-4 border-b border-gray-200 flex justify-between items-center flex-shrink-0 bg-gradient-to-r from-green-50 to-white">
|
|
<h2 className="text-base font-bold text-gray-800 uppercase flex items-center gap-2">
|
|
<UserPlus size={18} className="text-green-500" /> CADASTRAR NOVO LEAD
|
|
</h2>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg p-1.5 transition-colors"><X size={22} /></button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-5 lg:p-8">
|
|
<form onSubmit={handleSubmit} className="space-y-4 max-w-2xl mx-auto">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">NOME</label>
|
|
<input
|
|
type="text"
|
|
value={form.nome}
|
|
onChange={e => setForm(f => ({ ...f, nome: e.target.value.toUpperCase() }))}
|
|
className="w-full mt-1 border border-gray-300 rounded-lg p-2.5 text-sm font-semibold uppercase-input"
|
|
placeholder="NOME"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">SOBRENOME</label>
|
|
<input
|
|
type="text"
|
|
value={form.sobrenome}
|
|
onChange={e => setForm(f => ({ ...f, sobrenome: e.target.value.toUpperCase() }))}
|
|
className="w-full mt-1 border border-gray-300 rounded-lg p-2.5 text-sm font-semibold uppercase-input"
|
|
placeholder="SOBRENOME"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">WHATSAPP</label>
|
|
<input
|
|
type="text"
|
|
value={form.whatsapp}
|
|
onChange={e => setForm(f => ({ ...f, whatsapp: e.target.value }))}
|
|
className="w-full mt-1 border border-gray-300 rounded-lg p-2.5 text-sm"
|
|
placeholder="(XX) XXXXX-XXXX"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">TIPO DE INTERESSE</label>
|
|
<select
|
|
value={form.tipoInteresse}
|
|
onChange={e => setForm(f => ({ ...f, tipoInteresse: e.target.value }))}
|
|
className="w-full mt-1 border border-gray-300 rounded-lg p-2.5 text-sm bg-white uppercase-select"
|
|
>
|
|
<option value="Particular">PARTICULAR</option>
|
|
<option value="Plano">PLANO</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex justify-end gap-3 pt-6">
|
|
<button type="button" onClick={onClose} className="px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold rounded-lg text-sm uppercase">CANCELAR</button>
|
|
<button type="submit" className="px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg text-sm uppercase flex items-center gap-2">
|
|
<UserPlus size={16} /> CADASTRAR
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
import { PageHeader } from '../components/PageHeader.tsx';
|
|
|
|
export const LeadsView: React.FC = () => {
|
|
const { data: leads, isLoading, error, refresh } = useHybridBackend<Lead[]>(HybridBackend.getLeads);
|
|
const { data: dentistas } = useHybridBackend<Dentista[]>(HybridBackend.getDentistas);
|
|
|
|
const [isConvertModalOpen, setIsConvertModalOpen] = useState(false);
|
|
const [isNovoLeadOpen, setIsNovoLeadOpen] = useState(false);
|
|
const [selectedLead, setSelectedLead] = useState<Lead | null>(null);
|
|
const [filterStatus, setFilterStatus] = useState<string>('TODOS');
|
|
const [isFilterOpen, setIsFilterOpen] = useState(false);
|
|
const toast = useToast();
|
|
|
|
// Effect to handle Esc key to close modal
|
|
useEffect(() => {
|
|
if (!isConvertModalOpen) return;
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
setIsConvertModalOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isConvertModalOpen]);
|
|
|
|
const handleConvert = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedLead) return;
|
|
|
|
try {
|
|
// Mocking the conversion as the backend method is not yet implemented
|
|
toast.info(`FUNCIONALIDADE DE CONVERSÃO PARA ${selectedLead.nome} EM DESENVOLVIMENTO.`);
|
|
setIsConvertModalOpen(false);
|
|
// In a real scenario, this would create a patient and an appointment
|
|
} catch {
|
|
toast.error("FALHA AO CONVERTER LEAD.");
|
|
}
|
|
};
|
|
|
|
const filterOptions = ['TODOS', 'NOVO', 'CONVERTIDO'];
|
|
|
|
const filteredLeads = leads?.filter(lead => {
|
|
if (filterStatus === 'TODOS') return true;
|
|
return lead.status?.toUpperCase() === filterStatus;
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title="GESTÃO DE LEADS">
|
|
<div className="flex gap-2">
|
|
{/* Filter Dropdown */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsFilterOpen(o => !o)}
|
|
className="bg-white border border-gray-300 text-gray-600 px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-gray-50 uppercase font-bold"
|
|
>
|
|
<Filter size={16} />
|
|
{filterStatus}
|
|
<ChevronDown size={14} className={`transition-transform ${isFilterOpen ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
{isFilterOpen && (
|
|
<div className="absolute right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10 min-w-[140px]">
|
|
{filterOptions.map(opt => (
|
|
<button
|
|
key={opt}
|
|
onClick={() => { setFilterStatus(opt); setIsFilterOpen(false); }}
|
|
className={`w-full text-left px-4 py-2 text-sm font-bold uppercase hover:bg-gray-50 ${filterStatus === opt ? 'text-blue-600 bg-blue-50' : 'text-gray-700'}`}
|
|
>
|
|
{opt}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* New Lead Button */}
|
|
<button
|
|
onClick={() => setIsNovoLeadOpen(true)}
|
|
className="bg-green-600 text-white px-4 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-green-700 uppercase font-bold shadow-sm"
|
|
>
|
|
<Plus size={16} /> NOVO LEAD
|
|
</button>
|
|
</div>
|
|
</PageHeader>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{isLoading && <LoadingSpinner />}
|
|
{error && <ErrorDisplay error={error} />}
|
|
{filteredLeads && filteredLeads.map(lead => (
|
|
<div key={lead.id} className={`bg-white rounded-xl shadow-sm border ${lead.status === 'Novo' ? 'border-amber-200 bg-amber-50/30' : 'border-gray-200'} p-6 relative`}>
|
|
{lead.status === 'Novo' && (
|
|
<div className="absolute top-4 right-4 w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
|
|
)}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-gray-900 uppercase">{lead.nome} {lead.sobrenome}</h3>
|
|
<p className="text-sm text-gray-500 flex items-center gap-1 mt-1 font-medium">
|
|
<MessageSquare size={14} /> {lead.whatsapp}
|
|
</p>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs font-bold rounded uppercase ${lead.tipoInteresse === 'Particular' ? 'bg-orange-100 text-orange-800' : 'bg-purple-100 text-purple-800'}`}>
|
|
{lead.tipoInteresse}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-400 mb-6 font-bold uppercase">
|
|
CADASTRADO EM: {new Date(lead.dataCadastro).toLocaleDateString()}
|
|
</div>
|
|
|
|
{lead.status !== 'Convertido' ? (
|
|
<button
|
|
onClick={() => { setSelectedLead(lead); setIsConvertModalOpen(true); }}
|
|
className="w-full py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center justify-center gap-2 font-bold transition-colors uppercase text-xs"
|
|
>
|
|
<UserPlus size={18} /> AGENDAR E CADASTRAR
|
|
</button>
|
|
) : (
|
|
<div className="w-full py-2 bg-gray-100 text-gray-500 rounded-lg flex items-center justify-center gap-2 font-bold uppercase text-xs">
|
|
<CheckCircle size={18} /> CONVERTIDO
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
{filteredLeads?.length === 0 && !isLoading && (
|
|
<div className="col-span-3 text-center py-10 text-gray-400 uppercase font-bold text-sm">
|
|
NENHUM LEAD ENCONTRADO.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isConvertModalOpen && selectedLead && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-2 lg:p-0">
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md lg:max-w-none lg:w-[90vw] lg:h-[98vh] animate-in fade-in zoom-in-50 duration-200 flex flex-col overflow-hidden">
|
|
<div className="px-5 py-4 border-b border-gray-200 flex justify-between items-center flex-shrink-0 bg-gradient-to-r from-blue-50 to-white">
|
|
<h3 className="text-lg font-bold text-gray-800 uppercase flex items-center gap-2">
|
|
<UserPlus size={18} className="text-blue-500" /> CONVERTER LEAD
|
|
</h3>
|
|
<button onClick={() => setIsConvertModalOpen(false)} className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg p-1.5 transition-colors"><X size={22} /></button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-5 lg:p-8">
|
|
<form onSubmit={handleConvert} className="space-y-4 max-w-2xl mx-auto">
|
|
<div className="bg-blue-50 p-4 rounded-lg mb-4 text-xs text-blue-800 border border-blue-100 font-bold uppercase">
|
|
AO SALVAR, O SISTEMA IRÁ AUTOMATICAMENTE <strong>CADASTRAR O PACIENTE</strong> E CRIAR O AGENDAMENTO.
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-700 mb-1 uppercase">PACIENTE</label>
|
|
<input disabled value={`${selectedLead.nome} ${selectedLead.sobrenome}`.toUpperCase()} className="w-full bg-gray-100 border border-gray-300 rounded-lg p-2.5 text-gray-500 uppercase font-bold" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-700 mb-1 uppercase">DATA AGENDAMENTO</label>
|
|
<input type="date" required className="w-full border border-gray-300 rounded-lg p-2.5 font-semibold" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-700 mb-1 uppercase">HORA</label>
|
|
<input type="time" required className="w-full border border-gray-300 rounded-lg p-2.5 font-semibold" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-700 mb-1 uppercase">DENTISTA RESPONSÁVEL</label>
|
|
<select className="w-full border border-gray-300 rounded-lg p-2.5 bg-white uppercase-select font-semibold">
|
|
{dentistas && dentistas.map(d => <option key={d.id} value={d.id}>{d.nome}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="pt-6">
|
|
<button type="submit" className="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700 uppercase text-sm shadow-sm transition-all">
|
|
CONFIRMAR AGENDAMENTO
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isNovoLeadOpen && (
|
|
<NovoLeadModal onClose={() => setIsNovoLeadOpen(false)} onSaved={refresh} />
|
|
)}
|
|
</div>
|
|
);
|
|
}; |