// hydor-page-analytics.jsx — deep analytics: ABC/Pareto, dead stock, group-by explorer, compare.
function AnalyticsPage({ onDrill }) {
const s = useHydor();
const d = useDerive();
const [tab, setTab] = React.useState("pareto");
return (
{[["pareto", "ABC / Pareto"], ["groupby", "Group-by explorer"], ["compare", "Compare periods"], ["dead", "Dead stock"]].map(([k, l]) => (
))}
{tab === "pareto" &&
}
{tab === "groupby" &&
}
{tab === "compare" &&
}
{tab === "dead" &&
}
);
}
/* ---------- ABC / Pareto ---------- */
function ParetoView({ s, d, onDrill }) {
const rows = s.products.map((p) => ({ p, st: d.productStats[p.id] }))
.filter((r) => r.st.profit > 0).sort((a, b) => b.st.profit - a.st.profit);
if (!rows.length) return Record some sales to see which products drive your profit.
;
const totalProfit = rows.reduce((a, r) => a + r.st.profit, 0);
let cum = 0;
const withCum = rows.map((r) => { cum += r.st.profit; return { ...r, cumPct: cum / totalProfit }; });
const counts = { A: 0, B: 0, C: 0 };
rows.forEach((r) => counts[r.st.abc] != null && counts[r.st.abc]++);
return (
Class A
{counts.A}
top ~80% of profit
Class B
{counts.B}
next ~15%
Class C
{counts.C}
tail ~5%
Profit concentration
Which products generate the most profit — your vital few vs. trivial many. Click any row to drill in.
| # | Product | Class | Profit | Share | Cumulative | Contribution |
|---|
{withCum.map((r, i) => (
onDrill({ type: "product", id: r.p.id })}>
| {i + 1} |
{r.p.code} {r.p.name} |
{r.st.abc} |
{Hydor.fmtMoney0(r.st.profit)} |
{Hydor.fmtPct(r.st.profit / totalProfit)} |
{Hydor.fmtPct(r.cumPct)} |
|
))}
);
}
/* ---------- Group-by explorer (pivot) ---------- */
function GroupByView({ s, d }) {
const [dim, setDim] = React.useState("product");
const [metric, setMetric] = React.useState("profit");
const sales = s.transactions.filter((t) => !t.deleted && t.type === "sale");
const pname = (id) => { const p = s.products.find((x) => x.id === id); return p ? p.code + " · " + p.name : "—"; };
const partyName = (id) => { const p = s.parties.find((x) => x.id === id); return p ? p.name : "(no customer)"; };
const keyOf = (t) => {
if (dim === "product") return pname(t.productId);
if (dim === "employee") return t.employee ? "Employee " + t.employee : "(unassigned)";
if (dim === "customer") return partyName(t.partyId);
if (dim === "month") return new Date(t.date).toLocaleDateString("en-GB", { month: "short", year: "numeric" });
if (dim === "quarter") return Hydor.qKey(t.date);
return "—";
};
const groups = {};
sales.forEach((t) => {
const c = d.txc[t.id] || {}; const k = keyOf(t);
const g = groups[k] || (groups[k] = { key: k, sales: 0, profit: 0, qty: 0, txns: 0 });
g.sales += c.subtotal || 0; g.profit += c.profit || 0; g.qty += t.qty; g.txns += 1;
});
const metricKey = { sales: "sales", profit: "profit", units: "qty", orders: "txns" }[metric];
const arr = Object.values(groups).sort((a, b) => b[metricKey] - a[metricKey]);
const max = arr.length ? arr[0][metricKey] : 1;
const fmtM = (v) => metric === "units" || metric === "orders" ? Hydor.fmtQty(v) : Hydor.fmtMoney0(v);
return (
Slice your sales by any dimension and measure. Pick what to group by, then what to measure — like a built-in pivot table.
Group by
{[["product", "Product"], ["employee", "Employee"], ["customer", "Customer"], ["month", "Month"], ["quarter", "Quarter"]].map(([k, l]) =>
)}
Measure
{arr.length === 0 ?
Record sales to slice them by any dimension. : (
| {dim[0].toUpperCase() + dim.slice(1)} | Sales | Profit | Units | Orders | {metric} |
|---|
{arr.map((g) => (
| {g.key} |
{Hydor.fmtMoney0(g.sales)} |
{Hydor.fmtMoney0(g.profit)} |
{Hydor.fmtQty(g.qty)} |
{g.txns} |
|
))}
)}
);
}
/* ---------- Compare periods ---------- */
function CompareView({ s, d }) {
const keys = d.quarterKeys.filter((k) => { const q = d.quarters[k]; return q.sales || q.costs; });
const [a, setA] = React.useState("");
const [b, setB] = React.useState("");
React.useEffect(() => { if (keys.length && !a) { setA(keys[keys.length - 2] || keys[0]); setB(keys[keys.length - 1]); } }, [keys.length]);
if (keys.length < 1) return Record transactions across at least one quarter to compare.
;
const qa = d.quarters[a] || {}, qb = d.quarters[b] || {};
const rows = [["Sales", "sales"], ["COGS", "cogs"], ["Gross profit", "gp"], ["Fixed costs", "fixed"], ["Operational", "op"], ["Net profit", "net"], ["Units sold", "units"], ["Transactions", "txns"]];
const delta = (x, y) => y === 0 ? (x > 0 ? 100 : 0) : ((x - y) / Math.abs(y)) * 100;
return (
| Metric | {a} | {b} | Change | |
|---|
{rows.map(([label, key]) => {
const va = qa[key] || 0, vb = qb[key] || 0; const dl = delta(vb, va);
const isMoney = !["units", "txns"].includes(key);
return (
| {label} |
{isMoney ? Hydor.fmtMoney0(va) : Hydor.fmtQty(va)} |
{isMoney ? Hydor.fmtMoney0(vb) : Hydor.fmtQty(vb)} |
= 0 ? "hx-pos" : "hx-neg"}>{dl >= 0 ? "+" : ""}{dl.toFixed(1)}% |
= 0 ? "over" : "under")} style={{ width: Math.min(Math.abs(dl) / 100 * 50 + 50, 100) + "%", marginLeft: dl < 0 ? "auto" : 0 }} /> |
);
})}
);
}
/* ---------- Dead stock ---------- */
function DeadStockView({ s, d, onDrill }) {
const dead = s.products.map((p) => ({ p, st: d.productStats[p.id] })).filter((r) => r.st.dead);
const slow = s.products.map((p) => ({ p, st: d.productStats[p.id] })).filter((r) => !r.st.dead && r.st.remaining > 0 && r.st.daysCover != null && r.st.daysCover > 120);
const tied = dead.reduce((a, r) => a + r.st.invValue, 0);
return (
Dead SKUs
{dead.length}
no sale in {s.meta.deadStockDays}+ days
Capital tied up
{Hydor.fmtMoney0(tied)}
JOD in dead stock
{dead.length === 0 ?
Everything with inventory has sold recently. Healthy turnover. : (
| Product | On hand | Inv. value | Last sold | Status |
|---|
{dead.map((r) => (
onDrill({ type: "product", id: r.p.id })}>
| {r.p.code} {r.p.name} |
{Hydor.fmtQty(r.st.remaining)} |
{Hydor.fmtMoney0(r.st.invValue)} |
{r.st.lastSold ? Hydor.fmtDate(r.st.lastSold) : "never"} |
{r.st.daysSinceSale == null ? "never sold" : r.st.daysSinceSale + "d idle"} |
))}
)}
{slow.length > 0 && (
Slow movers
Selling, but more than 4 months of cover on hand at current pace.
| Product | On hand | Days cover | 30-day velocity |
|---|
{slow.map((r) => (
| {r.p.code} {r.p.name} |
{Hydor.fmtQty(r.st.remaining)} |
{Math.round(r.st.daysCover)}d |
{r.st.velocity.toFixed(1)} units |
))}
)}
);
}
Object.assign(window, { AnalyticsPage });