●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-state kiosk UI with screens for ready-to-scan, searching, invoice display, payment processing, success, and error.
- Simulated scan and payment flows using async delays to mimic hardware/network latency.
- Invoice presentation with a responsive Bootstrap table, subtotal/tax/total calculation, and action buttons for payment and reset.
- Inactivity timer that resets the kiosk after a period of no interaction.
## Key components
- Razor page with a private enum KioskState and state switch rendering.
- InvoiceViewModel, InvoiceItemViewModel, ProductViewModel (models provided)
- HTML table (.table, .table-hover) for invoice line items
- Buttons and layout using Bootstrap classes (btn, btn-lg, d-grid, row, col)
- System.Timers.Timer for inactivity handling
## How it works
- State machine: _currentState drives which UI block renders via a switch statement in the Razor file.
- SimulateScan and ProcessPayment methods perform async Task.Delay to emulate external hardware, then update _invoice/_errorMessage and _currentState and call StateHasChanged (via InvokeAsync when invoked from timer callbacks).
- Invoice totals are computed in InvoiceViewModel properties (Subtotal, Tax, TotalAmount) using LINQ Sum.
- ResetInactivityTimer restarts the Timer; OnInactivity executes on the UI thread with InvokeAsync and calls ResetKiosk.
## Styling
- Uses Bootstrap utility and component classes for responsive layout, buttons, grid and table behavior.
- Custom scoped CSS (KioskPage.razor.css) applies a playful theme: pastel background, rounded card, large touch-friendly buttons, and color tokens (hot pink primary, yellow secondary, mint success).
- Table area is constrained with overflow-y for long invoices. Headings and buttons are sized for kiosk/touch contexts.
## Reuse steps
1. Add the Razor file and the model classes to a Blazor project (Server or WebAssembly) and include the scoped CSS file.
2. Ensure Bootstrap CSS is referenced in the project (wwwroot/index.html or _Host.cshtml).
3. Register any needed services (none required for this demo) and add using statements where appropriate.
4. Replace mock GetMockInvoice and Task.Delay calls with real scan/payment integrations and backend APIs.
5. Wire authentication, logging, and hardware event handlers (barcode scanner, payment terminal) as required.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI; it uses mock data and simulated delays rather than real hardware or backend services.
- No form validation components (EditForm/DataAnnotations) are present because input is simulated via buttons.
- Accessibility and kiosk-specific concerns (keyboard navigation, screen reader labels, secure payment integration) require further work.
- Suggested additions: real scan event handlers, payment terminal SDK integration, server-side invoice lookup, and localization/printing support.