255 lines
8.6 KiB
TypeScript
255 lines
8.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import type { Bootstrap, Product } from "../../types.js";
|
|
import { TYPES, helpers, TODAY_STR } from "../../types.js";
|
|
import { api } from "../../api.js";
|
|
import { Btn, Field, Input, Select } from "../primitives/index.js";
|
|
import { ScanField } from "../ScanField.js";
|
|
import { ModalBackdrop, ModalHeader, ModalFooter } from "./AddProductFlow.js";
|
|
|
|
const AUDIT_MODE_LABELS: Record<string, { title: string; desc: string }> = {
|
|
weigh: {
|
|
title: "Reweigh on a scale",
|
|
desc: "Place the jar (minus tare) and record the new weight.",
|
|
},
|
|
estimate: {
|
|
title: "Visual estimate",
|
|
desc: "Eyeball the remaining amount — quick and approximate.",
|
|
},
|
|
presence: {
|
|
title: "Confirm presence",
|
|
desc: "Verify the item is still where you left it. Count units if applicable.",
|
|
},
|
|
};
|
|
|
|
export function AuditFlow({
|
|
data,
|
|
onClose,
|
|
product: initialProduct,
|
|
}: {
|
|
data: Bootstrap;
|
|
onClose: () => void;
|
|
product: Product | null;
|
|
}) {
|
|
const qc = useQueryClient();
|
|
const overdueFirst = [...data.products]
|
|
.filter((p) => p.status === "active")
|
|
.sort((a, b) => helpers.daysSinceCheck(b) - helpers.daysSinceCheck(a));
|
|
|
|
const [productId, setProductId] = useState(initialProduct?.id ?? overdueFirst[0]?.id ?? "");
|
|
const [date, setDate] = useState(TODAY_STR);
|
|
const [confirmedBy, setConfirmedBy] = useState<"SKU" | "asset" | "visual">("SKU");
|
|
|
|
const product = data.products.find((p) => p.id === productId);
|
|
const cfg = product ? TYPES.find((t) => t.id === product.type) : undefined;
|
|
|
|
const initialValueFor = (p: Product | undefined): string => {
|
|
if (!p) return "0";
|
|
if (p.kind === "discrete") {
|
|
return String(p.countLastAudit ?? p.countOriginal);
|
|
}
|
|
return helpers.estimatedRemaining(p, TODAY_STR).toFixed(2);
|
|
};
|
|
const [value, setValue] = useState<string>(initialValueFor(product));
|
|
|
|
useEffect(() => {
|
|
setValue(initialValueFor(product));
|
|
}, [productId]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const audit = useMutation({
|
|
mutationFn: () =>
|
|
api.auditProduct(productId, {
|
|
date,
|
|
mode: cfg?.auditMode ?? "weigh",
|
|
value: Number(value),
|
|
confirmedBy: cfg?.auditMode === "presence" ? confirmedBy : undefined,
|
|
}),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ["bootstrap"] });
|
|
onClose();
|
|
},
|
|
});
|
|
|
|
if (!product) return null;
|
|
const auditMode = cfg?.auditMode ?? "weigh";
|
|
const ml = AUDIT_MODE_LABELS[auditMode] ?? AUDIT_MODE_LABELS.weigh!;
|
|
|
|
const last = helpers.lastAudit(product);
|
|
const prevValue =
|
|
product.kind === "discrete"
|
|
? product.countLastAudit ?? product.countOriginal
|
|
: last
|
|
? last.value
|
|
: product.weight;
|
|
|
|
const delta = Number(value) - prevValue;
|
|
|
|
return (
|
|
<ModalBackdrop onClose={onClose}>
|
|
<div
|
|
style={{
|
|
width: "min(720px, 96vw)",
|
|
margin: "40px 20px",
|
|
background: "var(--bg)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-lg)",
|
|
boxShadow: "var(--shadow-lg)",
|
|
}}
|
|
>
|
|
<ModalHeader title={ml.title} eyebrow="Audit" onClose={onClose} />
|
|
|
|
<div style={{ padding: 32 }}>
|
|
<ScanField
|
|
products={overdueFirst}
|
|
matchedProduct={product ?? null}
|
|
onMatch={setProductId}
|
|
/>
|
|
|
|
<div style={{ marginTop: 16 }}>
|
|
<Field label="Or pick from list">
|
|
<Select value={productId} onChange={(e) => setProductId(e.target.value)}>
|
|
{overdueFirst.map((p) => {
|
|
const od = helpers.auditOverdue(p);
|
|
const sc = helpers.daysSinceCheck(p);
|
|
return (
|
|
<option key={p.id} value={p.id}>
|
|
{od ? "⚠ " : ""}
|
|
{p.name} — {helpers.brandName(data, p.brandId)} · {sc}d since check
|
|
</option>
|
|
);
|
|
})}
|
|
</Select>
|
|
</Field>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
marginTop: 16,
|
|
padding: 16,
|
|
background: "var(--bg-2)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-md)",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<div>
|
|
<div className="serif" style={{ fontSize: 20, fontWeight: 500 }}>
|
|
{product.name}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: "var(--ink-3)" }}>
|
|
{product.type} · {product.kind} · cadence every {cfg?.cadenceDays}d
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: "right" }}>
|
|
<div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>LAST CHECKED</div>
|
|
<div className="serif" style={{ fontSize: 18 }}>
|
|
{last ? `${helpers.daysSinceCheck(product)}d ago` : "Never"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 10, fontStyle: "italic" }}>
|
|
{ml.desc}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: auditMode === "presence" ? "1fr 1fr 1fr" : "1fr 1fr",
|
|
gap: 16,
|
|
marginTop: 24,
|
|
}}
|
|
>
|
|
<Field
|
|
label={
|
|
product.kind === "discrete"
|
|
? `Count now (${cfg?.unit})`
|
|
: auditMode === "weigh"
|
|
? `Weight now (${cfg?.unit})`
|
|
: `Estimate now (${cfg?.unit})`
|
|
}
|
|
>
|
|
<Input
|
|
type="number"
|
|
step={product.kind === "discrete" ? "1" : "0.1"}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Date">
|
|
<Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
|
|
</Field>
|
|
{auditMode === "presence" && (
|
|
<Field label="Confirmed by">
|
|
<Select
|
|
value={confirmedBy}
|
|
onChange={(e) => setConfirmedBy(e.target.value as typeof confirmedBy)}
|
|
>
|
|
<option value="SKU">SKU label</option>
|
|
<option value="asset">Asset tag</option>
|
|
<option value="visual">Visual ID</option>
|
|
</Select>
|
|
</Field>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
marginTop: 20,
|
|
padding: 14,
|
|
background: "var(--surface)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-md)",
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr 1fr",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
<div>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>Was</div>
|
|
<div className="serif" style={{ fontSize: 22 }}>
|
|
{prevValue} {cfg?.unit}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>Now</div>
|
|
<div className="serif" style={{ fontSize: 22, color: "var(--sage)" }}>
|
|
{value} {cfg?.unit}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>Δ since last</div>
|
|
<div
|
|
className="serif"
|
|
style={{
|
|
fontSize: 22,
|
|
color: delta < 0 ? "var(--terracotta)" : "var(--ink)",
|
|
}}
|
|
>
|
|
{delta.toFixed(product.kind === "discrete" ? 0 : 2)} {cfg?.unit}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ModalFooter>
|
|
<div style={{ fontSize: 12, color: "var(--ink-3)" }}>
|
|
Next audit due in {cfg?.cadenceDays}d
|
|
</div>
|
|
<div style={{ display: "flex", gap: 8 }}>
|
|
<Btn variant="ghost" onClick={onClose}>Cancel</Btn>
|
|
<Btn
|
|
variant="primary"
|
|
icon="check"
|
|
disabled={audit.isPending}
|
|
onClick={() => audit.mutate()}
|
|
>
|
|
{audit.isPending ? "Saving…" : "Save audit"}
|
|
</Btn>
|
|
</div>
|
|
</ModalFooter>
|
|
</div>
|
|
</ModalBackdrop>
|
|
);
|
|
}
|