/* home.jsx — the Home page, the one place your own pay lives: the result
(each part folds open to its lines and maths), the calendar you log shifts
on, and the pay settings behind it, plus the plain-language setup (pay →
commute → shifts). Setup never computes pay itself: answers become
ordinary calendar entries (see rotationEntries / totalsEntries in helpers)
and its preview runs the same aggregate() as everything else. */
const { useState: useStateH, useMemo: useMemoH, useEffect: useEffectH, useRef: useRefH } = React;
function periodShiftDays(entries, period) {
return periodDays(period).filter((d) => hasShifts(entries[ymd(d)])).length;
}
/* A per-device display choice (the calendar folded shut, say). Kept apart
from the saved data, so it never lands in a backup, and it's only a
convenience: storage that's blocked or full just means the default. */
const UI_KEY = "nsc:ui";
function useUiPref(name, initial) {
const [value, setValue] = useStateH(() => {
try {
const v = JSON.parse(localStorage.getItem(UI_KEY) || "{}")[name];
return typeof v === typeof initial ? v : initial;
} catch { return initial; }
});
const set = (v) => {
setValue(v);
try {
const all = JSON.parse(localStorage.getItem(UI_KEY) || "{}");
localStorage.setItem(UI_KEY, JSON.stringify({ ...all, [name]: v }));
} catch {}
};
return [value, set];
}
/* Bring a section into view, below the sticky header (its scroll-margin-top),
once the screen has re-rendered: it may have just unfolded, or only now be
on screen at all, so `get` finds it then. Measured from the layout, not
the screen: a card still rising into place (closing setup replays the
entrance) would otherwise throw the target off by however far it has
left to travel. block "center" centres it when it fits. */
function scrollToSection(get, block = "start") {
requestAnimationFrame(() => requestAnimationFrame(() => {
const el = get();
if (!el) return;
let top = 0;
for (let n = el; n; n = n.offsetParent) top += n.offsetTop;
const margin = parseFloat(getComputedStyle(el).scrollMarginTop) || 0;
const room = window.innerHeight - margin;
const y = block === "center" && el.offsetHeight < room
? top - margin - (room - el.offsetHeight) / 2
: top - margin;
window.scrollTo({ top: Math.max(0, y), behavior: prefersReducedMotion() ? "auto" : "smooth" });
}));
}
function HomeView(props) {
const {
period, entries, mode, basePay, setBasePay, basicDistance, defaultDist, counts, setCounts, totals, tax, onboarded,
rotationAnchor, saveStatus, clipboard, onShiftPeriod, onApply, onWizardChange, onHeroVisible, onDistance,
onOpenDay, onAutofill, onTemplates, onClearRotation, onSaveSnapshot, onCopyShare, copyDay, pasteDay, cancelCopy,
} = props;
const [wizard, setWizard] = useStateH(false);
// The app hides the tab bar while setup is open, so the wizard's own
// Back / See my pay bar can sit at the bottom of the screen.
useEffectH(() => {
onWizardChange?.(wizard);
return () => onWizardChange?.(false);
}, [wizard]);
// Setup holds a history entry while it's open, so the phone's Back button
// cancels it instead of leaving the app from Home.
const wizardLayer = React.useRef(null);
useEffectH(() => {
if (!wizard) return;
const layer = openBackLayer(() => setWizard(false));
wizardLayer.current = layer;
return () => {
if (wizardLayer.current !== layer) return;
wizardLayer.current = null;
closeBackLayer(layer);
};
}, [wizard]);
// Close setup from its own buttons. `then` (a screen change) waits until
// setup's entry is off the history, so it's pushed onto the right one.
const closeWizard = (then) => {
const layer = wizardLayer.current;
wizardLayer.current = null;
const left = layer ? closeBackLayer(layer) : Promise.resolve();
if (typeof then !== "function") { setWizard(false); return; }
left.then(() => { setWizard(false); then(); });
};
// Opening or finishing setup swaps the whole card, so start at the top
// (finishing from the foot of the tall rotation step otherwise lands
// halfway down the result).
const first = React.useRef(true);
React.useLayoutEffect(() => {
if (first.current) { first.current = false; return; }
window.scrollTo?.(0, 0);
}, [wizard]);
const shiftDays = periodShiftDays(entries, period);
// A saved rotation runs on into every period, so an empty new period can be
// filled in one tap with the same pay and distance answers. With taxi set
// to Varies, new shifts start at the distance Varies seeds them with, and
// the taxi choice itself is left alone. Like every rotation fill it keeps
// what's already there (here, any holiday changed by hand).
const fillRotation = () => {
onApply({
fill: rotationEntries(period, rotationAnchor, mode === "advanced" ? defaultDist || "S" : basicDistance),
replace: false, basePay, dist: basicDistance, keepTaxi: true,
counts: { pm3: "", pm10: "", am7: "" }, anchor: rotationAnchor,
});
showToast("Rotation filled for this period");
};
const canQuickFill = !wizard && shiftDays === 0 && !!rotationAnchor;
const welcome = shiftDays === 0 && !(Number(basePay.monthly) > 0) && !rotationAnchor;
// The calendar folds shut to one line; the choice sticks on this device.
const [calOpen, setCalOpen] = useUiPref("calendarOpen", true);
// One pay setting open at a time, so the card stays short. A roster that
// disagrees with the calendar opens on its check.
const [fold, setFold] = useStateH(() => (totals.hasMismatch ? "roster" : null));
const settingsRef = useRefH(null);
const openSetting = (k) => {
setFold(k);
scrollToSection(() => settingsRef.current, "center");
};
const showCalendar = () => {
setCalOpen(true);
scrollToSection(() => document.getElementById("calendar-section"));
};
// "Show me the calendar" from the roster check: open it, then outline
// every day for a moment so the counts can be checked against it.
const [highlightDays, setHighlightDays] = useStateH(null);
const highlightTimer = useRefH(0);
useEffectH(() => () => clearTimeout(highlightTimer.current), []);
const highlightCalendar = () => {
clearTimeout(highlightTimer.current);
setHighlightDays(new Set(periodDays(period).map(ymd)));
highlightTimer.current = setTimeout(() => setHighlightDays(null), 3000);
showCalendar();
};
const calendar = (
{firstRun ? "Work out your pay" : "Nothing logged for this period yet"}
Answer three quick questions: your pay, your commute and your shifts. You'll get your allowances, base pay and overtime in one number.
);
}
/* ============ Pay settings (taxi, monthly pay, roster check) ============ */
/* A row that folds open: a title, one line saying what it's set to, and the
controls underneath. */
function FoldRow({ title, detail, open, onToggle, warn, last, children }) {
return (
{children}
);
}
/* Taxi distance: "S"/"L" pay one distance on every shift; "mixed" (Varies)
sets it per shift in the day editor. */
function TaxiFold({ mode, basicDistance, onChange, totals, open, onToggle }) {
const value = mode === "advanced" ? "mixed" : basicDistance;
const c = totals.cal;
const rate = value === "L" ? totals.rates.taxiLong : totals.rates.taxiShort;
const detail = value === "mixed"
? `Varies · Short ${c.shortPm3 + c.shortPm10} · Long ${c.longPm3 + c.longPm10}`
: `${value === "L" ? "Long" : "Short"} · ${fmt(rate)} per 3PM or 10PM shift`;
return (
{value === "mixed"
? "Set Short or Long on each shift when you tap a day. Long shifts show a striped bar."
: <>Each 3PM and 10PM shift pays {fmt(rate)} taxi this period.}
{c.sameDayPair > 0 && " A day with both a 3PM and a 10PM pays none."}
{draft.method === "rotation" ? (
) : (
<>This replaces the {shiftDays} day{shiftDays === 1 ? "" : "s"} already logged for this period.
)}
)}
)}
{last && (
{/* "Rates effective Oct 2026" → "Using rates effective Oct 2026" (only the first letter drops). */}
{ratesEffective === "Current rates" ? "Using the current JFB rates" : `Using ${ratesEffective.charAt(0).toLowerCase()}${ratesEffective.slice(1)}`}: SP1 {fmt(rates.sp1)} · SP2 {fmt(rates.sp2)} · Meal {fmt(rates.meal)}.{" "}
)}
{/* Sticks to the bottom of the screen, so the next step and the live
estimate are always in reach, even under the tall rotation calendar. */}
{last && (
{totalLabel(plan.preview)}
{totalsErr ? — : }
)}
{step > 0 && }
{last ? (
) : (
)}
);
}
function WizardTitle({ title, sub }) {
return (
{title}
{sub &&
{sub}
}
);
}
function HomeMoney({ label, value, onChange }) {
return (
);
}
function firstAm7Key(entries, period) {
for (const d of periodDays(period)) {
const e = entries[ymd(d)];
if (e && e.am7) return ymd(d);
}
return null;
}
/* The whole period as a calendar: tap any day you work a 7AM and the rotation
fills in both directions, so days before the chosen date are covered too.
Each cell shows the shift that day will get, so the grid is its own preview. */
function RotationPicker({ period, value, onChange }) {
const days = periodDays(period);
const preview = rotationEntries(period, value, "S");
const lead = period.start.getDay();
const todayKey = ymd(new Date());
return (
<>
Tap any day you work a 7AM
Your rotation (7AM → 3PM → 10PM → Off) fills the whole period from that day, before and after it. Check the days below match your roster. It's saved for next period too.
))}
{Array.from({ length: lead }).map((_, i) => )}
{days.map((d, di) => {
const key = ymd(d);
const e = preview[key];
const sh = e ? SHIFTS.find((s) => e[s.k]) : null;
const anchor = key === value;
const hol = holidayName(d);
return (
);
})}
{holidaysInPeriod(period).length > 0 && (
<>
Public holiday, applied automatically.{" "}
)}
Took leave, swapped a shift or worked an extra one? Tap that day on the calendar afterwards. Extra shifts show in pink with a +.
Your shifts are spread across the period's regular days for the math. Holiday pay isn't included from totals. To count it, log your holiday shifts on the calendar.