@burdenoff/microfe-atheletebridge 2026.705.1 → 2026.706.1

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

@@ -1,165 +1,296 @@
 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 { useState as m } from "react";
-import { ArrowLeft as h, CalendarClock as g, CheckCircle2 as _, Clock as v, Loader2 as y, MapPin as b, Star as x, Video as S, XCircle as C } from "lucide-react";
-import { useParams as w } from "react-router-dom";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import { EmphasisPanel as D, GlassCard as O, ResponsiveDialog as k, ResponsiveDialogContent as A, ResponsiveDialogFooter as j, ResponsiveDialogHeader as M, ResponsiveDialogTitle as N } from "@burdenoff/fe-libs/ui";
+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 P() {
-	let { id: P } = w(), { navigateTo: F } = e(), I = d(P), L = u(), R = l(), z = c(), [B, V] = m(!1), [H, U] = m(""), [W, G] = m(""), [K, q] = m(null);
-	if (I.isLoading) return /* @__PURE__ */ T(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__ */ T(s, { label: "Loading session…" })
+		children: /* @__PURE__ */ E(te, { label: "Loading session…" })
 	});
-	if (I.isError || !I.data) return /* @__PURE__ */ T(t, {
+	if (I.isError || !I.data) return /* @__PURE__ */ E(t, {
 		title: "Session",
-		children: /* @__PURE__ */ T(o, {
+		children: /* @__PURE__ */ E(s, {
 			title: "Session not found",
 			message: "This session does not exist or you do not have access to it.",
-			onRetry: () => F("/sessions")
+			onRetry: () => S("/sessions")
 		})
 	});
-	let J = I.data, Y = J.status === "REQUESTED", X = J.status === "CONFIRMED", Z = J.status === "REQUESTED" || J.status === "CONFIRMED";
-	return /* @__PURE__ */ E(t, {
-		title: J.title,
-		description: r[J.type],
-		actions: /* @__PURE__ */ E("button", {
+	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: i[Y.type],
+		actions: /* @__PURE__ */ D("button", {
 			type: "button",
-			onClick: () => F("/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__ */ T(h, { className: "h-4 w-4" }), " Back"]
+			children: [/* @__PURE__ */ E(re, { className: "h-4 w-4" }), " Back"]
 		}),
 		children: [
-			/* @__PURE__ */ E(O, {
+			/* @__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__ */ T("div", {
-						className: "flex flex-wrap items-center gap-3",
-						children: /* @__PURE__ */ T(n, { status: J.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__ */ E("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__ */ E("span", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ T(g, { className: "h-4 w-4" }),
-									" ",
-									i(J.scheduledAt)
-								]
-							}),
-							/* @__PURE__ */ E("span", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ T(v, { className: "h-4 w-4" }),
-									" ",
-									a(J.durationMin)
-								]
+							/* @__PURE__ */ E("h2", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Session details"
 							}),
-							J.location && /* @__PURE__ */ E("span", {
-								className: "flex items-center gap-2",
+							/* @__PURE__ */ D("p", {
+								className: "mt-2 text-sm text-text-secondary",
 								children: [
-									/* @__PURE__ */ T(b, { className: "h-4 w-4" }),
-									" ",
-									J.location
+									i[Y.type],
+									" session",
+									Y.location ? ` · ${Y.location}` : "",
+									"."
 								]
 							}),
-							J.meetingUrl && /* @__PURE__ */ E("a", {
-								href: J.meetingUrl,
+							$ ? /* @__PURE__ */ D("a", {
+								href: $,
 								target: "_blank",
 								rel: "noopener noreferrer",
-								className: "flex items-center gap-2 text-primary hover:underline",
-								children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), " Join meeting"]
-							})
-						]
-					}),
-					J.completedAt && /* @__PURE__ */ E("div", {
-						className: "mt-5 border-t border-border-seam pt-5",
-						children: [
-							/* @__PURE__ */ T("h2", {
-								className: "mb-2 text-sm font-semibold text-text-primary",
-								children: "Outcome"
-							}),
-							/* @__PURE__ */ E("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(J.completedAt),
-									J.rating !== null && /* @__PURE__ */ E("span", {
-										className: "ml-2 inline-flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ T(x, { className: "h-3.5 w-3.5" }),
-											" ",
-											J.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"
+										})]
 									})
 								]
-							}),
-							J.feedback && /* @__PURE__ */ E("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: [
-									"“",
-									J.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]
 			}),
-			(Y || X || Z) && /* @__PURE__ */ E(D, { children: [/* @__PURE__ */ T("h2", {
-				className: "mb-4 text-sm font-semibold text-text-primary",
-				children: "Actions"
-			}), /* @__PURE__ */ E("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					Y && /* @__PURE__ */ E("button", {
-						type: "button",
-						onClick: () => P && L.mutate(P),
-						disabled: L.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: [L.isPending ? /* @__PURE__ */ T(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ T(_, { className: "h-4 w-4" }), "Confirm"]
-					}),
-					X && /* @__PURE__ */ E("button", {
-						type: "button",
-						onClick: () => {
-							q(null), V(!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__ */ T(_, { className: "h-4 w-4" }), " Complete"]
-					}),
-					Z && /* @__PURE__ */ E("button", {
-						type: "button",
-						onClick: () => P && z.mutate(P),
-						disabled: z.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: [z.isPending ? /* @__PURE__ */ T(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ T(C, { className: "h-4 w-4" }), "Cancel"]
-					})
-				]
-			})] }),
-			/* @__PURE__ */ T(k, {
+			/* @__PURE__ */ E(A, {
 				open: B,
 				onOpenChange: V,
-				children: /* @__PURE__ */ E(A, { children: [/* @__PURE__ */ T(M, { children: /* @__PURE__ */ T(N, { children: "Complete session" }) }), /* @__PURE__ */ E("form", {
+				children: /* @__PURE__ */ D(j, { children: [/* @__PURE__ */ E(N, { children: /* @__PURE__ */ E(P, { children: "Complete session" }) }), /* @__PURE__ */ D("form", {
 					onSubmit: async (e) => {
-						if (e.preventDefault(), q(null), !P) return;
-						let t;
-						if (W.trim() && (t = Number.parseInt(W, 10), Number.isNaN(t) || t < 1 || t > 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 R.mutateAsync({
-								id: P,
+								id: o,
 								input: {
 									feedback: H.trim() || void 0,
 									rating: t
@@ -171,11 +302,11 @@ function P() {
 					},
 					className: "space-y-4 px-1",
 					children: [
-						/* @__PURE__ */ T(f, {
+						/* @__PURE__ */ E(f, {
 							label: "Feedback",
 							htmlFor: "feedback",
 							hint: "Optional post-session notes.",
-							children: /* @__PURE__ */ T("textarea", {
+							children: /* @__PURE__ */ E("textarea", {
 								id: "feedback",
 								className: p,
 								rows: 3,
@@ -184,33 +315,31 @@ function P() {
 								placeholder: "How did the session go?"
 							})
 						}),
-						/* @__PURE__ */ T(f, {
-							label: "Rating (1–5)",
-							htmlFor: "rating",
-							hint: "Optional.",
-							children: /* @__PURE__ */ T("input", {
-								id: "rating",
-								inputMode: "numeric",
-								className: p,
+						/* @__PURE__ */ E(f, {
+							label: "Rating",
+							hint: "Optional — tap a star.",
+							children: /* @__PURE__ */ E(n, {
 								value: W,
-								onChange: (e) => G(e.target.value),
-								placeholder: "5"
+								onChange: G,
+								size: 30,
+								showLabels: !0,
+								ariaLabel: "Rate this session out of 5"
 							})
 						}),
-						K && /* @__PURE__ */ T("p", {
+						K && /* @__PURE__ */ E("p", {
 							className: "text-sm text-status-error-text",
 							children: K
 						}),
-						/* @__PURE__ */ E(j, { children: [/* @__PURE__ */ T("button", {
+						/* @__PURE__ */ D(M, { children: [/* @__PURE__ */ E("button", {
 							type: "button",
 							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__ */ E("button", {
+						}), /* @__PURE__ */ D("button", {
 							type: "submit",
 							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__ */ T(y, { className: "h-4 w-4 animate-spin" }), "Complete session"]
+							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"]
 						})] })
 					]
 				})] })
@@ -219,6 +348,6 @@ function P() {
 	});
 }
 //#endregion
-export { P as SessionDetailPage };
+export { I as SessionDetailPage };
 
 //# sourceMappingURL=SessionDetailPage.js.map

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

@@ -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 { 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\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          {s.meetingUrl && (\n            <a\n              href={s.meetingUrl}\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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"}
+{"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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"}