{ handleFiles(e.target.files); e.target.value = ""; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer" }} />

{fileError &&

{fileError}

}

setLinkText(e.target.value)} onKeyDown={e => e.key === "Enter" && addLink()} placeholder="O pega un enlace" />

{onDelete && ( )}

); } // ---------- Planes pendientes (backlog) ---------- function PlansView({ plans, setPlans, events, onEventsChange, participants }) { const [text, setText] = useState(""); const [date, setDate] = useState(""); const [pendingDelete, setPendingDelete] = useState(null); const add = () => { if (!text.trim()) return; const planId = uid(); let eventId = null; if (date) { eventId = uid(); onEventsChange(prev => [...prev, { id: eventId, date, endDate: "", title: text.trim(), time: "", participantIds: participants.map(p => p.id), repeat: "none", reminders: [], fromPlan: true, }]); } setPlans(prev => [{ id: planId, text: text.trim(), done: false, createdAt: Date.now(), date: date || null, eventId }, ...prev]); setText(""); setDate(""); }; const toggle = (id) => setPlans(prev => prev.map(p => p.id === id ? { ...p, done: !p.done } : p)); const confirmRemove = () => { const plan = pendingDelete; setPendingDelete(null); if (!plan) return; setPlans(prev => prev.filter(p => p.id !== plan.id)); if (plan.eventId) onEventsChange(prev => prev.filter(e => e.id !== plan.eventId)); }; const assignDate = (plan, newDate) => { if (!newDate) return; if (plan.eventId) { // Ya tenía fecha: solo se actualiza el evento existente onEventsChange(prev => prev.map(e => e.id === plan.eventId ? { ...e, date: newDate } : e)); setPlans(prev => prev.map(p => p.id === plan.id ? { ...p, date: newDate } : p)); } else { const eventId = uid(); onEventsChange(prev => [...prev, { id: eventId, date: newDate, endDate: "", title: plan.text, time: "", participantIds: participants.map(p => p.id), repeat: "none", reminders: [], fromPlan: true, }]); setPlans(prev => prev.map(p => p.id === plan.id ? { ...p, date: newDate, eventId } : p)); } }; const unassignDate = (plan) => { if (plan.eventId) onEventsChange(prev => prev.filter(e => e.id !== plan.eventId)); setPlans(prev => prev.map(p => p.id === plan.id ? { ...p, date: null, eventId: null } : p)); }; const pending = plans.filter(p => !p.done); const done = plans.filter(p => p.done); const PlanRow = ({ p, faded }) => { const [editingDate, setEditingDate] = useState(false); return (

{p.done ? toggle(p.id)} /> : toggle(p.id)} />} {p.text} setEditingDate(v => !v)} /> setPendingDelete(p)} />

{p.date && !editingDate && (

📅 {fromKey(p.date).getDate()} de {MESES[fromKey(p.date).getMonth()].toLowerCase()}

)} {editingDate && (

assignDate(p, e.target.value)} /> {p.date && ( )}

)}

); }; return (

setText(e.target.value)} onKeyDown={e => e.key === "Enter" && add()} placeholder="Una idea para hacer juntos..." />

setDate(e.target.value)} /> Opcional: si le pones fecha, se añade al calendario

{pending.length === 0 && done.length === 0 && ( )}

{pending.map(p => )}

