bonamin/simple-pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Waiter PWA: UX polish — table names, category colours, print ack, PIN fix

Browse Source 
- TableCard: show table.label (display name) instead of internal number
- TableListPage: zone filter rows 50% taller; table cards capped at 132px
  max-height so single-table zones don't stretch; grid aligns to top
- ProductPicker: category tabs use their configured colour (inactive=35%
  opacity); new View All button opens a full-screen category tile modal
- AddItemsPage: show per-printer print acknowledgement after sending order;
  print failures keep items as drafts and show a clear error screen
- PinPad: reduced to 4 dots/digits with auto-submit on 4th digit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vasileios Kousaridas
2026-04-24 17:35:22 +03:00
parent 26c4818aa1
commit ee51e52acf
6 changed files with 253 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
waiter_pwa/src/pages/TableListPage.jsx
View File

@@ -113,7 +113,7 @@ export default function TableListPage() {
onClick={() => setSelectedZones(new Set())}
style={{
display: 'block', width: '100%', textAlign: 'left',
padding: '8px 12px', borderRadius: 8, fontSize: 14,
padding: '12px 14px', borderRadius: 8, fontSize: 15,
color: selectedZones.size === 0 ? '#fff' : '#374151',
background: selectedZones.size === 0 ? '#4f46e5' : 'transparent',
border: 'none', cursor: 'pointer',
@@ -126,14 +126,14 @@ export default function TableListPage() {
key={g.id}
onClick={() => toggleZone(g.id)}
style={{
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
textAlign: 'left', padding: '8px 12px', borderRadius: 8, fontSize: 14,
display: 'flex', alignItems: 'center', gap: 10, width: '100%',
textAlign: 'left', padding: '12px 14px', borderRadius: 8, fontSize: 15,
color: selectedZones.has(g.id) ? '#fff' : '#374151',
background: selectedZones.has(g.id) ? '#4f46e5' : 'transparent',
border: 'none', cursor: 'pointer',
}}
>
{g.color && <span style={{ width: 10, height: 10, borderRadius: '50%', background: g.color, display: 'inline-block', flexShrink: 0 }} />}
{g.color && <span style={{ width: 12, height: 12, borderRadius: '50%', background: g.color, display: 'inline-block', flexShrink: 0 }} />}
{g.name}
</button>
))}
@@ -142,7 +142,7 @@ export default function TableListPage() {
onClick={() => toggleZone('none')}
style={{
display: 'block', width: '100%', textAlign: 'left',
padding: '8px 12px', borderRadius: 8, fontSize: 14,
padding: '12px 14px', borderRadius: 8, fontSize: 15,
color: selectedZones.has('none') ? '#fff' : '#374151',
background: selectedZones.has('none') ? '#4f46e5' : 'transparent',
border: 'none', cursor: 'pointer',