OUI_XFAB documentation
PrimeVue to Vuetify Migration Tracker
This tracker covers the incremental migration from PrimeVue 4, PrimeIcons, and PrimeUIX Aura themes to Vuetify 4 and Material Design Icons. Each completed tracker item keeps a deterministic before/after screenshot pair under this directory.
Status Legend
Complete: migrated, verified, screenshot pair retained, and committed.Ready: isolated surface identified and suitable for the next increment.Blocked: depends on shared notification/confirmation infrastructure or unresolved adjacent work.Pending: not started.
Foundation and Review
| ID | Surface | Status | Scope / dependency | Review artifact |
|---|---|---|---|---|
FOUND-01 |
Material Design Icons | Complete | Replaced application icon usage with MDI; @mdi/font remains the icon font. |
N/A |
FOUND-02 |
Vuetify foundation | Complete | Vuetify plugin, theme adapter, light/dark preference synchronization, and dependency documentation. | N/A |
FOUND-03 |
Screenshot review convention | Complete | Fixed route/data/viewport/locale/theme capture rules and retained PNG pairs. | N/A |
FOUND-04 |
Version update prompt | Complete | Migrated src/modules/version/ui/VersionUpdatePrompt.vue. |
version/ |
FOUND-05 |
Dynamic popup | Complete | Migrated src/modules/dynamic-popup/ui/DynamicPopupDialog.vue. |
dynamic-popup/ |
App Shell and Shared UI
| ID | Surface | Status | Scope / dependency | Review artifact |
|---|---|---|---|---|
APP-01 |
ErrorNotFound.vue |
Complete | Replaced standalone PrimeVue Button with a green Vuetify VBtn; return navigation is preserved. |
app-error-not-found/ |
APP-02 |
ConnectionRecovery.vue |
Complete | Replaced the reconnect dialog, refresh action, and spinner while preserving emitted recovery events. | app-connection-recovery/ |
APP-03 |
EquipmentNavigation.vue legend |
Complete | Replaced the read-only control-status legend dialog; navigation behavior is unchanged. | app-equipment-navigation/ |
SHARED-01 |
useAppToast.ts |
Complete | Replaced the PrimeVue toast service with a queued Vuetify snackbar facade while preserving the public API, lifetime semantics, severity mapping, and dismissal. | shared-toast/ |
SHARED-02 |
useAppConfirm.ts |
Complete | Replaced the PrimeVue confirmation service with a queued Vuetify dialog facade, preserving one active request, close/reject/accept behavior, No/Yes labels, and destructive action treatment. | shared-confirmation/ |
APP-04 |
AppShell.vue global hosts |
Complete | Mounted the shared Vuetify snackbar and confirmation hosts, and replaced the global loading spinner while preserving overlay appearance and lifecycle behavior. | app-shell/ |
BOOT-01 |
src/main.ts |
Complete | Removed the PrimeVue plugin and services after all production imports were gone. | N/A |
STYLE-01 |
PrimeVue styles | Complete | Removed _primevue.scss, obsolete selectors, lint restrictions, and direct dependencies. |
N/A |
Administration
| ID | Surface | Status | Scope / dependency | Review artifact |
|---|---|---|---|---|
ADMIN-01 |
AdministrationLoginPage.vue |
Complete | Replaced login fields, password visibility, error message, and submit control with Vuetify. | admin-login/ |
ADMIN-02 |
AdministrationOverviewPage.vue |
Complete | Replaced administration and audit PrimeVue tags with compact Vuetify status chips. | admin-overview/ |
ADMIN-03 |
AdministrationShell.vue |
Complete | Replaced the logout control and global toast/confirmation hosts with Vuetify while preserving administration navigation and session lifecycle behavior. | admin-shell/ |
ADMIN-04 |
AdministratorAccountsPage.vue |
Complete | Replaced account table, status badges, protected mutation dialogs, password visibility, and shared confirmations with Vuetify. | admin-accounts/ |
ADMIN-05 |
WorkstationAccessPage.vue |
Complete | Replaced the access-policy table, search, editor/delete dialogs, selects, textarea, toggle, status chips, and mutation feedback while preserving authoritative policy gating and audit requirements. | admin-workstation-access/ |
Configuration
| ID | Surface | Status | Scope / dependency | Review artifact |
|---|---|---|---|---|
CONFIG-01 |
ConfigurationPage.vue |
Complete | Replaced the protected-configuration PrimeVue message with a compact, non-dismissable Vuetify warning alert while preserving page styling and localized copy. | configuration-page/ |
CONFIG-02 |
ToolTypeConfigurationPanel.vue |
Complete | Replaced the table, editor/error dialogs, fields, actions, and delete confirmation with Vuetify while preserving configuration-store validation and mutation behavior. | tool-type-configuration/ |
Equipment
| ID | Surface | Status | Scope / dependency | Review artifact |
|---|---|---|---|---|
EQ-01 |
ConfiguredEquipmentSelect.vue |
Complete | Replaced the searchable equipment selector while preserving its empty-model contract. | equipment-select/ |
EQ-02 |
EquipmentDetailTabs.vue |
Complete | Replaced the core tab system with Vuetify while preserving controlled selection, the alarm count, and deferred dispatch loading. | equipment-tabs/ |
EQ-03 |
EquipmentHeader.vue |
Complete | Replaced the Reset EAP and control-mode local dialogs with Vuetify while preserving validation, actions, and emits. | equipment-header/ |
EQ-04 |
OperatorFailureDialog.vue |
Complete | Replaced the non-dismissable operator failure dialog with Vuetify while preserving its alert content and OK-only close action. | operator-failure/ |
EQ-05 |
DisplayRunInfoDialog.vue |
Complete | Replaced the non-dismissable run-information dialog, data table, and pending action states with Vuetify. | display-run-info/ |
EQ-06 |
LoadPortCard.vue |
Complete | Replaced load-port action controls with Vuetify while preserving EAP-authoritative visibility, enabled state, colors, and events. | load-port-card/ |
EQ-07 |
LoadConfirmationDialog.vue |
Complete | Replaced the load confirmation dialog with Vuetify while preserving cancel and confirm event ordering. | load-confirmation/ |
EQ-08 |
LoadPortParameterDialog.vue |
Complete | Replaced the parameter dialog and fields with Vuetify while preserving defaults, Cancel, close, and Submit behavior. | load-port-parameters/ |
EQ-09 |
LoadEntryDialog.vue |
Complete | Replaced the dialog, fields, title close action, and controls with Vuetify while preserving scanner navigation and the PrimeVue visual geometry. | load-entry/ |
EQ-10 |
MultipleLotEntryForm.vue |
Complete | Replaced shared fields and the scanner field with Vuetify while preserving multi-lot capture, duplicate detection, native Tab behavior, and visual geometry. | multiple-lot-entry/ |
EQ-11 |
Load-port visual reconciliation | Complete | Matched desktop and tablet review of occupied/empty, EAP action, pending, and progress states. | load-port-reconciliation/ |
Modules With No Production PrimeVue Imports
The following modules have no production primevue/ imports: alarm history, history, lot dispatch, version, dynamic popup, and workstation identity. The complete application and its co-located tests are now free of PrimeVue runtime dependencies.
Final Removal Gate
The final removal gate is complete: primevue, @primeuix/themes, PrimeVue services, PrimeVue styles, and PrimeVue-related lockfile entries have been removed. src has no production PrimeVue imports, shared toast and confirmation are Vuetify-backed, the bootstrap is cut over, architecture/lint rules and tests are updated, dependency documentation and the lockfile are synchronized, and the dependency, audit, lint, type-check, test, coverage, build, and production-preview E2E gates have passed.
Every module migration must also retain the matching screenshot pair, update README.md, run focused tests plus the relevant rendered flow, and commit only that module's changes and review artifacts.