Module-specific widgets on top of 00-shared/03 . Each lists the server binding and
the shared components it composes. All are pure-presentational; state lives in the
Cubits (13_State_Management.md ).
Purpose Show copy availability at a glance Inputs availableCopies, totalCopies, status: BookStatusRenders AppBadge; color by state: availableCopies > 0 → green "3/5"; 0 → red "0/5 — all on loan"; `status == damagedSource Book.availableCopies/totalCopies/status (book.schema.ts:34-41)Used in S1 rows, S2 header, S4 sheet footer
Purpose Show fine amount + status on borrow records Inputs fineAmount, fineStatus?: FineStatusRenders amber "20 · pending" (with optional Pay action), green "20 · paid", grey "waived" (borrow-record.schema.ts:14-18); no chip when fineStatus is unset (on-time returns, library.service.ts:166) Source BorrowRecord.fineAmount/fineStatus (borrow-record.schema.ts:47-54)Used in S5 cards, S6 result, S7 rows
Purpose Flag a late loan Inputs dueDate, borrowStatusLogic visible iff borrowStatus == 'active' && now > dueDate — client-derived ; server never writes BorrowStatus.OVERDUE today (OQ-2, borrow-record.schema.ts:9-11) Renders red AppBadge "Overdue by N d" (+ optional fine estimate) a11y semantics "overdue by N days" Used in S5, S7
Purpose Adjust totalCopies in the book form Inputs totalCopies, availableCopies, `mode: createRenders [−] 3 [+] with live projection: create → available = total (library.service.ts:41-46); edit → available = max(0, available + Δ) (library.service.ts:87-90)Validation @Min(1) mirrors create-book.dto.ts:34-35; floor 0 on availableUsed in S3
Purpose Catalog list row Composition cover thumb (or letter avatar), title (max 2 lines), "author · ISBN", AvailabilityBadge + status badge Source Book doc (book.schema.ts:15-48)Used in S1, S7 (with student line)
Purpose One loan on the Borrowed-by-Me / Overdue screens Composition AppCard: book title (populated bookId, borrow-record.repository.ts:31,42), borrowedAt, dueDate (prominent), OverdueTag, FineChip, actions [Return] (staff) / [Pay]Source BorrowRecord doc (borrow-record.schema.ts:20-58)Used in S5, S6 trigger, S7
Purpose Select a student when issuing Composition AppPicker over the Students profile cache; free-text search, single selectSource Students module state (id → studentId in IssueBookDto, issue-book.dto.ts:7-8); no dedicated picker endpoint Used in S4
Purpose Pick a due date for issue Composition AppDateField (native date picker); client enforces future dates (server accepts any IsDateString — issue-book.dto.ts:14-15); default +14 daysUsed in S4, S6 (read-only display)
Purpose Return-form fine computation explainer Composition "Days overdue: N → N × 5/day = 20" plus editable fineAmount (staff only) and note "server recomputes at return" Source rule library.service.ts:211-217, override return-book.dto.ts:9-13 Used in S6
AppButton, AppTextField, AppSnackbar, AppCard, AppListTile, AppBottomSheet,
AppDialog, AppMenu, AppSkeleton, AppEmptyState, AppOfflineBanner, AppFAB,
AppBadge, AppChips, AppSearchBar, AppAvatar, AppDateField, AppPicker.
S1 S2 S3 S4 S5 S6 S7
AvailabilityBadge ✓ ✓ ✓ FineChip ✓ ✓ ✓ OverdueTag ✓ ✓ ✓ CopyStepper ✓ BookRow ✓ ✓ BorrowRecordCard ✓ ✓ ✓ StudentPicker ✓ DueDateField ✓ FineSummaryPanel ✓