Before Fine Tune

Frontend/src/components/dashboard/teacher/dashboard-teacher-classroom-detail.tsx

@@ -52,7 +52,16 @@ const DashboardTeacherClassroomDetail: Component<Props> = (props) => {
 						<div class={styles.studentList}>
 							<For each={props.data.students.items}>
 								{(student) => (
-									<A href={student.href} class={`${styles.studentCard} ${student.selected ? styles.studentCardSelected : ""}`.trim()}>
+									<A
+										href={student.href}
+										class={[
+											styles.studentCard,
+											student.selected ? styles.studentCardSelected : "",
+											student.endangeredRank != null ? styles[`studentCardEndangered${student.endangeredRank}`] : "",
+										]
+											.filter(Boolean)
+											.join(" ")}
+									>
 										<div class={styles.studentCardHeader}>
 											<div class={styles.studentAvatar}>{student.initials}</div>
 											<div>
@@ -63,7 +72,11 @@ const DashboardTeacherClassroomDetail: Component<Props> = (props) => {
 										<div class={styles.metaRow}>
 											<span>{student.statusLabel}</span>
 											<span>{student.redoCountLabel}</span>
+											<Show when={student.endangeredRank != null}>
+												<span>{student.endangeredRank === 1 ? "Most endangered" : student.endangeredRank === 2 ? "Second most endangered" : "Third most endangered"}</span>
+											</Show>
 										</div>
+										<p class={styles.studentScoreLabel}>{student.combinedScoreLabel}</p>
 										<p class={styles.studentNote}>{student.note}</p>
 									</A>
 								)}