// price-history.jsx — cross-job material price tracking.
//
// Aggregates every priced line item across ALL jobs/invoices in the shared
// `jobs` collection and groups them by vendor + material identity (the same
// identity the matcher uses: real SKU, else the synonym-normalized description).
// The estimator can search a material — e.g. "1-1/8 ACR" from Porter — and see
// every invoice that material appeared on and what was charged each time, with
// the price trend over time. Pure read/aggregation; no new persistence.
// Unit prices carry more precision than the 2-decimal money formatter (a
// contract unit can be $10.3205), so show 2–4 decimals as needed.
const fmtUnit = (n) => {
if (n == null || !isFinite(n)) return '—';
const dp = Math.abs(n) < 100 && Math.round(n * 100) !== n * 100 ? 4 : 2;
return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: dp });
};
const PH_SORTS = [
{ key: 'recent', label: 'Most recent' },
{ key: 'count', label: 'Most purchased' },
{ key: 'swing', label: 'Biggest price change' },
{ key: 'name', label: 'Name (A–Z)' },
];
// Material list comparators — static, so they live at module scope (a stable
// reference per render keeps memoized children honest).
const PH_CMP = {
recent: (a, b) => (b.lastDate || '').localeCompare(a.lastDate || ''),
count: (a, b) => b.count - a.count,
swing: (a, b) => Math.abs(b.trendPct) - Math.abs(a.trendPct),
name: (a, b) => (a.desc || '').localeCompare(b.desc || ''),
};
// Pretty invoice date ("Mar 5, 2026"); falls back to the raw string.
const phFmtDate = (d) => {
if (!d) return '—';
const dt = new Date(d + 'T00:00:00');
return isNaN(dt) ? d : dt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
};
// Stable material identity within a vendor — mirrors the matcher's itemKeyOf:
// a real vendor SKU is the strongest signal, otherwise the synonym-normalized
// description (so "alum tape" and "aluminum tape" track as one material).
// Canonical vendor key so the same supplier written differently collapses into
// one: case-insensitive; punctuation/symbols (& / . , - etc.) dropped; connector
// words (and/the) and trailing legal/entity suffixes (Inc, LLC, Co, Corp, Ltd, …)
// stripped. So "Porter Pipe & Supply, Inc." / "PORTER PIPE AND SUPPLY" /
// "porter pipe/supply" all map to one vendor. (Display name chosen in groupMaterials.)
const VENDOR_NOISE_RE = /\b(inc|incorporated|llc|llp|lp|co|corp|corporation|company|ltd|limited|plc|and|the)\b/g;
// Branch / location qualifier ("/Chicago Branch", "Chicago Branch", "West Division").
const VENDOR_BRANCH_RE = /\b([a-z]+\s+)?(branch|warehouse|division|dept|department|location)\b/g;
const canonicalVendor = (v) => {
let s = (v || '').toLowerCase();
s = s.replace(/[&._,'"()/\\\-]+/g, ' '); // symbols (incl. &, /) → space
s = s.replace(VENDOR_BRANCH_RE, ' '); // drop branch/location designations
s = s.replace(VENDOR_NOISE_RE, ' '); // connectors + legal suffixes
return s.replace(/\s+/g, ' ').trim() || 'unknown vendor';
};
const materialKey = (vendor, sku, desc) => {
const id = (sku && !isAutoSku(sku))
? `sku:${sku.toLowerCase()}`
: `desc:${matchNormalize(desc)}`;
return `${canonicalVendor(vendor)}::${id}`;
};
// Flatten jobs → invoices → priced line items into individual purchase records.
function buildPurchaseRecords(jobs) {
const records = [];
let uid = 0;
for (const job of jobs || []) {
const jobVendor = job.quote?.vendor || '';
for (const inv of (job.invoices || [])) {
if (inv._hidden) continue;
const vendor = inv.vendor || jobVendor || 'Unknown vendor';
for (const it of (inv.items || [])) {
const qty = +it.qty || 0;
// Trust the printed unit; fall back to amount ÷ qty when only a line
// total is present. Skip lines with no usable price (fees, $0 rows).
const unit = it.unit > 0
? it.unit
: (qty > 0 && it.amount > 0 ? +(it.amount / qty).toFixed(4) : 0);
if (!(unit > 0)) continue;
records.push({
_uid: ++uid,
vendor,
sku: it.sku || '',
desc: it.desc || '',
uom: normalizeUOM(it.uom) || '',
qty,
unit,
amount: it.amount > 0 ? +it.amount : +(qty * unit).toFixed(2),
date: inv.date || '',
invoiceId: inv.id || '',
jobId: job.id,
jobNumber: job.jobNumber || '',
jobName: job.name || job.jobName || '',
});
}
}
}
return records;
}
// Group purchase records into materials with price stats and a date-sorted
// purchase history.
function groupMaterials(records) {
// One clean display name per canonical vendor: the most common raw spelling
// (tie-break: the longer, more complete one). Keeps every grouped material's
// vendor label identical so the filter dropdown also dedupes.
const vendorNames = new Map(); // canonical -> Map(raw spelling -> count)
for (const r of records) {
const cv = canonicalVendor(r.vendor);
let names = vendorNames.get(cv);
if (!names) { names = new Map(); vendorNames.set(cv, names); }
names.set(r.vendor, (names.get(r.vendor) || 0) + 1);
}
const vendorDisplay = new Map();
for (const [cv, names] of vendorNames) {
// Most common spelling; tie-break to the SHORTER (less branch/suffix noise).
let best = null, bestN = -1;
for (const [name, n] of names) {
if (best === null || n > bestN || (n === bestN && name.length < best.length)) { best = name; bestN = n; }
}
// Standardized label: one all-caps name per vendor (dropdown + list + detail).
vendorDisplay.set(cv, (best || '').toUpperCase());
}
const map = new Map();
for (const r of records) {
const k = materialKey(r.vendor, r.sku, r.desc);
let g = map.get(k);
if (!g) {
g = { key: k, vendor: vendorDisplay.get(canonicalVendor(r.vendor)) || r.vendor, sku: '', desc: '', records: [] };
map.set(k, g);
}
g.records.push(r);
// Representative SKU = first real one; representative desc = the longest
// seen (usually the most complete vendor wording).
if (r.sku && !isAutoSku(r.sku) && (!g.sku || isAutoSku(g.sku))) g.sku = r.sku;
if ((r.desc || '').length > (g.desc || '').length) g.desc = r.desc;
}
const out = [];
for (const g of map.values()) {
g.records.sort((a, b) => (a.date || '').localeCompare(b.date || ''));
const units = g.records.map((r) => r.unit);
const first = g.records[0];
const latest = g.records[g.records.length - 1];
g.count = g.records.length;
g.min = Math.min(...units);
g.max = Math.max(...units);
g.avg = +(units.reduce((s, u) => s + u, 0) / units.length).toFixed(4);
g.first = first;
g.latest = latest;
g.lastDate = latest.date || '';
// Trend = first → latest price change (positive = getting more expensive).
g.trendPct = first.unit > 0 ? +(((latest.unit - first.unit) / first.unit) * 100).toFixed(1) : 0;
out.push(g);
}
return out;
}
// Responsive area chart of unit price over time (oldest → newest) for the
// detail view. Stretches to its container width; stroke stays crisp via
// non-scaling-stroke. Single price (1 point) renders a flat reference line.
function PriceChart({ records }) {
if (!records || records.length === 0) return null;
const W = 600, H = 130, padX = 6, padY = 16;
const units = records.map((r) => r.unit);
const min = Math.min(...units), max = Math.max(...units), span = max - min || 1;
const n = records.length;
const step = n > 1 ? (W - padX * 2) / (n - 1) : 0;
const xy = (r, i) => [
padX + (n > 1 ? i * step : (W - padX * 2) / 2),
H - padY - ((r.unit - min) / span) * (H - padY * 2),
];
const pts = records.map(xy);
const line = pts.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
const up = units[n - 1] >= units[0];
const col = up ? 'var(--bad)' : 'var(--ok)';
const area = `${pts[0][0].toFixed(1)},${H - padY} ${line} ${pts[n - 1][0].toFixed(1)},${H - padY}`;
return (
);
}
function TrendBadge({ pct }) {
if (pct === 0) return no change;
const up = pct > 0;
return (
{up ? '▲' : '▼'} {Math.abs(pct)}%
);
}
// Compact inline sparkline for list rows and mover cards.
function MiniSpark({ records, w = 76, h = 22 }) {
if (!records || records.length < 2) return —;
const units = records.map((r) => r.unit);
const min = Math.min(...units), max = Math.max(...units), span = max - min || 1;
const pad = 2, step = (w - pad * 2) / (records.length - 1);
const pts = records.map((r, i) =>
`${(pad + i * step).toFixed(1)},${(h - pad - ((r.unit - min) / span) * (h - pad * 2)).toFixed(1)}`
).join(' ');
const up = units[units.length - 1] >= units[0];
return (
);
}
// Compact money for KPI tiles ($1.2M / $12.3k / $940).
const fmtMoneyShort = (n) => {
const a = Math.abs(n || 0);
if (a >= 1e6) return '$' + (n / 1e6).toFixed(1) + 'M';
if (a >= 1e3) return '$' + (n / 1e3).toFixed(1) + 'k';
return '$' + Math.round(n || 0);
};
// Detail: every invoice this material appeared on, oldest → newest, with the
// change vs. the previous purchase so price creep is obvious.
function MaterialDetail({ material, onBack }) {
const rows = material.records;
const uom = material.latest.uom ? `/${material.latest.uom}` : '';
return (
{/* Hero: identity on the left, current price + trend on the right */}