07 — Component Library (Teachers Module)

• A. Module components
  • TeacherListTile (extends AppListTile)
  • StatusChip (employment status)
  • TeacherCard (desktop grid variant, extends AppCard)
  • AssignmentCard (extends AppCard)
  • AssignmentMatrixHeader
  • EmptyAssignmentsState (extends AppEmptyState)
  • SubjectBadge / ClassBadge (extends AppBadge + AppChips)
  • TeacherAvatar (extends AppAvatar)
  • TeacherCountStat (extends AppStatTile)
  • MyTeachingHeader (teacher self, (planned))
• B. Reused shared components
• C. Composition rules

Module-specific components; all reference the shared library (00-shared/03). Every component listed here is a client composition over the implemented API — none invent backend data.

A. Module components

TeacherListTile (extends AppListTile)

• Props: teacher (id, name, employeeNumber, status, departmentLabel), onTap, onMenu (Edit/Deactivate), selected?.
• Content: AppAvatar initials (name), title = display name, subtitle = employeeNumber · department, trailing = StatusChip + overflow AppMenu.
• Tokens: surface row, height 56 (02_Design_Tokens.md §3).
• A11y: combined label "Ramesh Kumar, TCH001, Science, active".

StatusChip (employment status)

• Props: status: EmploymentStatus (teacher.schema.ts:7-12).
• Mapping (icon + label — never color-only, 09 §9):

• Implementation: AppBadge + icon; Flutter Chip/custom Container.

TeacherCard (desktop grid variant, extends AppCard)

• Content: header avatar+name+status, body: 3 key InfoRows (dept, designation, employeeNumber), footer: subject count + class count (teacher.schema.ts:44-48).
• Props: teacher, onTap, elevation: e-1.

AssignmentCard (extends AppCard)

• Props: assignment (subjectLabel, classLabel, yearLabel), onRemove?.
• Content: subject (titleMedium) / class · year (bodyMedium) / trailing remove icon (tooltip "Remove assignment").
• A11y: card tap = one button semantics; remove icon separate.

AssignmentMatrixHeader

• Props: year (current AcademicYear), onYearChanged, onAdd.
• Renders AppSectionHeader + AppDropdown (academic year) + tonal add button ("Add assignment").

EmptyAssignmentsState (extends AppEmptyState)

• Icons: menu_book; copy per context (teacher/class/year).

SubjectBadge / ClassBadge (extends AppBadge + AppChips)

• Props: label, onDelete?. Read-only chips on profile; input-chip mode in multi-select fields (S5).
• Max chips shown before "+N more" (list row overflow), (proposed).

TeacherAvatar (extends AppAvatar)

• Initials from firstName/lastName of linked User (user.schema.ts:17-23) — client resolves from user reference; no photo field exists (fallback always).

TeacherCountStat (extends AppStatTile)

• Dashboard integration: teachers.total from GET /dashboard/overview (dashboard.service.ts:32,52); tap → S1.

MyTeachingHeader (teacher self, (planned))

• Banner + summary tiles (assignments count, periods this week) — composed client-side.

B. Reused shared components

C. Composition rules

1. No screen renders raw ObjectIds — every id resolved via reference-catalog lookup or — fallback (04 §6).
2. Status color mapping centralized in StatusChip — no ad-hoc status colors in screens (enforced, 04_Design_System_Mapping.md §7).
3. Golden tests: StatusChip (4 states × light/dark), TeacherListTile, AssignmentCard, TeacherCard (3 sizes), per 00-shared/03 §G.
4. New components only if shared library lacks the need (YAGNI — check shared first).