// Phase 2 — 4-klubbs MVP demo surfaces: // - Phase2StatusStrip topbar pill showing MeOS bridge + Eventor cache + Hyrbricka counts // - RegistrationDeskView /registration screen w/ card-beep queue + auto-advance // - HyrbrickorView /hyrbrickor admin list w/ contact info + Returnerad button // // Components are loaded as globals so app.jsx can reference them without imports. const { useState: useStateP2, useMemo: useMemoP2 } = React; // ───────────────────────────────────────────────────────────────────────────── // Phase2StatusStrip — compact horizontal pills in the topbar // ───────────────────────────────────────────────────────────────────────────── function Phase2StatusStrip({ phase2 }) { if (!phase2 || !phase2.integrations) return null; const { meos, eventor } = phase2.integrations; const openRentals = (phase2.hyrbrickor || []).filter(h => !h.returnedAt).length; const dot = (color) => ({ width: 7, height: 7, borderRadius: '50%', background: color, display: 'inline-block', boxShadow: `0 0 0 3px color-mix(in srgb, ${color} 20%, transparent)`, }); return (
MeOS {meos.mipLastPollSec}s Eventor {eventor.cacheAgeDays}d 0 ? 'var(--warn)' : 'var(--ok)')}> Hyr {openRentals} öpp.
); } // ───────────────────────────────────────────────────────────────────────────── // RegistrationDeskView — card-beep queue + active form + auto-advance demo // ───────────────────────────────────────────────────────────────────────────── function RegistrationDeskView({ t, queue: initialQueue, classes, onSaved }) { const [queue, setQueue] = useStateP2(initialQueue || []); const [active, setActive] = useStateP2(queue[0] || null); const [cls, setCls] = useStateP2('HD12'); const [hired, setHired] = useStateP2(active && active.source === 'rental'); const [contact, setContact] = useStateP2(''); const advance = () => { setQueue(prev => { const next = prev.slice(1); const nextActive = next[0] || null; setActive(nextActive); setHired(nextActive && nextActive.source === 'rental'); setContact(''); setCls(nextActive && nextActive.cls ? nextActive.cls : 'HD12'); return next; }); if (onSaved) onSaved(); }; if (!active) { return (
0

Kön är tom.

Pipa en bricka på masterläsaren för att lägga till i kön.

); } return (
Aktiv bricka
{active.cardNumber}
{active.name && (
{active.name} {active.source === 'eventor' && EVENTOR · auto-fyllt}
)} {!active.name && active.source === 'unknown' && (
Okänd bricka — ej i Eventor-cachen.
)} {active.source === 'rental' && (
● Hyrbricka — ta kontaktuppgifter
)}
kö {queue.length}
{hired && (
setContact(e.target.value)} placeholder="070-555 00 00 eller namn@example.com" />
)}
Kö ({queue.length})
{queue.length === 0 &&
Inget i kö.
} {queue.map((q, i) => (
{i === 0 ? '▸' : i + 1}
{q.cardNumber} {q.name &&
{q.name}{q.age ? ` · ${q.age} år` : ''}
}
{q.source === 'eventor' && 'EVTR'} {q.source === 'rental' && 'HYR'} {q.source === 'unknown' && '?'}
))}
); } // ───────────────────────────────────────────────────────────────────────────── // HyrbrickorView — admin-backstop list of open + returned rentals // ───────────────────────────────────────────────────────────────────────────── function HyrbrickorView({ t, rows: initialRows, onReturn }) { const [rows, setRows] = useStateP2(initialRows || []); const [filter, setFilter] = useStateP2('open'); // open | returned | all const visible = useMemoP2(() => { if (filter === 'all') return rows; if (filter === 'open') return rows.filter(r => !r.returnedAt); return rows.filter(r => r.returnedAt); }, [rows, filter]); const markReturned = (cardNumber) => { const now = new Date().toLocaleTimeString('sv-SE', { hour: '2-digit', minute: '2-digit' }); setRows(rs => rs.map(r => r.cardNumber === cardNumber ? { ...r, returnedAt: now } : r)); if (onReturn) onReturn(); }; const openCount = rows.filter(r => !r.returnedAt).length; const returnedCount = rows.length - openCount; return (

Hyrbrickor

Backstop-vy för admin. {openCount} öppna, {returnedCount} återlämnade. Vid finishreadout pop:ar en toast med kontaktinfo + Returnerad-knapp. PII scrubbas efter 30 dagar (REQ-PRIV-002).

{visible.map(r => ( ))}
Bricka Kontakt Anteckning Utlämnad Återlämnad
{r.cardNumber}
{r.contactName} {r.contactPhone && ☎ {r.contactPhone}} {r.contactEmail && ✉ {r.contactEmail}}
{r.note || —} {r.markedAt} {r.returnedAt ? ✓ {r.returnedAt} : }
{visible.length === 0 && (
Inga rader i denna vy.
)}
); }