/* global React */ const { useState: useStateApp, useMemo: useMemoApp, useEffect: useEffectApp } = React; // ============================================================ // Header global — logo + radar de carga + navegação // ============================================================ function HeaderCarga({ blocos, weekLabel, onPrev, onNext, onToday, hospitais }) { const total = window.calcCargaTotal(blocos); const cls = window.classifyCarga(total); const cadeias = window.calcCadeias(blocos); const max = 80; const pct = Math.min((total / max) * 100, 100); const totalFmt = total.toFixed(total % 1 ? 1 : 0); // Total $ da semana (só se algum hospital tem remuneração ativa) const remuSemana = window.calcRemuneracaoPeriodo ? window.calcRemuneracaoPeriodo(blocos, hospitais) : null; const mostraDinheiro = remuSemana && remuSemana.totalBruto > 0; const radarColor = cls.zone === 'ok' ? 'var(--ok)' : cls.zone === 'warn' ? 'var(--warn)' : 'var(--err)'; const bgZone = cls.zone === 'ok' ? 'var(--ok-bg)' : cls.zone === 'warn' ? 'var(--warn-bg)' : 'var(--err-bg)'; // Mostra alerta inline só em warn/err — em ok, header fica numa linha só const mostrarAlerta = cls.zone !== 'ok'; const cadeiaInfo = cadeias.length > 0 ? (() => { const maior = Math.round(Math.max(...cadeias.map(c => c.horas))); return cadeias.length === 1 ? `${maior}h contínuas sem descanso` : `${cadeias.length} blocos sem descanso (maior ${maior}h)`; })() : null; return (
{/* Responsive: em desktop fica 3-col, em mobile (<720px) stacka 2 linhas */}
{/* Logo + label da semana — coluna estreita */}

Colo Ritmo

