HTML Prototype — Cashier & Shift Management
Light-theme static HTML prototype based on the Cashier & Shift Management Soft Release requirements document.
Open the prototype
Open the index file in a browser — no server or external libraries required:
Or run the local docs site (npm run start in site-documents) then open http://localhost:3000/prototypes/cashier-management/index.html.
Portals included
| Portal | Screens |
|---|---|
| Shop Portal | Cashier accounts, devices, scheduling, exceptions, approvals, reconciliation, reports |
| Cashier Portal | Login, assigned shift, opening cash, active transactions, cash drop, closing count, handover |
Recommended walkthrough
Full flow for a scheduled shift lifecycle:
Create Shift → Opening Cash → Cash Transactions → Closing → Manager Review
Start from Shift Schedule or follow the order below.
Shop Portal screens
| Screen | File | Requirements | Purpose |
|---|---|---|---|
| Prototype Index | index.html | — | Scope overview |
| Cashier Management | shop-cashiers.html | FR-CA-001, FR-CA-002, FR-CA-003, NFR-009 | Cashier account list |
| Cashier Detail | shop-cashier-detail.html | FR-CA-003, FR-DV-002, FR-DV-003, FR-SP-001 | Profile / device authorization |
| Device Management | shop-devices.html | FR-DV-001..004, FR-SP-003 | Device management |
| Shift Schedule | shop-shifts.html | FR-SH-001..005 | Shift schedule |
| Create / Edit Shift | shop-shift-form.html | FR-SH-001..006 | Create/edit shift, conflict validation |
| Shift Detail | shop-shift-detail.html | FR-ST-001..004, FR-TX-003, FR-SP-001..002 | Detailed lifecycle |
| Exception Queue | shop-exceptions.html | FR-NS-001..003, FR-SP-002, FR-AC-001 | No-show / suspend / auto-lock |
| Redemption Approvals | shop-redemption-approvals.html | FR-TX-002, FR-TX-005 | Redemption approval |
| Manager Reconciliation | shop-reconciliation.html | FR-CL-001..009 | Manager reconciliation |
| Shift Reports | shop-reports.html | FR-RP-*, NFR-005, NFR-010 | Reports / audit |
Cashier Portal screens
| Screen | File | Requirements | Purpose |
|---|---|---|---|
| Login | cashier-login.html | FR-CA-001, FR-DV-001 | Login / device check |
| My Shift | cashier-home.html | FR-ST-001..003, NFR-009 | Assigned shift |
| Opening Cash | cashier-opening-cash.html | FR-ST-002..004, NFR-001 | Opening denomination count |
| Active Shift | cashier-active-shift.html | FR-TX-001..005 | Deposit / redemption |
| Cash Drop | cashier-cash-drop.html | FR-CD-001..004 | Cash drop |
| Closing Count | cashier-closing.html | FR-CL-001..005 | Blind closing count |
| Shift Handover | cashier-handover.html | FR-HO-001..004 | Shift handover |
Prototype behavior
- Forms and buttons demo states via client-side JavaScript (
app.js). - Data is sample-only, not persisted.
- Toast messages and modals illustrate state transitions.
Static files
site-documents/static/prototypes/cashier-management/
├── index.html
├── shop-*.html (10 Shop Portal screens)
├── cashier-*.html (7 Cashier Portal screens)
├── app.js
├── styles.css
├── prototype_manifest.json
├── requirements_traceability.csv
└── README.md
Out of scope (prototype)
Break time · Fixed/flexible shift types · Recurring schedules · Shift templates · Overtime · Payroll · Formal timekeeping · Online swap/coverage workflows