Overtime shifts show as extra (+) and go under Overtime on the record sheet. Pay is the same either way: overtime pay is worked out from your total hours.
{/* Holidays are set automatically; the override stays folded away
unless it's in use. */}
Public holiday: {isHol ? "Yes" : "No"}{entry.holiday == null ? " · automatic" : " · set by you"}
{!showHol && (
)}
{showHol && (
setHoliday(v === "auto" ? null : v === "on")}
/>
)}
{canClear && }
);
}
const DAY_SHIFTS = SHIFTS.map((s) => ({
...s,
label: `${SHIFT_LABEL[s.k]} shift`,
hours: s.k === "pm10" ? `${stdHours(s.k)}h · crosses midnight`
: s.k === "sd" ? `${stdHours(s.k)}h · 8:30AM to 4:30PM`
: `${stdHours(s.k)}h`,
hint: s.k === "pm10" ? "total" : undefined,
}));
/* One shift in the day editor: the tick box, then (while it's on) its
hours, overtime after it (a Straight Day), taxi distance, whether it's an
overtime shift, and its duty, sliding open under it. */
function ShiftBlock({ sh, entry, mode, slot, onToggle, onHours, onDist, onDuty, onOvertime, onSdOt }) {
const on = !!entry[sh.k];
const duty = shiftDuty(entry, sh.k);
const pay = duty ? DUTY_TYPES[duty].pay : "full";
return (
{/* A given-away shift has no hours, and only a paid shift has a
taxi distance, so those rows fold away instead of showing
settings that can't change anything. A Straight Day has no
taxi; overtime after it needs the day worked, not on leave. */}
{sh.k === "sd" && (
)}
{mode === "advanced" && sh.k !== "sd" && (
)}
);
}
/* Whether this shift is an overtime (extra) shift. It starts at what the
rotation says (outside it = overtime) and the switch changes it; switching
back to the rotation's answer clears the choice. */
function OvertimeRow({ k, entry, slot, onChange }) {
const auto = autoOvertime(k, slot);
const set = otSet(entry, k);
const on = set == null ? auto : set;
const why = set != null ? (on ? "Set by you" : "Set by you · not overtime")
: !slot ? "No rotation saved · switch on to mark it"
: auto ? "Automatic · outside your rotation"
: "Automatic · your rotation's shift";
return (
);
}
/* Duty for one shift, folded to one line like the holiday setting. The
choices are grouped by what they do to pay:
- worked: paid as normal (regular, orderly, exchange for)
- leave: hours kept as ordinary hours, no SP1, SP2, meal or taxi
- given away: exchange leave, no hours and no allowances */
const DUTY_GROUPS = [
{ title: "Worked · paid as normal", options: [{ v: null, l: "Regular" }, ...DUTY_KEYS.filter((k) => DUTY_TYPES[k].pay === "full").map((k) => ({ v: k, l: DUTY_TYPES[k].short }))] },
{ title: "Leave · hours count, no allowances", options: DUTY_KEYS.filter((k) => DUTY_TYPES[k].pay === "hours").map((k) => ({ v: k, l: DUTY_TYPES[k].short })) },
{ title: "Swapped out · no hours, no allowances", options: DUTY_KEYS.filter((k) => DUTY_TYPES[k].pay === "none").map((k) => ({ v: k, l: DUTY_TYPES[k].short })) },
];
/* What the chosen duty does to this shift's pay, in one line. */
const DUTY_NOTES = {
orderly: "Orderly duty: paid as a normal shift, and listed under Leave & duties.",
exchangeFor: "Exchange for: you're covering someone else's shift. All hours and allowances count as normal.",
exchangeLeave: "Exchange leave: someone else covers this shift. It earns no hours and no SP1, SP2, meal or taxi.",
};
const LEAVE_NOTE = "On leave: the hours count as ordinary hours (never holiday ×2), but no SP1, SP2, meal or taxi for this shift.";
function DutyRow({ value, onChange, shift }) {
const [open, setOpen] = useStateM(!!value);
const note = value ? (isLeave(value) ? LEAVE_NOTE : DUTY_NOTES[value]) : null;
// Keep the last note on screen while it folds away, so the text doesn't
// vanish before the collapse animation finishes.
const lastNote = React.useRef(note);
if (note) lastNote.current = note;
return (
);
}
/* extra: this shift isn't on the rotation for the day, so ticking it marks
an extra shift (shown in the extra colour). */
function DayToggle({ label, hours, color, active, extra, duty, onClick }) {
if (extra) color = "var(--extra)";
const pay = active && duty ? DUTY_TYPES[duty].pay : "full";
const unpaid = pay !== "full"; // leave or given away: badge in neutral ink
return (
);
}
function DistRow({ value, onChange }) {
return (
Taxi
);
}
/* Editable actual time for a shift, as hours and minutes (easier to type
than 6.67). Stored as decimal hours (6h 40m is 6.666667), which the math
uses as is, or rounds back to the whole minute when overtime is counted in
minutes. Both boxes blank = the standard hours, shown as placeholders. A
partial shift's time counts toward total/overtime; only more than half a
shift earns the per-shift allowance. */
const hmFromRaw = (r) => {
if (r === "" || !(Number(r) >= 0)) return { h: "", m: "" };
const t = Math.round(Number(r) * 60);
return { h: String(Math.floor(t / 60)), m: t % 60 ? String(t % 60) : "" };
};
function TimeRow({ keyName, entry, onChange, hint }) {
const raw = entry.hours && entry.hours[keyName] != null ? String(entry.hours[keyName]) : "";
return (
onChange(keyName, v)}
/>
);
}
/* A time as two boxes, hours and minutes, sent on as decimal hours ("" when
both are blank). std is what blank means, shown greyed in the boxes. */
function HoursMinutesRow({ label, raw, std, ariaHours, ariaMinutes, onChange }) {
// The boxes keep what's typed (a blank minutes box mid-edit); they only
// reload when the stored hours change from elsewhere (shift ticked off,
// or a time over the most allowed, capped).
const [draft, setDraft] = useStateM(() => hmFromRaw(raw));
const sent = React.useRef(raw);
React.useEffect(() => {
if (raw !== sent.current) { sent.current = raw; setDraft(hmFromRaw(raw)); }
}, [raw]);
const update = (patch) => {
const d = { ...draft, ...patch };
setDraft(d);
const out = d.h === "" && d.m === "" ? ""
: String(Math.round(((Number(d.h) || 0) + (Number(d.m) || 0) / 60) * 1e6) / 1e6);
sent.current = out;
onChange(out);
};
const box = { width: 46, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 8, padding: "6px 8px", color: "var(--ink)", fontSize: 16, fontFamily: "inherit", textAlign: "right" };
const unit = { fontSize: 11, color: "var(--ink-faint)" };
const stdMin = Math.round((std % 1) * 60);
// Tapping a box selects what's in it, so typing replaces it (6 → 7)
// instead of running on to 67. After the tap, or iOS drops the selection.
const selectAll = (e) => {
const el = e.target;
setTimeout(() => { try { el.setSelectionRange(0, el.value.length); } catch {} }, 0);
};
return (
{label}
{/* Once minutes are typed, a blank hours box means 0 hours, so its
placeholder says so instead of still showing the standard hours. */}
update({ h: e.target.value.replace(/\D/g, "").slice(0, 2) })} onFocus={selectAll}
aria-label={ariaHours} style={box}
/>
h
{
const v = e.target.value.replace(/\D/g, "").slice(0, 2);
update({ m: v !== "" && Number(v) > 59 ? "59" : v });
}} onFocus={selectAll}
aria-label={ariaMinutes} style={box}
/>
m
);
}
/* ============ Settings ============ */
function SettingsModal({ rates, setRates, tax, setTax, ratesHistory, setRatesHistory, theme, setTheme, otUnit, setOtUnit, ratesEffective, onExportICS, onReset, onExport, onImport, onAbout, onClose }) {
const [tab, setTab] = useStateM("rates");
// About opens once Settings has closed (with its exit, and its Back entry
// gone), so About's own entry lands where Back expects it.
const toAbout = React.useRef(false);
const dismiss = useModalDismiss(() => { onClose(); if (toAbout.current) onAbout(); });
return (
);
}
/* Backup and housekeeping, kept out of the everyday screens. */
function DataTab({ onExport, onImport, onExportICS, onReset }) {
const item = (title, detail, onClick, danger) => (
);
return (
{item("Save a backup", "Download everything as a JSON file", onExport)}
{item("Restore a backup", "Load a JSON file you saved before", onImport)}
{item("Add shifts to my calendar", "Download this period as an .ics file", onExportICS)}
{item("Reset this period", "Clears this period's shifts and roster counts. Pay, rates and History are kept.", onReset, true)}
Your data stays on this device. Save a backup before changing phones or clearing your browser.
);
}
const ratesToDraft = (r) => {
const out = {};
for (const k of Object.keys(r)) out[k] = String(r[k]);
return out;
};
/* Keep a tab's fields in step when its values change from outside (a backup
restored from Backup, an Undo, Reset to defaults). A field that already
holds the same number ("12." mid-typing) or isn't valid yet is left alone. */
function useSyncedDraft(value, toDraft, setDraft, errors) {
React.useEffect(() => {
const want = toDraft(value);
setDraft((d) => {
let next = d;
for (const k of Object.keys(want)) {
if (errors[k]) continue;
const same = typeof want[k] === "boolean" ? d[k] === want[k] : Number(d[k]) === Number(want[k]);
if (!same) next = { ...next, [k]: want[k] };
}
return next;
});
}, [value]);
}
/* Rates and tax save as you type: each valid field is applied straight away,
and a field that isn't valid keeps its last saved value until it's fixed.
Closing Settings never throws edits away. */
function RatesTab({ rates, setRates, ratesEffective, otUnit, setOtUnit }) {
const [draft, setDraft] = useStateM(() => ratesToDraft(rates));
const [errors, setErrors] = useStateM({});
const set = (k, v) => {
const raw = sanitizeDecimal(v);
setDraft((p) => ({ ...p, [k]: raw }));
const n = Number(raw);
const err = raw === "" || !Number.isFinite(n) || n < 0 ? "Not saved. Must be 0 or more"
: k === "threshold" && !(n > 0) ? "Not saved. Must be more than 0" : null;
setErrors((e) => { const x = { ...e }; if (err) x[k] = err; else delete x[k]; return x; });
if (!err) setRates((r) => ({ ...r, [k]: n }));
};
useSyncedDraft(rates, ratesToDraft, setDraft, errors);
const resetDefaults = () => {
const prev = rates;
setRates({ ...DEFAULT_RATES });
setErrors({});
showToast("Rates reset to defaults", { action: { label: "Undo", onClick: () => setRates(prev) } });
};
// A Past rates entry covering the open period takes precedence over these.
const overridden = ratesEffective && ratesEffective !== "Current rates";
return (
{overridden && (
The period you're viewing uses a saved rate from Past rates ({ratesEffective.replace("Rates effective ", "from ")}). Changes here only apply to periods before your first saved rate. To change this period, save a new entry in Past rates.
)}
{/* Inputs line up along each row even when one label wraps. */}
{otUnit === "minutes"
? `Every shift counts to the whole minute and time shows as hours and minutes. Overtime is the minutes over ${fmtHM(Number(rates.threshold) || DEFAULT_RATES.threshold)}, paid at the hourly rate ÷ 60 × 1.5.`
: "Time counts and shows as decimal hours (6h 30m is 6.5h). Switch to Minutes to count every shift to the whole minute and show time as hours and minutes."}
)}
);
}
function SettingsFooter({ onDefaults }) {
return (
Changes save automatically.
);
}
const taxToDraft = (t) => {
const out = {};
// Round for display: the NIS cap default is 5,000,000 / 12, which would
// otherwise show as 416666.6666666667. The stored value stays exact until
// the field is edited.
for (const k of Object.keys(t)) {
out[k] = typeof t[k] === "boolean" ? t[k]
: typeof t[k] === "number" ? String(Math.round(t[k] * 100) / 100)
: String(t[k]);
}
return out;
};
const TAX_PCT_KEYS = new Set(["nis", "nht", "eduTax", "payeRate1", "payeRate2", "pension"]);
function TaxTab({ tax, setTax }) {
const [draft, setDraft] = useStateM(() => taxToDraft(tax));
const [errors, setErrors] = useStateM({});
const set = (k, v) => {
if (typeof v === "boolean") {
setDraft((p) => ({ ...p, [k]: v }));
setTax((t) => ({ ...t, [k]: v }));
return;
}
const raw = sanitizeDecimal(v);
setDraft((p) => ({ ...p, [k]: raw }));
const n = Number(raw);
const err = raw === "" || !Number.isFinite(n) || n < 0 ? "Not saved. Must be 0 or more"
: TAX_PCT_KEYS.has(k) && n > 100 ? "Not saved. Must be 0–100%" : null;
setErrors((e) => { const x = { ...e }; if (err) x[k] = err; else delete x[k]; return x; });
if (!err) setTax((t) => ({ ...t, [k]: n }));
};
useSyncedDraft(tax, taxToDraft, setDraft, errors);
const resetDefaults = () => {
const prev = tax;
setTax({ ...DEFAULT_TAX });
setErrors({});
showToast("Tax reset to defaults", { action: { label: "Undo", onClick: () => setTax(prev) } });
};
const field = (k, label, unit) => set(k, v)} error={errors[k]} />;
return (
Defaults follow TAJ 2025/26 rates (tax-free threshold from 1 April 2026). Check against your latest pay slip. Estimates only.
)}
);
}
function RateHistoryTab({ ratesHistory, setRatesHistory, currentRates }) {
const [date, setDate] = useStateM("");
const list = [...(ratesHistory || [])].sort((a, b) => effDate(b.effectiveFrom) - effDate(a.effectiveFrom));
// Keyed by date (plus a count for an old backup's same-date pair), not by
// position in ratesHistory: a delete shifts positions, and the rows after
// it would remount and rise in again.
const seen = {};
const rowKey = (e) => { const d = String(e.effectiveFrom); seen[d] = (seen[d] || 0) + 1; return `${d}#${seen[d]}`; };
const addEntry = () => {
if (!date) { showToast("Pick the date these rates started first"); return; }
const entry = { effectiveFrom: date, rates: { ...currentRates } };
// One entry per date: saving the same date again replaces it. Two entries
// with one date would tie in ratesAt(), and the older one would win.
const others = (ratesHistory || []).filter((x) => String(x.effectiveFrom).slice(0, 10) !== date);
setRatesHistory([...others, entry]);
setDate("");
};
// Past periods are worked out with these rates, so a delete can be undone.
const [isLeaving, remove] = useFoldAway((e) => {
setRatesHistory((prev) => prev.filter((x) => x !== e));
showToast("Past rates deleted", { action: { label: "Undo", onClick: () => setRatesHistory((prev) => (prev.includes(e) ? prev : [...prev, e])) } });
});
return (
Save the current rates with an effective-from date. Past periods use the rates active at the time, so historic snapshots stay correct when rates change.
{list.length === 0 ? (
No history yet — current rates apply to all periods.
) : (
{list.map((e, i) => (
From {effDate(e.effectiveFrom).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
);
}
function ThemeCard({ active, onClick, label, preview }) {
return (
);
}
/* unit: "$" shows before the value; "%" or "h" after it. */
function RateInput({ label, value, onChange, error, unit }) {
const pre = unit === "$";
return (