VPS 4 Builder
fbaf478eaf
- Cada dente selecionado tem seu próprio input de face e observação (não mais unificado) - ADICIONAR ITEM cria um GTOItem por dente com face/obs individual - Layout mobile em 3 páginas: pág 1 paciente/especialidade/dentista, pág 2 odontograma, pág 3 faces/obs + rascunho - Navegação mobile com footer fixo: VOLTAR | indicador de página | PRÓXIMO / FINALIZAR - Campo descricao_mobile no cadastro de procedimentos (versão curta para celular) - ALTER TABLE procedimentos ADD COLUMN descricao_mobile TEXT (já executado no DB) - Desktop mantém layout coluna dupla original sem mudança Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1025 lines
65 KiB
TypeScript
1025 lines
65 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Plus, Edit, Trash2, X, FileText, Stethoscope, Award, BookOpen, RefreshCw, Database, Loader2, Mail, Phone, ClipboardList, GripVertical, Share2, Check, Clock, ArrowRight, Activity } from 'lucide-react';
|
|
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
|
|
import { HybridBackend } from '../services/backend.ts';
|
|
import { Dentista, Especialidade, Plano, Procedimento, ProcedimentoValorPlano, DentistaHorario } from '../types.ts';
|
|
import { useHybridBackend } from '../hooks/useHybridBackend.ts';
|
|
import { useToast } from '../contexts/ToastContext.tsx';
|
|
import { PageHeader } from '../components/PageHeader.tsx';
|
|
import { GoogleConnectButton } from '../components/GoogleConnectButton.tsx';
|
|
|
|
const AdminSection: React.FC<{ title: string; buttonLabel: string; onButtonClick: () => void; children: React.ReactNode }> =
|
|
({ title, buttonLabel, onButtonClick, children }) => (
|
|
<div className="space-y-6">
|
|
<PageHeader title={title}>
|
|
<button
|
|
onClick={onButtonClick}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-700 font-bold text-xs uppercase transition-colors shadow-sm"
|
|
>
|
|
<Plus size={18} /> {buttonLabel}
|
|
</button>
|
|
</PageHeader>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
const DentistHoursModal: React.FC<{ dentist: Dentista; clinicaId: string; onClose: () => void }> = ({ dentist, clinicaId, onClose }) => {
|
|
const { data: horarios, refresh } = useHybridBackend<DentistaHorario[]>(() => HybridBackend.getHorariosByDentista(dentist.id, clinicaId));
|
|
const toast = useToast();
|
|
const dias = ['DOMINGO', 'SEGUNDA', 'TERÇA', 'QUARTA', 'QUINTA', 'SEXTA', 'SÁBADO'];
|
|
|
|
const handleAdd = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const fd = new FormData(e.target as HTMLFormElement);
|
|
await HybridBackend.saveHorario({
|
|
dentista_id: dentist.id,
|
|
clinica_id: clinicaId,
|
|
dia_semana: parseInt(fd.get('dia') as string),
|
|
hora_inicio: fd.get('inicio') as string,
|
|
hora_fim: fd.get('fim') as string,
|
|
ativo: true
|
|
});
|
|
toast.success("HORÁRIO ADICIONADO!");
|
|
refresh();
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/60 z-[60] flex items-center justify-center backdrop-blur-sm p-0">
|
|
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
|
|
<div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
|
|
<div>
|
|
<h3 className="text-lg font-black text-gray-900 uppercase leading-tight">ESCALA DE ATENDIMENTO</h3>
|
|
<p className="text-[10px] text-blue-600 font-bold uppercase">{dentist.nome}</p>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-xl transition-colors"><X size={20} /></button>
|
|
</div>
|
|
<div className="p-6 space-y-6">
|
|
<form onSubmit={handleAdd} className="grid grid-cols-1 md:grid-cols-4 gap-3 bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
|
<select name="dia" className="bg-white border-blue-200 border rounded-lg p-2 text-xs font-bold uppercase" required>
|
|
{dias.map((d, i) => <option key={i} value={i}>{d}</option>)}
|
|
</select>
|
|
<input name="inicio" type="time" className="bg-white border-blue-200 border rounded-lg p-2 text-xs font-bold" required />
|
|
<input name="fim" type="time" className="bg-white border-blue-200 border rounded-lg p-2 text-xs font-bold" required />
|
|
<button type="submit" className="bg-blue-600 text-white rounded-lg font-black text-[10px] uppercase hover:bg-blue-700 transition-all flex items-center justify-center gap-2">
|
|
<Plus size={14} /> ADICIONAR
|
|
</button>
|
|
</form>
|
|
|
|
<div className="space-y-2 flex-1 overflow-y-auto pr-2">
|
|
{horarios?.map(h => (
|
|
<div key={h.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-xl border border-gray-100 hover:border-blue-200 transition-all group">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm text-blue-600 border border-gray-100 font-black text-[10px]">
|
|
{dias[h.dia_semana].substring(0, 3)}
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs font-black text-gray-700">
|
|
<Clock size={14} className="text-gray-400" />
|
|
<span>{h.hora_inicio.substring(0, 5)}</span>
|
|
<ArrowRight size={12} className="text-gray-300" />
|
|
<span>{h.hora_fim.substring(0, 5)}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={async () => { await HybridBackend.deleteHorario(h.id); refresh(); toast.success("REMOVIDO!"); }}
|
|
className="p-2 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- DENTISTAS ---
|
|
export const DentistasView: React.FC = () => {
|
|
const activeWorkspace = HybridBackend.getActiveWorkspace();
|
|
const { data: dentistas, isLoading, error, refresh } = useHybridBackend<Dentista[]>(() => HybridBackend.getDentistas(activeWorkspace?.id));
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingDentista, setEditingDentista] = useState<Partial<Dentista> | null>(null);
|
|
const [isHoursModalOpen, setIsHoursModalOpen] = useState(false);
|
|
const [selectedDentist, setSelectedDentist] = useState<Dentista | null>(null);
|
|
const [connectedAccounts, setConnectedAccounts] = useState<any[]>([]);
|
|
const toast = useToast();
|
|
|
|
const fetchGoogleStatus = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/google/status');
|
|
const data = await response.json();
|
|
setConnectedAccounts(data);
|
|
} catch (error) {
|
|
console.error("Erro ao buscar status do Google:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchGoogleStatus();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isModalOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setIsModalOpen(false);
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isModalOpen]);
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
if (editingDentista && editingDentista.id) {
|
|
await HybridBackend.updateDentista({ ...editingDentista, ...data } as Dentista);
|
|
toast.success("DENTISTA ATUALIZADO!");
|
|
} else {
|
|
await HybridBackend.saveDentista({ ...data, ativo: true } as any);
|
|
toast.success("DENTISTA CADASTRADO!");
|
|
}
|
|
setIsModalOpen(false);
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO SALVAR DENTISTA.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm("TEM CERTEZA QUE DESEJA EXCLUIR ESTE DENTISTA?")) {
|
|
await HybridBackend.deleteDentista(id);
|
|
toast.success("Dentista excluído.");
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
|
|
|
const handleInviteDentist = async (d: Dentista) => {
|
|
try {
|
|
const activeW = HybridBackend.getActiveWorkspace();
|
|
const res = await fetch('/api/dentistas/magic-link', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ clinicaId: activeW.id, dentistName: d.nome })
|
|
});
|
|
const { link } = await res.json();
|
|
await navigator.clipboard.writeText(link);
|
|
setCopiedId(d.id);
|
|
toast.success("LINK MÁGICO COPIADO!");
|
|
setTimeout(() => setCopiedId(null), 2000);
|
|
} catch {
|
|
toast.error("ERRO AO GERAR LINK.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AdminSection title="DENTISTAS & ESPECIALISTAS" buttonLabel="NOVO DENTISTA" onButtonClick={() => { setEditingDentista({}); setIsModalOpen(true); }}>
|
|
{isLoading && <Loader2 className="animate-spin text-blue-500" />}
|
|
{error && <p className="text-red-500">Erro: {error.message}</p>}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{dentistas?.map(d => (
|
|
<div key={d.id} className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col">
|
|
<div className="p-5 flex-grow">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-gray-900 uppercase">{d.nome}</h3>
|
|
<span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full uppercase">{d.especialidade}</span>
|
|
</div>
|
|
<div className="w-4 h-4 rounded-full border-2 border-white shadow" style={{ backgroundColor: d.corAgenda }}></div>
|
|
</div>
|
|
<div className="mt-4 space-y-2 text-xs text-gray-500">
|
|
<p className="flex items-center gap-2 font-medium"><Mail size={14} /> {d.email}</p>
|
|
<p className="flex items-center gap-2 font-medium"><Phone size={14} /> {d.telefone}</p>
|
|
</div>
|
|
|
|
<div className="mt-5 border-t border-gray-50 pt-4 flex items-center gap-2">
|
|
<div className="flex-1">
|
|
<GoogleConnectButton
|
|
ownerId={d.id}
|
|
isConnected={connectedAccounts.some(a => a.owner_id === d.id)}
|
|
onStatusChange={fetchGoogleStatus}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => handleInviteDentist(d)}
|
|
title="COMPARTILHAR LINK DE CADASTRO"
|
|
className={`p-2.5 rounded-xl border transition-all ${copiedId === d.id ? 'bg-green-50 text-green-600 border-green-200' : 'bg-gray-50 text-gray-400 border-gray-100 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-100'}`}
|
|
>
|
|
{copiedId === d.id ? <Check size={18} /> : <Share2 size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-2 grid grid-cols-3 gap-1">
|
|
<button onClick={() => { setEditingDentista(d); setIsModalOpen(true); }} className="text-[10px] uppercase font-bold text-gray-600 hover:bg-gray-100 py-2 rounded-md flex items-center justify-center gap-1"><Edit size={12} /> EDITAR</button>
|
|
<button onClick={() => { setSelectedDentist(d); setIsHoursModalOpen(true); }} className="text-[10px] uppercase font-bold text-blue-600 hover:bg-blue-50 py-2 rounded-md flex items-center justify-center gap-1"><Clock size={12} /> ESCALA</button>
|
|
<button onClick={() => handleDelete(d.id)} className="text-[10px] uppercase font-bold text-red-500 hover:bg-red-50 py-2 rounded-md flex items-center justify-center gap-1"><Trash2 size={12} /> EXCLUIR</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-0">
|
|
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-xl flex flex-col overflow-hidden animate-in fade-in zoom-in-50 duration-200">
|
|
<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">{editingDentista?.id ? 'EDITAR' : 'NOVO'} DENTISTA</h3>
|
|
<button onClick={() => setIsModalOpen(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={handleSave} className="space-y-4 max-w-2xl mx-auto">
|
|
<input id="dentista-nome" type="text" name="nome" placeholder="NOME COMPLETO" defaultValue={editingDentista?.nome} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" required />
|
|
<input id="dentista-email" type="email" name="email" placeholder="EMAIL" defaultValue={editingDentista?.email} className="w-full border border-gray-300 rounded-lg p-2" required />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<input id="dentista-telefone" type="text" name="telefone" placeholder="TELEFONE" defaultValue={editingDentista?.telefone} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" />
|
|
<input id="dentista-celular" type="text" name="celular" placeholder="WHATSAPP / CELULAR" defaultValue={editingDentista?.celular} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<input id="dentista-cro" type="text" name="cro" placeholder="NÚMERO CRO" defaultValue={editingDentista?.cro} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" />
|
|
<select id="dentista-cro-uf" name="cro_uf" defaultValue={editingDentista?.cro_uf || 'MS'} className="w-full border border-gray-300 rounded-lg p-2">
|
|
<option value="MS">MS</option><option value="SP">SP</option><option value="RJ">RJ</option><option value="MG">MG</option><option value="PR">PR</option><option value="SC">SC</option>
|
|
</select>
|
|
</div>
|
|
<input id="dentista-especialidade" type="text" name="especialidade" placeholder="ESPECIALIDADE PRINCIPAL" defaultValue={editingDentista?.especialidade} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" required />
|
|
<div>
|
|
<label htmlFor="dentista-cor" className="text-xs font-bold text-gray-500 uppercase">COR NA AGENDA</label>
|
|
<input id="dentista-cor" type="color" name="corAgenda" defaultValue={editingDentista?.corAgenda || '#3B82F6'} className="w-full h-10 border border-gray-300 rounded-lg p-1" />
|
|
</div>
|
|
<button type="submit" className="w-full bg-green-600 text-white py-2 rounded-lg font-bold hover:bg-green-700 uppercase">SALVAR</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isHoursModalOpen && selectedDentist && activeWorkspace && (
|
|
<DentistHoursModal
|
|
dentist={selectedDentist}
|
|
clinicaId={activeWorkspace.id}
|
|
onClose={() => { setIsHoursModalOpen(false); setSelectedDentist(null); }}
|
|
/>
|
|
)}
|
|
</AdminSection>
|
|
);
|
|
};
|
|
|
|
// --- ESPECIALIDADES ---
|
|
export const EspecialidadesView: React.FC = () => {
|
|
const { data: especialidades, isLoading, error, refresh } = useHybridBackend<Especialidade[]>(HybridBackend.getEspecialidades);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingEsp, setEditingEsp] = useState<Partial<Especialidade> | null>(null);
|
|
const toast = useToast();
|
|
|
|
useEffect(() => {
|
|
if (!isModalOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setIsModalOpen(false);
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isModalOpen]);
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
if (editingEsp && editingEsp.id) {
|
|
await HybridBackend.updateEspecialidade({ ...editingEsp, ...data } as Especialidade);
|
|
toast.success("ESPECIALIDADE ATUALIZADA!");
|
|
} else {
|
|
await HybridBackend.saveEspecialidade(data as any);
|
|
toast.success("ESPECIALIDADE SALVA!");
|
|
}
|
|
setIsModalOpen(false);
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO SALVAR ESPECIALIDADE.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm("TEM CERTEZA QUE DESEJA EXCLUIR ESTA ESPECIALIDADE?")) {
|
|
await HybridBackend.deleteEspecialidade(id);
|
|
toast.success("Especialidade excluída.");
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
const onDragEnd = async (result: any) => {
|
|
if (!result.destination || !especialidades) return;
|
|
|
|
const items = Array.from(especialidades);
|
|
const [reorderedItem] = items.splice(result.source.index, 1);
|
|
items.splice(result.destination.index, 0, reorderedItem);
|
|
|
|
const updatedOrders = items.map((item, index) => ({
|
|
id: item.id,
|
|
ordem: index
|
|
}));
|
|
|
|
try {
|
|
await HybridBackend.reorderEspecialidades(updatedOrders);
|
|
toast.success("ORDEM ATUALIZADA!");
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO REORDENAR.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AdminSection title="ESPECIALIDADES CLÍNICAS" buttonLabel="NOVA ESPECIALIDADE" onButtonClick={() => { setEditingEsp({}); setIsModalOpen(true); }}>
|
|
<div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 text-gray-500 uppercase text-xs font-bold">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left w-10"></th>
|
|
<th className="px-6 py-3 text-left">NOME</th>
|
|
<th className="px-6 py-3 text-left">DESCRIÇÃO</th>
|
|
<th className="px-6 py-3 text-right">AÇÕES</th>
|
|
</tr>
|
|
</thead>
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="especialidades">
|
|
{(provided) => (
|
|
<tbody {...provided.droppableProps} ref={provided.innerRef} className="divide-y divide-gray-100">
|
|
{isLoading && <tr><td colSpan={4} className="p-6 text-center"><Loader2 className="animate-spin text-blue-500 mx-auto" /></td></tr>}
|
|
{error && <tr><td colSpan={4} className="p-6 text-center text-red-500">{error.message}</td></tr>}
|
|
{especialidades?.map((esp, index) => (
|
|
<Draggable key={esp.id} draggableId={esp.id} index={index}>
|
|
{(provided, snapshot) => (
|
|
<tr
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
className={`${snapshot.isDragging ? 'bg-blue-50 shadow-md ring-1 ring-blue-200' : 'bg-white'} transition-shadow`}
|
|
>
|
|
<td className="px-6 py-4 text-gray-400 cursor-grab active:cursor-grabbing" {...provided.dragHandleProps}>
|
|
<GripVertical size={18} />
|
|
</td>
|
|
<td className="px-6 py-4 font-bold text-gray-800">{esp.nome}</td>
|
|
<td className="px-6 py-4 text-gray-600">{esp.descricao}</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={() => { setEditingEsp(esp); setIsModalOpen(true); }} className="p-2 text-gray-500 hover:bg-gray-100 rounded-md"><Edit size={16} /></button>
|
|
<button onClick={() => handleDelete(esp.id)} className="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 rounded-md"><Trash2 size={16} /></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</Draggable>
|
|
))}
|
|
{provided.placeholder}
|
|
</tbody>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
</table>
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-0">
|
|
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-xl flex flex-col overflow-hidden animate-in fade-in zoom-in-50 duration-200">
|
|
<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">{editingEsp?.id ? 'EDITAR' : 'NOVA'} ESPECIALIDADE</h3>
|
|
<button onClick={() => setIsModalOpen(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={handleSave} className="space-y-4 max-w-2xl mx-auto">
|
|
<input id="esp-nome" name="nome" placeholder="NOME DA ESPECIALIDADE" defaultValue={editingEsp?.nome} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" required />
|
|
<textarea id="esp-desc" name="descricao" placeholder="BREVE DESCRIÇÃO" defaultValue={editingEsp?.descricao} className="w-full border border-gray-300 rounded-lg p-2 h-24 uppercase-textarea"></textarea>
|
|
<button type="submit" className="w-full bg-green-600 text-white py-2 rounded-lg font-bold hover:bg-green-700 uppercase">SALVAR</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminSection>
|
|
);
|
|
};
|
|
|
|
// --- PROCEDIMENTOS ---
|
|
export const ProcedimentosView: React.FC = () => {
|
|
const { data: procedimentos, isLoading, error, refresh } = useHybridBackend<Procedimento[]>(HybridBackend.getProcedimentos);
|
|
const { data: especialidades } = useHybridBackend<Especialidade[]>(HybridBackend.getEspecialidades);
|
|
const { data: planos } = useHybridBackend<Plano[]>(HybridBackend.getPlanos);
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingProcedimento, setEditingProcedimento] = useState<Partial<Procedimento> | null>(null);
|
|
const [planValues, setPlanValues] = useState<Partial<ProcedimentoValorPlano>[]>([]);
|
|
const toast = useToast();
|
|
|
|
useEffect(() => {
|
|
if (!isModalOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setIsModalOpen(false);
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isModalOpen]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (editingProcedimento) {
|
|
setPlanValues(editingProcedimento.valoresPlanos || []);
|
|
// Set initial category if new
|
|
if (!editingProcedimento.id && !editingProcedimento.categoria) {
|
|
setEditingProcedimento(prev => ({ ...prev, categoria: 'Particular' }));
|
|
}
|
|
}
|
|
}, [editingProcedimento]);
|
|
|
|
const suggestInternalCode = () => {
|
|
const nextId = (procedimentos?.length || 0) + 1;
|
|
setEditingProcedimento(prev => ({ ...prev, codigoInterno: nextId.toString() }));
|
|
};
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
const data: any = Object.fromEntries(formData.entries());
|
|
|
|
const esp = especialidades?.find(es => es.id === data.especialidadeId);
|
|
|
|
const payload: Partial<Procedimento> = {
|
|
id: editingProcedimento?.id,
|
|
nome: data.nome,
|
|
codigo: data.codigo,
|
|
codigoInterno: data.codigoInterno,
|
|
categoria: data.categoria,
|
|
descricao: data.descricao,
|
|
descricao_mobile: data.descricao_mobile || undefined,
|
|
especialidadeId: data.especialidadeId,
|
|
especialidadeNome: esp?.nome || '',
|
|
valorParticular: parseFloat(data.valorParticular),
|
|
tipo_regiao: editingProcedimento?.tipo_regiao || 'GERAL',
|
|
exige_face: editingProcedimento?.tipo_regiao === 'DENTE' ? !!editingProcedimento?.exige_face : false,
|
|
valoresPlanos: planValues.map(pv => ({
|
|
planoId: pv.planoId!,
|
|
planoNome: planos?.find(p => p.id === pv.planoId)?.nome || '',
|
|
valor: parseFloat(pv.valor as any),
|
|
codigoPlano: pv.codigoPlano || ''
|
|
})),
|
|
};
|
|
|
|
try {
|
|
if (payload.id) {
|
|
await HybridBackend.updateProcedimento(payload as Procedimento);
|
|
toast.success("PROCEDIMENTO ATUALIZADO!");
|
|
} else {
|
|
await HybridBackend.saveProcedimento(payload);
|
|
toast.success("PROCEDIMENTO SALVO!");
|
|
}
|
|
setIsModalOpen(false);
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO SALVAR PROCEDIMENTO.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm("TEM CERTEZA QUE DESEJA EXCLUIR ESTE PROCEDIMENTO?")) {
|
|
await HybridBackend.deleteProcedimento(id);
|
|
toast.success("Procedimento excluído.");
|
|
refresh();
|
|
}
|
|
};
|
|
|
|
const handleAddPlanValue = () => setPlanValues(prev => [...prev, { planoId: '', valor: 0, codigoPlano: '' }]);
|
|
const handleRemovePlanValue = (index: number) => setPlanValues(prev => prev.filter((_, i) => i !== index));
|
|
const handlePlanValueChange = (index: number, field: 'planoId' | 'valor' | 'codigoPlano', value: string) => {
|
|
const newValues = [...planValues];
|
|
newValues[index] = { ...newValues[index], [field]: value };
|
|
setPlanValues(newValues);
|
|
};
|
|
|
|
const onDragEnd = async (result: any) => {
|
|
if (!result.destination || !procedimentos) return;
|
|
|
|
const items = Array.from(procedimentos);
|
|
const [reorderedItem] = items.splice(result.source.index, 1);
|
|
items.splice(result.destination.index, 0, reorderedItem);
|
|
|
|
const updatedOrders = items.map((item, index) => ({
|
|
id: item.id,
|
|
ordem: index
|
|
}));
|
|
|
|
try {
|
|
await HybridBackend.reorderProcedimentos(updatedOrders);
|
|
toast.success("ORDEM DOS PROCEDIMENTOS ATUALIZADA!");
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO REORDENAR PROCEDIMENTOS.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AdminSection title="PROCEDIMENTOS E VALORES" buttonLabel="NOVO PROCEDIMENTO" onButtonClick={() => { setEditingProcedimento({}); setIsModalOpen(true); }}>
|
|
<div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 text-gray-500 uppercase text-xs font-bold">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left w-10"></th>
|
|
<th className="px-6 py-3 text-left">NOME</th>
|
|
<th className="px-6 py-3 text-left">CÓDIGO (TUSS/INT)</th>
|
|
<th className="px-6 py-3 text-left">CATEGORIA</th>
|
|
<th className="px-6 py-3 text-left">ESPECIALIDADE</th>
|
|
<th className="px-6 py-3 text-left">VALOR PARTICULAR</th>
|
|
<th className="px-6 py-3 text-right">AÇÕES</th>
|
|
</tr>
|
|
</thead>
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="procedimentos">
|
|
{(provided) => (
|
|
<tbody {...provided.droppableProps} ref={provided.innerRef} className="divide-y divide-gray-100">
|
|
{isLoading && <tr><td colSpan={7} className="p-6 text-center"><Loader2 className="animate-spin text-blue-500 mx-auto" /></td></tr>}
|
|
{error && <tr><td colSpan={7} className="p-6 text-center text-red-500">{error.message}</td></tr>}
|
|
{procedimentos?.map((proc, index) => (
|
|
<Draggable key={proc.id} draggableId={proc.id} index={index}>
|
|
{(provided, snapshot) => (
|
|
<tr
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
className={`${snapshot.isDragging ? 'bg-blue-50 shadow-md ring-1 ring-blue-200' : 'bg-white'} transition-shadow`}
|
|
>
|
|
<td className="px-6 py-4 text-gray-400 cursor-grab active:cursor-grabbing" {...provided.dragHandleProps}>
|
|
<GripVertical size={18} />
|
|
</td>
|
|
<td className="px-6 py-4 font-bold text-gray-800">{proc.nome}</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] font-bold text-gray-400 uppercase">TUSS: {proc.codigo || '---'}</span>
|
|
<span className="text-[10px] font-bold text-blue-600 uppercase bg-blue-50 px-1.5 py-0.5 rounded w-fit">INT: {proc.codigoInterno || '---'}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4"><span className="text-xs font-bold px-2 py-1 rounded-full bg-gray-100 text-gray-600 uppercase">{proc.categoria}</span></td>
|
|
<td className="px-6 py-4 text-gray-600">{proc.especialidadeNome}</td>
|
|
<td className="px-6 py-4 font-semibold text-gray-700">R$ {Number(proc.valorParticular).toFixed(2)}</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<button onClick={() => { setEditingProcedimento(proc); setIsModalOpen(true); }} className="p-2 text-gray-500 hover:bg-gray-100 rounded-md"><Edit size={16} /></button>
|
|
<button onClick={() => handleDelete(proc.id)} className="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 rounded-md"><Trash2 size={16} /></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</Draggable>
|
|
))}
|
|
{provided.placeholder}
|
|
</tbody>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
</table>
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-0">
|
|
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-xl flex flex-col overflow-hidden animate-in fade-in zoom-in-50 duration-200">
|
|
<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">{editingProcedimento?.id ? 'EDITAR' : 'NOVO'} PROCEDIMENTO</h3>
|
|
<button onClick={() => setIsModalOpen(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={handleSave} className="space-y-4 max-w-2xl mx-auto pb-4">
|
|
<input name="nome" placeholder="NOME DO PROCEDIMENTO" defaultValue={editingProcedimento?.nome} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" required />
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">CATEGORIA</label>
|
|
<select
|
|
name="categoria"
|
|
value={editingProcedimento?.categoria || 'Particular'}
|
|
onChange={(e) => {
|
|
const cat = e.target.value as any;
|
|
setEditingProcedimento(prev => ({ ...prev, categoria: cat }));
|
|
if (cat === 'Particular' && !editingProcedimento?.codigoInterno) {
|
|
suggestInternalCode();
|
|
}
|
|
}}
|
|
className="w-full border border-gray-300 rounded-lg p-2 bg-white uppercase-select"
|
|
required
|
|
>
|
|
<option value="Particular">Particular</option>
|
|
<option value="Plano">Plano</option>
|
|
<option value="Convênio">Convênio</option>
|
|
<option value="Outros">Outros</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">CÓDIGO TUSS</label>
|
|
<input
|
|
name="codigo"
|
|
placeholder={editingProcedimento?.categoria === 'Plano' ? "00000000" : "OPCIONAL"}
|
|
defaultValue={editingProcedimento?.codigo}
|
|
className={`w-full border border-gray-300 rounded-lg p-2 uppercase-input ${editingProcedimento?.categoria !== 'Plano' ? 'bg-gray-50' : ''}`}
|
|
required={editingProcedimento?.categoria === 'Plano'}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase flex justify-between">
|
|
CÓDIGO INTERNO
|
|
{editingProcedimento?.categoria !== 'Particular' && (
|
|
<button type="button" onClick={suggestInternalCode} className="text-blue-600 hover:text-blue-800">
|
|
<RefreshCw size={12} />
|
|
</button>
|
|
)}
|
|
</label>
|
|
<input
|
|
name="codigoInterno"
|
|
placeholder={editingProcedimento?.categoria === 'Particular' ? "AUTO (CONTAGEM + 1)" : "EX: 101"}
|
|
value={editingProcedimento?.codigoInterno || ''}
|
|
onChange={(e) => setEditingProcedimento(prev => ({ ...prev, codigoInterno: e.target.value }))}
|
|
className={`w-full border border-gray-300 rounded-lg p-2 uppercase-input ${editingProcedimento?.categoria === 'Particular' ? 'bg-gray-50 text-blue-600 font-bold' : ''}`}
|
|
required={editingProcedimento?.categoria !== 'Particular'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<textarea name="descricao" placeholder="BREVE DESCRIÇÃO" defaultValue={editingProcedimento?.descricao} className="w-full border border-gray-300 rounded-lg p-2 h-20 uppercase-textarea"></textarea>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase flex items-center gap-2">
|
|
DESCRIÇÃO MOBILE <span className="text-[10px] text-blue-500 font-normal normal-case">(versão curta para celular)</span>
|
|
</label>
|
|
<input name="descricao_mobile" placeholder="EX: RESTAURAÇÃO COMP." defaultValue={editingProcedimento?.descricao_mobile} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">ESPECIALIDADE</label>
|
|
<select name="especialidadeId" defaultValue={editingProcedimento?.especialidadeId} className="w-full border border-gray-300 rounded-lg p-2 bg-white uppercase-select" required>
|
|
<option value="">SELECIONE UMA ESPECIALIDADE</option>
|
|
{especialidades?.map(e => <option key={e.id} value={e.id}>{e.nome}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">VALOR PARTICULAR (R$)</label>
|
|
<input type="number" step="0.01" name="valorParticular" placeholder="0.00" defaultValue={editingProcedimento?.valorParticular} className="w-full border border-gray-300 rounded-lg p-2" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 space-y-4">
|
|
<h4 className="text-[10px] font-black text-blue-600 uppercase tracking-widest flex items-center gap-2">
|
|
<Activity size={12} /> REGRA DO ODONTOGRAMA (GTO)
|
|
</h4>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-xs font-bold text-gray-700 uppercase">EXIGÊNCIA DE REGIÃO NO LANÇAMENTO</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ id: 'GERAL', label: 'PROCED. GERAL', desc: 'SEM ODONTOGRAMA' },
|
|
{ id: 'DENTE', label: 'DENTE ESPECÍFICO', desc: 'LIBERA NÚMEROS' },
|
|
{ id: 'ARCO', label: 'ARCO COMPLETO', desc: 'LIBERA AI / AS' }
|
|
].map((opt) => (
|
|
<label
|
|
key={opt.id}
|
|
className={`
|
|
relative flex flex-col p-3 rounded-lg border-2 cursor-pointer transition-all
|
|
${(editingProcedimento?.tipo_regiao || 'GERAL') === opt.id
|
|
? 'border-blue-600 bg-blue-50 ring-2 ring-blue-100'
|
|
: 'border-gray-200 bg-white hover:border-gray-300'}
|
|
`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="tipo_regiao"
|
|
value={opt.id}
|
|
checked={(editingProcedimento?.tipo_regiao || 'GERAL') === opt.id}
|
|
onChange={(e) => setEditingProcedimento(prev => ({ ...prev, tipo_regiao: e.target.value as any }))}
|
|
className="sr-only"
|
|
/>
|
|
<span className="text-[10px] font-black uppercase text-gray-900 leading-tight">{opt.label}</span>
|
|
<span className="text-[9px] font-bold text-gray-400 mt-1 uppercase">{opt.desc}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{(editingProcedimento?.tipo_regiao === 'DENTE') && (
|
|
<div className="pt-2 animate-in slide-in-from-top-2 duration-200">
|
|
<label className="flex items-center gap-3 p-3 bg-white rounded-lg border border-blue-200 cursor-pointer hover:bg-blue-50/50 transition-colors">
|
|
<div className="relative flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
name="exige_face"
|
|
checked={!!editingProcedimento?.exige_face}
|
|
onChange={(e) => setEditingProcedimento(prev => ({ ...prev, exige_face: e.target.checked }))}
|
|
className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-[11px] font-black text-gray-800 uppercase">Exigir preenchimento de Face?</span>
|
|
<span className="text-[9px] font-bold text-gray-400 uppercase">(O, M, D, V, L, P) será obrigatório na GTO</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<h4 className="font-bold text-gray-700 uppercase mb-2">VALORES PARA PLANOS / CONVÊNIOS</h4>
|
|
<div className="space-y-2">
|
|
{planValues.map((pv, index) => (
|
|
<div key={index} className="flex flex-col md:flex-row items-center gap-2 bg-gray-50 p-2 rounded-lg border">
|
|
<select value={pv.planoId} onChange={(e) => handlePlanValueChange(index, 'planoId', e.target.value)} className="flex-1 border border-gray-300 rounded-lg p-2 bg-white uppercase-select">
|
|
<option value="">SELECIONE UM PLANO</option>
|
|
{planos?.filter(p => p.tipo !== 'Particular').map(p => <option key={p.id} value={p.id}>{p.nome}</option>)}
|
|
</select>
|
|
<input type="number" step="0.01" placeholder="VALOR (R$)" value={pv.valor} onChange={(e) => handlePlanValueChange(index, 'valor', e.target.value)} className="w-32 border border-gray-300 rounded-lg p-2" />
|
|
<input type="text" placeholder="CÓD. PLANO" value={pv.codigoPlano} onChange={(e) => handlePlanValueChange(index, 'codigoPlano', e.target.value)} className="w-32 border border-gray-300 rounded-lg p-2 uppercase-input" />
|
|
<button type="button" onClick={() => handleRemovePlanValue(index)} className="p-2 text-red-500 hover:bg-red-100 rounded-md"><Trash2 size={16} /></button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button type="button" onClick={handleAddPlanValue} className="mt-2 text-xs font-bold text-blue-600 hover:underline uppercase flex items-center gap-1"><Plus size={14} /> ADICIONAR VALOR DE PLANO</button>
|
|
</div>
|
|
|
|
<div className="pt-4 flex-shrink-0">
|
|
<button type="submit" className="w-full bg-green-600 text-white py-4 rounded-xl font-black hover:bg-green-700 uppercase text-xs shadow-lg shadow-green-100 transition-all active:scale-[0.98]">
|
|
SALVAR PROCEDIMENTO
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminSection>
|
|
);
|
|
};
|
|
|
|
|
|
// --- PLANOS ---
|
|
export const PlanosView: React.FC = () => {
|
|
const { data: planos, isLoading, error, refresh } = useHybridBackend<Plano[]>(HybridBackend.getPlanos);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingPlano, setEditingPlano] = useState<Partial<Plano> | null>(null);
|
|
const toast = useToast();
|
|
|
|
useEffect(() => {
|
|
if (!isModalOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setIsModalOpen(false);
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [isModalOpen]);
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
if (editingPlano && editingPlano.id) {
|
|
await HybridBackend.updatePlano({ ...editingPlano, ...data } as Plano);
|
|
toast.success("PLANO ATUALIZADO!");
|
|
} else {
|
|
await HybridBackend.savePlano(data as any);
|
|
toast.success("PLANO SALVO!");
|
|
}
|
|
setIsModalOpen(false);
|
|
refresh();
|
|
} catch {
|
|
toast.error("ERRO AO SALVAR PLANO.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm("TEM CERTEZA QUE DESEJA EXCLUIR ESTE PLANO?")) {
|
|
await HybridBackend.deletePlano(id);
|
|
toast.success("Plano excluído.");
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AdminSection title="PLANOS E CONVÊNIOS" buttonLabel="NOVO PLANO" onButtonClick={() => { setEditingPlano({}); setIsModalOpen(true); }}>
|
|
{isLoading && <Loader2 className="animate-spin text-blue-500" />}
|
|
{error && <p className="text-red-500">Erro: {error.message}</p>}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{planos?.map(p => (
|
|
<div key={p.id} className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col overflow-hidden" style={{ borderTop: `4px solid ${p.corCartao}` }}>
|
|
<div className="p-5 flex-grow">
|
|
<div className="flex justify-between items-start">
|
|
<h3 className="font-bold text-gray-900 uppercase">{p.nome}</h3>
|
|
<span className="text-xs font-bold text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full uppercase">{p.tipo}</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mt-2">DESCONTO PADRÃO: <span className="font-bold">{p.descontoPadrao}%</span></p>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-2 flex gap-2 bg-gray-50/50">
|
|
<button onClick={() => { setEditingPlano(p); setIsModalOpen(true); }} className="flex-1 text-xs uppercase font-bold text-gray-600 hover:bg-gray-100 py-2 rounded-md flex items-center justify-center gap-2"><Edit size={14} /> EDITAR</button>
|
|
<button onClick={() => handleDelete(p.id)} className="flex-1 text-xs uppercase font-bold text-red-500 hover:bg-red-50 py-2 rounded-md flex items-center justify-center gap-2"><Trash2 size={14} /> EXCLUIR</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-0">
|
|
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-xl flex flex-col overflow-hidden animate-in fade-in zoom-in-50 duration-200">
|
|
<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">{editingPlano?.id ? 'EDITAR' : 'NOVO'} PLANO</h3>
|
|
<button onClick={() => setIsModalOpen(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={handleSave} className="space-y-4 max-w-2xl mx-auto">
|
|
<input name="nome" placeholder="NOME DO PLANO/CONVÊNIO" defaultValue={editingPlano?.nome} className="w-full border border-gray-300 rounded-lg p-2 uppercase-input" required />
|
|
<select name="tipo" defaultValue={editingPlano?.tipo || 'Convenio'} className="w-full border border-gray-300 rounded-lg p-2 bg-white uppercase-select" required>
|
|
<option>Convenio</option>
|
|
<option>Particular</option>
|
|
<option>Parceria</option>
|
|
</select>
|
|
<input type="number" name="descontoPadrao" placeholder="DESCONTO PADRÃO (%)" defaultValue={editingPlano?.descontoPadrao} className="w-full border border-gray-300 rounded-lg p-2" />
|
|
<div>
|
|
<label className="text-xs font-bold text-gray-500 uppercase">COR DO CARTÃO</label>
|
|
<input type="color" name="corCartao" defaultValue={editingPlano?.corCartao || '#1f2937'} className="w-full h-10 border border-gray-300 rounded-lg p-1" />
|
|
</div>
|
|
<button type="submit" className="w-full bg-green-600 text-white py-2 rounded-lg font-bold hover:bg-green-700 uppercase">SALVAR</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminSection>
|
|
);
|
|
};
|
|
|
|
|
|
// --- SYNC ---
|
|
const SYNC_TABS = ['pacientes', 'agendamentos', 'financeiro', 'leads', 'guias'];
|
|
|
|
export const SyncView: React.FC = () => {
|
|
const [logs, setLogs] = useState<string[]>([]);
|
|
const [operation, setOperation] = useState<'push' | 'pull' | 'import-legacy' | null>(null);
|
|
const [status, setStatus] = useState<any>(null);
|
|
const toast = useToast();
|
|
|
|
const authHeaders = {
|
|
'Authorization': `Bearer ${localStorage.getItem('SCOREODONTO_AUTH_TOKEN')}`,
|
|
'Content-Type': 'application/json'
|
|
};
|
|
|
|
const loadStatus = async () => {
|
|
try {
|
|
const res = await fetch('/api/sync/status', { headers: authHeaders });
|
|
if (res.ok) setStatus(await res.json());
|
|
} catch {}
|
|
};
|
|
|
|
useEffect(() => { loadStatus(); }, []);
|
|
|
|
const runSync = async (dir: 'push' | 'pull' | 'import-legacy') => {
|
|
setOperation(dir);
|
|
const labels: Record<string, string> = {
|
|
push: 'BACKUP PostgreSQL → Google Sheets',
|
|
pull: 'RESTAURAR Google Sheets → PostgreSQL',
|
|
'import-legacy': 'IMPORTAR PACIENTES (aba PACIENTES-CONSULTT-CLINIC)...'
|
|
};
|
|
setLogs([`>>> ${labels[dir]}...`]);
|
|
try {
|
|
const res = await fetch(`/api/sync/${dir}`, { method: 'POST', headers: authHeaders });
|
|
const data = await res.json();
|
|
setLogs(data.logs || []);
|
|
if (data.success) {
|
|
const msgs: Record<string, string> = {
|
|
push: 'BACKUP REALIZADO!',
|
|
pull: 'DADOS RESTAURADOS!',
|
|
'import-legacy': `${data.imported ?? 0} PACIENTES IMPORTADOS!`
|
|
};
|
|
toast.success(msgs[dir]);
|
|
loadStatus();
|
|
} else {
|
|
toast.error('ERRO NA SINCRONIZAÇÃO. VERIFIQUE OS LOGS.');
|
|
}
|
|
} catch (e: any) {
|
|
setLogs(prev => [...prev, `[ERRO] ${e.message}`]);
|
|
toast.error('FALHA NA CONEXÃO.');
|
|
} finally {
|
|
setOperation(null);
|
|
}
|
|
};
|
|
|
|
const fmtDate = (iso: string | undefined) => iso
|
|
? new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
|
|
: '—';
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto space-y-6">
|
|
<PageHeader
|
|
title="BACKUP & SINCRONIZAÇÃO"
|
|
description="POSTGRESQL ↔ GOOGLE SHEETS"
|
|
>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => runSync('push')}
|
|
disabled={!!operation}
|
|
className={`px-4 py-2 rounded-xl flex items-center gap-2 text-xs font-black uppercase transition-all shadow-sm ${operation ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700 text-white shadow-green-100'}`}
|
|
>
|
|
<RefreshCw size={15} className={operation === 'push' ? 'animate-spin' : ''} />
|
|
{operation === 'push' ? 'ENVIANDO...' : 'BACKUP AGORA'}
|
|
</button>
|
|
<button
|
|
onClick={() => runSync('pull')}
|
|
disabled={!!operation}
|
|
className={`px-4 py-2 rounded-xl flex items-center gap-2 text-xs font-black uppercase transition-all shadow-sm ${operation ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-blue-100'}`}
|
|
>
|
|
<Database size={15} className={operation === 'pull' ? 'animate-spin' : ''} />
|
|
{operation === 'pull' ? 'IMPORTANDO...' : 'RESTAURAR DO BACKUP'}
|
|
</button>
|
|
<button
|
|
onClick={() => runSync('import-legacy')}
|
|
disabled={!!operation}
|
|
title="Importa pacientes da aba PACIENTES-CONSULTT-CLINIC (Apps Script)"
|
|
className={`px-4 py-2 rounded-xl flex items-center gap-2 text-xs font-black uppercase transition-all shadow-sm ${operation ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-amber-500 hover:bg-amber-600 text-white shadow-amber-100'}`}
|
|
>
|
|
<Database size={15} className={operation === 'import-legacy' ? 'animate-spin' : ''} />
|
|
{operation === 'import-legacy' ? 'IMPORTANDO...' : 'IMPORTAR PLANILHA LEGADA'}
|
|
</button>
|
|
</div>
|
|
</PageHeader>
|
|
|
|
{/* Status por tabela */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-gray-50">
|
|
<h3 className="text-xs font-black text-gray-500 uppercase tracking-widest">ESTADO DAS TABELAS</h3>
|
|
</div>
|
|
<div className="divide-y divide-gray-50">
|
|
{SYNC_TABS.map(tab => {
|
|
const s = status?.syncStatus?.[tab];
|
|
const count = status?.counts?.[tab];
|
|
return (
|
|
<div key={tab} className="flex items-center justify-between px-6 py-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-2 h-2 rounded-full ${s?.lastPush ? 'bg-green-400' : 'bg-gray-200'}`} />
|
|
<span className="text-sm font-black uppercase text-gray-700">{tab}</span>
|
|
</div>
|
|
<div className="flex items-center gap-8 text-right">
|
|
<div>
|
|
<p className="text-[9px] font-bold text-gray-400 uppercase">No banco</p>
|
|
<p className="text-sm font-black text-gray-800">{count ?? '—'}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] font-bold text-gray-400 uppercase">Último backup</p>
|
|
<p className="text-xs font-bold text-gray-600">{fmtDate(s?.lastPush)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] font-bold text-gray-400 uppercase">Registros no backup</p>
|
|
<p className="text-xs font-bold text-gray-600">{s?.count ?? '—'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{status?.spreadsheetId && (
|
|
<div className="px-6 py-3 bg-gray-50 border-t border-gray-100 flex items-center gap-2">
|
|
<span className="text-[10px] font-bold text-gray-400 uppercase">PLANILHA:</span>
|
|
<span className="text-[10px] font-mono text-blue-600 truncate">{status.spreadsheetId}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Terminal */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-gray-50 flex items-center justify-between">
|
|
<h3 className="text-xs font-black text-gray-500 uppercase tracking-widest">LOG DE OPERAÇÃO</h3>
|
|
{logs.length > 0 && (
|
|
<button onClick={() => setLogs([])} className="text-[10px] font-bold text-gray-400 hover:text-gray-600 uppercase">LIMPAR</button>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="bg-gray-950 rounded-xl p-4 font-mono text-xs text-green-400 min-h-[160px] max-h-80 overflow-y-auto">
|
|
{logs.length === 0
|
|
? <span className="text-gray-600">AGUARDANDO OPERAÇÃO...</span>
|
|
: logs.map((log, i) => (
|
|
<div key={i} className={`mb-1 pl-2 border-l-2 ${log.startsWith('[ERRO]') ? 'border-red-500 text-red-400' : log.startsWith('[✓]') ? 'border-green-400 text-green-300' : 'border-gray-700'}`}>
|
|
{log}
|
|
</div>
|
|
))
|
|
}
|
|
{operation && <div className="animate-pulse text-green-500 mt-1">▋</div>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 border-t border-amber-100 px-6 py-3 flex items-start gap-3">
|
|
<Database size={14} className="text-amber-600 mt-0.5 flex-shrink-0" />
|
|
<p className="text-[10px] text-amber-700 font-bold uppercase leading-relaxed">
|
|
BACKUP AUTOMÁTICO: cada alteração de paciente, agendamento, financeiro ou lead é enviada
|
|
para a planilha automaticamente (com delay de 5s para agrupar alterações). Use "Restaurar" para
|
|
recuperar dados da planilha caso o banco seja reiniciado.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |