// LeaveTrackerLite — shared components
const { useState, useRef, useEffect } = React;
/* ───────────────────────── Tooltip ───────────────────────── */
/* Rendered in a portal at document.body so overflow:hidden containers never clip it. */
function Tooltip({ label, children, side = "top" }) {
const [pos, setPos] = useState(null);
const ref = useRef(null);
function show() {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
setPos({ x: r.left + r.width / 2, y: side === "top" ? r.top : r.bottom });
}
return (
setPos(null)}>
{children}
{pos && ReactDOM.createPortal(
{label},
document.body
)}
);
}
/* ───────────────────────── Avatar ───────────────────────── */
const AVATAR_HUES = { DR: 25, AP: 285, SH: 200, RO: 145, MS: 330, NP: 255, MB: 50, JL: 175, GL: 95, ET: 310, DK: 120, HK: 230, OH: 10, PK: 270, TB: 65, LF: 190, CM: 350, RA: 160 };
function Avatar({ initials, size = 34 }) {
const hue = AVATAR_HUES[initials] ?? 220;
return (
{initials}
);
}
/* ───────────────────────── Chips ───────────────────────── */
function Chip({ children, color, bg, icon, dot, weight = 600, style }) {
return (
{dot && }
{icon && }
{children}
);
}
const STATUS_TONES = {
Active: { color: "var(--green)", bg: "var(--green-soft)" },
Upcoming: { color: "var(--blue)", bg: "var(--blue-soft)" },
Exhausted: { color: "var(--amber-deep)", bg: "var(--amber-soft)" },
};
function StatusChip({ status }) {
const t = STATUS_TONES[status] || STATUS_TONES.Active;
return {status};
}
/* Muted reason chip — for attention reasons with no other visual signal in the row */
function FlagChip({ children }) {
return (
{children}
);
}
const TYPE_META = {
"Workers' comp": "ph-first-aid-kit",
"Pregnancy / parental": "ph-baby",
"Personal": "ph-user",
"Medical": "ph-heartbeat",
"Intermittent": "ph-arrows-clockwise",
"Accommodation": "ph-wheelchair",
};
function TypeTag({ type, fmla, weeks }) {
return (
{type}
{fmla && (
FMLA
)}
{weeks && }
);
}
/* Tiny 12-week usage sparkline — word-sized tick marks */
function Sparkline({ weeks }) {
const max = Math.max(...weeks, 1);
return (
{weeks.map((w, i) => (
))}
);
}
/* Rolling-balance regeneration hint */
function RegenHint({ c }) {
if (!c.regen) return null;
return (
+{c.regen.hours}h back {c.regen.date}
);
}
function DocChip({ status, label }) {
if (status === "complete")
return Complete;
if (status === "received")
return Received;
return Missing;
}
/* ───────────────────────── Return cell ───────────────────────── */
function ReturnCell({ c }) {
if (c.ongoing)
return Ongoing;
const soon = c.retDays != null && c.retDays >= 0 && c.retDays <= 7;
const past = c.retPast;
return (
{c.ret}
{past && Past due}
{soon && {c.retDays === 0 ? "Today" : "in " + c.retDays + "d"}}
);
}
/* ───────────────────────── Balance viz ───────────────────────── */
function pct(c) { return c.appr ? Math.min(100, Math.round((c.used / c.appr) * 100)) : 0; }
function isCrit(c) { return c.lowBalance || (c.appr != null && c.remaining === 0); }
function BalanceBar({ c }) {
if (c.appr == null)
return ;
const p = pct(c);
const low = isCrit(c);
const fill = low ? "var(--amber)" : "var(--accent)";
return (
{c.used} / {c.appr}h
{c.regen &&
}
);
}
function BalanceRing({ c }) {
if (c.appr == null)
return ;
const p = pct(c);
const r = 15, circ = 2 * Math.PI * r;
const low = isCrit(c);
const stroke = low ? "var(--amber)" : "var(--accent)";
return (
{p}%
{c.used} of {c.appr}h used
);
}
function BalanceNumbers({ c }) {
if (c.appr == null) return ;
return (
);
}
function NumCol({ label, val, low }) {
return (
{val}
{label}
);
}
function RemainingLabel({ c, compact }) {
const low = isCrit(c);
return (
{c.remaining}h avail.
{low && Low}
);
}
function NABalance() {
return (
N/A
);
}
function Balance({ c, mode }) {
if (mode === "ring") return ;
if (mode === "numbers") return ;
return ;
}
Object.assign(window, {
Tooltip, Avatar, Chip, StatusChip, FlagChip, TypeTag, DocChip, ReturnCell, Sparkline, RegenHint,
Balance, BalanceBar, BalanceRing, BalanceNumbers, RemainingLabel, NABalance, pct, isCrit,
});