[UI] Bootstrap 5 Migration – Phase 2b Retail Shipment Detail Page #89

New Issue

2026-06-29T08:36:21Z

rob commented

2026-06-29 08:36:21 +00:00

Summary

Migrate the Shipment Detail page to Bootstrap 5, matching the approved design system. This is the page displayed when clicking a Shipment No. link from the Retail Shipments list.

Stack: PHP / Laminas MVC. Templates are .phtml files.

Acceptance Criteria

Layout

Same sidebar, topbar, dark mode, notice banner as all other pages
Back link ← Shipments top-left, links back to the shipments list
Page title "Shipment #XXXX" + status pill on the same line as the back link
Three-column grid: Shipment Details | Ship To | Actions
Actions column only renders when $this->shipment['has_label'] is true

Shipment Details card (Col 1)

Key/value table with alternating row borders
Row order: Status · Type · Created · Shipped At · Tracking # · Reported Back · Order Reference · Connector · Carrier Service Level · Predefined Package · Your Packaging · Weight
Tracking # — editable input + Save button, submits to shipments/save-tracking
Reported Back — green ✓ Yes (bi-check-circle-fill) when true; red ✗ No (bi-x-circle-fill) when false. This field indicates whether tracking was successfully posted back to the originating sales channel (eBay, Amazon, Shopify, etc.)
Order Reference (not "Order Ref") — green monospace link to the order detail page, with channel name + channel order ref on a second muted line below
"not shipped" shown in muted colour when shipped_at is null

Ship To card (Col 2)

Customer full name on its own line above street address line 1 — bold, falls back to "John Doe" if not provided
Full address below name in monospace muted text
Edit button (sky blue, pencil icon) top-right corner of card

Actions card (Col 3) — only when `has_label = true`

Reprint Label button — sky blue, full width, printer icon
Void Label button — red, full width, x-circle icon, confirm dialog before submit
Void alert banner — amber, shows "You have X days left to void this label" with X in a sky-blue circle badge. Hidden when void_days_remaining is null

Contents table

Columns: SKU (green monospace link to product) · Description · Qty · Avail
Empty state row if no contents

Print Jobs table

Columns: ID · Created · # Shipments
Print Job ID is a clickable green monospace link to the print job detail page
Created column shows datetime + "by {initials}" e.g. "2026-05-22 03:03 PDT by JD"
Empty state row if no print jobs

Attached Files

Phase 2b - Shipment Detail Page.zip

File	What to do with it
`shipment-detail.phtml`	New Shipment Detail view — wire up controller context
`_components.scss`	Updated — adds all detail page component styles

All other files are unchanged. Replace only the two files above.

File Placement

shipment-detail.phtml → module/Shipments/view/shipments/detail/index.phtml
_components.scss → scss/_components.scss (replaces previous version)

Controller Context

shipment-detail.phtml expects these variables from ShipmentsController::detailAction():

return new ViewModel([
    'shipment'   => [
        'id'                  => $shipment->getId(),
        'shipment_number'     => $shipment->getNumber(),
        'status'              => $shipment->getStatus(),       // new|pending|picking|picked|shipping|shipped|cancelled|legacy
        'type'                => $shipment->getType(),
        'created_at'          => $shipment->getCreatedAt(),
        'shipped_at'          => $shipment->getShippedAt(),    // null if not shipped
        'tracking_number'     => $shipment->getTrackingNumber(),
        'reported_back'       => $shipment->isReportedBack(),  // bool
        'order_id'            => $shipment->getOrderId(),
        'order_number'        => $shipment->getOrderNumber(),
        'channel'             => $shipment->getChannel(),
        'channel_order_ref'   => $shipment->getChannelOrderRef(),
        'connector'           => $shipment->getConnector(),
        'carrier_service'     => $shipment->getCarrierService(),
        'predefined_package'  => $shipment->getPredefinedPackage(),
        'your_packaging'      => $shipment->getYourPackaging(),
        'weight'              => $shipment->getWeight(),
        'void_days_remaining' => $shipment->getVoidDaysRemaining(), // int|null
        'has_label'           => $shipment->hasLabel(),             // bool
        'customer_name'       => $shipment->getCustomerName(),
        'ship_to_address'     => $shipment->getShipToAddress(),     // newline-separated
    ],
    'contents'   => $contents,    // array of ['sku', 'product_id', 'description', 'qty', 'available']
    'printJobs'  => $printJobs,   // array of ['id', 'created_at', 'created_by', 'shipment_count']
    'noticeSkus' => $noticeSkus,
]);

Out of Scope

Editing the shipping address (modal/form — separate ticket)
MCF Shipment section (separate ticket — only appears on order detail, not shipment detail)
Mobile/responsive breakpoints — separate ticket

Definition of Done

grunt build runs with zero errors after replacing _components.scss
Page renders correctly in Chrome and Firefox, light and dark mode
Reported Back shows green check when true, red X when false
Customer name appears above address in Ship To card
Print Job ID is a clickable green link
Actions column hidden when has_label is false
MR reviewed against the approved HTML preview file before merge

