UI Loadout Page

UI: Loadout page

The "what to physically pack and bring to the field" view. Only available when a show is staged. Hidden from the navigation otherwise.

📷 Screenshot placeholder: the Loadout view with one card per receiver, listing items per cue and a satellite map sidebar.

What's on the page

For the staged show, the Loadout page renders:

Per-receiver section

For each receiver that the show uses, a card with:

• Header: ident, label, total cues used.
• A row for each cue with:
  • Cue number.
  • The inventory item assigned (name, type, color, image thumbnail if present).
  • Effective fire time (the daemon's startTime - lift_delay value).
  • For racks: which rack and which cell(s) the cue ignites.

Items to pack summary

Across the top, a roll-up of every inventory item used in the show, with quantities:

• "12 × 3" Red Peony"
• "4 × Blue Comet 200g cake"
• "200 ft × Green Visco fuse (computed from rack fuse cell distances + lead-ins)"

Useful as a packing list when you're loading the truck.

Spatial layout

The Loadout reuses SpatialLayoutMap.jsx (the same satellite map the Editor uses) but in a read-only view. It shows:

• A pin at each receiver's lat/lng.
• Safety rings around each receiver computed from product metadata.safety_distance_ft.
• Inter-receiver distances.
• Optionally the audience location (if you've set one in the Editor).

Rack diagrams

For each rack referenced by RACK_SHELLS items, a small SVG rendering of the rack grid with shell positions and fuse paths overlaid. Cells that fire in this show are highlighted; cells assigned shells but not fired are dimmed.

Export

Two export buttons:

• Print PDF — uses html2canvas + jspdf to snapshot the entire Loadout page (or selected sections) and produce a printable PDF. Field-friendly: take it as a paper backup or load it on a tablet.
• Download — same PDF, downloaded directly.

The PDF is generated client-side; nothing leaves your machine.

When the page is hidden

The Loadout tab vanishes when:

• No show is staged.
• The staged show clears (e.g. you delete it).

If you were on the Loadout tab when the show un-staged, the UI falls back to the Console.

Implementation

• host/byh_app/backyardhero/src/components/receivers/ShowLoadout.jsx — the page itself.
• html2canvas + jspdf for PDF generation.
• Reuses SpatialLayoutMap.jsx from the builder.