pediatria
{weekLabel}
{/* Carga semanal — número compacto + barra inline */}
{totalFmt} h esta semana {/* Barra inline */}
{cls.label} {mostraDinheiro && ( {window.fmtBRL(remuSemana.totalLiquido !== remuSemana.totalBruto ? remuSemana.totalLiquido : remuSemana.totalBruto)} )}
{/* Linha de alerta — só se warn ou err. Escondida em mobile (badge já informa) */} {mostrarAlerta && (

{cls.sub}{cadeiaInfo ? ` · ${cadeiaInfo}` : ''}

)}
{/* Navegação compacta */}
); } function IconBtn({ children, onClick, ...rest }) { return ( ); } // ============================================================ // Tabs simples para alternar entre views // ============================================================ function Tabs({ value, onChange, options }) { return (
{options.map(opt => { const active = String(value) === String(opt.id); return ( ); })}
); } // ============================================================ // FAB de adicionar plantão + modal // ============================================================ function AddBlocoFAB({ onAdd, onAddRecorrencia, hospitais, dataDefault, blocosTodos }) { const HOSPS = hospitais || window.HOSPITAIS; const [open, setOpen] = useStateApp(false); const [tipo, setTipo] = useStateApp('plantao'); // plantao | sono | bloqueio const dataInicial = dataDefault || window.HOJE_ISO; const [form, setForm] = useStateApp({ hospitalId: HOSPS[0]?.id || 1, data: dataInicial, horaInicio: 7, duracao: 12 }); // Recorrência (apenas plantão): 'nunca' | 'weekly' | 'biweekly' | 'monthly' const [repetir, setRepetir] = useStateApp('nunca'); // Default "até": 6 meses depois da data const ateDefault = useMemoApp(() => { const d = window.fromISO(dataInicial); d.setMonth(d.getMonth() + 6); return window.toISO(d); }, [dataInicial]); const [ate, setAte] = useStateApp(ateDefault); useEffectApp(() => { setForm(f => ({ ...f, data: dataInicial })); setAte(ateDefault); }, [dataInicial, ateDefault]); // Quando troca de tipo (sono/bloqueio), recorrência não se aplica useEffectApp(() => { if (tipo !== 'plantao') setRepetir('nunca'); }, [tipo]); const reset = () => { setOpen(false); setTipo('plantao'); setForm({ hospitalId: HOSPS[0]?.id || 1, data: dataInicial, horaInicio: 7, duracao: 12 }); setRepetir('nunca'); setAte(ateDefault); }; // Calcular qual semana do mês uma data cai (1-5) const semanaDoMes = (iso) => { const d = window.fromISO(iso); return Math.ceil(d.getDate() / 7); }; const submit = () => { if (tipo === 'plantao' && repetir !== 'nunca') { const rec = { id: `r${Date.now()}`, kind: repetir, diaSemana: window.diaSemanaBR(form.data), horaInicio: form.horaInicio, duracao: form.duracao, hospitalId: form.hospitalId, desde: form.data, ate: ate, }; if (repetir === 'monthly') rec.monthlyWeek = semanaDoMes(form.data); onAddRecorrencia && onAddRecorrencia(rec); } else { const novo = tipo === 'plantao' ? { tipo: 'plantao', ...form } : tipo === 'sono' ? { tipo: 'sono', data: form.data, horaInicio: form.horaInicio, duracao: form.duracao } : tipo === 'outros' ? { tipo: 'outros', data: form.data, horaInicio: form.horaInicio, duracao: form.duracao, motivo: form.motivo, categoria: form.categoria } : { tipo: 'bloqueio', data: form.data, horaInicio: form.horaInicio, duracao: form.duracao, motivo: form.motivo }; onAdd(novo); } reset(); }; // Live conflict detection (só pra ocorrência única — recorrência não checa) const projetado = tipo === 'plantao' ? { tipo: 'plantao', ...form } : { tipo, data: form.data, horaInicio: form.horaInicio, duracao: form.duracao }; const checaConflito = open && repetir === 'nunca'; const conflitos = checaConflito ? window.detectarConflitos(projetado, blocosTodos || []) : []; const cadeia = checaConflito && tipo === 'plantao' ? window.cadeiaSeAdicionar(projetado, blocosTodos || []) : null; // Preview textual da recorrência const previewRec = (() => { if (tipo !== 'plantao' || repetir === 'nunca') return null; const dow = window.diaSemanaBR(form.data); const dia = window.DIAS_COMPLETO[dow].toLowerCase(); if (repetir === 'weekly') return `Toda ${dia}`; if (repetir === 'biweekly') return `A cada 2 ${dia}s`; if (repetir === 'monthly') { const ord = ['1ª','2ª','3ª','4ª','5ª'][semanaDoMes(form.data) - 1]; return `${ord} ${dia} do mês`; } return null; })(); return ( <> {open && (
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(58, 46, 42, 0.3)', backdropFilter: 'blur(2px)', display: 'grid', placeItems: 'center', padding: 20, overflowY: 'auto', }}>
e.stopPropagation()} style={{ background: 'var(--bg)', borderRadius: 'var(--r-lg)', padding: 'var(--s-6)', width: '100%', maxWidth: 460, maxHeight: 'calc(100vh - 40px)', overflowY: 'auto', boxShadow: 'var(--shadow-lg)', }}>

{ tipo === 'plantao' ? 'Adicionar plantão' : tipo === 'sono' ? 'Sono protegido' : tipo === 'outros' ? 'Atividade pessoal' : 'Bloqueio' }

{tipo === 'plantao' && 'Cada bloco entra na soma da semana e nas cadeias contínuas.'} {tipo === 'sono' && 'Janela de descanso planejada — não soma na carga, mas protege na grade.'} {tipo === 'outros' && 'Personal, manicure, treino, reunião, consulta — atividades pessoais.'} {tipo === 'bloqueio' && 'Marca o horário como indisponível: feriado, evento familiar, descanso.'}

