# Workspace design and list conventions

Tenant modules and the Super Admin console share the same page headers, line icons, card surfaces, form controls, status colors, action buttons, record detail dialogs and pagination. Teal represents normal activity, indigo highlights platform and workflow functions, amber identifies upcoming work, and rose identifies failed, expired or rejected states. Status text accompanies color.

The Company Admin overview retains document expiry priorities, verified-date charts and renewal ownership. The platform overview adds tenant availability and OCR usage charts. All charts use local application data and native HTML/CSS; no external chart service or cloud dependency is required.

## Lists

`App\Support\ListView` appends whitelisted search and status conditions to an existing authorized Eloquent query. `paginateList()` retains tenant scopes, permission restrictions and the caller's ordering. Each model uses its own `list_<table>_q`, `list_<table>_state` and `list_<table>_size` query parameters. Page sizes are capped at 100. Separate page parameters keep secondary histories independent.

Use `<x-list-tools>` and `<x-list-pagination>` around each register. Search and status filters run before SQL pagination, including related employee names. Small, already-authorized configuration collections use `ListView::rows()` to apply equivalent controls. Form option collections remain complete. Financial document line items keep their complete reconciliation totals.

Existing effective-date, month, archived-record and platform subscription controls are retained. Saved employee/asset filters accept the shared toolbar's search and status values. Employee CSV exports apply the same list filters without imposing the visible page size.

Tables marked `data-ui-list` gain uniform action cells. Existing authorized actions are retained. Read-only records get an accessible, keyboard-dismissable detail dialog using only the text already available in the rendered row; no hidden model data is serialized into the browser. Existing edit, approval, upload, download, scan and maker/checker gates remain in force.

At narrow widths, register tables become labelled record cards with visible actions. Pagination and filters wrap for phones. The stylesheet respects reduced-motion preferences, and charts expose text descriptions and counts for assistive technology.

## Maintaining the design

- `resources/css/workspace-ui.css`: shared shell, panels, forms, lists, mobile cards and platform charts.
- `resources/css/dashboard.css`: Company Admin overview and compliance charts.
- `resources/js/workspace-ui.js`: local icon enhancement, action cells and safe record dialogs.
- `resources/views/components/page-header.blade.php`: section icons and headings.
- `resources/views/components/list-tools.blade.php`, `list-pagination.blade.php`, and `pagination/workspace.blade.php`: shared controls.
- `tests/Feature/UniformListsTest.php`: search across pages, tenant isolation, status validation, exports, and registry column/relation checks.

The update requires no database migration. The database remains `zentrikhrms` with all tables on InnoDB. The simple Docker-free hosting setup, disabled-by-default Tesseract OCR and per-tenant Super Admin switch are unchanged. The two explicitly configured local demo accounts retain their temporary password-only access.