782 lines
36 KiB
JavaScript
782 lines
36 KiB
JavaScript
import { useEffect, useRef, useState, useCallback } from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import TableCard from '../components/TableCard'
|
||
import ConnectionBanner from '../components/ConnectionBanner'
|
||
import EmergencyBar from '../components/EmergencyBar'
|
||
import UserMenu from '../components/UserMenu'
|
||
import useAuthStore from '../store/authStore'
|
||
import useTableColourStore from '../store/tableColourStore'
|
||
import useConnectionStore from '../store/connectionStore'
|
||
import useTableViewStore from '../store/tableViewStore'
|
||
import client from '../api/client'
|
||
import db from '../db/posdb'
|
||
import { queueOfflinePayment } from '../services/offlinePayments'
|
||
import { useNotifications } from '../context/NotificationContext'
|
||
import { FlagsIcon, TransferIcon, MergeIcon, PrintIcon, WaiterIcon } from '../components/Icons'
|
||
|
||
function fmtPrice(v) { return Number(v || 0).toFixed(2) + ' €' }
|
||
|
||
// ─── Icons ────────────────────────────────────────────────────────────────────
|
||
|
||
function FilterIcon({ size = 20 }) {
|
||
return (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
|
||
</svg>
|
||
)
|
||
}
|
||
|
||
// ─── Notification drawer ──────────────────────────────────────────────────────
|
||
|
||
function NotificationDrawer({ messages, onClose }) {
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-sheet" onClick={e => e.stopPropagation()} style={{ maxHeight: '80svh' }}>
|
||
<div className="modal-handle" />
|
||
<h2 className="modal-title" style={{ marginBottom: 16 }}>Ειδοποιήσεις</h2>
|
||
{messages.length === 0 && (
|
||
<p style={{ textAlign: 'center', color: 'var(--muted)', padding: 24 }}>Δεν υπάρχουν ειδοποιήσεις</p>
|
||
)}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 0, overflowY: 'auto', flex: 1 }}>
|
||
{messages.map(msg => {
|
||
const tableIds = (() => { try { return JSON.parse(msg.table_ids || '[]') } catch { return [] } })()
|
||
return (
|
||
<div key={msg.id} style={{
|
||
padding: '12px 4px', borderBottom: '1px solid var(--border)',
|
||
display: 'flex', gap: 12, alignItems: 'flex-start',
|
||
opacity: msg._acked ? 0.5 : 1,
|
||
}}>
|
||
<span style={{ fontSize: 20, flexShrink: 0 }}>📢</span>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
{msg.sender_name && (
|
||
<div style={{ fontSize: 11, fontWeight: 700, color: '#a5b4fc', marginBottom: 2 }}>{msg.sender_name}</div>
|
||
)}
|
||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>{msg.body}</div>
|
||
{tableIds.length > 0 && (
|
||
<div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>Τραπέζι: {tableIds.join(', ')}</div>
|
||
)}
|
||
<div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>
|
||
{new Date(msg.created_at).toLocaleTimeString('el-GR', { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<button className="btn btn--secondary" style={{ width: '100%', marginTop: 12 }} onClick={onClose}>Κλείσιμο</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Table quick-view modal (long press) ──────────────────────────────────────
|
||
|
||
const QUICK_ACTIONS = [
|
||
{ Icon: FlagsIcon, label: 'Ενδείξεις Τραπεζιού', key: 'flags', color: '#fac823', iconBg: 'rgba(251,191,36,0.15)' },
|
||
{ Icon: TransferIcon, label: 'Μεταφορά', key: 'transfer', color: '#6099db', iconBg: 'rgba(96,165,250,0.15)' },
|
||
{ Icon: MergeIcon, label: 'Συγχώνευση', key: 'merge', color: '#6099db', iconBg: 'rgba(96,165,250,0.15)' },
|
||
{ Icon: PrintIcon, label: 'Εκτύπωση Σύνοψης', key: 'print_synopsis', color: '#cbd5e1', iconBg: 'rgba(148,163,184,0.15)' },
|
||
{ Icon: WaiterIcon, label: 'Ανάθεση Σερβιτόρου', key: 'assign_waiter', color: '#39b861', iconBg: 'rgba(34,197,94,0.15)' },
|
||
]
|
||
|
||
function TableQuickModal({ table, order, flags, onClose, onNavigate, onAction }) {
|
||
const tableName = table.label || `T${table.number}`
|
||
const activeItems = order?.items?.filter(i => i.status === 'active') || []
|
||
const total = activeItems.reduce((s, i) => s + i.unit_price * i.quantity, 0)
|
||
const paid = order?.payments?.reduce((s, p) => s + p.amount, 0) || 0
|
||
const due = Math.max(0, total - paid)
|
||
|
||
const statusLabel = {
|
||
open: 'Ανοιχτό', partially_paid: 'Μερικώς πληρωμένο', paid: 'Πληρωμένο',
|
||
}[order?.status] || 'Ελεύθερο'
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div style={{ width: '100%', maxWidth: 480, margin: '0 auto' }} onClick={e => e.stopPropagation()}>
|
||
<div style={{ background: 'var(--bg2)', borderRadius: '16px 16px 0 0', padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
|
||
<div className="modal-handle" style={{ marginBottom: 12 }} />
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
|
||
<span style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>{tableName}</span>
|
||
<span style={{ fontSize: 13, color: 'var(--muted)' }}>{statusLabel}</span>
|
||
</div>
|
||
{order ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
|
||
<span style={{ color: 'var(--muted)' }}>Σύνολο</span>
|
||
<span style={{ fontWeight: 600, color: 'var(--text)' }}>{fmtPrice(total)}</span>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
|
||
<span style={{ color: 'var(--muted)' }}>Πληρωμένο</span>
|
||
<span style={{ fontWeight: 600, color: '#22c55e' }}>{fmtPrice(paid)}</span>
|
||
</div>
|
||
{due > 0 && (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
|
||
<span style={{ color: 'var(--muted)' }}>Υπόλοιπο</span>
|
||
<span style={{ fontWeight: 700, color: '#f59e0b' }}>{fmtPrice(due)}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 12 }}>Δεν υπάρχει ενεργή παραγγελία</p>
|
||
)}
|
||
{flags.length > 0 && (
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||
{flags.map(f => (
|
||
<div key={f.id} style={{
|
||
display: 'flex', alignItems: 'center', gap: 6,
|
||
background: (f.color || '#6295F3') + '22',
|
||
border: `1px solid ${f.color || '#6295F3'}`,
|
||
borderRadius: 20, padding: '4px 10px',
|
||
}}>
|
||
<span style={{ fontSize: 14 }}>{f.emoji || '🏷️'}</span>
|
||
<span style={{ fontSize: 12, fontWeight: 600, color: f.color || '#6295F3' }}>{f.name}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
<button className="btn btn--primary" style={{ width: '100%', marginTop: 14 }} onClick={() => { onClose(); onNavigate() }}>
|
||
Άνοιγμα τραπεζιού
|
||
</button>
|
||
</div>
|
||
<div style={{ background: 'var(--bg2)', borderRadius: '0 0 16px 16px', padding: '8px 20px 24px', borderTop: '2px solid var(--border)' }}>
|
||
<p style={{ fontSize: 11, fontWeight: 700, color: 'var(--muted)', letterSpacing: 1, marginBottom: 8, marginTop: 8 }}>ACTIONS</p>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
||
{QUICK_ACTIONS.map((a, i) => {
|
||
const disabled = !order && a.key !== 'flags'
|
||
return (
|
||
<button key={a.key} disabled={disabled} onClick={() => { onClose(); onAction(a.key) }} style={{
|
||
display: 'flex', alignItems: 'center', gap: 14,
|
||
padding: '12px 0', background: 'none', border: 'none',
|
||
borderBottom: i < QUICK_ACTIONS.length - 1 ? '1px solid var(--border)' : 'none',
|
||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||
opacity: disabled ? 0.35 : 1, textAlign: 'left',
|
||
}}>
|
||
<span style={{ width: 36, height: 36, borderRadius: 9, flexShrink: 0, background: a.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: a.color }}>
|
||
<a.Icon width="18" height="18" />
|
||
</span>
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: a.color }}>{a.label}</span>
|
||
{!disabled && <span style={{ marginLeft: 'auto', color: 'var(--muted)', fontSize: 18 }}>›</span>}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Emergency payment modal ──────────────────────────────────────────────────
|
||
|
||
function EmergencyPayModal({ table, order, onClose, onPay }) {
|
||
const [paying, setPaying] = useState(false)
|
||
const activeItems = order?.items?.filter(i => i.status === 'active') || []
|
||
const total = activeItems.reduce((s, i) => s + (i.unit_price || 0) * (i.quantity || 1), 0)
|
||
|
||
async function handlePay() {
|
||
setPaying(true)
|
||
await onPay(order.id, activeItems.map(i => i.id), 'cash')
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-sheet" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
|
||
<div className="modal-handle" />
|
||
<div style={{ textAlign: 'center', marginBottom: 16 }}>
|
||
<div style={{ fontSize: 32, marginBottom: 8 }}>🚨</div>
|
||
<p style={{ fontSize: 18, fontWeight: 700, color: '#ef4444' }}>ΕΚΤΑΚΤΗ ΠΛΗΡΩΜΗ</p>
|
||
<p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>Τραπέζι: <strong>{table.label || `T${table.number}`}</strong></p>
|
||
</div>
|
||
<div style={{ background: 'var(--bg3)', borderRadius: 12, padding: '12px 16px', marginBottom: 20 }}>
|
||
<p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 8 }}>Ενεργά αντικείμενα:</p>
|
||
{activeItems.length === 0
|
||
? <p style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic' }}>Δεν υπάρχουν δεδομένα (offline snapshot)</p>
|
||
: activeItems.map(item => (
|
||
<div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 4 }}>
|
||
<span style={{ color: 'var(--text)' }}>{item.product?.name || `#${item.product_id}`} ×{item.quantity}</span>
|
||
<span style={{ color: 'var(--text)', fontWeight: 600 }}>{((item.unit_price || 0) * (item.quantity || 1)).toFixed(2)} €</span>
|
||
</div>
|
||
))
|
||
}
|
||
<div style={{ borderTop: '1px solid var(--border)', marginTop: 10, paddingTop: 10, display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 16 }}>
|
||
<span>Σύνολο</span>
|
||
<span style={{ color: '#ef4444' }}>{total.toFixed(2)} €</span>
|
||
</div>
|
||
</div>
|
||
{total === 0
|
||
? <p style={{ fontSize: 13, color: '#ef4444', marginBottom: 16, lineHeight: 1.5, fontWeight: 600 }}>
|
||
Δεν είναι δυνατή η πληρωμή χωρίς offline δεδομένα. Άνοιξε το τραπέζι ενώ ο server ήταν online.
|
||
</p>
|
||
: <p style={{ fontSize: 12, color: '#f59e0b', marginBottom: 16, lineHeight: 1.5 }}>
|
||
⚠️ Μόνο μετρητά σε κατάσταση έκτακτης ανάγκης. Η πληρωμή συγχρονίζεται μόλις αποκατασταθεί η σύνδεση.
|
||
</p>
|
||
}
|
||
<div style={{ display: 'flex', gap: 10 }}>
|
||
<button className="btn btn--secondary" style={{ flex: 1 }} onClick={onClose}>Ακύρωση</button>
|
||
<button
|
||
style={{ flex: 1, height: 44, borderRadius: 12, border: 'none', background: total === 0 ? '#64748b' : '#dc2626', color: '#fff', fontSize: 15, fontWeight: 700, cursor: (paying || total === 0) ? 'not-allowed' : 'pointer', opacity: (paying || total === 0) ? 0.5 : 1 }}
|
||
onClick={handlePay} disabled={paying || total === 0}
|
||
>
|
||
{paying ? '⟳ Καταχώρηση…' : '✓ Πληρωμή'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Filters modal ────────────────────────────────────────────────────────────
|
||
|
||
function FiltersModal({ groups, onClose }) {
|
||
const {
|
||
ownerFilter, statusFilter, zoneFilter,
|
||
setOwnerFilter, setStatusFilter, setZoneFilter,
|
||
clearFilters, setActiveZoneTab,
|
||
} = useTableViewStore()
|
||
|
||
function toggleZone(id) {
|
||
const next = zoneFilter.includes(id)
|
||
? zoneFilter.filter(z => z !== id)
|
||
: [...zoneFilter, id]
|
||
setZoneFilter(next)
|
||
// if we remove a zone that is the active tab, reset to 'all'
|
||
if (!next.length) setActiveZoneTab('all')
|
||
}
|
||
|
||
const hasActiveFilters = ownerFilter !== 'all' || statusFilter !== 'all' || zoneFilter.length > 0
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose} style={{ alignItems: 'flex-end' }}>
|
||
<div
|
||
className="modal-sheet"
|
||
onClick={e => e.stopPropagation()}
|
||
style={{ borderRadius: '20px 20px 0 0', paddingBottom: 40, gap: 20 }}
|
||
>
|
||
<div className="modal-handle" />
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span style={{ fontSize: 17, fontWeight: 700, color: 'var(--text)' }}>Φίλτρα</span>
|
||
{hasActiveFilters && (
|
||
<button
|
||
onClick={() => { clearFilters(); onClose() }}
|
||
style={{ fontSize: 13, fontWeight: 600, color: 'var(--danger)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px' }}
|
||
>
|
||
Καθαρισμός
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Owner: ALL | MINE */}
|
||
<div>
|
||
<p style={sectionLabel}>Ανάθεση</p>
|
||
<div style={segmentedWrap}>
|
||
{[['all', 'Όλα'], ['mine', 'Δικά μου']].map(([key, lbl]) => (
|
||
<button key={key} onClick={() => setOwnerFilter(key)} style={segBtn(ownerFilter === key)}>{lbl}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Status: ALL | FREE | OPEN | PAID */}
|
||
<div>
|
||
<p style={sectionLabel}>Κατάσταση</p>
|
||
<div style={{ ...segmentedWrap, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
|
||
{[['all', 'Όλα'], ['free', 'Ελεύθερα'], ['open', 'Ανοιχτά'], ['paid', 'Πληρωμένα']].map(([key, lbl]) => (
|
||
<button key={key} onClick={() => setStatusFilter(key)} style={{ ...segBtn(statusFilter === key), borderRadius: 10 }}>{lbl}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Zones: multi-select, one segmented container per zone */}
|
||
{groups.length > 0 && (
|
||
<div>
|
||
<p style={sectionLabel}>Ζώνες {zoneFilter.length > 0 ? `(${zoneFilter.length} επιλεγμένες)` : ''}</p>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
|
||
{groups.map(g => {
|
||
const active = zoneFilter.includes(g.id)
|
||
return (
|
||
<div key={g.id} style={segmentedWrap}>
|
||
<button
|
||
onClick={() => toggleZone(g.id)}
|
||
style={{
|
||
...segBtn(active),
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
|
||
}}
|
||
>
|
||
{g.color && (
|
||
<span style={{
|
||
width: 8, height: 8, borderRadius: '50%',
|
||
background: active ? 'currentColor' : g.color,
|
||
flexShrink: 0, opacity: active ? 0.9 : 1,
|
||
}} />
|
||
)}
|
||
{g.name}
|
||
</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<button className="btn btn--secondary" style={{ width: '100%' }} onClick={onClose}>Εντάξει</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const sectionLabel = { fontSize: 11, fontWeight: 700, color: 'var(--muted)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8 }
|
||
const segmentedWrap = { display: 'flex', gap: 6, background: 'var(--bg3)', borderRadius: 12, padding: 4 }
|
||
function segBtn(active) {
|
||
return {
|
||
flex: 1, padding: '9px 8px', borderRadius: 9, border: 'none',
|
||
cursor: 'pointer', fontWeight: 600, fontSize: 14,
|
||
background: active ? 'var(--accent)' : 'transparent',
|
||
color: active ? 'var(--accent-fg)' : 'var(--muted)',
|
||
transition: 'background 0.12s',
|
||
}
|
||
}
|
||
|
||
// ─── Main page ────────────────────────────────────────────────────────────────
|
||
|
||
export default function TableListPage() {
|
||
const { user } = useAuthStore()
|
||
const { status: connStatus } = useConnectionStore()
|
||
const isEmergency = connStatus === 'emergency'
|
||
|
||
const [tables, setTables] = useState([])
|
||
const [groups, setGroups] = useState([])
|
||
const [orders, setOrders] = useState([])
|
||
const [flagDefs, setFlagDefs] = useState([])
|
||
const [flagAssignments, setFlagAssignments] = useState([])
|
||
const [waiters, setWaiters] = useState([]) // waiter objects for avatar lookup
|
||
const [offline, setOffline] = useState(false)
|
||
const [showNotifs, setShowNotifs] = useState(false)
|
||
const [showFilters, setShowFilters] = useState(false)
|
||
const [quickModal, setQuickModal] = useState(null)
|
||
const [emergencyPayModal, setEmergencyPayModal] = useState(null)
|
||
const [localPaidOrderIds, setLocalPaidOrderIds] = useState(new Set())
|
||
|
||
// pull-to-refresh state
|
||
const [pulling, setPulling] = useState(false)
|
||
const [pullY, setPullY] = useState(0)
|
||
const [refreshing, setRefreshing] = useState(false)
|
||
const pullStart = useRef(null)
|
||
const scrollRef = useRef(null)
|
||
const PULL_THRESHOLD = 72
|
||
|
||
const navigate = useNavigate()
|
||
const filterBtnRef = useRef(null)
|
||
|
||
const { unreadCount, recentMessages, fetchRecent } = useNotifications() || {}
|
||
const loadFromBackend = useTableColourStore(s => s.loadFromBackend)
|
||
|
||
const {
|
||
density, ownerFilter, statusFilter, zoneFilter, activeZoneTab, setActiveZoneTab,
|
||
} = useTableViewStore()
|
||
|
||
// ── Load from IndexedDB when offline ──────────────────────────────────────
|
||
const loadFromDB = useCallback(async () => {
|
||
const [dbTables, dbOrders] = await Promise.all([db.tables.toArray(), db.orders.toArray()])
|
||
setTables(dbTables.filter(t => t.is_active !== false))
|
||
setOrders(dbOrders)
|
||
setOffline(true)
|
||
}, [])
|
||
|
||
useEffect(() => { if (isEmergency) loadFromDB() }, [isEmergency])
|
||
|
||
useEffect(() => {
|
||
const handler = () => setOffline(true)
|
||
window.addEventListener('backend-offline', handler)
|
||
return () => window.removeEventListener('backend-offline', handler)
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
const handler = () => load()
|
||
window.addEventListener('sse-reconnected', handler)
|
||
return () => window.removeEventListener('sse-reconnected', handler)
|
||
}, [])
|
||
|
||
useEffect(() => { if (connStatus === 'online') setOffline(false) }, [connStatus])
|
||
|
||
async function load() {
|
||
try {
|
||
const [tablesRes, ordersRes, groupsRes, flagDefsRes, flagAssignRes, settingsRes, waitersRes] = await Promise.all([
|
||
client.get('/api/tables/'),
|
||
client.get('/api/orders/active'),
|
||
client.get('/api/tables/groups'),
|
||
client.get('/api/flags/defs'),
|
||
client.get('/api/flags/assignments'),
|
||
client.get('/api/settings/'),
|
||
client.get('/api/waiters/on-shift'),
|
||
])
|
||
setTables(tablesRes.data)
|
||
const fullOrders = await Promise.all(
|
||
ordersRes.data.map(o =>
|
||
client.get(`/api/orders/${o.id}`)
|
||
.then(r => ({ ...r.data, waiter_ids: r.data.waiters?.map(w => w.waiter_id) ?? o.waiter_ids ?? [] }))
|
||
.catch(() => o)
|
||
)
|
||
)
|
||
setOrders(fullOrders)
|
||
setGroups(groupsRes.data)
|
||
setFlagDefs(flagDefsRes.data)
|
||
setFlagAssignments(flagAssignRes.data)
|
||
setWaiters(waitersRes.data)
|
||
const raw = settingsRes.data?.['ui.table_colours']?.value
|
||
if (raw) loadFromBackend(raw)
|
||
setOffline(false)
|
||
} catch {}
|
||
}
|
||
|
||
useEffect(() => { load() }, [])
|
||
|
||
// ── SSE live updates ───────────────────────────────────────────────────────
|
||
useEffect(() => {
|
||
if (isEmergency) return
|
||
function onSSE(e) {
|
||
const { type, data } = e.detail
|
||
if (type === 'order_updated' || type === 'order_paid') {
|
||
client.get(`/api/orders/${data.order_id}`)
|
||
.then(r => {
|
||
const full = { ...r.data, waiter_ids: r.data.waiters?.map(w => w.waiter_id) ?? [] }
|
||
setOrders(prev => {
|
||
const exists = prev.find(o => o.id === data.order_id)
|
||
return exists ? prev.map(o => o.id === data.order_id ? full : o) : [...prev, full]
|
||
})
|
||
})
|
||
.catch(() => {
|
||
setOrders(prev => {
|
||
const existing = prev.find(o => o.id === data.order_id)
|
||
if (existing) return prev.map(o => o.id === data.order_id ? { ...o, status: data.status, table_id: data.table_id } : o)
|
||
return [...prev, { id: data.order_id, table_id: data.table_id, status: data.status, waiter_ids: [] }]
|
||
})
|
||
})
|
||
} else if (type === 'order_closed') {
|
||
setOrders(prev => prev.filter(o => o.id !== data.order_id))
|
||
} else if (type === 'table_flags_changed') {
|
||
client.get('/api/flags/assignments').then(r => setFlagAssignments(r.data)).catch(() => {})
|
||
} else if (type === 'table_list_changed') {
|
||
client.get('/api/tables/').then(r => setTables(r.data)).catch(() => {})
|
||
}
|
||
}
|
||
window.addEventListener('sse-event', onSSE)
|
||
return () => window.removeEventListener('sse-event', onSSE)
|
||
}, [isEmergency])
|
||
|
||
// ── Emergency payment ──────────────────────────────────────────────────────
|
||
async function handleEmergencyPay(orderId, itemIds, paymentMethod) {
|
||
await queueOfflinePayment({ orderId, itemIds, paymentMethod })
|
||
setLocalPaidOrderIds(prev => new Set([...prev, orderId]))
|
||
setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: 'paid' } : o))
|
||
await db.orders.where('id').equals(orderId).modify({ status: 'paid' })
|
||
}
|
||
|
||
// ── Derived maps ───────────────────────────────────────────────────────────
|
||
const flagDefMap = Object.fromEntries(flagDefs.map(f => [f.id, f]))
|
||
const tableFlagsMap = {}
|
||
flagAssignments.forEach(a => {
|
||
if (!tableFlagsMap[a.table_id]) tableFlagsMap[a.table_id] = []
|
||
const def = flagDefMap[a.flag_id]
|
||
if (def) tableFlagsMap[a.table_id].push(def)
|
||
})
|
||
const waiterMap = Object.fromEntries(waiters.map(w => [w.id, w]))
|
||
|
||
function getOrder(tableId) { return orders.find(o => o.table_id === tableId) }
|
||
function isMyOrder(order) { return !!(order && user && order.waiter_ids?.includes(user.id)) }
|
||
function getOrderWaiters(order) {
|
||
if (!order) return []
|
||
return (order.waiter_ids || []).map(id => waiterMap[id]).filter(Boolean)
|
||
}
|
||
|
||
// ── Filtering logic ────────────────────────────────────────────────────────
|
||
// Zones visible in top bar = those allowed by zoneFilter (or all if empty)
|
||
const allowedZoneIds = zoneFilter.length > 0 ? new Set(zoneFilter) : null
|
||
|
||
// visibleGroups = groups shown in the top bar
|
||
const visibleGroups = groups.filter(g => !allowedZoneIds || allowedZoneIds.has(g.id))
|
||
|
||
// Validate activeZoneTab against current allowedZoneIds
|
||
// If the active tab is no longer visible, reset to 'all'
|
||
const effectiveZoneTab = (
|
||
activeZoneTab === 'all' ||
|
||
visibleGroups.some(g => g.id === activeZoneTab)
|
||
) ? activeZoneTab : 'all'
|
||
|
||
const filtered = tables.filter(t => {
|
||
const order = getOrder(t.id)
|
||
|
||
// Status filter
|
||
if (statusFilter === 'free' && order) return false
|
||
if (statusFilter === 'open' && (!order || order.status === 'paid' || order.status === 'partially_paid')) return false
|
||
if (statusFilter === 'paid' && order?.status !== 'paid' && order?.status !== 'partially_paid') return false
|
||
|
||
// Owner filter
|
||
if (ownerFilter === 'mine' && !isMyOrder(order)) return false
|
||
|
||
// Zone filter from modal (multi-select restricts which zones are allowed)
|
||
if (allowedZoneIds && !allowedZoneIds.has(t.group_id ?? 'none')) return false
|
||
|
||
// Active zone tab (secondary, single-select within allowed)
|
||
if (effectiveZoneTab !== 'all' && t.group_id !== effectiveZoneTab) return false
|
||
|
||
return true
|
||
})
|
||
|
||
// ── Pull-to-refresh handlers ───────────────────────────────────────────────
|
||
function onPullTouchStart(e) {
|
||
if (scrollRef.current?.scrollTop > 0) return
|
||
pullStart.current = e.touches[0].clientY
|
||
}
|
||
function onPullTouchMove(e) {
|
||
if (pullStart.current === null) return
|
||
const dy = e.touches[0].clientY - pullStart.current
|
||
if (dy > 0 && scrollRef.current?.scrollTop <= 0) {
|
||
e.preventDefault()
|
||
setPulling(true)
|
||
setPullY(Math.min(dy, PULL_THRESHOLD * 1.5))
|
||
}
|
||
}
|
||
async function onPullTouchEnd() {
|
||
if (!pulling) return
|
||
if (pullY >= PULL_THRESHOLD) {
|
||
setRefreshing(true)
|
||
await load()
|
||
setRefreshing(false)
|
||
}
|
||
setPulling(false)
|
||
setPullY(0)
|
||
pullStart.current = null
|
||
}
|
||
|
||
// ── Grid columns per density ───────────────────────────────────────────────
|
||
const gridCols = {
|
||
'1x1': 'repeat(4, 1fr)',
|
||
'2x1': 'repeat(2, 1fr)',
|
||
'2x2': 'repeat(2, 1fr)',
|
||
'4x1': '1fr',
|
||
'4x2': '1fr',
|
||
'4x3': '1fr',
|
||
}[density] || 'repeat(2, 1fr)'
|
||
|
||
const hasActiveFilters = ownerFilter !== 'all' || statusFilter !== 'all' || zoneFilter.length > 0
|
||
|
||
function handleQuickAction(tableId, actionKey) {
|
||
navigate(`/tables/${tableId}?action=${actionKey}`)
|
||
}
|
||
|
||
return (
|
||
<div className="page">
|
||
<header className="top-bar">
|
||
<span className="top-bar__title">Τραπέζια</span>
|
||
|
||
<button
|
||
onClick={() => { setShowNotifs(true); fetchRecent?.() }}
|
||
style={{
|
||
position: 'relative', background: 'none', border: 'none',
|
||
color: 'var(--text)', fontSize: 22, cursor: 'pointer',
|
||
minWidth: 44, minHeight: 44, borderRadius: 8,
|
||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||
}}
|
||
>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z" fill="currentColor"/>
|
||
<path d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z" fill="currentColor"/>
|
||
</svg>
|
||
{(unreadCount || 0) > 0 && (
|
||
<span style={{
|
||
position: 'absolute', top: 6, right: 6,
|
||
background: '#ef4444', color: 'white', fontSize: 10, fontWeight: 700,
|
||
borderRadius: '50%', width: 16, height: 16,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
{unreadCount > 9 ? '9+' : unreadCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
<UserMenu />
|
||
</header>
|
||
|
||
{isEmergency ? <EmergencyBar /> : (offline && <ConnectionBanner />)}
|
||
|
||
{/* ── Zone tab bar ─────────────────────────────────────────────────────── */}
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', gap: 6,
|
||
padding: '10px 12px',
|
||
background: 'var(--bg)',
|
||
borderBottom: '1px solid var(--border)',
|
||
overflowX: 'auto', scrollbarWidth: 'none',
|
||
}}>
|
||
{/* ALL tab */}
|
||
<ZoneTab
|
||
label="Όλα"
|
||
active={effectiveZoneTab === 'all'}
|
||
onClick={() => setActiveZoneTab('all')}
|
||
/>
|
||
|
||
{/* Per-zone tabs */}
|
||
{visibleGroups.map(g => (
|
||
<ZoneTab
|
||
key={g.id}
|
||
label={g.name}
|
||
color={g.color}
|
||
active={effectiveZoneTab === g.id}
|
||
onClick={() => setActiveZoneTab(effectiveZoneTab === g.id ? 'all' : g.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── Table grid ───────────────────────────────────────────────────────── */}
|
||
<div
|
||
ref={scrollRef}
|
||
style={{ flex: 1, overflowY: 'auto', minHeight: 0, overscrollBehavior: 'contain' }}
|
||
onTouchStart={onPullTouchStart}
|
||
onTouchMove={onPullTouchMove}
|
||
onTouchEnd={onPullTouchEnd}
|
||
>
|
||
{/* Pull-to-refresh indicator */}
|
||
{(pulling || refreshing) && (
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
height: Math.min(pullY, PULL_THRESHOLD),
|
||
color: 'var(--muted)', fontSize: 13, fontWeight: 600,
|
||
overflow: 'hidden', transition: pulling ? 'none' : 'height 0.2s',
|
||
}}>
|
||
{refreshing ? '⟳ Ανανέωση…' : pullY >= PULL_THRESHOLD ? '↑ Αφήστε για ανανέωση' : '↓ Τραβήξτε για ανανέωση'}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: gridCols,
|
||
gap: density === '1x1' ? 8 : 10,
|
||
padding: '12px 12px 88px',
|
||
alignContent: 'start',
|
||
}}>
|
||
{filtered.map(t => {
|
||
const order = getOrder(t.id)
|
||
const tableFlags = tableFlagsMap[t.id] || []
|
||
const grp = groups.find(g => g.id === t.group_id)
|
||
const alreadyPaidLocally = order && localPaidOrderIds.has(order.id)
|
||
const orderWaiters = getOrderWaiters(order)
|
||
|
||
function handleClick() {
|
||
if (isEmergency) {
|
||
if (order && !alreadyPaidLocally && order.status !== 'paid' && order.status !== 'closed') {
|
||
setEmergencyPayModal({ table: t, order })
|
||
}
|
||
return
|
||
}
|
||
const destination = order ? `/tables/${t.id}` : `/tables/${t.id}/add?new=1`
|
||
navigate(destination)
|
||
}
|
||
|
||
return (
|
||
<TableCard
|
||
key={t.id}
|
||
table={t}
|
||
order={alreadyPaidLocally ? { ...order, status: 'paid' } : order}
|
||
isMine={isMyOrder(order)}
|
||
flags={tableFlags}
|
||
groupName={grp?.name || ''}
|
||
waiterObjects={orderWaiters}
|
||
density={density}
|
||
onClick={handleClick}
|
||
onLongPress={isEmergency ? undefined : () => setQuickModal({ table: t, order, flags: tableFlags })}
|
||
/>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Filter FAB ───────────────────────────────────────────────────────── */}
|
||
<button
|
||
ref={filterBtnRef}
|
||
onClick={() => setShowFilters(true)}
|
||
style={{
|
||
position: 'fixed', bottom: 24, right: 24,
|
||
width: 52, height: 52, borderRadius: '50%', border: 'none',
|
||
background: hasActiveFilters ? '#ea6c00' : '#f97316',
|
||
color: '#fff',
|
||
cursor: 'pointer',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
boxShadow: '0 4px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2)',
|
||
zIndex: 40,
|
||
transition: 'background 0.12s',
|
||
}}
|
||
>
|
||
<FilterIcon size={20} />
|
||
{hasActiveFilters && (
|
||
<span style={{
|
||
position: 'absolute', top: 0, right: 0,
|
||
background: '#ef4444', color: '#fff',
|
||
fontSize: 9, fontWeight: 800,
|
||
borderRadius: '50%', width: 16, height: 16,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
{(ownerFilter !== 'all' ? 1 : 0) + (statusFilter !== 'all' ? 1 : 0) + (zoneFilter.length > 0 ? 1 : 0)}
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
{/* ── Modals ────────────────────────────────────────────────────────────── */}
|
||
{showNotifs && (
|
||
<NotificationDrawer messages={recentMessages || []} onClose={() => setShowNotifs(false)} />
|
||
)}
|
||
|
||
{showFilters && (
|
||
<FiltersModal groups={groups} onClose={() => setShowFilters(false)} anchorRef={filterBtnRef} />
|
||
)}
|
||
|
||
{quickModal && (
|
||
<TableQuickModal
|
||
table={quickModal.table}
|
||
order={quickModal.order}
|
||
flags={quickModal.flags}
|
||
onClose={() => setQuickModal(null)}
|
||
onNavigate={() => navigate(`/tables/${quickModal.table.id}`)}
|
||
onAction={(key) => handleQuickAction(quickModal.table.id, key)}
|
||
/>
|
||
)}
|
||
|
||
{emergencyPayModal && (
|
||
<EmergencyPayModal
|
||
table={emergencyPayModal.table}
|
||
order={emergencyPayModal.order}
|
||
onClose={() => setEmergencyPayModal(null)}
|
||
onPay={handleEmergencyPay}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Zone tab pill ────────────────────────────────────────────────────────────
|
||
|
||
function ZoneTab({ label, color, active, onClick }) {
|
||
return (
|
||
<button
|
||
onClick={onClick}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 6,
|
||
padding: '7px 12px', borderRadius: 20, border: 'none',
|
||
cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
|
||
fontWeight: 600, fontSize: 13,
|
||
background: active ? 'var(--accent)' : 'var(--bg3)',
|
||
color: active ? 'var(--accent-fg)' : 'var(--muted)',
|
||
transition: 'background 0.12s, color 0.12s',
|
||
}}
|
||
>
|
||
{color && (
|
||
<span style={{
|
||
width: 8, height: 8, borderRadius: '50%',
|
||
background: color, flexShrink: 0,
|
||
opacity: active ? 1 : 0.7,
|
||
}} />
|
||
)}
|
||
{label}
|
||
</button>
|
||
)
|
||
}
|