01.06.WUI Features

01.06. WUI Features

This document outlines the core features and functionalities of the bnc-cpt-wui project.

Vue 3 & TypeScript: Composition API (<script setup>) with strict TypeScript.
Responsive Design: Tailwind CSS with modern glass-morphism aesthetic.
Skeleton Loaders: CSS-animated pulse blocks mask API latency during data fetching.
V2 User Flow: Connect-First journey (Authorize → Select Vehicle/Package → Pay → Report).

Pinia: Centralized state for application flow and vehicle data.
Persistence: Critical identifiers (session ID, language) persisted to localStorage.
Session Timer: Real-time visual countdown for backend session expiry.

Languages: Full support for 9 languages: English (en), Finnish (fi), Swedish (sv), Norwegian (no), Danish (da), German (de), French (fr), Spanish (es), Italian (it).
Sync: Frontend locale is automatically synchronized with backend PDF generation.
Reactive Translation: All report UI elements (chapter headings, labels, buttons, dates) update instantly on language switch.

Async Generation: Real-time percentage progress bar during PDF rendering.
Polling: Automatic background polling for report completion.
Interactivity: Dynamic interpretation of battery health, charging stats, and alerts.
Cloud Delivery: Direct download links to GCS-hosted reports via Signed URLs.
Download Invoices: One-click button to download all charging invoices across all vehicles as a single ZIP archive, organized in per-vehicle subfolders.
Charging CSV: Per-vehicle charging history export as CSV.

User-Uploaded Images: Users can upload up to 10 pictures of their vehicle (e.g. exterior, interior, damage, mileage).
Client-Side Validation: File type (JPEG, PNG), size limits, and max count (10) enforced before upload.
Preview & Manage: Thumbnail preview grid with drag-to-reorder and delete functionality.
Report Integration: Uploaded images are rendered at the bottom of both the HTML and PDF reports as a "Vehicle Photos" section.