From 290d16d0f57d5b8ee6d6fd627df398d39376a8d9 Mon Sep 17 00:00:00 2001
From: Paul Smith <paul@pafsmith.dev>
Date: Mon, 6 Apr 2026 21:37:17 +0100
Subject: [PATCH 1/3] feat: add lesson form and UI components for lesson
 management

---
 .../lessons/_components/lesson-form.tsx       | 103 ++++++++++++
 .../lessons/_components/lesson-ui.tsx         | 157 ++++++++++++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-form.tsx
 create mode 100644 apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-ui.tsx

diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-form.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-form.tsx
new file mode 100644
index 0000000..711850c
--- /dev/null
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-form.tsx
@@ -0,0 +1,103 @@
+import type { ReactNode, TextareaHTMLAttributes } from "react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+export function LessonFormPage({
+  title,
+  description,
+  backHref,
+  backLabel = "Lessons",
+  children,
+}: {
+  title: string;
+  description?: ReactNode;
+  backHref: string;
+  backLabel?: string;
+  children: ReactNode;
+}) {
+  return (
+    <main className="flex max-w-lg flex-col gap-6">
+      <Button variant="link" asChild className="h-auto w-fit justify-start p-0">
+        <Link href={backHref}>← {backLabel}</Link>
+      </Button>
+      <div className="space-y-1">
+        <h1 className="font-serif-display text-2xl font-semibold tracking-tight text-foreground">
+          {title}
+        </h1>
+        {description ? (
+          <div className="text-sm text-muted-foreground">{description}</div>
+        ) : null}
+      </div>
+      {children}
+    </main>
+  );
+}
+
+export function LessonFormCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+export function LessonField({
+  label,
+  htmlFor,
+  hint,
+  error,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  hint?: ReactNode;
+  error?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={htmlFor}>{label}</Label>
+      {children}
+      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  );
+}
+
+export function LessonTextarea({
+  className,
+  ...props
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "min-h-24 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm leading-relaxed outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-ui.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-ui.tsx
new file mode 100644
index 0000000..ecde523
--- /dev/null
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/_components/lesson-ui.tsx
@@ -0,0 +1,157 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { formatIsoDateTime } from "@/lib/datetime";
+import { cn } from "@/lib/utils";
+
+type LessonStatus = "scheduled" | "completed" | "cancelled" | "no_show";
+
+function statusClasses(status: string): string {
+  switch (status as LessonStatus) {
+    case "completed":
+      return "border-primary/20 bg-primary/10 text-primary";
+    case "cancelled":
+      return "border-destructive/20 bg-destructive/10 text-destructive";
+    case "no_show":
+      return "border-secondary-foreground/15 bg-secondary text-secondary-foreground";
+    case "scheduled":
+    default:
+      return "border-border bg-muted text-foreground";
+  }
+}
+
+export function LessonStatusBadge({
+  status,
+  className,
+}: {
+  status: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium capitalize",
+        statusClasses(status),
+        className,
+      )}
+    >
+      {status.replace("_", " ")}
+    </span>
+  );
+}
+
+export function LessonPageHeader({
+  title,
+  description,
+  backHref,
+  backLabel = "Lessons",
+  actions,
+}: {
+  title: string;
+  description?: ReactNode;
+  backHref?: string;
+  backLabel?: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      {backHref ? (
+        <Button variant="link" asChild className="h-auto w-fit justify-start p-0">
+          <Link href={backHref}>← {backLabel}</Link>
+        </Button>
+      ) : null}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="font-serif-display text-2xl font-semibold tracking-tight text-foreground">
+            {title}
+          </h1>
+          {description ? (
+            <div className="text-sm text-muted-foreground">{description}</div>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex flex-wrap items-center gap-2">{actions}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function LessonMetaItem({
+  label,
+  value,
+  className,
+}: {
+  label: string;
+  value: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <dt className="text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+        {label}
+      </dt>
+      <dd className="text-sm text-foreground">{value}</dd>
+    </div>
+  );
+}
+
+export function LessonSummaryCard({
+  startsAt,
+  endsAt,
+  status,
+  studentLabel,
+  subjectLabel,
+  tutorLabel,
+  notes,
+}: {
+  startsAt: string;
+  endsAt: string;
+  status: string;
+  studentLabel: string;
+  subjectLabel: string;
+  tutorLabel: string;
+  notes?: string | null;
+}) {
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="gap-3 border-b bg-muted/30">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle>Schedule</CardTitle>
+            <CardDescription>
+              {formatIsoDateTime(startsAt)} → {formatIsoDateTime(endsAt)}
+            </CardDescription>
+          </div>
+          <LessonStatusBadge status={status} />
+        </div>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <dl className="grid gap-4 sm:grid-cols-2">
+        <LessonMetaItem label="Student" value={studentLabel} />
+        <LessonMetaItem label="Subject" value={subjectLabel} />
+        <LessonMetaItem label="Tutor" value={tutorLabel} />
+        <LessonMetaItem
+          label="Notes"
+          className="sm:col-span-2"
+          value={
+            notes && notes.trim() !== "" ? (
+              <span className="whitespace-pre-wrap">{notes}</span>
+            ) : (
+              <span className="text-muted-foreground">No notes added.</span>
+            )
+          }
+        />
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

From 575ca7fdd1d9add7da05a951a85dcbd954ef3e0d Mon Sep 17 00:00:00 2001
From: Paul Smith <paul@pafsmith.dev>
Date: Mon, 6 Apr 2026 21:37:46 +0100
Subject: [PATCH 2/3] feat: enhance lessons page and detail view with new UI
 components and improved loading states

---
 .../[lessonId]/tenant-lesson-detail-page.tsx  | 219 +++++++----
 .../lessons/tenant-lessons-page.tsx           | 370 +++++++++++-------
 2 files changed, 353 insertions(+), 236 deletions(-)

diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/tenant-lesson-detail-page.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/tenant-lesson-detail-page.tsx
index 8a53604..8b756c7 100644
--- a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/tenant-lesson-detail-page.tsx
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/tenant-lesson-detail-page.tsx
@@ -6,6 +6,16 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useMemo, useState } from "react";
 
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   useCancelLessonMutation,
   useCompleteLessonMutation,
@@ -19,6 +29,11 @@ import { useTenantOrganizationId } from "@/lib/hooks/use-tenant-organization";
 import { useSession } from "@/lib/auth/session";
 import { isOrgAdminOrSuperadmin } from "@/lib/tenant-role";
 
+import {
+  LessonPageHeader,
+  LessonSummaryCard,
+} from "../_components/lesson-ui";
+
 type Student = components["schemas"]["Student"];
 type Subject = components["schemas"]["Subject"];
 type OrgMember = components["schemas"]["OrganizationMembership"];
@@ -74,37 +89,39 @@ export function TenantLessonDetailPage() {
 
   if (orgsLoading || !organizationId) {
     return (
-      <main>
-        <p>
-          <Link href={listUrl}>← Lessons</Link>
-        </p>
-        <p>Loading…</p>
+      <main className="flex max-w-2xl flex-col gap-4">
+        <LessonPageHeader backHref={listUrl} title="Lesson" />
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-28 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
       </main>
     );
   }
 
   if (lessonQ.isLoading) {
     return (
-      <main>
-        <p>
-          <Link href={listUrl}>← Lessons</Link>
-        </p>
-        <p>Loading lesson…</p>
+      <main className="flex max-w-2xl flex-col gap-4">
+        <LessonPageHeader backHref={listUrl} title="Lesson" />
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-28 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
       </main>
     );
   }
 
   if (lessonQ.error) {
     return (
-      <main>
-        <p>
-          <Link href={listUrl}>← Lessons</Link>
-        </p>
-        <p style={{ color: "#b91c1c" }}>
-          {lessonQ.error instanceof Error
-            ? lessonQ.error.message
-            : "Could not load lesson"}
-        </p>
+      <main className="flex max-w-2xl flex-col gap-4">
+        <LessonPageHeader backHref={listUrl} title="Lesson" />
+        <Alert variant="destructive">
+          <AlertDescription>
+            {lessonQ.error instanceof Error
+              ? lessonQ.error.message
+              : "Could not load lesson"}
+          </AlertDescription>
+        </Alert>
       </main>
     );
   }
@@ -112,11 +129,11 @@ export function TenantLessonDetailPage() {
   const lesson = lessonQ.data;
   if (!lesson) {
     return (
-      <main>
-        <p>
-          <Link href={listUrl}>← Lessons</Link>
-        </p>
-        <p>Lesson not found.</p>
+      <main className="flex max-w-2xl flex-col gap-4">
+        <LessonPageHeader backHref={listUrl} title="Lesson" />
+        <Alert variant="destructive">
+          <AlertDescription>Lesson not found.</AlertDescription>
+        </Alert>
       </main>
     );
   }
@@ -134,6 +151,8 @@ export function TenantLessonDetailPage() {
   const canCompleteOrCancel = canTryLifecycle && !terminal;
   const mutating = completeMut.isPending || cancelMut.isPending;
   const lessonIdStable = lesson.id;
+  const metadataError =
+    studentsQ.error ?? subjectsQ.error ?? membersQ.error ?? null;
 
   async function onComplete() {
     setActionError(null);
@@ -158,71 +177,103 @@ export function TenantLessonDetailPage() {
   const canEdit = isAdmin && lesson.status === "scheduled";
 
   return (
-    <main style={{ maxWidth: 560 }}>
-      <p style={{ marginBottom: 16 }}>
-        <Link href={listUrl}>← Lessons</Link>
-      </p>
-      <h1 style={{ fontSize: 22, marginTop: 0 }}>Lesson</h1>
-      <p style={{ fontSize: 15, opacity: 0.9 }}>
-        <strong>{formatIsoDateTime(lesson.startsAt)}</strong>
-        {" → "}
-        <strong>{formatIsoDateTime(lesson.endsAt)}</strong>
-      </p>
-      <p style={{ fontSize: 15 }}>
-        Status: <strong>{lesson.status}</strong>
-      </p>
-      <ul style={{ fontSize: 15, lineHeight: 1.6, paddingLeft: 20 }}>
-        <li>Student: {studentLabel}</li>
-        <li>Subject: {subjectLabel}</li>
-        <li>Tutor: {tutorLabel}</li>
-        <li>
-          Notes:{" "}
-          {lesson.notes === null || lesson.notes === ""
-            ? "—"
-            : lesson.notes}
-        </li>
-      </ul>
-
-      {canTryLifecycle ? (
-        <div style={{ marginTop: 20, display: "flex", flexWrap: "wrap", gap: 10 }}>
-          <button
-            type="button"
-            onClick={() => void onComplete()}
-            disabled={!canCompleteOrCancel || mutating}
-          >
-            {completeMut.isPending ? "Completing…" : "Mark complete"}
-          </button>
-          <button
-            type="button"
-            onClick={() => void onCancel()}
-            disabled={!canCompleteOrCancel || mutating}
-          >
-            {cancelMut.isPending ? "Cancelling…" : "Cancel lesson"}
-          </button>
-        </div>
-      ) : null}
+    <main className="flex max-w-2xl flex-col gap-6">
+      <LessonPageHeader
+        backHref={listUrl}
+        title="Lesson"
+        description={
+          <>
+            <span>{formatIsoDateTime(lesson.startsAt)}</span>
+            <span> → </span>
+            <span>{formatIsoDateTime(lesson.endsAt)}</span>
+          </>
+        }
+        actions={
+          canEdit ? (
+            <Button variant="outline" size="sm" asChild>
+              <Link href={`${base}/${lesson.id}/edit`}>Edit lesson</Link>
+            </Button>
+          ) : null
+        }
+      />
 
-      {terminal && canTryLifecycle ? (
-        <p style={{ fontSize: 14, opacity: 0.8, marginTop: 12 }}>
-          This lesson is finished; complete and cancel are not available.
-        </p>
+      {studentsQ.isLoading || subjectsQ.isLoading || membersQ.isLoading ? (
+        <p className="text-sm text-muted-foreground">Loading lesson metadata…</p>
       ) : null}
 
-      {actionError ? (
-        <p style={{ color: "#b91c1c", marginTop: 12 }}>{actionError}</p>
+      {metadataError ? (
+        <Alert>
+          <AlertDescription>
+            Some related lesson labels could not be loaded. Stored ids will be
+            shown where needed.
+          </AlertDescription>
+        </Alert>
       ) : null}
 
-      {isAdmin ? (
-        <p style={{ marginTop: 20 }}>
-          {canEdit ? (
-            <Link href={`${base}/${lesson.id}/edit`}>Edit lesson</Link>
-          ) : (
-            <span style={{ fontSize: 14, opacity: 0.85 }}>
-              Only scheduled lessons can be edited.
-            </span>
-          )}
-        </p>
-      ) : null}
+      <LessonSummaryCard
+        startsAt={lesson.startsAt}
+        endsAt={lesson.endsAt}
+        status={lesson.status}
+        studentLabel={studentLabel}
+        subjectLabel={subjectLabel}
+        tutorLabel={tutorLabel}
+        notes={lesson.notes}
+      />
+
+      {(canTryLifecycle || isAdmin || actionError) && (
+        <Card>
+          <CardHeader className="border-b">
+            <CardTitle>Actions</CardTitle>
+            <CardDescription>
+              Update the lesson lifecycle once the session outcome is known.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 pt-4">
+            {canTryLifecycle ? (
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  onClick={() => void onComplete()}
+                  disabled={!canCompleteOrCancel || mutating}
+                >
+                  {completeMut.isPending ? "Completing…" : "Mark complete"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => void onCancel()}
+                  disabled={!canCompleteOrCancel || mutating}
+                >
+                  {cancelMut.isPending ? "Cancelling…" : "Cancel lesson"}
+                </Button>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Lesson lifecycle updates are only available to organization
+                admins and tutors.
+              </p>
+            )}
+
+            {terminal && canTryLifecycle ? (
+              <p className="text-sm text-muted-foreground">
+                This lesson is finished; complete and cancel are not available.
+              </p>
+            ) : null}
+
+            {isAdmin && !canEdit ? (
+              <p className="text-sm text-muted-foreground">
+                Only scheduled lessons can be edited.
+              </p>
+            ) : null}
+
+            {actionError ? (
+              <Alert variant="destructive">
+                <AlertDescription>{actionError}</AlertDescription>
+              </Alert>
+            ) : null}
+          </CardContent>
+        </Card>
+      )}
     </main>
   );
 }
diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/tenant-lessons-page.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/tenant-lessons-page.tsx
index d71d17c..0840fbd 100644
--- a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/tenant-lessons-page.tsx
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/tenant-lessons-page.tsx
@@ -5,6 +5,24 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useMemo, useState } from "react";
 
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useLessonsListQuery } from "@/lib/api/lessons-query";
 import { useOrganizationMembersQuery } from "@/lib/api/organization-members-query";
 import { useStudentsListQuery } from "@/lib/api/students-query";
@@ -20,10 +38,15 @@ import { useSession } from "@/lib/auth/session";
 import { isOrgAdminOrSuperadmin } from "@/lib/tenant-role";
 import { lessonListRangeSchema } from "@/lib/validation/lesson-forms";
 
+import { LessonPageHeader, LessonStatusBadge } from "./_components/lesson-ui";
+
 type Student = components["schemas"]["Student"];
 type Subject = components["schemas"]["Subject"];
 type OrgMember = components["schemas"]["OrganizationMembership"];
 
+const ALL_STUDENTS = "__all_students__";
+const ALL_TUTORS = "__all_tutors__";
+
 function addDays(d: Date, n: number): Date {
   const x = new Date(d);
   x.setDate(x.getDate() + n);
@@ -104,184 +127,227 @@ export function TenantLessonsPage() {
 
   const base = `/t/${tenantSlug}/lessons`;
   const tutors = membersQ.data?.filter((m) => m.role === "tutor") ?? [];
+  const referenceError =
+    studentsQ.error ?? subjectsQ.error ?? membersQ.error ?? null;
+  const loadingReferences =
+    studentsQ.isLoading || subjectsQ.isLoading || membersQ.isLoading;
 
   if (orgsLoading || !organizationId) {
     return (
-      <main>
-        <h1 style={{ fontSize: 22 }}>Lessons</h1>
-        <p>Loading…</p>
+      <main className="flex flex-col gap-4">
+        <LessonPageHeader title="Lessons" />
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
       </main>
     );
   }
 
   return (
-    <main>
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 12,
-          alignItems: "baseline",
-          justifyContent: "space-between",
-        }}
-      >
-        <h1 style={{ fontSize: 22, margin: 0 }}>Lessons</h1>
-        {isAdmin ? (
-          <Link href={`${base}/new`} style={{ fontSize: 15 }}>
-            New lesson
-          </Link>
-        ) : null}
-      </div>
+    <main className="flex flex-col gap-6">
+      <LessonPageHeader
+        title="Lessons"
+        description="Review the current week, filter by student or tutor, and open a lesson to manage its lifecycle."
+        actions={
+          isAdmin ? (
+            <Button size="sm" asChild>
+              <Link href={`${base}/new`}>New lesson</Link>
+            </Button>
+          ) : null
+        }
+      />
 
-      <section
-        style={{
-          marginTop: 16,
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 12,
-          alignItems: "center",
-        }}
-      >
-        <span style={{ fontSize: 14, opacity: 0.85 }}>Week</span>
-        <button
-          type="button"
-          onClick={() => setWeekAnchor((d) => addDays(d, -7))}
-          style={{ fontSize: 14 }}
-        >
-          Previous
-        </button>
-        <button
-          type="button"
-          onClick={() => setWeekAnchor(new Date())}
-          style={{ fontSize: 14 }}
-        >
-          This week
-        </button>
-        <button
-          type="button"
-          onClick={() => setWeekAnchor((d) => addDays(d, 7))}
-          style={{ fontSize: 14 }}
-        >
-          Next
-        </button>
-        <span style={{ fontSize: 13, opacity: 0.75 }}>
-          {formatIsoDateTime(fromIso)} – {formatIsoDateTime(toIso)}
-        </span>
-      </section>
+      <Card>
+        <CardHeader className="border-b">
+          <CardTitle>Week view</CardTitle>
+          <CardDescription>
+            Navigate the current lesson window and narrow the list by student or
+            tutor.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-5 pt-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setWeekAnchor((d) => addDays(d, -7))}
+            >
+              Previous
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setWeekAnchor(new Date())}
+            >
+              This week
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setWeekAnchor((d) => addDays(d, 7))}
+            >
+              Next
+            </Button>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Showing {formatIsoDateTime(fromIso)} to {formatIsoDateTime(toIso)}.
+          </p>
 
-      {!rangeValid ? (
-        <p style={{ color: "#b91c1c", marginTop: 12 }}>
-          {rangeParsed.success ? null : rangeParsed.error.issues[0]?.message}
-        </p>
-      ) : null}
+          {!rangeValid ? (
+            <Alert variant="destructive">
+              <AlertDescription>
+                {rangeParsed.success ? null : rangeParsed.error.issues[0]?.message}
+              </AlertDescription>
+            </Alert>
+          ) : null}
 
-      <div
-        style={{
-          marginTop: 16,
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 16,
-          alignItems: "flex-end",
-        }}
-      >
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span style={{ fontSize: 13 }}>Student</span>
-          <select
-            value={studentFilter}
-            onChange={(e) => setStudentFilter(e.target.value)}
-            style={{ minWidth: 200, fontSize: 14 }}
-          >
-            <option value="">All</option>
-            {(studentsQ.data ?? []).map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.firstName} {s.lastName}
-              </option>
-            ))}
-          </select>
-        </label>
-        {canUseTutorFilter ? (
-          <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-            <span style={{ fontSize: 13 }}>Tutor</span>
-            <select
-              value={tutorFilter}
-              onChange={(e) => setTutorFilter(e.target.value)}
-              style={{ minWidth: 220, fontSize: 14 }}
-            >
-              <option value="">All</option>
-              {tutors.map((t) => (
-                <option key={t.userId} value={t.userId}>
-                  {formatOrgMemberOptionLabel(t)}
-                </option>
-              ))}
-            </select>
-          </label>
-        ) : null}
-      </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="lessons-student-filter">Student</Label>
+              <Select
+                value={studentFilter || ALL_STUDENTS}
+                onValueChange={(value) =>
+                  setStudentFilter(value === ALL_STUDENTS ? "" : value)
+                }
+                disabled={studentsQ.isLoading}
+              >
+                <SelectTrigger id="lessons-student-filter" className="w-full">
+                  <SelectValue placeholder="All students" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_STUDENTS}>All students</SelectItem>
+                  {(studentsQ.data ?? []).map((s) => (
+                    <SelectItem key={s.id} value={s.id}>
+                      {s.firstName} {s.lastName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {canUseTutorFilter ? (
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="lessons-tutor-filter">Tutor</Label>
+                <Select
+                  value={tutorFilter || ALL_TUTORS}
+                  onValueChange={(value) =>
+                    setTutorFilter(value === ALL_TUTORS ? "" : value)
+                  }
+                  disabled={membersQ.isLoading}
+                >
+                  <SelectTrigger id="lessons-tutor-filter" className="w-full">
+                    <SelectValue placeholder="All tutors" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={ALL_TUTORS}>All tutors</SelectItem>
+                    {tutors.map((t) => (
+                      <SelectItem key={t.userId} value={t.userId}>
+                        {formatOrgMemberOptionLabel(t)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : null}
+          </div>
 
-      {studentsQ.isLoading || subjectsQ.isLoading || membersQ.isLoading ? (
-        <p style={{ marginTop: 16 }}>Loading filters…</p>
+          {loadingReferences ? (
+            <div className="grid gap-3 md:grid-cols-2">
+              <Skeleton className="h-12 w-full" />
+              {canUseTutorFilter ? <Skeleton className="h-12 w-full" /> : null}
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      {referenceError ? (
+        <Alert variant="destructive">
+          <AlertDescription>
+            {referenceError instanceof Error
+              ? referenceError.message
+              : "Some lesson metadata could not be loaded"}
+          </AlertDescription>
+        </Alert>
+      ) : null}
+
+      {lessonsQ.isLoading ? (
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </div>
       ) : null}
 
-      {lessonsQ.isLoading ? <p style={{ marginTop: 16 }}>Loading lessons…</p> : null}
       {lessonsQ.error ? (
-        <p style={{ color: "#b91c1c", marginTop: 16 }}>
-          {lessonsQ.error instanceof Error
-            ? lessonsQ.error.message
-            : "Could not load lessons"}
-        </p>
+        <Alert variant="destructive">
+          <AlertDescription>
+            {lessonsQ.error instanceof Error
+              ? lessonsQ.error.message
+              : "Could not load lessons"}
+          </AlertDescription>
+        </Alert>
       ) : null}
 
       {!lessonsQ.isLoading &&
       !lessonsQ.error &&
       rangeValid &&
       sortedLessons.length === 0 ? (
-        <p style={{ opacity: 0.85, marginTop: 16 }}>
-          No lessons in this range.
-          {isAdmin ? (
-            <>
-              {" "}
-              <Link href={`${base}/new`}>Schedule one</Link>.
-            </>
-          ) : null}
-        </p>
+        <Card>
+          <CardContent className="flex flex-col gap-3 pt-6">
+            <p className="m-0 max-w-prose text-sm text-muted-foreground">
+              No lessons are scheduled in this range.
+            </p>
+            {isAdmin ? (
+              <Button size="sm" asChild className="w-fit">
+                <Link href={`${base}/new`}>Schedule a lesson</Link>
+              </Button>
+            ) : null}
+          </CardContent>
+        </Card>
       ) : null}
 
       {!lessonsQ.isLoading && !lessonsQ.error && sortedLessons.length > 0 ? (
-        <ul style={{ listStyle: "none", padding: 0, marginTop: 16 }}>
-          {sortedLessons.map((lesson) => {
-            const stu = studentById.get(lesson.studentId);
-            const sub = subjectById.get(lesson.subjectId);
-            const tut = tutorByUserId.get(lesson.tutorId);
-            const studentLabel = stu
-              ? `${stu.firstName} ${stu.lastName}`
-              : lesson.studentId;
-            const subjectLabel = sub?.name ?? lesson.subjectId;
-            const tutorLabel = tut?.email ?? lesson.tutorId;
-            return (
-              <li
-                key={lesson.id}
-                style={{
-                  borderBottom: "1px solid #eee",
-                  padding: "12px 0",
-                }}
-              >
-                <Link
-                  href={`${base}/${lesson.id}`}
-                  style={{ fontSize: 16, fontWeight: 600 }}
+        <Card className="py-0">
+          <CardContent className="flex flex-col gap-0 px-0 py-0">
+            {sortedLessons.map((lesson) => {
+              const stu = studentById.get(lesson.studentId);
+              const sub = subjectById.get(lesson.subjectId);
+              const tut = tutorByUserId.get(lesson.tutorId);
+              const studentLabel = stu
+                ? `${stu.firstName} ${stu.lastName}`
+                : lesson.studentId;
+              const subjectLabel = sub?.name ?? lesson.subjectId;
+              const tutorLabel = tut?.email ?? lesson.tutorId;
+
+              return (
+                <div
+                  key={lesson.id}
+                  className="border-b border-border px-4 py-4 transition-colors last:border-b-0 hover:bg-muted/30"
                 >
-                  {formatIsoDateTime(lesson.startsAt)} →{" "}
-                  {formatIsoDateTime(lesson.endsAt)}
-                </Link>
-                <div style={{ fontSize: 14, opacity: 0.85, marginTop: 4 }}>
-                  {studentLabel} · {subjectLabel} · {tutorLabel}
-                </div>
-                <div style={{ fontSize: 13, marginTop: 4 }}>
-                  Status: <strong>{lesson.status}</strong>
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="min-w-0 flex-1">
+                      <Link
+                        href={`${base}/${lesson.id}`}
+                        className="text-base font-semibold text-foreground transition-colors hover:text-primary"
+                      >
+                        {formatIsoDateTime(lesson.startsAt)} →{" "}
+                        {formatIsoDateTime(lesson.endsAt)}
+                      </Link>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {studentLabel} · {subjectLabel} · {tutorLabel}
+                      </p>
+                    </div>
+                    <LessonStatusBadge status={lesson.status} className="self-start" />
+                  </div>
                 </div>
-              </li>
-            );
-          })}
-        </ul>
+              );
+            })}
+          </CardContent>
+        </Card>
       ) : null}
     </main>
   );

From ea01bb194f7f40186ad77f72c5fe591f900731bc Mon Sep 17 00:00:00 2001
From: Paul Smith <paul@pafsmith.dev>
Date: Mon, 6 Apr 2026 21:37:58 +0100
Subject: [PATCH 3/3] feat: enhance lesson creation and editing pages with
 improved UI components and error handling

---
 .../edit/tenant-lesson-edit-page.tsx          | 331 +++++++++++-------
 .../lessons/new/tenant-lesson-new-page.tsx    | 311 ++++++++++------
 2 files changed, 400 insertions(+), 242 deletions(-)

diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/edit/tenant-lesson-edit-page.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/edit/tenant-lesson-edit-page.tsx
index fe288d9..0017ddc 100644
--- a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/edit/tenant-lesson-edit-page.tsx
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/[lessonId]/edit/tenant-lesson-edit-page.tsx
@@ -3,11 +3,20 @@
 import type { components } from "@studiqo/api-client/generated";
 import { zodResolver } from "@/lib/zod-resolver";
 import { isStudiqoApiError } from "@studiqo/api-client/errors";
-import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useLessonDetailQuery, useUpdateLessonMutation } from "@/lib/api/lessons-query";
 import { useOrganizationMembersQuery } from "@/lib/api/organization-members-query";
 import { useSubjectsListQuery } from "@/lib/api/subjects-query";
@@ -25,6 +34,13 @@ import {
   type UpdateLessonForm,
 } from "@/lib/validation/lesson-forms";
 
+import {
+  LessonField,
+  LessonFormCard,
+  LessonFormPage,
+  LessonTextarea,
+} from "../../_components/lesson-form";
+
 type Lesson = components["schemas"]["Lesson"];
 type UpdateLessonBody = components["schemas"]["UpdateLessonRequest"];
 
@@ -107,75 +123,81 @@ export function TenantLessonEditPage() {
   }, [lesson, form]);
 
   const base = `/t/${tenantSlug}/lessons`;
+  const detailUrl = `${base}/${lessonId}`;
 
   if (!canManage) {
     return (
-      <main>
-        <h1 style={{ fontSize: 22 }}>Edit lesson</h1>
-        <p style={{ opacity: 0.85 }}>
-          Only organization admins can edit lessons.
-        </p>
-        <p>
-          <Link href={`${base}/${lessonId}`}>Back to lesson</Link>
-        </p>
-      </main>
+      <LessonFormPage title="Edit lesson" backHref={detailUrl} backLabel="Lesson">
+        <Alert>
+          <AlertDescription>
+            Only organization admins can edit lessons.
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
     );
   }
 
   if (orgsLoading || !organizationId) {
     return (
-      <main>
-        <p>
-          <Link href={`${base}/${lessonId}`}>← Lesson</Link>
-        </p>
-        <p>Loading…</p>
-      </main>
+      <LessonFormPage
+        title="Edit lesson"
+        backHref={detailUrl}
+        backLabel="Lesson"
+        description="Update schedule details, tutor assignment, subject, or notes."
+      >
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      </LessonFormPage>
     );
   }
 
   if (lessonQ.isLoading) {
     return (
-      <main>
-        <p>
-          <Link href={`${base}/${lessonId}`}>← Lesson</Link>
-        </p>
-        <p>Loading lesson…</p>
-      </main>
+      <LessonFormPage
+        title="Edit lesson"
+        backHref={detailUrl}
+        backLabel="Lesson"
+        description="Update schedule details, tutor assignment, subject, or notes."
+      >
+        <p className="text-sm text-muted-foreground">Loading lesson…</p>
+      </LessonFormPage>
     );
   }
 
   if (lessonQ.error || !lesson) {
     return (
-      <main>
-        <p>
-          <Link href={base}>← Lessons</Link>
-        </p>
-        <p style={{ color: "#b91c1c" }}>
-          {lessonQ.error instanceof Error
-            ? lessonQ.error.message
-            : "Could not load lesson"}
-        </p>
-      </main>
+      <LessonFormPage title="Edit lesson" backHref={base}>
+        <Alert variant="destructive">
+          <AlertDescription>
+            {lessonQ.error instanceof Error
+              ? lessonQ.error.message
+              : "Could not load lesson"}
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
     );
   }
 
   if (lesson.status !== "scheduled") {
     return (
-      <main>
-        <p>
-          <Link href={`${base}/${lessonId}`}>← Lesson</Link>
-        </p>
-        <h1 style={{ fontSize: 22 }}>Edit lesson</h1>
-        <p style={{ opacity: 0.85 }}>
-          Only scheduled lessons can be edited. This lesson is{" "}
-          <strong>{lesson.status}</strong>.
-        </p>
-      </main>
+      <LessonFormPage
+        title="Edit lesson"
+        backHref={detailUrl}
+        backLabel="Lesson"
+      >
+        <Alert>
+          <AlertDescription>
+            Only scheduled lessons can be edited. This lesson is{" "}
+            <strong>{lesson.status}</strong>.
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
     );
   }
 
   const editingLesson = lesson;
   const tutors = membersQ.data?.filter((m) => m.role === "tutor") ?? [];
+  const referenceError = subjectsQ.error ?? membersQ.error ?? null;
+  const loadingRefs = subjectsQ.isLoading || membersQ.isLoading;
 
   async function onSubmit(values: UpdateLessonForm) {
     setFormError(null);
@@ -193,99 +215,156 @@ export function TenantLessonEditPage() {
     }
   }
 
-  const loadingRefs = subjectsQ.isLoading || membersQ.isLoading;
+  if (referenceError) {
+    return (
+      <LessonFormPage
+        title="Edit lesson"
+        backHref={detailUrl}
+        backLabel="Lesson"
+        description="Update schedule details, tutor assignment, subject, or notes."
+      >
+        <Alert variant="destructive">
+          <AlertDescription>
+            {referenceError instanceof Error
+              ? referenceError.message
+              : "Could not load lesson references"}
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
+    );
+  }
 
   return (
-    <main style={{ maxWidth: 480 }}>
-      <p style={{ marginBottom: 16 }}>
-        <Link href={`${base}/${lesson.id}`}>← Lesson</Link>
-      </p>
-      <h1 style={{ fontSize: 22 }}>Edit lesson</h1>
+    <LessonFormPage
+      title="Edit lesson"
+      backHref={`${base}/${lesson.id}`}
+      backLabel="Lesson"
+      description="Update schedule details, tutor assignment, subject, or notes."
+    >
+      {loadingRefs ? (
+        <p className="text-sm text-muted-foreground">Loading references…</p>
+      ) : null}
 
-      {loadingRefs ? <p>Loading…</p> : null}
-
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 16 }}
+      <LessonFormCard
+        title="Lesson details"
+        description="Only changed fields are sent to the API."
       >
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Tutor</span>
-          <select
-            {...form.register("tutorId")}
-            style={{ padding: 8, fontSize: 15 }}
-          >
-            {tutors.map((m) => (
-              <option key={m.userId} value={m.userId}>
-                {formatOrgMemberOptionLabel(m)}
-              </option>
-            ))}
-          </select>
-        </label>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+          <LessonField label="Tutor" htmlFor="edit-lesson-tutor">
+            <Controller
+              control={form.control}
+              name="tutorId"
+              render={({ field }) => (
+                <Select
+                  value={field.value || undefined}
+                  onValueChange={field.onChange}
+                  disabled={loadingRefs}
+                >
+                  <SelectTrigger id="edit-lesson-tutor" className="w-full">
+                    <SelectValue placeholder="Select tutor…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tutors.map((member) => (
+                      <SelectItem key={member.userId} value={member.userId}>
+                        {formatOrgMemberOptionLabel(member)}
+                      </SelectItem>
+                    ))}
+                    {!tutors.some((member) => member.userId === editingLesson.tutorId) ? (
+                      <SelectItem value={editingLesson.tutorId}>
+                        Current tutor (id {editingLesson.tutorId.slice(0, 8)}…)
+                      </SelectItem>
+                    ) : null}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </LessonField>
 
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Subject</span>
-          <select
-            {...form.register("subjectId")}
-            style={{ padding: 8, fontSize: 15 }}
-          >
-            {(subjectsQ.data ?? []).map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.name}
-              </option>
-            ))}
-          </select>
-        </label>
+          <LessonField label="Subject" htmlFor="edit-lesson-subject">
+            <Controller
+              control={form.control}
+              name="subjectId"
+              render={({ field }) => (
+                <Select
+                  value={field.value || undefined}
+                  onValueChange={field.onChange}
+                  disabled={loadingRefs}
+                >
+                  <SelectTrigger id="edit-lesson-subject" className="w-full">
+                    <SelectValue placeholder="Select subject…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(subjectsQ.data ?? []).map((subject) => (
+                      <SelectItem key={subject.id} value={subject.id}>
+                        {subject.name}
+                      </SelectItem>
+                    ))}
+                    {!subjectsQ.data?.some((subject) => subject.id === editingLesson.subjectId) ? (
+                      <SelectItem value={editingLesson.subjectId}>
+                        Current subject (id {editingLesson.subjectId.slice(0, 8)}…)
+                      </SelectItem>
+                    ) : null}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </LessonField>
 
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Starts</span>
-          <input
-            type="datetime-local"
-            {...form.register("startsAtLocal")}
-            style={{ padding: 8, fontSize: 15 }}
-          />
-        </label>
+          <LessonField
+            label="Starts"
+            htmlFor="edit-lesson-starts"
+            error={form.formState.errors.startsAtLocal?.message}
+          >
+            <Input
+              id="edit-lesson-starts"
+              type="datetime-local"
+              {...form.register("startsAtLocal")}
+              aria-invalid={!!form.formState.errors.startsAtLocal}
+            />
+          </LessonField>
 
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Ends</span>
-          <input
-            type="datetime-local"
-            {...form.register("endsAtLocal")}
-            style={{ padding: 8, fontSize: 15 }}
-          />
-        </label>
+          <LessonField
+            label="Ends"
+            htmlFor="edit-lesson-ends"
+            error={form.formState.errors.endsAtLocal?.message}
+          >
+            <Input
+              id="edit-lesson-ends"
+              type="datetime-local"
+              {...form.register("endsAtLocal")}
+              aria-invalid={!!form.formState.errors.endsAtLocal}
+            />
+          </LessonField>
 
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Notes</span>
-          <textarea
-            {...form.register("notes")}
-            rows={4}
-            style={{ padding: 8, fontSize: 15 }}
-          />
-        </label>
+          <LessonField label="Notes" htmlFor="edit-lesson-notes">
+            <LessonTextarea
+              id="edit-lesson-notes"
+              rows={4}
+              {...form.register("notes")}
+            />
+          </LessonField>
 
-        {form.formState.errors.root ? (
-          <span style={{ color: "#b91c1c", fontSize: 13 }}>
-            {form.formState.errors.root.message}
-          </span>
-        ) : null}
-        {form.formState.errors.endsAtLocal ? (
-          <span style={{ color: "#b91c1c", fontSize: 13 }}>
-            {form.formState.errors.endsAtLocal.message}
-          </span>
-        ) : null}
+          {form.formState.errors.root?.message ? (
+            <Alert variant="destructive">
+              <AlertDescription>{form.formState.errors.root.message}</AlertDescription>
+            </Alert>
+          ) : null}
 
-        {formError ? (
-          <p style={{ color: "#b91c1c", margin: 0 }}>{formError}</p>
-        ) : null}
+          {formError ? (
+            <Alert variant="destructive">
+              <AlertDescription>{formError}</AlertDescription>
+            </Alert>
+          ) : null}
 
-        <button
-          type="submit"
-          disabled={updateLesson.isPending || loadingRefs}
-          style={{ padding: "10px 14px", fontSize: 15, marginTop: 8 }}
-        >
-          {updateLesson.isPending ? "Saving…" : "Save changes"}
-        </button>
-      </form>
-    </main>
+          <Button
+            type="submit"
+            disabled={updateLesson.isPending || loadingRefs}
+            className="w-fit"
+          >
+            {updateLesson.isPending ? "Saving…" : "Save changes"}
+          </Button>
+        </form>
+      </LessonFormCard>
+    </LessonFormPage>
   );
 }
diff --git a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/new/tenant-lesson-new-page.tsx b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/new/tenant-lesson-new-page.tsx
index adefe4f..7eebc05 100644
--- a/apps/web/app/t/[tenantSlug]/(workspace)/lessons/new/tenant-lesson-new-page.tsx
+++ b/apps/web/app/t/[tenantSlug]/(workspace)/lessons/new/tenant-lesson-new-page.tsx
@@ -2,11 +2,20 @@
 
 import { zodResolver } from "@/lib/zod-resolver";
 import { isStudiqoApiError } from "@studiqo/api-client/errors";
-import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useCreateLessonMutation } from "@/lib/api/lessons-query";
 import { useStudentsListQuery } from "@/lib/api/students-query";
 import { useSubjectsListQuery } from "@/lib/api/subjects-query";
@@ -22,6 +31,12 @@ import {
   type CreateLessonForm,
 } from "@/lib/validation/lesson-forms";
 
+import {
+  LessonField,
+  LessonFormCard,
+  LessonFormPage,
+} from "../_components/lesson-form";
+
 function defaultLessonTimes(): { start: string; end: string } {
   const start = new Date();
   start.setMinutes(0, 0, 0);
@@ -60,32 +75,58 @@ export function TenantLessonNewPage() {
     },
   });
 
-  const studentId = form.watch("studentId");
+  const studentId = useWatch({
+    control: form.control,
+    name: "studentId",
+  });
   const students = studentsQ.data ?? [];
+  const subjects = subjectsQ.data ?? [];
   const selectedStudent = students.find((s) => s.id === studentId);
 
   const base = `/t/${tenantSlug}/lessons`;
+  const referenceError = studentsQ.error ?? subjectsQ.error ?? null;
+  const loadingRefs = studentsQ.isLoading || subjectsQ.isLoading;
+  const missingReferences = students.length === 0 || subjects.length === 0;
 
   if (!canManage) {
     return (
-      <main>
-        <h1 style={{ fontSize: 22 }}>New lesson</h1>
-        <p style={{ opacity: 0.85 }}>
-          Only organization admins can create lessons.
-        </p>
-        <p>
-          <Link href={base}>Back to lessons</Link>
-        </p>
-      </main>
+      <LessonFormPage title="New lesson" backHref={base}>
+        <Alert>
+          <AlertDescription>
+            Only organization admins can create lessons.
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
     );
   }
 
   if (orgsLoading || !organizationId) {
     return (
-      <main>
-        <h1 style={{ fontSize: 22 }}>New lesson</h1>
-        <p>Loading…</p>
-      </main>
+      <LessonFormPage
+        title="New lesson"
+        backHref={base}
+        description="Set the student, subject, and time window for a new lesson."
+      >
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      </LessonFormPage>
+    );
+  }
+
+  if (referenceError) {
+    return (
+      <LessonFormPage
+        title="New lesson"
+        backHref={base}
+        description="Set the student, subject, and time window for a new lesson."
+      >
+        <Alert variant="destructive">
+          <AlertDescription>
+            {referenceError instanceof Error
+              ? referenceError.message
+              : "Could not load lesson references"}
+          </AlertDescription>
+        </Alert>
+      </LessonFormPage>
     );
   }
 
@@ -113,113 +154,151 @@ export function TenantLessonNewPage() {
     }
   }
 
-  const loadingRefs = studentsQ.isLoading || subjectsQ.isLoading;
-
   return (
-    <main style={{ maxWidth: 480 }}>
-      <p style={{ marginBottom: 16 }}>
-        <Link href={base}>← Lessons</Link>
-      </p>
-      <h1 style={{ fontSize: 22 }}>New lesson</h1>
+    <LessonFormPage
+      title="New lesson"
+      backHref={base}
+      description="Set the student, subject, and time window for a new lesson."
+    >
+      {loadingRefs ? (
+        <p className="text-sm text-muted-foreground">Loading references…</p>
+      ) : null}
 
-      {loadingRefs ? <p>Loading…</p> : null}
+      {missingReferences ? (
+        <Alert>
+          <AlertDescription>
+            Add at least one student and one subject before scheduling a
+            lesson.
+          </AlertDescription>
+        </Alert>
+      ) : null}
 
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 16 }}
+      <LessonFormCard
+        title="Schedule lesson"
+        description="The assigned tutor is taken from the selected student record."
       >
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Student</span>
-          <select
-            {...form.register("studentId")}
-            style={{ padding: 8, fontSize: 15 }}
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+          <LessonField
+            label="Student"
+            htmlFor="new-lesson-student"
+            error={form.formState.errors.studentId?.message}
           >
