@burdenoff/microfe-atheletebridge 2026.705.2 → 2026.706.1

package/dist/atheletebridge/pages/teams/TeamFormPage.js

@@ -1,20 +1,141 @@
 import { useAthleteBridge as e } from "../../context/AthleteBridgeContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
-import { SPORT_LABELS as n } from "../../components/domain.js";
-import { ErrorState as r, LoadingState as i } from "../../components/LoadingState.js";
-import { useCreateTeam as a, useTeam as o, useUpdateTeam as s } from "../../hooks/useAthleteBridgeApi.js";
-import { FormField as c, fieldInputClass as l } from "../../components/form.js";
-import { useEffect as u, useState as d } from "react";
-import { ArrowLeft as f, Loader2 as p, Save as m } from "lucide-react";
-import { useParams as h } from "react-router-dom";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { SPORT_ICONS as n, SPORT_LABELS as r } from "../../components/domain.js";
+import { UserAvatar as i } from "../../components/UserAvatar.js";
+import { ErrorState as a, LoadingState as o } from "../../components/LoadingState.js";
+import { directoryUserName as s, useCreateTeam as c, useTeam as l, useUpdateTeam as u, useUserDirectory as d, useUserSearch as f } from "../../hooks/useAthleteBridgeApi.js";
+import { FormField as p, fieldInputClass as m } from "../../components/form.js";
+import { useEffect as h, useState as g } from "react";
+import { ArrowLeft as _, CalendarDays as v, Loader2 as y, MapPin as b, Save as x, Search as S, X 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 { GlassCard as D } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/teams/TeamFormPage.tsx
-var v = Object.keys(n), y = [
+var O = Object.keys(r), k = [
 	"FORMING",
 	"ACTIVE",
 	"INACTIVE",
 	"ARCHIVED"
-], b = {
+], A = 300;
+function j({ sport: e }) {
+	let t = n[e];
+	return /* @__PURE__ */ T(t, {
+		className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted",
+		"aria-hidden": "true"
+	});
+}
+function M({ userId: e, displayName: t, onSelect: n }) {
+	let [r, a] = g(""), o = f(r), c = o.data ?? [], l = r.trim().length >= 2, u = o.isError;
+	return e ? /* @__PURE__ */ T(p, {
+		label: "Head coach",
+		hint: "Optional — the coach who leads this squad.",
+		children: /* @__PURE__ */ E("div", {
+			className: "flex items-center gap-2.5 rounded-lg border border-border-seam bg-bg-surface px-3 py-2",
+			children: [
+				/* @__PURE__ */ T(i, {
+					name: t,
+					id: e,
+					size: "sm"
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ T("p", {
+						className: "truncate text-sm font-medium text-text-primary",
+						children: t || "Selected coach"
+					}), /* @__PURE__ */ T("p", {
+						className: "truncate text-xs text-text-secondary",
+						children: e
+					})]
+				}),
+				/* @__PURE__ */ T("button", {
+					type: "button",
+					"aria-label": "Clear head coach",
+					onClick: () => n({
+						userId: "",
+						displayName: ""
+					}),
+					className: "rounded-md p-1 text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary",
+					children: /* @__PURE__ */ T(C, { className: "h-4 w-4" })
+				})
+			]
+		})
+	}) : u ? /* @__PURE__ */ T(p, {
+		label: "Head coach",
+		htmlFor: "headCoachId",
+		hint: "Optional — directory unavailable here; paste the auth-svc user id.",
+		children: /* @__PURE__ */ T("input", {
+			id: "headCoachId",
+			className: m,
+			value: e,
+			onChange: (e) => n({
+				userId: e.target.value,
+				displayName: t
+			}),
+			placeholder: "user-uuid"
+		})
+	}) : /* @__PURE__ */ T(p, {
+		label: "Head coach",
+		hint: "Optional — the coach who leads this squad.",
+		children: /* @__PURE__ */ E("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ E("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ T(S, {
+							className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ T("input", {
+							className: `${m} pl-9`,
+							value: r,
+							onChange: (e) => a(e.target.value),
+							placeholder: "Search coaches by name or email…",
+							"aria-label": "Search for a head coach"
+						}),
+						o.isFetching && /* @__PURE__ */ T(y, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-text-muted" })
+					]
+				}),
+				l && !o.isFetching && c.length === 0 && /* @__PURE__ */ E("p", {
+					className: "text-xs text-text-secondary",
+					children: [
+						"No users match “",
+						r.trim(),
+						"”."
+					]
+				}),
+				c.length > 0 && /* @__PURE__ */ T("ul", {
+					className: "max-h-56 divide-y divide-border-seam overflow-auto rounded-lg border border-border-seam bg-bg-surface",
+					children: c.map((e) => /* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("button", {
+						type: "button",
+						onClick: () => {
+							n({
+								userId: e.id,
+								displayName: s(e)
+							}), a("");
+						},
+						className: "flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-bg-sunken",
+						children: [/* @__PURE__ */ T(i, {
+							name: s(e),
+							id: e.id,
+							size: "sm"
+						}), /* @__PURE__ */ E("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ T("span", {
+								className: "block truncate text-sm font-medium text-text-primary",
+								children: s(e)
+							}), /* @__PURE__ */ T("span", {
+								className: "block truncate text-xs text-text-secondary",
+								children: e.email
+							})]
+						})]
+					}) }, e.id))
+				})
+			]
+		})
+	});
+}
+var N = {
 	name: "",
 	sport: "OTHER",
 	status: "FORMING",
@@ -22,13 +143,15 @@ var v = Object.keys(n), y = [
 	ageGroup: "",
 	season: "",
 	homeVenue: "",
-	tagsText: ""
+	headCoachId: "",
+	headCoachName: "",
+	tags: []
 };
-function x() {
-	let { id: x } = h(), S = !!x, { navigateTo: C } = e(), w = o(x), T = a(), E = s(), [D, O] = d(b), [k, A] = d(null);
-	u(() => {
-		let e = w.data;
-		S && e && O({
+function P() {
+	let { id: n } = w(), i = !!n, { navigateTo: s } = e(), f = l(n), S = c(), P = u(), [F, I] = g(N), [L, R] = g(""), [z, B] = g(null), V = d(i ? [f.data?.headCoachId] : []).nameOf(f.data?.headCoachId ?? void 0);
+	h(() => {
+		let e = f.data;
+		i && e && I((t) => ({
 			name: e.name,
 			sport: e.sport,
 			status: e.status,
@@ -36,187 +159,255 @@ function x() {
 			ageGroup: e.ageGroup ?? "",
 			season: e.season ?? "",
 			homeVenue: e.homeVenue ?? "",
-			tagsText: e.tags.join(", ")
-		});
-	}, [S, w.data]);
-	let j = (e, t) => O((n) => ({
+			headCoachId: e.headCoachId ?? "",
+			headCoachName: V ?? t.headCoachName,
+			tags: e.tags
+		}));
+	}, [
+		i,
+		f.data,
+		V
+	]);
+	let H = (e, t) => I((n) => ({
 		...n,
 		[e]: t
-	})), M = (e) => e.split(",").map((e) => e.trim()).filter(Boolean), N = async (e) => {
-		if (e.preventDefault(), A(null), !D.name.trim()) {
-			A("Team name is required.");
+	})), U = (e) => {
+		let t = e.trim();
+		t && (I((e) => e.tags.some((e) => e.toLowerCase() === t.toLowerCase()) ? e : {
+			...e,
+			tags: [...e.tags, t]
+		}), R(""));
+	}, W = (e) => I((t) => ({
+		...t,
+		tags: t.tags.filter((t) => t !== e)
+	})), G = (e) => {
+		e.key === "Enter" || e.key === "," ? (e.preventDefault(), U(L)) : e.key === "Backspace" && !L && F.tags.length && W(F.tags[F.tags.length - 1]);
+	}, K = async (e) => {
+		if (e.preventDefault(), B(null), !F.name.trim()) {
+			B("Team name is required.");
 			return;
 		}
-		let t = M(D.tagsText);
+		let t = L.trim(), r = t && !F.tags.some((e) => e.toLowerCase() === t.toLowerCase()) ? [...F.tags, t] : F.tags, a = {
+			name: F.name.trim(),
+			sport: F.sport,
+			status: F.status,
+			description: F.description.trim() || void 0,
+			ageGroup: F.ageGroup.trim() || void 0,
+			season: F.season.trim() || void 0,
+			homeVenue: F.homeVenue.trim() || void 0,
+			headCoachId: F.headCoachId.trim() || void 0,
+			tags: r
+		};
 		try {
-			S && x ? (await E.mutateAsync({
-				id: x,
-				input: {
-					name: D.name.trim(),
-					sport: D.sport,
-					status: D.status,
-					description: D.description.trim() || void 0,
-					ageGroup: D.ageGroup.trim() || void 0,
-					season: D.season.trim() || void 0,
-					homeVenue: D.homeVenue.trim() || void 0,
-					tags: t
-				}
-			}), C(`/teams/${x}`)) : C(`/teams/${(await T.mutateAsync({
-				name: D.name.trim(),
-				sport: D.sport,
-				status: D.status,
-				description: D.description.trim() || void 0,
-				ageGroup: D.ageGroup.trim() || void 0,
-				season: D.season.trim() || void 0,
-				homeVenue: D.homeVenue.trim() || void 0,
-				tags: t
-			})).id}`);
+			i && n ? (await P.mutateAsync({
+				id: n,
+				input: a
+			}), s(`/teams/${n}`)) : s(`/teams/${(await S.mutateAsync(a)).id}`);
 		} catch (e) {
-			A(e instanceof Error ? e.message : "Failed to save team.");
+			B(e instanceof Error ? e.message : "Failed to save team.");
 		}
-	}, P = T.isPending || E.isPending;
-	return S && w.isLoading ? /* @__PURE__ */ g(t, {
+	}, q = S.isPending || P.isPending;
+	return i && f.isLoading ? /* @__PURE__ */ T(t, {
 		title: "Edit team",
-		children: /* @__PURE__ */ g(i, { label: "Loading team…" })
-	}) : S && (w.isError || !w.isLoading && !w.data) ? /* @__PURE__ */ g(t, {
+		children: /* @__PURE__ */ T(o, { label: "Loading team…" })
+	}) : i && (f.isError || !f.isLoading && !f.data) ? /* @__PURE__ */ T(t, {
 		title: "Edit team",
-		children: /* @__PURE__ */ g(r, {
+		children: /* @__PURE__ */ T(a, {
 			title: "Team not found",
 			message: "This team does not exist or you do not have access to it.",
-			onRetry: () => C("/teams")
+			onRetry: () => s("/teams")
 		})
-	}) : /* @__PURE__ */ g(t, {
-		title: S ? "Edit team" : "New team",
-		description: S ? "Update the squad details." : "Create a new squad to build a roster.",
-		actions: /* @__PURE__ */ _("button", {
+	}) : /* @__PURE__ */ T(t, {
+		title: i ? "Edit team" : "New team",
+		description: i ? "Update the squad details." : "Create a new squad to build a roster.",
+		actions: /* @__PURE__ */ E("button", {
 			type: "button",
-			onClick: () => C(S && x ? `/teams/${x}` : "/teams"),
+			onClick: () => s(i && n ? `/teams/${n}` : "/teams"),
 			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__ */ g(f, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ T(_, { className: "h-4 w-4" }), " Cancel"]
 		}),
-		children: /* @__PURE__ */ _("form", {
-			onSubmit: N,
-			className: "max-w-2xl space-y-5",
-			children: [
-				/* @__PURE__ */ g(c, {
-					label: "Team name",
-					htmlFor: "name",
-					required: !0,
-					children: /* @__PURE__ */ g("input", {
-						id: "name",
-						className: l,
-						value: D.name,
-						onChange: (e) => j("name", e.target.value),
-						placeholder: "e.g. Riverside United U18"
-					})
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-					children: [/* @__PURE__ */ g(c, {
-						label: "Sport",
-						htmlFor: "sport",
-						children: /* @__PURE__ */ g("select", {
-							id: "sport",
-							className: l,
-							value: D.sport,
-							onChange: (e) => j("sport", e.target.value),
-							children: v.map((e) => /* @__PURE__ */ g("option", {
-								value: e,
-								children: n[e]
-							}, e))
+		children: /* @__PURE__ */ T("form", {
+			onSubmit: K,
+			className: "mx-auto max-w-3xl",
+			children: /* @__PURE__ */ E(D, {
+				treatment: "insight",
+				className: "p-6 sm:p-8",
+				children: [/* @__PURE__ */ E("div", {
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ E("div", {
+							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
+							children: [/* @__PURE__ */ T(p, {
+								label: "Team name",
+								htmlFor: "name",
+								required: !0,
+								children: /* @__PURE__ */ T("input", {
+									id: "name",
+									className: m,
+									value: F.name,
+									onChange: (e) => H("name", e.target.value),
+									placeholder: "e.g. Riverside United U18"
+								})
+							}), /* @__PURE__ */ T(p, {
+								label: "Sport",
+								htmlFor: "sport",
+								children: /* @__PURE__ */ E("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ T(j, { sport: F.sport }), /* @__PURE__ */ T("select", {
+										id: "sport",
+										className: `${m} pl-9`,
+										value: F.sport,
+										onChange: (e) => H("sport", e.target.value),
+										children: O.map((e) => /* @__PURE__ */ T("option", {
+											value: e,
+											children: r[e]
+										}, e))
+									})]
+								})
+							})]
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
+							children: [/* @__PURE__ */ T(p, {
+								label: "Status",
+								htmlFor: "status",
+								children: /* @__PURE__ */ T("select", {
+									id: "status",
+									className: m,
+									value: F.status,
+									onChange: (e) => H("status", e.target.value),
+									children: k.map((e) => /* @__PURE__ */ T("option", {
+										value: e,
+										children: e.charAt(0) + e.slice(1).toLowerCase()
+									}, e))
+								})
+							}), /* @__PURE__ */ T(p, {
+								label: "Age group",
+								htmlFor: "ageGroup",
+								children: /* @__PURE__ */ T("input", {
+									id: "ageGroup",
+									className: m,
+									value: F.ageGroup,
+									onChange: (e) => H("ageGroup", e.target.value),
+									placeholder: "e.g. U18"
+								})
+							})]
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
+							children: [/* @__PURE__ */ T(p, {
+								label: "Season",
+								htmlFor: "season",
+								children: /* @__PURE__ */ E("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ T(v, {
+										className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ T("input", {
+										id: "season",
+										className: `${m} pl-9`,
+										value: F.season,
+										onChange: (e) => H("season", e.target.value),
+										placeholder: "e.g. 2025/26"
+									})]
+								})
+							}), /* @__PURE__ */ T(p, {
+								label: "Home venue",
+								htmlFor: "homeVenue",
+								children: /* @__PURE__ */ E("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ T(b, {
+										className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ T("input", {
+										id: "homeVenue",
+										className: `${m} pl-9`,
+										value: F.homeVenue,
+										onChange: (e) => H("homeVenue", e.target.value),
+										placeholder: "e.g. Riverside Stadium"
+									})]
+								})
+							})]
+						}),
+						/* @__PURE__ */ T(M, {
+							userId: F.headCoachId,
+							displayName: F.headCoachName,
+							onSelect: ({ userId: e, displayName: t }) => I((n) => ({
+								...n,
+								headCoachId: e,
+								headCoachName: t
+							}))
+						}),
+						/* @__PURE__ */ E(p, {
+							label: "Description",
+							htmlFor: "description",
+							children: [/* @__PURE__ */ T("textarea", {
+								id: "description",
+								className: m,
+								rows: 3,
+								maxLength: A,
+								value: F.description,
+								onChange: (e) => H("description", e.target.value),
+								placeholder: "A short description of the team."
+							}), /* @__PURE__ */ E("div", {
+								className: "mt-1 text-right text-xs tabular-nums text-text-muted",
+								children: [
+									F.description.length,
+									"/",
+									A
+								]
+							})]
+						}),
+						/* @__PURE__ */ T(p, {
+							label: "Tags",
+							htmlFor: "tags",
+							hint: "Type a tag and press Enter to add it; click × to remove.",
+							children: /* @__PURE__ */ E("div", {
+								className: "flex flex-wrap items-center gap-1.5 rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)]",
+								children: [F.tags.map((e) => /* @__PURE__ */ E("span", {
+									className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+									children: [e, /* @__PURE__ */ T("button", {
+										type: "button",
+										onClick: () => W(e),
+										"aria-label": `Remove tag ${e}`,
+										className: "rounded-full text-text-muted transition-colors hover:text-status-error-text",
+										children: /* @__PURE__ */ T(C, { className: "h-3 w-3" })
+									})]
+								}, e)), /* @__PURE__ */ T("input", {
+									id: "tags",
+									className: "min-w-[8rem] flex-1 bg-transparent px-1 py-0.5 text-sm text-text-primary placeholder:text-text-muted focus:outline-none",
+									value: L,
+									onChange: (e) => R(e.target.value),
+									onKeyDown: G,
+									onBlur: () => U(L),
+									placeholder: F.tags.length ? "Add tag and press Enter…" : "youth, development"
+								})]
+							})
+						}),
+						z && /* @__PURE__ */ T("p", {
+							className: "text-sm text-status-error-text",
+							children: z
 						})
-					}), /* @__PURE__ */ g(c, {
-						label: "Status",
-						htmlFor: "status",
-						children: /* @__PURE__ */ g("select", {
-							id: "status",
-							className: l,
-							value: D.status,
-							onChange: (e) => j("status", e.target.value),
-							children: y.map((e) => /* @__PURE__ */ g("option", {
-								value: e,
-								children: e.charAt(0) + e.slice(1).toLowerCase()
-							}, e))
-						})
-					})]
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-					children: [/* @__PURE__ */ g(c, {
-						label: "Age group",
-						htmlFor: "ageGroup",
-						children: /* @__PURE__ */ g("input", {
-							id: "ageGroup",
-							className: l,
-							value: D.ageGroup,
-							onChange: (e) => j("ageGroup", e.target.value),
-							placeholder: "e.g. U18"
-						})
-					}), /* @__PURE__ */ g(c, {
-						label: "Season",
-						htmlFor: "season",
-						children: /* @__PURE__ */ g("input", {
-							id: "season",
-							className: l,
-							value: D.season,
-							onChange: (e) => j("season", e.target.value),
-							placeholder: "e.g. 2025/26"
-						})
-					})]
-				}),
-				/* @__PURE__ */ g(c, {
-					label: "Home venue",
-					htmlFor: "homeVenue",
-					children: /* @__PURE__ */ g("input", {
-						id: "homeVenue",
-						className: l,
-						value: D.homeVenue,
-						onChange: (e) => j("homeVenue", e.target.value),
-						placeholder: "e.g. Riverside Stadium"
-					})
-				}),
-				/* @__PURE__ */ g(c, {
-					label: "Description",
-					htmlFor: "description",
-					children: /* @__PURE__ */ g("textarea", {
-						id: "description",
-						className: l,
-						rows: 3,
-						value: D.description,
-						onChange: (e) => j("description", e.target.value),
-						placeholder: "A short description of the team."
-					})
-				}),
-				/* @__PURE__ */ g(c, {
-					label: "Tags",
-					htmlFor: "tags",
-					hint: "Comma-separated, e.g. youth, development, first-team.",
-					children: /* @__PURE__ */ g("input", {
-						id: "tags",
-						className: l,
-						value: D.tagsText,
-						onChange: (e) => j("tagsText", e.target.value),
-						placeholder: "youth, development"
-					})
-				}),
-				k && /* @__PURE__ */ g("p", {
-					className: "text-sm text-status-error-text",
-					children: k
-				}),
-				/* @__PURE__ */ g("div", {
-					className: "flex items-center gap-3 pt-2",
-					children: /* @__PURE__ */ _("button", {
+					]
+				}), /* @__PURE__ */ E("div", {
+					className: "mt-6 flex items-center justify-end gap-3 border-t border-border-seam pt-5",
+					children: [/* @__PURE__ */ T("button", {
+						type: "button",
+						onClick: () => s(i && n ? `/teams/${n}` : "/teams"),
+						className: "rounded-lg px-4 py-2 text-sm font-medium text-text-secondary transition-colors hover:text-text-primary",
+						children: "Cancel"
+					}), /* @__PURE__ */ E("button", {
 						type: "submit",
-						disabled: P,
-						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: [P ? /* @__PURE__ */ g(p, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ g(m, { className: "h-4 w-4" }), S ? "Save changes" : "Create team"]
-					})
-				})
-			]
+						disabled: q,
+						className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
+						children: [q ? /* @__PURE__ */ T(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ T(x, { className: "h-4 w-4" }), i ? "Save changes" : "Create team"]
+					})]
+				})]
+			})
 		})
 	});
 }
 //#endregion
-export { x as TeamFormPage };
+export { P as TeamFormPage };
 
 //# sourceMappingURL=TeamFormPage.js.map