{done.length > 0 && (

Ya hechos

{done.map(p => )}

)} {pendingDelete && ( setPendingDelete(null)} /> )}

); } // ---------- Cumpleaños y Onomástica (misma estructura, con o sin edad) ---------- function AnnualDatesView({ items, setItems, participants, events, onEventsChange, icon, groupTitle, emptyText }) { const [view, setView] = useState(items.length === 0 ? "anadir" : "lista"); // "lista" | "anadir" const [isOwn, setIsOwn] = useState(true); const participantsWithoutOwn = participants.filter(p => !items.some(b => b.isOwn && b.category === p.id)); const [ownParticipantId, setOwnParticipantId] = useState(participantsWithoutOwn[0]?.id || ""); const [name, setName] = useState(""); const [category, setCategory] = useState(participants[0]?.id || ""); const [birthMonth, setBirthMonth] = useState(0); const [birthDay, setBirthDay] = useState(1); const [ageInput, setAgeInput] = useState(""); const [pendingDelete, setPendingDelete] = useState(null); const [formError, setFormError] = useState(""); const daysInSelectedMonth = new Date(2000, birthMonth + 1, 0).getDate(); // 2000 es bisiesto: permite el 29 de febrero const dayOptions = Array.from({ length: daysInSelectedMonth }, (_, i) => i + 1); const add = () => { setFormError(""); if (isOwn) { // Cada participante solo puede tener un único cumpleaños propio if (items.some(b => b.isOwn && b.category === ownParticipantId)) { setFormError("Ese participante ya tiene su cumpleaños registrado."); return; } } const finalName = isOwn ? (participants.find(p => p.id === ownParticipantId)?.name || "").trim() : name.trim(); const finalCategory = isOwn ? ownParticipantId : category; if (!finalName || !finalCategory) return; const ageNum = parseInt(ageInput, 10); const hasAge = ageInput.trim() !== "" && !isNaN(ageNum); // Sin edad no se conoce el año real de nacimiento: se usa un año "desconocido" (no se muestra la edad) const birthYear = hasAge ? birthYearFromCurrentAge(birthMonth, birthDay, ageNum, new Date()) : UNKNOWN_BIRTH_YEAR; const finalDate = `${birthYear}-${pad(birthMonth + 1)}-${pad(birthDay)}`; const birthdayId = uid(); const eventId = uid(); const eventParticipantIds = finalCategory === "ambos" ? participants.map(p => p.id) : [finalCategory]; // Se añade también al calendario como evento anual recurrente, con recordatorios por defecto: // una semana antes, un día antes, y el mismo día a las 9:00 (la hora se fija a las 9am para que // el recordatorio "en el momento" caiga esa hora). onEventsChange(prev => [...prev, { id: eventId, date: finalDate, endDate: "", title: `Cumpleaños de ${finalName}`, time: "09:00", participantIds: eventParticipantIds, repeat: "yearly", reminders: [10080, 1440, 0], fromBirthday: true, }]); setItems(prev => [...prev, { id: birthdayId, name: finalName, date: finalDate, category: finalCategory, isOwn, eventId }]); setName(""); setAgeInput(""); }; const confirmRemove = () => { const item = pendingDelete; setPendingDelete(null); if (!item) return; setItems(prev => prev.filter(b => b.id !== item.id)); if (item.eventId) onEventsChange(prev => prev.filter(e => e.id !== item.eventId)); }; const today = new Date(); const enrich = (list) => list .map(b => ({ ...b, ...nextBirthdayInfo(b.date, today), knownAge: fromKey(b.date).getFullYear() !== UNKNOWN_BIRTH_YEAR })) .sort((a, b) => a.diff - b.diff); // Dos listas totalmente independientes: cumpleaños propios de los participantes, y de sus amigos/familia const ownItems = enrich(items.filter(b => b.isOwn)); const friendGroups = [ ...participants.map(p => ({ key: p.id, label: `Amigos y familia de ${p.name}`, items: enrich(items.filter(b => !b.isOwn && b.category === p.id)) })), { key: "ambos", label: "Amigos y familia compartidos", items: enrich(items.filter(b => !b.isOwn && b.category === "ambos")) }, ]; const BirthdayRow = ({ b }) => (

{b.isOwn && "🎂 "}{b.name}

{fromKey(b.date).getDate()} de {MESES[fromKey(b.date).getMonth()].toLowerCase()}{b.knownAge ? ` · cumple ${b.age}` : ""}

{b.diff === 0 ? "¡Hoy!" : b.diff}

{b.diff !== 0 &&

días

} setPendingDelete(b)} />

); return (

{view === "anadir" && (

{participants.length === 0 && (

No hay participantes en este calendario. Ve a Ajustes → Participantes para añadirlos.

)} {isOwn ? ( participantsWithoutOwn.length === 0 ? (

Todos los participantes ya tienen su cumpleaños registrado.

) : (

{participantsWithoutOwn.map(p => ( ))}

) ) : ( <> setName(e.target.value)} placeholder="Nombre del amigo o familiar" />

¿De quién es amigo/familiar?

{participants.map(p => ( ))}

)} {(!isOwn || participantsWithoutOwn.length > 0) && ( <>

Día y mes de nacimiento (se repite cada año)

setAgeInput(e.target.value)} placeholder="Edad" />

La edad es opcional: si la pones, calculamos el año de nacimiento y podremos mostrar cuántos cumple.

)} {formError &&

{formError}

}

)} {view === "lista" && ( <> {items.length === 0 && ( )} {/* Lista independiente: cumpleaños propios de los participantes */} {ownItems.length > 0 && (

Cumpleaños de los participantes

{ownItems.map(b => )}

)} {/* Lista independiente: cumpleaños de amigos y familiares */} {friendGroups.some(g => g.items.length > 0) && (

Amigos y familia

{friendGroups.map(g => g.items.length > 0 && (

{g.label}

{g.items.map(b => )}

))}

)} )} {pendingDelete && ( setPendingDelete(null)} /> )}

); } // ---------- Onomástica: calendario alternativo con el santo de cada día ---------- // window.confirm() necesita permiso "allow-modals" del iframe para funcionar; dentro del sandbox del // artifact ese permiso no está, así que el navegador cancela el diálogo automáticamente (siempre da // por hecho que el usuario ha pulsado "Cancelar"). Por eso se usa un diálogo propio en su lugar. function ConfirmDialog({ message, confirmLabel, onConfirm, onCancel }) { return (

