// shared.jsx — shared UI atoms for Snap Operation.
// Avatar, Button, Chip, Icons, StaffPicker modal, NumPad.
const { useState, useEffect, useRef, useMemo } = React;
// ------------------------------------------------------------------
// Icons — minimal inline SVG set (outline stroke 1.75)
// ------------------------------------------------------------------
const Icon = ({ name, size = 22, color = 'currentColor', strokeWidth = 1.75, style }) => {
const s = strokeWidth;
const common = {
width: size, height: size, viewBox: '0 0 24 24',
fill: 'none', stroke: color, strokeWidth: s,
strokeLinecap: 'round', strokeLinejoin: 'round',
style,
};
const paths = {
lock: <>,
check: ,
plus: <>,
minus: ,
x: <>,
chevron: ,
chevronL: ,
chevronD: ,
menu: <>,
user: <>,
users: <>,
clipboard:<>,
broom: <>,
box: <>,
truck: <>,
clock: <>,
search: <>,
filter: ,
pdf: <>,
download: <>,
eye: <>,
alert: <>,
flame: ,
tag: <>,
coffee: <>,
edit: <>,
settings: <>,
wifi: <>,
battery: <>,
backspace: <>,
camera: <>,
receipt: <>,
dot: ,
sparkle: <>,
home: <>,
megaphone:<>,
};
return ;
};
// ------------------------------------------------------------------
// Avatar
// ------------------------------------------------------------------
const Avatar = ({ staff, size = 36, style, ring = false }) => {
if (!staff) return null;
return (
{staff.initials}
);
};
const AvatarStack = ({ ids, size = 28, max = 4 }) => {
const staff = ids.map(id => window.SAMPLE_STAFF.find(s => s.id === id)).filter(Boolean);
const shown = staff.slice(0, max);
const extra = staff.length - max;
return (
{shown.map((s, i) => (
))}
{extra > 0 && (
+{extra}
)}
{children}
);
// ------------------------------------------------------------------
// Modal / sheet
// ------------------------------------------------------------------
const Modal = ({ open, onClose, children, width = 520, title }) => {
if (!open) return null;
return (
e.stopPropagation()}
style={{
width, maxWidth: '100%', maxHeight: '92vh',
background: '#FFFFFF', borderRadius: 18,
boxShadow: 'var(--shadow-pop)',
overflow: 'hidden',
display: 'flex', flexDirection: 'column',
animation: 'pop-in 260ms var(--ease-snap)',
}}>
{title && (
)}
{children}
);
};
// ------------------------------------------------------------------
// StaffPicker — shown as a sheet of avatars
// ------------------------------------------------------------------
const StaffPicker = ({ open, onClose, onPick, title = 'Who are you?', subtitle }) => (
{subtitle && (
{subtitle}
)}
{window.SAMPLE_STAFF.map(s => (
))}
{subtitle}
{window.SAMPLE_STAFF.map(s => {
const on = picked.includes(s.id);
const locked = lockedIds.includes(s.id);
return (
);
})}
Cancel
{ onSave(picked); onClose(); }}>
{saveLabel} {picked.length > 0 && `(${picked.length})`}
);
};
// ------------------------------------------------------------------
// Number Pad (reusable)
// ------------------------------------------------------------------
const NumPad = ({ value = '', onChange, onEnter, maxLen = 4, big = false }) => {
const keys = ['1','2','3','4','5','6','7','8','9','','0','⌫'];
const tap = (k) => {
if (k === '') return;
if (k === '⌫') return onChange(value.slice(0, -1));
if (value.length >= maxLen) return;
const next = value + k;
onChange(next);
if (next.length === maxLen && onEnter) setTimeout(() => onEnter(next), 100);
};
const sz = big ? 84 : 70;
return (
{keys.map((k, i) => (
))}
);
};
// ------------------------------------------------------------------
// Progress bar
// ------------------------------------------------------------------
const ProgressBar = ({ pct, height = 6, color = 'var(--blue-500)', bg = 'var(--bg-sunken)' }) => (
);
// ------------------------------------------------------------------
// Toast
// ------------------------------------------------------------------
const Toast = ({ message, open, onClose, staff, icon = 'check' }) => {
useEffect(() => {
if (!open) return;
const t = setTimeout(() => onClose && onClose(), 2400);
return () => clearTimeout(t);
}, [open]);
if (!open) return null;
return (
{staff ?
: (
)}
{message}