{/* Tabs de tipo */}
{[{id:'plantao',l:'Plantão'},{id:'sono',l:'Sono'},{id:'outros',l:'Outros'},{id:'bloqueio',l:'Bloqueio'}].map(t => { const active = tipo === t.id; return ( ); })}
{tipo === 'plantao' && (
)}
setForm({...form, data: e.target.value})}/>
{window.DIAS_COMPLETO[window.diaSemanaBR(form.data)]}
setForm({...form, horaInicio: parseInt(e.target.value) || 0})}/>
setForm({...form, duracao: parseInt(e.target.value) || 1})}/>
{tipo === 'bloqueio' && (
setForm({...form, motivo: e.target.value})} placeholder="ex.: aniversário Helena, viagem"/>
)} {tipo === 'outros' && ( <>
{[ { id: 'manicure', l: '💅 Manicure' }, { id: 'treino', l: '🏃 Treino' }, { id: 'reuniao', l: '👥 Reunião' }, { id: 'consulta', l: '🩺 Consulta' }, { id: 'familia', l: '👨‍👩‍👧 Família' }, { id: 'pessoal', l: '💆 Pessoal' }, ].map(c => { const active = form.categoria === c.id; return ( ); })}
setForm({...form, motivo: e.target.value})} placeholder="ex.: unha com Carla, treino funcional"/>
)} {tipo === 'plantao' && (
{[ {id:'nunca', l:'Nunca'}, {id:'weekly', l:'Toda semana'}, {id:'biweekly', l:'A cada 2 sem.'}, {id:'monthly', l:'Mensal'}, ].map(r => { const active = repetir === r.id; return ( ); })}
{repetir !== 'nunca' && (
{previewRec} · {window.fmtHora(form.horaInicio)} · {form.duracao}h
setAte(e.target.value)}/>
)}
)} {(conflitos.length > 0 || (cadeia && cadeia.horas > 24)) && ( )}
)} ); } // ============================================================ // Legenda compacta // ============================================================ function Legenda({ hospitais }) { const HOSPS = hospitais || window.HOSPITAIS; return (
{HOSPS.map(h => ( ))} Cadeia contínua > 24h
); } function LegItem({ color, label, stripe, dashed, wash }) { let style = { width: 14, height: 14, borderRadius: 4 }; if (stripe) { style.background = '#9BC2E7'; style.backgroundImage = 'repeating-linear-gradient(45deg, rgba(255,255,255,0.45) 0 3px, transparent 3px 7px)'; style.opacity = 0.7; } else if (dashed) { style.backgroundImage = 'repeating-linear-gradient(45deg, var(--colo-sand-50) 0 4px, transparent 4px 8px)'; style.border = '1px dashed var(--line-2)'; } else { style.background = color; if (wash) style.opacity = 0.6; } return ( {label} ); } // ============================================================ // TabsDropdown — agrupa opções secundárias num pop-over // Usado pra "Mais visualizações" e "Configurar" (gear) // ============================================================ function TabsDropdown({ label, options, currentId, onChange, iconOnly }) { const [open, setOpen] = useStateApp(false); const ref = React.useRef(null); useEffectApp(() => { const click = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; if (open) document.addEventListener('mousedown', click); return () => document.removeEventListener('mousedown', click); }, [open]); const ativo = options.some(o => o.id === currentId); const itemAtivo = options.find(o => o.id === currentId); return (
{open && (
{options.map(opt => { const sel = opt.id === currentId; return ( ); })}
)}
); } // ============================================================ // BannerConflitos — fica abaixo do header quando há conflitos // ============================================================ function BannerConflitos({ count, onResolver }) { if (!count) return null; return (
{count} conflito{count === 1 ? '' : 's'} de horário {count === 1 ? 'pendente' : 'pendentes'}
Plantões em horários sobrepostos. Toque pra resolver.
); } // ============================================================ // ModalConflitos — pop-up chamativo, 1x por sessão // ============================================================ function ModalConflitos({ count, onResolver, onDispensar }) { if (!count) return null; return (
e.stopPropagation()} role="dialog" aria-modal="true" style={{ background: 'var(--bg)', borderRadius: 'var(--r-xl)', padding: 'var(--s-7)', width: '100%', maxWidth: 480, boxShadow: 'var(--shadow-lg)', borderTop: '6px solid var(--err)', animation: 'scaleIn 280ms var(--ease)', textAlign: 'center', }}>

{count} conflito{count === 1 ? '' : 's'} na sua agenda

{count === 1 ? 'Você tem dois plantões marcados ao mesmo tempo. Vamos resolver agora?' : 'Você tem plantões em horários sobrepostos. Vamos resolver agora?'}

); } Object.assign(window, { HeaderCarga, Tabs, TabsDropdown, AddBlocoFAB, Legenda, BannerConflitos, ModalConflitos });