-            <option value="">Select student…</option>
-            {students.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.firstName} {s.lastName}
-              </option>
-            ))}
-          </select>
-          {form.formState.errors.studentId ? (
-            <span style={{ color: "#b91c1c", fontSize: 13 }}>
-              {form.formState.errors.studentId.message}
-            </span>
+            <Controller
+              control={form.control}
+              name="studentId"
+              render={({ field }) => (
+                <Select
+                  value={field.value || undefined}
+                  onValueChange={field.onChange}
+                  disabled={loadingRefs || students.length === 0}
+                >
+                  <SelectTrigger
+                    id="new-lesson-student"
+                    className="w-full"
+                    aria-invalid={!!form.formState.errors.studentId}
+                  >
+                    <SelectValue placeholder="Select student…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {students.map((student) => (
+                      <SelectItem key={student.id} value={student.id}>
+                        {student.firstName} {student.lastName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </LessonField>
+
+          {selectedStudent && !selectedStudent.tutorId ? (
+            <Alert>
+              <AlertDescription>
+                This student has no assigned tutor. Update the student before
+                creating a lesson.
+              </AlertDescription>
+            </Alert>
           ) : null}
-        </label>
-
-        {selectedStudent && !selectedStudent.tutorId ? (
-          <p style={{ color: "#b45309", fontSize: 14, margin: 0 }}>
-            This student has no tutor assigned. Update the student before
-            creating a lesson.
-          </p>
-        ) : selectedStudent?.tutorId ? (
-          <p style={{ fontSize: 14, opacity: 0.85, margin: 0 }}>
-            Tutor for this lesson is the student&apos;s assigned tutor (set on
-            the student record).
-          </p>
-        ) : null}
-
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Subject</span>
-          <select
-            {...form.register("subjectId")}
-            style={{ padding: 8, fontSize: 15 }}
+
+          <LessonField
+            label="Subject"
+            htmlFor="new-lesson-subject"
+            hint={
+              selectedStudent?.tutorId
+                ? "Tutor for this lesson comes from the student's assigned tutor."
+                : undefined
+            }
+            error={form.formState.errors.subjectId?.message}
           >
-            <option value="">Select subject…</option>
-            {(subjectsQ.data ?? []).map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.name}
-              </option>
-            ))}
-          </select>
-          {form.formState.errors.subjectId ? (
-            <span style={{ color: "#b91c1c", fontSize: 13 }}>
-              {form.formState.errors.subjectId.message}
-            </span>
-          ) : null}
-        </label>
-
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Starts</span>
-          <input
-            type="datetime-local"
-            {...form.register("startsAtLocal")}
-            style={{ padding: 8, fontSize: 15 }}
-          />
-          {form.formState.errors.startsAtLocal ? (
-            <span style={{ color: "#b91c1c", fontSize: 13 }}>
-              {form.formState.errors.startsAtLocal.message}
-            </span>
-          ) : null}
-        </label>
-
-        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-          <span>Ends</span>
-          <input
-            type="datetime-local"
-            {...form.register("endsAtLocal")}
-            style={{ padding: 8, fontSize: 15 }}
-          />
-          {form.formState.errors.endsAtLocal ? (
-            <span style={{ color: "#b91c1c", fontSize: 13 }}>
-              {form.formState.errors.endsAtLocal.message}
-            </span>
+            <Controller
+              control={form.control}
+              name="subjectId"
+              render={({ field }) => (
+                <Select
+                  value={field.value || undefined}
+                  onValueChange={field.onChange}
+                  disabled={loadingRefs || subjects.length === 0}
+                >
+                  <SelectTrigger
+                    id="new-lesson-subject"
+                    className="w-full"
+                    aria-invalid={!!form.formState.errors.subjectId}
+                  >
+                    <SelectValue placeholder="Select subject…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {subjects.map((subject) => (
+                      <SelectItem key={subject.id} value={subject.id}>
+                        {subject.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </LessonField>
+
+          <LessonField
+            label="Starts"
+            htmlFor="new-lesson-starts"
+            error={form.formState.errors.startsAtLocal?.message}
+          >
+            <Input
+              id="new-lesson-starts"
+              type="datetime-local"
+              {...form.register("startsAtLocal")}
+              aria-invalid={!!form.formState.errors.startsAtLocal}
+            />
+          </LessonField>
+
+          <LessonField
+            label="Ends"
+            htmlFor="new-lesson-ends"
+            error={form.formState.errors.endsAtLocal?.message}
+          >
+            <Input
+              id="new-lesson-ends"
+              type="datetime-local"
+              {...form.register("endsAtLocal")}
+              aria-invalid={!!form.formState.errors.endsAtLocal}
+            />
+          </LessonField>
+
+          {formError ? (
+            <Alert variant="destructive">
+              <AlertDescription>{formError}</AlertDescription>
+            </Alert>
           ) : null}
-        </label>
-
-        {formError ? (
-          <p style={{ color: "#b91c1c", margin: 0 }}>{formError}</p>
-        ) : null}
-
-        <button
-          type="submit"
-          disabled={createLesson.isPending || loadingRefs}
-          style={{ padding: "10px 14px", fontSize: 15, marginTop: 8 }}
-        >
-          {createLesson.isPending ? "Creating…" : "Create lesson"}
-        </button>
-      </form>
-    </main>
+
+          <Button
+            type="submit"
+            disabled={createLesson.isPending || loadingRefs || missingReferences}
+            className="w-fit"
+          >
+            {createLesson.isPending ? "Creating…" : "Create lesson"}
+          </Button>
+        </form>
+      </LessonFormCard>
+    </LessonFormPage>
   );
 }