[T02] Number Stock View

I'm designing a screen for the EMS admin portal — a Spring Boot + Angular SPA
admin tool used by event operators (race directors) and tenant admins to manage
participants, events, and operational data. Visual language matches existing
portal screens you've designed in this project (C01, C03, E01, E02, E05) —
JHipster 8 / Angular 16 / PrimeNG / ng-bootstrap stack; match fonts, spacing,
palette, density.

Design **T02 — the Number Stock View**: a tenant-scoped current stock view of
all race numbers (bib numbers, boards). The tenant admin / stock operator
uses it to see what's in stock, what's been issued, what's flagged unfit, and
to launch bulk actions (return, flag UNFIT, dispose).

T02 sits inside C01's shell. Sidebar is in the `tenant` scope (a new third
scope alongside `portfolio` and `event`, added in this design round) with an
"Inventory" group: Stock (this screen), Return, Bulk, Onboard, Manufacturer
export. T02 owns the main content area only.

A cross-cutting design rule: any disabled, hidden-by-policy, or limited
affordance MUST surface its reason inline (tooltip on hover, helper text,
empty-state copy). Operators should never have to guess why a control is
unavailable — this is a hard project rule.

============================================================
Layout (top to bottom inside the main content area)
============================================================

1. Filter strip — sticky to the top of the main area when the table scrolls.
   - NumberType (single-select dropdown).
   - Subtype (single-select; options scoped to the selected NumberType;
     disabled with tooltip "Pick a NumberType to filter by subtype" when
     no type is selected).
   - State (multi-select chip picker over five states: IN_STOCK, ISSUED,
     IN_USE, UNFIT_FOR_SERVICE, DESTROYED). MANUFACTURED is omitted.
   - Free-text search q (a single text input).
   - Reset (right-aligned ghost button) — clears all four filters and
     unsets any active KPI tile.

2. KPI tile strip — five tiles, one per operational state:
     IN_STOCK · ISSUED · IN_USE · UNFIT_FOR_SERVICE · DESTROYED
   Each tile shows the state name, the count, and an icon. The active
   tile renders in the accent treatment (indigo, matching C01 / E05).
   Clicking a tile narrows the table to that single state — it REPLACES
   any multi-state selection in the chip picker, not toggles. KPI counts
   come from a server endpoint (see "API surface" below); they should
   re-fetch when filters change.

3. Table — main content.
   Columns (left to right):
     - checkbox (bulk-select)
     - number (bold)
     - type
     - subtype
     - state pill (coloured per state; UNFIT in amber, DESTROYED in
       quieter grey, IN_STOCK in green, ISSUED in indigo, IN_USE in
       blue)
     - person (link if person_id set, em-dash if blank)
     - last_used (date, em-dash if null)
     - sequence (right-aligned numeric)
     - tag-mate barcode (monospace, em-dash if null)
   Default sort: type asc, sequence asc. Sortable on every column except
   state and tag-mate. Pagination: server-driven, page size 50, standard
   PrimeNG paginator.

   Row treatment:
     - Hover: subtle background tint, row click opens the drill-down
       panel (right rail).
     - DESTROYED rows: greyed text, checkbox uncheckable (greyed),
       click does NOT open the drill-down (terminal — read-only).
     - Selected rows: accent-tinted background, checkbox checked.

