{SURVEYS.map(s => {
const pct = s.total ? Math.round((s.answered / s.total) * 100) : 0;
return (
{s.state === 'progreso' ? 'En curso' : 'Cerrada'}
{s.description}
Respuestas
{s.answered} / {s.total} · {pct}%
= 70 ? 'green' : pct >= 40 ? 'amber' : 'rose'}`} style={{ width: `${pct}%` }} />
);
})}
);
};
// ─── Modal: Editor de comunicado ─────────────────────────
const ComunicadoEditor = ({ onClose }) => {
const [stage, setStage] = _co_useState('edit'); // edit | preview
const [title, setTitle] = _co_useState('');
const [body, setBody] = _co_useState(`Buenas,
Queremos compartir una novedad importante:
`);
const [audience, setAudience] = _co_useState('empresa');
const [audienceFilter, setAF] = _co_useState('');
const [selectedPeople, setSelectedPeople] = _co_useState([]);
const [peopleQuery, setPeopleQuery] = _co_useState('');
const [schedule, setSchedule] = _co_useState('inmediata');
// Reference date: 2026-05-05 (proyecto)
const _CO_TODAY = new Date(2026, 4, 5);
const [schedDate, setSchedDate] = _co_useState(() => new Date(2026, 4, 8));
const [schedH, setSchedH] = _co_useState(9);
const [schedM, setSchedM] = _co_useState(0);
const [calMonth, setCalMonth] = _co_useState({ y: 2026, m: 4 });
const _CO_DOW = ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'];
const _CO_MONTHS = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
const _CO_MONTHS_S = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
const _coSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const _coIsBefore = (a, b) => {
const aa = new Date(a.getFullYear(), a.getMonth(), a.getDate());
const bb = new Date(b.getFullYear(), b.getMonth(), b.getDate());
return aa < bb;
};
const _coBuildCells = () => {
const first = new Date(calMonth.y, calMonth.m, 1);
const startDow = first.getDay();
const days = new Date(calMonth.y, calMonth.m + 1, 0).getDate();
const cells = [];
for (let i = 0; i < startDow; i++) cells.push(null);
for (let d = 1; d <= days; d++) cells.push(new Date(calMonth.y, calMonth.m, d));
while (cells.length % 7 !== 0) cells.push(null);
return cells;
};
const _coPrevMonth = () => setCalMonth(p => p.m === 0 ? { y: p.y - 1, m: 11 } : { y: p.y, m: p.m - 1 });
const _coNextMonth = () => setCalMonth(p => p.m === 11 ? { y: p.y + 1, m: 0 } : { y: p.y, m: p.m + 1 });
const _coApplyPreset = (kind) => {
if (kind === 'tomorrow') {
const d = new Date(_CO_TODAY); d.setDate(d.getDate() + 1);
setSchedDate(d); setSchedH(8); setSchedM(0); setCalMonth({ y: d.getFullYear(), m: d.getMonth() });
} else if (kind === 'monday') {
const d = new Date(_CO_TODAY);
const dow = d.getDay();
const delta = ((1 - dow + 7) % 7) || 7;
d.setDate(d.getDate() + delta);
setSchedDate(d); setSchedH(9); setSchedM(0); setCalMonth({ y: d.getFullYear(), m: d.getMonth() });
} else if (kind === 'friday') {
const d = new Date(_CO_TODAY);
const dow = d.getDay();
const delta = ((5 - dow + 7) % 7) || 7;
d.setDate(d.getDate() + delta);
setSchedDate(d); setSchedH(15); setSchedM(0); setCalMonth({ y: d.getFullYear(), m: d.getMonth() });
}
};
const _coPad = (n) => String(n).padStart(2, '0');
const scheduleAt = `${_CO_DOW[schedDate.getDay()]} ${schedDate.getDate()} ${_CO_MONTHS_S[schedDate.getMonth()]} ${schedDate.getFullYear()} · ${_coPad(schedH)}:${_coPad(schedM)}`;
const scheduleAtShort = `${_coPad(schedDate.getDate())}/${_coPad(schedDate.getMonth() + 1)}/${schedDate.getFullYear()} ${_coPad(schedH)}:${_coPad(schedM)}`;
const CO_PEOPLE = [
{ id: 'p1', name: 'Carolina Restrepo Vélez', role: 'Coord. Calidad', site: 'Cali', initials: 'CR', color: 'navy' },
{ id: 'p2', name: 'Andrés Mejía Cardona', role: 'Operario de Clasificación', site: 'Cali', initials: 'AM', color: 'navy' },
{ id: 'p3', name: 'Luisa Gómez Henao', role: 'Op. Aprovechamiento', site: 'Cali', initials: 'LG', color: 'rose' },
{ id: 'p4', name: 'Juan Ramírez Ospina', role: 'Aux. Calidad', site: 'Barranquilla', initials: 'JR', color: 'navy' },
{ id: 'p5', name: 'Sofía Osorio Bedoya', role: 'Coord. Comunicaciones', site: 'Bogotá', initials: 'SO', color: 'rose' },
{ id: 'p6', name: 'Camilo Vargas Toro', role: 'Operario de Clasificación', site: 'Cali', initials: 'CV', color: 'navy' },
{ id: 'p7', name: 'María Fernanda Ríos', role: 'Op. Aprovechamiento', site: 'Cali', initials: 'MF', color: 'rose' },
{ id: 'p8', name: 'Jorge Patiño Marín', role: 'Conductor', site: 'Barranquilla', initials: 'JP', color: 'navy' },
{ id: 'p9', name: 'Paula Vélez Castaño', role: 'Téc. Mantenimiento', site: 'Cali', initials: 'PV', color: 'rose' },
{ id: 'p10', name: 'Diego Tabares Quintero', role: 'Aux. Aprovechamiento', site: 'Cali', initials: 'DT', color: 'navy' },
{ id: 'p11', name: 'Nicolás Cardona Salazar', role: 'Conductor', site: 'Barranquilla', initials: 'NC', color: 'navy' },
{ id: 'p12', name: 'Valentina Salgado Pérez', role: 'Líder de Aprovechamiento', site: 'Cali', initials: 'VS', color: 'rose' },
];
const togglePerson = (id) => setSelectedPeople(prev =>
prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
);
React.useEffect(() => {
document.body.style.overflow = 'hidden';
const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onEsc);
return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
}, []);
const audienceLabel = audience === 'empresa' ? 'Toda la empresa · 824 colaboradores'
: audience === 'area' ? `Área: ${audienceFilter || 'Operaciones'} · ~58 colaboradores`
: audience === 'cargo' ? `Cargo: ${audienceFilter || 'Operario de Clasificación'} · ~12 colaboradores`
: audience === 'sede' ? `Sede: ${audienceFilter || 'Cali'} · ~712 colaboradores`
: `Selección manual · ${selectedPeople.length} ${selectedPeople.length === 1 ? 'colaborador' : 'colaboradores'}`;
return (
{ if (e.target === e.currentTarget) onClose(); }}>
{stage === 'edit' ? 'Nuevo comunicado' : 'Vista previa antes de publicar'}
{stage === 'edit'
? 'Componlo, segmenta destinatarios y programa el envío. Puedes guardar como borrador en cualquier momento.'
: 'Así verán los destinatarios el comunicado. Si todo está bien, púbicalo o programa el envío.'
}