// Calendario corporativo — aggregates projects, tasks, POA milestones + custom events const { useState, useEffect, useMemo, useRef } = React; const EVENT_TYPES = { project: { label: "Proyecto", color: "var(--accent)", icon: "board" }, task: { label: "Tarea", color: "var(--info)", icon: "checkbox" }, meeting: { label: "Reunión", color: "#8b5cf6", icon: "users2" }, milestone: { label: "Hito", color: "var(--positive)", icon: "flame" }, audit: { label: "Auditoría", color: "var(--danger)", icon: "shield" }, training: { label: "Capacitación",color: "var(--warning)", icon: "people" }, demo: { label: "Demo", color: "#0ea5e9", icon: "spark" }, kickoff: { label: "Kick-off", color: "#f97316", icon: "flame" }, }; const MONTHS_ES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]; const WEEK_ES = ["Dom","Lun","Mar","Mié","Jue","Vie","Sáb"]; function CalendarPage({ session, deptScope, projects, setProjects, tasks, setTasks, events, setEvents, addAudit, showToast }) { const D = window.INDISA_DATA; const role = session.role; const readOnly = role === "viewer"; const effDept = role === "owner" ? deptScope : session.dept; const [cursor, setCursor] = useState({ year: 2026, month: 4 }); // May 2026 const [selDay, setSelDay] = useState(null); const [adding, setAdding] = useState(false); const [filter, setFilter] = useState({ kinds: Object.keys(EVENT_TYPES) }); const [showFilter, setShowFilter] = useState(false); const [deleteId, setDeleteId] = useState(null); // Build unified events from projects + tasks + POA + custom const allEvents = useMemo(() => { const out = []; // Projects const projList = effDept ? (projects[effDept] || []) : Object.values(projects).flat(); projList.forEach(p => out.push({ id: "p_" + p.id, type: "project", title: p.title, date: p.due, time: "", dept: p.dept, refId: p.id, refType: "project", })); // Tasks (tasks || []).filter(t => !effDept || t.department === effDept).forEach(t => out.push({ id: "t_" + t.id, type: "task", title: t.title, date: t.due_date, time: "", dept: t.department, refId: t.id, refType: "task", status: t.status, })); // Custom events (events || []).filter(e => !effDept || e.dept === effDept).forEach(e => out.push({ id: e.id, ...e, refType: "event", })); return out; }, [projects, tasks, events, effDept]); const filtered = allEvents.filter(e => filter.kinds.includes(e.type)); // Calendar grid const first = new Date(cursor.year, cursor.month, 1); const daysInMonth = new Date(cursor.year, cursor.month + 1, 0).getDate(); const startDayOfWeek = first.getDay(); const cells = []; for (let i = 0; i < startDayOfWeek; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); function eventsForDay(d) { if (!d) return []; const ds = `${cursor.year}-${String(cursor.month+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`; return filtered.filter(e => e.date === ds); } function nextMonth() { setCursor(c => c.month === 11 ? { year: c.year + 1, month: 0 } : { year: c.year, month: c.month + 1 }); } function prevMonth() { setCursor(c => c.month === 0 ? { year: c.year - 1, month: 11 } : { year: c.year, month: c.month - 1 }); } function today() { setCursor({ year: 2026, month: 4 }); } function createEvent(data) { const id = "e" + Math.random().toString(36).slice(2,6); setEvents(prev => [...prev, { id, ...data }]); addAudit({ action: `Evento creado: ${data.title}`, user: session.name, dept: data.dept, level: "success" }); showToast("Evento agregado al calendario"); setAdding(false); } // deleteId is now the full event object so we know its source function deleteEvent(ev) { if (!ev) return; if (ev.refType === "event") { setEvents(prev => prev.filter(e => e.id !== ev.refId && e.id !== ev.id)); addAudit({ action: `Evento eliminado: ${ev.title}`, user: session.name, dept: ev.dept || "all", level: "warn" }); showToast("Evento eliminado"); } else if (ev.refType === "project") { setProjects(prev => { const out = { ...prev }; for (const did of Object.keys(out)) out[did] = out[did].filter(p => p.id !== ev.refId); return out; }); addAudit({ action: `Proyecto eliminado desde calendario: ${ev.title}`, user: session.name, dept: ev.dept || "all", level: "warn" }); showToast("Proyecto eliminado"); } else if (ev.refType === "task") { setTasks(prev => prev.filter(t => t.id !== ev.refId)); addAudit({ action: `Tarea eliminada desde calendario: ${ev.title}`, user: session.name, dept: ev.dept || "all", level: "warn" }); showToast("Tarea eliminada"); } setDeleteId(null); setSelDay(null); } // Quick stats const thisMonth = filtered.filter(e => e.date && e.date.startsWith(`${cursor.year}-${String(cursor.month+1).padStart(2,"0")}`)); return (

