VPS 4 Builder
440 lines
29 KiB
TypeScript
440 lines
29 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { X, Plus, GripVertical, Trash2, Pencil, FileText, ChevronLeft, Printer, Save, Search, Tag, ClipboardList } from 'lucide-react';
|
|
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
|
|
import { HybridBackend } from '../services/backend.ts';
|
|
import { ModeloReceita, ItemReceita, Especialidade, Paciente, Dentista } from '../types.ts';
|
|
import { useHybridBackend } from '../hooks/useHybridBackend.ts';
|
|
import { useToast } from '../contexts/ToastContext.tsx';
|
|
|
|
const VIAS = ['VO', 'SL', 'IV', 'IM', 'SC', 'Tópico', 'Inalatória', 'Colírio', 'Nasal'];
|
|
const FREQUENCIAS = ['1x/dia', '2x/dia', '3x/dia', '4x/dia', '6/6h', '8/8h', '12/12h', '24/24h', 'Dose única', 'Se necessário'];
|
|
const DURACOES = ['1 dia', '2 dias', '3 dias', '5 dias', '7 dias', '10 dias', '14 dias', '21 dias', '30 dias', 'Contínuo'];
|
|
|
|
const ITEM_VAZIO: Omit<ItemReceita, 'id' | 'ordem'> = { medicamento: '', dose: '', via: 'VO', frequencia: '8/8h', duracao: '7 dias', instrucoes: '' };
|
|
|
|
// --------------- Editor de item de medicamento ---------------
|
|
const ItemEditor: React.FC<{
|
|
item: Omit<ItemReceita, 'id' | 'ordem'>;
|
|
onChange: (v: Omit<ItemReceita, 'id' | 'ordem'>) => void;
|
|
onSave: () => void;
|
|
onCancel: () => void;
|
|
}> = ({ item, onChange, onSave, onCancel }) => {
|
|
const inp = "w-full border border-gray-200 rounded-lg px-3 py-2 text-xs focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none bg-white";
|
|
const sel = inp + " appearance-none";
|
|
return (
|
|
<div className="bg-blue-50 border border-blue-100 rounded-xl p-3 space-y-2">
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Medicamento</label>
|
|
<input autoFocus value={item.medicamento} onChange={e => onChange({ ...item, medicamento: e.target.value.toUpperCase() })}
|
|
placeholder="EX: AMOXICILINA 500MG" className={inp} />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Dose</label>
|
|
<input value={item.dose} onChange={e => onChange({ ...item, dose: e.target.value })} placeholder="EX: 500mg" className={inp} />
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Via</label>
|
|
<select value={item.via} onChange={e => onChange({ ...item, via: e.target.value })} className={sel}>
|
|
{VIAS.map(v => <option key={v}>{v}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Frequência</label>
|
|
<select value={item.frequencia} onChange={e => onChange({ ...item, frequencia: e.target.value })} className={sel}>
|
|
{FREQUENCIAS.map(f => <option key={f}>{f}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Duração</label>
|
|
<select value={item.duracao} onChange={e => onChange({ ...item, duracao: e.target.value })} className={sel}>
|
|
{DURACOES.map(d => <option key={d}>{d}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-gray-500 uppercase tracking-wider">Instruções extras (opcional)</label>
|
|
<input value={item.instrucoes || ''} onChange={e => onChange({ ...item, instrucoes: e.target.value })}
|
|
placeholder="EX: TOMAR APÓS AS REFEIÇÕES" className={inp} />
|
|
</div>
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<button onClick={onCancel} className="px-3 py-1.5 bg-white border border-gray-200 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-50">Cancelar</button>
|
|
<button onClick={onSave} disabled={!item.medicamento.trim()} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-bold hover:bg-blue-700 disabled:opacity-40 flex items-center gap-1">
|
|
<Save size={12} /> Confirmar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --------------- Editor de modelo ---------------
|
|
const ModeloEditor: React.FC<{
|
|
modelo: ModeloReceita | null;
|
|
especialidades: Especialidade[];
|
|
onSave: (m: ModeloReceita) => void;
|
|
onBack: () => void;
|
|
}> = ({ modelo, especialidades, onSave, onBack }) => {
|
|
const toast = useToast();
|
|
const [nome, setNome] = useState(modelo?.nome || '');
|
|
const [espId, setEspId] = useState(modelo?.especialidadeId || '');
|
|
const [instrucoes, setInstrucoes] = useState(modelo?.instrucoes || '');
|
|
const [items, setItems] = useState<ItemReceita[]>(modelo?.items || []);
|
|
const [editingIdx, setEditingIdx] = useState<number | null>(null);
|
|
const [newItem, setNewItem] = useState<Omit<ItemReceita, 'id' | 'ordem'>>(ITEM_VAZIO);
|
|
const [adding, setAdding] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const espNome = especialidades.find(e => e.id === espId)?.nome || '';
|
|
|
|
const onDragEnd = (result: DropResult) => {
|
|
if (!result.destination) return;
|
|
const list = [...items];
|
|
const [moved] = list.splice(result.source.index, 1);
|
|
list.splice(result.destination.index, 0, moved);
|
|
setItems(list.map((it, i) => ({ ...it, ordem: i })));
|
|
};
|
|
|
|
const addItem = () => {
|
|
if (!newItem.medicamento.trim()) return;
|
|
setItems(prev => [...prev, { ...newItem, id: `new_${Date.now()}`, ordem: prev.length }]);
|
|
setNewItem(ITEM_VAZIO);
|
|
setAdding(false);
|
|
};
|
|
|
|
const updateItem = (idx: number, val: Omit<ItemReceita, 'id' | 'ordem'>) => {
|
|
setItems(prev => prev.map((it, i) => i === idx ? { ...it, ...val } : it));
|
|
};
|
|
|
|
const removeItem = (idx: number) => setItems(prev => prev.filter((_, i) => i !== idx));
|
|
|
|
const handleSave = async () => {
|
|
if (!nome.trim()) { toast.error('NOME DO MODELO OBRIGATÓRIO'); return; }
|
|
setSaving(true);
|
|
try {
|
|
const payload = { nome: nome.toUpperCase(), especialidadeId: espId || undefined, especialidadeNome: espNome || undefined, instrucoes: instrucoes || undefined, items };
|
|
if (modelo?.id) {
|
|
await HybridBackend.updateModeloReceita({ ...payload, id: modelo.id });
|
|
} else {
|
|
const res = await HybridBackend.saveModeloReceita(payload);
|
|
onSave({ ...payload, id: res.id, items });
|
|
return;
|
|
}
|
|
onSave({ ...payload, id: modelo.id, items });
|
|
} catch { toast.error('ERRO AO SALVAR MODELO'); } finally { setSaving(false); }
|
|
};
|
|
|
|
const inp = "w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none bg-white";
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="p-5 border-b border-gray-100 flex items-center gap-3">
|
|
<button onClick={onBack} className="text-gray-400 hover:text-gray-700 flex-shrink-0"><ChevronLeft size={18} /></button>
|
|
<h3 className="text-sm font-black text-gray-800 uppercase">{modelo ? 'Editar Modelo' : 'Novo Modelo'}</h3>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-5 space-y-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-gray-500 uppercase tracking-wider mb-1">Nome do Modelo *</label>
|
|
<input value={nome} onChange={e => setNome(e.target.value.toUpperCase())} className={inp} placeholder="EX: ANTIBIÓTICO PÓS-CIRÚRGICO" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-gray-500 uppercase tracking-wider mb-1">Especialidade</label>
|
|
<select value={espId} onChange={e => setEspId(e.target.value)} className={inp + " text-sm"}>
|
|
<option value="">— Geral —</option>
|
|
{especialidades.map(e => <option key={e.id} value={e.id}>{e.nome}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black text-gray-500 uppercase tracking-wider mb-1">Instrução Geral (opcional)</label>
|
|
<input value={instrucoes} onChange={e => setInstrucoes(e.target.value)} className={inp} placeholder="EX: USO EM CASO DE INFECÇÃO ODONTOGÊNICA" />
|
|
</div>
|
|
|
|
{/* Lista de medicamentos */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="text-[10px] font-black text-gray-500 uppercase tracking-wider">Medicamentos ({items.length})</label>
|
|
{!adding && <button onClick={() => setAdding(true)} className="flex items-center gap-1 text-xs font-bold text-blue-600 hover:text-blue-800">
|
|
<Plus size={13} /> Adicionar
|
|
</button>}
|
|
</div>
|
|
|
|
{adding && (
|
|
<div className="mb-2">
|
|
<ItemEditor item={newItem} onChange={setNewItem} onSave={addItem} onCancel={() => { setAdding(false); setNewItem(ITEM_VAZIO); }} />
|
|
</div>
|
|
)}
|
|
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="items-receita">
|
|
{provided => (
|
|
<div ref={provided.innerRef} {...provided.droppableProps} className="space-y-1.5">
|
|
{items.map((it, idx) => (
|
|
<Draggable key={it.id} draggableId={it.id} index={idx}>
|
|
{(prov, snap) => (
|
|
<div ref={prov.innerRef} {...prov.draggableProps}
|
|
className={`rounded-xl border transition-shadow ${snap.isDragging ? 'shadow-lg border-blue-300 bg-blue-50' : 'border-gray-200 bg-white'}`}>
|
|
{editingIdx === idx ? (
|
|
<div className="p-2">
|
|
<ItemEditor
|
|
item={{ medicamento: it.medicamento, dose: it.dose, via: it.via, frequencia: it.frequencia, duracao: it.duracao, instrucoes: it.instrucoes }}
|
|
onChange={v => updateItem(idx, v)}
|
|
onSave={() => setEditingIdx(null)}
|
|
onCancel={() => setEditingIdx(null)}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 px-3 py-2.5">
|
|
<span {...prov.dragHandleProps} className="text-gray-300 hover:text-gray-500 cursor-grab flex-shrink-0"><GripVertical size={15} /></span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-xs font-bold text-gray-800 uppercase truncate">{it.medicamento}</p>
|
|
<p className="text-[10px] text-gray-400">{[it.dose, it.via, it.frequencia, it.duracao].filter(Boolean).join(' · ')}</p>
|
|
{it.instrucoes && <p className="text-[10px] text-blue-500 italic">{it.instrucoes}</p>}
|
|
</div>
|
|
<button onClick={() => setEditingIdx(idx)} className="text-gray-300 hover:text-blue-500 flex-shrink-0"><Pencil size={13} /></button>
|
|
<button onClick={() => removeItem(idx)} className="text-gray-300 hover:text-red-500 flex-shrink-0"><Trash2 size={13} /></button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Draggable>
|
|
))}
|
|
{provided.placeholder}
|
|
{items.length === 0 && !adding && (
|
|
<div className="text-center py-6 text-xs text-gray-400 border-2 border-dashed border-gray-200 rounded-xl">
|
|
Nenhum medicamento adicionado ainda
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 flex justify-end gap-2">
|
|
<button onClick={onBack} className="px-5 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold rounded-lg text-xs uppercase">Cancelar</button>
|
|
<button onClick={handleSave} disabled={saving || !nome.trim()} className="px-5 py-2 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg text-xs uppercase flex items-center gap-1.5 disabled:opacity-40">
|
|
<Save size={14} /> {saving ? 'Salvando...' : 'Salvar Modelo'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --------------- Preview de impressão ---------------
|
|
const PrintPreview: React.FC<{
|
|
modelo: ModeloReceita;
|
|
paciente: Paciente;
|
|
dentista?: Dentista;
|
|
onClose: () => void;
|
|
}> = ({ modelo, paciente, dentista, onClose }) => {
|
|
const hoje = new Date().toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="p-4 border-b border-gray-100 flex items-center justify-between print:hidden">
|
|
<div className="flex items-center gap-2">
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-700"><ChevronLeft size={18} /></button>
|
|
<h3 className="text-sm font-black text-gray-800 uppercase">Pré-visualização</h3>
|
|
</div>
|
|
<button onClick={() => window.print()} className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg text-xs font-bold hover:bg-black">
|
|
<Printer size={14} /> Imprimir / Salvar PDF
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto bg-gray-100 p-6 print:p-0 print:bg-white">
|
|
<div id="receita-print" className="max-w-xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-200 p-8 print:shadow-none print:rounded-none print:border-0 print:max-w-full">
|
|
<div className="text-center border-b-2 border-gray-800 pb-4 mb-6">
|
|
<h1 className="text-lg font-black text-gray-900 uppercase">RECEITUÁRIO</h1>
|
|
{dentista && <p className="text-sm font-bold text-gray-700 mt-1">{dentista.nome} — CRO: {dentista.cro || '—'}/{dentista.cro_uf || '—'}</p>}
|
|
</div>
|
|
<div className="mb-6 grid grid-cols-2 gap-3 text-sm">
|
|
<div><span className="text-gray-500 text-xs uppercase font-bold">Paciente</span><p className="font-bold text-gray-900 uppercase">{paciente.nome}</p></div>
|
|
<div><span className="text-gray-500 text-xs uppercase font-bold">Data</span><p className="font-bold text-gray-900">{hoje}</p></div>
|
|
</div>
|
|
{modelo.instrucoes && <div className="mb-5 p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-800 font-medium italic">{modelo.instrucoes}</div>}
|
|
<div className="space-y-4">
|
|
{modelo.items.map((it, i) => (
|
|
<div key={it.id} className="border-b border-gray-100 pb-3 last:border-0 last:pb-0">
|
|
<p className="font-black text-gray-900 text-sm">{i + 1}. {it.medicamento}</p>
|
|
<p className="text-gray-700 text-sm ml-4">
|
|
{[it.dose, it.via, it.frequencia, `por ${it.duracao}`].filter(Boolean).join(' — ')}
|
|
</p>
|
|
{it.instrucoes && <p className="text-gray-500 text-xs ml-4 italic mt-0.5">{it.instrucoes}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-12 pt-6 border-t-2 border-gray-800 flex justify-between items-end">
|
|
<div><p className="text-xs text-gray-500">Assinatura e Carimbo</p><div className="h-10" /></div>
|
|
<p className="text-xs text-gray-400">{hoje}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --------------- Modal principal ---------------
|
|
export const ReceitaModal: React.FC<{ paciente: Paciente; onClose: () => void }> = ({ paciente, onClose }) => {
|
|
const toast = useToast();
|
|
const { data: especialidadesRaw } = useHybridBackend<Especialidade[]>(HybridBackend.getEspecialidades);
|
|
const especialidades = especialidadesRaw ?? [];
|
|
const { data: dentistasRaw } = useHybridBackend<Dentista[]>(HybridBackend.getDentistas);
|
|
const dentistas = dentistasRaw ?? [];
|
|
const [modelos, setModelos] = useState<ModeloReceita[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filtroEsp, setFiltroEsp] = useState('');
|
|
const [busca, setBusca] = useState('');
|
|
|
|
const [view, setView] = useState<'lista' | 'editor' | 'print'>('lista');
|
|
const [modeloAtivo, setModeloAtivo] = useState<ModeloReceita | null>(null);
|
|
const [printModelo, setPrintModelo] = useState<ModeloReceita | null>(null);
|
|
|
|
const dentistaPrincipal = dentistas[0];
|
|
|
|
const carregar = useCallback(async () => {
|
|
setLoading(true);
|
|
try { setModelos(await HybridBackend.getModelosReceita()); }
|
|
catch { toast.error('Erro ao carregar modelos'); }
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { carregar(); }, [carregar]);
|
|
|
|
useEffect(() => {
|
|
const h = (e: KeyboardEvent) => { if (e.key === 'Escape') { if (view !== 'lista') setView('lista'); else onClose(); } };
|
|
document.addEventListener('keydown', h);
|
|
return () => document.removeEventListener('keydown', h);
|
|
}, [view, onClose]);
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Excluir este modelo?')) return;
|
|
await HybridBackend.deleteModeloReceita(id);
|
|
setModelos(prev => prev.filter(m => m.id !== id));
|
|
};
|
|
|
|
const filtrados = modelos.filter(m => {
|
|
const matchEsp = !filtroEsp || m.especialidadeId === filtroEsp;
|
|
const matchBusca = !busca || m.nome.toLowerCase().includes(busca.toLowerCase());
|
|
return matchEsp && matchBusca;
|
|
});
|
|
|
|
return (
|
|
<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-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
|
|
{view === 'lista' && (
|
|
<>
|
|
<div className="p-5 border-b border-gray-100 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center"><FileText size={15} className="text-red-600" /></div>
|
|
<div>
|
|
<h2 className="text-sm font-black text-gray-800 uppercase">Modelos de Receita</h2>
|
|
<p className="text-[10px] text-gray-400 uppercase">{paciente.nome}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button onClick={() => { setModeloAtivo(null); setView('editor'); }}
|
|
className="flex items-center gap-1.5 px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-xs font-bold rounded-lg">
|
|
<Plus size={13} /> Novo Modelo
|
|
</button>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X size={18} /></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Sidebar especialidades */}
|
|
<div className="w-44 border-r border-gray-100 flex-shrink-0 overflow-y-auto bg-gray-50 p-2">
|
|
<p className="text-[9px] font-black text-gray-400 uppercase px-2 mb-2 tracking-wider">Especialidade</p>
|
|
<button onClick={() => setFiltroEsp('')}
|
|
className={`w-full text-left px-2.5 py-1.5 rounded-lg text-xs font-bold mb-0.5 transition-colors ${!filtroEsp ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100'}`}>
|
|
Todas
|
|
</button>
|
|
{especialidades.map(e => (
|
|
<button key={e.id} onClick={() => setFiltroEsp(e.id)}
|
|
className={`w-full text-left px-2.5 py-1.5 rounded-lg text-xs font-bold mb-0.5 transition-colors truncate ${filtroEsp === e.id ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100'}`}>
|
|
{e.nome}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Lista de modelos */}
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
<div className="p-3 border-b border-gray-100">
|
|
<div className="relative">
|
|
<Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
|
|
<input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar modelo..."
|
|
className="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-xs focus:ring-2 focus:ring-blue-100 outline-none" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
|
{loading && <div className="text-center py-8 text-xs text-gray-400">Carregando...</div>}
|
|
{!loading && filtrados.length === 0 && (
|
|
<div className="text-center py-10">
|
|
<ClipboardList size={28} className="text-gray-200 mx-auto mb-2" />
|
|
<p className="text-xs text-gray-400">Nenhum modelo encontrado</p>
|
|
<button onClick={() => { setModeloAtivo(null); setView('editor'); }}
|
|
className="mt-3 text-xs font-bold text-blue-600 hover:underline">+ Criar primeiro modelo</button>
|
|
</div>
|
|
)}
|
|
{filtrados.map(m => (
|
|
<div key={m.id} className="bg-white border border-gray-200 rounded-xl p-3 hover:border-blue-200 hover:shadow-sm transition-all group">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs font-black text-gray-800 uppercase truncate">{m.nome}</p>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
{m.especialidadeNome && <span className="text-[9px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded-full font-bold uppercase">{m.especialidadeNome}</span>}
|
|
<span className="text-[9px] text-gray-400">{m.items.length} medicamento{m.items.length !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
{m.instrucoes && <p className="text-[10px] text-gray-400 italic mt-1 truncate">{m.instrucoes}</p>}
|
|
</div>
|
|
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
|
|
<button onClick={() => { setPrintModelo(m); setView('print'); }}
|
|
title="Prescrever para este paciente"
|
|
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg"><Printer size={13} /></button>
|
|
<button onClick={() => { setModeloAtivo(m); setView('editor'); }}
|
|
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"><Pencil size={13} /></button>
|
|
<button onClick={() => handleDelete(m.id)}
|
|
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"><Trash2 size={13} /></button>
|
|
</div>
|
|
</div>
|
|
{m.items.length > 0 && (
|
|
<div className="mt-2 pt-2 border-t border-gray-50 space-y-0.5">
|
|
{m.items.slice(0, 3).map(it => (
|
|
<p key={it.id} className="text-[10px] text-gray-500 truncate">
|
|
• {it.medicamento} — {it.dose} {it.frequencia}
|
|
</p>
|
|
))}
|
|
{m.items.length > 3 && <p className="text-[10px] text-gray-400">+{m.items.length - 3} mais...</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{view === 'editor' && (
|
|
<ModeloEditor
|
|
modelo={modeloAtivo}
|
|
especialidades={especialidades}
|
|
onSave={m => { carregar(); setView('lista'); toast.success('MODELO SALVO!'); }}
|
|
onBack={() => setView('lista')}
|
|
/>
|
|
)}
|
|
|
|
{view === 'print' && printModelo && (
|
|
<PrintPreview
|
|
modelo={printModelo}
|
|
paciente={paciente}
|
|
dentista={dentistaPrincipal}
|
|
onClose={() => setView('lista')}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|