4. Bulk-select toolbar — materialises ABOVE the table (between filter
   strip and table) when ≥1 row is selected.
   - Left: "{N} selected" label + a "Clear selection" link.
   - Right: three buttons: Return  ·  Flag UNFIT  ·  Dispose
     Buttons are gated by the row states in the current selection:
     - Return: enabled unless every selected row is DESTROYED.
       Tooltip on disabled: "DESTROYED numbers are terminal — they
       cannot be returned to stock."
     - Flag UNFIT: enabled only if NO selected row is currently UNFIT
       or DESTROYED.
       Tooltip on disabled (UNFIT in selection): "Some selected
       numbers are already UNFIT. Remove them from the selection to
       flag the rest."
       Tooltip on disabled (DESTROYED in selection): "DESTROYED
       numbers cannot be flagged."
     - Dispose: enabled only if EVERY selected row is UNFIT.
       Tooltip on disabled: "Only UNFIT numbers can be disposed.
       Filter to UNFIT rows or remove non-UNFIT items from the
       selection."

   On click:
     - Return → navigates to T03 (the Stock Return screen) with the
       selected ids passed in route state.
     - Flag UNFIT → opens the T04 confirm dialog inline (modal)
       pre-loaded with the selected ids.
     - Dispose → opens the T04 confirm dialog inline (modal)
       pre-loaded with the selected ids; this dialog must show the
       irreversible-DESTROYED warning copy from T04.

   Selection persists across pagination up to a soft cap of 200 rows;
   beyond that, render an inline notice ("More than 200 rows selected
   — select-all-matching is not yet supported") and disable further
   row checks.

5. Drill-down side panel — right rail, opens on row click for any
   non-DESTROYED row.
   - Header: "Audit log — bib {number}" + close (X).
   - Body: per-transition list, newest first (server returns
     `List<RaceNumberStateLogDTO>` ordered by createdDate DESC).
     Each entry shows:
     - state transition (e.g. "ISSUED → IN_USE") rendered as two
       state pills with an arrow.
     - reason code (e.g. "RETURNED", "RESULT", "ASSIGNED",
       "REASSIGNED", "FLAG_UNFIT", "DISPOSE", "STOCK_TAKE_SCAN").
     - actor (principal login).
     - timestamp.
     - optional note (italic, indented).
     - optional batch link ("Print batch #PB-2026-04-22-001" or
       "Stock-take #ST-2026-05-01-001") — clickable when present.
   - Empty state when no log entries: "No audit log entries yet."
     (Defensive — number was created without state transitions.)
   - Error state (5xx from /state-log): one-line "Couldn't load
     audit log — try again" with a retry link inside the panel; do
     NOT raise a global error toast (rest of T02 stays usable).

============================================================
Filter & state behaviour
============================================================

- All filter selections + the active KPI tile + the current page +
  current sort are reflected in the URL query string so the view is
  shareable. Format follows the JHipster Tanstack convention (e.g.
  `?stateIn=S,F&typeIdEquals=78&q=H10&page=2&sort=sequence,asc`).

- After a bulk action returns control to T02 (T03 navigation back, or
  T04 dialog close), the table and KPI strip refresh automatically.

- Empty state: if the filtered query returns zero rows, render an
  empty-state card with "No numbers match these filters" and a
  "Clear filters" action that resets the strip.

============================================================
API surface
============================================================

GET /api/race-numbers/stock
  Query params (criteria-object):
    stateIn, typeIdEquals, subTypeIdEquals, personIdSpecified,
    sequenceGreaterOrEqualThan, sequenceLessOrEqualThan,
    lastUsedGreaterOrEqualThan, lastUsedLessOrEqualThan, q
  + standard Spring Pageable: page, size, sort
  Returns: paginated page of RaceNumberDTO with state, type, subtype,
  number, sequence, personId, personName, lastUsed, tagBarcode.

GET /api/race-numbers/stats?groupBy=state
  Returns: flat enum-keyed map of state → count for the KPI tiles.
    { "IN_STOCK": 1234, "ISSUED": 567, "IN_USE": 890,
      "UNFIT_FOR_SERVICE": 12, "DESTROYED": 5 }
  Keys are the canonical RaceNumberState enum names.

GET /api/race-numbers/{id}/state-log
  Returns: List<RaceNumberStateLogDTO> ordered by createdDate DESC.
  Each entry: { id, raceNumberId, transitionFromState, transitionToState,
  reason, note?, createdBy, createdDate, batchId? }.

============================================================
Output
============================================================

For each of these screen states:
  - default view (no filters, all rows, KPI strip showing all states)
  - filtered to UNFIT_FOR_SERVICE (KPI tile click)
  - bulk-select with mixed selection (Dispose disabled with tooltip)
  - bulk-select with UNFIT-only selection (Dispose enabled,
    irreversible warning visible in the confirm dialog mock)
  - drill-down panel open on a row with rich audit log (≥3 entries)
  - empty-state (filters yield zero rows)

Provide:
  - HTML/JSX + matching styles per screen state.
  - Screen README explaining what T02 does, the row-state action
    gating matrix, the URL-state contract, and the API endpoints
    consumed.
  - Cross-screen note: T02 hands off to T03 (route navigation) and T04
    (modal launch). The T03 and T04 screens are designed separately
    in this same round; T02 must not duplicate their internals.