@burdenoff/microfe-buildmyiq 2026.705.13 → 2026.706.10

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

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