npm - @burdenoff/microfe-atheletebridge - Versions diffs - 2026.705.2 → 2026.706.1 - Mend

@burdenoff/microfe-atheletebridge 2026.705.2 → 2026.706.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/atheletebridge/pages/sessions/SessionDetailPage.js CHANGED Viewed

@@ -1,173 +1,303 @@
 import { useAthleteBridge as e } from "../../context/AthleteBridgeContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
-import { StatusBadge as n } from "../../components/StatusBadge.js";
-import { SESSION_TYPE_LABELS as r } from "../../components/domain.js";
-import { formatDate as i, formatDuration as a } from "../../utils/formatters.js";
-import { ErrorState as o, LoadingState as s } from "../../components/LoadingState.js";
-import { useCancelSession as c, useCompleteSession as l, useConfirmSession as u, useSession as d } from "../../hooks/useAthleteBridgeApi.js";
+import { RatingStars as n } from "../../components/viz/RatingStars.js";
+import "../../components/viz/index.js";
+import { StatusBadge as r } from "../../components/StatusBadge.js";
+import { SESSION_TYPE_LABELS as i } from "../../components/domain.js";
+import { formatDate as a, formatDuration as ee } from "../../utils/formatters.js";
+import { UserAvatar as o } from "../../components/UserAvatar.js";
+import { ErrorState as s, LoadingState as te } from "../../components/LoadingState.js";
+import { useCancelSession as ne, useCompleteSession as c, useConfirmSession as l, useSession as u, useUserDirectory as d } from "../../hooks/useAthleteBridgeApi.js";
 import { FormField as f, fieldInputClass as p } from "../../components/form.js";
