hoursprig/app.js

/* Hoursprig app: time card editor, live totals, timesheet preview, PDF/print/CSV, Pro features. Everything stays in this browser.
 * © 2026 CyberMax. All rights reserved. */
(function () {
  "use strict";
  var C = window.HourCalc, P = window.HourPDF, X = window.CMXPro;
  var KEY = "hoursprig:v1";
  /* Recipient-facing credit on free timesheets (Pro removes it): links to the app's page on cybermaxtools.com, tagged so
   * the page's view counter records it (utm_source=hoursprig-share, utm_campaign=pdf|print). */
  var SITE = "https://cybermaxtools.com/apps/time-card-calculator/";
  var CREDIT_LEAD = "Made with Hoursprig by CyberMax", CREDIT_ASK = "make your own free: cybermaxtools.com/apps/time-card-calculator";
  var CREDIT = CREDIT_LEAD + " \u2014 " + CREDIT_ASK;
  function creditUrl(ch) { return SITE + "?utm_source=hoursprig-share&utm_medium=made-with&utm_campaign=" + ch; }
  var MAX_PAIRS = 4;
  var $ = function (id) { return document.getElementById(id); };
  var form = $("editor");

  function pro() { return X.isPro(); }
  function toast(m) { X.toast(m); }
  function upsell(msg, from) { X.upsell(msg || "That is a Hoursprig Pro feature.", from); }
  function esc(s) { return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]; }); }
  function clone(o) { return JSON.parse(JSON.stringify(o)); }
  function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 7); }
  function todayISO() { var d = new Date(); return d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2); }

  /* ---------- state ---------- */
  function entriesOf(period) {
    var e = {};
    (period.days || []).forEach(function (d) { e[d.date] = { pairs: d.pairs, brk: d.brk, note: d.note }; });
    return e;
  }
  function tidy(entries, h24) {
    Object.keys(entries).forEach(function (d) { entries[d].pairs.forEach(function (q) { var n = C.normalizePair(q.in, q.out, h24); q.in = n.in; q.out = n.out; }); });
    return entries;
  }
  function fromExample(k) {
    var ex = C.example(k), id = uid();
    var settings = Object.assign(C.defaults(), ex.settings, { paper: "" });
    var rate = settings.rate; delete settings.rate;
    return {
      settings: settings, company: ex.company, notes: "",
      employee: { id: id, name: ex.employee.name, ref: ex.employee.ref, rate: rate },
      period: { kind: ex.period.kind, start: ex.period.start, entries: tidy(entriesOf(ex.period), settings.h24) },
    };
  }
  function fresh() {
    var ex = fromExample("weekly");
    var o = { v: 1, settings: ex.settings, company: ex.company, notes: "", employees: [ex.employee], active: ex.employee.id, periods: {}, history: [], logo: null, results: 0 };
    o.periods[ex.employee.id] = ex.period;
    return o;
  }
  function valid(s) { return s && typeof s === "object" && Array.isArray(s.employees) && s.employees.length && s.periods && s.settings; }
  function load() {
    var s = null;
    try { s = JSON.parse(localStorage.getItem(KEY) || "null"); } catch (e) { s = null; }
    if (!valid(s)) return fresh();
    var f = fresh();
    Object.keys(f).forEach(function (k) { if (s[k] == null) s[k] = f[k]; });
    return s;
  }
  var S = load();
  var saveT = null;
  function save() {
    clearTimeout(saveT);
    saveT = setTimeout(saveNow, 150);
  }
  function saveNow() { clearTimeout(saveT); try { localStorage.setItem(KEY, JSON.stringify(S)); } catch (e) { toast("Could not save in this browser (storage full or private mode)."); } }

  function emp() {
    if (!pro()) return S.employees[0];
    return S.employees.filter(function (e) { return e.id === S.active; })[0] || S.employees[0];
  }
  function period() {
    var e = emp(), p = S.periods[e.id];
    if (!p) { p = S.periods[e.id] = { kind: S.settings.kind || "week", start: defaultStart(S.settings.kind || "week"), entries: {} }; }
    return p;
  }
  function defaultStart(kind) {
    var t = todayISO();
    if (kind === "semimonth") return C.periodStart(kind, t);
    return C.addDays(t, -C.dow(t)); // most recent Sunday
  }
  function blankEntry() { return { pairs: [{ in: "", out: "" }], brk: "", note: "" }; }
  function entry(date) { var p = period(); if (!p.entries[date]) p.entries[date] = blankEntry(); return p.entries[date]; }
  function periodObj(p) {
    p = p || period();
    return { kind: p.kind, start: p.start, days: C.periodDates(p.kind, p.start).map(function (d) { return Object.assign({ date: d }, p.entries[d] || blankEntry()); }) };
  }
  function proRulesOn(s) { return !!(s.dailyOn || s.dtOn || s.seventhOn); }
  function effSettings(settings, e, kind) {
    var s = Object.assign({}, settings, { rate: e.rate, kind: kind });
    return pro() ? s : C.freeRules(s);
  }
  function result() { var p = period(); return C.compute(periodObj(p), effSettings(S.settings, emp(), p.kind)); }
  function sheet() { return { company: S.company, employee: { name: emp().name, ref: emp().ref }, result: result(), notes: S.notes }; }
  function hasTimes(p) {
    return Object.keys(p.entries || {}).some(function (d) { var x = p.entries[d]; return (x.pairs || []).some(function (q) { return String(q.in || "").trim() || String(q.out || "").trim(); }); });
  }

  /* ---------- employee + period form ---------- */
  function fillSelects() {
    $("r-currency").innerHTML = C.CURRENCIES.map(function (c) { return '<option value="' + c.code + '">' + c.code + "</option>"; }).join("");
    $("r-weekStart").innerHTML = C.DOW_LONG.map(function (d, i) { return '<option value="' + i + '">' + d + "</option>"; }).join("");
  }
  function renderEmployees() {
    var list = pro() ? S.employees : [S.employees[0]];
    $("f-emp").innerHTML = list.map(function (e, i) { return '<option value="' + esc(e.id) + '">' + esc(e.name || "Employee " + (i + 1)) + "</option>"; }).join("");
    $("f-emp").value = emp().id;
    $("f-emp").disabled = list.length < 2;
    $("btn-del-emp").hidden = !(pro() && S.employees.length > 1);
    $("plan-chip").textContent = pro() ? S.employees.length + (S.employees.length === 1 ? " employee" : " employees") : "Free: 1 employee";
  }
  function toForm() {
    var e = emp(), p = period();
    $("f-name").value = e.name || ""; $("f-ref").value = e.ref || ""; $("f-rate").value = e.rate || "";
    $("f-company").value = S.company || ""; $("f-notes").value = S.notes || "";
    $("f-start").value = p.start;
    Array.prototype.forEach.call(document.querySelectorAll(".seg button"), function (b) { b.setAttribute("aria-checked", String(b.dataset.kind === p.kind)); });
    document.body.classList.toggle("semi", p.kind === "semimonth");
    Array.prototype.forEach.call(form.querySelectorAll("[data-set]"), function (el) {
      var v = S.settings[el.dataset.set];
      if (el.type === "checkbox") el.checked = !!v;
      else if (el.dataset.set === "h24") el.value = v ? "1" : "";
      else el.value = v == null ? "" : String(v);
    });
    renderEmployees();
    renderDays();
    hints();
  }
  form.addEventListener("submit", function (e) { e.preventDefault(); });
  form.addEventListener("input", function (e) {
    var el = e.target;
    if (el.dataset.emp) { emp()[el.dataset.emp] = el.value; if (el.dataset.emp === "name") renderEmployees(); changed(); }
    else if (el.dataset.top) { S[el.dataset.top] = el.value; changed(); }
    else if (el.dataset.set && el.type !== "checkbox" && el.tagName === "INPUT") { S.settings[el.dataset.set] = el.value; changed(); }
  });
  form.addEventListener("change", function (e) {
    var el = e.target, k = el.dataset.set;
    if (!k) return;
    if (el.type === "checkbox") {
      if (el.checked && el.dataset.pro && !pro()) {
        el.checked = false;
        return upsell("Daily overtime, double time and the 7th-day rule are part of Pro.", "ot-rules");
      }
      S.settings[k] = el.checked;
    } else if (k === "h24") { S.settings.h24 = !!el.value; tidy(period().entries, S.settings.h24); renderDays(); }
    else if (k === "rounding" || k === "weekStart") S.settings[k] = +el.value;
    else if (el.tagName === "SELECT") S.settings[k] = el.value;
    hints(); changed();
  });

  Array.prototype.forEach.call(document.querySelectorAll(".seg button"), function (b) {
    b.addEventListener("click", function () { setPeriod(b.dataset.kind, null); });
  });
  $("f-start").addEventListener("change", function () { if (C.validISO(this.value)) setPeriod(null, this.value); else this.value = period().start; });
  $("btn-prev").addEventListener("click", function () { var p = period(); setPeriod(null, C.shiftPeriod(p.kind, p.start, -1)); });
  $("btn-next").addEventListener("click", function () { var p = period(); setPeriod(null, C.shiftPeriod(p.kind, p.start, 1)); });

  /** Change period kind and/or start. Free keeps one period: moving to a different one clears times (after a confirm); Pro saves the old one to history. */
  function setPeriod(kind, start) {
    var p = period();
    kind = kind || p.kind;
    start = C.periodStart(kind, start || p.start);
    if (kind === p.kind && start === p.start) return toForm();
    var oldDates = C.periodDates(p.kind, p.start), newDates = C.periodDates(kind, start);
    var moving = start !== p.start && newDates.indexOf(oldDates[0]) < 0;
    if (moving && hasTimes(p)) {
      if (pro()) { recordHistory(p, true); toast("Saved " + C.fmtRange(oldDates[0], oldDates[oldDates.length - 1]) + " to your pay periods."); }
      else if (!confirm("The free plan keeps one pay period. Start a new period and clear the current times?\n\nHoursprig Pro saves every period to history.")) { $("f-start").value = p.start; return; }
    }
    var keep = {};
    newDates.forEach(function (d) { if (p.entries[d] && !moving) keep[d] = p.entries[d]; });
    p.kind = kind; p.start = start; p.entries = keep;
    S.settings.kind = kind;
    toForm(); changed();
  }
  function hints() {
    var p = period(), dates = C.periodDates(p.kind, p.start), s = S.settings;
    var txt = C.fmtRange(dates[0], dates[dates.length - 1]) + " · " + dates.length + " days. ";
    if (p.kind === "semimonth") txt += "Weekly overtime uses workweeks starting " + C.DOW_LONG[s.weekStart] + "; a workweek that crosses into the next period only counts the days in this one.";
    else txt += "Weekly overtime counts each 7 days from the start date as one workweek" + (p.kind === "biweek" ? " (2 workweeks)." : ".");
    $("period-hint").textContent = txt;
    var r = +s.rounding;
    $("round-hint").textContent = !r ? "Exact minutes are used. Rounding, if your workplace uses it, moves each in and out time to the nearest step." :
      r === 15 ? "Each in and out time moves to the nearest quarter hour: 8:07 becomes 8:00, 8:08 becomes 8:15." :
      r === 6 ? "Each in and out time moves to the nearest 6 minutes (0.1 h): 8:02 becomes 8:00, 8:03 becomes 8:06." :
      "Each in and out time moves to the nearest 5 minutes: 8:02 becomes 8:00, 8:03 becomes 8:05.";
  }

  /* ---------- employees (Pro) ---------- */
  $("btn-add-emp").addEventListener("click", function () {
    if (!pro()) return upsell("The free plan covers 1 employee. Hoursprig Pro keeps every employee's timesheet in one place.", "employees");
    var p = period(), e = { id: uid(), name: "", ref: "", rate: emp().rate || "" };
    S.employees.push(e); S.active = e.id;
    S.periods[e.id] = { kind: p.kind, start: p.start, entries: {} };
    toForm(); changed(); $("f-name").focus();
    toast("New employee added. Type their name and times.");
  });
  $("f-emp").addEventListener("change", function () { S.active = this.value; toForm(); changed(); });
  $("btn-del-emp").addEventListener("click", function () {
    if (S.employees.length < 2) return;
    var e = emp();
    if (!confirm("Remove " + (e.name || "this employee") + " and their current times? Saved pay periods stay in history.")) return;
    S.employees = S.employees.filter(function (x) { return x.id !== e.id; });
    delete S.periods[e.id]; S.active = S.employees[0].id;
    toForm(); changed();
  });

  /* ---------- the time card ---------- */
  function renderDays() {
    var p = period(), h24 = !!S.settings.h24;
    $("days").innerHTML = C.periodDates(p.kind, p.start).map(function (date) {
      var x = p.entries[date] || blankEntry(), dw = C.DOW[C.dow(date)], lab = dw + " " + C.fmtDate(date);
      var list = x.pairs && x.pairs.length ? x.pairs : [{ in: "", out: "" }], n = list.length;
      var pairs = list.map(function (q, i) {
        return '<div class="pair" data-p="' + i + '"><input class="t" data-k="in" value="' + esc(q.in) + '" placeholder="In" aria-label="' + lab + " in" + (i ? ", shift " + (i + 1) : "") + '" inputmode="text" enterkeyhint="next">' +
          '<span class="dash" aria-hidden="true">–</span><input class="t" data-k="out" value="' + esc(q.out) + '" placeholder="Out" aria-label="' + lab + " out" + (i ? ", shift " + (i + 1) : "") + '" inputmode="text" enterkeyhint="next">' +
          (i ? '<button type="button" class="icon-btn sm" data-act="delpair" aria-label="Remove shift ' + (i + 1) + " on " + lab + '" title="Remove this shift">×</button>' :
            '<button type="button" class="icon-btn sm add" data-act="addpair" aria-label="Add a split shift on ' + lab + '" title="Add a split shift"' + (n >= MAX_PAIRS ? " disabled" : "") + ">+</button>") + "</div>";
      }).join("");
      return '<div class="day" data-date="' + date + '"><div class="dl"><b>' + dw + "</b><span>" + C.fmtDate(date) + "</span></div>" +
        '<div class="pairs">' + pairs + "</div>" +
        '<div class="brk"><input data-k="brk" value="' + esc(x.brk) + '" inputmode="numeric" placeholder="0" aria-label="' + lab + ' unpaid break in minutes"><span>min</span></div>' +
        '<div class="dt" aria-live="polite"></div>' +
        '<input class="note" data-k="note" value="' + esc(x.note) + '" placeholder="Note" aria-label="' + lab + ' note"></div>';
    }).join("");
    dayTotals();
  }
  function dayTotals(r) {
    r = r || result();
    var map = {};
    r.days.forEach(function (d) { map[d.date] = d; });
    Array.prototype.forEach.call($("days").querySelectorAll(".day"), function (row) {
      var d = map[row.dataset.date]; if (!d) return;
      var on = d.worked > 0;
      row.classList.toggle("off", !on);
      var over = d.shifts.some(function (s) { return s.end > C.DAY; });
      row.querySelector(".dt").innerHTML = on ? "<b>" + C.hm(d.worked) + "</b><small>" + C.dec(d.worked) + " h" + (d.ot || d.dt ? "<br>OT " + C.hm(d.ot + d.dt) : "") + (over ? "<br>+1 day" : "") + "</small>" : '<b class="z">0:00</b>';
      Array.prototype.forEach.call(row.querySelectorAll(".pair"), function (pr) {
        var i = +pr.dataset.p, bad = d.errors.indexOf(i) > -1;
        var ins = pr.querySelectorAll("input.t");
        Array.prototype.forEach.call(ins, function (inp) {
          var v = inp.value.trim(), b = bad && (!v || !C.parseTime(v));
          inp.classList.toggle("bad", b);
          if (b) { inp.setAttribute("aria-invalid", "true"); inp.title = v ? "Could not read this time. Try 9, 9a, 9:30pm or 21:30." : "Add the " + inp.dataset.k + " time."; }
          else { inp.removeAttribute("aria-invalid"); inp.removeAttribute("title"); }
        });
      });
    });
  }
  $("days").addEventListener("input", function (e) {
    var el = e.target, row = el.closest(".day"); if (!row || !el.dataset.k) return;
    var x = entry(row.dataset.date);
    if (el.dataset.k === "in" || el.dataset.k === "out") {
      var i = +el.closest(".pair").dataset.p;
      if (!x.pairs[i]) x.pairs[i] = { in: "", out: "" };
      x.pairs[i][el.dataset.k] = el.value;
    } else x[el.dataset.k] = el.value;
    changed(true);
  });
  $("days").addEventListener("focusout", function (e) {
    var el = e.target;
    if (!el.classList || !el.classList.contains("t")) return;
    var pr = el.closest(".pair"), ins = pr.querySelectorAll("input.t"), inEl = ins[0], outEl = ins[1];
    if (!el.value.trim()) return;
    if (el === outEl && !inEl.value.trim()) return;
    var n = C.normalizePair(inEl.value, outEl.value, !!S.settings.h24);
    if (el === inEl && !C.span(inEl.value, outEl.value)) n.out = outEl.value;
    var x = entry(el.closest(".day").dataset.date), q = x.pairs[+pr.dataset.p];
    if (!q) return;
    if (n.in !== inEl.value) inEl.value = n.in;
    if (n.out !== outEl.value) outEl.value = n.out;
    q.in = n.in; q.out = n.out; save();
  });
  $("days").addEventListener("click", function (e) {
    var b = e.target.closest("[data-act]"); if (!b) return;
    var row = b.closest(".day"), x = entry(row.dataset.date);
    if (b.dataset.act === "addpair" && x.pairs.length < MAX_PAIRS) x.pairs.push({ in: "", out: "" });
    if (b.dataset.act === "delpair") x.pairs.splice(+b.closest(".pair").dataset.p, 1);
    renderDays(); changed(true);
    if (b.dataset.act === "addpair") { var ins = $("days").querySelectorAll('.day[data-date="' + row.dataset.date + '"] .pair input.t'); if (ins.length) ins[ins.length - 2].focus(); }
  });
  $("btn-copy").addEventListener("click", function () {
    var p = period(), dates = C.periodDates(p.kind, p.start);
    var src = null;
    dates.some(function (d) { var x = p.entries[d]; if (x && x.pairs.some(function (q) { return String(q.in).trim() && String(q.out).trim(); })) { src = x; return true; } return false; });
    if (!src) return toast("Type the first day's times, then copy them.");
    var n = 0;
    dates.forEach(function (d) { var w = C.dow(d); if (w >= 1 && w <= 5 && p.entries[d] !== src) { p.entries[d] = { pairs: clone(src.pairs), brk: src.brk, note: "" }; n++; } });
    renderDays(); changed(true); toast("Copied to " + n + " weekdays.");
  });
  $("btn-clear").addEventListener("click", function () {
    if (!confirm("Clear every time on this card?")) return;
    period().entries = {}; renderDays(); changed(true);
  });

  /* ---------- totals + preview ---------- */
  function renderSummary(r) {
    var T = r.totals, s = r.settings, m = function (v) { return esc(C.money(v, s.currency)); };
    var showDT = s.dtOn || s.seventhOn || T.dt > 0;
    var rows = '<tr><th scope="row">Regular</th><td>' + C.hm(T.reg) + "</td><td>" + C.dec(T.reg) + "</td><td>" + (T.rate ? m(T.regPay) : "") + "</td></tr>" +
      '<tr><th scope="row">Overtime ×' + esc(s.otMult) + "</th><td>" + C.hm(T.ot) + "</td><td>" + C.dec(T.ot) + "</td><td>" + (T.rate ? m(T.otPay) : "") + "</td></tr>" +
      (showDT ? '<tr><th scope="row">Double time ×' + esc(s.dtMult) + "</th><td>" + C.hm(T.dt) + "</td><td>" + C.dec(T.dt) + "</td><td>" + (T.rate ? m(T.dtPay) : "") + "</td></tr>" : "");
    var locked = !pro() && proRulesOn(S.settings);
    $("sum").innerHTML =
      '<div class="sum-top"><div><div class="k">Total hours</div><div class="big" id="total-hm">' + C.hm(T.worked) + '</div><div class="sub">' + C.dec(T.worked) + " h decimal · " + T.daysWorked + (T.daysWorked === 1 ? " day" : " days") + "</div></div>" +
      '<div class="pay"><div class="k">' + (T.rate ? "Gross pay" : "Add an hourly rate for pay") + '</div><div class="big" id="total-pay">' + (T.rate ? m(T.gross) : "—") + "</div>" + (T.rate ? '<div class="sub">at ' + m(T.rate) + "/h</div>" : "") + "</div></div>" +
      '<table class="sum-t"><thead><tr><th></th><th>h:mm</th><th>Decimal</th><th>Pay</th></tr></thead><tbody>' + rows + "</tbody></table>" +
      '<p class="rules-line">' + esc(C.ruleLines(s)) + "</p>" +
      (locked ? '<p class="locked-note">Daily overtime, double time and the 7th-day rule are switched on but only apply with Pro, so this shows weekly overtime only. <button type="button" class="linkish" id="btn-rules-pro">Unlock all rules</button></p>' : "");
    var lb = $("btn-rules-pro"); if (lb) lb.onclick = function () { upsell(null, "ot-rules"); };
    var hs = $("hero-summary");
    if (hs) {
      hs.hidden = !T.worked;
      hs.innerHTML = '<span class="hs-k">' + esc((emp().name || "This card") + " · " + (function () { var ds = C.periodDates(period().kind, period().start); return C.fmtRange(ds[0], ds[ds.length - 1]); })()) + '</span>' +
        '<span class="hs-row"><b>' + C.hm(T.worked) + '</b> worked · <b>' + C.hm(T.ot + (T.dt || 0)) + '</b> overtime' + (T.rate ? ' · <b>' + m(T.gross) + '</b> gross' : '') + '</span>' +
        '<span class="hs-go">See the timesheet ready to sign ↓</span>';
    }
    $("warn").textContent = T.errors ? T.errors + (T.errors === 1 ? " shift has" : " shifts have") + " a time that could not be read or is missing (marked in red)." : "";
  }
  function previewHTML(sh, opts) {
    var r = sh.result, s = r.settings, T = r.totals, h24 = !!s.h24, emp = sh.employee || {};
    var m = function (v) { return esc(C.money(v, s.currency)); };
    var showDT = s.dtOn || s.seventhOn || T.dt > 0, multi = r.weeks.length > 1;
    var rows = r.weeks.map(function (wk, wi) {
      return wk.days.map(function (d) {
        var on = d.worked > 0;
        return '<tr class="' + (on ? "" : "off") + '"><td>' + esc(C.fmtDate(d.date, true)) + "</td><td>" + (on ? d.shifts.map(function (x) { return esc(C.fmtClock(x.start, h24) + " – " + C.fmtClock(x.end, h24)) + (x.end > C.DAY ? " <i>(+1 day)</i>" : ""); }).join("<br>") : "—") +
          '</td><td class="n">' + (on && d.brk ? d.brk + " min" : "") + '</td><td class="n b">' + (on ? C.hm(d.worked) : "—") + '</td><td class="n">' + (on ? C.hm(d.reg) : "") + '</td><td class="n">' + (d.ot ? C.hm(d.ot) : "") + "</td>" +
          (showDT ? '<td class="n">' + (d.dt ? C.hm(d.dt) : "") + "</td>" : "") + '<td class="nt">' + esc((d.seventh ? "7th day. " : "") + d.note) + "</td></tr>";
      }).join("") + (multi ? '<tr class="wk"><td>Week ' + (wi + 1) + "</td><td>" + esc(C.fmtDate(wk.start) + " – " + C.fmtDate(wk.end)) + '</td><td></td><td class="n">' + C.hm(wk.worked) + '</td><td class="n">' + C.hm(wk.reg) + '</td><td class="n">' + C.hm(wk.ot) + "</td>" + (showDT ? '<td class="n">' + C.hm(wk.dt) + "</td>" : "") + "<td></td></tr>" : "");
    }).join("");
    var pay = [["Regular", T.reg, T.regPay]];
    if (s.weeklyOn || s.dailyOn || s.seventhOn || T.ot) pay.push(["Overtime ×" + s.otMult, T.ot, T.otPay]);
    if (showDT) pay.push(["Double time ×" + s.dtMult, T.dt, T.dtPay]);
    return '<header class="p-head">' + (opts.logo ? '<img class="p-logo" src="' + opts.logo + '" alt="">' : "") + '<div class="p-co"><div class="p-name">' + esc(sh.company) + '</div><div class="p-kind">' + esc(C.KIND_LABEL[r.kind]) + ' timesheet</div></div><div class="p-title"><div>TIMESHEET</div><span>' + esc(C.fmtRange(r.start, r.end)) + "</span></div></header>" +
      '<div class="p-band"><div><small>EMPLOYEE</small><b>' + esc(emp.name || "—") + "</b></div><div><small>EMPLOYEE ID</small><b>" + esc(emp.ref || "—") + "</b></div><div><small>PAY PERIOD</small><b>" + esc(C.fmtDate(r.start, "y") + " to " + C.fmtDate(r.end, "y")) + "</b></div><div><small>HOURLY RATE</small><b>" + (T.rate ? m(T.rate) : "—") + "</b></div></div>" +
      '<table class="p-t"><thead><tr><th>Date</th><th>In – Out</th><th class="n">Break</th><th class="n">Hours</th><th class="n">Regular</th><th class="n">Overtime</th>' + (showDT ? '<th class="n">Double</th>' : "") + "<th>Note</th></tr></thead><tbody>" + rows +
      '<tr class="tot"><td>Total</td><td>' + T.daysWorked + (T.daysWorked === 1 ? " day" : " days") + ' worked</td><td class="n">' + (T.brk ? T.brk + " min" : "") + '</td><td class="n">' + C.hm(T.worked) + '</td><td class="n">' + C.hm(T.reg) + '</td><td class="n">' + C.hm(T.ot) + "</td>" + (showDT ? '<td class="n">' + C.hm(T.dt) + "</td>" : "") + '<td class="nt">' + C.dec(T.worked) + " h decimal</td></tr></tbody></table>" +
      '<section class="p-bottom"><div class="p-rules"><small>HOW THIS WAS CALCULATED</small><p>' + esc(C.ruleLines(s)) + "</p>" + (sh.notes ? "<small>NOTES</small><p>" + esc(sh.notes) + "</p>" : "") + "</div>" +
      '<table class="p-pay">' + pay.map(function (x) { return "<tr><td>" + esc(x[0]) + "</td><td>" + C.hm(x[1]) + " (" + C.dec(x[1]) + " h)</td><td>" + (T.rate ? m(x[2]) : "") + "</td></tr>"; }).join("") +
      '<tr class="g"><td colspan="2">' + (T.rate ? "Gross pay" : "Total hours") + "</td><td>" + (T.rate ? m(T.gross) : C.hm(T.worked)) + "</td></tr></table></section>" +
      '<p class="p-confirm">I confirm the hours above are a true record of the time worked.</p>' +
      '<div class="p-sig"><div><span></span><small>EMPLOYEE SIGNATURE</small><em>' + esc(emp.name) + '</em></div><div class="d"><span></span><small>DATE</small></div><div><span></span><small>SUPERVISOR / EMPLOYER SIGNATURE</small><em>' + esc(sh.company) + '</em></div><div class="d"><span></span><small>DATE</small></div></div>' +
      '<footer class="p-foot"><span class="p-disc">Calculated from the entered times and settings; not legal or payroll advice.</span>' + (opts.credit ? '<span class="p-credit">' + CREDIT_LEAD + ' \u2014 <a href="' + creditUrl("print") + '" target="_blank" rel="noopener">' + CREDIT_ASK + "</a></span>" : "") + "</footer>";
  }
  function renderPreview(r) {
    var sh = sheet(); if (r) sh.result = r;
    var el = $("doc");
    el.className = "paper" + (P.pageSize(S.settings.paper, S.settings.currency)[0] === 612 ? " letter" : "");
    el.innerHTML = previewHTML(sh, { credit: !pro(), logo: pro() && S.logo && S.logo.data ? S.logo.data : "" });
    fit();
  }
  function fit() {
    var wrap = $("paper-wrap"), el = $("doc");
    var s = Math.min(1, wrap.clientWidth / el.offsetWidth);
    el.style.transform = "scale(" + s + ")";
    wrap.style.height = Math.ceil(el.offsetHeight * s) + "px";
  }
  window.addEventListener("resize", fit);

  function limitsLine() {
    $("limits").innerHTML = pro() ? "<b>Pro:</b> every employee, saved pay periods, CSV for payroll, all overtime rules, no footer line." :
      '<b>Free plan:</b> 1 employee · current pay period only · print and PDF carry a small Hoursprig line. <a href="#cmx-pro" id="lim-pro">Pro is $15 once</a>';
    var a = $("lim-pro"); if (a) a.onclick = function (e) { e.preventDefault(); upsell(null, "limits"); };
  }

  var changeT = null;
  /* ---------- undo / redo (16 Oct 2026 quality pass): whole-card snapshots after each burst of edits ---------- */
  var hist = [], hi = -1, snapT = 0;
  function snapNow() {
    clearTimeout(snapT);
    var j = JSON.stringify(S);
    if (hi >= 0 && hist[hi] === j) return undoUi();
    hist = hist.slice(0, hi + 1); hist.push(j); if (hist.length > 80) hist.shift(); hi = hist.length - 1; undoUi();
  }
  function undoUi() { var u = $("btn-undo"), r = $("btn-redo"); if (u) { u.disabled = hi <= 0; r.disabled = hi >= hist.length - 1; } }
  function stepHist(d) {
    snapNow();
    var n = hi + d; if (n < 0 || n >= hist.length) return;
    hi = n; S = JSON.parse(hist[hi]); saveNow(); toForm(); renderHistory(); logoUi(); renderDays(); changed(); undoUi();
    toast(d < 0 ? "Undone." : "Redone.");
  }
  function changed(daysOnly) {
    clearTimeout(snapT); snapT = setTimeout(snapNow, 400);
    if ($("btn-undo") && hist.length) $("btn-undo").disabled = false;
    save();
    clearTimeout(changeT);
    changeT = setTimeout(function () {
      var r = result();
      dayTotals(r); renderSummary(r); renderPreview(r);
    }, daysOnly ? 40 : 60);
  }

  /* ---------- PDF, print, CSV ---------- */
  function b64ToBytes(dataUrl) {
    var b = atob(dataUrl.split(",")[1] || ""), u = new Uint8Array(b.length);
    for (var i = 0; i < b.length; i++) u[i] = b.charCodeAt(i);
    return u;
  }
  function pdfFor(sh) {
    var logo = pro() && S.logo && S.logo.data ? { bytes: b64ToBytes(S.logo.data), w: S.logo.w, h: S.logo.h } : null;
    return P.build(sh, { credit: !pro(), creditText: CREDIT, creditUrl: creditUrl("pdf"), logo: logo, paper: S.settings.paper });
  }
  $("btn-pdf").addEventListener("click", function () {
    var sh = sheet(), bytes;
    if (!sh.result.totals.worked) return toast("Add some in and out times first.");
    try { bytes = pdfFor(sh); } catch (e) { return toast("Sorry, the PDF could not be made: " + e.message); }
    X.download(P.fileName(sh), new Blob([bytes], { type: "application/pdf" }));
    done("Timesheet PDF downloaded.");
  });
  $("m-pdf").addEventListener("click", function () { $("btn-pdf").click(); });
  $("btn-print").addEventListener("click", function () { renderPreview(); done(null); setTimeout(function () { window.print(); }, 30); });
  $("btn-csv").addEventListener("click", function () {
    if (!pro()) return upsell("CSV export for payroll is part of Hoursprig Pro.", "csv");
    var sh = sheet();
    X.download(P.fileName(sh, "csv"), C.csvDays([sh]) + "\r\n" + C.csvSummary([sh]), "text/csv;charset=utf-8");
    done("CSV downloaded.");
  });
  function done(msg) {
    S.results = (S.results || 0) + 1; saveNow();
    if (!pro()) $("pro-cta").hidden = false;
    if (msg) toast(msg);
  }

  /* ---------- Pro: saved periods ---------- */
  function recordHistory(p, quiet) {
    var e = emp();
    var id = e.id + ":" + p.start + ":" + p.kind;
    var item = { id: id, saved: new Date().toISOString(), employee: { id: e.id, name: e.name, ref: e.ref, rate: e.rate }, company: S.company, notes: S.notes, settings: clone(S.settings), period: clone(p) };
    S.history = [item].concat(S.history.filter(function (h) { return h.id !== id; })).slice(0, 1000);
    renderHistory();
    if (!quiet) save();
  }
  function histResult(h) { return C.compute(periodObj(h.period), Object.assign({}, h.settings, { rate: h.employee.rate, kind: h.period.kind })); }
  function histSheet(h) { return { company: h.company, employee: { name: h.employee.name, ref: h.employee.ref }, result: histResult(h), notes: h.notes }; }
  function renderHistory() {
    var body = $("hist-body");
    $("hist-btns").hidden = !pro();
    if (!pro()) {
      body.innerHTML = '<div class="locked"><p>The free plan keeps the current pay period. Pro saves every period for every employee, reopens any of them, and exports one CSV for your payroll or accountant.</p><button type="button" class="btn" id="btn-hist-pro">Unlock saved periods</button></div>';
      $("btn-hist-pro").onclick = function () { upsell(null, "history"); };
      return;
    }
    if (!S.history.length) { body.innerHTML = '<p class="hint">Press “Save this period” (or move to the next period) and it appears here.</p>'; return; }
    body.innerHTML = '<div class="table-wrap"><table class="ht"><thead><tr><th>Employee</th><th>Period</th><th class="num">Hours</th><th class="num">Overtime</th><th class="num">Gross pay</th><th>Actions</th></tr></thead><tbody>' +
      S.history.map(function (h) {
        var r = histResult(h), T = r.totals;
        return '<tr data-id="' + esc(h.id) + '"><td>' + esc(h.employee.name || "—") + "</td><td>" + esc(C.fmtRange(r.start, r.end)) + '</td><td class="num">' + C.hm(T.worked) + '</td><td class="num">' + C.hm(T.ot + T.dt) + '</td><td class="num">' + (T.rate ? esc(C.money(T.gross, r.settings.currency)) : "—") +
          '</td><td><button type="button" class="btn ghost sm" data-h="open">Open</button> <button type="button" class="btn ghost sm" data-h="pdf">PDF</button> <button type="button" class="icon-btn" data-h="del" aria-label="Delete this saved period">×</button></td></tr>';
      }).join("") + "</tbody></table></div>";
  }
  $("hist-body").addEventListener("click", function (e) {
    var b = e.target.closest("[data-h]"); if (!b) return;
    var id = b.closest("tr").dataset.id, h = S.history.filter(function (x) { return x.id === id; })[0]; if (!h) return;
    var act = b.dataset.h;
    if (act === "pdf") { var sh = histSheet(h); X.download(P.fileName(sh), new Blob([pdfFor(sh)], { type: "application/pdf" })); return; }
    if (act === "open") {
      var e2 = S.employees.filter(function (x) { return x.id === h.employee.id; })[0];
      if (!e2) { e2 = { id: h.employee.id, name: h.employee.name, ref: h.employee.ref, rate: h.employee.rate }; S.employees.push(e2); }
      S.active = e2.id; S.periods[e2.id] = clone(h.period); S.settings = Object.assign(S.settings, clone(h.settings));
      toForm(); changed(); $("app").scrollIntoView({ behavior: "smooth" }); toast("Opened " + (h.employee.name || "the timesheet") + ".");
      return;
    }
    if (act === "del") { if (!confirm("Delete this saved pay period?")) return; S.history = S.history.filter(function (x) { return x.id !== id; }); save(); renderHistory(); }
  });
  $("btn-save-hist").addEventListener("click", function () {
    if (!pro()) return upsell("Saved pay periods are part of Hoursprig Pro.", "history");
    recordHistory(period()); toast("Saved this pay period.");
  });
  $("btn-csv-all").addEventListener("click", function () {
    if (!pro()) return upsell("CSV export for payroll is part of Hoursprig Pro.", "csv");
    var list = S.history.map(histSheet);
    if (!list.length) return toast("Save a pay period first.");
    X.download("hoursprig-payroll-" + todayISO() + ".csv", C.csvSummary(list) + "\r\n" + C.csvDays(list), "text/csv;charset=utf-8");
  });

  /* ---------- logo (Pro) ---------- */
  $("f-logo").addEventListener("click", function (e) { if (!pro()) { e.preventDefault(); upsell("Your company logo on timesheets is part of Pro.", "logo"); } });
  $("f-logo").addEventListener("change", function () {
    var f = this.files && this.files[0]; this.value = "";
    if (!f) return;
    if (f.size > 5e6) return toast("That image is over 5 MB. Try a smaller logo.");
    var url = URL.createObjectURL(f), img = new Image();
    img.onload = function () {
      var s = Math.min(1, 600 / img.naturalWidth, 240 / img.naturalHeight) || 1;
      var w = Math.max(1, Math.round((img.naturalWidth || 300) * s)), h = Math.max(1, Math.round((img.naturalHeight || 120) * s));
      var c = document.createElement("canvas"); c.width = w; c.height = h;
      var g = c.getContext("2d"); g.fillStyle = "#fff"; g.fillRect(0, 0, w, h); g.drawImage(img, 0, 0, w, h);
      S.logo = { data: c.toDataURL("image/jpeg", 0.9), w: w, h: h };
      URL.revokeObjectURL(url); save(); logoUi(); renderPreview(); toast("Logo added.");
    };
    img.onerror = function () { URL.revokeObjectURL(url); toast("That file could not be read as an image."); };
    img.src = url;
  });
  $("btn-logo-clear").addEventListener("click", function () { S.logo = null; save(); logoUi(); renderPreview(); });
  function logoUi() {
    var has = pro() && S.logo && S.logo.data;
    $("logo-prev").innerHTML = has ? '<img src="' + S.logo.data + '" alt="Your logo">' : "No logo";
    $("btn-logo-clear").hidden = !has;
  }

  /* ---------- example, backup ---------- */
  $("btn-example").addEventListener("click", function () {
    var ex = fromExample($("example-kind").value);
    S.settings = ex.settings; S.company = ex.company; S.notes = "";
    var e = emp();
    e.name = ex.employee.name; e.ref = ex.employee.ref; e.rate = ex.employee.rate;
    S.periods[e.id] = ex.period;
    toForm(); changed();
    if (!pro() && proRulesOn(S.settings)) toast("Example loaded. Its daily and 7th-day rules apply with Pro; free shows weekly overtime.");
    if (window.innerWidth < 980) setTimeout(function () { $("preview").scrollIntoView({ behavior: "smooth", block: "start" }); }, 80);
  });
  $("btn-backup").addEventListener("click", function () {
    if (!pro()) return upsell("JSON backup is part of Hoursprig Pro.", "backup");
    saveNow();
    X.download("hoursprig-backup-" + todayISO() + ".json", JSON.stringify({ app: "hoursprig", version: 1, saved: new Date().toISOString(), data: S }, null, 1), "application/json");
  });
  $("f-restore").addEventListener("change", function () {
    var f = this.files && this.files[0]; this.value = "";
    if (!f) return;
    f.text().then(function (t) {
      var j = JSON.parse(t), d = j && j.app === "hoursprig" ? j.data : null;
      if (!valid(d)) throw new Error("not a Hoursprig backup");
      var f0 = fresh(); Object.keys(f0).forEach(function (k) { if (d[k] == null) d[k] = f0[k]; });
      S = d; saveNow(); toForm(); renderHistory(); logoUi(); changed();
      toast("Backup restored.");
    }).catch(function (e) { toast("Could not restore: " + e.message + "."); });
  });
  $("btn-cta").addEventListener("click", function () { upsell(null, "mid-cta"); });

  /* ---------- Pro state ---------- */
  function onPro(isPro) {
    $("pro-pill").textContent = isPro ? "Pro ✓" : "Go Pro";
    if (isPro) $("pro-cta").hidden = true;
    limitsLine(); renderHistory(); logoUi(); toForm(); changed();
  }

  /* ---------- install + offline ---------- */
  var deferred = null;
  window.addEventListener("beforeinstallprompt", function (e) { e.preventDefault(); deferred = e; $("btn-install").hidden = false; });
  $("btn-install").addEventListener("click", function () {
    if (!deferred) return;
    deferred.prompt(); deferred.userChoice.finally(function () { deferred = null; $("btn-install").hidden = true; });
  });
  window.addEventListener("appinstalled", function () { $("btn-install").hidden = true; });
  if ("serviceWorker" in navigator && (location.protocol === "https:" || /^(localhost|127\.0\.0\.1)$/.test(location.hostname))) {
    window.addEventListener("load", function () { navigator.serviceWorker.register("sw.js").catch(function () { /* offline cache is optional */ }); });
  }

  /* ---------- start ---------- */
  fillSelects();
  X.onChange(onPro);
  var r0 = result(); renderSummary(r0); renderPreview(r0); snapNow();
  $("btn-undo").addEventListener("click", function () { stepHist(-1); });
  $("btn-redo").addEventListener("click", function () { stepHist(1); });
  document.addEventListener("keydown", function (e) {
    var mod = e.ctrlKey || e.metaKey, k = (e.key || "").toLowerCase();
    if (!mod || e.altKey || /^(INPUT|TEXTAREA|SELECT)$/.test((e.target && e.target.tagName) || "")) return;
    if (k === "z") { e.preventDefault(); stepHist(e.shiftKey ? 1 : -1); } else if (k === "y") { e.preventDefault(); stepHist(1); }
  });
  window.Hoursprig = { state: function () { return S; }, result: result, pdf: function () { return pdfFor(sheet()); } };
})();