Files
NextEdu/src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-view.tsx
2026-03-03 17:32:26 +08:00

85 lines
3.6 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 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>
)
}