完整性更新

现在已经实现了大部分基础功能

src/app/(dashboard)/teacher/classes/insights/page.tsx

@@ -0,0 +1,259 @@
+import Link from "next/link"
+import { Suspense } from "react"
+import { BarChart3 } from "lucide-react"
+
+import { getClassHomeworkInsights, getTeacherClasses } from "@/modules/classes/data-access"
+import { InsightsFilters } from "@/modules/classes/components/insights-filters"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+import { Badge } from "@/shared/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Button } from "@/shared/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
+import { formatDate } from "@/shared/lib/utils"
+
+export const dynamic = "force-dynamic"
+
+type SearchParams = { [key: string]: string | string[] | undefined }
+
+const getParam = (params: SearchParams, key: string) => {
+  const v = params[key]
+  return Array.isArray(v) ? v[0] : v
+}
+
+const formatNumber = (v: number | null, digits = 1) => {
+  if (typeof v !== "number" || Number.isNaN(v)) return "-"
+  return v.toFixed(digits)
+}
+
+function InsightsResultsFallback() {
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, idx) => (
+          <div key={idx} className="rounded-lg border bg-card">
+            <div className="p-6">
+              <Skeleton className="h-5 w-28" />
+              <Skeleton className="mt-3 h-8 w-20" />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="rounded-md border bg-card">
+        <div className="p-4">
+          <Skeleton className="h-8 w-full" />
+        </div>
+        <div className="space-y-2 p-4 pt-0">
+          {Array.from({ length: 8 }).map((_, idx) => (
+            <Skeleton key={idx} className="h-10 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+async function InsightsResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const params = await searchParams
+  const classId = getParam(params, "classId")
+
+  if (!classId || classId === "all") {
+    return (
+      <EmptyState
+        icon={BarChart3}
+        title="Select a class to view insights"
+        description="Pick a class to see latest homework and historical score statistics."
+        className="h-[360px] bg-card"
+      />
+    )
+  }
+
+  const insights = await getClassHomeworkInsights({ classId, limit: 50 })
+  if (!insights) {
+    return (
+      <EmptyState
+        icon={BarChart3}
+        title="Class not found"
+        description="This class may not exist or is not accessible."
+        className="h-[360px] bg-card"
+      />
+    )
+  }
+
+  const hasAssignments = insights.assignments.length > 0
+
+  if (!hasAssignments) {
+    return (
+      <EmptyState
+        icon={BarChart3}
+        title="No homework data for this class"
+        description="No homework assignments were targeted to students in this class yet."
+        className="h-[360px] bg-card"
+      />
+    )
+  }
+
+  const latest = insights.latest
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Students</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{insights.studentCounts.total}</div>
+            <div className="text-xs text-muted-foreground">
+              Active {insights.studentCounts.active} · Inactive {insights.studentCounts.inactive}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Assignments</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{insights.assignments.length}</div>
+            <div className="text-xs text-muted-foreground">Latest: {latest ? formatDate(latest.createdAt) : "-"}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Overall scores</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}</div>
+            <div className="text-xs text-muted-foreground">
+              Median {formatNumber(insights.overallScores.median, 1)} · Count {insights.overallScores.count}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {latest && (
+        <Card>
+          <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div>
+              <CardTitle className="text-base">Latest assignment</CardTitle>
+              <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
+                <span className="font-medium text-foreground">{latest.title}</span>
+                <Badge variant="outline" className="capitalize">
+                  {latest.status}
+                </Badge>
+                <span>·</span>
+                <span>{formatDate(latest.createdAt)}</span>
+                {latest.dueAt ? (
+                  <>
+                    <span>·</span>
+                    <span>Due {formatDate(latest.dueAt)}</span>
+                  </>
+                ) : null}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button asChild variant="outline" size="sm">
+                <Link href={`/teacher/homework/assignments/${latest.assignmentId}`}>Open</Link>
+              </Button>
+              <Button asChild variant="outline" size="sm">
+                <Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>Submissions</Link>
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="grid gap-4 md:grid-cols-5">
+            <div>
+              <div className="text-sm text-muted-foreground">Targeted</div>
+              <div className="text-lg font-semibold">{latest.targetCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Submitted</div>
+              <div className="text-lg font-semibold">{latest.submittedCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Graded</div>
+              <div className="text-lg font-semibold">{latest.gradedCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Average</div>
+              <div className="text-lg font-semibold">{formatNumber(latest.scoreStats.avg, 1)}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Median</div>
+              <div className="text-lg font-semibold">{formatNumber(latest.scoreStats.median, 1)}</div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="rounded-md border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Assignment</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Due</TableHead>
+              <TableHead className="text-right">Targeted</TableHead>
+              <TableHead className="text-right">Submitted</TableHead>
+              <TableHead className="text-right">Graded</TableHead>
+              <TableHead className="text-right">Avg</TableHead>
+              <TableHead className="text-right">Median</TableHead>
+              <TableHead className="text-right">Min</TableHead>
+              <TableHead className="text-right">Max</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {insights.assignments.map((a) => (
+              <TableRow key={a.assignmentId}>
+                <TableCell className="font-medium">
+                  <Link href={`/teacher/homework/assignments/${a.assignmentId}`} className="hover:underline">
+                    {a.title}
+                  </Link>
+                  <div className="text-xs text-muted-foreground">Created {formatDate(a.createdAt)}</div>
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline" className="capitalize">
+                    {a.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
+                <TableCell className="text-right">{a.targetCount}</TableCell>
+                <TableCell className="text-right">{a.submittedCount}</TableCell>
+                <TableCell className="text-right">{a.gradedCount}</TableCell>
+                <TableCell className="text-right">{formatNumber(a.scoreStats.avg, 1)}</TableCell>
+                <TableCell className="text-right">{formatNumber(a.scoreStats.median, 1)}</TableCell>
+                <TableCell className="text-right">{formatNumber(a.scoreStats.min, 0)}</TableCell>
+                <TableCell className="text-right">{formatNumber(a.scoreStats.max, 0)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
+
+export default async function ClassInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const classes = await getTeacherClasses()
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Class Insights</h2>
+          <p className="text-muted-foreground">Latest homework and historical score statistics for a class.</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
+          <InsightsFilters classes={classes} />
+        </Suspense>
+
+        <Suspense fallback={<InsightsResultsFallback />}>
+          <InsightsResults searchParams={searchParams} />
+        </Suspense>
+      </div>
+    </div>
+  )
+}
+

src/app/(dashboard)/teacher/classes/my/[id]/page.tsx

@@ -0,0 +1,315 @@
+import Link from "next/link"
+import { notFound } from "next/navigation"
+
+import { getClassHomeworkInsights, getClassSchedule, getClassStudents } from "@/modules/classes/data-access"
+import { ScheduleView } from "@/modules/classes/components/schedule-view"
+import { Badge } from "@/shared/components/ui/badge"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
+import { formatDate } from "@/shared/lib/utils"
+
+export const dynamic = "force-dynamic"
+
+type SearchParams = { [key: string]: string | string[] | undefined }
+
+const getParam = (params: SearchParams, key: string) => {
+  const v = params[key]
+  return Array.isArray(v) ? v[0] : v
+}
+
+const formatNumber = (v: number | null, digits = 1) => {
+  if (typeof v !== "number" || Number.isNaN(v)) return "-"
+  return v.toFixed(digits)
+}
+
+export default async function ClassDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>
+  searchParams: Promise<SearchParams>
+}) {
+  const { id } = await params
+  const sp = await searchParams
+  const hw = getParam(sp, "hw")
+  const hwFilter = hw === "active" || hw === "overdue" ? hw : "all"
+
+  const [insights, students, schedule] = await Promise.all([
+    getClassHomeworkInsights({ classId: id, limit: 50 }),
+    getClassStudents({ classId: id }),
+    getClassSchedule({ classId: id }),
+  ])
+
+  if (!insights) return notFound()
+
+  const latest = insights.latest
+  const filteredAssignments = insights.assignments.filter((a) => {
+    if (hwFilter === "all") return true
+    if (hwFilter === "overdue") return a.isOverdue
+    if (hwFilter === "active") return a.isActive
+    return true
+  })
+  const hasAssignments = filteredAssignments.length > 0
+  const scheduleBuilderClasses = [
+    {
+      id: insights.class.id,
+      name: insights.class.name,
+      grade: insights.class.grade,
+      homeroom: insights.class.homeroom ?? null,
+      room: insights.class.room ?? null,
+      studentCount: insights.studentCounts.total,
+    },
+  ]
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Button asChild variant="outline" size="sm">
+              <Link href="/teacher/classes/my">Back</Link>
+            </Button>
+            <Badge variant="secondary">{insights.class.grade}</Badge>
+            <Badge variant="outline">{insights.studentCounts.total} students</Badge>
+          </div>
+          <h2 className="text-2xl font-bold tracking-tight">{insights.class.name}</h2>
+          <div className="text-sm text-muted-foreground">
+            {insights.class.room ? `Room: ${insights.class.room}` : "Room: Not set"}
+            {insights.class.homeroom ? ` · Homeroom: ${insights.class.homeroom}` : null}
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <Button asChild variant="outline">
+            <Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>Students</Link>
+          </Button>
+          <Button asChild variant="outline">
+            <Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>Schedule</Link>
+          </Button>
+          <Button asChild variant="outline">
+            <Link href={`/teacher/classes/insights?classId=${encodeURIComponent(insights.class.id)}`}>Insights</Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Students</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{insights.studentCounts.total}</div>
+            <div className="text-xs text-muted-foreground">
+              Active {insights.studentCounts.active} · Inactive {insights.studentCounts.inactive}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Schedule items</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{schedule.length}</div>
+            <div className="text-xs text-muted-foreground">Weekly timetable entries</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Assignments</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{insights.assignments.length}</div>
+            <div className="text-xs text-muted-foreground">{latest ? `Latest ${formatDate(latest.createdAt)}` : "No homework yet"}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Overall avg</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}</div>
+            <div className="text-xs text-muted-foreground">
+              Median {formatNumber(insights.overallScores.median, 1)} · Count {insights.overallScores.count}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {latest ? (
+        <Card>
+          <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div>
+              <CardTitle className="text-base">Latest homework</CardTitle>
+              <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                <span className="font-medium text-foreground">{latest.title}</span>
+                <Badge variant="outline" className="capitalize">
+                  {latest.status}
+                </Badge>
+                <span>·</span>
+                <span>{formatDate(latest.createdAt)}</span>
+                {latest.dueAt ? (
+                  <>
+                    <span>·</span>
+                    <span>Due {formatDate(latest.dueAt)}</span>
+                  </>
+                ) : null}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button asChild variant="outline" size="sm">
+                <Link href={`/teacher/homework/assignments/${latest.assignmentId}`}>Open</Link>
+              </Button>
+              <Button asChild variant="outline" size="sm">
+                <Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>Submissions</Link>
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="grid gap-4 md:grid-cols-5">
+            <div>
+              <div className="text-sm text-muted-foreground">Targeted</div>
+              <div className="text-lg font-semibold">{latest.targetCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Submitted</div>
+              <div className="text-lg font-semibold">{latest.submittedCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Graded</div>
+              <div className="text-lg font-semibold">{latest.gradedCount}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Average</div>
+              <div className="text-lg font-semibold">{formatNumber(latest.scoreStats.avg, 1)}</div>
+            </div>
+            <div>
+              <div className="text-sm text-muted-foreground">Median</div>
+              <div className="text-lg font-semibold">{formatNumber(latest.scoreStats.median, 1)}</div>
+            </div>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-base">Students (preview)</CardTitle>
+            <Button asChild variant="outline" size="sm">
+              <Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>View all</Link>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {students.length === 0 ? (
+              <div className="text-sm text-muted-foreground">No students enrolled.</div>
+            ) : (
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Email</TableHead>
+                      <TableHead>Status</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {students.slice(0, 8).map((s) => (
+                      <TableRow key={s.id}>
+                        <TableCell className="font-medium">{s.name}</TableCell>
+                        <TableCell className="text-muted-foreground">{s.email}</TableCell>
+                        <TableCell>
+                          <Badge variant="outline" className="capitalize">
+                            {s.status}
+                          </Badge>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-base">Schedule</CardTitle>
+            <Button asChild variant="outline" size="sm">
+              <Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>View all</Link>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <ScheduleView schedule={schedule} classes={scheduleBuilderClasses} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <CardTitle className="text-base">Homework history</CardTitle>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button asChild size="sm" variant={hwFilter === "all" ? "secondary" : "outline"}>
+              <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}`}>All</Link>
+            </Button>
+            <Button asChild size="sm" variant={hwFilter === "active" ? "secondary" : "outline"}>
+              <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=active`}>Active</Link>
+            </Button>
+            <Button asChild size="sm" variant={hwFilter === "overdue" ? "secondary" : "outline"}>
+              <Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=overdue`}>Overdue</Link>
+            </Button>
+            <Button asChild variant="outline" size="sm">
+              <Link href={`/teacher/homework/assignments?classId=${encodeURIComponent(insights.class.id)}`}>Open list</Link>
+            </Button>
+            <Button asChild size="sm">
+              <Link href={`/teacher/homework/assignments/create?classId=${encodeURIComponent(insights.class.id)}`}>New homework</Link>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {!hasAssignments ? (
+            <div className="text-sm text-muted-foreground">No homework assignments yet.</div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Assignment</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Due</TableHead>
+                    <TableHead className="text-right">Targeted</TableHead>
+                    <TableHead className="text-right">Submitted</TableHead>
+                    <TableHead className="text-right">Graded</TableHead>
+                    <TableHead className="text-right">Avg</TableHead>
+                    <TableHead className="text-right">Median</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredAssignments.map((a) => (
+                    <TableRow key={a.assignmentId}>
+                      <TableCell className="font-medium">
+                        <Link href={`/teacher/homework/assignments/${a.assignmentId}`} className="hover:underline">
+                          {a.title}
+                        </Link>
+                        <div className="text-xs text-muted-foreground">Created {formatDate(a.createdAt)}</div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="capitalize">
+                          {a.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
+                      <TableCell className="text-right">{a.targetCount}</TableCell>
+                      <TableCell className="text-right">{a.submittedCount}</TableCell>
+                      <TableCell className="text-right">{a.gradedCount}</TableCell>
+                      <TableCell className="text-right">{formatNumber(a.scoreStats.avg, 1)}</TableCell>
+                      <TableCell className="text-right">{formatNumber(a.scoreStats.median, 1)}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/teacher/classes/my/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <div key={idx} className="rounded-lg border bg-card p-6">
+            <div className="flex items-start justify-between gap-3">
+              <Skeleton className="h-5 w-[60%]" />
+              <Skeleton className="h-5 w-20" />
+            </div>
+            <Skeleton className="mt-3 h-4 w-32" />
+            <div className="mt-6 flex items-center justify-between">
+              <Skeleton className="h-4 w-28" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+            <div className="mt-4 grid grid-cols-2 gap-2">
+              <Skeleton className="h-9 w-full" />
+              <Skeleton className="h-9 w-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

src/app/(dashboard)/teacher/classes/my/page.tsx

@@ -1,10 +1,18 @@
-import { EmptyState } from "@/shared/components/ui/empty-state"
-import { Users } from "lucide-react"
+import { getTeacherClasses } from "@/modules/classes/data-access"
+import { MyClassesGrid } from "@/modules/classes/components/my-classes-grid"
+
+export const dynamic = "force-dynamic"
 
 export default function MyClassesPage() {
+  return <MyClassesPageImpl />
+}
+
+async function MyClassesPageImpl() {
+  const classes = await getTeacherClasses()
+
   return (
-    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
-      <div className="flex items-center justify-between space-y-2">
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
         <div>
           <h2 className="text-2xl font-bold tracking-tight">My Classes</h2>
           <p className="text-muted-foreground">
@@ -12,11 +20,8 @@ export default function MyClassesPage() {
           </p>
         </div>
       </div>
-      <EmptyState
-        title="No classes found"
-        description="You are not assigned to any classes yet."
-        icon={Users}
-      />
+
+      <MyClassesGrid classes={classes} />
     </div>
   )
 }

src/app/(dashboard)/teacher/classes/schedule/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Skeleton className="h-10 w-full" />
+      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <div key={idx} className="rounded-lg border bg-card p-6">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-5 w-20" />
+            </div>
+            <div className="mt-6 space-y-3">
+              <Skeleton className="h-4 w-[70%]" />
+              <Skeleton className="h-4 w-[85%]" />
+              <Skeleton className="h-4 w-[60%]" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

src/app/(dashboard)/teacher/classes/schedule/page.tsx

@@ -1,10 +1,73 @@
-import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Suspense } from "react"
 import { Calendar } from "lucide-react"
 
-export default function SchedulePage() {
+import { getClassSchedule, getTeacherClasses } from "@/modules/classes/data-access"
+import { ScheduleFilters } from "@/modules/classes/components/schedule-filters"
+import { ScheduleView } from "@/modules/classes/components/schedule-view"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export const dynamic = "force-dynamic"
+
+type SearchParams = { [key: string]: string | string[] | undefined }
+
+const getParam = (params: SearchParams, key: string) => {
+  const v = params[key]
+  return Array.isArray(v) ? v[0] : v
+}
+
+async function ScheduleResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const params = await searchParams
+  const classId = getParam(params, "classId")
+
+  const classes = await getTeacherClasses()
+  const schedule = await getClassSchedule({
+    classId: classId && classId !== "all" ? classId : undefined,
+  })
+
+  const hasFilters = Boolean(classId && classId !== "all")
+
+  if (schedule.length === 0) {
+    return (
+      <EmptyState
+        icon={Calendar}
+        title={hasFilters ? "No schedule for this class" : "No schedule available"}
+        description={hasFilters ? "Try selecting another class." : "Your class schedule has not been set up yet."}
+        action={hasFilters ? { label: "Clear filters", href: "/teacher/classes/schedule" } : undefined}
+        className="h-[360px] bg-card"
+      />
+    )
+  }
+
+  return <ScheduleView schedule={schedule} classes={classes} />
+}
+
+function ScheduleResultsFallback() {
   return (
-    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
-      <div className="flex items-center justify-between space-y-2">
+    <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+      {Array.from({ length: 6 }).map((_, idx) => (
+        <div key={idx} className="rounded-lg border bg-card p-6">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-16" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+          <div className="mt-6 space-y-3">
+            <Skeleton className="h-4 w-[70%]" />
+            <Skeleton className="h-4 w-[85%]" />
+            <Skeleton className="h-4 w-[60%]" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default async function SchedulePage({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const classes = await getTeacherClasses()
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
         <div>
           <h2 className="text-2xl font-bold tracking-tight">Schedule</h2>
           <p className="text-muted-foreground">
@@ -12,11 +75,16 @@ export default function SchedulePage() {
           </p>
         </div>
       </div>
-      <EmptyState
-        title="No schedule available"
-        description="Your class schedule has not been set up yet."
-        icon={Calendar}
-      />
+
+      <div className="space-y-4">
+        <Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
+          <ScheduleFilters classes={classes} />
+        </Suspense>
+
+        <Suspense fallback={<ScheduleResultsFallback />}>
+          <ScheduleResults searchParams={searchParams} />
+        </Suspense>
+      </div>
     </div>
   )
 }

src/app/(dashboard)/teacher/classes/students/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <Skeleton className="h-10 w-full" />
+      <div className="rounded-md border bg-card">
+        <div className="space-y-2 p-4">
+          {Array.from({ length: 10 }).map((_, idx) => (
+            <Skeleton key={idx} className="h-10 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/app/(dashboard)/teacher/classes/students/page.tsx

@@ -1,10 +1,74 @@
-import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Suspense } from "react"
 import { User } from "lucide-react"
 
-export default function StudentsPage() {
+import { getClassStudents, getTeacherClasses } from "@/modules/classes/data-access"
+import { StudentsFilters } from "@/modules/classes/components/students-filters"
+import { StudentsTable } from "@/modules/classes/components/students-table"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export const dynamic = "force-dynamic"
+
+type SearchParams = { [key: string]: string | string[] | undefined }
+
+const getParam = (params: SearchParams, key: string) => {
+  const v = params[key]
+  return Array.isArray(v) ? v[0] : v
+}
+
+async function StudentsResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const params = await searchParams
+
+  const q = getParam(params, "q") || undefined
+  const classId = getParam(params, "classId")
+
+  const filteredStudents = await getClassStudents({
+    q,
+    classId: classId && classId !== "all" ? classId : undefined,
+  })
+
+  const hasFilters = Boolean(q || (classId && classId !== "all"))
+
+  if (filteredStudents.length === 0) {
+    return (
+      <EmptyState
+        icon={User}
+        title={hasFilters ? "No students match your filters" : "No students found"}
+        description={hasFilters ? "Try clearing filters or adjusting keywords." : "There are no students in your classes yet."}
+        action={hasFilters ? { label: "Clear filters", href: "/teacher/classes/students" } : undefined}
+        className="h-[360px] bg-card"
+      />
+    )
+  }
+
   return (
-    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
-      <div className="flex items-center justify-between space-y-2">
+    <div className="rounded-md border bg-card">
+      <StudentsTable students={filteredStudents} />
+    </div>
+  )
+}
+
+function StudentsResultsFallback() {
+  return (
+    <div className="rounded-md border bg-card">
+      <div className="p-4">
+        <Skeleton className="h-8 w-full" />
+      </div>
+      <div className="space-y-2 p-4 pt-0">
+        {Array.from({ length: 8 }).map((_, idx) => (
+          <Skeleton key={idx} className="h-10 w-full" />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default async function StudentsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const classes = await getTeacherClasses()
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
         <div>
           <h2 className="text-2xl font-bold tracking-tight">Students</h2>
           <p className="text-muted-foreground">
@@ -12,11 +76,16 @@ export default function StudentsPage() {
           </p>
         </div>
       </div>
-      <EmptyState
-        title="No students found"
-        description="There are no students in your classes yet."
-        icon={User}
-      />
+
+      <div className="space-y-4">
+        <Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
+          <StudentsFilters classes={classes} />
+        </Suspense>
+
+        <Suspense fallback={<StudentsResultsFallback />}>
+          <StudentsResults searchParams={searchParams} />
+        </Suspense>
+      </div>
     </div>
   )
 }