@burdenoff/microfe-mybodyshield 2026.512.1 → 2026.705.1

package/dist/mybodyshield/pages/programs/ProgramDetailPage.js

@@ -0,0 +1,628 @@
+import { useMyBodyShield as e } from "../../context/MyBodyShieldContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { formatDate as n, formatDuration as r, formatEnumLabel as i, formatMinutes as a, formatNumber as o, formatWeight as s } from "../../utils/formatters.js";
+import { StatusBadge as c } from "../../components/StatusBadge.js";
+import { ErrorView as ee, LoadingView as te, Section as ne } from "../../components/StateViews.js";
+import { EmptyState as l } from "../../components/EmptyState.js";
+import { IconChip as u, MUSCLE_META as d, WORKOUT_TYPE_META as f } from "../_shared/visuals.js";
+import "../../context/index.js";
+import { useMybAddExercise as re, useMybAddWorkout as ie, useMybArchiveProgram as ae, useMybProgram as oe, useMybTransitionProgram as se } from "../../hooks/useMyBodyShieldApi.js";
+import "../../hooks/index.js";
+import "../../components/index.js";
+import { useMemo as p, useState as m } from "react";
+import { Archive as ce, ArrowLeft as h, CheckCircle2 as le, Dumbbell as ue, Play as de, Plus as g } from "lucide-react";
+import { useParams as fe } from "react-router-dom";
+import { Fragment as pe, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Button as y, GlassCard as b, Input as x, Label as S, ResponsiveDialog as C, ResponsiveDialogContent as w, ResponsiveDialogDescription as T, ResponsiveDialogFooter as E, ResponsiveDialogHeader as D, ResponsiveDialogTitle as O, Select as k, SelectContent as A, SelectItem as j, SelectTrigger as M, SelectValue as N, Textarea as me } from "@burdenoff/fe-libs/ui";
+//#region src/mybodyshield/pages/programs/ProgramDetailPage.tsx
+var he = [
+	"STRENGTH",
+	"CARDIO",
+	"HIIT",
+	"MOBILITY",
+	"YOGA",
+	"RECOVERY"
+], ge = [
+	"CHEST",
+	"BACK",
+	"LEGS",
+	"SHOULDERS",
+	"ARMS",
+	"CORE",
+	"FULL_BODY"
+], P = (e) => {
+	let t = e.trim();
+	if (t === "") return null;
+	let n = Number(t);
+	return Number.isFinite(n) ? n : null;
+}, F = ({ children: e }) => /* @__PURE__ */ _("span", {
+	className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+	children: e
+}), I = ({ group: e }) => {
+	let t = d[e].tint;
+	return /* @__PURE__ */ _("span", {
+		className: "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+		style: {
+			backgroundColor: `color-mix(in srgb, ${t} 16%, transparent)`,
+			color: t
+		},
+		children: i(e)
+	});
+};
+function L({ id: e, value: t, onChange: n, options: r }) {
+	return /* @__PURE__ */ v(k, {
+		value: t,
+		onValueChange: (e) => n(e),
+		children: [/* @__PURE__ */ _(M, {
+			id: e,
+			children: /* @__PURE__ */ _(N, {})
+		}), /* @__PURE__ */ _(A, { children: r.map((e) => /* @__PURE__ */ _(j, {
+			value: e,
+			children: i(e)
+		}, e)) })]
+	});
+}
+var R = {
+	name: "",
+	type: "STRENGTH",
+	weekNumber: "1",
+	dayOfWeek: "1",
+	durationMin: ""
+}, z = {
+	name: "",
+	muscleGroup: "FULL_BODY",
+	sets: "",
+	reps: "",
+	targetWeight: "",
+	restSeconds: "",
+	instructions: ""
+};
+function B({ exercise: e }) {
+	return /* @__PURE__ */ v("div", {
+		className: "flex flex-col gap-2 py-3 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ v("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ v("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ _("p", {
+					className: "font-medium text-text-primary",
+					children: e.name
+				}), /* @__PURE__ */ _(I, { group: e.muscleGroup })]
+			}), e.instructions && /* @__PURE__ */ _("p", {
+				className: "mt-1 text-xs text-text-tertiary",
+				children: e.instructions
+			})]
+		}), /* @__PURE__ */ v("div", {
+			className: "flex shrink-0 items-center gap-4 text-sm tabular-nums text-text-secondary",
+			children: [/* @__PURE__ */ v("span", { children: [
+				o(e.sets),
+				"×",
+				o(e.reps),
+				" @",
+				" ",
+				s(e.targetWeight)
+			] }), /* @__PURE__ */ v("span", {
+				className: "text-text-tertiary",
+				children: ["Rest ", r(e.restSeconds)]
+			})]
+		})]
+	});
+}
+function _e({ workout: e, onAddExercise: t }) {
+	let n = f[e.type], r = n.icon, i = p(() => [...e.exercises ?? []].sort((e, t) => e.orderIndex - t.orderIndex), [e.exercises]);
+	return /* @__PURE__ */ v(b, {
+		treatment: "glass",
+		className: "p-5",
+		children: [/* @__PURE__ */ v("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: [/* @__PURE__ */ v("div", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ _(u, {
+					icon: /* @__PURE__ */ _(r, { className: "h-4 w-4" }),
+					tint: n.tint
+				}), /* @__PURE__ */ v("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ v("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ _("h3", {
+							className: "font-semibold text-text-primary",
+							children: e.name
+						}), /* @__PURE__ */ _(c, { status: e.type })]
+					}), /* @__PURE__ */ v("p", {
+						className: "mt-0.5 text-xs text-text-tertiary",
+						children: [
+							"Week ",
+							o(e.weekNumber),
+							" · Day ",
+							o(e.dayOfWeek),
+							" ·",
+							" ",
+							a(e.durationMin)
+						]
+					})]
+				})]
+			}), /* @__PURE__ */ v(y, {
+				variant: "outline",
+				size: "sm",
+				onClick: () => t(e.id),
+				children: [/* @__PURE__ */ _(g, { className: "mr-1 h-4 w-4" }), " Add exercise"]
+			})]
+		}), i.length === 0 ? /* @__PURE__ */ _("p", {
+			className: "mt-4 rounded-lg border border-dashed border-border-seam px-3 py-4 text-center text-sm text-text-tertiary",
+			children: "No exercises yet — add the first movement to this workout."
+		}) : /* @__PURE__ */ _("div", {
+			className: "mt-4 divide-y divide-border-seam/60",
+			children: i.map((e) => /* @__PURE__ */ _(B, { exercise: e }, e.id))
+		})]
+	});
+}
+function V() {
+	let { id: r } = fe(), { navigateTo: a } = e(), { data: s, isLoading: u, isError: d, refetch: f } = oe(r), k = se(), A = ae(), j = ie(), M = re(), [N, I] = m(null), [B, V] = m(!1), [H, U] = m(R), [W, G] = m(null), [K, q] = m(null), [J, Y] = m(z), [X, Z] = m(null), ve = p(() => [...s?.workouts ?? []].sort((e, t) => e.weekNumber - t.weekNumber || e.dayOfWeek - t.dayOfWeek || e.orderIndex - t.orderIndex), [s?.workouts]);
+	if (u) return /* @__PURE__ */ _(t, {
+		title: "Program",
+		children: /* @__PURE__ */ _(te, { label: "Loading program…" })
+	});
+	if (d) return /* @__PURE__ */ _(t, {
+		title: "Program",
+		children: /* @__PURE__ */ _(ee, {
+			message: "We couldn't load this program.",
+			onRetry: () => void f()
+		})
+	});
+	if (!s) return /* @__PURE__ */ _(t, {
+		title: "Program",
+		children: /* @__PURE__ */ _(l, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ _(ue, { className: "h-10 w-10" }),
+			title: "Program not found",
+			description: "This program may have been deleted or you don't have access to it.",
+			action: /* @__PURE__ */ v(y, {
+				variant: "outline",
+				onClick: () => a("programs"),
+				children: [/* @__PURE__ */ _(h, { className: "mr-1 h-4 w-4" }), " Back to programs"]
+			})
+		})
+	});
+	let Q = s.id, ye = async (e) => {
+		I(null);
+		try {
+			await k.mutateAsync({
+				id: Q,
+				status: e
+			});
+		} catch (e) {
+			I(e instanceof Error ? e.message : "Failed to update program status.");
+		}
+	}, be = async () => {
+		if (window.confirm("Archive this program? It will be moved out of your active library.")) {
+			I(null);
+			try {
+				await A.mutateAsync(Q), await f();
+			} catch (e) {
+				I(e instanceof Error ? e.message : "Failed to archive program.");
+			}
+		}
+	}, $ = () => {
+		U(R), G(null), V(!0);
+	}, xe = async () => {
+		if (!H.name.trim()) {
+			G("Workout name is required.");
+			return;
+		}
+		let e = {
+			programId: Q,
+			name: H.name.trim(),
+			type: H.type,
+			weekNumber: P(H.weekNumber),
+			dayOfWeek: P(H.dayOfWeek),
+			durationMin: P(H.durationMin)
+		};
+		try {
+			await j.mutateAsync(e), V(!1);
+		} catch (e) {
+			G(e instanceof Error ? e.message : "Failed to add workout.");
+		}
+	}, Se = (e) => {
+		Y(z), Z(null), q(e);
+	}, Ce = async () => {
+		if (!K) return;
+		if (!J.name.trim()) {
+			Z("Exercise name is required.");
+			return;
+		}
+		let e = {
+			workoutId: K,
+			name: J.name.trim(),
+			muscleGroup: J.muscleGroup,
+			sets: P(J.sets),
+			reps: P(J.reps),
+			targetWeight: P(J.targetWeight),
+			restSeconds: P(J.restSeconds),
+			instructions: J.instructions.trim() || null
+		};
+		try {
+			await M.mutateAsync(e), q(null);
+		} catch (e) {
+			Z(e instanceof Error ? e.message : "Failed to add exercise.");
+		}
+	};
+	return /* @__PURE__ */ v(t, {
+		title: s.name,
+		actions: /* @__PURE__ */ v(pe, { children: [
+			s.status === "DRAFT" && /* @__PURE__ */ v(y, {
+				onClick: () => void ye("ACTIVE"),
+				disabled: k.isPending,
+				children: [/* @__PURE__ */ _(de, { className: "mr-1 h-4 w-4" }), " Activate"]
+			}),
+			s.status === "ACTIVE" && /* @__PURE__ */ v(y, {
+				onClick: () => void ye("COMPLETED"),
+				disabled: k.isPending,
+				children: [/* @__PURE__ */ _(le, { className: "mr-1 h-4 w-4" }), " Complete"]
+			}),
+			s.status !== "ARCHIVED" && /* @__PURE__ */ v(y, {
+				variant: "outline",
+				onClick: () => void be(),
+				disabled: A.isPending,
+				children: [/* @__PURE__ */ _(ce, { className: "mr-1 h-4 w-4" }), " Archive"]
+			}),
+			/* @__PURE__ */ v(y, {
+				onClick: $,
+				children: [/* @__PURE__ */ _(g, { className: "mr-1 h-4 w-4" }), " Add workout"]
+			})
+		] }),
+		children: [
+			/* @__PURE__ */ v("button", {
+				type: "button",
+				onClick: () => a("programs"),
+				className: "mb-4 inline-flex items-center gap-1 text-sm font-medium text-accent hover:underline",
+				children: [/* @__PURE__ */ _(h, { className: "h-4 w-4" }), " All programs"]
+			}),
+			/* @__PURE__ */ v(b, {
+				treatment: "glass",
+				className: "p-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-start justify-between gap-4",
+					children: /* @__PURE__ */ v("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ v("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ _("h2", {
+									className: "text-xl font-semibold text-text-primary",
+									children: s.name
+								}), /* @__PURE__ */ _(c, { status: s.status })]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "mt-3 flex flex-wrap gap-1.5",
+								children: [
+									/* @__PURE__ */ _(F, { children: i(s.phase) }),
+									/* @__PURE__ */ _(F, { children: i(s.level) }),
+									/* @__PURE__ */ _(F, { children: i(s.goalType) }),
+									/* @__PURE__ */ v(F, { children: [
+										o(s.weeks),
+										" wk × ",
+										o(s.daysPerWeek),
+										" days"
+									] })
+								]
+							}),
+							/* @__PURE__ */ v("p", {
+								className: "mt-3 text-sm text-text-secondary",
+								children: [
+									n(s.startDate),
+									" – ",
+									n(s.endDate)
+								]
+							}),
+							s.tags.length > 0 && /* @__PURE__ */ _("div", {
+								className: "mt-3 flex flex-wrap gap-1.5",
+								children: s.tags.map((e) => /* @__PURE__ */ v("span", {
+									className: "inline-flex items-center rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-xs font-medium text-text-secondary",
+									children: ["#", e]
+								}, e))
+							}),
+							s.description && /* @__PURE__ */ _("p", {
+								className: "mt-3 max-w-2xl text-sm text-text-secondary",
+								children: s.description
+							})
+						]
+					})
+				}), N && /* @__PURE__ */ _("p", {
+					className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+					children: N
+				})]
+			}),
+			/* @__PURE__ */ _(ne, {
+				title: "Workouts",
+				description: "Sessions in this block, ordered by week, day & sequence.",
+				children: ve.length === 0 ? /* @__PURE__ */ _(l, {
+					illustration: "empty-data",
+					icon: /* @__PURE__ */ _(ue, { className: "h-10 w-10" }),
+					title: "No workouts yet",
+					description: "Add workouts to lay out the training week, then attach exercises to each one.",
+					action: /* @__PURE__ */ v(y, {
+						onClick: $,
+						children: [/* @__PURE__ */ _(g, { className: "mr-1 h-4 w-4" }), " Add workout"]
+					})
+				}) : /* @__PURE__ */ _("div", {
+					className: "space-y-4",
+					children: ve.map((e) => /* @__PURE__ */ _(_e, {
+						workout: e,
+						onAddExercise: Se
+					}, e.id))
+				})
+			}),
+			/* @__PURE__ */ _(C, {
+				open: B,
+				onOpenChange: V,
+				children: /* @__PURE__ */ v(w, {
+					className: "sm:max-w-lg",
+					children: [
+						/* @__PURE__ */ v(D, { children: [/* @__PURE__ */ _(O, { children: "Add workout" }), /* @__PURE__ */ _(T, { children: "Add a training session to this program. Attach exercises once it's created." })] }),
+						/* @__PURE__ */ v("div", {
+							className: "space-y-4 py-2",
+							children: [
+								W && /* @__PURE__ */ _("p", {
+									className: "rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+									children: W
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "space-y-1.5",
+									children: [/* @__PURE__ */ _(S, {
+										htmlFor: "myb-wk-name",
+										children: "Name"
+									}), /* @__PURE__ */ _(x, {
+										id: "myb-wk-name",
+										value: H.name,
+										onChange: (e) => U({
+											...H,
+											name: e.target.value
+										}),
+										placeholder: "e.g. Upper Body — Push"
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "space-y-1.5",
+									children: [/* @__PURE__ */ _(S, {
+										htmlFor: "myb-wk-type",
+										children: "Type"
+									}), /* @__PURE__ */ _(L, {
+										id: "myb-wk-type",
+										value: H.type,
+										onChange: (e) => U({
+											...H,
+											type: e
+										}),
+										options: he
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+									children: [
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-wk-week",
+												children: "Week"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-wk-week",
+												type: "number",
+												min: 1,
+												value: H.weekNumber,
+												onChange: (e) => U({
+													...H,
+													weekNumber: e.target.value
+												}),
+												placeholder: "1"
+											})]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-wk-day",
+												children: "Day"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-wk-day",
+												type: "number",
+												min: 1,
+												max: 7,
+												value: H.dayOfWeek,
+												onChange: (e) => U({
+													...H,
+													dayOfWeek: e.target.value
+												}),
+												placeholder: "1"
+											})]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-wk-dur",
+												children: "Duration (min)"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-wk-dur",
+												type: "number",
+												min: 0,
+												value: H.durationMin,
+												onChange: (e) => U({
+													...H,
+													durationMin: e.target.value
+												}),
+												placeholder: "60"
+											})]
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ v(E, { children: [/* @__PURE__ */ _(y, {
+							variant: "outline",
+							onClick: () => V(!1),
+							disabled: j.isPending,
+							children: "Cancel"
+						}), /* @__PURE__ */ _(y, {
+							onClick: () => void xe(),
+							disabled: j.isPending,
+							children: j.isPending ? "Adding…" : "Add workout"
+						})] })
+					]
+				})
+			}),
+			/* @__PURE__ */ _(C, {
+				open: K !== null,
+				onOpenChange: (e) => {
+					e || q(null);
+				},
+				children: /* @__PURE__ */ v(w, {
+					className: "sm:max-w-lg",
+					children: [
+						/* @__PURE__ */ v(D, { children: [/* @__PURE__ */ _(O, { children: "Add exercise" }), /* @__PURE__ */ _(T, { children: "Add a movement with its target sets, reps, load & rest." })] }),
+						/* @__PURE__ */ v("div", {
+							className: "space-y-4 py-2",
+							children: [
+								X && /* @__PURE__ */ _("p", {
+									className: "rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+									children: X
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "space-y-1.5",
+									children: [/* @__PURE__ */ _(S, {
+										htmlFor: "myb-ex-name",
+										children: "Name"
+									}), /* @__PURE__ */ _(x, {
+										id: "myb-ex-name",
+										value: J.name,
+										onChange: (e) => Y({
+											...J,
+											name: e.target.value
+										}),
+										placeholder: "e.g. Barbell Bench Press"
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "space-y-1.5",
+									children: [/* @__PURE__ */ _(S, {
+										htmlFor: "myb-ex-muscle",
+										children: "Muscle group"
+									}), /* @__PURE__ */ _(L, {
+										id: "myb-ex-muscle",
+										value: J.muscleGroup,
+										onChange: (e) => Y({
+											...J,
+											muscleGroup: e
+										}),
+										options: ge
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
+									children: [
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-ex-sets",
+												children: "Sets"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-ex-sets",
+												type: "number",
+												min: 0,
+												value: J.sets,
+												onChange: (e) => Y({
+													...J,
+													sets: e.target.value
+												}),
+												placeholder: "3"
+											})]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-ex-reps",
+												children: "Reps"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-ex-reps",
+												type: "number",
+												min: 0,
+												value: J.reps,
+												onChange: (e) => Y({
+													...J,
+													reps: e.target.value
+												}),
+												placeholder: "10"
+											})]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-ex-weight",
+												children: "Weight (kg)"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-ex-weight",
+												type: "number",
+												min: 0,
+												step: "0.5",
+												value: J.targetWeight,
+												onChange: (e) => Y({
+													...J,
+													targetWeight: e.target.value
+												}),
+												placeholder: "60"
+											})]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ _(S, {
+												htmlFor: "myb-ex-rest",
+												children: "Rest (sec)"
+											}), /* @__PURE__ */ _(x, {
+												id: "myb-ex-rest",
+												type: "number",
+												min: 0,
+												value: J.restSeconds,
+												onChange: (e) => Y({
+													...J,
+													restSeconds: e.target.value
+												}),
+												placeholder: "90"
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "space-y-1.5",
+									children: [/* @__PURE__ */ _(S, {
+										htmlFor: "myb-ex-instructions",
+										children: "Instructions"
+									}), /* @__PURE__ */ _(me, {
+										id: "myb-ex-instructions",
+										rows: 3,
+										value: J.instructions,
+										onChange: (e) => Y({
+											...J,
+											instructions: e.target.value
+										}),
+										placeholder: "Cues, tempo, form notes…"
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ v(E, { children: [/* @__PURE__ */ _(y, {
+							variant: "outline",
+							onClick: () => q(null),
+							disabled: M.isPending,
+							children: "Cancel"
+						}), /* @__PURE__ */ _(y, {
+							onClick: () => void Ce(),
+							disabled: M.isPending,
+							children: M.isPending ? "Adding…" : "Add exercise"
+						})] })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { V as ProgramDetailPage };
+
+//# sourceMappingURL=ProgramDetailPage.js.map