xiner/NextEdu
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(dashboard): optimize teacher dashboard ui and layout

Browse Source 
- 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
This commit is contained in:
SpecialX
2026-01-12 11:38:27 +08:00
parent 8577280ab2
commit ade8d4346c
17 changed files with 1383 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/modules/dashboard/components/teacher-dashboard/teacher-classes-card.tsx
View File

@@ -9,8 +9,6 @@ import type { TeacherClass } from "@/modules/classes/types"
export function TeacherClassesCard({ classes }: { classes: TeacherClass[] }) {
const totalStudents = classes.reduce((sum, c) => sum + (c.studentCount ?? 0), 0)
const topClassesByStudents = [...classes].sort((a, b) => (b.studentCount ?? 0) - (a.studentCount ?? 0)).slice(0, 8)
const maxStudentCount = Math.max(1, ...topClassesByStudents.map((c) => c.studentCount ?? 0))
return (
<Card>
@@ -33,52 +31,40 @@ export function TeacherClassesCard({ classes }: { classes: TeacherClass[] }) {
className="border-none h-72"
/>
) : (
<>
{topClassesByStudents.length > 0 ? (
<div className="rounded-md border bg-card p-4">
<div className="flex items-center justify-between">
<div className="text-sm font-medium">Students by class</div>
<div className="text-xs text-muted-foreground tabular-nums">Total {totalStudents}</div>
</div>
<div className="mt-3 grid gap-2">
{topClassesByStudents.map((c) => {
const count = c.studentCount ?? 0
const pct = Math.max(0, Math.min(100, (count / maxStudentCount) * 100))
return (
<div key={c.id} className="grid grid-cols-[minmax(0,1fr)_120px_52px] items-center gap-3">
<div className="truncate text-sm">{c.name}</div>
<div className="h-2 rounded-full bg-muted">
<div className="h-2 rounded-full bg-primary" style={{ width: `${pct}%` }} />
</div>
<div className="text-right text-xs tabular-nums text-muted-foreground">{count}</div>
</div>
)
})}
</div>
</div>
) : null}
<div className="space-y-1">
{classes.slice(0, 6).map((c) => (
<Link
key={c.id}
href={`/teacher/classes/my/${encodeURIComponent(c.id)}`}
className="flex items-center justify-between rounded-md border bg-card px-4 py-3 hover:bg-muted/50"
className="group flex items-center justify-between rounded-md border border-transparent px-3 py-2 hover:bg-muted/50 hover:border-border transition-colors"
>
<div className="min-w-0">
<div className="font-medium truncate">{c.name}</div>
<div className="text-sm text-muted-foreground">
{c.grade}
{c.homeroom ? ` · ${c.homeroom}` : ""}
{c.room ? ` · ${c.room}` : ""}
<div className="min-w-0 flex-1 mr-3">
<div className="font-medium truncate group-hover:text-primary transition-colors">{c.name}</div>
<div className="text-xs text-muted-foreground truncate flex items-center gap-1.5">
<span className="inline-flex items-center rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
{c.grade}
</span>
{c.homeroom && (
<>
<span>·</span>
<span>Homeroom: {c.homeroom}</span>
</>
)}
{c.room && (
<>
<span>·</span>
<span>Room {c.room}</span>
</>
)}
</div>
</div>
<Badge variant="outline" className="flex items-center gap-1">
<Users className="h-3 w-3" />
{c.studentCount} students
</Badge>
<div className="flex items-center text-xs text-muted-foreground tabular-nums">
<Users className="mr-1.5 h-3 w-3 opacity-70" />
{c.studentCount}
</div>
</Link>
))}
</>
</div>
)}
</CardContent>
</Card>