完整性更新

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

src/modules/dashboard/components/admin-dashboard/admin-dashboard.tsx

@@ -0,0 +1,158 @@
+import type { ReactNode } from "react"
+import { Users, LayoutDashboard, BookOpen, FileText, ClipboardList, Library, Activity } from "lucide-react"
+
+import type { AdminDashboardData } from "@/modules/dashboard/types"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
+import { formatDate } from "@/shared/lib/utils"
+
+export function AdminDashboardView({ data }: { data: AdminDashboardData }) {
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+          <div className="text-sm text-muted-foreground">System overview across users, learning content, and activity.</div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="gap-2">
+            <Activity className="h-4 w-4" />
+            {data.activeSessionsCount} active sessions
+          </Badge>
+          <Badge variant="outline" className="gap-2">
+            <Users className="h-4 w-4" />
+            {data.userCount} users
+          </Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <KpiCard title="Users" value={data.userCount} icon={<Users className="h-4 w-4" />} />
+        <KpiCard title="Classes" value={data.classCount} icon={<LayoutDashboard className="h-4 w-4" />} />
+        <KpiCard title="Homework (published)" value={data.homeworkAssignmentPublishedCount} icon={<ClipboardList className="h-4 w-4" />} />
+        <KpiCard title="To grade" value={data.homeworkSubmissionToGradeCount} icon={<FileText className="h-4 w-4" />} />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle>User Roles</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {data.userRoleCounts.length === 0 ? (
+              <EmptyState title="No users" description="No user records found." />
+            ) : (
+              data.userRoleCounts.map((r) => (
+                <div key={r.role} className="flex items-center justify-between">
+                  <Badge variant="secondary">{r.role}</Badge>
+                  <div className="text-sm font-medium tabular-nums">{r.count}</div>
+                </div>
+              ))
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle>Content</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            <ContentRow label="Textbooks" value={data.textbookCount} icon={<Library className="h-4 w-4 text-muted-foreground" />} />
+            <ContentRow label="Chapters" value={data.chapterCount} icon={<BookOpen className="h-4 w-4 text-muted-foreground" />} />
+            <ContentRow label="Questions" value={data.questionCount} icon={<FileText className="h-4 w-4 text-muted-foreground" />} />
+            <ContentRow label="Exams" value={data.examCount} icon={<ClipboardList className="h-4 w-4 text-muted-foreground" />} />
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle>Homework Activity</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            <ContentRow label="Assignments" value={data.homeworkAssignmentCount} icon={<ClipboardList className="h-4 w-4 text-muted-foreground" />} />
+            <ContentRow label="Submissions" value={data.homeworkSubmissionCount} icon={<FileText className="h-4 w-4 text-muted-foreground" />} />
+            <ContentRow label="To grade" value={data.homeworkSubmissionToGradeCount} icon={<Activity className="h-4 w-4 text-muted-foreground" />} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Users</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {data.recentUsers.length === 0 ? (
+            <EmptyState title="No users yet" description="Seed the database to see users here." />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Created</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.recentUsers.map((u) => (
+                  <TableRow key={u.id}>
+                    <TableCell className="font-medium">{u.name || "-"}</TableCell>
+                    <TableCell className="text-muted-foreground">{u.email}</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{u.role ?? "unknown"}</Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">{formatDate(u.createdAt)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function KpiCard({
+  title,
+  value,
+  icon,
+}: {
+  title: string
+  value: number
+  icon: ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <div className="text-muted-foreground">{icon}</div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold tabular-nums">{value}</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function ContentRow({
+  label,
+  value,
+  icon,
+}: {
+  label: string
+  value: number
+  icon: ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        {icon}
+        <div className="text-sm text-muted-foreground">{label}</div>
+      </div>
+      <div className="text-sm font-medium tabular-nums">{value}</div>
+    </div>
+  )
+}

src/modules/dashboard/components/admin-view.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
-
-export function AdminDashboard() {
-  return (
-    <div className="space-y-6">
-      <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader><CardTitle>System Status</CardTitle></CardHeader>
-          <CardContent className="text-green-600 font-bold">Operational</CardContent>
-        </Card>
-        <Card>
-          <CardHeader><CardTitle>Total Users</CardTitle></CardHeader>
-          <CardContent>2,450</CardContent>
-        </Card>
-        <Card>
-          <CardHeader><CardTitle>Active Sessions</CardTitle></CardHeader>
-          <CardContent>142</CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}

src/modules/dashboard/components/student-dashboard/student-dashboard-header.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link"
+
+import { Button } from "@/shared/components/ui/button"
+
+export function StudentDashboardHeader({ studentName }: { studentName: string }) {
+  return (
+    <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
+      <div className="space-y-1">
+        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+        <div className="text-sm text-muted-foreground">Welcome back, {studentName}.</div>
+      </div>
+      <Button asChild variant="outline">
+        <Link href="/student/learning/assignments">View assignments</Link>
+      </Button>
+    </div>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-dashboard-view.tsx

@@ -0,0 +1,42 @@
+import type { StudentDashboardProps } from "@/modules/dashboard/types"
+
+import { StudentDashboardHeader } from "./student-dashboard-header"
+import { StudentGradesCard } from "./student-grades-card"
+import { StudentRankingCard } from "./student-ranking-card"
+import { StudentStatsGrid } from "./student-stats-grid"
+import { StudentTodayScheduleCard } from "./student-today-schedule-card"
+import { StudentUpcomingAssignmentsCard } from "./student-upcoming-assignments-card"
+
+export function StudentDashboard({
+  studentName,
+  enrolledClassCount,
+  dueSoonCount,
+  overdueCount,
+  gradedCount,
+  todayScheduleItems,
+  upcomingAssignments,
+  grades,
+}: StudentDashboardProps) {
+  return (
+    <div className="space-y-6">
+      <StudentDashboardHeader studentName={studentName} />
+
+      <StudentStatsGrid
+        enrolledClassCount={enrolledClassCount}
+        dueSoonCount={dueSoonCount}
+        overdueCount={overdueCount}
+        gradedCount={gradedCount}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <StudentGradesCard grades={grades} />
+        <StudentRankingCard ranking={grades.ranking} />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+        <StudentTodayScheduleCard items={todayScheduleItems} />
+        <StudentUpcomingAssignmentsCard upcomingAssignments={upcomingAssignments} />
+      </div>
+    </div>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-grades-card.tsx

@@ -0,0 +1,99 @@
+import Link from "next/link"
+import { BarChart3 } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
+import { formatDate } from "@/shared/lib/utils"
+import type { StudentDashboardGradeProps } from "@/modules/homework/types"
+
+export function StudentGradesCard({ grades }: { grades: StudentDashboardGradeProps }) {
+  const hasGradeTrend = grades.trend.length > 0
+  const hasRecentGrades = grades.recent.length > 0
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <BarChart3 className="h-4 w-4 text-muted-foreground" />
+          Recent Grades
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {!hasGradeTrend ? (
+          <EmptyState
+            icon={BarChart3}
+            title="No graded work yet"
+            description="Finish and submit assignments to see your score trend."
+            className="border-none h-72"
+          />
+        ) : (
+          <div className="space-y-4">
+            <div className="rounded-md border bg-card p-4">
+              <svg viewBox="0 0 100 40" className="h-24 w-full">
+                <polyline
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  points={grades.trend
+                    .map((p, i) => {
+                      const t = grades.trend.length > 1 ? i / (grades.trend.length - 1) : 0
+                      const x = t * 100
+                      const v = Number.isFinite(p.percentage) ? Math.max(0, Math.min(100, p.percentage)) : 0
+                      const y = 40 - (v / 100) * 40
+                      return `${x},${y}`
+                    })
+                    .join(" ")}
+                  className="text-primary"
+                />
+              </svg>
+              <div className="mt-3 flex items-center justify-between text-sm text-muted-foreground">
+                <div>
+                  Latest:{" "}
+                  <span className="font-medium text-foreground tabular-nums">
+                    {Math.round(grades.trend[grades.trend.length - 1]?.percentage ?? 0)}%
+                  </span>
+                </div>
+                <div>
+                  Points:{" "}
+                  <span className="font-medium text-foreground tabular-nums">
+                    {grades.trend[grades.trend.length - 1]?.score ?? 0}/{grades.trend[grades.trend.length - 1]?.maxScore ?? 0}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {!hasRecentGrades ? null : (
+              <div className="rounded-md border bg-card">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-muted/50">
+                      <TableHead className="text-xs font-medium uppercase text-muted-foreground">Assignment</TableHead>
+                      <TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
+                      <TableHead className="text-xs font-medium uppercase text-muted-foreground">When</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {grades.recent.map((r) => (
+                      <TableRow key={r.assignmentId} className="h-12">
+                        <TableCell className="font-medium">
+                          <Link href={`/student/learning/assignments/${r.assignmentId}`} className="hover:underline">
+                            {r.assignmentTitle}
+                          </Link>
+                        </TableCell>
+                        <TableCell className="tabular-nums">
+                          {r.score}/{r.maxScore} <span className="text-muted-foreground">({Math.round(r.percentage)}%)</span>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">{formatDate(r.submittedAt)}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-ranking-card.tsx

@@ -0,0 +1,47 @@
+import { Trophy } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import type { StudentRanking } from "@/modules/homework/types"
+
+export function StudentRankingCard({ ranking }: { ranking: StudentRanking | null }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Trophy className="h-4 w-4 text-muted-foreground" />
+          Ranking
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {!ranking ? (
+          <EmptyState
+            icon={Trophy}
+            title="No ranking available"
+            description="Join a class and complete graded work to see your rank."
+            className="border-none h-72"
+          />
+        ) : (
+          <div className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="rounded-md border bg-card p-4">
+                <div className="text-sm text-muted-foreground">Class Rank</div>
+                <div className="mt-1 text-3xl font-bold tabular-nums">
+                  {ranking.rank}/{ranking.classSize}
+                </div>
+              </div>
+              <div className="rounded-md border bg-card p-4">
+                <div className="text-sm text-muted-foreground">Overall</div>
+                <div className="mt-1 text-3xl font-bold tabular-nums">{Math.round(ranking.percentage)}%</div>
+                <div className="text-xs text-muted-foreground tabular-nums">
+                  {ranking.totalScore}/{ranking.totalMaxScore} pts
+                </div>
+              </div>
+            </div>
+            <div className="text-sm text-muted-foreground">Based on latest graded submissions per assignment for your class.</div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-stats-grid.tsx

@@ -0,0 +1,66 @@
+import { BookOpen, CheckCircle2, PenTool, TriangleAlert } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+
+type Stat = {
+  title: string
+  value: string
+  description: string
+  icon: typeof BookOpen
+}
+
+export function StudentStatsGrid({
+  enrolledClassCount,
+  dueSoonCount,
+  overdueCount,
+  gradedCount,
+}: {
+  enrolledClassCount: number
+  dueSoonCount: number
+  overdueCount: number
+  gradedCount: number
+}) {
+  const stats: readonly Stat[] = [
+    {
+      title: "My Classes",
+      value: String(enrolledClassCount),
+      description: "Enrolled classes",
+      icon: BookOpen,
+    },
+    {
+      title: "Due Soon",
+      value: String(dueSoonCount),
+      description: "Next 7 days",
+      icon: PenTool,
+    },
+    {
+      title: "Overdue",
+      value: String(overdueCount),
+      description: "Needs attention",
+      icon: TriangleAlert,
+    },
+    {
+      title: "Graded",
+      value: String(gradedCount),
+      description: "With score",
+      icon: CheckCircle2,
+    },
+  ]
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <Card key={stat.title}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+            <stat.icon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{stat.value}</div>
+            <div className="text-xs text-muted-foreground">{stat.description}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-today-schedule-card.tsx

@@ -0,0 +1,58 @@
+import { CalendarDays, CalendarX, Clock, MapPin } from "lucide-react"
+
+import { Badge } from "@/shared/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import type { StudentTodayScheduleItem } from "@/modules/dashboard/types"
+
+export function StudentTodayScheduleCard({ items }: { items: StudentTodayScheduleItem[] }) {
+  const hasSchedule = items.length > 0
+
+  return (
+    <Card className="lg:col-span-3">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <CalendarDays className="h-4 w-4 text-muted-foreground" />
+          Today&apos;s Schedule
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {!hasSchedule ? (
+          <EmptyState
+            icon={CalendarX}
+            title="No classes today"
+            description="Your timetable is clear for today."
+            className="border-none h-72"
+          />
+        ) : (
+          <div className="space-y-4">
+            {items.map((item) => (
+              <div key={item.id} className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0">
+                <div className="space-y-1 min-w-0">
+                  <div className="font-medium leading-none truncate">{item.course}</div>
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
+                    <div className="flex items-center">
+                      <Clock className="mr-1 h-3 w-3" />
+                      <span>
+                        {item.startTime}–{item.endTime}
+                      </span>
+                    </div>
+                    {item.location ? (
+                      <div className="flex items-center">
+                        <MapPin className="mr-1 h-3 w-3" />
+                        <span className="truncate">{item.location}</span>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+                <Badge variant="secondary" className="shrink-0">
+                  {item.className}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/student-dashboard/student-upcoming-assignments-card.tsx

@@ -0,0 +1,83 @@
+import Link from "next/link"
+import { PenTool } from "lucide-react"
+
+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 { EmptyState } from "@/shared/components/ui/empty-state"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
+import { formatDate } from "@/shared/lib/utils"
+import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" => {
+  if (status === "graded") return "default"
+  if (status === "submitted") return "secondary"
+  if (status === "in_progress") return "secondary"
+  return "outline"
+}
+
+const getStatusLabel = (status: string) => {
+  if (status === "graded") return "Graded"
+  if (status === "submitted") return "Submitted"
+  if (status === "in_progress") return "In progress"
+  return "Not started"
+}
+
+export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
+  const hasAssignments = upcomingAssignments.length > 0
+
+  return (
+    <Card className="lg:col-span-4">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-base flex items-center gap-2">
+          <PenTool className="h-4 w-4 text-muted-foreground" />
+          Upcoming Assignments
+        </CardTitle>
+        <Button asChild variant="outline" size="sm">
+          <Link href="/student/learning/assignments">View all</Link>
+        </Button>
+      </CardHeader>
+      <CardContent>
+        {!hasAssignments ? (
+          <EmptyState
+            icon={PenTool}
+            title="No assignments"
+            description="You have no assigned homework right now."
+            className="border-none h-72"
+          />
+        ) : (
+          <div className="rounded-md border bg-card">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Title</TableHead>
+                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Status</TableHead>
+                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Due</TableHead>
+                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {upcomingAssignments.map((a) => (
+                  <TableRow key={a.id} className="h-12">
+                    <TableCell className="font-medium">
+                      <Link href={`/student/learning/assignments/${a.id}`} className="truncate hover:underline">
+                        {a.title}
+                      </Link>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={getStatusVariant(a.progressStatus)} className="capitalize">
+                        {getStatusLabel(a.progressStatus)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
+                    <TableCell className="tabular-nums">{a.latestScore ?? "-"}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/student-view.tsx

@@ -1,21 +0,0 @@
-"use client"
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
-
-export function StudentDashboard() {
-  return (
-    <div className="space-y-6">
-      <h1 className="text-3xl font-bold tracking-tight">Student Dashboard</h1>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader><CardTitle>My Courses</CardTitle></CardHeader>
-          <CardContent>Enrolled in 5 courses</CardContent>
-        </Card>
-        <Card>
-          <CardHeader><CardTitle>Assignments</CardTitle></CardHeader>
-          <CardContent>2 due this week</CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}

src/modules/dashboard/components/teacher-dashboard/recent-submissions.tsx

@@ -1,62 +1,22 @@
+import Link from "next/link";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar";
 import { EmptyState } from "@/shared/components/ui/empty-state";
 import { Inbox } from "lucide-react";
+import { formatDate } from "@/shared/lib/utils";
+import type { HomeworkSubmissionListItem } from "@/modules/homework/types";
 
-interface SubmissionItem {
-  id: string;
-  studentName: string;
-  studentAvatar?: string;
-  assignment: string;
-  submittedAt: string;
-  status: "submitted" | "late";
-}
-
-const MOCK_SUBMISSIONS: SubmissionItem[] = [
-  {
-    id: "1",
-    studentName: "Alice Johnson",
-    assignment: "React Component Composition",
-    submittedAt: "10 minutes ago",
-    status: "submitted",
-  },
-  {
-    id: "2",
-    studentName: "Bob Smith",
-    assignment: "Design System Analysis",
-    submittedAt: "1 hour ago",
-    status: "submitted",
-  },
-  {
-    id: "3",
-    studentName: "Charlie Brown",
-    assignment: "React Component Composition",
-    submittedAt: "2 hours ago",
-    status: "late",
-  },
-  {
-    id: "4",
-    studentName: "Diana Prince",
-    assignment: "CSS Grid Layout",
-    submittedAt: "Yesterday",
-    status: "submitted",
-  },
-  {
-    id: "5",
-    studentName: "Evan Wright",
-    assignment: "Design System Analysis",
-    submittedAt: "Yesterday",
-    status: "submitted",
-  },
-];
-
-export function RecentSubmissions() {
-  const hasSubmissions = MOCK_SUBMISSIONS.length > 0;
+export function RecentSubmissions({ submissions }: { submissions: HomeworkSubmissionListItem[] }) {
+  const hasSubmissions = submissions.length > 0;
 
   return (
     <Card className="col-span-4 lg:col-span-4">
       <CardHeader>
-        <CardTitle>Recent Submissions</CardTitle>
+        <CardTitle className="flex items-center gap-2">
+          <Inbox className="h-4 w-4 text-muted-foreground" />
+          Recent Submissions
+        </CardTitle>
       </CardHeader>
       <CardContent>
         {!hasSubmissions ? (
@@ -64,15 +24,16 @@ export function RecentSubmissions() {
              icon={Inbox}
              title="No New Submissions"
              description="All caught up! There are no new submissions to review."
+             action={{ label: "View submissions", href: "/teacher/homework/submissions" }}
              className="border-none h-[300px]"
            />
         ) : (
           <div className="space-y-6">
-            {MOCK_SUBMISSIONS.map((item) => (
+            {submissions.map((item) => (
               <div key={item.id} className="flex items-center justify-between group">
                 <div className="flex items-center space-x-4">
                   <Avatar className="h-9 w-9">
-                    <AvatarImage src={item.studentAvatar} alt={item.studentName} />
+                    <AvatarImage src={undefined} alt={item.studentName} />
                     <AvatarFallback>{item.studentName.charAt(0)}</AvatarFallback>
                   </Avatar>
                   <div className="space-y-1">
@@ -80,16 +41,20 @@ export function RecentSubmissions() {
                       {item.studentName}
                     </p>
                     <p className="text-sm text-muted-foreground">
-                      Submitted <span className="font-medium text-foreground">{item.assignment}</span>
+                      <Link
+                        href={`/teacher/homework/submissions/${item.id}`}
+                        className="font-medium text-foreground hover:underline"
+                      >
+                        {item.assignmentTitle}
+                      </Link>
                     </p>
                   </div>
                 </div>
                 <div className="flex items-center space-x-2">
                   <div className="text-sm text-muted-foreground">
-                      {/* Using static date for demo to prevent hydration mismatch */}
-                      {item.submittedAt}
+                      {item.submittedAt ? formatDate(item.submittedAt) : "-"}
                   </div>
-                  {item.status === "late" && (
+                  {item.isLate && (
                       <span className="inline-flex items-center rounded-full border border-destructive px-2 py-0.5 text-xs font-semibold text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
                           Late
                       </span>

src/modules/dashboard/components/teacher-dashboard/teacher-classes-card.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link"
+import { Users } from "lucide-react"
+
+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 { EmptyState } from "@/shared/components/ui/empty-state"
+import type { TeacherClass } from "@/modules/classes/types"
+
+export function TeacherClassesCard({ classes }: { classes: TeacherClass[] }) {
+  const totalStudents = classes.reduce((sum, c) => sum + (c.studentCount ?? 0), 0)
+  const topClassesByStudents = [...classes].sort((a, b) => (b.studentCount ?? 0) - (a.studentCount ?? 0)).slice(0, 8)
+  const maxStudentCount = Math.max(1, ...topClassesByStudents.map((c) => c.studentCount ?? 0))
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Users className="h-4 w-4 text-muted-foreground" />
+          My Classes
+        </CardTitle>
+        <Button asChild variant="outline" size="sm">
+          <Link href="/teacher/classes/my">View all</Link>
+        </Button>
+      </CardHeader>
+      <CardContent className="grid gap-3">
+        {classes.length === 0 ? (
+          <EmptyState
+            icon={Users}
+            title="No classes yet"
+            description="Create a class to start managing students and schedules."
+            action={{ label: "Create class", href: "/teacher/classes/my" }}
+            className="border-none h-72"
+          />
+        ) : (
+          <>
+            {topClassesByStudents.length > 0 ? (
+              <div className="rounded-md border bg-card p-4">
+                <div className="flex items-center justify-between">
+                  <div className="text-sm font-medium">Students by class</div>
+                  <div className="text-xs text-muted-foreground tabular-nums">Total {totalStudents}</div>
+                </div>
+                <div className="mt-3 grid gap-2">
+                  {topClassesByStudents.map((c) => {
+                    const count = c.studentCount ?? 0
+                    const pct = Math.max(0, Math.min(100, (count / maxStudentCount) * 100))
+                    return (
+                      <div key={c.id} className="grid grid-cols-[minmax(0,1fr)_120px_52px] items-center gap-3">
+                        <div className="truncate text-sm">{c.name}</div>
+                        <div className="h-2 rounded-full bg-muted">
+                          <div className="h-2 rounded-full bg-primary" style={{ width: `${pct}%` }} />
+                        </div>
+                        <div className="text-right text-xs tabular-nums text-muted-foreground">{count}</div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            ) : null}
+
+            {classes.slice(0, 6).map((c) => (
+              <Link
+                key={c.id}
+                href={`/teacher/classes/my/${encodeURIComponent(c.id)}`}
+                className="flex items-center justify-between rounded-md border bg-card px-4 py-3 hover:bg-muted/50"
+              >
+                <div className="min-w-0">
+                  <div className="font-medium truncate">{c.name}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {c.grade}
+                    {c.homeroom ? ` · ${c.homeroom}` : ""}
+                    {c.room ? ` · ${c.room}` : ""}
+                  </div>
+                </div>
+                <Badge variant="outline" className="flex items-center gap-1">
+                  <Users className="h-3 w-3" />
+                  {c.studentCount} students
+                </Badge>
+              </Link>
+            ))}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-header.tsx

@@ -0,0 +1,13 @@
+import { TeacherQuickActions } from "./teacher-quick-actions"
+
+export function TeacherDashboardHeader() {
+  return (
+    <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">Teacher</h2>
+        <p className="text-muted-foreground">Overview of today&apos;s work and your classes.</p>
+      </div>
+      <TeacherQuickActions />
+    </div>
+  )
+}

src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-view.tsx

@@ -0,0 +1,59 @@
+import type { TeacherDashboardData, TeacherTodayScheduleItem } from "@/modules/dashboard/types"
+
+import { TeacherClassesCard } from "./teacher-classes-card"
+import { TeacherDashboardHeader } from "./teacher-dashboard-header"
+import { TeacherHomeworkCard } from "./teacher-homework-card"
+import { RecentSubmissions } from "./recent-submissions"
+import { TeacherSchedule } from "./teacher-schedule"
+import { TeacherStats } from "./teacher-stats"
+
+const toWeekday = (d: Date): 1 | 2 | 3 | 4 | 5 | 6 | 7 => {
+  const day = d.getDay()
+  return (day === 0 ? 7 : day) as 1 | 2 | 3 | 4 | 5 | 6 | 7
+}
+
+export function TeacherDashboardView({ data }: { data: TeacherDashboardData }) {
+  const totalStudents = data.classes.reduce((sum, c) => sum + (c.studentCount ?? 0), 0)
+  const todayWeekday = toWeekday(new Date())
+
+  const classNameById = new Map(data.classes.map((c) => [c.id, c.name] as const))
+  const todayScheduleItems: TeacherTodayScheduleItem[] = data.schedule
+    .filter((s) => s.weekday === todayWeekday)
+    .sort((a, b) => a.startTime.localeCompare(b.startTime))
+    .map((s): TeacherTodayScheduleItem => ({
+      id: s.id,
+      classId: s.classId,
+      className: classNameById.get(s.classId) ?? "Class",
+      course: s.course,
+      startTime: s.startTime,
+      endTime: s.endTime,
+      location: s.location ?? null,
+    }))
+
+  const submittedSubmissions = data.submissions.filter((s) => Boolean(s.submittedAt))
+  const toGradeCount = submittedSubmissions.filter((s) => s.status === "submitted").length
+  const recentSubmissions = submittedSubmissions.slice(0, 6)
+
+  return (
+    <div className="flex h-full flex-col space-y-8 p-8">
+      <TeacherDashboardHeader />
+
+      <TeacherStats
+        totalStudents={totalStudents}
+        classCount={data.classes.length}
+        toGradeCount={toGradeCount}
+        todayScheduleCount={todayScheduleItems.length}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+        <TeacherSchedule items={todayScheduleItems} />
+        <RecentSubmissions submissions={recentSubmissions} />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <TeacherClassesCard classes={data.classes} />
+        <TeacherHomeworkCard assignments={data.assignments} />
+      </div>
+    </div>
+  )
+}

src/modules/dashboard/components/teacher-dashboard/teacher-homework-card.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link"
+import { PenTool } from "lucide-react"
+
+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 { EmptyState } from "@/shared/components/ui/empty-state"
+import type { HomeworkAssignmentListItem } from "@/modules/homework/types"
+
+export function TeacherHomeworkCard({ assignments }: { assignments: HomeworkAssignmentListItem[] }) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-base flex items-center gap-2">
+          <PenTool className="h-4 w-4 text-muted-foreground" />
+          Homework
+        </CardTitle>
+        <div className="flex items-center gap-2">
+          <Button asChild variant="outline" size="sm">
+            <Link href="/teacher/homework/assignments">Open list</Link>
+          </Button>
+          <Button asChild size="sm">
+            <Link href="/teacher/homework/assignments/create">New</Link>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="grid gap-3">
+        {assignments.length === 0 ? (
+          <EmptyState
+            icon={PenTool}
+            title="No homework assignments yet"
+            description="Create an assignment from an exam and publish it to students."
+            action={{ label: "Create assignment", href: "/teacher/homework/assignments/create" }}
+            className="border-none h-72"
+          />
+        ) : (
+          assignments.slice(0, 6).map((a) => (
+            <Link
+              key={a.id}
+              href={`/teacher/homework/assignments/${encodeURIComponent(a.id)}`}
+              className="flex items-center justify-between rounded-md border bg-card px-4 py-3 hover:bg-muted/50"
+            >
+              <div className="min-w-0">
+                <div className="font-medium truncate">{a.title}</div>
+                <div className="text-sm text-muted-foreground truncate">{a.sourceExamTitle}</div>
+              </div>
+              <Badge variant="outline" className="capitalize">
+                {a.status}
+              </Badge>
+            </Link>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/modules/dashboard/components/teacher-dashboard/teacher-quick-actions.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+import { Button } from "@/shared/components/ui/button";
+import { PlusCircle, CheckSquare, Users } from "lucide-react";
+
+export function TeacherQuickActions() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Button asChild size="sm">
+        <Link href="/teacher/homework/assignments/create">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Create Assignment
+        </Link>
+      </Button>
+      <Button asChild variant="outline" size="sm">
+        <Link href="/teacher/homework/submissions">
+          <CheckSquare className="mr-2 h-4 w-4" />
+          Grade
+        </Link>
+      </Button>
+      <Button asChild variant="outline" size="sm">
+        <Link href="/teacher/classes/my">
+          <Users className="mr-2 h-4 w-4" />
+          My Classes
+        </Link>
+      </Button>
+    </div>
+  );
+}

src/modules/dashboard/components/teacher-dashboard/teacher-schedule.tsx

@@ -0,0 +1,73 @@
+import Link from "next/link";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
+import { Badge } from "@/shared/components/ui/badge";
+import { Clock, MapPin, CalendarDays, CalendarX } from "lucide-react";
+import { EmptyState } from "@/shared/components/ui/empty-state";
+
+type TeacherTodayScheduleItem = {
+  id: string;
+  classId: string;
+  className: string;
+  course: string;
+  startTime: string;
+  endTime: string;
+  location: string | null;
+};
+
+export function TeacherSchedule({ items }: { items: TeacherTodayScheduleItem[] }) {
+  const hasSchedule = items.length > 0;
+
+  return (
+      <Card className="col-span-3">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <CalendarDays className="h-4 w-4 text-muted-foreground" />
+          Today&apos;s Schedule
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {!hasSchedule ? (
+           <EmptyState
+             icon={CalendarX}
+             title="No Classes Today"
+             description="No timetable entries for today."
+             action={{ label: "View schedule", href: "/teacher/classes/schedule" }}
+             className="border-none h-[300px]"
+           />
+        ) : (
+          <div className="space-y-4">
+            {items.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
+              >
+                <div className="space-y-1">
+                  <Link
+                    href={`/teacher/classes/schedule?classId=${encodeURIComponent(item.classId)}`}
+                    className="font-medium leading-none hover:underline"
+                  >
+                    {item.course}
+                  </Link>
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <Clock className="mr-1 h-3 w-3" />
+                    <span className="mr-3">{item.startTime}–{item.endTime}</span>
+                    {item.location ? (
+                      <>
+                        <MapPin className="mr-1 h-3 w-3" />
+                        <span>{item.location}</span>
+                      </>
+                    ) : null}
+                  </div>
+                </div>
+                <Badge variant="secondary">
+                  {item.className}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/modules/dashboard/components/teacher-dashboard/teacher-stats.tsx

@@ -2,45 +2,21 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui
 import { Users, BookOpen, FileCheck, Calendar } from "lucide-react";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
-interface StatItem {
-  title: string;
-  value: string;
-  description: string;
-  icon: React.ElementType;
-}
-
-const MOCK_STATS: StatItem[] = [
-  {
-    title: "Total Students",
-    value: "1,248",
-    description: "+12% from last semester",
-    icon: Users,
-  },
-  {
-    title: "Active Courses",
-    value: "4",
-    description: "2 lectures, 2 workshops",
-    icon: BookOpen,
-  },
-  {
-    title: "To Grade",
-    value: "28",
-    description: "5 submissions pending review",
-    icon: FileCheck,
-  },
-  {
-    title: "Upcoming Classes",
-    value: "3",
-    description: "Today's schedule",
-    icon: Calendar,
-  },
-];
-
 interface TeacherStatsProps {
+  totalStudents: number;
+  classCount: number;
+  toGradeCount: number;
+  todayScheduleCount: number;
   isLoading?: boolean;
 }
 
-export function TeacherStats({ isLoading = false }: TeacherStatsProps) {
+export function TeacherStats({
+  totalStudents,
+  classCount,
+  toGradeCount,
+  todayScheduleCount,
+  isLoading = false,
+}: TeacherStatsProps) {
   if (isLoading) {
     return (
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
@@ -60,9 +36,36 @@ export function TeacherStats({ isLoading = false }: TeacherStatsProps) {
     );
   }
 
+  const stats = [
+    {
+      title: "Total Students",
+      value: String(totalStudents),
+      description: "Across all your classes",
+      icon: Users,
+    },
+    {
+      title: "My Classes",
+      value: String(classCount),
+      description: "Active classes you manage",
+      icon: BookOpen,
+    },
+    {
+      title: "To Grade",
+      value: String(toGradeCount),
+      description: "Submitted homework waiting for grading",
+      icon: FileCheck,
+    },
+    {
+      title: "Today",
+      value: String(todayScheduleCount),
+      description: "Scheduled items today",
+      icon: Calendar,
+    },
+  ] as const;
+
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-      {MOCK_STATS.map((stat, i) => (
+      {stats.map((stat, i) => (
         <Card key={i}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">

src/modules/dashboard/components/teacher-quick-actions.tsx

@@ -1,21 +0,0 @@
-import { Button } from "@/shared/components/ui/button";
-import { PlusCircle, CheckSquare, MessageSquare } from "lucide-react";
-
-export function TeacherQuickActions() {
-  return (
-    <div className="flex items-center space-x-2">
-      <Button size="sm">
-        <PlusCircle className="mr-2 h-4 w-4" />
-        Create Assignment
-      </Button>
-      <Button variant="outline" size="sm">
-        <CheckSquare className="mr-2 h-4 w-4" />
-        Grade All
-      </Button>
-      <Button variant="outline" size="sm">
-        <MessageSquare className="mr-2 h-4 w-4" />
-        Message Class
-      </Button>
-    </div>
-  );
-}

src/modules/dashboard/components/teacher-schedule.tsx

@@ -1,81 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
-import { Badge } from "@/shared/components/ui/badge";
-import { Clock, MapPin, CalendarX } from "lucide-react";
-import { EmptyState } from "@/shared/components/ui/empty-state";
-
-interface ScheduleItem {
-  id: string;
-  course: string;
-  time: string;
-  location: string;
-  type: "Lecture" | "Workshop" | "Lab";
-}
-
-// MOCK_SCHEDULE can be empty to test empty state
-const MOCK_SCHEDULE: ScheduleItem[] = [
-  {
-    id: "1",
-    course: "Advanced Web Development",
-    time: "09:00 AM - 10:30 AM",
-    location: "Room 304",
-    type: "Lecture",
-  },
-  {
-    id: "2",
-    course: "UI/UX Design Principles",
-    time: "11:00 AM - 12:30 PM",
-    location: "Design Studio A",
-    type: "Workshop",
-  },
-  {
-    id: "3",
-    course: "Frontend Frameworks",
-    time: "02:00 PM - 03:30 PM",
-    location: "Online (Zoom)",
-    type: "Lecture",
-  },
-];
-
-export function TeacherSchedule() {
-  const hasSchedule = MOCK_SCHEDULE.length > 0;
-
-  return (
-      <Card className="col-span-3">
-      <CardHeader>
-        <CardTitle>Today&apos;s Schedule</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {!hasSchedule ? (
-           <EmptyState
-             icon={CalendarX}
-             title="No Classes Today"
-             description="You have no classes scheduled for today. Enjoy your free time!"
-             className="border-none h-[300px]"
-           />
-        ) : (
-          <div className="space-y-4">
-            {MOCK_SCHEDULE.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
-              >
-                <div className="space-y-1">
-                  <p className="font-medium leading-none">{item.course}</p>
-                  <div className="flex items-center text-sm text-muted-foreground">
-                    <Clock className="mr-1 h-3 w-3" />
-                    <span className="mr-3">{item.time}</span>
-                    <MapPin className="mr-1 h-3 w-3" />
-                    <span>{item.location}</span>
-                  </div>
-                </div>
-                <Badge variant={item.type === "Lecture" ? "default" : "secondary"}>
-                  {item.type}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

src/modules/dashboard/components/teacher-view.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import { TeacherQuickActions } from "@/modules/dashboard/components/teacher-quick-actions";
-import { TeacherStats } from "@/modules/dashboard/components/teacher-stats";
-import { TeacherSchedule } from "@/modules/dashboard/components/teacher-schedule";
-import { RecentSubmissions } from "@/modules/dashboard/components/recent-submissions";
-
-// This component is now exclusively for the Teacher Role View
-export function TeacherDashboard() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold tracking-tight">Teacher Dashboard</h1>
-        <TeacherQuickActions />
-      </div>
-      
-      <TeacherStats />
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-        <TeacherSchedule />
-        <RecentSubmissions />
-      </div>
-    </div>
-  )
-}