ade8d4346c
- 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
86 lines
3.7 KiB
TypeScript
86 lines
3.7 KiB
TypeScript
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"
|
|
import { TeacherGradeTrends } from "./teacher-grade-trends"
|
|
|
|
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
|
|
|
|
// 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-6 p-8">
|
|
<TeacherDashboardHeader teacherName={data.teacherName} />
|
|
|
|
<TeacherStats
|
|
toGradeCount={toGradeCount}
|
|
activeAssignmentsCount={activeAssignmentsCount}
|
|
averageScore={averageScore}
|
|
submissionRate={submissionRate}
|
|
/>
|
|
|
|
<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>
|
|
)
|
|
}
|