Calendario

{effDept ? D.DEPT_BY_ID[effDept].name : "Vista global"} · {thisMonth.length} eventos este mes

{showFilter && (
Tipos de evento
{Object.entries(EVENT_TYPES).map(([k,v]) => ( ))}
)}
{readOnly && Solo lectura} {!readOnly && }
{/* Month nav */}
{MONTHS_ES[cursor.month]} {cursor.year}
{Object.entries(EVENT_TYPES).slice(0,5).map(([k,v]) => ( {v.label} ))}
{/* Calendar + side widgets */}
{WEEK_ES.map(d =>
{d}
)}
{cells.map((d, i) => { const evs = eventsForDay(d); const isToday = cursor.year === 2026 && cursor.month === 4 && d === 14; const dateStr = d ? `${cursor.year}-${String(cursor.month+1).padStart(2,"0")}-${String(d).padStart(2,"0")}` : null; return (
d && setSelDay({ d, evs, dateStr })} style={{ minHeight: 110, padding: 8, borderRight: ((i+1) % 7 !== 0) ? "1px solid var(--line)" : "none", borderBottom: i < cells.length - 7 ? "1px solid var(--line)" : "none", background: d ? "var(--panel)" : "var(--bg-1)", cursor: d ? "pointer" : "default", transition: "background .12s", position: "relative", }}> {d && ( <>
{d}
{evs.slice(0, 3).map(e => { const type = EVENT_TYPES[e.type] || EVENT_TYPES.meeting; return (
{e.time ? `${e.time.slice(0,5)} · ` : ""}{e.title}
); })} {evs.length > 3 &&
+{evs.length - 3} más
}
)}
); })}
{/* Side widgets */}
{filtered .filter(e => e.date) .filter(e => { const d = new Date(e.date); const now = new Date("2026-05-14"); return d >= now && d <= new Date(now.getTime() + 7*86400000); }) .sort((a,b) => a.date.localeCompare(b.date)) .slice(0, 6) .map(e => { const type = EVENT_TYPES[e.type] || EVENT_TYPES.meeting; return (
{e.title}
{e.date}{e.time ? " · " + e.time.slice(0,5) : ""}
{type.label}
); })}
{Object.entries(EVENT_TYPES).map(([k,v]) => { const count = thisMonth.filter(e => e.type === k).length; const max = Math.max(...Object.keys(EVENT_TYPES).map(kk => thisMonth.filter(e => e.type === kk).length), 1); return (
{v.label}
{count}
); })}
{filtered.filter(e => e.type === "audit" || e.type === "milestone") .sort((a,b) => (a.date||"").localeCompare(b.date||"")) .slice(0, 5).map(e => (
{e.title}
{e.date}
))} {filtered.filter(e => e.type === "audit" || e.type === "milestone").length === 0 &&
Sin hitos próximos
}
{selDay && (
setSelDay(null)}>
e.stopPropagation()}>
Eventos · {selDay.dateStr}
{selDay.evs.length === 0 ? (
No hay eventos este día.
) : (
{selDay.evs.map(e => { const type = EVENT_TYPES[e.type] || EVENT_TYPES.meeting; return (
{e.title}
{e.time ? e.time + " · " : ""}{type.label}{e.dept ? " · " + D.DEPT_BY_ID[e.dept]?.short : ""} {e.refType === "project" ? " · proyecto" : e.refType === "task" ? " · tarea" : ""}
{!readOnly && ( )}
); })}
)}
{!readOnly && }
)} {adding && setAdding(false)} onCreate={createEvent}/>} {deleteId && (
setDeleteId(null)}>
e.stopPropagation()}>
Eliminar {deleteId.refType === "project" ? "proyecto" : deleteId.refType === "task" ? "tarea" : "evento"}

¿Confirmas la eliminación de "{deleteId.title}"?

{deleteId.refType === "project" &&
Esto eliminará el proyecto completo del módulo de Proyectos.
} {deleteId.refType === "task" &&
Esto eliminará la tarea completa del módulo de Tareas.
}
)}
); } function NewEventModal({ session, effDept, initialDate, onClose, onCreate }) { const D = window.INDISA_DATA; const [title, setTitle] = useState(""); const [date, setDate] = useState(initialDate || "2026-05-20"); const [time, setTime] = useState("10:00"); const [type, setType] = useState("meeting"); const [dept, setDept] = useState(effDept || (session.dept || "gg")); function submit() { if (!title.trim()) return; onCreate({ title: title.trim(), date, time, type, dept }); } return (
e.stopPropagation()}>
Nuevo evento
setTitle(e.target.value)} autoFocus/>
setDate(e.target.value)}/>
setTime(e.target.value)}/>
{title || "Vista previa del evento"}
{date} · {time} · {EVENT_TYPES[type].label}
); } window.CalendarPage = CalendarPage;