-import { safeExternalHref as m } from "../../utils/url.js";
-import { useState as h } from "react";
-import { ArrowLeft as g, CalendarClock as _, CheckCircle2 as v, Clock as y, Loader2 as b, MapPin as x, Star as S, Video as C, XCircle as w } from "lucide-react";
-import { useParams as T } from "react-router-dom";
+import { SessionStatusTimeline as m } from "../../components/SessionStatusTimeline.js";
+import { safeExternalHref as h } from "../../utils/url.js";
+import { useMemo as g, useState as _ } from "react";
+import { ArrowLeft as re, CalendarClock as ie, CheckCircle2 as v, Clock as y, ExternalLink as b, Loader2 as x, Mail as S, MapPin as C, Video as w, XCircle as T } from "lucide-react";
+import { useParams as ae } from "react-router-dom";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 import { EmphasisPanel as O, GlassCard as k, ResponsiveDialog as A, ResponsiveDialogContent as j, ResponsiveDialogFooter as M, ResponsiveDialogHeader as N, ResponsiveDialogTitle as P } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/sessions/SessionDetailPage.tsx
-function F() {
-	let { id: F } = T(), { navigateTo: I } = e(), L = d(F), R = u(), z = l(), B = c(), [V, H] = h(!1), [U, W] = h(""), [G, K] = h(""), [q, J] = h(null);
-	if (L.isLoading) return /* @__PURE__ */ E(t, {
+function F({ role: e, name: t, email: n, id: r }) {
+	let i = t?.trim() || `User ${r.slice(0, 6)}`;
+	return /* @__PURE__ */ D(k, {
+		treatment: "metric",
+		className: "p-4",
+		children: [
+			/* @__PURE__ */ E("p", {
+				className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+				children: e
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "mt-3 flex items-center gap-3",
+				children: [/* @__PURE__ */ E(o, {
+					name: t,
+					id: r,
+					size: "lg"
+				}), /* @__PURE__ */ D("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ E("p", {
+						className: "truncate text-sm font-semibold text-text-primary",
+						children: i
+					}), /* @__PURE__ */ E("p", {
+						className: "truncate text-xs text-text-secondary",
+						children: e
+					})]
+				})]
+			}),
+			n ? /* @__PURE__ */ D("a", {
+				href: `mailto:${n}`,
+				className: "mt-3 flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary hover:underline",
+				children: [/* @__PURE__ */ E(S, {
+					className: "h-3.5 w-3.5 shrink-0",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ E("span", {
+					className: "truncate",
+					children: n
+				})]
+			}) : null
+		]
+	});
+}
+function I() {
+	let { id: o } = ae(), { navigateTo: S } = e(), I = u(o), L = l(), R = c(), z = ne(), [B, V] = _(!1), [H, U] = _(""), [W, G] = _(0), [K, q] = _(null), J = d(g(() => I.data ? [I.data.coachId, I.data.athleteId] : [], [I.data]));
+	if (I.isLoading) return /* @__PURE__ */ E(t, {
 		title: "Session",
-		children: /* @__PURE__ */ E(s, { label: "Loading session…" })
+		children: /* @__PURE__ */ E(te, { label: "Loading session…" })
 	});
-	if (L.isError || !L.data) return /* @__PURE__ */ E(t, {
+	if (I.isError || !I.data) return /* @__PURE__ */ E(t, {
 		title: "Session",
-		children: /* @__PURE__ */ E(o, {
+		children: /* @__PURE__ */ E(s, {
 			title: "Session not found",
 			message: "This session does not exist or you do not have access to it.",
-			onRetry: () => I("/sessions")
+			onRetry: () => S("/sessions")
 		})
 	});
-	let Y = L.data, X = Y.status === "REQUESTED", Z = Y.status === "CONFIRMED", Q = Y.status === "REQUESTED" || Y.status === "CONFIRMED", $ = m(Y.meetingUrl);
+	let Y = I.data, X = Y.status === "REQUESTED", Z = Y.status === "CONFIRMED", Q = Y.status === "REQUESTED" || Y.status === "CONFIRMED", $ = h(Y.meetingUrl);
 	return /* @__PURE__ */ D(t, {
 		title: Y.title,
-		description: r[Y.type],
+		description: i[Y.type],
 		actions: /* @__PURE__ */ D("button", {
 			type: "button",
-			onClick: () => I("/sessions"),
+			onClick: () => S("/sessions"),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ E(g, { className: "h-4 w-4" }), " Back"]
+			children: [/* @__PURE__ */ E(re, { className: "h-4 w-4" }), " Back"]
 		}),
 		children: [
 			/* @__PURE__ */ D(k, {
 				treatment: "insight",
-				className: "mb-8 p-6",
+				className: "mb-6 p-5 sm:p-6",
+				children: [/* @__PURE__ */ D("div", {
+					className: "mb-5 flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ E("span", {
+						className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+						children: "Lifecycle"
+					}), /* @__PURE__ */ E(r, { status: Y.status })]
+				}), /* @__PURE__ */ E(m, {
+					status: Y.status,
+					createdAt: Y.createdAt,
+					completedAt: Y.completedAt
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
 				children: [
-					/* @__PURE__ */ E("div", {
-						className: "flex flex-wrap items-center gap-3",
-						children: /* @__PURE__ */ E(n, { status: Y.status })
+					/* @__PURE__ */ E(F, {
+						role: "Coach",
+						id: Y.coachId,
+						name: J.nameOf(Y.coachId),
+						email: J.emailOf(Y.coachId)
+					}),
+					/* @__PURE__ */ E(F, {
+						role: "Athlete",
+						id: Y.athleteId,
+						name: J.nameOf(Y.athleteId),
+						email: J.emailOf(Y.athleteId)
 					}),
-					/* @__PURE__ */ D("div", {
-						className: "mt-4 grid grid-cols-1 gap-3 text-sm text-text-secondary sm:grid-cols-2",
+					/* @__PURE__ */ D(k, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ E("p", {
+							className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+							children: "Schedule"
+						}), /* @__PURE__ */ D("div", {
+							className: "mt-3 space-y-2.5 text-sm text-text-primary",
+							children: [
+								/* @__PURE__ */ D("span", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ E(ie, {
+										className: "h-4 w-4 shrink-0 text-text-secondary",
+										"aria-hidden": "true"
+									}), a(Y.scheduledAt)]
+								}),
+								/* @__PURE__ */ D("span", {
+									className: "flex items-center gap-2 text-text-secondary",
+									children: [/* @__PURE__ */ E(y, {
+										className: "h-4 w-4 shrink-0",
+										"aria-hidden": "true"
+									}), ee(Y.durationMin)]
+								}),
+								Y.type === "IN_PERSON" && Y.location ? /* @__PURE__ */ D("span", {
+									className: "flex items-center gap-2 text-text-secondary",
+									children: [
+										/* @__PURE__ */ E(C, {
+											className: "h-4 w-4 shrink-0",
+											"aria-hidden": "true"
+										}),
+										" ",
+										Y.location
+									]
+								}) : null
+							]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+				children: [/* @__PURE__ */ E("div", {
+					className: "space-y-6",
+					children: /* @__PURE__ */ D(k, {
+						treatment: "glass",
+						className: "p-5 sm:p-6",
 						children: [
-							/* @__PURE__ */ D("span", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ E(_, { className: "h-4 w-4" }),
-									" ",
-									i(Y.scheduledAt)
-								]
-							}),
-							/* @__PURE__ */ D("span", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ E(y, { className: "h-4 w-4" }),
-									" ",
-									a(Y.durationMin)
-								]
+							/* @__PURE__ */ E("h2", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Session details"
 							}),
-							Y.location && /* @__PURE__ */ D("span", {
-								className: "flex items-center gap-2",
+							/* @__PURE__ */ D("p", {
+								className: "mt-2 text-sm text-text-secondary",
 								children: [
-									/* @__PURE__ */ E(x, { className: "h-4 w-4" }),
-									" ",
-									Y.location
+									i[Y.type],
+									" session",
+									Y.location ? ` · ${Y.location}` : "",
+									"."
 								]
 							}),
-							$ && /* @__PURE__ */ D("a", {
+							$ ? /* @__PURE__ */ D("a", {
 								href: $,
 								target: "_blank",
 								rel: "noopener noreferrer",
-								className: "flex items-center gap-2 text-primary hover:underline",
-								children: [/* @__PURE__ */ E(C, { className: "h-4 w-4" }), " Join meeting"]
-							})
-						]
-					}),
-					Y.completedAt && /* @__PURE__ */ D("div", {
-						className: "mt-5 border-t border-border-seam pt-5",
-						children: [
-							/* @__PURE__ */ E("h2", {
-								className: "mb-2 text-sm font-semibold text-text-primary",
-								children: "Outcome"
-							}),
-							/* @__PURE__ */ D("p", {
-								className: "text-sm text-text-secondary",
+								className: "mt-4 flex items-center gap-3 rounded-xl border border-border-seam bg-bg-sunken p-3 transition-colors hover:bg-bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 								children: [
-									"Completed ",
-									i(Y.completedAt),
-									Y.rating !== null && /* @__PURE__ */ D("span", {
-										className: "ml-2 inline-flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ E(S, { className: "h-3.5 w-3.5" }),
-											" ",
-											Y.rating,
-											"/5"
-										]
+									/* @__PURE__ */ E("span", {
+										className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+										children: /* @__PURE__ */ E(w, {
+											className: "h-5 w-5",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ D("span", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ E("span", {
+											className: "block text-sm font-medium text-text-primary",
+											children: "Meeting link"
+										}), /* @__PURE__ */ E("span", {
+											className: "block truncate text-xs text-text-secondary",
+											children: "Online session — tap to join"
+										})]
+									}),
+									/* @__PURE__ */ D("span", {
+										className: "inline-flex items-center gap-1 text-sm font-medium text-primary",
+										children: ["Join ", /* @__PURE__ */ E(b, {
+											className: "h-4 w-4",
+											"aria-hidden": "true"
+										})]
 									})
 								]
-							}),
-							Y.feedback && /* @__PURE__ */ D("p", {
-								className: "mt-2 text-sm text-text-secondary",
+							}) : null,
+							Y.completedAt ? /* @__PURE__ */ D("div", {
+								className: "mt-5 border-t border-border-seam pt-5",
 								children: [
-									"“",
-									Y.feedback,
-									"”"
+									/* @__PURE__ */ E("h3", {
+										className: "mb-2 text-sm font-semibold text-text-primary",
+										children: "Outcome"
+									}),
+									/* @__PURE__ */ D("p", {
+										className: "text-sm text-text-secondary",
+										children: ["Completed ", a(Y.completedAt)]
+									}),
+									Y.rating === null ? null : /* @__PURE__ */ E("div", {
+										className: "mt-2",
+										children: /* @__PURE__ */ E(n, {
+											value: Y.rating,
+											size: 18,
+											showValue: !0
+										})
+									}),
+									Y.feedback ? /* @__PURE__ */ D("p", {
+										className: "mt-3 rounded-lg bg-bg-sunken p-3 text-sm italic text-text-secondary",
+										children: [
+											"“",
+											Y.feedback,
+											"”"
+										]
+									}) : null
 								]
-							})
+							}) : null
 						]
 					})
-				]
+				}), X || Z || Q ? /* @__PURE__ */ D(O, {
+					className: "h-fit",
+					children: [
+						/* @__PURE__ */ E("h2", {
+							className: "mb-4 text-sm font-semibold text-text-primary",
+							children: "Actions"
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "flex flex-col gap-2.5",
+							children: [
+								X && /* @__PURE__ */ D("button", {
+									type: "button",
+									onClick: () => o && L.mutate(o),
+									disabled: L.isPending,
+									className: "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
+									children: [L.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(v, { className: "h-4 w-4" }), "Confirm"]
+								}),
+								Z && /* @__PURE__ */ D("button", {
+									type: "button",
+									onClick: () => {
+										q(null), U(Y.feedback ?? ""), G(Y.rating ?? 0), V(!0);
+									},
+									className: "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-status-success-bg-subtle px-4 py-2.5 text-sm font-medium text-status-success-text ring-1 ring-inset ring-status-success-border transition-colors hover:bg-status-success-bg-subtle/70",
+									children: [/* @__PURE__ */ E(v, { className: "h-4 w-4" }), " Complete"]
+								}),
+								Q && /* @__PURE__ */ D("button", {
+									type: "button",
+									onClick: () => o && z.mutate(o),
+									disabled: z.isPending,
+									className: "inline-flex w-full items-center justify-center gap-2 rounded-lg border border-status-error-border px-4 py-2.5 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-60",
+									children: [z.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(T, { className: "h-4 w-4" }), "Cancel session"]
+								})
+							]
+						}),
+						Z ? /* @__PURE__ */ E("p", {
+							className: "mt-3 text-xs text-text-muted",
+							children: "Completing lets you leave feedback and a 1–5 star rating for the athlete."
+						}) : null
+					]
+				}) : null]
 			}),
-			(X || Z || Q) && /* @__PURE__ */ D(O, { children: [/* @__PURE__ */ E("h2", {
-				className: "mb-4 text-sm font-semibold text-text-primary",
-				children: "Actions"
-			}), /* @__PURE__ */ D("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					X && /* @__PURE__ */ D("button", {
-						type: "button",
-						onClick: () => F && R.mutate(F),
-						disabled: R.isPending,
-						className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
-						children: [R.isPending ? /* @__PURE__ */ E(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(v, { className: "h-4 w-4" }), "Confirm"]
-					}),
-					Z && /* @__PURE__ */ D("button", {
-						type: "button",
-						onClick: () => {
-							J(null), H(!0);
-						},
-						className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-						children: [/* @__PURE__ */ E(v, { className: "h-4 w-4" }), " Complete"]
-					}),
-					Q && /* @__PURE__ */ D("button", {
-						type: "button",
-						onClick: () => F && B.mutate(F),
-						disabled: B.isPending,
-						className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-60",
-						children: [B.isPending ? /* @__PURE__ */ E(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(w, { className: "h-4 w-4" }), "Cancel"]
-					})
-				]
-			})] }),
 			/* @__PURE__ */ E(A, {
-				open: V,
-				onOpenChange: H,
+				open: B,
+				onOpenChange: V,
 				children: /* @__PURE__ */ D(j, { children: [/* @__PURE__ */ E(N, { children: /* @__PURE__ */ E(P, { children: "Complete session" }) }), /* @__PURE__ */ D("form", {
 					onSubmit: async (e) => {
-						if (e.preventDefault(), J(null), !F) return;
-						let t;
-						if (G.trim() && (t = Number.parseInt(G, 10), Number.isNaN(t) || t < 1 || t > 5)) {
-							J("Rating must be between 1 and 5.");
+						if (e.preventDefault(), q(null), !o) return;
+						let t = W > 0 ? W : void 0;
+						if (t !== void 0 && (t < 1 || t > 5)) {
+							q("Rating must be between 1 and 5.");
 							return;
 						}
 						try {
-							await z.mutateAsync({
-								id: F,
+							await R.mutateAsync({
+								id: o,
 								input: {
-									feedback: U.trim() || void 0,
+									feedback: H.trim() || void 0,
 									rating: t
 								}
-							}), H(!1);
+							}), V(!1);
 						} catch (e) {
-							J(e instanceof Error ? e.message : "Failed to complete session.");
+							q(e instanceof Error ? e.message : "Failed to complete session.");
 						}
 					},
 					className: "space-y-4 px-1",
@@ -180,38 +310,36 @@ function F() {
 								id: "feedback",
 								className: p,
 								rows: 3,
-								value: U,
-								onChange: (e) => W(e.target.value),
+								value: H,
+								onChange: (e) => U(e.target.value),
 								placeholder: "How did the session go?"
 							})
 						}),
 						/* @__PURE__ */ E(f, {
-							label: "Rating (1–5)",
-							htmlFor: "rating",
-							hint: "Optional.",
-							children: /* @__PURE__ */ E("input", {
-								id: "rating",
-								inputMode: "numeric",
-								className: p,
-								value: G,
-								onChange: (e) => K(e.target.value),
-								placeholder: "5"
+							label: "Rating",
+							hint: "Optional — tap a star.",
+							children: /* @__PURE__ */ E(n, {
+								value: W,
+								onChange: G,
+								size: 30,
+								showLabels: !0,
+								ariaLabel: "Rate this session out of 5"
 							})
 						}),
-						q && /* @__PURE__ */ E("p", {
+						K && /* @__PURE__ */ E("p", {
 							className: "text-sm text-status-error-text",
-							children: q
+							children: K
 						}),
 						/* @__PURE__ */ D(M, { children: [/* @__PURE__ */ E("button", {
 							type: "button",
-							onClick: () => H(!1),
+							onClick: () => V(!1),
 							className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
 							children: "Cancel"
 						}), /* @__PURE__ */ D("button", {
 							type: "submit",
-							disabled: z.isPending,
-							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
-							children: [z.isPending && /* @__PURE__ */ E(b, { className: "h-4 w-4 animate-spin" }), "Complete session"]
+							disabled: R.isPending,
+							className: "inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle px-4 py-2 text-sm font-medium text-status-success-text ring-1 ring-inset ring-status-success-border transition-colors hover:bg-status-success-bg-subtle/70 disabled:opacity-60",
+							children: [R.isPending && /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }), "Complete session"]
 						})] })
 					]
 				})] })
@@ -220,6 +348,6 @@ function F() {
 	});
 }
 //#endregion
-export { F as SessionDetailPage };
+export { I as SessionDetailPage };
 //# sourceMappingURL=SessionDetailPage.js.map

package/dist/atheletebridge/pages/sessions/SessionDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SessionDetailPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/sessions/SessionDetailPage.tsx"],"sourcesContent":["/*\n Session Detail\n * @module atheletebridge/pages/sessions\n \n Reads a single session (athSession) and drives its lifecycle:\n * confirm (athConfirmSession), complete with feedback + rating\n * (athCompleteSession) and cancel (athCancelSession).\n /\n\nimport { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n ArrowLeft,\n CalendarClock,\n Clock,\n MapPin,\n Video,\n Star,\n CheckCircle2,\n XCircle,\n Loader2,\n} from 'lucide-react';\nimport {\n GlassCard,\n EmphasisPanel,\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingState, ErrorState } from '../../components/LoadingState';\nimport { FormField, fieldInputClass } from '../../components/form';\nimport { SESSION_TYPE_LABELS } from '../../components/domain';\nimport { formatDate, formatDuration } from '../../utils/formatters';\nimport { safeExternalHref } from '../../utils/url';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport {\n useSession,\n useConfirmSession,\n useCompleteSession,\n useCancelSession,\n} from '../../hooks/useAthleteBridgeApi';\n\nexport function SessionDetailPage() {\n const { id } = useParams<{ id: string }>();\n const { navigateTo } = useAthleteBridge();\n\n const session = useSession(id);\n const confirmSession = useConfirmSession();\n const completeSession = useCompleteSession();\n const cancelSession = useCancelSession();\n\n const [completeOpen, setCompleteOpen] = useState(false);\n const [feedback, setFeedback] = useState('');\n const [rating, setRating] = useState('');\n const [error, setError] = useState<string \| null>(null);\n\n if (session.isLoading) {\n return (\n <PageLayout title=\"Session\">\n <LoadingState label=\"Loading session…\" />\n </PageLayout>\n );\n }\n\n if (session.isError \|\| !session.data) {\n return (\n <PageLayout title=\"Session\">\n <ErrorState\n title=\"Session not found\"\n message=\"This session does not exist or you do not have access to it.\"\n onRetry={() => navigateTo('/sessions')}\n />\n </PageLayout>\n );\n }\n\n const s = session.data;\n const canConfirm = s.status === 'REQUESTED';\n const canComplete = s.status === 'CONFIRMED';\n const canCancel = s.status === 'REQUESTED' \|\| s.status === 'CONFIRMED';\n // Sanitize the user-controlled meeting URL before it becomes a clickable href.\n const meetingHref = safeExternalHref(s.meetingUrl);\n\n const handleComplete = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(null);\n if (!id) return;\n let ratingNum: number \| undefined;\n if (rating.trim()) {\n ratingNum = Number.parseInt(rating, 10);\n if (Number.isNaN(ratingNum) \|\| ratingNum < 1 \|\| ratingNum > 5) {\n setError('Rating must be between 1 and 5.');\n return;\n }\n }\n try {\n await completeSession.mutateAsync({\n id,\n input: {\n feedback: feedback.trim() \|\| undefined,\n rating: ratingNum,\n },\n });\n setCompleteOpen(false);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to complete session.');\n }\n };\n\n return (\n <PageLayout\n title={s.title}\n description={SESSION_TYPE_LABELS[s.type]}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/sessions')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n }\n >\n <GlassCard treatment=\"insight\" className=\"mb-8 p-6\">\n <div className=\"flex flex-wrap items-center gap-3\">\n <StatusBadge status={s.status} />\n </div>\n <div className=\"mt-4 grid grid-cols-1 gap-3 text-sm text-text-secondary sm:grid-cols-2\">\n <span className=\"flex items-center gap-2\">\n <CalendarClock className=\"h-4 w-4\" /> {formatDate(s.scheduledAt)}\n </span>\n <span className=\"flex items-center gap-2\">\n <Clock className=\"h-4 w-4\" /> {formatDuration(s.durationMin)}\n </span>\n {s.location && (\n <span className=\"flex items-center gap-2\">\n <MapPin className=\"h-4 w-4\" /> {s.location}\n </span>\n )}\n {meetingHref && (\n <a\n href={meetingHref}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"flex items-center gap-2 text-primary hover:underline\"\n >\n <Video className=\"h-4 w-4\" /> Join meeting\n </a>\n )}\n </div>\n\n {s.completedAt && (\n <div className=\"mt-5 border-t border-border-seam pt-5\">\n <h2 className=\"mb-2 text-sm font-semibold text-text-primary\">Outcome</h2>\n <p className=\"text-sm text-text-secondary\">\n Completed {formatDate(s.completedAt)}\n {s.rating !== null && (\n <span className=\"ml-2 inline-flex items-center gap-1\">\n <Star className=\"h-3.5 w-3.5\" /> {s.rating}/5\n </span>\n )}\n </p>\n {s.feedback && <p className=\"mt-2 text-sm text-text-secondary\">“{s.feedback}”</p>}\n </div>\n )}\n </GlassCard>\n\n {/ Lifecycle actions /}\n {(canConfirm \|\| canComplete \|\| canCancel) && (\n <EmphasisPanel>\n <h2 className=\"mb-4 text-sm font-semibold text-text-primary\">Actions</h2>\n <div className=\"flex flex-wrap items-center gap-2\">\n {canConfirm && (\n <button\n type=\"button\"\n onClick={() => id && confirmSession.mutate(id)}\n disabled={confirmSession.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60\"\n >\n {confirmSession.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <CheckCircle2 className=\"h-4 w-4\" />\n )}\n Confirm\n </button>\n )}\n {canComplete && (\n <button\n type=\"button\"\n onClick={() => {\n setError(null);\n setCompleteOpen(true);\n }}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <CheckCircle2 className=\"h-4 w-4\" /> Complete\n </button>\n )}\n {canCancel && (\n <button\n type=\"button\"\n onClick={() => id && cancelSession.mutate(id)}\n disabled={cancelSession.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-60\"\n >\n {cancelSession.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <XCircle className=\"h-4 w-4\" />\n )}\n Cancel\n </button>\n )}\n </div>\n </EmphasisPanel>\n )}\n\n {/ Complete dialog */}\n <ResponsiveDialog open={completeOpen} onOpenChange={setCompleteOpen}>\n <ResponsiveDialogContent>\n <ResponsiveDialogHeader>\n <ResponsiveDialogTitle>Complete session</ResponsiveDialogTitle>\n </ResponsiveDialogHeader>\n <form onSubmit={handleComplete} className=\"space-y-4 px-1\">\n <FormField label=\"Feedback\" htmlFor=\"feedback\" hint=\"Optional post-session notes.\">\n <textarea\n id=\"feedback\"\n className={fieldInputClass}\n rows={3}\n value={feedback}\n onChange={(e) => setFeedback(e.target.value)}\n placeholder=\"How did the session go?\"\n />\n </FormField>\n <FormField label=\"Rating (1–5)\" htmlFor=\"rating\" hint=\"Optional.\">\n <input\n id=\"rating\"\n inputMode=\"numeric\"\n className={fieldInputClass}\n value={rating}\n onChange={(e) => setRating(e.target.value)}\n placeholder=\"5\"\n />\n </FormField>\n {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n <ResponsiveDialogFooter>\n <button\n type=\"button\"\n onClick={() => setCompleteOpen(false)}\n className=\"rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={completeSession.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60\"\n >\n {completeSession.isPending && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n Complete session\n </button>\n </ResponsiveDialogFooter>\n </form>\n </ResponsiveDialogContent>\n </ResponsiveDialog>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SessionDetailPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/sessions/SessionDetailPage.tsx"],"sourcesContent":["/*\n Session Detail\n * @module atheletebridge/pages/sessions\n \n Reads a single session (athSession) and drives its lifecycle:\n * confirm (athConfirmSession), complete with feedback + rating\n * (athCompleteSession) and cancel (athCancelSession).\n \n The layout mirrors the concept mock: a lifecycle timeline, paired\n * Coach / Athlete / Schedule cards (identities resolved via the platform User\n * federation lookup), an iconized meeting-link card, and an Actions panel with\n * an interactive 5-star rating in the Complete flow. Semantic tokens only,\n * responsive down to a single mobile column (with bottom-sheet dialogs).\n /\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n ArrowLeft,\n CalendarClock,\n Clock,\n MapPin,\n Video,\n CheckCircle2,\n XCircle,\n Loader2,\n Mail,\n ExternalLink,\n} from 'lucide-react';\nimport {\n GlassCard,\n EmphasisPanel,\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { UserAvatar } from '../../components/UserAvatar';\nimport { SessionStatusTimeline } from '../../components/SessionStatusTimeline';\nimport { RatingStars } from '../../components/viz';\nimport { LoadingState, ErrorState } from '../../components/LoadingState';\nimport { FormField, fieldInputClass } from '../../components/form';\nimport { SESSION_TYPE_LABELS } from '../../components/domain';\nimport { formatDate, formatDuration } from '../../utils/formatters';\nimport { safeExternalHref } from '../../utils/url';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport {\n useSession,\n useUserDirectory,\n useConfirmSession,\n useCompleteSession,\n useCancelSession,\n} from '../../hooks/useAthleteBridgeApi';\n\n/* A labelled identity tile (Coach / Athlete) — monogram avatar + name + email. /\nfunction PartyCard({\n role,\n name,\n email,\n id,\n}: {\n role: string;\n name?: string \| null;\n email?: string \| null;\n id: string;\n}) {\n const displayName = name?.trim() \|\| `User ${id.slice(0, 6)}`;\n return (\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <p className=\"text-xs font-medium uppercase tracking-wide text-text-muted\">{role}</p>\n <div className=\"mt-3 flex items-center gap-3\">\n <UserAvatar name={name} id={id} size=\"lg\" />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-semibold text-text-primary\">{displayName}</p>\n <p className=\"truncate text-xs text-text-secondary\">{role}</p>\n </div>\n </div>\n {email ? (\n <a\n href={`mailto:${email}`}\n className=\"mt-3 flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary hover:underline\"\n >\n <Mail className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n <span className=\"truncate\">{email}</span>\n </a>\n ) : null}\n </GlassCard>\n );\n}\n\nexport function SessionDetailPage() {\n const { id } = useParams<{ id: string }>();\n const { navigateTo } = useAthleteBridge();\n\n const session = useSession(id);\n const confirmSession = useConfirmSession();\n const completeSession = useCompleteSession();\n const cancelSession = useCancelSession();\n\n const [completeOpen, setCompleteOpen] = useState(false);\n const [feedback, setFeedback] = useState('');\n const [rating, setRating] = useState<number>(0);\n const [error, setError] = useState<string \| null>(null);\n\n // Resolve coach + athlete identities in one batched federation call.\n const directoryIds = useMemo(\n () => (session.data ? [session.data.coachId, session.data.athleteId] : []),\n [session.data]\n );\n const directory = useUserDirectory(directoryIds);\n\n if (session.isLoading) {\n return (\n <PageLayout title=\"Session\">\n <LoadingState label=\"Loading session…\" />\n </PageLayout>\n );\n }\n\n if (session.isError \|\| !session.data) {\n return (\n <PageLayout title=\"Session\">\n <ErrorState\n title=\"Session not found\"\n message=\"This session does not exist or you do not have access to it.\"\n onRetry={() => navigateTo('/sessions')}\n />\n </PageLayout>\n );\n }\n\n const s = session.data;\n const canConfirm = s.status === 'REQUESTED';\n const canComplete = s.status === 'CONFIRMED';\n const canCancel = s.status === 'REQUESTED' \|\| s.status === 'CONFIRMED';\n // Sanitize the user-controlled meeting URL before it becomes a clickable href.\n const meetingHref = safeExternalHref(s.meetingUrl);\n\n const handleComplete = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(null);\n if (!id) return;\n const ratingNum = rating > 0 ? rating : undefined;\n if (ratingNum !== undefined && (ratingNum < 1 \|\| ratingNum > 5)) {\n setError('Rating must be between 1 and 5.');\n return;\n }\n try {\n await completeSession.mutateAsync({\n id,\n input: {\n feedback: feedback.trim() \|\| undefined,\n rating: ratingNum,\n },\n });\n setCompleteOpen(false);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to complete session.');\n }\n };\n\n return (\n <PageLayout\n title={s.title}\n description={SESSION_TYPE_LABELS[s.type]}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/sessions')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n }\n >\n {/ Lifecycle timeline + prominent status /}\n <GlassCard treatment=\"insight\" className=\"mb-6 p-5 sm:p-6\">\n <div className=\"mb-5 flex items-center justify-between gap-3\">\n <span className=\"text-xs font-medium uppercase tracking-wide text-text-muted\">\n Lifecycle\n </span>\n <StatusBadge status={s.status} />\n </div>\n <SessionStatusTimeline\n status={s.status}\n createdAt={s.createdAt}\n completedAt={s.completedAt}\n />\n </GlassCard>\n\n {/ Coach / Athlete / Schedule — three-up on desktop, stacked on mobile /}\n <div className=\"mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n <PartyCard\n role=\"Coach\"\n id={s.coachId}\n name={directory.nameOf(s.coachId)}\n email={directory.emailOf(s.coachId)}\n />\n <PartyCard\n role=\"Athlete\"\n id={s.athleteId}\n name={directory.nameOf(s.athleteId)}\n email={directory.emailOf(s.athleteId)}\n />\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <p className=\"text-xs font-medium uppercase tracking-wide text-text-muted\">Schedule</p>\n <div className=\"mt-3 space-y-2.5 text-sm text-text-primary\">\n <span className=\"flex items-center gap-2\">\n <CalendarClock className=\"h-4 w-4 shrink-0 text-text-secondary\" aria-hidden=\"true\" />\n {formatDate(s.scheduledAt)}\n </span>\n <span className=\"flex items-center gap-2 text-text-secondary\">\n <Clock className=\"h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n {formatDuration(s.durationMin)}\n </span>\n {s.type === 'IN_PERSON' && s.location ? (\n <span className=\"flex items-center gap-2 text-text-secondary\">\n <MapPin className=\"h-4 w-4 shrink-0\" aria-hidden=\"true\" /> {s.location}\n </span>\n ) : null}\n </div>\n </GlassCard>\n </div>\n\n {/ Details + Actions /}\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n {/ Left: session details, meeting link, outcome /}\n <div className=\"space-y-6\">\n <GlassCard treatment=\"glass\" className=\"p-5 sm:p-6\">\n <h2 className=\"text-sm font-semibold text-text-primary\">Session details</h2>\n <p className=\"mt-2 text-sm text-text-secondary\">\n {SESSION_TYPE_LABELS[s.type]} session\n {s.location ? ` · ${s.location}` : ''}.\n </p>\n\n {meetingHref ? (\n <a\n href={meetingHref}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-4 flex items-center gap-3 rounded-xl border border-border-seam bg-bg-sunken p-3 transition-colors hover:bg-bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n >\n <span className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n <Video className=\"h-5 w-5\" aria-hidden=\"true\" />\n </span>\n <span className=\"min-w-0 flex-1\">\n <span className=\"block text-sm font-medium text-text-primary\">Meeting link</span>\n <span className=\"block truncate text-xs text-text-secondary\">\n Online session — tap to join\n </span>\n </span>\n <span className=\"inline-flex items-center gap-1 text-sm font-medium text-primary\">\n Join <ExternalLink className=\"h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </a>\n ) : null}\n\n {s.completedAt ? (\n <div className=\"mt-5 border-t border-border-seam pt-5\">\n <h3 className=\"mb-2 text-sm font-semibold text-text-primary\">Outcome</h3>\n <p className=\"text-sm text-text-secondary\">Completed {formatDate(s.completedAt)}</p>\n {s.rating !== null ? (\n <div className=\"mt-2\">\n <RatingStars value={s.rating} size={18} showValue />\n </div>\n ) : null}\n {s.feedback ? (\n <p className=\"mt-3 rounded-lg bg-bg-sunken p-3 text-sm italic text-text-secondary\">\n “{s.feedback}”\n </p>\n ) : null}\n </div>\n ) : null}\n </GlassCard>\n </div>\n\n {/ Right: lifecycle actions /}\n {canConfirm \|\| canComplete \|\| canCancel ? (\n <EmphasisPanel className=\"h-fit\">\n <h2 className=\"mb-4 text-sm font-semibold text-text-primary\">Actions</h2>\n <div className=\"flex flex-col gap-2.5\">\n {canConfirm && (\n <button\n type=\"button\"\n onClick={() => id && confirmSession.mutate(id)}\n disabled={confirmSession.isPending}\n className=\"inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60\"\n >\n {confirmSession.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <CheckCircle2 className=\"h-4 w-4\" />\n )}\n Confirm\n </button>\n )}\n {canComplete && (\n <button\n type=\"button\"\n onClick={() => {\n setError(null);\n setFeedback(s.feedback ?? '');\n setRating(s.rating ?? 0);\n setCompleteOpen(true);\n }}\n className=\"inline-flex w-full items-center justify-center gap-2 rounded-lg bg-status-success-bg-subtle px-4 py-2.5 text-sm font-medium text-status-success-text ring-1 ring-inset ring-status-success-border transition-colors hover:bg-status-success-bg-subtle/70\"\n >\n <CheckCircle2 className=\"h-4 w-4\" /> Complete\n </button>\n )}\n {canCancel && (\n <button\n type=\"button\"\n onClick={() => id && cancelSession.mutate(id)}\n disabled={cancelSession.isPending}\n className=\"inline-flex w-full items-center justify-center gap-2 rounded-lg border border-status-error-border px-4 py-2.5 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-60\"\n >\n {cancelSession.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <XCircle className=\"h-4 w-4\" />\n )}\n Cancel session\n </button>\n )}\n </div>\n {canComplete ? (\n <p className=\"mt-3 text-xs text-text-muted\">\n Completing lets you leave feedback and a 1–5 star rating for the athlete.\n </p>\n ) : null}\n </EmphasisPanel>\n ) : null}\n </div>\n\n {/ Complete dialog */}\n <ResponsiveDialog open={completeOpen} onOpenChange={setCompleteOpen}>\n <ResponsiveDialogContent>\n <ResponsiveDialogHeader>\n <ResponsiveDialogTitle>Complete session</ResponsiveDialogTitle>\n </ResponsiveDialogHeader>\n <form onSubmit={handleComplete} className=\"space-y-4 px-1\">\n <FormField label=\"Feedback\" htmlFor=\"feedback\" hint=\"Optional post-session notes.\">\n <textarea\n id=\"feedback\"\n className={fieldInputClass}\n rows={3}\n value={feedback}\n onChange={(e) => setFeedback(e.target.value)}\n placeholder=\"How did the session go?\"\n />\n </FormField>\n <FormField label=\"Rating\" hint=\"Optional — tap a star.\">\n <RatingStars\n value={rating}\n onChange={setRating}\n size={30}\n showLabels\n ariaLabel=\"Rate this session out of 5\"\n />\n </FormField>\n {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n <ResponsiveDialogFooter>\n <button\n type=\"button\"\n onClick={() => setCompleteOpen(false)}\n className=\"rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={completeSession.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle px-4 py-2 text-sm font-medium text-status-success-text ring-1 ring-inset ring-status-success-border transition-colors hover:bg-status-success-bg-subtle/70 disabled:opacity-60\"\n >\n {completeSession.isPending && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n Complete session\n </button>\n </ResponsiveDialogFooter>\n </form>\n </ResponsiveDialogContent>\n </ResponsiveDialog>\n </PageLayout>\n );\n}\n"],"mappings":"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"}