// home.jsx — Three Home layout variants for MamaFlow
// Variants:
// 'classic' — per brief, single list of all tasks
// 'focus' — hero "lo más importante" + collapsed rest
// 'time' — grouped by morning / afternoon / evening
function PillarsBar({ filter, setFilter, theme, onEdit, onSeeBalance, balanceOpen }) {
const ids = Object.keys(PILLARS);
const allActive = filter === 'all';
return (
{ids.map(id => {
const p = PILLARS[id];
const active = filter === id;
return (
);
})}
{onSeeBalance && (
)}
);
}
function SectionLabel({ children, theme, count }) {
return (
{children}
{count != null && (
{count}
)}
);
}
// ─────────────────────────────────────────────────────────────
// Classic layout
// ─────────────────────────────────────────────────────────────
function HomeClassic({ tasks, family, theme, density, mood, onToggle, onPostpone, onTaskClick, onAssigneeClick }) {
const [showDone, setShowDone] = React.useState(false);
const [showAll, setShowAll] = React.useState(false);
const moodObj = MOODS.find(m => m.id === mood) || MOODS[1];
const cap = moodObj.cap;
const today = tasks.filter(t => t.date === todayISO());
const todayPending = today.filter(t => !t.done);
const todayDone = today.filter(t => t.done);
// Mood cap: si pesado, fluyendo, etc., escondemos las que sobran.
const capped = !showAll && todayPending.length > cap;
const visible = capped ? todayPending.slice(0, cap) : todayPending;
const hidden = capped ? todayPending.slice(cap) : [];
const upcoming = tasks.filter(t => t.date > todayISO() && !t.done).slice(0, 4);
// Tareas "viejas" para soltar (pendientes, hoy o antes, no completadas, sin marcar reciente)
// Detectamos por id: las del seed son t1..t12. Usamos solo tareas con fecha <= hoy y no done; las > 3 días atrás serían candidatas, pero el seed solo cubre hoy/futuro. Como demo, marcamos como "vieja" la primera tarea de la lista si lleva varios días (proxy: id numérico bajo). Para una demo coherente, ofrecemos soltar manualmente desde detalle.
const renderRow = (t) => (
);
return (
<>
{capped && (
{moodObj.emoji}
Modo {moodObj.label.toLowerCase()} activo
{moodObj.cta} setShowAll(true)}>Ver todo de todos modos
)}
Hoy
{visible.map(renderRow)}
{todayPending.length === 0 && todayDone.length === 0 && (
)}
{capped && (
)}
{todayDone.length > 0 && (
{showDone && (
{todayDone.map(renderRow)}
)}
)}
{upcoming.length > 0 && !capped && (
<>
Próximos días
{upcoming.map(renderRow)}
)}
Desliza ← lista · → a mañana · toca para soltar sin culpa
);
}
// ─────────────────────────────────────────────────────────────
// Focus layout — hero task + chips for rest
// ─────────────────────────────────────────────────────────────
function HomeFocus({ tasks, family, theme, density, onToggle, onPostpone, onTaskClick, onAssigneeClick }) {
const today = tasks.filter(t => t.date === todayISO() && !t.done);
const hero = today[0];
const rest = today.slice(1);
const member = hero && family.find(m => m.id === hero.who);
const p = hero && PILLARS[hero.pillar];
return (
<>
{hero ? (
Lo más cercano
onTaskClick(hero)} style={{
background: theme.surface,
border: `1.5px solid ${p.border}`,
borderRadius: 18, padding: 18,
position: 'relative', overflow: 'hidden',
}}>
{hero.time && (
{fmtTime(hero.time)}
)}
{hero.title}
{member &&
}
) : (
)}
{rest.length > 0 && (
<>
También hoy
{rest.map(t => (
))}
)}
);
}
// ─────────────────────────────────────────────────────────────
// Time-grouped layout — Mañana / Tarde / Noche
// ─────────────────────────────────────────────────────────────
function HomeTime({ tasks, family, theme, density, onToggle, onPostpone, onTaskClick, onAssigneeClick }) {
const today = tasks.filter(t => t.date === todayISO());
const bucket = (t) => {
if (!t.time) return 'sin';
const h = parseInt(t.time.split(':')[0], 10);
if (h < 12) return 'manana';
if (h < 18) return 'tarde';
return 'noche';
};
const groups = [
{ id: 'manana', label: 'Mañana', emoji: '🌅' },
{ id: 'tarde', label: 'Tarde', emoji: '☀️' },
{ id: 'noche', label: 'Noche', emoji: '🌙' },
{ id: 'sin', label: 'Sin hora', emoji: '✦' },
];
const grouped = groups.map(g => ({ ...g, items: today.filter(t => bucket(t) === g.id) })).filter(g => g.items.length);
return (
<>
{grouped.map((g, gi) => (
{gi > 0 && }
{g.emoji}
{g.label}
{g.items.length}
{g.items.map(t => (
))}
))}
{grouped.length === 0 && (
)}
);
}
function EmptyState({ theme, text }) {
return (
{text}
);
}
// ─────────────────────────────────────────────────────────────
// Main Home wrapper
// ─────────────────────────────────────────────────────────────
function Home({ variant, tasks, family, profile, theme, density, mood, setMood,
pillarFilter, setPillarFilter,
tab, setTab,
onToggle, onPostpone, onTaskClick, onEditPillars, onSettings,
onQuickCreate, onAssigneeClick }) {
const [balanceOpen, setBalanceOpen] = React.useState(false);
const filtered = pillarFilter === 'all' ? tasks : tasks.filter(t => t.pillar === pillarFilter);
const todayPending = tasks.filter(t => t.date === todayISO() && !t.done).length;
const hour = new Date().getHours();
const timeOfDay = hour < 6 ? 'night'
: hour < 12 ? 'morning'
: hour < 18 ? 'afternoon'
: hour < 22 ? 'evening'
: 'night';
const headerBg = headerGradient(theme, false);
const greeting = (() => {
if (timeOfDay === 'morning') return 'Buenos días';
if (timeOfDay === 'afternoon') return 'Buenas tardes';
if (timeOfDay === 'evening') return 'Buenas noches';
return 'Hola';
})();
const subline = (() => {
const moodObj = MOODS.find(m => m.id === mood) || MOODS[1];
if (timeOfDay === 'night') {
return todayPending === 0 ? 'Día completo. Descansa 🌙' :
'Lo no urgente se va con el día. Sin culpa.';
}
return moodObj.tagline;
})();
const HomeVariant = { classic: HomeClassic, focus: HomeFocus, time: HomeTime }[variant] || HomeClassic;
// Pilar "Tú" sagrado: ¿cuántas tareas en pilar 'personal' hay hoy?
const tuToday = tasks.filter(t => t.pillar === 'personal' && t.date === todayISO()).length;
return (
{/* Header */}
{fmtDateLong(todayISO())}
{greeting}, {(profile && profile.name) || 'Valeria'} 👋
{subline}
{/* Mood se gestiona solo desde el check-in diario abajo;
aquí no lo repetimos para no saturar. */}
{/* View switcher */}
{/* QuickAdd + Pillars + Tasks */}
setMood(m)} />
setBalanceOpen(o => !o)}
balanceOpen={balanceOpen} />
{balanceOpen && pillarFilter === 'all' && (
)}
{/* Pilar "Tú" sagrado — alerta si llevas días sin nada para ti */}
{tuToday === 0 && pillarFilter === 'all' && (
💆♀️
Hoy no hay nada para ti
El pilar Tú lleva días en cero. ¿Bloqueamos 20 min de algo solo tuyo?
)}
{/* Affirmation */}
· MENOS, SIN CULPA ·
No estamos para hacer más. Estamos para soltar lo que no toca.