Inventory
Master database of everything you purchase. Used by Truck Order to know what to count and reorder.
{[
{ id: 'items', label: 'Items', count: items.length },
{ id: 'vendors', label: 'Vendors', count: vendors.length },
{ id: 'categories', label: 'Categories', count: categories.length },
{ id: 'storage', label: 'Storage Areas', count: areas.length },
].map(t => (
))}
{tab === 'items' &&
}
{tab === 'vendors' &&
}
{tab === 'categories' &&
}
{tab === 'storage' &&
}
);
};
// ------------------------------------------------------------------
// Items — table list
// ------------------------------------------------------------------
const InventoryItems = ({ items, setItems, categories, areas, vendors }) => {
const [editing, setEditing] = useInv(null);
const [search, setSearch] = useInv('');
const [catFilter, setCatFilter] = useInv('all');
const [sort, setSort] = useInv({ key: 'name', dir: 'asc' });
const catById = useMemoInv(() => Object.fromEntries(categories.map(c => [c.id, c])), [categories]);
const areaById = useMemoInv(() => Object.fromEntries(areas.map(a => [a.id, a])), [areas]);
const vendorById = useMemoInv(() => Object.fromEntries(vendors.map(v => [v.id, v])), [vendors]);
const filtered = useMemoInv(() => {
const q = search.trim().toLowerCase();
let out = items.filter(i => {
if (catFilter !== 'all' && i.categoryId !== catFilter) return false;
if (!q) return true;
const vendorName = vendorById[i.vendorId]?.name || '';
const hay = [
i.name, vendorName, i.vendorSku,
...(i.vendorAliases || []),
].filter(Boolean).join(' ').toLowerCase();
return hay.includes(q);
});
out = out.map(it => ({
...it,
_cat: catById[it.categoryId],
_area: areaById[it.storageAreaId],
_vendor: vendorById[it.vendorId],
}));
const dir = sort.dir === 'asc' ? 1 : -1;
out.sort((a, b) => {
switch (sort.key) {
case 'name': return a.name.localeCompare(b.name) * dir;
case 'vendor': return ((a._vendor?.name || 'zzz').localeCompare(b._vendor?.name || 'zzz')) * dir;
case 'category': return ((a._cat?.name || 'zzz').localeCompare(b._cat?.name || 'zzz')) * dir;
case 'area': return ((a._area?.name || 'zzz').localeCompare(b._area?.name || 'zzz')) * dir;
case 'price': return ((a.currentPrice || 0) - (b.currentPrice || 0)) * dir;
default: return 0;
}
});
return out;
}, [items, search, catFilter, sort, catById, areaById]);
const addItem = () => {
setEditing({
id: 'new',
name: '',
categoryId: categories[0]?.id || null,
storageAreaId: areas[0]?.id || null,
vendorId: vendors[0]?.id || null,
vendorAliases: [],
vendorSku: '',
purchaseUnit: 'case',
storageUnit: '',
conversion: 1,
currentPrice: 0,
priceHistory: [],
notes: '',
});
};
const saveItem = (it) => {
if (it.id === 'new') {
const newId = 'inv-' + Date.now().toString(36);
setItems(prev => [...prev, { ...it, id: newId }]);
} else {
setItems(prev => prev.map(p => p.id === it.id ? it : p));
}
setEditing(null);
};
const deleteItem = (id) => {
if (!confirm('Delete this item? This cannot be undone.')) return;
setItems(prev => prev.filter(p => p.id !== id));
setEditing(null);
};
const catCounts = useMemoInv(() => {
const map = { all: items.length };
categories.forEach(c => map[c.id] = 0);
items.forEach(i => { if (map.hasOwnProperty(i.categoryId)) map[i.categoryId] += 1; });
return map;
}, [items, categories]);
const setSortKey = (key) => {
setSort(s => s.key === key ? { key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' });
};
return (
setCatFilter('all')} count={catCounts.all}>All
{categories.map(c => (
setCatFilter(c.id)} color={c.color} count={catCounts[c.id] || 0}>
{c.name}
))}
{filtered.length === 0 ? (
{search || catFilter !== 'all' ? 'No items match.' : 'No inventory items yet.'}
{!search && catFilter === 'all' && (
Add the first one
)}
) : (
setSortKey('name')} sort={sort} k="name">Item
setSortKey('vendor')} sort={sort} k="vendor" w={170}>Vendor
setSortKey('category')} sort={sort} k="category" w={130}>Category
setSortKey('area')} sort={sort} k="area" w={140}>Storage
Conversion
setSortKey('price')} sort={sort} k="price" w={100} align="right">Price
{filtered.map(item => (
setEditing(item)}
style={{ borderBottom: '1px solid var(--border-2)', cursor: 'pointer' }}
onMouseEnter={e => e.currentTarget.style.background = '#FBFAF8'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
>
|
{item.name || Untitled}
{item.vendorSku && (
SKU {item.vendorSku}
)}
|
{item._vendor?.name || —}
{(item.vendorAliases || []).length > 0 && (
{(item.vendorAliases || []).join(' · ')}
)}
|
|
{item._area?.name || —}
|
|
{fmtMoney(item.currentPrice)}
{(item.priceHistory || []).length > 1 && (
)}
|
|
))}
)}
{editing && (
setEditing(null)}
onSave={saveItem}
onDelete={editing.id !== 'new' ? () => deleteItem(editing.id) : null}
/>
)}
);
};
// Inline conversion display: "1 case → 2 lg prep pan"
const ConversionDisplay = ({ item }) => {
const purchase = item.purchaseUnit || '—';
const storage = item.storageUnit || '—';
const ratio = item.conversion;
if (!ratio || (storage === purchase)) {
return (