Initial commit: Apothecary v0.4.0
This commit is contained in:
@@ -0,0 +1,508 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { Bootstrap, Product } from "../types.js";
|
||||
import { TYPES, helpers, TODAY_STR } from "../types.js";
|
||||
import { remainingShort } from "../stats.js";
|
||||
import { fmt, TYPE_GLYPHS } from "../format.js";
|
||||
import { Btn, Card, Pill, Icon, Select, inputStyle } from "../components/primitives/index.js";
|
||||
|
||||
type FilterKey = "active" | "consumed" | "gone" | "all";
|
||||
type SortKey = "recent" | "name" | "thc" | "remaining" | "price" | "audit";
|
||||
type ViewKey = "flat" | "grouped";
|
||||
|
||||
const GRID_COLS = "32px 2fr 1fr 1fr 0.6fr 0.6fr 0.9fr 0.9fr 0.8fr";
|
||||
|
||||
export function Inventory({
|
||||
data,
|
||||
onSelectProduct,
|
||||
onAddProduct,
|
||||
onAuditNew,
|
||||
}: {
|
||||
data: Bootstrap;
|
||||
onSelectProduct: (p: Product) => void;
|
||||
onAddProduct: () => void;
|
||||
onAuditNew: () => void;
|
||||
}) {
|
||||
const [filter, setFilter] = useState<FilterKey>("active");
|
||||
const [typeFilter, setTypeFilter] = useState<string>("all");
|
||||
const [sortBy, setSortBy] = useState<SortKey>("recent");
|
||||
const [search, setSearch] = useState("");
|
||||
const [view, setView] = useState<ViewKey>(
|
||||
() => (localStorage.getItem("apothecary.inventoryView") as ViewKey | null) ?? "flat",
|
||||
);
|
||||
useEffect(() => {
|
||||
localStorage.setItem("apothecary.inventoryView", view);
|
||||
}, [view]);
|
||||
|
||||
const sortFn = (a: Product, b: Product) => {
|
||||
if (sortBy === "recent") return +new Date(b.purchaseDate) - +new Date(a.purchaseDate);
|
||||
if (sortBy === "name") return a.name.localeCompare(b.name);
|
||||
if (sortBy === "thc") return b.thc - a.thc;
|
||||
if (sortBy === "remaining")
|
||||
return helpers.estimatedRemaining(b, TODAY_STR) - helpers.estimatedRemaining(a, TODAY_STR);
|
||||
if (sortBy === "price") return b.price - a.price;
|
||||
if (sortBy === "audit")
|
||||
return helpers.daysSinceCheck(b, TODAY_STR) - helpers.daysSinceCheck(a, TODAY_STR);
|
||||
return 0;
|
||||
};
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
let products = data.products;
|
||||
if (filter === "active") products = products.filter((p) => p.status === "active");
|
||||
else if (filter === "consumed") products = products.filter((p) => p.status === "consumed");
|
||||
else if (filter === "gone") products = products.filter((p) => p.status === "gone");
|
||||
if (typeFilter !== "all") products = products.filter((p) => p.type === typeFilter);
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
products = products.filter((p) => {
|
||||
const brand = helpers.brandName(data, p.brandId).toLowerCase();
|
||||
const shop = helpers.shopName(data, p.shopId).toLowerCase();
|
||||
return (
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
brand.includes(q) ||
|
||||
shop.includes(q) ||
|
||||
p.sku.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}
|
||||
return products;
|
||||
}, [data, filter, typeFilter, search]);
|
||||
|
||||
const sortedProducts = useMemo(
|
||||
() => [...filteredProducts].sort(sortFn),
|
||||
[filteredProducts, sortBy],
|
||||
);
|
||||
|
||||
// For grouped mode: bucket by strainId. Products without a strainId fall
|
||||
// into an "Unlinked" bucket at the end. Within each group, sort by sortFn.
|
||||
type Group = {
|
||||
strainId: string | null;
|
||||
label: string;
|
||||
brand: string;
|
||||
type: string;
|
||||
products: Product[];
|
||||
};
|
||||
const groups: Group[] = useMemo(() => {
|
||||
const byStrain = new Map<string | null, Product[]>();
|
||||
for (const p of filteredProducts) {
|
||||
const arr = byStrain.get(p.strainId) ?? [];
|
||||
arr.push(p);
|
||||
byStrain.set(p.strainId, arr);
|
||||
}
|
||||
const out: Group[] = [];
|
||||
for (const [strainId, products] of byStrain.entries()) {
|
||||
const first = products[0]!;
|
||||
// Prefer the strain's canonical name when available so casing is
|
||||
// consistent regardless of which product was added first.
|
||||
const strain = strainId ? data.strains.find((s) => s.id === strainId) : null;
|
||||
out.push({
|
||||
strainId,
|
||||
label: strain?.name ?? first.name,
|
||||
brand: helpers.brandName(data, first.brandId),
|
||||
type: first.type,
|
||||
products: [...products].sort(sortFn),
|
||||
});
|
||||
}
|
||||
// Order groups by their most-recent purchase date desc so newest strains float up.
|
||||
out.sort((a, b) => {
|
||||
if (a.strainId === null) return 1;
|
||||
if (b.strainId === null) return -1;
|
||||
const aMax = Math.max(...a.products.map((p) => +new Date(p.purchaseDate)));
|
||||
const bMax = Math.max(...b.products.map((p) => +new Date(p.purchaseDate)));
|
||||
return bMax - aMax;
|
||||
});
|
||||
return out;
|
||||
}, [filteredProducts, data, sortBy]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "clamp(32px, 3vw, 64px) clamp(40px, 3vw, 80px) 80px",
|
||||
maxWidth: 2400,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24 }}>
|
||||
<div>
|
||||
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
|
||||
{sortedProducts.length} item{sortedProducts.length === 1 ? "" : "s"}
|
||||
</div>
|
||||
<h1
|
||||
className="serif"
|
||||
style={{ fontSize: 44, margin: "6px 0 0", fontWeight: 500, letterSpacing: "-0.02em" }}
|
||||
>
|
||||
Inventory
|
||||
</h1>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<Btn variant="secondary" icon="check" onClick={onAuditNew}>Audit</Btn>
|
||||
<Btn variant="primary" icon="plus" onClick={onAddProduct}>New product</Btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card style={{ marginBottom: 14, padding: 14 }}>
|
||||
<div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
|
||||
<Segmented<FilterKey>
|
||||
value={filter}
|
||||
options={[
|
||||
["active", "Active"],
|
||||
["consumed", "Consumed"],
|
||||
["gone", "Gone"],
|
||||
["all", "All"],
|
||||
]}
|
||||
onChange={setFilter}
|
||||
/>
|
||||
|
||||
<Segmented<ViewKey>
|
||||
value={view}
|
||||
options={[
|
||||
["flat", "Flat"],
|
||||
["grouped", "Grouped"],
|
||||
]}
|
||||
onChange={setView}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 220,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
background: "var(--bg-2)",
|
||||
border: "1px solid var(--line)",
|
||||
borderRadius: "var(--r-md)",
|
||||
padding: "0 10px",
|
||||
}}
|
||||
>
|
||||
<Icon name="search" size={14} color="var(--ink-3)" />
|
||||
<input
|
||||
placeholder="Search by name, brand, shop, SKU…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
border: "none",
|
||||
outline: "none",
|
||||
background: "transparent",
|
||||
padding: "8px 0",
|
||||
fontSize: 13,
|
||||
flex: 1,
|
||||
color: "var(--ink)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
style={{ ...inputStyle, width: "auto", padding: "8px 10px" }}
|
||||
>
|
||||
<option value="all">All types</option>
|
||||
{TYPES.map((t) => (
|
||||
<option key={t.id} value={t.id}>{t.id}</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortKey)}
|
||||
style={{ ...inputStyle, width: "auto", padding: "8px 10px" }}
|
||||
>
|
||||
<option value="recent">Recent first</option>
|
||||
<option value="name">Name (A–Z)</option>
|
||||
<option value="thc">THC % (high)</option>
|
||||
<option value="remaining">Remaining (high)</option>
|
||||
<option value="price">Price (high)</option>
|
||||
<option value="audit">Audit overdue first</option>
|
||||
</Select>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card padded={false}>
|
||||
<HeaderRow />
|
||||
{sortedProducts.length === 0 && (
|
||||
<div style={{ padding: 60, textAlign: "center", color: "var(--ink-3)" }}>
|
||||
No items match these filters.
|
||||
</div>
|
||||
)}
|
||||
{view === "flat" &&
|
||||
sortedProducts.map((p) => (
|
||||
<ProductRow key={p.id} p={p} data={data} onSelect={onSelectProduct} />
|
||||
))}
|
||||
{view === "grouped" &&
|
||||
groups.map((g) => (
|
||||
<div key={g.strainId ?? "unlinked"}>
|
||||
<GroupHeader group={g} />
|
||||
{g.products.map((p) => (
|
||||
<ProductRow key={p.id} p={p} data={data} onSelect={onSelectProduct} indented />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Segmented<T extends string>({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
value: T;
|
||||
options: [T, string][];
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
background: "var(--bg-2)",
|
||||
border: "1px solid var(--line)",
|
||||
borderRadius: "var(--r-md)",
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
{options.map(([k, l]) => (
|
||||
<button
|
||||
key={k}
|
||||
onClick={() => onChange(k)}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
borderRadius: 6,
|
||||
border: "none",
|
||||
background: value === k ? "var(--surface)" : "transparent",
|
||||
color: value === k ? "var(--ink)" : "var(--ink-3)",
|
||||
boxShadow: value === k ? "var(--shadow-sm)" : "none",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeaderRow() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: GRID_COLS,
|
||||
columnGap: 16,
|
||||
padding: "12px 20px",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
background: "var(--bg-2)",
|
||||
fontSize: 11,
|
||||
color: "var(--ink-3)",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.08em",
|
||||
}}
|
||||
>
|
||||
<div></div>
|
||||
<div>Product</div>
|
||||
<div>Brand</div>
|
||||
<div>Shop</div>
|
||||
<div>THC %</div>
|
||||
<div>Price</div>
|
||||
<div>Remaining</div>
|
||||
<div>Last checked</div>
|
||||
<div>Bin</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupHeader({
|
||||
group,
|
||||
}: {
|
||||
group: {
|
||||
strainId: string | null;
|
||||
label: string;
|
||||
brand: string;
|
||||
type: string;
|
||||
products: Product[];
|
||||
};
|
||||
}) {
|
||||
// Aggregate remaining: bulk uses estimatedRemaining; discrete uses unitWeight × count.
|
||||
// Counts use status === "active" only — archived rows shouldn't inflate "on hand."
|
||||
const active = group.products.filter((p) => p.status === "active");
|
||||
const totalRemaining = active.reduce((s, p) => {
|
||||
if (p.kind === "bulk") return s + helpers.estimatedRemaining(p, TODAY_STR);
|
||||
const cur = p.countLastAudit ?? p.countOriginal;
|
||||
return s + cur * (p.unitWeight || 0);
|
||||
}, 0);
|
||||
const totalCount = active.length;
|
||||
const lastBuy = group.products.reduce((max, p) => {
|
||||
const t = +new Date(p.purchaseDate);
|
||||
return t > max ? t : max;
|
||||
}, 0);
|
||||
const cfg = TYPES.find((t) => t.id === group.type);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "baseline",
|
||||
justifyContent: "space-between",
|
||||
gap: 16,
|
||||
padding: "16px 20px 10px",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
background: "var(--bg-2)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "baseline", gap: 12, minWidth: 0 }}>
|
||||
<div style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink-3)", width: 18 }}>
|
||||
{TYPE_GLYPHS[group.type]}
|
||||
</div>
|
||||
<div className="serif" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1.1 }}>
|
||||
{group.strainId === null ? "Unlinked" : group.label}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: "var(--ink-3)" }}>
|
||||
{group.brand} · {group.type}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "baseline", gap: 18, fontSize: 12, color: "var(--ink-3)" }}>
|
||||
<div>
|
||||
<span className="mono" style={{ color: "var(--ink-2)" }}>
|
||||
{totalCount}
|
||||
</span>{" "}
|
||||
{totalCount === 1 ? "active" : "active"}
|
||||
{group.products.length !== totalCount && (
|
||||
<span style={{ color: "var(--ink-4)" }}> / {group.products.length} total</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="mono" style={{ color: "var(--ink-2)" }}>
|
||||
{totalRemaining.toFixed(2).replace(/\.?0+$/, "") || "0"}
|
||||
</span>{" "}
|
||||
{cfg?.unit ?? "g"} on hand
|
||||
</div>
|
||||
{lastBuy > 0 && (
|
||||
<div>
|
||||
last buy <span className="mono" style={{ color: "var(--ink-2)" }}>{fmt.dateShort(new Date(lastBuy).toISOString())}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductRow({
|
||||
p,
|
||||
data,
|
||||
onSelect,
|
||||
indented = false,
|
||||
}: {
|
||||
p: Product;
|
||||
data: Bootstrap;
|
||||
onSelect: (p: Product) => void;
|
||||
indented?: boolean;
|
||||
}) {
|
||||
const bin = data.bins.find((b) => b.id === p.binId);
|
||||
const pctRemaining = helpers.pctRemaining(p, TODAY_STR);
|
||||
const overdue = helpers.auditOverdue(p, TODAY_STR);
|
||||
const sinceCheck = helpers.daysSinceCheck(p, TODAY_STR);
|
||||
const last = helpers.lastAudit(p);
|
||||
const isInactive = p.status !== "active";
|
||||
return (
|
||||
<div
|
||||
onClick={() => onSelect(p)}
|
||||
className="inv-row"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: GRID_COLS,
|
||||
columnGap: 16,
|
||||
padding: indented ? "14px 20px 14px 36px" : "14px 20px",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
opacity: isInactive ? 0.55 : 1,
|
||||
fontSize: 13,
|
||||
borderLeft: indented ? "2px solid var(--bg-3)" : "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "var(--serif)",
|
||||
fontSize: 18,
|
||||
color: "var(--ink-3)",
|
||||
opacity: indented ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
{TYPE_GLYPHS[p.type]}
|
||||
</div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
color: "var(--ink)",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{p.name}
|
||||
{p.status === "consumed" && (
|
||||
<Pill tone="terra" style={{ marginLeft: 6, fontSize: 10 }}>Consumed</Pill>
|
||||
)}
|
||||
{p.status === "gone" && (
|
||||
<Pill tone="amber" style={{ marginLeft: 6, fontSize: 10 }}>Gone</Pill>
|
||||
)}
|
||||
{p.status === "active" && overdue && (
|
||||
<Pill tone="amber" style={{ marginLeft: 6, fontSize: 10 }}>Audit due</Pill>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)" }}>
|
||||
{p.sku}
|
||||
{p.assetTag ? ` · ${p.assetTag}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ color: "var(--ink-2)" }}>{helpers.brandName(data, p.brandId)}</div>
|
||||
<div style={{ color: "var(--ink-3)", fontSize: 12 }}>{helpers.shopName(data, p.shopId)}</div>
|
||||
<div style={{ fontFamily: "var(--mono)", color: "var(--ink-2)" }}>{p.thc.toFixed(1)}</div>
|
||||
<div style={{ fontFamily: "var(--mono)" }}>{fmt.money(p.price)}</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{remainingShort(p)}</div>
|
||||
{p.status === "active" && p.kind === "bulk" && (
|
||||
<div style={{ width: 80, height: 5, background: "var(--bg-3)", borderRadius: 2 }}>
|
||||
<div
|
||||
style={{
|
||||
width: `${pctRemaining * 100}%`,
|
||||
height: "100%",
|
||||
background:
|
||||
pctRemaining < 0.25
|
||||
? "var(--terracotta)"
|
||||
: pctRemaining < 0.5
|
||||
? "var(--amber)"
|
||||
: "var(--sage)",
|
||||
borderRadius: 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: overdue ? "var(--terracotta)" : "var(--ink-3)" }}>
|
||||
{p.status !== "active" ? (
|
||||
<span style={{ fontStyle: "italic" }}>archived</span>
|
||||
) : last ? (
|
||||
<span>
|
||||
<span className="mono">{sinceCheck}d</span> ago · {last.mode}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontStyle: "italic" }}>never</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: "var(--ink-3)" }}>
|
||||
{bin ? bin.name : <span style={{ fontStyle: "italic" }}>—</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user