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-dashboard-view.tsx

@@ -6,6 +6,7 @@ import { TeacherHomeworkCard } from "./teacher-homework-card"
 import { RecentSubmissions } from "./recent-submissions"
 import { TeacherSchedule } from "./teacher-schedule"
 import { TeacherStats } from "./teacher-stats"
+import { TeacherGradeTrends } from "./teacher-grade-trends"
 
 const toWeekday = (d: Date): 1 | 2 | 3 | 4 | 5 | 6 | 7 => {
   const day = d.getDay()
@@ -32,27 +33,52 @@ export function TeacherDashboardView({ data }: { data: TeacherDashboardData }) {
 
   const submittedSubmissions = data.submissions.filter((s) => Boolean(s.submittedAt))
   const toGradeCount = submittedSubmissions.filter((s) => s.status === "submitted").length
-  const recentSubmissions = submittedSubmissions.slice(0, 6)
+  
+  // Filter for submissions that actually need grading (status === "submitted")
+  // If we have less than 5 to grade, maybe also show some recently graded ones?
+  // For now, let's stick to "Needs Grading" as it's more useful.
+  const submissionsToGrade = submittedSubmissions
+    .filter(s => s.status === "submitted")
+    .sort((a, b) => new Date(a.submittedAt!).getTime() - new Date(b.submittedAt!).getTime()) // Oldest first? Or Newest? Usually oldest first for queue.
+    .slice(0, 6);
+
+  // Calculate stats for the dashboard
+  const activeAssignmentsCount = data.assignments.filter(a => a.status === "published").length
+  
+  const totalTrendScore = data.gradeTrends.reduce((acc, curr) => acc + curr.averageScore, 0)
+  const averageScore = data.gradeTrends.length > 0 ? totalTrendScore / data.gradeTrends.length : 0
+
+  const totalSubmissions = data.gradeTrends.reduce((acc, curr) => acc + curr.submissionCount, 0)
+  const totalPotentialSubmissions = data.gradeTrends.reduce((acc, curr) => acc + curr.totalStudents, 0)
+  const submissionRate = totalPotentialSubmissions > 0 ? (totalSubmissions / totalPotentialSubmissions) * 100 : 0
 
   return (
-    <div className="flex h-full flex-col space-y-8 p-8">
-      <TeacherDashboardHeader />
+    <div className="flex h-full flex-col space-y-6 p-8">
+      <TeacherDashboardHeader teacherName={data.teacherName} />
 
       <TeacherStats
-        totalStudents={totalStudents}
-        classCount={data.classes.length}
         toGradeCount={toGradeCount}
-        todayScheduleCount={todayScheduleItems.length}
+        activeAssignmentsCount={activeAssignmentsCount}
+        averageScore={averageScore}
+        submissionRate={submissionRate}
       />
 
-      <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 className="grid gap-6 lg:grid-cols-12">
+        <div className="flex flex-col gap-6 lg:col-span-8">
+            <TeacherGradeTrends trends={data.gradeTrends} />
+            <RecentSubmissions 
+                submissions={submissionsToGrade} 
+                title="Needs Grading"
+                emptyTitle="All caught up!"
+                emptyDescription="You have no pending submissions to grade."
+            />
+        </div>
+        
+        <div className="flex flex-col gap-6 lg:col-span-4">
+            <TeacherSchedule items={todayScheduleItems} />
+            <TeacherHomeworkCard assignments={data.assignments} />
+            <TeacherClassesCard classes={data.classes} />
+        </div>
       </div>
     </div>
   )