feat(classes): optimize teacher dashboard ui and implement grade management

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

@@ -1,17 +1,45 @@
+"use client"
+
 import Link from "next/link"
+import { CalendarDays, BookOpen, PenTool } from "lucide-react"
 
 import { Button } from "@/shared/components/ui/button"
 
 export function StudentDashboardHeader({ studentName }: { studentName: string }) {
+  const hour = new Date().getHours()
+  let greeting = "Welcome back"
+  if (hour < 12) greeting = "Good morning"
+  else if (hour < 18) greeting = "Good afternoon"
+  else greeting = "Good evening"
+
   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 className="text-sm text-muted-foreground">
+          {greeting}, {studentName}. Here&apos;s what&apos;s happening today.
+        </div>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button asChild variant="outline" size="sm" className="gap-2">
+          <Link href="/student/schedule">
+            <CalendarDays className="h-4 w-4" />
+            Schedule
+          </Link>
+        </Button>
+        <Button asChild variant="outline" size="sm" className="gap-2">
+          <Link href="/student/learning/textbooks">
+            <BookOpen className="h-4 w-4" />
+            Textbooks
+          </Link>
+        </Button>
+        <Button asChild size="sm" className="gap-2">
+          <Link href="/student/learning/assignments">
+            <PenTool className="h-4 w-4" />
+            Assignments
+          </Link>
+        </Button>
       </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

@@ -2,7 +2,6 @@ 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"
@@ -26,16 +25,17 @@ export function StudentDashboard({
         dueSoonCount={dueSoonCount}
         overdueCount={overdueCount}
         gradedCount={gradedCount}
+        ranking={grades.ranking}
       />
 
-      <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 className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <StudentUpcomingAssignmentsCard upcomingAssignments={upcomingAssignments} />
+          <StudentGradesCard grades={grades} />
+        </div>
+        <div className="space-y-6">
+          <StudentTodayScheduleCard items={todayScheduleItems} />
+        </div>
       </div>
     </div>
   )

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

@@ -1,9 +1,13 @@
+"use client"
+
 import Link from "next/link"
 import { BarChart3 } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
 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 { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/shared/components/ui/chart"
 import { formatDate } from "@/shared/lib/utils"
 import type { StudentDashboardGradeProps } from "@/modules/homework/types"
 
@@ -11,6 +15,24 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
   const hasGradeTrend = grades.trend.length > 0
   const hasRecentGrades = grades.recent.length > 0
 
+  const chartData = grades.trend.map((item) => ({
+    title: item.assignmentTitle,
+    score: Math.round(item.percentage),
+    fullTitle: item.assignmentTitle,
+    submittedAt: formatDate(item.submittedAt),
+    rawScore: item.score,
+    maxScore: item.maxScore,
+  }))
+
+  const chartConfig = {
+    score: {
+      label: "Score (%)",
+      color: "hsl(var(--primary))",
+    },
+  }
+
+  const latestGrade = grades.trend[grades.trend.length - 1]
+
   return (
     <Card>
       <CardHeader>
@@ -30,37 +52,79 @@ export function StudentGradesCard({ grades }: { grades: StudentDashboardGradePro
         ) : (
           <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>
+              <ChartContainer config={chartConfig} className="h-[200px] w-full">
+                <LineChart
+                  data={chartData}
+                  margin={{
+                    left: 12,
+                    right: 12,
+                    top: 12,
+                    bottom: 12,
+                  }}
+                >
+                  <CartesianGrid vertical={false} strokeDasharray="4 4" strokeOpacity={0.4} />
+                  <XAxis
+                    dataKey="title"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => value.slice(0, 10) + (value.length > 10 ? "..." : "")}
+                  />
+                  <YAxis
+                    domain={[0, 100]}
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(value) => `${value}%`}
+                    width={30}
+                  />
+                  <ChartTooltip
+                    cursor={{
+                      stroke: "hsl(var(--muted-foreground))",
+                      strokeWidth: 1,
+                      strokeDasharray: "4 4",
+                    }}
+                    content={
+                      <ChartTooltipContent
+                        indicator="line"
+                        labelKey="fullTitle"
+                        className="w-[200px]"
+                      />
+                    }
+                  />
+                  <Line
+                    dataKey="score"
+                    type="monotone"
+                    stroke="var(--color-score)"
+                    strokeWidth={2}
+                    dot={{
+                      fill: "var(--color-score)",
+                      r: 4,
+                      strokeWidth: 2,
+                    }}
+                    activeDot={{
+                      r: 6,
+                      strokeWidth: 0,
+                    }}
+                  />
+                </LineChart>
+              </ChartContainer>
+              
+              {latestGrade && (
+                <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(latestGrade.percentage)}%
+                    </span>
+                  </div>
+                  <div>
+                    Points:{" "}
+                    <span className="font-medium text-foreground tabular-nums">
+                      {latestGrade.score}/{latestGrade.maxScore}
+                    </span>
+                  </div>
                 </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 : (

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

@@ -1,47 +0,0 @@
-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

@@ -1,12 +1,17 @@
-import { BookOpen, CheckCircle2, PenTool, TriangleAlert } from "lucide-react"
+import Link from "next/link"
+import { BookOpen, PenTool, TriangleAlert, Trophy, TrendingUp } from "lucide-react"
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { cn } from "@/shared/lib/utils"
+import type { StudentRanking } from "@/modules/homework/types"
 
 type Stat = {
   title: string
   value: string
   description: string
   icon: typeof BookOpen
+  href: string
+  color?: string
 }
 
 export function StudentStatsGrid({
@@ -14,52 +19,64 @@ export function StudentStatsGrid({
   dueSoonCount,
   overdueCount,
   gradedCount,
+  ranking,
 }: {
   enrolledClassCount: number
   dueSoonCount: number
   overdueCount: number
   gradedCount: number
+  ranking: StudentRanking | null
 }) {
-  const stats: readonly Stat[] = [
+  const stats: Stat[] = [
     {
-      title: "My Classes",
-      value: String(enrolledClassCount),
-      description: "Enrolled classes",
-      icon: BookOpen,
+      title: "Average Score",
+      value: ranking ? `${Math.round(ranking.percentage)}%` : "-",
+      description: ranking ? "Overall performance" : "No grades yet",
+      icon: TrendingUp,
+      href: "/student/learning/assignments",
+      color: "text-blue-500",
+    },
+    {
+      title: "Class Rank",
+      value: ranking ? `${ranking.rank}/${ranking.classSize}` : "-",
+      description: ranking ? "Current position" : "No ranking yet",
+      icon: Trophy,
+      href: "/student/learning/assignments",
+      color: "text-purple-500",
     },
     {
       title: "Due Soon",
       value: String(dueSoonCount),
       description: "Next 7 days",
       icon: PenTool,
+      href: "/student/learning/assignments",
+      color: dueSoonCount > 0 ? "text-orange-500" : undefined,
     },
     {
       title: "Overdue",
       value: String(overdueCount),
       description: "Needs attention",
       icon: TriangleAlert,
-    },
-    {
-      title: "Graded",
-      value: String(gradedCount),
-      description: "With score",
-      icon: CheckCircle2,
+      href: "/student/learning/assignments",
+      color: overdueCount > 0 ? "text-red-500" : undefined,
     },
   ]
 
   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>
+        <Link key={stat.title} href={stat.href}>
+          <Card className="hover:bg-muted/50 transition-colors cursor-pointer h-full">
+            <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={cn("h-4 w-4 text-muted-foreground", stat.color)} />
+            </CardHeader>
+            <CardContent>
+              <div className={cn("text-2xl font-bold tabular-nums", stat.color)}>{stat.value}</div>
+              <div className="text-xs text-muted-foreground">{stat.description}</div>
+            </CardContent>
+          </Card>
+        </Link>
       ))}
     </div>
   )

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

@@ -6,7 +6,7 @@ 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 { formatDate, cn } from "@/shared/lib/utils"
 import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
 
 const getStatusVariant = (status: string): "default" | "secondary" | "outline" => {
@@ -23,6 +23,30 @@ const getStatusLabel = (status: string) => {
   return "Not started"
 }
 
+const getActionLabel = (status: string) => {
+  if (status === "graded") return "Review"
+  if (status === "submitted") return "View"
+  if (status === "in_progress") return "Continue"
+  return "Start"
+}
+
+const getActionVariant = (status: string): "default" | "secondary" | "outline" => {
+  if (status === "graded" || status === "submitted") return "outline"
+  return "default"
+}
+
+const getDueUrgency = (dueAt: string | null) => {
+  if (!dueAt) return null
+  const now = new Date()
+  const due = new Date(dueAt)
+  const diffHours = (due.getTime() - now.getTime()) / (1000 * 60 * 60)
+
+  if (diffHours < 0) return "overdue"
+  if (diffHours < 48) return "urgent" // 2 days
+  if (diffHours < 120) return "warning" // 5 days
+  return "normal"
+}
+
 export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
   const hasAssignments = upcomingAssignments.length > 0
 
@@ -54,25 +78,49 @@ export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomi
                   <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>
+                  <TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">Action</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>
-                ))}
+                {upcomingAssignments.map((a) => {
+                  const urgency = getDueUrgency(a.dueAt)
+                  const isGraded = a.progressStatus === "graded"
+                  
+                  return (
+                    <TableRow key={a.id} className="h-12">
+                      <TableCell className="font-medium">
+                        <div className="flex items-center gap-2">
+                          <Link href={`/student/learning/assignments/${a.id}`} className="truncate hover:underline">
+                            {a.title}
+                          </Link>
+                          {!isGraded && urgency === "overdue" && (
+                             <Badge variant="destructive" className="h-5 px-1.5 text-[10px] uppercase">Late</Badge>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={getStatusVariant(a.progressStatus)} className="capitalize">
+                          {getStatusLabel(a.progressStatus)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className={cn(
+                        "text-muted-foreground",
+                        !isGraded && urgency === "overdue" && "text-destructive font-medium",
+                        !isGraded && urgency === "urgent" && "text-orange-500 font-medium"
+                      )}>
+                        {a.dueAt ? formatDate(a.dueAt) : "-"}
+                      </TableCell>
+                      <TableCell className="tabular-nums">{a.latestScore ?? "-"}</TableCell>
+                      <TableCell className="text-right">
+                        <Button asChild size="sm" variant={getActionVariant(a.progressStatus)} className="h-7 text-xs">
+                          <Link href={`/student/learning/assignments/${a.id}`}>
+                            {getActionLabel(a.progressStatus)}
+                          </Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
               </TableBody>
             </Table>
           </div>

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

@@ -1,7 +1,6 @@
 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"

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

@@ -54,6 +54,7 @@ export function TeacherStats({
       description: "Published and ongoing",
       icon: PenTool,
       href: "/teacher/homework/assignments?status=published",
+      highlight: false,
       color: "text-blue-500",
     },
     {
@@ -62,6 +63,7 @@ export function TeacherStats({
       description: "Across recent assignments",
       icon: TrendingUp,
       href: "#grade-trends",
+      highlight: false,
       color: "text-emerald-500",
     },
     {
@@ -70,6 +72,7 @@ export function TeacherStats({
       description: "Overall completion rate",
       icon: BarChart,
       href: "#grade-trends",
+      highlight: false,
       color: "text-purple-500",
     },
   ] as const;