## Summary Migrate the Shipment Detail page to Bootstrap 5, matching the approved design system. This is the page displayed when clicking a Shipment No. link from the Retail Shipments list. **Stack: PHP / Laminas MVC. Templates are `.phtml` files.** --- ## Acceptance Criteria ### Layout - [ ] Same sidebar, topbar, dark mode, notice banner as all other pages - [ ] Back link `← Shipments` top-left, links back to the shipments list - [ ] Page title "Shipment #XXXX" + status pill on the same line as the back link - [ ] **Three-column grid**: Shipment Details | Ship To | Actions - [ ] Actions column only renders when `$this->shipment['has_label']` is true ### Shipment Details card (Col 1) - [ ] Key/value table with alternating row borders - [ ] Row order: Status · Type · Created · Shipped At · Tracking # · Reported Back · Order Reference · Connector · Carrier Service Level · Predefined Package · Your Packaging · Weight - [ ] **Tracking #** — editable input + Save button, submits to `shipments/save-tracking` - [ ] **Reported Back** — green `✓ Yes` (`bi-check-circle-fill`) when `true`; red `✗ No` (`bi-x-circle-fill`) when `false`. This field indicates whether tracking was successfully posted back to the originating sales channel (eBay, Amazon, Shopify, etc.) - [ ] **Order Reference** (not "Order Ref") — green monospace link to the order detail page, with channel name + channel order ref on a second muted line below - [ ] "not shipped" shown in muted colour when `shipped_at` is null ### Ship To card (Col 2) - [ ] **Customer full name on its own line above street address line 1** — bold, falls back to "John Doe" if not provided - [ ] Full address below name in monospace muted text - [ ] Edit button (sky blue, pencil icon) top-right corner of card ### Actions card (Col 3) — only when `has_label = true` - [ ] Reprint Label button — sky blue, full width, printer icon - [ ] Void Label button — red, full width, x-circle icon, confirm dialog before submit - [ ] Void alert banner — amber, shows "You have X days left to void this label" with X in a sky-blue circle badge. Hidden when `void_days_remaining` is null ### Contents table - [ ] Columns: SKU (green monospace link to product) · Description · Qty · Avail - [ ] Empty state row if no contents ### Print Jobs table - [ ] Columns: ID · Created · # Shipments - [ ] **Print Job ID is a clickable green monospace link** to the print job detail page - [ ] Created column shows datetime + "by {initials}" e.g. "2026-05-22 03:03 PDT by JD" - [ ] Empty state row if no print jobs --- ## Attached Files [Phase 2b - Shipment Detail Page.zip](/uploads/ffcf5d6ea3dbc4bcc74aec1f7dba188e/Phase_2b_-_Shipment_Detail_Page.zip) | File | What to do with it | |------|--------------------| | `shipment-detail.phtml` | New Shipment Detail view — wire up controller context | | `_components.scss` | Updated — adds all detail page component styles | > All other files are **unchanged**. Replace only the two files above. --- ## File Placement - `shipment-detail.phtml` → `module/Shipments/view/shipments/detail/index.phtml` - `_components.scss` → `scss/_components.scss` (replaces previous version) --- ## Controller Context `shipment-detail.phtml` expects these variables from `ShipmentsController::detailAction()`: ```php return new ViewModel([ 'shipment' => [ 'id' => $shipment->getId(), 'shipment_number' => $shipment->getNumber(), 'status' => $shipment->getStatus(), // new|pending|picking|picked|shipping|shipped|cancelled|legacy 'type' => $shipment->getType(), 'created_at' => $shipment->getCreatedAt(), 'shipped_at' => $shipment->getShippedAt(), // null if not shipped 'tracking_number' => $shipment->getTrackingNumber(), 'reported_back' => $shipment->isReportedBack(), // bool 'order_id' => $shipment->getOrderId(), 'order_number' => $shipment->getOrderNumber(), 'channel' => $shipment->getChannel(), 'channel_order_ref' => $shipment->getChannelOrderRef(), 'connector' => $shipment->getConnector(), 'carrier_service' => $shipment->getCarrierService(), 'predefined_package' => $shipment->getPredefinedPackage(), 'your_packaging' => $shipment->getYourPackaging(), 'weight' => $shipment->getWeight(), 'void_days_remaining' => $shipment->getVoidDaysRemaining(), // int|null 'has_label' => $shipment->hasLabel(), // bool 'customer_name' => $shipment->getCustomerName(), 'ship_to_address' => $shipment->getShipToAddress(), // newline-separated ], 'contents' => $contents, // array of ['sku', 'product_id', 'description', 'qty', 'available'] 'printJobs' => $printJobs, // array of ['id', 'created_at', 'created_by', 'shipment_count'] 'noticeSkus' => $noticeSkus, ]); ``` --- ## Out of Scope - Editing the shipping address (modal/form — separate ticket) - MCF Shipment section (separate ticket — only appears on order detail, not shipment detail) - Mobile/responsive breakpoints — separate ticket --- ## Definition of Done - [ ] `grunt build` runs with zero errors after replacing `_components.scss` - [ ] Page renders correctly in Chrome and Firefox, light and dark mode - [ ] Reported Back shows green check when true, red X when false - [ ] Customer name appears above address in Ship To card - [ ] Print Job ID is a clickable green link - [ ] Actions column hidden when `has_label` is false - [ ] MR reviewed against the approved HTML preview file before merge

rob added the QA label 2026-06-29 08:36:21 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rob/estack-laminas#89

[UI] Bootstrap 5 Migration – Phase 2b Retail Shipment Detail Page #89