@burdenoff/microfe-buildmyiq 2026.720.3 → 2026.720.5

package/dist/buildmyiq/pages/submissions/SubmissionsPage.js

@@ -5,23 +5,24 @@ import { MetricsCard as n } from "../../components/MetricsCard.js";
 import { formatDate as r, formatDateTime as i } from "../../utils/formatters.js";
 import { StatusBadge as a } from "../../components/StatusBadge.js";
 import { EmptyState as o } from "../../components/EmptyState.js";
-import { ErrorView as s, LoadingView as ee } from "../../components/StateViews.js";
-import { DataTable as te } from "../../components/DataTable.js";
-import { Tabs as c } from "../../components/Tabs.js";
-import { Pagination as l } from "../../components/Pagination.js";
-import { Avatar as u } from "../../components/Avatar.js";
-import { useBuiGradeSubmission as d, useBuiSubmissions as ne } from "../../hooks/useBuildmyiqApi.js";
-import { useCursorPager as re } from "../../hooks/useCursorPager.js";
+import { ErrorView as s, LoadingView as c } from "../../components/StateViews.js";
+import { DataTable as l } from "../../components/DataTable.js";
+import { Tabs as u } from "../../components/Tabs.js";
+import { Pagination as d } from "../../components/Pagination.js";
+import { Avatar as f } from "../../components/Avatar.js";
+import { useBuiGradeSubmission as p, useBuiSubmission as m, useBuiSubmissions as h } from "../../hooks/useBuildmyiqApi.js";
+import { useCursorPager as g } from "../../hooks/useCursorPager.js";
 import "../../hooks/index.js";
-import { BuiPermissionButton as ie } from "../../components/BuiPermissionButton.js";
+import { BuiPermissionButton as _ } from "../../components/BuiPermissionButton.js";
 import "../../components/index.js";
