/* calendar.jsx — period calendar with labelled shift chips, rotation off days / extras, warning highlights */
/* compact: the Watch screens' version — just the grid and legend; tap a day
to edit it. The full version is Home's "Your shifts" card: it folds shut
to one line (open / onToggle) and adds Auto-fill, Templates, Setup,
long-press copy and the period's rotation and holidays. */
function Calendar({ period, entries, mode, onOpenDay, totals, highlight, onAutofill, onTemplates, onSetup, clipboard, copyDay, pasteDay, cancelCopy, rotationAnchor, onClearRotation, compact, open = true, onToggle }) {
// Counts each time the calendar opens (not when it shuts), so the days
// cascade in again as it opens but stay in place while it folds away.
const [opens, setOpens] = React.useState(0);
const [wasOpen, setWasOpen] = React.useState(open);
if (open !== wasOpen) {
setWasOpen(open);
if (open) setOpens(opens + 1);
}
const days = periodDays(period);
const leadBlanks = period.start.getDay();
const headWeek = ["S","M","T","W","T","F","S"];
const periodHolidays = holidaysInPeriod(period);
const stats = rotationStats(entries, period, rotationAnchor);
const shiftCount = totals.cal.am7 + totals.cal.pm3 + totals.cal.pm10 + (totals.cal.sd || 0);
const todayKey = ymd(new Date());
// Legend entries only for what this period actually shows.
const anyHoliday = days.some((d) => { const e = entries[ymd(d)]; return e?.holiday == null ? isJamaicaHoliday(d) : e.holiday; });
const leaveCount = totals.leaveShifts || 0;
const orderlyCount = totals.duties?.orderly || 0;
const exchForCount = totals.duties?.exchangeFor || 0;
const exchLeaveCount = totals.exchangedShifts || 0;
const anyStraightDay = days.some((d) => entries[ymd(d)]?.sd);
const grid = (
<>
{/* Compact (13h40) so a cell never wraps it on a narrow phone. */}
{inMinutes(totals.rates) ? fmtHMc(hours) : `${fmtH0(hours)}h`}{holidayHrs > 0 ? "*" : ""}
)}
);
}
/* One shift on a calendar day: a labelled chip, so colour is never the only
cue. Extra (overtime) shifts use the extra colour and a "+".
Leave shows as a dashed outline with its code (VL, DL, SL, TO), since it
earns no allowance; exchange leave (EXL) as a faint dotted outline, since
it isn't worked at all. Orderly (ORD) and exchange for (EXF) are worked
shifts: solid chips with their code. */
function ShiftChip({ label, color, extra, long, duty }) {
const bg = extra ? "var(--extra)" : color;
const pay = duty ? DUTY_TYPES[duty].pay : "full";
const outline = pay !== "full";
const text = duty ? DUTY_TYPES[duty].code : (extra ? "+" : "") + label;
// "+10PM" is a character wider than any other chip, so it gets a touch
// smaller and tighter, or it clips to "+10P" on phones under ~360px.
const wide = text.length > 4;
return (
{long && !outline && }
{text}
);
}
/* The day number; today's gets an accent pill so "where am I in the period"
is answered at a glance. */
function TodayDate({ date, today, size = 11 }) {
return (
{date.getDate()}
);
}
function DayButton({ ariaLabel, onTap, onLongPress, hasShifts, isClipboardActive, children, style, className }) {
const timerRef = React.useRef(null);
const movedRef = React.useRef(false);
const longPressedRef = React.useRef(false);
const startPosRef = React.useRef(null);
const clearTimer = () => {
if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }
};
const start = (e) => {
if (e.button !== 0) return; // right-click / pen barrel: not a press
movedRef.current = false;
longPressedRef.current = false;
startPosRef.current = { x: e.clientX, y: e.clientY };
if (hasShifts && !isClipboardActive) {
timerRef.current = setTimeout(() => {
if (!movedRef.current) {
longPressedRef.current = true;
if (navigator.vibrate) navigator.vibrate(20);
onLongPress?.();
}
}, 450);
}
};
// A mouse hovering after the press isn't a drag; only track while pressed,
// or a later keyboard Enter on this day would be swallowed as a scroll.
const end = () => { startPosRef.current = null; };
const move = (e) => {
if (!startPosRef.current) return;
const dx = Math.abs(e.clientX - startPosRef.current.x);
const dy = Math.abs(e.clientY - startPosRef.current.y);
if (dx > 8 || dy > 8) {
movedRef.current = true;
clearTimer();
}
};
// Tap is handled on `click` so the cell is operable by mouse, touch, keyboard
// (Enter/Space on the native button) and assistive tech alike. Pointer
// handlers only detect a long-press (copy) and drag/scroll, then swallow the
// trailing pointer-driven click so those gestures don't also open the editor.
const onClick = () => {
clearTimer();
if (longPressedRef.current) { longPressedRef.current = false; return; }
if (movedRef.current) { movedRef.current = false; return; }
onTap?.();
};
return (
);
}
function Legend({ color, label, dot, outline, dotted, code }) {
const mark = dot
? { width: 8, height: 8, borderRadius: "50%", background: color }
: outline || dotted
? { width: 14, height: 8, borderRadius: 2, border: `1px ${dotted ? "dotted" : "dashed"} var(--ink-dim)` }
: { width: 14, height: 4, borderRadius: 2, background: color };
return (
{code
? {code}
: }
{label}
);
}
Object.assign(window, { Calendar, ShiftChip, TodayDate });