// Meal plan flow
// 1. PlanMealModal — pick a finish date+time
// 2. MealPlanPage — combined timeline + per-recipe tabs
const { useState, useMemo } = React;
// ─────────────────────────────────────────────────────────────
// PlanMealModal — entry point. Asks "when do you want this done by"
// ─────────────────────────────────────────────────────────────
function PlanMealModal({ open, onClose, recipes, onConfirm }) {
// Default = today @ 6pm
const [finishTime, setFinishTime] = useState(() => {
const d = new Date(); d.setHours(18, 0, 0, 0); return d;
});
const dateStr = `${finishTime.getFullYear()}-${String(finishTime.getMonth() + 1).padStart(2, "0")}-${String(finishTime.getDate()).padStart(2, "0")}`;
const timeStr = `${String(finishTime.getHours()).padStart(2, "0")}:${String(finishTime.getMinutes()).padStart(2, "0")}`;
const updateDate = (s) => {
const [y, m, d] = s.split("-").map(Number);
const nx = new Date(finishTime); nx.setFullYear(y, m - 1, d);
setFinishTime(nx);
};
const updateTime = (s) => {
const [h, m] = s.split(":").map(Number);
const nx = new Date(finishTime); nx.setHours(h, m, 0, 0);
setFinishTime(nx);
};
const preset = (label, h, m, dayOffset = 0) => {
const d = new Date(); d.setDate(d.getDate() + dayOffset); d.setHours(h, m, 0, 0);
setFinishTime(d);
};
// Longest individual recipe = the earliest "must start by"
const longest = recipes.reduce((s, r) => Math.max(s, r.total), 0);
const startByDate = new Date(finishTime.getTime() - longest * 60000);
return (
AI staggers prep so nothing gets cold.
}
>
updateDate(e.target.value)} />
updateTime(e.target.value)} />
{recipes.map(r => (
{r.title}
by {r.author}
{fmtDuration(r.total)}
))}
You'll start at
{fmtTime(startByDate)}
And eat at
{fmtTime(finishTime)}
);
}
// ─────────────────────────────────────────────────────────────
// MealPlanPage — combined timeline + per-recipe tabs
// ─────────────────────────────────────────────────────────────
const RECIPE_COLORS = ["#b04a2a", "#6e7a3a", "#3a5a6a", "#d68a2a", "#8a3a5a"];
function MealPlanPage({ recipes, finishTime, onClose, onCookMode, onShop }) {
const [tab, setTab] = useState("combined");
// Each recipe gets its own back-scheduled timeline
const perRecipe = useMemo(() => {
return recipes.map((r, ri) => {
const { schedule, startTime } = scheduleForFinish(r.steps, finishTime);
return {
recipe: r, idx: ri, color: RECIPE_COLORS[ri % RECIPE_COLORS.length],
schedule, startTime,
};
});
}, [recipes, finishTime]);
// Combined timeline = all steps from all recipes, interleaved chronologically
const combined = useMemo(() => {
const flat = [];
perRecipe.forEach(({ recipe, idx, color, schedule }) => {
recipe.steps.forEach((s, si) => {
flat.push({
ri: idx,
recipe,
color,
step: s,
si,
stepIdx: si + 1,
start: schedule[si].start,
end: schedule[si].end,
});
});
});
flat.sort((a, b) => a.start - b.start);
return flat;
}, [perRecipe]);
// The single earliest start time across all recipes
const earliestStart = combined.length ? combined[0].start : finishTime;
// Group combined into time-buckets for cleaner display (15-min granularity)
const grouped = useMemo(() => {
const out = [];
let lastKey = "";
for (const e of combined) {
const key = fmtTime(e.start);
if (key !== lastKey) {
out.push({ key, time: e.start, items: [] });
lastKey = key;
}
out[out.length - 1].items.push(e);
}
return out;
}, [combined]);
const totalTime = (finishTime - earliestStart) / 60000;
return (
r.title).join(" + ")}`}>
Tonight's plan
{recipes.map(r => r.title).join(" + ")}
{recipes.length} {recipes.length === 1 ? "dish" : "dishes"} · about {fmtDuration(totalTime)} of cooking · staggered so everything lands at {fmtTime(finishTime)}.