token and requireRole() re-reads the role from the DB, so this
// session is already authorized; admin.jsx just needs it in localStorage.
// (admin.jsx gates the Employees view on the stored role, so write all three
// keys — writing only the token leaves an admin stuck on the Resellers view.)
const canOpenAdmin = user?.role === 'admin' || user?.role === 'manager';
const openAdminConsole = () => {
try {
localStorage.setItem('gruv_admin_token', user?.token || '');
localStorage.setItem('gruv_admin_role', user?.role || '');
localStorage.setItem('gruv_admin_name', user?.name || '');
} catch (_) {}
window.location.href = '/demo.html?demo=admin';
};
const [categoriesOpen, setCategoriesOpen] = React.useState(false);
const csvInputRef = React.useRef(null);
const editor = state.editorSku ? state.filtered.find((p) => p.sku === state.editorSku) || state.products.find((p) => p.sku === state.editorSku) : null;
const allCategories = React.useMemo(() => state.categories.filter((c) => c !== 'All').sort(), [state.categories]);
const allColors = React.useMemo(() => [...new Set(state.products.map((p) => p.color).filter(Boolean))].sort(), [state.products]);
const existingSkus = React.useMemo(() => new Set(state.products.map((p) => p.sku)), [state.products]);
const pagePad = isPhone ? '10px 8px' : variant === 'atelier' ? '30px 42px' : '22px 26px';
const titleFont = variant === 'ledger' ? palette.font : palette.serif;
const radius = palette.radius;
const categoryPanel = (
Categories
{state.categories.map((c) => {
const active = state.category === c;
return
;
})}
Payment holds expire automatically after the deadline and no longer reduce available inventory. Shipped orders are deducted from on-hand stock.
);
return (
Gruv Gear
Employee inventory
{!isPhone &&
}
{onPageChange &&
}
{!isPhone && onPageChange &&
}
state.importCSV(e.target.files?.[0])} style={{ display: 'none' }} />
{canOpenAdmin &&
}
{!isPhone && canManageProducts &&
}
{!isPhone &&
}
{canManageProducts &&
}
{!isPhone &&
{user?.name || INV_EMPLOYEE.name}
{user?.role || INV_EMPLOYEE.role}
}
{state.importStatus && (
{state.importStatus.text}
)}
{title}
{!isPhone &&
{subtitle}
}
state.setSearch(e.target.value)} placeholder="Search SKU, product, category" style={{ width: '100%', height: isPhone ? 34 : 38, border: `1px solid ${palette.border}`, borderRadius: radius || 0, background: palette.surface, padding: '0 12px', fontFamily: palette.font, outline: 'none', color: palette.text }} />
{fmtInt(state.filtered.length)} of {fmtInt(state.products.length)} SKUs
{!isCompact && categoriesOpen &&
}
{isCompact && categoriesOpen &&
setCategoriesOpen(false)} width={isPhone ? '86vw' : 280}>{categoryPanel}}
{isPhone ? (
{state.filtered.map((p) => )}
) : (
|
|
|
|
|
|
|
|
|
Actions |
{state.filtered.map((p, i) => {
const hold = p.related.find((h) => h.computedStatus === 'holding') || p.related.find((h) => h.computedStatus === 'expired') || p.related.find((h) => h.computedStatus === 'shipped');
return (
0 ? palette.badBg : i % 2 ? palette.metricBg : palette.surface }}>
|
{p.name} {p.category} / {p.color} / {p.size} |
{p.sku} |
{canManageProducts
? state.updateStock(p.sku, next)} palette={palette} style={{ width: 72, height: 30 }} />
: {fmtInt(p.onHand)}} |
{fmtInt(p.holding)} |
{fmtInt(p.afterHold)} |
{p.shortage ? fmtInt(p.shortage) : '-'} |
{hold ? {fmtInt(hold.qty)} in production : No active production} |
|
{canManageProducts
?
: View only}
|
);
})}
)}
{state.pendingStockChange &&
}
{canManageProducts && state.newOpen &&
state.setNewOpen(false)} onSave={(form) => { state.addProduct(form); state.setNewOpen(false); }} />}
{canManageProducts && editor && state.setEditorSku(null)} onSave={(form) => { state.patchProduct(editor.sku, form); state.setEditorSku(null); }} onDelete={() => { state.deleteProduct(editor.sku); state.setEditorSku(null); }} />}
);
}
function InventoryDrawer({ width, onClose, children }) {
return (
e.stopPropagation()} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width, maxWidth: '100%', background: L.surface, boxShadow: '18px 0 46px rgba(15,23,42,0.24)' }}>
{children}
);
}
function InventoryConfirmDialog({ palette, title, message, confirmLabel, cancelLabel, onConfirm, onCancel }) {
const isPhone = useInventoryViewportWidth() < 760;
return (
e.stopPropagation()} style={{ width: isPhone ? '100%' : 430, maxWidth: isPhone ? 'calc(100vw - 32px)' : '100%', background: palette.surface, border: `1px solid ${palette.border}`, borderRadius: 12, boxShadow: '0 24px 70px rgba(0,0,0,.22)', padding: isPhone ? 18 : 24 }}>
{title}
{message}
);
}
function InventoryMobileCard({ p, state, palette, canManageProducts = true }) {
const hold = p.related.find((h) => h.computedStatus === 'holding') || p.related.find((h) => h.computedStatus === 'expired') || p.related.find((h) => h.computedStatus === 'shipped');
return (
0 ? palette.badBg : palette.surface, padding: 14 }}>
{p.name}
{p.sku}
{p.category}
{hold ? `${fmtInt(hold.qty)} in production` : 'No active production'}
{canManageProducts
? state.updateStock(p.sku, next)} palette={palette} style={{ width: 90, height: 40, fontSize: 15 }} />
: {fmtInt(p.onHand)} on hand}
{canManageProducts && }
{tabs.map(({ key, label }) => {
const active = page === key;
return (
);
})}
);
}
function ProdEditableCell({ value, onChange, palette, style, type = 'text', placeholder = '' }) {
const [focused, setFocused] = React.useState(false);
const [hovered, setHovered] = React.useState(false);
return (
onChange(e.target.value)}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
border: `1px solid ${focused || hovered ? palette.border : 'transparent'}`,
borderRadius: 5, padding: '4px 8px',
fontFamily: palette.font, fontSize: 12,
color: palette.text,
background: focused ? palette.surface : 'transparent',
outline: 'none', boxSizing: 'border-box',
...(focused ? {
position: 'absolute', top: 0, left: 0,
width: 140,
zIndex: 20,
boxShadow: '0 6px 18px rgba(15,23,42,0.14)',
} : {
position: 'relative', width: '100%',
}),
...style,
}}
/>
);
}
function ProdDateCell({ value, onChange, palette }) {
const [focused, setFocused] = React.useState(false);
const [hovered, setHovered] = React.useState(false);
const display = value ? new Date(value + 'T12:00:00').toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }) : '';
return (
onChange(e.target.value)}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
border: `1px solid ${focused || hovered ? palette.border : 'transparent'}`,
borderRadius: 5, padding: '4px 6px',
fontFamily: palette.font, fontSize: 12, color: value ? palette.text : palette.muted,
background: focused ? palette.surface : 'transparent',
outline: 'none', cursor: 'pointer', width: '100%', boxSizing: 'border-box',
}}
/>
);
}
function ProdStatusSelect({ value, onChange, palette, styles }) {
const map = styles || PROD_STATUS_STYLES;
const [open, setOpen] = React.useState(false);
// No fallback to the first state: an unset value stays gray/blank.
const s = value && map[value] ? map[value] : STATUS_EMPTY_STYLE;
const optionBtn = (active) => ({
display: 'block', width: '100%', textAlign: 'left',
padding: '8px 12px', border: 'none',
background: active ? palette.bg : palette.surface,
cursor: 'pointer', fontFamily: palette.font,
});
return (
{open && (
<>
setOpen(false)} />
{Object.keys(map).map((status) => (
))}
)}
);
}
function ProdLeadAvatar({ initials, onChange, palette }) {
const [editing, setEditing] = React.useState(false);
const [draft, setDraft] = React.useState(initials);
const bg = LEAD_AVATAR_BG[initials] || '#94a3b8';
React.useEffect(() => { setDraft(initials); }, [initials]);
if (editing) {
return (
setDraft(e.target.value.toUpperCase())}
onBlur={() => { onChange(draft || initials); setEditing(false); }}
onKeyDown={(e) => {
if (e.key === 'Enter') { onChange(draft || initials); setEditing(false); }
if (e.key === 'Escape') { setDraft(initials); setEditing(false); }
}}
style={{ width: 32, height: 32, borderRadius: '50%', textAlign: 'center', fontWeight: 700, fontSize: 12, border: `2px solid ${palette.accent}`, fontFamily: palette.mono, background: palette.surface, color: palette.text, outline: 'none' }}
/>
);
}
return (
setEditing(true)} title="Click to edit" style={{
width: 32, height: 32, borderRadius: '50%', background: bg, color: '#fff',
display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12,
fontFamily: palette.mono, cursor: 'pointer', userSelect: 'none',
}}>{initials || '?'}
);
}
function ProdCommentsBtn({ comments, onOpen }) {
return (
);
}
function ProdCommentsModal({ row, onClose, onAdd, palette, label, readOnly }) {
const isPhone = useInventoryViewportWidth() < 760;
const [text, setText] = React.useState('');
const [attachments, setAttachments] = React.useState([]);
const canSubmit = text.trim().length > 0 || attachments.length > 0;
const addFiles = (files) => {
Array.from(files).forEach((file) => {
const reader = new FileReader();
reader.onload = () => setAttachments((prev) => [...prev, { name: file.name, url: reader.result }]);
reader.readAsDataURL(file);
});
};
const submit = () => {
if (!canSubmit) return;
onAdd(text, attachments);
setText('');
setAttachments([]);
};
return (
e.stopPropagation()} style={{
width: isPhone ? '100%' : 480, maxWidth: isPhone ? '100%' : '100%',
background: palette.surface, border: `1px solid ${palette.border}`,
borderRadius: isPhone ? '16px 16px 0 0' : 12,
boxShadow: '0 24px 70px rgba(0,0,0,.22)',
padding: isPhone ? 16 : 24,
maxHeight: isPhone ? '85dvh' : 'none',
display: 'flex', flexDirection: 'column',
}}>
Comments
{label || row.item}
{row.comments.length === 0 && (
No comments yet.
)}
{row.comments.map((c, i) => (
{c.author}
{c.date}
{c.text &&
{c.text}
}
{c.attachments?.length > 0 && (
)}
))}
{readOnly ? (
You have view-only access to comments here.
) : (
{attachments.length > 0 && (
{attachments.map((a, i) => (
📎 {a.name}
))}
)}
setText(e.target.value)}
placeholder="Add a comment..."
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) submit(); }}
style={{ flex: 1, height: 40, border: `1px solid ${palette.border}`, borderRadius: 8, padding: '0 12px', fontFamily: palette.font, outline: 'none', color: palette.text, background: palette.bg, fontSize: 13, minWidth: 0 }}
/>
)}
);
}
// Renders one board cell based on its column descriptor `type`.
// Small free-text note that sits under each status pill (mockup 19JUN2026).
function BoardNoteInput({ value, onChange, palette }) {
const [hovered, setHovered] = React.useState(false);
const [focused, setFocused] = React.useState(false);
return (
onChange(e.target.value)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
placeholder="+ note"
style={{
marginTop: 4, width: '100%', boxSizing: 'border-box',
border: `1px solid ${focused || hovered ? palette.border : 'transparent'}`, borderRadius: 4,
background: focused ? palette.surface : 'transparent', color: palette.muted,
fontFamily: palette.font, fontSize: 10, padding: '2px 4px', outline: 'none',
}}
/>
);
}
// Static (non-editable) rendering of a board cell, used when the signed-in role
// may not edit that column.
function BoardCellReadOnly({ col, row, palette }) {
const val = row[col.key];
switch (col.type) {
case 'namesku':
return (
{row.item || '—'}
{row.sku || ''}
);
case 'status': {
const map = col.styles || PROD_STATUS_STYLES;
const s = val && map[val] ? map[val] : STATUS_EMPTY_STYLE;
const noteKey = col.key + 'Note';
return (
{val || STATUS_EMPTY_LABEL}
{row[noteKey] ?
{row[noteKey]}
: null}
);
}
case 'warehouse':
return
{val || '—'};
case 'date':
return
{val ? new Date(val + 'T12:00:00').toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }) : '—'};
case 'number':
return
{(val || val === 0) ? String(val) : '—'};
case 'leaddays':
return
{val ? `${val} days` : '—'};
default:
return
{val || '—'};
}
}
function BoardCell({ col, row, state, palette, readOnly }) {
const set = (v) => state.updateRow(row.id, col.key, v);
// Comments stay viewable for everyone (the composer inside the modal is what
// gets gated); computed columns are already static.
if (col.type === 'comments') {
return
state.setCommentsRow(row.id)} />;
}
if (col.type === 'dayselapsed') {
const d = boardDaysElapsed(row.depositDate);
return {d === '' ? '—' : d};
}
if (readOnly) return ;
switch (col.type) {
case 'namesku':
return (
state.updateRow(row.id, 'item', v)} palette={palette} style={{ fontWeight: 700 }} placeholder="Item name" />
state.updateRow(row.id, 'sku', v)} palette={palette} style={{ fontSize: 10, color: palette.muted, fontFamily: palette.mono }} placeholder="SKU" />
);
case 'comments':
return state.setCommentsRow(row.id)} />;
case 'warehouse': {
const names = (typeof window !== 'undefined' && window.WAREHOUSES ? window.WAREHOUSES.map((w) => w.name) : ['Shanghai', 'California', 'Germany']);
return (
);
}
case 'status': {
const noteKey = col.key + 'Note';
return (
state.updateRow(row.id, noteKey, v)} palette={palette} />
);
}
case 'date':
return ;
case 'number':
return set(Number(v) || 0)} palette={palette} type="number" placeholder="0" style={{ textAlign: 'right', fontFamily: palette.mono }} />;
case 'leaddays':
return (
{row[col.key] ?
days : null}
);
case 'dayselapsed': {
const d = boardDaysElapsed(row.depositDate);
return {d === '' ? '—' : d};
}
default:
return ;
}
}
// Read-only activity/audit feed of operations performed on the dashboard.
function ActivityPage({ token, user, palette, page, onPageChange }) {
const width = useInventoryViewportWidth();
const isPhone = width < 760;
const [entries, setEntries] = React.useState(null);
const load = React.useCallback(() => {
if (!token) { setEntries([]); return; }
fetch('/api/inventory?resource=audit', { headers: { Authorization: `Bearer ${token}` } })
.then((r) => (r.ok ? r.json() : Promise.reject(new Error('audit'))))
.then((d) => setEntries(d.audit || []))
.catch(() => setEntries([]));
}, [token]);
React.useEffect(() => { load(); }, [load]);
const actionColor = (a = '') => {
if (a.startsWith('stock')) return { bg: palette.active, color: palette.accentText };
if (a.startsWith('product')) return { bg: palette.goodBg, color: palette.good };
if (a.startsWith('production')) return { bg: '#fffaeb', color: '#b54708' };
if (a.startsWith('order')) return { bg: '#eaf0ff', color: '#2e5dff' };
return { bg: palette.bg, color: palette.muted };
};
const fmtTime = (iso) => {
const d = new Date(iso);
return isNaN(d.getTime()) ? '' : d.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
};
const th = { textAlign: 'left', padding: '9px 12px', fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.5 };
return (
Gruv Gear
Employee inventory
{!isPhone &&
}
{!isPhone && (
{user?.name || INV_EMPLOYEE.name}
{user?.role || INV_EMPLOYEE.role}
)}
Activity Log
{!isPhone &&
Every operation performed on the inventory dashboard — who, what, and when.
}
{entries === null ? (
Loading…
) : entries.length === 0 ? (
No activity yet. Actions on the dashboard will show up here.
) : (
| When |
Who |
Action |
Target |
{!isPhone && Detail | }
{!isPhone && Warehouse | }
{entries.map((e) => {
const c = actionColor(e.action);
return (
| {fmtTime(e.created_at)} |
{e.actor || '—'} |
{e.action} |
{e.target || '—'} |
{!isPhone && {e.detail || ''} | }
{!isPhone && {e.warehouse || ''} | }
);
})}
)}
);
}
// Config-driven editable board shared by the Production Board and Order Dashboard.
function BoardPage({ state, palette, page, onPageChange, user, title, subtitle, columns, commentLabel, rowLabel, originFilter }) {
const width = useInventoryViewportWidth();
const isPhone = width < 760;
// Access control: managers/admins get full CRUD on both boards. Plain employees
// are view-only on Production and may edit only the status columns on Orders.
const role = user?.role || 'employee';
const canManageRows = role === 'manager' || role === 'admin';
const canComment = canManageRows || page === 'orders';
const isColEditable = (col) => canManageRows || (page === 'orders' && col.type === 'status');
const accessNote = canManageRows ? '' : (page === 'orders' ? 'Statuses only' : 'View only');
const [deleteConfirmId, setDeleteConfirmId] = React.useState(null);
const [pendingArchiveId, setPendingArchiveId] = React.useState(null);
const [origin, setOrigin] = React.useState('All');
const [sort, setSort] = React.useState({ key: null, dir: 'asc' });
const confirmDelete = () => { state.deleteRow(deleteConfirmId); setDeleteConfirmId(null); };
const toggleSort = (key) => setSort((s) => ({ key, dir: s.key === key && s.dir === 'asc' ? 'desc' : 'asc' }));
const rowsToShow = React.useMemo(() => {
let rows = originFilter && origin !== 'All' ? state.filtered.filter((r) => r.origin === origin) : state.filtered;
if (sort.key) {
const sign = sort.dir === 'asc' ? 1 : -1;
rows = [...rows].sort((a, b) => {
const av = String(a[sort.key] ?? '').toLowerCase();
const bv = String(b[sort.key] ?? '').toLowerCase();
if (av < bv) return -1 * sign;
if (av > bv) return 1 * sign;
return 0;
});
}
// Archived rows always sink to the bottom.
return [...rows.filter((r) => !r.archived), ...rows.filter((r) => r.archived)];
}, [state.filtered, origin, originFilter, sort]);
// Merge consecutive columns that share a `group` into one spanning header cell.
const groupSegments = [];
columns.forEach((c) => {
const g = c.group || '';
const last = groupSegments[groupSegments.length - 1];
if (last && last.group === g) last.span += 1;
else groupSegments.push({ group: g, span: 1 });
});
const hasGroups = columns.some((c) => c.group);
// Archived rows drop into their own "Completed / Archived" group below the
// active list rather than just being grayed out inline.
const activeRows = rowsToShow.filter((r) => !r.archived);
const archivedRows = rowsToShow.filter((r) => r.archived);
const renderRow = (row, i) => (
{columns.map((c) => (
|
|
))}
{canManageRows ? (
{!row.archived && (
)}
|
);
return (
{/* Header */}
Gruv Gear
Employee inventory
{!isPhone &&
}
{canManageRows &&
}
{!isPhone && (
{user?.name || INV_EMPLOYEE.name}
{user?.role || INV_EMPLOYEE.role}
)}
{/* Title */}
{title}
{accessNote && (
{accessNote}
)}
{!isPhone && subtitle &&
{subtitle}
}
{/* Toolbar */}
{originFilter && (
{['All', 'Domestic', 'International'].map((o) => {
const active = origin === o;
return (
);
})}
)}
state.setSearch(e.target.value)} placeholder="Search…" style={{ width: '100%', height: 34, border: `1px solid ${palette.border}`, borderRadius: palette.radius, background: palette.surface, padding: '0 12px', fontFamily: palette.font, outline: 'none', color: palette.text, fontSize: 13, boxSizing: 'border-box' }} />
{rowsToShow.length} of {state.rows.length} rows
{/* Table */}
{hasGroups && (
{groupSegments.map((seg, i) => (
| {seg.group} |
))}
|
)}
{columns.map((c) => (
|
{c.sortable ? (
) : c.label}
|
))}
Action |
{activeRows.map((row, i) => renderRow(row, i))}
{archivedRows.length > 0 && (
|
Completed / Archived ({archivedRows.length})
|
)}
{archivedRows.map((row, i) => renderRow(row, i))}
{rowsToShow.length === 0 && (
| No rows to show. |
)}
{canManageRows && (
)}
{/* Comments modal */}
{state.commentsRow !== null && (() => {
const row = state.rows.find((r) => r.id === state.commentsRow);
if (!row) return null;
return (
state.setCommentsRow(null)}
onAdd={(text, attachments) => state.addComment(state.commentsRow, text, attachments, user?.name)}
/>
);
})()}
{/* Delete confirmation */}
{deleteConfirmId !== null && (() => {
const row = state.rows.find((r) => r.id === deleteConfirmId);
if (!row) return null;
return (
setDeleteConfirmId(null)}
/>
);
})()}
{/* Archive confirmation */}
{pendingArchiveId !== null && (() => {
const row = state.rows.find((r) => r.id === pendingArchiveId);
if (!row) return null;
return (
{ state.archiveRow(pendingArchiveId); setPendingArchiveId(null); }}
onCancel={() => setPendingArchiveId(null)}
/>
);
})()}