, color: "var(--cdc-done)", label: "Terminadas hoy", val: counts.terminadasHoy },
];
return (
Resumen operativo
{rows.map(r => (
{r.icon}
{r.label}
{r.val}
))}
);
};
const WeekCalendar = ({ tasks, selectedDate, setSelectedDate }) => {
const startISO = "2026-05-19"; // Monday
const days = Array.from({ length: 7 }, (_, i) => {
const d = addDays(parseISO(startISO), i);
return d;
});
return (
{days.map(d => {
const iso = fmtISO(d);
const count = tasks.filter(t => t.due === iso).length;
const isSel = iso === selectedDate;
return (
);
})}
);
};
/* Calendar with Hoy / Semana / Mes views */
const WeekCalendarV2 = ({ tasks, selectedDate, setSelectedDate, view, setView }) => {
const countForDay = (iso) => tasks.filter(t => t.due === iso).length;
const sel = parseISO(selectedDate);
// Navigation arrows: prev/next per current view granularity
const stepBy = (mult) => {
let next = new Date(sel);
if (view === "hoy") next.setDate(next.getDate() + mult);
if (view === "semana") next.setDate(next.getDate() + 7 * mult);
if (view === "mes") next.setMonth(next.getMonth() + mult);
setSelectedDate(fmtISO(next));
};
return (
<>
{view === "hoy" && "Calendario · Día"}
{view === "semana" && "Calendario semanal"}
{view === "mes" && `Calendario · ${MESES_LARGO[sel.getMonth()][0].toUpperCase() + MESES_LARGO[sel.getMonth()].slice(1)} ${sel.getFullYear()}`}
{view === "hoy" && }
{view === "semana" && }
{view === "mes" && }
);
};
const CalendarDayHero = ({ date, countForDay }) => {
const d = parseISO(date);
const count = countForDay(date);
const isToday = date === TODAY_ISO;
const isBiz = isBusinessDay(d);
return (
{DOW_SHORT[d.getDay()]}
{d.getDate()}
{MESES_CORTO[d.getMonth()]}
{isToday ? "Hoy" : fmtLongDate(date)}
{count} tarea{count === 1 ? "" : "s"} programada{count === 1 ? "" : "s"}
{!isBiz && · {isWeekend(d) ? "Fin de semana" : "Feriado"}}
);
};
const CalendarWeekStrip = ({ selectedDate, setSelectedDate, countForDay }) => {
// Show the week containing selectedDate (Monday-anchored)
const sel = parseISO(selectedDate);
const dow = sel.getDay(); // 0=Sun ... 6=Sat
const offsetToMonday = dow === 0 ? -6 : 1 - dow;
const weekStart = addDays(sel, offsetToMonday);
const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
return (
{days.map(d => {
const iso = fmtISO(d);
const count = countForDay(iso);
const isSel = iso === selectedDate;
return (
);
})}
);
};
const CalendarMonthGrid = ({ selectedDate, setSelectedDate, countForDay }) => {
const sel = parseISO(selectedDate);
const year = sel.getFullYear();
const month = sel.getMonth();
const firstOfMonth = new Date(year, month, 1);
const dowFirst = firstOfMonth.getDay(); // 0=Sun ... 6=Sat
// Anchor on Monday: shift -1 (Sun → 6, Mon → 0, Tue → 1, ...)
const offsetToMonday = (dowFirst === 0 ? 6 : dowFirst - 1);
const gridStart = addDays(firstOfMonth, -offsetToMonday);
// Render 6 weeks × 7 days = 42 cells
const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
return (
{["LUN","MAR","MIÉ","JUE","VIE","SÁB","DOM"].map(l => (
{l}
))}
{cells.map((d, i) => {
const iso = fmtISO(d);
const inMonth = d.getMonth() === month;
const count = countForDay(iso);
const isToday = iso === TODAY_ISO;
const isSel = iso === selectedDate;
const weekendDay = isWeekend(d);
return (
);
})}
);
};
/* Task table grouped by area */
const TABLE_GROUP_ORDER = ["mant", "amallaves", "cocina", "bar", "yate", "admin", "gerencia", "remod"];
const TaskTable = ({ tasks, onSelect, selectedId, onToggle, canEditFn }) => {
// Group by area, in the canonical table order (matches the reference dashboard)
const grouped = TABLE_GROUP_ORDER
.map(id => ({ area: AREA_BY_ID[id], items: tasks.filter(t => t.area === id) }))
.filter(g => g.area && g.items.length > 0);
// If no rows would render, show empty state instead of empty table
if (grouped.length === 0) {
return (
Sin tareas programadas para este día.
);
}
return (
|
Tarea |
Área |
Asignado a |
Vence |
Estado |
Prioridad |
{grouped.map(g => (
|
{g.area.label}
{g.items.length}
|
{g.items.map(t => {
const done = t.status === "terminada";
return (
onSelect(t.id)}
>
| onToggle(t.id)} /> |
{t.title}
{t.attachments > 0 && (
{t.attachments}
)}
|
|
|
{fmtShortDate(t.due)} |
|
|
);
})}
))}
);
};
const CentroDeMando = ({ tasks, onSelect, selectedId, onToggle, canEditFn }) => {
const [selectedDate, setSelectedDate] = React.useState(TODAY_ISO);
const [view, setView] = React.useState("semana");
const urgentTasks = tasks.filter(t => t.status === "vencida" || t.status === "urgente").slice(0, 3);
return (
Vencidas / Urgentes
{urgentTasks.map(t => (
))}
t.due === selectedDate)}
onSelect={onSelect}
selectedId={selectedId}
onToggle={onToggle}
canEditFn={canEditFn}
/>
);
};
Object.assign(window, { CentroDeMando });