// ── Settlement Analytics — KPI Drill Popups ─────────────────────────────────
// Every KPI tile / chart element in Vendor & Transport Settlement Analytics
// opens one of these instead of scrolling to the ledger. Content is 100%
// derived from window.SettlementIntel + live Store data passed in via `ctx`
// (see buildSECtx in vendor-settlement-analytics.jsx / transport-*). No
// hardcoded numbers. Reuses window.DashBTable/DashKPIs (dashboard-drilldown.jsx)
// for tabular breakdowns so styling matches the rest of the ERP.
const { useState: skSt, useEffect: skEf } = React;
// ── Ripple micro-interaction — attach via onMouseDown={window.seRipple} ────
window.seRipple = function (e) {
const el = e.currentTarget;
// Buttons / toggle-segmented controls / action chips must have a pixel-stable
// footprint on press — no scaling ripple bloom (reads as an expand/contract
// "pop"). They get a pure opacity/background dip via their :active CSS instead.
// The bloom is kept only on large surfaces (rows, cards, chart bars/slices).
if (el.matches && el.matches('.se-timechip,.se-graintab,.se-statuschip,.se-legenditem,.se-exportbtn,.se-execchip,button')) return;
const rect = el.getBoundingClientRect();
if (rect.width < 2 || rect.height < 2) return;
// Pointer position — resolved identically for mouse and touch. Touch events
// carry coordinates on `touches`/`changedTouches`; a mouse event carries them
// on the event itself. Fall back to the element centre for keyboard/synthetic
// activation that has no pointer position.
const pt = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e;
const hasPos = typeof pt.clientX === 'number';
const cx = hasPos ? pt.clientX : rect.left + rect.width / 2;
const cy = hasPos ? pt.clientY : rect.top + rect.height / 2;
// The ripple is an absolutely-positioned child, so its offsets are only
// correct when the clicked element is itself the positioned containing block
// AND clips its overflow. KPI tiles (.se-kpi) aren't relative/clipped by
// default, which is what made the ripple anchor to a distant ancestor and
// bloom from a corner / spill outside the card. Promote the element in place
// (only if it isn't already) so the ripple always originates from the exact
// click/tap point and stays contained.
const cs = getComputedStyle(el);
if (cs.position === 'static') el.style.position = 'relative';
if (cs.overflow !== 'hidden') el.style.overflow = 'hidden';
const span = document.createElement('span');
const size = Math.max(rect.width, rect.height) * 1.6;
span.className = 'se-ripple';
span.style.width = span.style.height = size + 'px';
span.style.left = (cx - rect.left - size / 2) + 'px';
span.style.top = (cy - rect.top - size / 2) + 'px';
el.appendChild(span);
setTimeout(() => span.remove(), 520);
};
// ── Glass popup shell — Apple-style: blur backdrop, scale+fade in, ESC /
// outside-click close, mobile responsive (see CSS in settlement-performance-center.jsx).
function SEKpiPopup({ title, subtitle, icon, accent, onClose, onExport, onPrint, children, wide }) {
const [show, setShow] = skSt(false);
skEf(() => {
const t = setTimeout(() => setShow(true), 10);
function onKey(e) { if (e.key === 'Escape') onClose(); }
window.addEventListener('keydown', onKey);
return () => { clearTimeout(t); window.removeEventListener('keydown', onKey); };
// eslint-disable-next-line
}, []);
return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
{title}
{subtitle &&
{subtitle}
}
{onExport && }
{onPrint && }
{children}
,
document.body
);
}
window.SEKpiPopup = SEKpiPopup;
// ── Small building blocks reused across every popup ─────────────────────────
function PopStats({ items }) {
return (
{items.map((it, i) => (
{it.label}
{it.value}
{it.sub &&
{it.sub}
}
))}
);
}
function PopSection({ title, right, children }) {
return
{title}{right}
{children}
;
}
function PopBars({ rows, C, accent, onClick }) {
if (!rows || !rows.length) return
No records.
;
const max = Math.max(1, ...rows.map(r => r.value));
return (