+ {DAY_KEYS.map((dayKey, idx) => {
+ const slots = (byDay.get(idx) ?? []).sort(
+ (a, b) => MEAL_ORDER.indexOf(a.meal) - MEAL_ORDER.indexOf(b.meal),
+ );
+ const dayKcal = slots.reduce((sum, s) => sum + (s.selected?.kcal ?? 0), 0);
+ return (
+
+
+
+ {t(`days.${dayKey}`)}
+
+
+ {t('dayTotal', { kcal: Math.round(dayKcal) })}
+
+
+
+ {slots.map((slot) => (
+
+ ))}
+
+
+ );
+ })}
+
+ );
+}
+
+function SlotCard({ slot }: { slot: PlanSlot }) {
+ const t = useTranslations('Plan');
+ const [open, setOpen] = useState(false);
+ const [pending, startTransition] = useTransition();
+
+ function swap(recipeId: string) {
+ startTransition(async () => {
+ await swapSlotRecipe(slot.id, recipeId);
+ setOpen(false);
+ });
+ }
+
+ return (
+
+
+ {t(`meals.${slot.meal}`)}
+
+
+ {slot.selected?.name ?? t('noRecipe')}
+
+ {slot.selected ? (
+ {Math.round(slot.selected.kcal)} kcal
+ ) : null}
+ {slot.alternatives.length > 0 ? (
+
+
+ {open ? (
+
+ {slot.alternatives.map((alt) => (
+ -
+
+ {alt.name}{' '}
+ ({Math.round(alt.kcal)} kcal)
+
+
+
+ ))}
+
+ ) : null}
+
+ ) : null}
+
+ );
+}