Migrate 'Usage' portlet UI to PrimeNG (Angular 21) #34250
Description
Goal
Migrate the existing Usage portlet UI so it looks and behaves correctly using PrimeNG and Angular 21, aligned with the rest of the modernized DotCMS UI.
http://localhost:8080/dotAdmin/#/usage
Background / Context
We are updating legacy portlets to the new UI stack. The Usage portlet currently has visual/layout inconsistencies and does not match PrimeNG styling/UX expectations. The portlet is already using standalone components but needs PrimeNG migration.
This migration is part of the PrimeNG 20 upgrade effort tracked in #33882.
Scope
- Update the Usage portlet components/templates/styles to use PrimeNG components and patterns.
- Ensure layout, spacing, typography, and interactions match the modern UI.
- Keep the existing functional behavior intact unless otherwise noted.
Components to Migrate
Main Screens:
- Usage Shell (
DotUsageShellComponent) -/usage
Current PrimeNG Dependencies:
ButtonModuleCheckboxModuleDialogService(deprimeng/dynamicdialog)DynamicDialogModuleInplaceModuleInputTextModuleMenuModuleTableModuleDataViewModule(en dot-add-variable)SharedModule(deprimeng/api)ConfirmationService(deprimeng/api)
Location: libs/portlets/dot-usage/src/lib/
Requirements
- Use PrimeNG components where applicable (tables, dialogs, buttons, inputs, dropdowns, toast/messages, etc.).
- Replace legacy PrimeNG module imports with Angular 21 standalone component patterns where applicable.
- Accessibility basics: keyboard navigation, focus states, proper labels/aria where needed.
- No regressions in functionality (usage statistics, reporting, etc.).
Acceptance Criteria
- Usage portlet UI matches PrimeNG look & feel and is consistent with the rest of the app.
- No console errors in dev.
- All components use modern PrimeNG patterns (Angular 21 compatible).
- Add/update tests where the project already has coverage and ensure they pass.
Related Epic
This issue is part of the PrimeNG 20 upgrade epic: #33882