feat(dashboard): optimize teacher dashboard ui and layout

- Refactor layout: move Needs Grading to main column, Homework to sidebar
- Enhance TeacherStats: replace static counts with actionable metrics (Needs Grading, Active Assignments, Avg Score, Submission Rate)
- Update RecentSubmissions: table view with quick grade actions and late status
- Update TeacherSchedule: vertical timeline view with scroll hints
- Update TeacherHomeworkCard: compact list view
- Integrate Recharts: add TeacherGradeTrends chart and shared chart component
- Update documentation

src/modules/dashboard/components/teacher-dashboard/teacher-grade-trends.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card"
+import { TrendingUp } from "lucide-react"
+import { EmptyState } from "@/shared/components/ui/empty-state"
+import type { TeacherGradeTrendItem } from "@/modules/homework/types"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/shared/components/ui/chart"
+
+export function TeacherGradeTrends({ trends }: { trends: TeacherGradeTrendItem[] }) {
+  const hasTrends = trends.length > 0
+
+  // Calculate percentages for the chart
+  const chartData = trends.map((item) => {
+    const percentage = item.maxScore > 0 ? (item.averageScore / item.maxScore) * 100 : 0
+    return {
+      title: item.title,
+      score: Math.round(percentage),
+      fullTitle: item.title, // For tooltip
+      submissionCount: item.submissionCount,
+      totalStudents: item.totalStudents,
+    }
+  })
+
+  const chartConfig = {
+    score: {
+      label: "Average Score (%)",
+      color: "hsl(var(--primary))",
+    },
+  }
+
+  return (
+    <Card className="col-span-1">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base font-medium">
+          <TrendingUp className="h-4 w-4 text-primary" />
+          Class Performance
+        </CardTitle>
+        <CardDescription>
+          Average scores for the last {trends.length} assignments
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {!hasTrends ? (
+          <EmptyState
+            icon={TrendingUp}
+            title="No data available"
+            description="Publish assignments to see class performance trends."
+            className="border-none h-[200px] p-0"
+          />
+        ) : (
+          <div className="space-y-4">
+            <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,
+                    stroke: "hsl(var(--background))"
+                  }}
+                  activeDot={{
+                    r: 6,
+                    strokeWidth: 2,
+                    stroke: "hsl(var(--background))"
+                  }}
+                />
+              </LineChart>
+            </ChartContainer>
+
+            {/* Metric Summary */}
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {chartData.slice().reverse().slice(0, 3).map((item, i) => (
+                    <div key={i} className="flex flex-col gap-1 rounded-lg border p-3 bg-card/50">
+                        <div className="text-xs text-muted-foreground truncate" title={item.fullTitle}>
+                            {item.fullTitle}
+                        </div>
+                        <div className="flex items-baseline gap-2">
+                            <span className="text-xl font-bold tabular-nums">
+                                {item.score}%
+                            </span>
+                        </div>
+                        <div className="text-[10px] text-muted-foreground">
+                            {item.submissionCount}/{item.totalStudents} submitted
+                        </div>
+                    </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}