e.stopPropagation()}>

{message}

); } function EmptyState({ icon: Icon, text }) { return (

{text}

); } // ---------- Cartera: todos los adjuntos, agrupados por evento ---------- const CARTERA_SIN_EVENTO = "_sin_evento"; function CarteraView({ events, attachmentsByEvent, onAdd, onRemove, onOpenEvent }) { const [showForm, setShowForm] = useState(false); const [linkText, setLinkText] = useState(""); const [eventId, setEventId] = useState(CARTERA_SIN_EVENTO); const [fileError, setFileError] = useState(""); const sortedEvents = useMemo(() => events.slice().sort((a, b) => fromKey(b.date) - fromKey(a.date)), [events]); const handleFiles = (fileList) => { setFileError(""); const files = Array.from(fileList || []); files.forEach(file => { if (file.size > 4 * 1024 * 1024) { setFileError(`"${file.name}" pesa demasiado (máx. ~4 MB).`); return; } const reader = new FileReader(); reader.onload = () => { onAdd(eventId, { id: uid(), kind: "file", name: file.name, mime: file.type, dataUrl: reader.result, addedAt: Date.now() }); }; reader.readAsDataURL(file); }); }; const addLink = () => { if (!linkText.trim()) return; onAdd(eventId, { id: uid(), kind: "link", name: linkText.trim(), addedAt: Date.now() }); setLinkText(""); }; const groups = useMemo(() => { const evById = Object.fromEntries(events.map(e => [e.id, e])); return Object.entries(attachmentsByEvent) .map(([evId, list]) => ({ eventId: evId, event: evById[evId], items: (list || []).slice().sort((a, b) => b.addedAt - a.addedAt) })) .filter(g => g.items.length > 0) .sort((a, b) => { if (a.eventId === CARTERA_SIN_EVENTO) return -1; if (b.eventId === CARTERA_SIN_EVENTO) return 1; const da = a.event ? fromKey(a.event.date) : new Date(0); const db = b.event ? fromKey(b.event.date) : new Date(0); return db - da; }); }, [events, attachmentsByEvent]); const totalItems = groups.reduce((sum, g) => sum + g.items.length, 0); return (

{showForm && (

{ handleFiles(e.target.files); e.target.value = ""; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer" }} />

{fileError &&

{fileError}

}

setLinkText(e.target.value)} onKeyDown={e => e.key === "Enter" && addLink()} placeholder="O pega un enlace" />

)} {totalItems === 0 ? ( ) : (

{groups.map(g => { const isUnassigned = g.eventId === CARTERA_SIN_EVENTO; return (

g.event && onOpenEvent(g.event)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10, cursor: g.event ? "pointer" : "default" }}>

{isUnassigned ? "Sin evento asociado" : g.event ? (g.event.title || "(sin título)") : "Evento eliminado"}

{g.event && (

{fromKey(g.event.date).getDate()} de {MESES[fromKey(g.event.date).getMonth()].toLowerCase()} {g.event.endDate ? ` – ${fromKey(g.event.endDate).getDate()} de ${MESES[fromKey(g.event.endDate).getMonth()].toLowerCase()}` : ""}

)}

{g.event && }

{g.items.map(a => (

{a.kind === "link" ? : } {a.kind === "link" ? ( {a.name} ) : ( {a.name} )} onRemove(g.eventId, a.id)} />

))}

);})}

)}

); } function Field({ label, children, style }) { return (

{label}

{children}

); } function Overlay({ children, onClick }) { return (

{children}

); } const cardStyle = { background: "var(--surface)", borderRadius: 18, padding: 22, width: "100%", maxWidth: 420, margin: "0 auto 0", boxShadow: "var(--shadow)", }; const inputStyle = { width: "100%", padding: "9px 11px", borderRadius: 9, border: "1px solid var(--border)", background: "var(--field-bg)", color: "var(--text)", fontSize: 13.5, outline: "none", }; const primaryBtn = { background: "var(--accent)", color: "var(--accent-text)", border: "none", borderRadius: 10, padding: "11px 16px", fontSize: 13.5, fontWeight: 600, cursor: "pointer", }; const secondaryBtn = { background: "transparent", border: "1px solid var(--border)", borderRadius: 10, padding: "11px 16px", fontSize: 13.5, fontWeight: 600, cursor: "pointer", }; const iconBtn = { background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 9, width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--text)", flexShrink: 0, }; const fabStyle = { position: "fixed", right: 20, bottom: 24, width: 54, height: 54, borderRadius: "50%", background: "var(--accent)", color: "var(--accent-text)", border: "none", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 6px 18px rgba(0,0,0,0.3)", cursor: "pointer", zIndex: 30, }; // ---------- Arranque (añadido para ejecutar la app en el navegador) ---------- import { createRoot } from "react-dom/client"; const _rootEl = document.getElementById("root"); createRoot(_rootEl).render();