OUI Web UI

OUI_XFAB documentation

UI Migration Review Screenshots

Each migrated UI module keeps a settled before/after screenshot pair for visual review:

docs/ui-migration-review/<module>/before-primevue.png
docs/ui-migration-review/<module>/after-vuetify.png

The complete migration inventory and dependency-aware sequencing are maintained in TRACKER.md.

The pair for a module must use the same route, viewport, locale, theme, fixture data, and interaction state. Captures use the deterministic Playwright WebSocket mock rather than a live EAP backend.

Capture Conditions

Captured Modules

Module PrimeVue baseline Vuetify result Review state
version c76703f 275120c New-version prompt for v9.9.9, 60-second countdown
dynamic-popup c76703f Same commit as the dynamic-popup migration and its screenshots Warning popup with equipment, load-port, lot, recipe, operator, Confirm, and Cancel
app-error-not-found PrimeVue baseline built from the pre-migration page Same commit as the app-page migration and its screenshots Hash route /#/not-a-real-route; Go Home returns to #/equipment
app-connection-recovery PrimeVue baseline built from the pre-migration component Same commit as the reconnect-surface migration and its screenshots Disconnected dialog with attempt 2, seven-second retry countdown, and Refresh action
app-equipment-navigation PrimeVue baseline built from the pre-migration legend dialog Same commit as the navigation migration and its screenshots Navigation fixture with the Control Status Legend open: Remote, Local, Offline, and Unknown
equipment-select PrimeVue baseline built from the configured-equipment select Same commit as the equipment-select migration and its screenshots Collapsed All equipment selector; WB01 filtering and selection verified separately
operator-failure PrimeVue baseline built from the operator failure dialog Same commit as the operator-failure migration and its screenshots Error dialog with EQP01, Reset EAP failure detail, and an OK-only close action
load-confirmation PrimeVue baseline built from the load confirmation dialog Same commit as the load-confirmation migration and its screenshots Confirmation dialog with Cancel and Confirm actions; confirm remains emitted before closing
load-port-parameters PrimeVue baseline built from the load-port parameter dialog Same commit as the parameter-dialog migration and its screenshots Track In with the RecipeId default value, close button, Cancel, and Submit
load-port-card PrimeVue baseline built from the occupied-port action fixture Same commit as the action-button migration and its screenshots Load enabled and Unload disabled with unchanged carrier, progress, and slot information
load-port-reconciliation PrimeVue baseline built from the full occupied and empty-port fixture Same commit as the reconciliation review and its screenshots Desktop and tablet: occupied carrier/progress/slot states, EAP enabled and disabled actions, and empty pending controls
equipment-header PrimeVue baseline built from Reset EAP confirmation Same commit as the header-dialog migration and its screenshots EQP01 header with Reset EAP confirmation, Employee ID field, Cancel, and disabled Confirm
equipment-tabs PrimeVue baseline built with Event Log selected Same commit as the core-tab migration and its screenshots Event Log, Active Alarms count, and Dispatching List with Active Alarms selection verified
display-run-info PrimeVue baseline built from the run-information prompt Same commit as the run-information migration and its screenshots Lot and recipe parameters with Cancel and check-mark Confirm actions
configuration-page PrimeVue baseline built from the disconnected protected-configuration page Same commit as the configuration-page migration and its screenshots Compact warning message with unchanged localized copy and page layout
admin-overview PrimeVue baseline built from the administration overview fixture Same commit as the administration overview migration and its screenshots Status grid and audit-unavailable state with matching labels and severities
admin-login PrimeVue baseline built from the default administrator login page Same commit as the administration login migration and its screenshots Empty credentials, disabled green Sign in action, password visibility, and return link
shared-toast PrimeVue success toast fixture Same commit as the shared snackbar migration and its screenshots Persistent Saved notification, with matching 400x78 top-right surface, icon, hierarchy, and close action
shared-confirmation PrimeVue confirmation-service fixture Same commit as the shared confirmation migration and its screenshots Confirm Delete with matching centered 232x195 surface, close action, No/Yes labels, and green/red action treatments
app-shell PrimeVue global loading-overlay fixture Same commit as the app-shell migration and its screenshots Loading equipment overlay with matching centered muted-red 72px spinner and text hierarchy
admin-shell PrimeVue administration-shell fixture Same commit as the administration-shell migration and its screenshots Administration header, navigation, identity, and Logout action retained with matching MDI icon and labels
admin-accounts PrimeVue two-account administration fixture Same commit as the administration-account migration and its screenshots Account names, status, date/lockout labels, alert, actions, and Add administrator control retained
tool-type-configuration PrimeVue populated configuration-table fixture Same commit as the configuration-table migration and its screenshots Two tool types, fixed-width search, green Add action, sortable columns, stripes, and destructive action retained

The migration tracker is complete. The retained reconciliation pair supplements the earlier load-port-card pair with occupied, empty, EAP-disabled, pending, desktop, and tablet states.

The version prompt fixture builds with VITE_VERSION_POLL_MS=250 only to open the polling-driven dialog promptly. The displayed data and visual state are otherwise unchanged between its before and after captures.