Cockpit
The cockpit is the main screen of Stockaj Kiosk. It combines checkout and return functions in a 3-column interface with tabs.
Screen Layout
The screen is divided into 3 columns:
| Column | Width | Content |
|---|---|---|
| Left | 360 px | Volunteer search |
| Center | Flexible | Checkout / Return tabs |
| Right | 300 px | Open rentals list |
┌──────────┬──────────────────────────────┬──────────┐
│ Volunteer│ [Checkout] [Return] │ Open │
│ search │ │ rentals │
│ │ │ │
│ ┌──────┐ │ Active tab content │ #42 ─────│
│ │ 🔍 │ │ │ #38 ─────│
│ │ ... │ │ │ #35 ─────│
│ │ │ │ │ #31 ─────│
│ └──────┘ │ │ │
└──────────┴──────────────────────────────┴──────────┘
Left Column — Volunteer Search
The left column allows selecting the volunteer for whom to perform a checkout or return.
Searching for a Volunteer
Type at least 2 characters in the search field to search by first or last name. The search triggers automatically after 300 ms of typing.
Search Results
Each result displays:
- The volunteer's name
- Their phone number (if available)
- A badge showing the number of active rentals (if applicable)
Selection
Click a volunteer to select them. They are then displayed with a colored border and an ✕ button to deselect. The volunteer's active rentals are automatically loaded.
Keyboard Navigation
| Key | Action |
|---|---|
| ↓ Down arrow | Select next result |
| ↑ Up arrow | Select previous result |
| Enter | Confirm selection |
Center Tabs
The center area has two tabs with badges showing item counts:
- Checkout — Badge: number of items in the cart
- Return — Badge: number of active rentals for the selected volunteer
Smart Scanner
The QR code / barcode scanner is always active on the cockpit. The kiosk automatically determines the action:
| Situation | Behavior |
|---|---|
| The scanned item is part of an active rental | Selects the corresponding volunteer, switches to Return tab, loads their rentals |
| The scanned item is available | Switches to Checkout tab, adds the item to the cart |
| The item is not found | Displays an error message |
Checkout Tab
The Checkout tab allows creating an equipment loan.
Add Items by Scanning
Scan the QR code or barcode of an item to add it to the cart. If the item is already in the cart, its quantity is incremented.
Add Items by Search
Use the "Search for an item…" field to find an item by name or code. The search requires at least 2 characters and triggers after 350 ms.
Each result displays:
- The item name
- Its code
- Availability: "Available: N"
Click a result to add it to the cart.
The Cart
The cart displays the list of selected items.
Empty Cart
When no items have been added, a message prompts to scan an item:
🛒 Scan an item to add it
Items in the Cart
For each added item, the cart displays:
| Element | Description |
|---|---|
| Name | Item name |
| Code | Item code (gray text) |
| − | Decrease quantity (disabled if quantity = 1) |
| Quantity | Number of units |
| + | Increase quantity |
| ✕ | Remove item from cart |
Stock Warning
If the requested quantity exceeds available stock, a red warning is displayed:
⚠️ Insufficient stock (available: N)
This warning is informational and does not prevent checkout validation.
Confirm Checkout
The "✓ Confirm Checkout" button (green) at the bottom of the center area sends the request to the server.
- The button is disabled if no volunteer is selected or the cart is empty
- A loading indicator is displayed during submission
Return Tab
The Return tab allows recording the return of borrowed equipment.
Prerequisites
A volunteer must be selected in the left column. Their active rentals are then displayed as a list.
Rental Selection
Each rental is displayed as a card containing:
| Element | Description |
|---|---|
| Rental #{id} | Rental identifier |
| Date | Creation date in Swiss format (e.g., January 15, 2026) |
| Items | List of borrowed items with quantities |
Click a card to display the return details.
Return Details
For each item in the rental, you can indicate whether it is returned or lost:
Single Quantity Item (×1)
Two buttons are displayed:
| Button | Description |
|---|---|
| ✅ Returned | The item has been returned (selected by default) |
| ⚠️ Lost | The item is declared lost |
Multiple Quantity Item (×N)
Two counters are displayed:
| Counter | Description |
|---|---|
| Returned: | Number of units returned (− and + buttons) |
| Lost: | Number of units lost (− and + buttons) |
The two counters are linked: the sum of returned and lost cannot exceed the total borrowed quantity.
Confirm Return
The "✓ Confirm Return" button (green) sends the return to the server.
Right Column — Open Rentals
The right column displays all open rentals across all volunteers, not just the selected one. A "Refresh" button allows reloading the list.
Each card displays:
- The volunteer's name
- The rental identifier
- The borrowed items
- A status badge (In progress, Overdue)
Click a rental to automatically select the corresponding volunteer and display their returns.
Confirmation Screen
After validating a checkout or return, a fullscreen confirmation screen is displayed:
- ✅ Large green icon
- "Checkout confirmed!" or "Return confirmed!"
- "For {volunteer name}"
The screen closes automatically after 3 seconds and resets the cockpit. You can also close it by clicking anywhere or pressing Enter / Space.
Offline Operation
If the server is unreachable at the time of validation, the operation is queued and will be automatically synced when connectivity is restored. The confirmation screen is still displayed.
For more information, see the Offline Mode page.