07 — Component Library (Rooms Module)
- 1. RoomCard
- 2. RoomTypeIcon
- 3. CapacityBadge
- 4. FacilityChips
- 5. RoomFilterBar
- 6. RoomTypePicker
- 7. RoomCodeField
- 8. FacilityInputChips
- 9. DeleteRoomDialog
- 10. QRCodeCard
(forward-looking) - 11. RoomAvailabilitySection
(planned) - 12. Component usage matrix
Module-specific components used across the Rooms screens. Shared building blocks (AppTextField, AppButton, AppChips, AppCard, AppListTile, AppDialog, AppMenu, AppSkeleton, AppEmptyState, AppOfflineBanner, AppFAB, AppSnackbar, AppDropdown) come from 00-shared/03 and are referenced by name only. All
(proposed)Flutter design.
1. RoomCard
| Purpose | List-row unit for a room on S1 (also detail-pane row on tablet) |
| Data | Room (room.schema.ts:16-35): name, code, type, capacity?, building?, facilities[] |
| Layout | AppCard: leading RoomTypeIcon (type), title name, subtitle building · capacity ("Cap N" if present), trailing code chip; facilities preview: first 2 AppChips + "+n" |
| States | default, pressed (hover on desktop), loading (skeleton variant) |
| Semantics | single label "Lab 2, code LAB-02, capacity 40, Building B" |
| Motion | m-fast press feedback; cards fade-in staggered on load (00-shared/08) |
| Source refs | room.schema.ts:18-34 |
2. RoomTypeIcon
| Purpose | Map RoomType enum → icon + label + color ((proposed) palette, 00-shared/02) |
| Mapping | classroom → chair/school icon; lab → science/flask; library → book; office → briefcase; hall → event seat; other → generic room |
| Source refs | room.schema.ts:7-14 |
| Fallback | unknown value → other icon (defensive: enum may grow) |
3. CapacityBadge
| Purpose | Compact capacity display "Cap 40"; supports (proposed) color states once capacity bounds land (OQ-7): normal ≥ 1; warning/error for 0/negative that slipped through server (defensive) |
| Data | room.capacity (optional) — hidden if absent |
| Source refs | room.schema.ts:24-25; create-room.dto.ts:20-23 |
4. FacilityChips
| Purpose | Render facilities: string[] as chips; max 2 inline + "+n" expand (S2), full list (S2 expanded) |
| Interaction | tap chip → (forward-looking) filter-by-facility (needs server param (planned) OQ-3) |
| Source refs | room.schema.ts:33-34 |
5. RoomFilterBar
| Purpose | S1 filter controls: type chips (multi-select from enum) + building chips (derived) + search field |
| Behaviour | client-side filtering today (proposed) (OQ-3 — API has no filter params); becomes server-query UI when (planned) params land |
| Empty state | "No rooms match your filters" + "Clear filters" |
| Source refs | rooms.controller.ts:30-34; room.schema.ts:7-14,30-31 |
6. RoomTypePicker
| Purpose | S3 form control: AppDropdown of RoomType values, default classroom |
| Options | enum order as in room.schema.ts:7-14; label = capitalized value |
| Source refs | room.schema.ts:7-14; create-room.dto.ts:25-28 |
7. RoomCodeField
| Purpose | S3 code input with uniqueness affordance: live trim + uppercase suggestion (proposed); async duplicate check (proposed) (match against loaded list); on create shows ✓/✗ inline; on edit warns if changed onto existing (client can't fully verify — server check (planned) OQ-1) |
| Source refs | rooms.service.ts:19-21 (409 path); room.schema.ts:38 (unique index) |
8. FacilityInputChips
| Purpose | S3 chip-input for facilities: type + Enter → chip; × to remove; dedupe; max 12 (proposed) |
| Source refs | create-room.dto.ts:35-38 |
9. DeleteRoomDialog
| Purpose | S4 typed-confirm dialog: title, room name echoed, confirm text field must equal room.name to enable Delete |
| States | idle, mismatch (button disabled), submitting (spinner), error (snackbar retry), 404 (snackbar "already deleted" + pop) |
| Source refs | rooms.controller.ts:48-52; rooms.service.ts:48-51 |
10. QRCodeCard (forward-looking)
| Purpose | S2 card rendering room.code as QR for door signage; scan → room info/check-in |
| Status | (forward-looking) — requires signage/check-in feature decision; data already present (code) |
| Source refs | room.schema.ts:21-22 |
11. RoomAvailabilitySection (planned)
| Purpose | S2 "Availability" block driven by bookings module (planned); skeleton + empty state "No upcoming bookings" |
| Status | (planned) — hidden until bookings module exists (01 §9) |
12. Component usage matrix
| Screen | Components |
|---|---|
| S1 List | RoomCard, RoomTypeIcon, CapacityBadge, FacilityChips, RoomFilterBar, shared: AppAppBar, AppSearchBar, AppFAB, AppSkeleton, AppEmptyState, AppErrorState, AppOfflineBanner |
| S2 Detail | RoomTypeIcon, CapacityBadge, FacilityChips, QRCodeCard (forward-looking), RoomAvailabilitySection (planned), shared: AppCard, AppMenu, AppButton, AppSnackbar |
| S3 Editor | RoomTypePicker, RoomCodeField, FacilityInputChips, shared: AppTextField, AppDropdown, AppButton, AppSnackbar, AppDialog (discard) |
| S4 Delete | DeleteRoomDialog |