Booking UI Continuity Matrix¶
- Status:
SOURCE REVIEWED — LOCAL/QA VISUAL RECHECK NOT RUN FOR THIS SLICE - Product surface:
collection + record workspace - Current Logistics Workspace owners:
apps/web/src/composition/pages/booking/BookingListExperience.tsxapps/web/src/composition/pages/booking/BookingWorkspace.tsxapps/web/src/composition/pages/booking/bookingProfiles.ts- Current Legacy evidence:
frontend/pages/system/TMS/booking/mk-booking-list.phppublic/assets/js/modules/shared/kj-table-options-master.jspublic/assets/js/modules/shared/booking-editor-contracts.jspublic/assets/js/modules/shared/booking-editor.jsdocs/reference/modernization-v1/baseline/06-popup-parity-evidence.mddocs/reference/modernization-v1/baseline/07-popup-deep-behavior-parity.md
1. Decision¶
The Logistics Workspace does not copy the Legacy visual shell. It preserves the operator-facing information model and workflow where current source still proves it: column vocabulary/order, field grouping, defaults, command hierarchy, related child flows, dirty-close behavior and authoritative readback. Colors, spacing, typography, responsive layout, accessibility and React ownership are modernized.
Legacy is operational evidence, not unrestricted target authority. Unsupported or conflicting fields
remain DEFER; they are not silently dropped or invented in the typed Logistics Workspace contract.
2. CTC Collection Columns¶
The order and abbreviations below remain recognizable to current operators. Shared
DataTableColumnKind owns alignment and formatting; the feature owns values and capability visibility.
| Order | Key | Label | Kind | Disposition |
|---|---|---|---|---|
| 1 | BOOKING_NUMBER |
BK # |
identifier | preserve vocabulary/order; modernize cell link |
| 2 | SHIPPING_LINE |
SSL |
text | preserve |
| 3 | VESSEL_NAME |
VSL |
text | preserve |
| 4 | ERD |
ERD |
date | preserve |
| 5 | SI_CUTOFF |
SI |
date | preserve |
| 6 | CUTOFF |
CUT |
date | preserve |
| 7 | ETD |
ETD |
date | preserve |
| 8 | ETA |
ETA |
date | preserve |
| 9 | QUANTITY_40F |
40F |
quantity | preserve numeric meaning |
| 10 | QUANTITY_40S |
40S |
quantity | preserve numeric meaning |
| 11 | QUANTITY_40H |
40H |
quantity | preserve numeric meaning |
| 12 | QUANTITY_45H |
45H |
quantity | preserve numeric meaning |
| 13 | QUANTITY_20S |
20S |
quantity | preserve numeric meaning |
| 14 | PICKUP_TERMINAL_NAME |
PU TERM |
relation | preserve |
| 15 | RETURN_TERMINAL_NAME |
RTN TERM |
relation | preserve |
| 16 | COMMODITY_NAME |
COMMODITY |
relation | preserve |
| 17 | BILLING_COMPANY_NAME |
COMPANY |
relation | preserve |
| 18 | IS_PACKINGLIST_SUBMITTED |
PKLIST |
boolean | preserve state meaning |
| 19 | IS_PIERPASS |
PP |
boolean | preserve state meaning |
| 20 | REMARK |
REMARK |
text | preserve |
3. MK Collection Columns¶
This order follows the current Legacy MK_BOOKING_LIST schema. Advanced columns remain capability
controlled rather than becoming a customer-name branch in shared UI code.
| Order | Key | Label | Kind | Default behavior | Disposition |
|---|---|---|---|---|---|
| 1 | BILLING_COMPANY_NAME |
CUSTOMER |
relation | sort/filter | preserve |
| 2 | PO_NUMBER |
SO # |
identifier | sort/filter | preserve operator vocabulary |
| 3 | SHIPPING_LINE |
SSL |
text | sort/filter | preserve |
| 4 | BOOKING_NUMBER |
BK # |
identifier | sort/filter/open record | preserve |
| 5 | COMMODITY_NAME |
COM |
relation | sort/filter | preserve |
| 6 | VESSEL_NAME |
VESSEL |
text | sort/filter | preserve |
| 7 | ERD |
ERD |
date | sort/filter | preserve |
| 8 | SI_CUTOFF |
PL C/O |
date | sort/filter | preserve |
| 9 | CUTOFF |
C/O |
date | sort/filter | preserve |
| 10 | TOTAL_USAGE |
TOTAL |
usage | display only | preserve ratio semantics |
| 11 | F |
40F |
usage | display only | preserve ratio semantics |
| 12 | S |
40S |
usage | display only | preserve ratio semantics |
| 13 | H |
40H |
usage | display only | preserve ratio semantics |
| 14 | 45H_USAGE |
45H |
usage | display only | preserve ratio semantics |
| 15 | 20S_USAGE |
20S |
usage | display only | preserve ratio semantics |
| 16 | PICKUP_TERMINAL_NAME |
PU TML |
relation | sort/filter | preserve |
| 17 | RETURN_TERMINAL_NAME |
RTN TML |
relation | sort/filter | preserve |
| 18 | MINIMUM_WEIGHT |
MIN |
weight | sort/filter | preserve numeric meaning |
| 19 | MAXIMUM_WEIGHT |
MAX |
weight | sort/filter | preserve numeric meaning |
| 20 | IS_PACKINGLIST_SUBMITTED |
PKLIST |
boolean | advanced capability | preserve state meaning |
| 21 | IS_PIERPASS |
PP |
boolean | advanced capability | preserve state meaning |
| 22 | IS_CLEAN_TRUCK_FEE |
CLEAN |
boolean | advanced capability | preserve state meaning |
| 23 | IS_INVOICED |
INVOICE |
boolean | advanced capability | preserve state meaning |
| 24 | INVOICE_NUMBER |
# |
identifier | advanced capability | preserve |
| 25 | INSPECTION_ID |
Inspection ID |
identifier | advanced capability | preserve |
| 26 | REMARK |
RMK |
text | sort/filter | preserve |
Collection behaviors retained as workflow facts¶
- compact, horizontally scrollable operational table;
- visible order and abbreviations above;
- column sort/filter capability except usage columns;
- selected-row actions and explicit record open;
- date range, result count and paging where this workflow requires them;
- usage ratios and operational flags remain distinct data kinds;
- role/capability-controlled advanced columns remain outside shared visual code.
Row-tone rules in Legacy remain operational evidence. They are not promoted into a generic color rule until the status definitions and role expectations are reconciled with a typed Logistics Workspace row-state contract.
4. Record / Popup Anatomy¶
Legacy editor source defines the following cognitive order. The Logistics Workspace workspace now preserves that order while using shared React sections and current typed fields.
| Order | Legacy region | Current Logistics Workspace coverage | Disposition |
|---|---|---|---|
| 1 | flags/status | packing list, invoiced, Pierpass, clean-truck fee; active state in core | preserve meaning; modernize placement |
| 2 | core | invoice, PO/SO-compatible text, SSL, Booking #, vessel, type | preserve order/vocabulary |
| 3 | schedule | ERD, SI cutoff, cutoff, ETD, ETA | preserve order/default type |
| 4 | routing/parties | pickup, return, billing, shippers, P.O.L, P.O.D, destination | preserve grouping; capability-specific fields stay feature-owned |
| 5 | commercial | commodity, equipment quantities, minimum/maximum weight | preserve grouping and numeric types |
| 6 | instructions | special instruction and remark | preserve current typed subset |
| 7 | related/child work | Files, Photos, Packing/Confirmation, AI Reader | preserve hub relationship and tabs |
Popup behavior contract¶
| Contract | Decision |
|---|---|
| User-facing title | use Create Booking / Update Booking; retire technical BOOKING_LIST - ... copy |
| Header/body/footer | modern shared WorkspaceDialog; retain draggable header, scrolling body and fixed footer |
| Create/edit distinction | preserve create instruction intake and edit summary/related tabs |
| Field-group scan order | flags → core → schedule → routing → commercial → instructions |
| Primary command | one Save/Create command with explicit saving state |
| Dirty close | preserve confirmation before discarding changes |
| Focus | preserve opener focus restoration and Escape/close ownership |
| Conflict | preserve reload-latest path |
| Unknown result | preserve authoritative readback before retry |
| Child flows | retain Files, Photos, Packing/Confirmation and AI as related workspace tabs |
5. Deferred Legacy Fields And Flows¶
The following Legacy facts are not silently added because the current typed Booking contract does not own them or their capability rule is unresolved:
| Legacy item | Current status | Required next evidence |
|---|---|---|
| Sales Order identity/number and consignee | DEFER |
Phase-2 MK order ownership and typed relation contract |
| Commodity rate | DEFER |
Cost/rate owner and currency semantics |
| Seal type | DEFER |
current Process requirement and persistence owner |
| Label / label message | DEFER |
document/label workflow authority |
| Inspector identity/email | DEFER |
inspection module ownership and permission contract |
NOT_IN_USE visual flag |
REPLACE with typed active lifecycle |
authoritative lifecycle/readback mapping |
| Clone, Create Empty, EIR and container-edit child commands | DEFER in this workspace slice |
exact capability, route, effect and cleanup evidence |
| Legacy row tones | DEFER as generic UI |
typed status taxonomy and target-role validation |
6. Visual Modernization Boundary¶
Preserve:
- familiar labels and abbreviations;
- column and field-group order where still valid;
- dense scanability, usage/quantity distinction and related-workflow access;
- save/readback, dirty-close, selection and nested-flow behavior.
Modernize:
- title copy, typography, colors, spacing, borders and responsive layout;
- semantic column alignment through
DataTableColumnKind; - accessible labels, focus states and shared dialog/table components;
- removal of duplicate flags and implementation-specific technical identifiers.
Do not copy:
- page-local Legacy colors and arbitrary dimensions;
- jQuery/KJ DOM ownership into native React surfaces;
- numeric tenant branching into shared UI;
- unsupported fields or side effects without a typed owner.
7. Verification Boundary¶
This matrix is SOURCE evidence. Before claiming visual or operator acceptance:
- compare the current Legacy and Logistics Workspace list with representative CTC and MK data;
- verify every default visible column, abbreviation, kind, sort/filter rule and capability column;
- verify create/edit field order, defaults, dirty close, focus restore and child tabs;
- verify save, conflict and unknown-result readback with disposable data;
- record any intentional retirement with caller-zero or superseding Product authority.
---¶
Source:
new-system/docs/pages/transportation/booking-compatibility/UI_CONTINUITY_MATRIX.md— ctc repository · This page is an English translation of the source document. Identifiers, file paths and code symbols are unchanged.