479 lines
18 KiB
JavaScript
479 lines
18 KiB
JavaScript
// Table Card — 3 variations
|
|
// All cards share the same fixed dimensions and field positions so the grid
|
|
// stays visually aligned even when fields are empty.
|
|
|
|
const STATUS = {
|
|
open: { label: 'Open', tint: 'var(--open-50)', tintStrong: 'var(--open-100)', accent: 'var(--open-500)', ink: 'var(--open-700)' },
|
|
occupied:{ label: 'Occupied', tint: 'var(--occ-50)', tintStrong: 'var(--occ-100)', accent: 'var(--occ-500)', ink: 'var(--occ-700)' },
|
|
reserved:{ label: 'Reserved', tint: 'var(--res-50)', tintStrong: 'var(--res-100)', accent: 'var(--res-500)', ink: 'var(--res-700)' },
|
|
alert: { label: 'Needs attention', tint: 'var(--alert-50)', tintStrong: 'var(--alert-100)', accent: 'var(--alert-500)', ink: 'var(--alert-700)' },
|
|
dirty: { label: 'Needs cleaning', tint: 'var(--dirty-50)', tintStrong: 'var(--dirty-100)', accent: 'var(--dirty-500)', ink: 'var(--dirty-700)' },
|
|
};
|
|
|
|
// ----- Shared helpers -----
|
|
|
|
function formatEuro(n) {
|
|
if (n == null) return null;
|
|
return '€' + n.toFixed(2).replace(/\.00$/, '.00');
|
|
}
|
|
|
|
function formatDuration(mins) {
|
|
if (mins == null) return null;
|
|
if (mins < 60) return `${mins}m`;
|
|
const h = Math.floor(mins / 60);
|
|
const m = mins % 60;
|
|
return m === 0 ? `${h}h` : `${h}h ${m}m`;
|
|
}
|
|
|
|
function avatarColor(name) {
|
|
const palette = ['#3758c9', '#7a44c9', '#2f9e5e', '#d94b26', '#8a6d2b', '#0d7a8a', '#c93775'];
|
|
let h = 0;
|
|
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
|
|
return palette[h % palette.length];
|
|
}
|
|
|
|
function Initials({ name, size = 28 }) {
|
|
const parts = name.split(' ');
|
|
const initials = (parts[0][0] + (parts[1]?.[0] || '')).toUpperCase();
|
|
return (
|
|
<div style={{
|
|
width: size, height: size, borderRadius: '50%',
|
|
background: avatarColor(name),
|
|
color: 'white',
|
|
fontSize: size * 0.42,
|
|
fontWeight: 600,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
flexShrink: 0,
|
|
boxShadow: '0 0 0 2px var(--cardBg, white)',
|
|
}}>{initials}</div>
|
|
);
|
|
}
|
|
|
|
function Flag({ kind }) {
|
|
const map = {
|
|
VIP: { bg: '#fff4d6', fg: '#8a6d0b', label: 'VIP' },
|
|
Allergy: { bg: '#fde3dc', fg: '#a5361b', label: 'Allergy' },
|
|
Birthday: { bg: '#fbe2ee', fg: '#a8276b', label: 'Birthday' },
|
|
};
|
|
const s = map[kind] || { bg: '#eceff2', fg: '#3a4049', label: kind };
|
|
return (
|
|
<span style={{
|
|
display: 'inline-flex', alignItems: 'center',
|
|
height: 22, padding: '0 8px',
|
|
borderRadius: 999,
|
|
background: s.bg, color: s.fg,
|
|
fontSize: 12, fontWeight: 600,
|
|
letterSpacing: 0.2,
|
|
whiteSpace: 'nowrap',
|
|
}}>{s.label}</span>
|
|
);
|
|
}
|
|
|
|
// Placeholder dashes so empty fields keep their footprint but visually disappear
|
|
function EmptyDash({ width = 40 }) {
|
|
return <span style={{ color: 'var(--ink-300)', letterSpacing: 2, userSelect: 'none' }}>— —</span>;
|
|
}
|
|
|
|
// ===========================================================================
|
|
// VARIATION 1 — Left accent border + tinted background
|
|
// Stacked: header row, stats row, waiter row. Clean and quiet.
|
|
// ===========================================================================
|
|
function TableCardV1({ name, status, amount, occupiedMins, waiters = [], flags = [] }) {
|
|
const s = STATUS[status];
|
|
const [hover, setHover] = React.useState(false);
|
|
const [pressed, setPressed] = React.useState(false);
|
|
|
|
// Waiter display rules
|
|
const showMulti = waiters.length >= 3;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => { setHover(false); setPressed(false); }}
|
|
onMouseDown={() => setPressed(true)}
|
|
onMouseUp={() => setPressed(false)}
|
|
style={{
|
|
'--cardBg': s.tint,
|
|
position: 'relative',
|
|
width: 260, height: 180,
|
|
padding: '16px 18px 16px 22px',
|
|
background: s.tint,
|
|
border: '1px solid ' + s.tintStrong,
|
|
borderRadius: 'var(--radius)',
|
|
boxShadow: pressed ? 'inset 0 2px 4px rgba(16,20,24,0.08)' : (hover ? 'var(--shadow-2)' : 'var(--shadow-1)'),
|
|
transform: pressed ? 'translateY(1px)' : (hover ? 'translateY(-2px)' : 'translateY(0)'),
|
|
transition: 'transform 120ms ease, box-shadow 120ms ease',
|
|
cursor: 'pointer',
|
|
textAlign: 'left',
|
|
font: 'inherit',
|
|
color: 'inherit',
|
|
display: 'flex', flexDirection: 'column',
|
|
outline: 'none',
|
|
}}
|
|
>
|
|
{/* left accent bar */}
|
|
<div style={{
|
|
position: 'absolute', left: 0, top: 0, bottom: 0, width: 6,
|
|
background: s.accent,
|
|
borderRadius: 'var(--radius) 0 0 var(--radius)',
|
|
}} />
|
|
|
|
{/* Header row: name + status pill */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
|
|
<div style={{
|
|
fontSize: 32, fontWeight: 700, lineHeight: 1,
|
|
letterSpacing: -0.5,
|
|
color: 'var(--ink-900)',
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
}}>{name}</div>
|
|
<div style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
|
height: 26, padding: '0 10px',
|
|
borderRadius: 999,
|
|
background: s.accent,
|
|
color: 'white',
|
|
fontSize: 12, fontWeight: 600,
|
|
letterSpacing: 0.2,
|
|
whiteSpace: 'nowrap',
|
|
}}>
|
|
<span style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.9)' }} />
|
|
{s.label}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Flags row — fixed height whether or not flags exist */}
|
|
<div style={{ marginTop: 8, height: 22, display: 'flex', gap: 6, alignItems: 'center' }}>
|
|
{flags.map(f => <Flag key={f} kind={f} />)}
|
|
</div>
|
|
|
|
{/* Stats row: amount + time. Fixed layout, empty dashes when missing */}
|
|
<div style={{
|
|
marginTop: 'auto',
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 1fr',
|
|
gap: 8,
|
|
alignItems: 'end',
|
|
}}>
|
|
<div>
|
|
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Total</div>
|
|
<div style={{ fontSize: 20, fontWeight: 600, color: 'var(--ink-900)', marginTop: 2, fontFamily: "'Geist Mono', 'Geist', monospace" }}>
|
|
{amount != null ? formatEuro(amount) : <EmptyDash />}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Time</div>
|
|
<div style={{
|
|
fontSize: 20, marginTop: 2,
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
fontWeight: occupiedMins != null && occupiedMins >= 90 ? 700 : 500,
|
|
color: 'var(--ink-900)',
|
|
}}>
|
|
{occupiedMins != null ? formatDuration(occupiedMins) : <EmptyDash />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Waiter row */}
|
|
<div style={{
|
|
marginTop: 12,
|
|
paddingTop: 10,
|
|
borderTop: '1px solid ' + s.tintStrong,
|
|
height: 36,
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
}}>
|
|
{waiters.length === 0 ? (
|
|
<span style={{ color: 'var(--ink-400)', fontSize: 13 }}>Unassigned</span>
|
|
) : showMulti ? (
|
|
<>
|
|
<div style={{ display: 'flex' }}>
|
|
{waiters.slice(0, 3).map((w, i) => (
|
|
<div key={i} style={{ marginLeft: i === 0 ? 0 : -8 }}>
|
|
<Initials name={w} size={24} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span style={{
|
|
fontSize: 13, fontWeight: 600, color: 'var(--ink-700)',
|
|
background: 'white', border: '1px solid var(--ink-200)',
|
|
borderRadius: 999, padding: '2px 8px',
|
|
}}>Multiple ({waiters.length})</span>
|
|
</>
|
|
) : (
|
|
waiters.map((w, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<Initials name={w} size={24} />
|
|
<span style={{ fontSize: 14, color: 'var(--ink-700)', fontWeight: 500 }}>{w.split(' ')[0]}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ===========================================================================
|
|
// VARIATION 2 — Top stripe + large name on left, stats on right
|
|
// More "at-a-glance" — big name dominates.
|
|
// ===========================================================================
|
|
function TableCardV2({ name, status, amount, occupiedMins, waiters = [], flags = [] }) {
|
|
const s = STATUS[status];
|
|
const [hover, setHover] = React.useState(false);
|
|
const [pressed, setPressed] = React.useState(false);
|
|
const showMulti = waiters.length >= 3;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => { setHover(false); setPressed(false); }}
|
|
onMouseDown={() => setPressed(true)}
|
|
onMouseUp={() => setPressed(false)}
|
|
style={{
|
|
'--cardBg': s.tint,
|
|
position: 'relative',
|
|
width: 260, height: 180,
|
|
padding: 0,
|
|
background: s.tint,
|
|
border: '1px solid ' + s.tintStrong,
|
|
borderRadius: 'var(--radius)',
|
|
boxShadow: pressed ? 'inset 0 2px 4px rgba(16,20,24,0.08)' : (hover ? 'var(--shadow-2)' : 'var(--shadow-1)'),
|
|
transform: pressed ? 'translateY(1px)' : (hover ? 'translateY(-2px)' : 'translateY(0)'),
|
|
transition: 'transform 120ms ease, box-shadow 120ms ease',
|
|
cursor: 'pointer',
|
|
textAlign: 'left',
|
|
font: 'inherit',
|
|
color: 'inherit',
|
|
overflow: 'hidden',
|
|
display: 'flex', flexDirection: 'column',
|
|
outline: 'none',
|
|
}}
|
|
>
|
|
{/* top stripe */}
|
|
<div style={{
|
|
height: 8,
|
|
background: s.accent,
|
|
flexShrink: 0,
|
|
}} />
|
|
|
|
<div style={{ padding: '12px 16px 14px', flex: 1, display: 'flex', flexDirection: 'column' }}>
|
|
{/* Top row: name BIG + status label */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
|
|
<div style={{
|
|
fontSize: 38, fontWeight: 700, lineHeight: 1,
|
|
letterSpacing: -1,
|
|
color: 'var(--ink-900)',
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
}}>{name}</div>
|
|
<div style={{
|
|
fontSize: 12, fontWeight: 700,
|
|
color: s.ink,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.6,
|
|
textAlign: 'right',
|
|
lineHeight: 1.2,
|
|
paddingTop: 4,
|
|
}}>{s.label}</div>
|
|
</div>
|
|
|
|
{/* Flags row — fixed height */}
|
|
<div style={{ marginTop: 6, height: 22, display: 'flex', gap: 6, alignItems: 'center' }}>
|
|
{flags.map(f => <Flag key={f} kind={f} />)}
|
|
</div>
|
|
|
|
{/* Stats line */}
|
|
<div style={{
|
|
marginTop: 'auto',
|
|
display: 'flex',
|
|
alignItems: 'baseline',
|
|
gap: 14,
|
|
}}>
|
|
<div style={{
|
|
fontSize: 22, fontWeight: 600,
|
|
color: 'var(--ink-900)',
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
}}>
|
|
{amount != null ? formatEuro(amount) : <EmptyDash />}
|
|
</div>
|
|
<div style={{ width: 1, height: 16, background: s.tintStrong }} />
|
|
<div style={{
|
|
fontSize: 16,
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
fontWeight: occupiedMins != null && occupiedMins >= 90 ? 700 : 500,
|
|
color: 'var(--ink-700)',
|
|
}}>
|
|
{occupiedMins != null ? formatDuration(occupiedMins) : <EmptyDash />}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Waiter row */}
|
|
<div style={{
|
|
marginTop: 10,
|
|
height: 32,
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
}}>
|
|
{waiters.length === 0 ? (
|
|
<span style={{ color: 'var(--ink-400)', fontSize: 13 }}>Unassigned</span>
|
|
) : showMulti ? (
|
|
<>
|
|
<div style={{ display: 'flex' }}>
|
|
{waiters.slice(0, 3).map((w, i) => (
|
|
<div key={i} style={{ marginLeft: i === 0 ? 0 : -8 }}>
|
|
<Initials name={w} size={26} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span style={{
|
|
fontSize: 13, fontWeight: 600, color: 'var(--ink-700)',
|
|
background: 'white', border: '1px solid var(--ink-200)',
|
|
borderRadius: 999, padding: '3px 10px',
|
|
}}>Multiple ({waiters.length})</span>
|
|
</>
|
|
) : (
|
|
waiters.map((w, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<Initials name={w} size={26} />
|
|
<span style={{ fontSize: 14, color: 'var(--ink-700)', fontWeight: 500 }}>{w.split(' ')[0]}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ===========================================================================
|
|
// VARIATION 3 — Bold name badge, stats right-aligned
|
|
// Name lives in a colored badge in the top-left like a table plaque.
|
|
// Good for tablet thumb reach — name is easy to tap to open.
|
|
// ===========================================================================
|
|
function TableCardV3({ name, status, amount, occupiedMins, waiters = [], flags = [] }) {
|
|
const s = STATUS[status];
|
|
const [hover, setHover] = React.useState(false);
|
|
const [pressed, setPressed] = React.useState(false);
|
|
const showMulti = waiters.length >= 3;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => { setHover(false); setPressed(false); }}
|
|
onMouseDown={() => setPressed(true)}
|
|
onMouseUp={() => setPressed(false)}
|
|
style={{
|
|
'--cardBg': s.tint,
|
|
position: 'relative',
|
|
width: 260, height: 180,
|
|
padding: 14,
|
|
background: s.tint,
|
|
border: '1px solid ' + s.tintStrong,
|
|
borderRadius: 'var(--radius)',
|
|
boxShadow: pressed ? 'inset 0 2px 4px rgba(16,20,24,0.08)' : (hover ? 'var(--shadow-2)' : 'var(--shadow-1)'),
|
|
transform: pressed ? 'translateY(1px)' : (hover ? 'translateY(-2px)' : 'translateY(0)'),
|
|
transition: 'transform 120ms ease, box-shadow 120ms ease',
|
|
cursor: 'pointer',
|
|
textAlign: 'left',
|
|
font: 'inherit',
|
|
color: 'inherit',
|
|
display: 'flex', flexDirection: 'column',
|
|
outline: 'none',
|
|
}}
|
|
>
|
|
{/* Top row — plaque + status + flags */}
|
|
<div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
|
|
<div style={{
|
|
width: 68, height: 56,
|
|
borderRadius: 10,
|
|
background: s.accent,
|
|
color: 'white',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontSize: 26, fontWeight: 700,
|
|
letterSpacing: -0.5,
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
flexShrink: 0,
|
|
}}>{name}</div>
|
|
|
|
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
<div style={{
|
|
fontSize: 13, fontWeight: 700,
|
|
color: s.ink,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.6,
|
|
lineHeight: 1,
|
|
}}>{s.label}</div>
|
|
{/* Flags row — fixed height so layout stays stable */}
|
|
<div style={{ height: 22, display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'nowrap', overflow: 'hidden' }}>
|
|
{flags.map(f => <Flag key={f} kind={f} />)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div style={{
|
|
marginTop: 'auto',
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 1fr',
|
|
gap: 6,
|
|
}}>
|
|
<div>
|
|
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Total</div>
|
|
<div style={{ fontSize: 22, fontWeight: 600, color: 'var(--ink-900)', marginTop: 2, fontFamily: "'Geist Mono', 'Geist', monospace", lineHeight: 1.1 }}>
|
|
{amount != null ? formatEuro(amount) : <EmptyDash />}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Time</div>
|
|
<div style={{
|
|
fontSize: 22, marginTop: 2,
|
|
fontFamily: "'Geist Mono', 'Geist', monospace",
|
|
fontWeight: occupiedMins != null && occupiedMins >= 90 ? 700 : 500,
|
|
color: 'var(--ink-900)',
|
|
lineHeight: 1.1,
|
|
}}>
|
|
{occupiedMins != null ? formatDuration(occupiedMins) : <EmptyDash />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Waiter row */}
|
|
<div style={{
|
|
marginTop: 10,
|
|
paddingTop: 10,
|
|
borderTop: '1px solid ' + s.tintStrong,
|
|
height: 38,
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
}}>
|
|
{waiters.length === 0 ? (
|
|
<span style={{ color: 'var(--ink-400)', fontSize: 13 }}>Unassigned</span>
|
|
) : showMulti ? (
|
|
<>
|
|
<div style={{ display: 'flex' }}>
|
|
{waiters.slice(0, 3).map((w, i) => (
|
|
<div key={i} style={{ marginLeft: i === 0 ? 0 : -8 }}>
|
|
<Initials name={w} size={26} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span style={{
|
|
fontSize: 13, fontWeight: 600, color: 'var(--ink-700)',
|
|
background: 'white', border: '1px solid var(--ink-200)',
|
|
borderRadius: 999, padding: '3px 10px',
|
|
}}>Multiple ({waiters.length})</span>
|
|
</>
|
|
) : (
|
|
waiters.map((w, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<Initials name={w} size={26} />
|
|
<span style={{ fontSize: 14, color: 'var(--ink-700)', fontWeight: 500 }}>{w.split(' ')[0]}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Export to window
|
|
Object.assign(window, { TableCardV1, TableCardV2, TableCardV3, STATUS });
|