# UI and UX specification

## Design goal

A recruiter or non-technical manager must understand the business value within thirty seconds. Use a restrained professional interface, clear language and direct links from attention items to records.

## Persistent demo disclosure

Show a compact banner on every authenticated page:

> Synthetic demo environment — no real customer or vehicle data.

## Navigation

- Dashboard
- Vehicles
- Bookings
- Data Quality
- Knowledge
- Automation
- Audit

## Demo login

Two primary buttons:

- Open as Operations Manager
- Open as Rental Employee

Also show one sentence explaining what each role can demonstrate.

## Dashboard

Top metrics:

- available;
- rented;
- maintenance;
- blocked;
- open quality issues;
- failed/pending workflows.

Sections:

1. Attention required — sorted by severity and proximity to next booking.
2. Today — departures, returns and incomplete inspections.
3. Recent automation — latest five runs.

## Vehicle list/detail

List filters: status, location, attention only. Detail tabs: overview, bookings, inspections, maintenance, quality issues, audit.

## Booking return flow

Use a short single-page form with visible validation. After submission show a result summary explaining:

- persisted inspection;
- resulting vehicle status;
- created quality issue if any;
- queued automation event;
- next booking risk.

## Data Quality Workbench

Use a two-column comparison for duplicate customers with matching signals and a deliberate field-selection merge step. Other issue types need evidence, proposed resolution and an audit preview.

## Knowledge

Chat-like question box is acceptable, but the answer must prioritize source cards: title, version, section and excerpt. Show explicit unavailable and insufficient-evidence states.

## Accessibility

- keyboard-operable controls;
- visible focus;
- semantic headings and form labels;
- status not encoded by color alone;
- responsive at 360 px width;
- no hover-only actions.