josh
02dc6e523f
Build and push image / build (push) Successful in 46s
The products table conflated catalog ("kind of thing you scan") with
instance ("this jar I bought") — splitting it lets us record every
purchase as its own asset and autofill brand/shop/price/THC from the
last instance when scanning a known SKU.
- products: sku + strain + name + type + kind (catalog only)
- inventory_items: physical jars with short-UUID asset ids, per-batch
brand/shop/bin/price/cannabinoids/weight, audits, lifecycle
- audits now key on inventory_id; strains lose brand_id and type
- migration: rename existing products/audits/strains to *_legacy on
first boot so users keep historical reference, fresh start otherwise
- two-step add flow: scan SKU → select/create product → instance
details (autofilled from last instance) → generated asset id shown
- ScanField matches asset id first, falls back to SKU
- inventory list defaults flat, "By product" toggle groups instances
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
463 lines
17 KiB
TypeScript
463 lines
17 KiB
TypeScript
import type { Bootstrap, Item, Product } from "../types.js";
|
|
import { TYPES, helpers, TODAY_STR } from "../types.js";
|
|
import { fmt, TYPE_GLYPHS } from "../format.js";
|
|
import { Btn, Pill, Icon } from "./primitives/index.js";
|
|
|
|
// Right-side drawer for an inventory instance. Shows the asset id and
|
|
// product context up top, then per-batch fields (price, THC, weight),
|
|
// audit history, and full detail rows.
|
|
export function ProductDetail({
|
|
item,
|
|
data,
|
|
onClose,
|
|
onConsume,
|
|
onMarkGone,
|
|
onAudit,
|
|
onEdit,
|
|
onEditProduct,
|
|
}: {
|
|
item: Item;
|
|
data: Bootstrap;
|
|
onClose: () => void;
|
|
onConsume: (i: Item) => void;
|
|
onMarkGone: (i: Item) => void;
|
|
onAudit: (i: Item) => void;
|
|
onEdit: (i: Item) => void;
|
|
onEditProduct: (p: Product) => void;
|
|
}) {
|
|
const bin = data.bins.find((b) => b.id === item.binId);
|
|
const cfg = TYPES.find((t) => t.id === item.type);
|
|
const product = data.products.find((p) => p.id === item.productId);
|
|
const pctRemaining = helpers.pctRemaining(item, TODAY_STR);
|
|
const est = helpers.estimatedRemaining(item, TODAY_STR);
|
|
const last = helpers.lastAudit(item);
|
|
const overdue = helpers.auditOverdue(item, TODAY_STR);
|
|
const sinceCheck = helpers.daysSinceCheck(item, TODAY_STR);
|
|
|
|
const isActive = item.status === "active";
|
|
|
|
// Sibling instances of the same product (excluding this one) — useful for
|
|
// seeing previous purchases of the same SKU.
|
|
const siblings = data.inventoryItems.filter(
|
|
(i) => i.productId === item.productId && i.id !== item.id,
|
|
);
|
|
|
|
const detailRows: [string, React.ReactNode][] = [
|
|
["Asset id", <span className="mono">{item.assetId}</span>],
|
|
["SKU", <span className="mono">{item.sku}</span>],
|
|
["Type", `${item.type} · ${item.kind}`],
|
|
["Strain", item.strainName ?? <span style={{ color: "var(--ink-3)" }}>Unlinked</span>],
|
|
["Brand", helpers.brandName(data, item.brandId)],
|
|
["Shop", helpers.shopName(data, item.shopId)],
|
|
["Total cannabinoids", `${item.totalCannabinoids.toFixed(1)}%`],
|
|
["Purchase date", fmt.date(item.purchaseDate)],
|
|
["Bin", bin ? bin.name : <span style={{ color: "var(--ink-3)" }}>—</span>],
|
|
["Audit cadence", `Every ${cfg?.cadenceDays ?? "—"} days · ${cfg?.auditMode ?? "—"}`],
|
|
[
|
|
"Cost per gram",
|
|
item.kind === "bulk" && item.weight > 0
|
|
? fmt.money(item.price / item.weight)
|
|
: item.kind === "discrete" && item.unitWeight > 0
|
|
? `${fmt.money(item.price / (item.countOriginal * item.unitWeight))} (effective)`
|
|
: "—",
|
|
],
|
|
];
|
|
if (item.status === "consumed") {
|
|
detailRows.push(
|
|
["Date finished", fmt.date(item.consumedDate)],
|
|
[
|
|
"Lasted",
|
|
`${Math.round((+new Date(item.consumedDate!) - +new Date(item.purchaseDate)) / 86_400_000)} days`,
|
|
],
|
|
);
|
|
}
|
|
if (item.status === "gone") {
|
|
detailRows.push(
|
|
["Date gone", fmt.date(item.goneDate)],
|
|
[
|
|
"After",
|
|
`${Math.round((+new Date(item.goneDate!) - +new Date(item.purchaseDate)) / 86_400_000)} days`,
|
|
],
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
background: "oklch(20% 0.02 60 / 0.4)",
|
|
zIndex: 50,
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
}}
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
onClick={(e) => e.stopPropagation()}
|
|
style={{
|
|
width: "min(720px, 100vw)",
|
|
height: "100%",
|
|
background: "var(--bg)",
|
|
borderLeft: "1px solid var(--line)",
|
|
overflow: "auto",
|
|
boxShadow: "var(--shadow-lg)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "20px 32px",
|
|
borderBottom: "1px solid var(--line)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
position: "sticky",
|
|
top: 0,
|
|
background: "var(--bg)",
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
|
|
Inventory · <span className="mono">{item.assetId}</span>
|
|
</div>
|
|
<div style={{ display: "flex", gap: 6 }}>
|
|
{isActive && (
|
|
<Btn variant="ghost" icon="check" onClick={() => onAudit(item)}>
|
|
Audit
|
|
</Btn>
|
|
)}
|
|
{isActive && (
|
|
<Btn variant="secondary" icon="check" onClick={() => onConsume(item)}>
|
|
Mark consumed
|
|
</Btn>
|
|
)}
|
|
{isActive && (
|
|
<Btn variant="ghost" icon="bin" onClick={() => onMarkGone(item)}>
|
|
Mark gone
|
|
</Btn>
|
|
)}
|
|
<Btn variant="ghost" icon="edit" onClick={() => onEdit(item)}>
|
|
Edit
|
|
</Btn>
|
|
<Btn variant="ghost" icon="close" onClick={onClose} />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ padding: "32px 32px 60px" }}>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 8 }}>
|
|
<div className="serif" style={{ fontSize: 18, color: "var(--ink-3)" }}>
|
|
{TYPE_GLYPHS[item.type]} {item.type}
|
|
</div>
|
|
{item.status === "consumed" && (
|
|
<Pill tone="terra">Consumed · {fmt.daysAgo(item.consumedDate)}</Pill>
|
|
)}
|
|
{item.status === "gone" && (
|
|
<Pill tone="amber">Gone · {fmt.daysAgo(item.goneDate)}</Pill>
|
|
)}
|
|
{isActive && overdue && <Pill tone="amber">Audit overdue · {sinceCheck}d</Pill>}
|
|
</div>
|
|
<h1
|
|
className="serif"
|
|
style={{
|
|
fontSize: 48,
|
|
margin: "0 0 4px",
|
|
fontWeight: 500,
|
|
letterSpacing: "-0.02em",
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</h1>
|
|
<div style={{ fontSize: 16, color: "var(--ink-2)" }}>
|
|
{helpers.brandName(data, item.brandId)} · from {helpers.shopName(data, item.shopId)}
|
|
</div>
|
|
{product && (
|
|
<div style={{ marginTop: 8 }}>
|
|
<button
|
|
onClick={() => onEditProduct(product)}
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
fontSize: 12,
|
|
color: "var(--ink-3)",
|
|
cursor: "pointer",
|
|
textDecoration: "underline",
|
|
padding: 0,
|
|
}}
|
|
>
|
|
Edit product (catalog)
|
|
</button>
|
|
{siblings.length > 0 && (
|
|
<span style={{ fontSize: 12, color: "var(--ink-3)", marginLeft: 12 }}>
|
|
· {siblings.length} other instance{siblings.length === 1 ? "" : "s"} on file
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(4, 1fr)",
|
|
gap: 1,
|
|
marginTop: 32,
|
|
background: "var(--line)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-md)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{(
|
|
[
|
|
[
|
|
"Price",
|
|
item.kind === "discrete" && item.countOriginal > 0 ? (
|
|
<>
|
|
{fmt.money(item.price / item.countOriginal)}
|
|
<span style={{ fontSize: 14, color: "var(--ink-3)", marginLeft: 4 }}>
|
|
/unit
|
|
</span>
|
|
<div
|
|
style={{
|
|
fontSize: 11,
|
|
color: "var(--ink-3)",
|
|
fontWeight: 400,
|
|
marginTop: 2,
|
|
fontFamily: "var(--mono)",
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{fmt.money(item.price)} total
|
|
</div>
|
|
</>
|
|
) : (
|
|
fmt.money(item.price)
|
|
),
|
|
],
|
|
[
|
|
item.kind === "discrete" ? "Quantity" : "Size",
|
|
item.kind === "discrete"
|
|
? `${item.countOriginal} ${cfg?.unit ?? "ct"}`
|
|
: `${item.weight} ${cfg?.unit ?? "g"}`,
|
|
],
|
|
["THC", `${item.thc.toFixed(1)}%`],
|
|
["CBD", `${item.cbd.toFixed(1)}%`],
|
|
] as [string, React.ReactNode][]
|
|
).map(([l, v], i) => (
|
|
<div key={i} style={{ padding: "18px 16px", background: "var(--surface)" }}>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>{l}</div>
|
|
<div className="serif" style={{ fontSize: 26, marginTop: 4, fontWeight: 500 }}>{v}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{isActive && (
|
|
<div style={{ marginTop: 20 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "baseline",
|
|
marginBottom: 8,
|
|
}}
|
|
>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
|
|
{item.kind === "discrete" ? "Units remaining" : "Estimated remaining"}
|
|
</div>
|
|
<div style={{ fontFamily: "var(--mono)", fontSize: 13 }}>
|
|
{item.kind === "discrete"
|
|
? `${item.countLastAudit ?? item.countOriginal} of ${item.countOriginal}`
|
|
: `${est.toFixed(2)} of ${item.weight} ${cfg?.unit ?? "g"}`}
|
|
<span style={{ color: "var(--ink-3)", marginLeft: 8 }}>
|
|
{Math.round(pctRemaining * 100)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style={{ height: 8, background: "var(--bg-3)", borderRadius: 4, overflow: "hidden" }}>
|
|
<div
|
|
style={{
|
|
width: `${pctRemaining * 100}%`,
|
|
height: "100%",
|
|
background:
|
|
pctRemaining < 0.25
|
|
? "var(--terracotta)"
|
|
: pctRemaining < 0.5
|
|
? "var(--amber)"
|
|
: "var(--sage)",
|
|
}}
|
|
/>
|
|
</div>
|
|
{item.kind === "bulk" && last && (
|
|
<div
|
|
style={{
|
|
fontSize: 11,
|
|
color: "var(--ink-3)",
|
|
marginTop: 6,
|
|
fontStyle: "italic",
|
|
}}
|
|
>
|
|
Estimated by linear decay since last {last.mode} on {fmt.dateShort(last.date)} ({last.value}
|
|
{cfg?.unit}). Re-audit to update.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ marginTop: 36 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "baseline",
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>Audit history</div>
|
|
{isActive && (
|
|
<button
|
|
onClick={() => onAudit(item)}
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
fontSize: 12,
|
|
color: "var(--ink-2)",
|
|
cursor: "pointer",
|
|
textDecoration: "underline",
|
|
}}
|
|
>
|
|
+ New audit
|
|
</button>
|
|
)}
|
|
</div>
|
|
{item.audits.length === 0 ? (
|
|
<div style={{ fontSize: 13, color: "var(--ink-3)", fontStyle: "italic", padding: "12px 0" }}>
|
|
No audits recorded. Cadence for {item.type}: every {cfg?.cadenceDays ?? "—"} days.
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 0,
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-md)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{[...item.audits].reverse().map((a, idx, arr) => (
|
|
<div
|
|
key={idx}
|
|
style={{
|
|
padding: "12px 16px",
|
|
borderBottom: idx < arr.length - 1 ? "1px solid var(--line)" : "none",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
background: "var(--surface)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: "50%",
|
|
background:
|
|
a.mode === "weigh"
|
|
? "var(--sage)"
|
|
: a.mode === "estimate"
|
|
? "var(--amber)"
|
|
: "var(--plum)",
|
|
}}
|
|
/>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ fontSize: 13, fontWeight: 500 }}>
|
|
{a.mode === "weigh" && "Weighed"}
|
|
{a.mode === "estimate" && "Estimated"}
|
|
{a.mode === "presence" && (a.confirmedBy === "lost" ? "Marked lost" : "Confirmed presence")}
|
|
</div>
|
|
<div style={{ fontSize: 11, color: "var(--ink-3)" }}>
|
|
{fmt.date(a.date)} · {fmt.daysAgo(a.date)}
|
|
</div>
|
|
</div>
|
|
<div className="mono" style={{ fontSize: 13, textAlign: "right" }}>
|
|
<div>
|
|
{a.value} {cfg?.unit}
|
|
</div>
|
|
<div style={{ fontSize: 10, color: "var(--ink-3)" }}>
|
|
was {a.prev} {cfg?.unit}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ marginTop: 36 }}>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)", marginBottom: 12 }}>Details</div>
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 32px" }}>
|
|
{detailRows.map(([l, v], i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
paddingBottom: 12,
|
|
borderBottom: "1px solid var(--line)",
|
|
}}
|
|
>
|
|
<span style={{ color: "var(--ink-3)", fontSize: 12 }}>{l}</span>
|
|
<span style={{ fontSize: 13, fontWeight: 500, textAlign: "right" }}>{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{(item.status === "consumed" || item.status === "gone") && (
|
|
<div
|
|
style={{
|
|
marginTop: 36,
|
|
padding: 24,
|
|
background: "var(--bg-2)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-md)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "baseline",
|
|
justifyContent: "space-between",
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
|
|
{item.status === "gone" ? "Why it's gone" : "Final notes"}
|
|
</div>
|
|
{item.status === "consumed" && (
|
|
<div style={{ display: "flex", gap: 2 }}>
|
|
{[1, 2, 3, 4, 5].map((n) => (
|
|
<Icon
|
|
key={n}
|
|
name="star"
|
|
size={14}
|
|
color={n <= (item.rating ?? 0) ? "var(--amber)" : "var(--ink-4)"}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="serif"
|
|
style={{ fontSize: 18, lineHeight: 1.5, color: "var(--ink-2)", fontStyle: "italic" }}
|
|
>
|
|
"{item.notes ?? "No notes recorded."}"
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|