-import { useMemo as f, useState as p } from "react";
-import { BookOpen as ae, CheckCircle2 as oe, ClipboardList as se, Clock as m, GraduationCap as ce, Undo2 as le } from "lucide-react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Button as v, Input as y, Label as b, Sheet as ue, SheetContent as de, SheetDescription as fe, SheetFooter as pe, SheetHeader as me, SheetTitle as he, Switch as ge, Textarea as _e } from "@burdenoff/fe-libs/ui";
-import { useMediaQuery as ve } from "@burdenoff/fe-libs/shared/hooks";
+import { useEffect as v, useMemo as y, useState as b } from "react";
+import { BookOpen as x, CheckCircle2 as S, ClipboardList as C, Clock as w, GraduationCap as T, Undo2 as E } from "lucide-react";
+import { useParams as D } from "react-router-dom";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { Button as j, Input as M, Label as N, Sheet as P, SheetContent as F, SheetDescription as I, SheetFooter as L, SheetHeader as R, SheetTitle as z, Switch as B, Textarea as V } from "@burdenoff/fe-libs/ui";
+import { useMediaQuery as H } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/buildmyiq/pages/submissions/SubmissionsPage.tsx
-var x = 24, ye = [
+var U = 24, W = [
 	{
 		value: "ALL",
 		label: "All"
@@ -42,183 +43,414 @@ var x = 24, ye = [
 		value: "RETURNED",
 		label: "Returned"
 	}
-], be = [{
+], G = [{
 	value: "submission",
 	label: "Submission"
 }, {
 	value: "details",
 	label: "Details"
-}], S = (e) => e.length > 10 ? `${e.slice(0, 8)}…` : e, xe = (e) => r(e, {
+}], K = (e) => e.length > 10 ? `${e.slice(0, 8)}…` : e, ee = (e) => r(e, {
 	day: void 0,
 	month: void 0,
 	year: void 0,
 	hour: "numeric",
 	minute: "2-digit"
-}), C = (e) => typeof e == "object" && !!e && !Array.isArray(e), w = (e) => e == null ? "—" : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : JSON.stringify(e, null, 2), T = ({ answers: e }) => {
-	if (e == null) return /* @__PURE__ */ g("p", {
+}), q = (e) => typeof e == "object" && !!e && !Array.isArray(e), J = (e) => e == null ? "—" : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : JSON.stringify(e, null, 2), Y = ({ answers: e }) => {
+	if (e == null) return /* @__PURE__ */ k("p", {
 		className: "text-sm text-text-secondary",
 		children: "No answers were submitted."
 	});
-	if (C(e)) {
+	if (q(e)) {
 		let t = Object.entries(e);
-		return t.length === 0 ? /* @__PURE__ */ g("p", {
+		return t.length === 0 ? /* @__PURE__ */ k("p", {
 			className: "text-sm text-text-secondary",
 			children: "No answers were submitted."
-		}) : /* @__PURE__ */ g("ol", {
+		}) : /* @__PURE__ */ k("ol", {
 			className: "grid gap-2.5",
-			children: t.map(([e, t], n) => /* @__PURE__ */ _("li", {
+			children: t.map(([e, t], n) => /* @__PURE__ */ A("li", {
 				className: "grid gap-1 rounded-lg border border-border-seam/70 bg-bg-surface/60 p-3 sm:grid-cols-[minmax(0,7rem)_1fr] sm:gap-3",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ A("div", {
 					className: "flex items-baseline gap-2 sm:col-span-1",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ A("span", {
 						className: "shrink-0 text-xs font-semibold text-[var(--color-accent-teal)] tabular-nums",
 						children: ["Q", n + 1]
-					}), /* @__PURE__ */ g("span", {
+					}), /* @__PURE__ */ k("span", {
 						className: "break-words font-mono text-xs text-text-secondary",
 						children: e
 					})]
-				}), /* @__PURE__ */ g("span", {
+				}), /* @__PURE__ */ k("span", {
 					className: "whitespace-pre-wrap break-words text-sm text-text-primary sm:col-span-1",
-					children: w(t)
+					children: J(t)
 				})]
 			}, e))
 		});
 	}
-	return /* @__PURE__ */ g("pre", {
+	return /* @__PURE__ */ k("pre", {
 		className: "overflow-x-auto whitespace-pre-wrap break-words rounded-lg border border-border-seam/70 bg-bg-surface/60 p-3 text-xs text-text-primary",
 		children: JSON.stringify(e, null, 2)
 	});
-}, E = ({ label: e, children: t }) => /* @__PURE__ */ _("div", {
+}, X = ({ label: e, children: t }) => /* @__PURE__ */ A("div", {
 	className: "min-w-0",
-	children: [/* @__PURE__ */ g("p", {
+	children: [/* @__PURE__ */ k("p", {
 		className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
 		children: e
-	}), /* @__PURE__ */ g("div", {
+	}), /* @__PURE__ */ k("div", {
 		className: "mt-0.5 text-sm text-text-primary",
 		children: t
 	})]
-}), D = () => {
-	let { currentUser: C } = e(), w = ve("(min-width: 768px)"), [D, O] = p("ALL"), k = re(), [A, j] = p(null), [M, N] = p("submission"), [P, F] = p(!1), [I, L] = p(""), [R, z] = p(!1), [B, V] = p(""), [H, U] = p(null), { data: W, isLoading: Se, isError: Ce, refetch: we } = ne({
-		status: D === "ALL" ? void 0 : D,
-		cursor: k.cursor,
-		limit: x
-	}), G = d(), K = f(() => W?.items ?? [], [W]), q = f(() => {
-		if (!C) return;
-		let e = [C.firstName, C.lastName].filter(Boolean).join(" ").trim();
-		return C.name?.trim() || e || C.username || C.email;
-	}, [C]), J = f(() => {
+}), te = ({ submission: e, currentUser: t, meName: n, isMe: r, learnerLabel: o, gradeSubmission: s, onClose: c }) => {
+	let [l, d] = b("submission"), [p, m] = b(!1), [h, g] = b(e.score == null ? "" : String(e.score)), [v, y] = b(e.passed ?? !1), [x, S] = b(e.feedback ?? ""), [C, w] = b(null), T = e.status === "SUBMITTED" || e.status === "GRADING", E = e.status === "GRADED" || e.status === "RETURNED", D = e.status === "IN_PROGRESS", P = T || p;
+	return /* @__PURE__ */ A(O, { children: [
+		/* @__PURE__ */ A(R, {
+			className: "border-b border-border-seam p-5 pr-12",
+			children: [
+				/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ k(f, {
+						size: "md",
+						name: r(e.learnerId) ? n : void 0,
+						seed: e.learnerId,
+						src: r(e.learnerId) ? t?.avatar : void 0
+					}), /* @__PURE__ */ A("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ k(z, {
+							className: "truncate text-lg",
+							children: o(e.learnerId)
+						}), /* @__PURE__ */ A(I, {
+							className: "truncate font-mono text-xs",
+							title: e.assessmentId,
+							children: ["Assessment ", K(e.assessmentId)]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ A("p", {
+					className: "text-xs text-text-secondary",
+					children: [
+						"Attempt #",
+						e.attempt,
+						" · Submitted ",
+						i(e.submittedAt)
+					]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "pt-1",
+					children: /* @__PURE__ */ k(a, { status: e.status })
+				})
+			]
+		}),
+		/* @__PURE__ */ A("div", {
+			className: "flex-1 overflow-y-auto px-5 py-4",
+			children: [
+				/* @__PURE__ */ k(u, {
+					items: G,
+					value: l,
+					onChange: d,
+					className: "mb-4"
+				}),
+				l === "submission" ? /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("p", {
+					className: "mb-2 text-sm font-semibold text-text-primary",
+					children: ["Answers ", /* @__PURE__ */ k("span", {
+						className: "font-normal text-text-secondary",
+						children: "(read-only)"
+					})]
+				}), /* @__PURE__ */ k(Y, { answers: e.answers })] }) : /* @__PURE__ */ A("div", {
+					className: "grid grid-cols-2 gap-4 rounded-xl bg-bg-sunken/60 p-4",
+					children: [
+						/* @__PURE__ */ k(X, {
+							label: "Status",
+							children: /* @__PURE__ */ k(a, { status: e.status })
+						}),
+						/* @__PURE__ */ k(X, {
+							label: "Attempt",
+							children: /* @__PURE__ */ A("span", {
+								className: "tabular-nums",
+								children: ["#", e.attempt]
+							})
+						}),
+						/* @__PURE__ */ k(X, {
+							label: "Submitted",
+							children: i(e.submittedAt)
+						}),
+						/* @__PURE__ */ k(X, {
+							label: "Assessment",
+							children: /* @__PURE__ */ k("span", {
+								className: "font-mono text-xs",
+								title: e.assessmentId,
+								children: K(e.assessmentId)
+							})
+						}),
+						e.enrollmentId && /* @__PURE__ */ k(X, {
+							label: "Enrollment",
+							children: /* @__PURE__ */ k("span", {
+								className: "font-mono text-xs",
+								title: e.enrollmentId,
+								children: K(e.enrollmentId)
+							})
+						}),
+						e.gradedAt && /* @__PURE__ */ k(X, {
+							label: "Graded",
+							children: i(e.gradedAt)
+						})
+					]
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "mt-6 border-t border-border-seam pt-5",
+					children: [
+						/* @__PURE__ */ k("p", {
+							className: "mb-3 text-sm font-semibold text-text-primary",
+							children: "Grade"
+						}),
+						D && /* @__PURE__ */ k("p", {
+							className: "rounded-lg bg-bg-sunken/60 px-4 py-3 text-sm text-text-secondary",
+							children: "This attempt is still in progress — there is nothing to grade until the learner submits."
+						}),
+						E && !p && /* @__PURE__ */ A("div", {
+							className: "rounded-xl border border-border-seam p-4",
+							children: [/* @__PURE__ */ A("div", {
+								className: "flex items-start justify-between gap-3",
+								children: [/* @__PURE__ */ A("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ k(X, {
+										label: "Score",
+										children: /* @__PURE__ */ k("span", {
+											className: "tabular-nums font-semibold",
+											children: e.score ?? "—"
+										})
+									}), /* @__PURE__ */ k(X, {
+										label: "Result",
+										children: e.passed == null ? /* @__PURE__ */ k("span", {
+											className: "text-text-secondary",
+											children: "—"
+										}) : /* @__PURE__ */ k(a, { status: e.passed ? "GRADED" : "RETURNED" })
+									})]
+								}), /* @__PURE__ */ k(j, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => m(!0),
+									children: "Re-grade"
+								})]
+							}), /* @__PURE__ */ k("div", {
+								className: "mt-3",
+								children: /* @__PURE__ */ k(X, {
+									label: "Feedback",
+									children: e.feedback ? /* @__PURE__ */ k("span", {
+										className: "whitespace-pre-wrap",
+										children: e.feedback
+									}) : /* @__PURE__ */ k("span", {
+										className: "text-text-secondary",
+										children: "No feedback provided."
+									})
+								})
+							})]
+						}),
+						P && /* @__PURE__ */ A("div", {
+							className: "grid gap-4",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "grid gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ A("div", {
+										className: "grid gap-1.5",
+										children: [/* @__PURE__ */ k(N, {
+											htmlFor: "grade-score",
+											children: "Score"
+										}), /* @__PURE__ */ k(M, {
+											id: "grade-score",
+											type: "number",
+											min: "0",
+											step: "1",
+											value: h,
+											onChange: (e) => g(e.target.value),
+											placeholder: "e.g. 85"
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "grid gap-1.5",
+										children: [/* @__PURE__ */ k(N, {
+											htmlFor: "grade-passed",
+											children: "Result"
+										}), /* @__PURE__ */ A("div", {
+											className: "flex h-10 items-center gap-3",
+											children: [/* @__PURE__ */ k(B, {
+												id: "grade-passed",
+												checked: v,
+												onCheckedChange: y
+											}), /* @__PURE__ */ k("span", {
+												className: "text-sm text-text-secondary",
+												children: v ? "Passed" : "Not passed"
+											})]
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "grid gap-1.5",
+									children: [/* @__PURE__ */ k(N, {
+										htmlFor: "grade-feedback",
+										children: "Feedback"
+									}), /* @__PURE__ */ k(V, {
+										id: "grade-feedback",
+										value: x,
+										onChange: (e) => S(e.target.value),
+										placeholder: "Notes, corrections or encouragement for the learner (optional).",
+										rows: 4
+									})]
+								}),
+								C && /* @__PURE__ */ k("p", {
+									className: "text-sm text-status-error-text",
+									children: C
+								})
+							]
+						})
+					]
+				})
+			]
+		}),
+		/* @__PURE__ */ A(L, {
+			className: "flex-row justify-end gap-3 border-t border-border-seam p-4",
+			children: [/* @__PURE__ */ k(j, {
+				variant: "outline",
+				onClick: c,
+				children: P ? "Cancel" : "Close"
+			}), P && /* @__PURE__ */ k(_, {
+				resource: "buildmyiq-submission",
+				action: "update",
+				deniedBehavior: "hide",
+				children: /* @__PURE__ */ k(j, {
+					onClick: async () => {
+						let t = h.trim(), n = Number(t);
+						if (t === "" || Number.isNaN(n)) {
+							w("Enter a numeric score.");
+							return;
+						}
+						if (n < 0) {
+							w("Score cannot be negative.");
+							return;
+						}
+						try {
+							await s.mutateAsync({
+								id: e.id,
+								input: {
+									score: n,
+									passed: v,
+									feedback: x.trim() || void 0
+								}
+							}), c();
+						} catch (e) {
+							w(e instanceof Error ? e.message : "Failed to save grade.");
+						}
+					},
+					disabled: s.isPending,
+					children: s.isPending ? "Saving…" : E ? "Update grade" : "Grade submission"
+				})
+			})]
+		})
+	] });
+}, Z = () => {
+	let { currentUser: i, navigateTo: _ } = e(), { submissionId: O } = D(), j = H("(min-width: 768px)"), [M, N] = b("ALL"), I = g(), { data: L, isLoading: R, isError: z, refetch: B } = h({
+		status: M === "ALL" ? void 0 : M,
+		cursor: I.cursor,
+		limit: U
+	}), V = p(), G = m(O), q = y(() => L?.items ?? [], [L]), J = O ?? null, Y = y(() => J ? q.find((e) => e.id === J) ?? (G.data?.id === J ? G.data : null) : null, [
+		J,
+		q,
+		G.data
+	]), X = y(() => {
+		if (!i) return;
+		let e = [i.firstName, i.lastName].filter(Boolean).join(" ").trim();
+		return i.name?.trim() || e || i.username || i.email;
+	}, [i]), Z = y(() => {
 		let e = {
-			total: K.length,
+			total: q.length,
 			awaiting: 0,
 			graded: 0,
 			returned: 0
 		};
-		for (let t of K) t.status === "SUBMITTED" || t.status === "GRADING" ? e.awaiting += 1 : t.status === "GRADED" ? e.graded += 1 : t.status === "RETURNED" && (e.returned += 1);
+		for (let t of q) t.status === "SUBMITTED" || t.status === "GRADING" ? e.awaiting += 1 : t.status === "GRADED" ? e.graded += 1 : t.status === "RETURNED" && (e.returned += 1);
 		return e;
-	}, [K]), Y = (e) => e === C?.id, Te = (e) => Y(e) ? "You" : `Learner ${S(e)}`, Ee = (e) => {
-		j(e), N("submission"), L(e.score == null ? "" : String(e.score)), z(e.passed ?? !1), V(e.feedback ?? ""), F(!1), U(null);
-	}, X = () => {
-		j(null), F(!1), U(null);
-	}, De = (e) => {
-		O(e), k.reset();
-	}, Oe = async () => {
-		if (!A) return;
-		let e = I.trim(), t = Number(e);
-		if (e === "" || Number.isNaN(t)) {
-			U("Enter a numeric score.");
-			return;
-		}
-		if (t < 0) {
-			U("Score cannot be negative.");
-			return;
-		}
-		try {
-			await G.mutateAsync({
-				id: A.id,
-				input: {
-					score: t,
-					passed: R,
-					feedback: B.trim() || void 0
-				}
-			}), X();
-		} catch (e) {
-			U(e instanceof Error ? e.message : "Failed to save grade.");
-		}
-	}, Z = A != null && (A.status === "SUBMITTED" || A.status === "GRADING"), Q = A != null && (A.status === "GRADED" || A.status === "RETURNED"), ke = A != null && A.status === "IN_PROGRESS", $ = A != null && (Z || P);
-	return /* @__PURE__ */ _(t, {
+	}, [q]), Q = (e) => e === i?.id, ne = (e) => Q(e) ? "You" : `Learner ${K(e)}`, re = (e) => _(`submissions/${e.id}`), $ = () => _("submissions");
+	return v(() => {
+		!J || Y || !G.isLoading && (G.isError || G.data === null) && _("submissions");
+	}, [
+		J,
+		Y,
+		G.isLoading,
+		G.isError,
+		G.data,
+		_
+	]), /* @__PURE__ */ A(t, {
 		title: "Grading",
 		description: "Review and grade assessment submissions across every course in your workspace.",
 		titleGradient: !0,
 		aurora: !0,
-		children: [/* @__PURE__ */ _("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: "flex flex-col gap-6",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ A("div", {
 					className: "grid grid-cols-2 gap-4 xl:grid-cols-4",
 					children: [
-						/* @__PURE__ */ g(n, {
-							icon: /* @__PURE__ */ g(se, { className: "h-5 w-5" }),
-							value: J.total,
+						/* @__PURE__ */ k(n, {
+							icon: /* @__PURE__ */ k(C, { className: "h-5 w-5" }),
+							value: Z.total,
 							label: "Submissions (this page)",
 							featured: !0
 						}),
-						/* @__PURE__ */ g(n, {
-							icon: /* @__PURE__ */ g(m, { className: "h-5 w-5" }),
-							value: J.awaiting,
+						/* @__PURE__ */ k(n, {
+							icon: /* @__PURE__ */ k(w, { className: "h-5 w-5" }),
+							value: Z.awaiting,
 							label: "Awaiting grade (this page)",
 							accent: "warning"
 						}),
-						/* @__PURE__ */ g(n, {
-							icon: /* @__PURE__ */ g(oe, { className: "h-5 w-5" }),
-							value: J.graded,
+						/* @__PURE__ */ k(n, {
+							icon: /* @__PURE__ */ k(S, { className: "h-5 w-5" }),
+							value: Z.graded,
 							label: "Graded (this page)",
 							accent: "success"
 						}),
-						/* @__PURE__ */ g(n, {
-							icon: /* @__PURE__ */ g(le, { className: "h-5 w-5" }),
-							value: J.returned,
+						/* @__PURE__ */ k(n, {
+							icon: /* @__PURE__ */ k(E, { className: "h-5 w-5" }),
+							value: Z.returned,
 							label: "Returned (this page)"
 						})
 					]
 				}),
-				/* @__PURE__ */ g(c, {
-					items: ye,
-					value: D,
-					onChange: De
+				/* @__PURE__ */ k(u, {
+					items: W,
+					value: M,
+					onChange: (e) => {
+						N(e), I.reset();
+					}
 				}),
-				Se ? /* @__PURE__ */ g(ee, { label: "Loading submissions…" }) : Ce ? /* @__PURE__ */ g(s, {
+				R ? /* @__PURE__ */ k(c, { label: "Loading submissions…" }) : z ? /* @__PURE__ */ k(s, {
 					title: "Couldn't load submissions",
 					message: "The grading queue failed to load.",
-					onRetry: () => we()
-				}) : K.length === 0 ? /* @__PURE__ */ g(o, {
+					onRetry: () => B()
+				}) : q.length === 0 ? /* @__PURE__ */ k(o, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ g(ce, { className: "h-10 w-10" }),
-					title: D === "ALL" ? "No submissions yet" : "Nothing in this status",
-					description: D === "ALL" ? "When learners submit assessments, their attempts will appear here for grading." : "No submissions currently match this status filter."
-				}) : /* @__PURE__ */ _("div", {
+					icon: /* @__PURE__ */ k(T, { className: "h-10 w-10" }),
+					title: M === "ALL" ? "No submissions yet" : "Nothing in this status",
+					description: M === "ALL" ? "When learners submit assessments, their attempts will appear here for grading." : "No submissions currently match this status filter."
+				}) : /* @__PURE__ */ A("div", {
 					className: "flex flex-col gap-4",
-					children: [/* @__PURE__ */ g(te, {
+					children: [/* @__PURE__ */ k(l, {
 						columns: [
 							{
 								key: "learner",
 								header: "Learner",
-								sortValue: (e) => Y(e.learnerId) ? "" : e.learnerId,
-								render: (e) => /* @__PURE__ */ _("div", {
+								sortValue: (e) => Q(e.learnerId) ? "" : e.learnerId,
+								render: (e) => /* @__PURE__ */ A("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ g(u, {
+									children: [/* @__PURE__ */ k(f, {
 										size: "sm",
-										name: Y(e.learnerId) ? q : void 0,
+										name: Q(e.learnerId) ? X : void 0,
 										seed: e.learnerId,
-										src: Y(e.learnerId) ? C?.avatar : void 0
-									}), /* @__PURE__ */ _("div", {
+										src: Q(e.learnerId) ? i?.avatar : void 0
+									}), /* @__PURE__ */ A("div", {
 										className: "min-w-0",
-										children: [/* @__PURE__ */ g("span", {
+										children: [/* @__PURE__ */ k("span", {
 											className: "block truncate font-medium text-text-primary",
 											title: e.learnerId,
-											children: Y(e.learnerId) ? "You" : S(e.learnerId)
-										}), Y(e.learnerId) && q && /* @__PURE__ */ g("span", {
+											children: Q(e.learnerId) ? "You" : K(e.learnerId)
+										}), Q(e.learnerId) && X && /* @__PURE__ */ k("span", {
 											className: "block truncate text-xs text-text-secondary",
-											children: q
+											children: X
 										})]
 									})]
 								})
@@ -227,12 +459,12 @@ var x = 24, ye = [
 								key: "assessment",
 								header: "Assessment",
 								hideOnMobile: !0,
-								render: (e) => /* @__PURE__ */ _("span", {
+								render: (e) => /* @__PURE__ */ A("span", {
 									className: "inline-flex items-center gap-2 text-text-secondary",
-									children: [/* @__PURE__ */ g(ae, { className: "h-4 w-4 shrink-0 opacity-70" }), /* @__PURE__ */ g("span", {
+									children: [/* @__PURE__ */ k(x, { className: "h-4 w-4 shrink-0 opacity-70" }), /* @__PURE__ */ k("span", {
 										className: "font-mono text-xs",
 										title: e.assessmentId,
-										children: S(e.assessmentId)
+										children: K(e.assessmentId)
 									})]
 								})
 							},
@@ -242,7 +474,7 @@ var x = 24, ye = [
 								align: "right",
 								hideOnMobile: !0,
 								sortValue: (e) => e.attempt,
-								render: (e) => /* @__PURE__ */ _("span", {
+								render: (e) => /* @__PURE__ */ A("span", {
 									className: "tabular-nums text-text-secondary",
 									children: ["#", e.attempt]
 								})
@@ -251,17 +483,17 @@ var x = 24, ye = [
 								key: "status",
 								header: "Status",
 								sortValue: (e) => e.status,
-								render: (e) => /* @__PURE__ */ g(a, { status: e.status })
+								render: (e) => /* @__PURE__ */ k(a, { status: e.status })
 							},
 							{
 								key: "score",
 								header: "Score",
 								align: "right",
 								sortValue: (e) => e.score ?? -1,
-								render: (e) => e.score == null ? /* @__PURE__ */ g("span", {
+								render: (e) => e.score == null ? /* @__PURE__ */ k("span", {
 									className: "text-text-secondary",
 									children: "—"
-								}) : /* @__PURE__ */ g("span", {
+								}) : /* @__PURE__ */ k("span", {
 									className: "tabular-nums font-semibold text-text-primary",
 									children: e.score
 								})
@@ -272,268 +504,59 @@ var x = 24, ye = [
 								align: "right",
 								hideOnMobile: !0,
 								sortValue: (e) => e.submittedAt ?? e.createdAt,
-								render: (e) => /* @__PURE__ */ _("div", {
+								render: (e) => /* @__PURE__ */ A("div", {
 									className: "whitespace-nowrap text-right",
-									children: [/* @__PURE__ */ g("div", {
+									children: [/* @__PURE__ */ k("div", {
 										className: "text-text-primary",
 										children: r(e.submittedAt)
-									}), e.submittedAt && /* @__PURE__ */ g("div", {
+									}), e.submittedAt && /* @__PURE__ */ k("div", {
 										className: "text-xs text-text-secondary",
-										children: xe(e.submittedAt)
+										children: ee(e.submittedAt)
 									})]
 								})
 							}
 						],
-						rows: K,
+						rows: q,
 						rowKey: (e) => e.id,
-						onRowClick: Ee,
+						onRowClick: re,
 						defaultSort: {
 							key: "submittedAt",
 							dir: "desc"
 						}
-					}), /* @__PURE__ */ g(l, {
-						page: k.page,
-						pageSize: x,
-						itemCount: K.length,
-						hasMore: W?.pageInfo?.hasMore ?? !1,
-						onPageChange: (e) => k.onPageChange(e, W?.pageInfo?.cursor)
+					}), /* @__PURE__ */ k(d, {
+						page: I.page,
+						pageSize: U,
+						itemCount: q.length,
+						hasMore: L?.pageInfo?.hasMore ?? !1,
+						onPageChange: (e) => I.onPageChange(e, L?.pageInfo?.cursor)
 					})]
 				})
 			]
-		}), /* @__PURE__ */ g(ue, {
-			open: A != null,
+		}), /* @__PURE__ */ k(P, {
+			open: J != null,
 			onOpenChange: (e) => {
-				e || X();
+				e || $();
 			},
-			children: /* @__PURE__ */ g(de, {
-				side: w ? "right" : "bottom",
-				className: w ? "flex w-full max-w-none flex-col gap-0 p-0 sm:max-w-xl" : "flex max-h-[92vh] w-full flex-col gap-0 rounded-t-2xl p-0",
-				children: A && /* @__PURE__ */ _(h, { children: [
-					/* @__PURE__ */ _(me, {
-						className: "border-b border-border-seam p-5 pr-12",
-						children: [
-							/* @__PURE__ */ _("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ g(u, {
-									size: "md",
-									name: Y(A.learnerId) ? q : void 0,
-									seed: A.learnerId,
-									src: Y(A.learnerId) ? C?.avatar : void 0
-								}), /* @__PURE__ */ _("div", {
-									className: "min-w-0",
-									children: [/* @__PURE__ */ g(he, {
-										className: "truncate text-lg",
-										children: Te(A.learnerId)
-									}), /* @__PURE__ */ _(fe, {
-										className: "truncate font-mono text-xs",
-										title: A.assessmentId,
-										children: ["Assessment ", S(A.assessmentId)]
-									})]
-								})]
-							}),
-							/* @__PURE__ */ _("p", {
-								className: "text-xs text-text-secondary",
-								children: [
-									"Attempt #",
-									A.attempt,
-									" · Submitted ",
-									i(A.submittedAt)
-								]
-							}),
-							/* @__PURE__ */ g("div", {
-								className: "pt-1",
-								children: /* @__PURE__ */ g(a, { status: A.status })
-							})
-						]
-					}),
-					/* @__PURE__ */ _("div", {
-						className: "flex-1 overflow-y-auto px-5 py-4",
-						children: [
-							/* @__PURE__ */ g(c, {
-								items: be,
-								value: M,
-								onChange: N,
-								className: "mb-4"
-							}),
-							M === "submission" ? /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-								className: "mb-2 text-sm font-semibold text-text-primary",
-								children: ["Answers ", /* @__PURE__ */ g("span", {
-									className: "font-normal text-text-secondary",
-									children: "(read-only)"
-								})]
-							}), /* @__PURE__ */ g(T, { answers: A.answers })] }) : /* @__PURE__ */ _("div", {
-								className: "grid grid-cols-2 gap-4 rounded-xl bg-bg-sunken/60 p-4",
-								children: [
-									/* @__PURE__ */ g(E, {
-										label: "Status",
-										children: /* @__PURE__ */ g(a, { status: A.status })
-									}),
-									/* @__PURE__ */ g(E, {
-										label: "Attempt",
-										children: /* @__PURE__ */ _("span", {
-											className: "tabular-nums",
-											children: ["#", A.attempt]
-										})
-									}),
-									/* @__PURE__ */ g(E, {
-										label: "Submitted",
-										children: i(A.submittedAt)
-									}),
-									/* @__PURE__ */ g(E, {
-										label: "Assessment",
-										children: /* @__PURE__ */ g("span", {
-											className: "font-mono text-xs",
-											title: A.assessmentId,
-											children: S(A.assessmentId)
-										})
-									}),
-									A.enrollmentId && /* @__PURE__ */ g(E, {
-										label: "Enrollment",
-										children: /* @__PURE__ */ g("span", {
-											className: "font-mono text-xs",
-											title: A.enrollmentId,
-											children: S(A.enrollmentId)
-										})
-									}),
-									A.gradedAt && /* @__PURE__ */ g(E, {
-										label: "Graded",
-										children: i(A.gradedAt)
-									})
-								]
-							}),
-							/* @__PURE__ */ _("div", {
-								className: "mt-6 border-t border-border-seam pt-5",
-								children: [
-									/* @__PURE__ */ g("p", {
-										className: "mb-3 text-sm font-semibold text-text-primary",
-										children: "Grade"
-									}),
-									ke && /* @__PURE__ */ g("p", {
-										className: "rounded-lg bg-bg-sunken/60 px-4 py-3 text-sm text-text-secondary",
-										children: "This attempt is still in progress — there is nothing to grade until the learner submits."
-									}),
-									Q && !P && /* @__PURE__ */ _("div", {
-										className: "rounded-xl border border-border-seam p-4",
-										children: [/* @__PURE__ */ _("div", {
-											className: "flex items-start justify-between gap-3",
-											children: [/* @__PURE__ */ _("div", {
-												className: "grid grid-cols-2 gap-4",
-												children: [/* @__PURE__ */ g(E, {
-													label: "Score",
-													children: /* @__PURE__ */ g("span", {
-														className: "tabular-nums font-semibold",
-														children: A.score ?? "—"
-													})
-												}), /* @__PURE__ */ g(E, {
-													label: "Result",
-													children: A.passed == null ? /* @__PURE__ */ g("span", {
-														className: "text-text-secondary",
-														children: "—"
-													}) : /* @__PURE__ */ g(a, { status: A.passed ? "GRADED" : "RETURNED" })
-												})]
-											}), /* @__PURE__ */ g(v, {
-												variant: "outline",
-												size: "sm",
-												onClick: () => F(!0),
-												children: "Re-grade"
-											})]
-										}), /* @__PURE__ */ g("div", {
-											className: "mt-3",
-											children: /* @__PURE__ */ g(E, {
-												label: "Feedback",
-												children: A.feedback ? /* @__PURE__ */ g("span", {
-													className: "whitespace-pre-wrap",
-													children: A.feedback
-												}) : /* @__PURE__ */ g("span", {
-													className: "text-text-secondary",
-													children: "No feedback provided."
-												})
-											})
-										})]
-									}),
-									$ && /* @__PURE__ */ _("div", {
-										className: "grid gap-4",
-										children: [
-											/* @__PURE__ */ _("div", {
-												className: "grid gap-4 sm:grid-cols-2",
-												children: [/* @__PURE__ */ _("div", {
-													className: "grid gap-1.5",
-													children: [/* @__PURE__ */ g(b, {
-														htmlFor: "grade-score",
-														children: "Score"
-													}), /* @__PURE__ */ g(y, {
-														id: "grade-score",
-														type: "number",
-														min: "0",
-														step: "1",
-														value: I,
-														onChange: (e) => L(e.target.value),
-														placeholder: "e.g. 85"
-													})]
-												}), /* @__PURE__ */ _("div", {
-													className: "grid gap-1.5",
-													children: [/* @__PURE__ */ g(b, {
-														htmlFor: "grade-passed",
-														children: "Result"
-													}), /* @__PURE__ */ _("div", {
-														className: "flex h-10 items-center gap-3",
-														children: [/* @__PURE__ */ g(ge, {
-															id: "grade-passed",
-															checked: R,
-															onCheckedChange: z
-														}), /* @__PURE__ */ g("span", {
-															className: "text-sm text-text-secondary",
-															children: R ? "Passed" : "Not passed"
-														})]
-													})]
-												})]
-											}),
-											/* @__PURE__ */ _("div", {
-												className: "grid gap-1.5",
-												children: [/* @__PURE__ */ g(b, {
-													htmlFor: "grade-feedback",
-													children: "Feedback"
-												}), /* @__PURE__ */ g(_e, {
-													id: "grade-feedback",
-													value: B,
-													onChange: (e) => V(e.target.value),
-													placeholder: "Notes, corrections or encouragement for the learner (optional).",
-													rows: 4
-												})]
-											}),
-											H && /* @__PURE__ */ g("p", {
-												className: "text-sm text-status-error-text",
-												children: H
-											})
-										]
-									})
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ _(pe, {
-						className: "flex-row justify-end gap-3 border-t border-border-seam p-4",
-						children: [/* @__PURE__ */ g(v, {
-							variant: "outline",
-							onClick: X,
-							children: $ ? "Cancel" : "Close"
-						}), $ && /* @__PURE__ */ g(ie, {
-							resource: "buildmyiq-submission",
-							action: "update",
-							deniedBehavior: "hide",
-							children: /* @__PURE__ */ g(v, {
-								onClick: Oe,
-								disabled: G.isPending,
-								children: G.isPending ? "Saving…" : Q ? "Update grade" : "Grade submission"
-							})
-						})]
-					})
-				] })
+			children: /* @__PURE__ */ k(F, {
+				side: j ? "right" : "bottom",
+				className: j ? "flex w-full max-w-none flex-col gap-0 p-0 sm:max-w-xl" : "flex max-h-[92vh] w-full flex-col gap-0 rounded-t-2xl p-0",
+				children: Y ? /* @__PURE__ */ k(te, {
+					submission: Y,
+					currentUser: i,
+					meName: X,
+					isMe: Q,
+					learnerLabel: ne,
+					gradeSubmission: V,
+					onClose: $
+				}, Y.id) : J ? /* @__PURE__ */ k("div", {
+					className: "flex min-h-[300px] items-center justify-center p-5",
+					children: /* @__PURE__ */ k(c, { label: "Loading submission…" })
+				}) : null
 			})
 		})]
 	});
 };
 //#endregion
-export { D as SubmissionsPage };
+export { Z as SubmissionsPage };
 
 //# sourceMappingURL=SubmissionsPage.js.map