// Calendário — dinâmico, baseado na data real do sistema const WEEK_DAYS = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SÁB']; const WEEK_DAYS_FULL = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado']; const WEEK_DAYS_SHORT = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']; const MONTHS_PT = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']; const EVENT_TYPES = ['meeting','hearing','deadline','internal','signing']; const EVENT_LABELS = { meeting:'Reunião', hearing:'Audiência', deadline:'Prazo', internal:'Interno', signing:'Assinatura' }; const fmtHour = (iso) => { const d = new Date(iso); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }; const getMondayOf = (date) => { const d = new Date(date); const dow = d.getDay(); const diff = dow === 0 ? -6 : 1 - dow; d.setDate(d.getDate() + diff); d.setHours(0,0,0,0); return d; }; const getWeekDays = (monday) => { return Array.from({ length: 7 }, (_, i) => { const d = new Date(monday); d.setDate(monday.getDate() + i); return d; }); }; // ============================================================ // Modal de compartilhar disponibilidade // ============================================================ const AvailabilityModal = ({ onClose, allEvents }) => { const [selectedWeek, setSelectedWeek] = React.useState('current'); const [selected, setSelected] = React.useState(new Set()); const [copied, setCopied] = React.useState(false); const monday = React.useMemo(() => { const d = getMondayOf(new Date()); if (selectedWeek === 'next') d.setDate(d.getDate() + 7); return d; }, [selectedWeek]); const weekDays = getWeekDays(monday); const hours = Array.from({ length: 10 }, (_, i) => 8 + i); // 08:00–17:00 const isBusy = (day, hour) => { const slotStart = new Date(day); slotStart.setHours(hour, 0, 0, 0); const slotEnd = new Date(day); slotEnd.setHours(hour + 1, 0, 0, 0); return allEvents.some(e => { if (!e.starts_at || !e.ends_at) return false; return new Date(e.starts_at) < slotEnd && new Date(e.ends_at) > slotStart; }); }; const isPast = (day, hour) => { const slotEnd = new Date(day); slotEnd.setHours(hour + 1, 0, 0, 0); return slotEnd <= new Date(); }; const slotKey = (day, hour) => `${day.toISOString().slice(0,10)}-${hour}`; const toggleSlot = (day, hour) => { if (isBusy(day, hour) || isPast(day, hour)) return; const key = slotKey(day, hour); setSelected(prev => { const next = new Set(prev); next.has(key) ? next.delete(key) : next.add(key); return next; }); }; const generateText = () => { if (selected.size === 0) return ''; const lines = [...selected].sort().map(key => { const parts = key.split('-'); const hour = parseInt(parts[3]); const dateStr = parts.slice(0, 3).join('-'); const d = new Date(dateStr + 'T12:00:00'); const dayName = WEEK_DAYS_SHORT[d.getDay()]; const dateLabel = `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`; return `• ${dayName} (${dateLabel}) das ${String(hour).padStart(2,'0')}:00 às ${String(hour+1).padStart(2,'0')}:00`; }); return `Olá! Seguem minhas próximas disponibilidades:\n\n${lines.join('\n')}\n\nAlgum horário funciona pra você?`; }; const text = generateText(); const copy = () => { navigator.clipboard.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; // reset selection when week changes React.useEffect(() => { setSelected(new Set()); }, [selectedWeek]); const weekLabel = selectedWeek === 'current' ? 'Esta semana' : 'Próxima semana'; const weekEnd = weekDays[6]; const weekRange = `${monday.getDate()}/${monday.getMonth()+1} – ${weekEnd.getDate()}/${weekEnd.getMonth()+1}`; return (
e.stopPropagation()} style={{ maxWidth: 600, maxHeight: '88vh', display: 'flex', flexDirection: 'column' }}>

Compartilhar disponibilidade

{weekLabel} · {weekRange}
{/* Seletor de semana */}
Disponível
Selecionado
Ocupado
{/* Grid de horários */}
{/* Cabeçalho dos dias */}
{weekDays.map(d => (
{WEEK_DAYS_SHORT[d.getDay()]}
{d.getDate()}/{d.getMonth()+1}
))} {/* Linhas de horário */} {hours.map(h => (
{String(h).padStart(2,'0')}:00
{weekDays.map(d => { const busy = isBusy(d, h); const past = isPast(d, h); const key = slotKey(d, h); const sel = selected.has(key); const clickable = !busy && !past; return (
toggleSlot(d, h)} title={busy ? 'Ocupado' : past ? 'Horário passado' : sel ? 'Clique para desmarcar' : 'Clique para selecionar'} style={{ height: 34, borderRadius: 4, border: '1px solid', borderColor: busy ? 'rgba(194,37,62,.25)' : sel ? 'var(--octale-navy)' : 'var(--border)', background: busy ? 'rgba(194,37,62,.08)' : sel ? 'var(--octale-navy)' : past ? 'rgba(0,0,0,.03)' : 'rgba(23,23,15,.04)', cursor: clickable ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, color: busy ? '#C2253E' : sel ? '#fff' : 'transparent', transition: 'all .1s', userSelect: 'none', }} > {busy ? 'Ocupado' : sel ? '✓' : ''}
); })} ))}
{/* Texto gerado */} {selected.size > 0 ? (
Texto gerado ({selected.size} horário{selected.size !== 1 ? 's' : ''} selecionado{selected.size !== 1 ? 's' : ''})