/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
/* eslint-disable */
// K2B DMS — the OWNER panel (RC22, lane "own").
//  • Owner panel (route "ownerpanel", in the menu ONLY for the owner): confirm it is you (a fresh code), my sign-in codes (phone,
//    authenticator, backup codes), who must use sign-in codes (MFA policy), the users (phone, reset codes, one-time pass, sign out,
//    reset password, turn the login off / on, extra / removed rights), sign everyone out, recent owner actions.
//  • RC34 (hlp): the Helper card — the daily limit for the helper's AI answers, the model, AI answers per role, today's spend, the question log.
//  • Owner overrides (route "owneroverrides", the owner AND the office books): the report the accountant reads — printable / CSV.
//  • window.k2bOwnerOverride: the "Owner override" dialog DMSCore's apiFetch opens when the server offers the OWNER an override for a
//    refusal: a reason, a fresh code if needed, then a single-use token bound to that exact request and the same request again.
// There is NO hidden back door: every power here needs a fresh code, is recorded, and the overrides are on a report others read.
// The server decides everything (src/routes/owner.js, src/lib/owner.js, src/lib/mfa.js); nothing is kept in the browser.

const ownApi = async (path, method, body) => {
  try {
    const d = await apiFetch("/owner" + path, { method: method || "GET", body, noOwnerOverride: true });
    return { ok: true, data: d || {} };
  } catch (e) {
    return { ok: false, status: e.status || 0, data: e.body || {}, code: e.body && e.body.code, error: (e.body && e.body.error) || e.message || "Server unreachable" };
  }
};
const ownFmt = (d) => d ? new Date(d).toLocaleString([], { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }) : "—";
const ownMoney = (c) => (c === null || c === undefined) ? "" : "$" + (Number(c) / 100).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const ownToast = (m, t) => window.k2bToast && window.k2bToast(m, t || "ok");
const OWN_CARD = { background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: "12px 14px" };
const OWN_TH = { textAlign: "left", fontSize: 11, color: "#666", fontWeight: 700, padding: "6px 8px", borderBottom: "1px solid #E2E5EA", whiteSpace: "nowrap" };
const OWN_TD = { fontSize: 12.5, padding: "6px 8px", borderBottom: "1px solid #F0F1F4", verticalAlign: "top" };
const OWN_INPUT = { padding: "6px 8px", border: "1px solid #c0c8d4", fontSize: 13, fontFamily: "var(--font-ui)" };
const OWN_METHOD_LABEL = { sms: "Text message", totp: "Authenticator app", backup: "Backup code" };

const OwnSection = ({ title, sub, right, children, tag }) => (
  <div style={OWN_CARD} data-own-section={tag || ""}>
    <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: sub ? 2 : 8 }}>
      <div style={{ fontSize: 14.5, fontWeight: 800, color: "var(--jb-navy, #11337A)" }}>{title}</div>
      <div style={{ flex: 1 }} />{right}
    </div>
    {sub && <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginBottom: 10 }}>{sub}</div>}
    {children}
  </div>
);

/* ── confirm it is the owner: a fresh code (text message / authenticator / backup code) ── */
const OwnStepUp = ({ me, onDone, compact }) => {
  const methods = [me && me.sms ? "sms" : null, me && me.totp ? "totp" : null, me && me.backupLeft ? "backup" : null].filter(Boolean);
  const [method, setMethod] = React.useState(methods[0] || "sms");
  const [code, setCode] = React.useState("");
  const [note, setNote] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  if (!methods.length) return <div style={{ fontSize: 12, color: "#8a4b00" }}>Set up your sign-in codes first (below).</div>;
  const send = async () => { setErr(""); setNote("Sending…"); const r = await ownApi("/stepup/send", "POST", {}); if (r.ok) setNote("Code sent to " + (r.data.sentTo || "your phone") + "."); else { setNote(""); setErr(r.error); } };
  const go = async () => {
    if (busy) return; setBusy(true); setErr("");
    const r = await ownApi("/stepup", "POST", { method, code: code.trim() });
    setBusy(false);
    if (!r.ok) { setErr(r.error); return; }
    setCode(""); setNote(""); onDone && onDone(r.data);
  };
  return (
    <div data-own="stepup" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {!compact && <div style={{ fontSize: 12, color: "#444" }}>Owner powers need a sign-in code from the last 10 minutes.</div>}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {methods.map(m => <button key={m} className="k2b-button small" data-own-stepup-method={m} onClick={() => { setMethod(m); setCode(""); setErr(""); }} style={{ fontWeight: method === m ? 700 : 400 }}>{OWN_METHOD_LABEL[m]}</button>)}
      </div>
      <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
        {method === "sms" && <button className="k2b-button small" data-own="stepup-send" onClick={send}>Text me a code</button>}
        <input data-own="stepup-code" value={code} onChange={(e) => setCode(e.target.value.slice(0, 20))} onKeyDown={(e) => { if (e.key === "Enter") go(); }}
               placeholder={method === "backup" ? "xxxxx-xxxxx" : "6-digit code"} style={{ ...OWN_INPUT, width: 140 }} autoComplete="one-time-code" />
        <button className="k2b-button small" data-own="stepup-go" onClick={go} disabled={busy || !code.trim()} style={{ fontWeight: 700 }}>{busy ? "Checking…" : "Confirm it's me"}</button>
      </div>
      {note && <div style={{ fontSize: 11.5, color: "#1F6B3A" }}>{note}</div>}
      {err && <div style={{ fontSize: 11.5, color: "#A02234" }} data-own="stepup-err">⚠ {err}</div>}
    </div>
  );
};

/* ══════════════════════════ the Owner override dialog (opened by DMSCore apiFetch) ══════════════════════════ */
const OwnOverrideDialog = ({ ctx, done }) => {
  const [refusal, setRefusal] = React.useState(ctx.refusal);
  const [rules, setRules] = React.useState([]);              // rules already granted in this dialog (a command can hit two)
  const [reason, setReason] = React.useState("");
  const [account, setAccount] = React.useState((ctx.refusal.ownerOverride && ctx.refusal.ownerOverride.hint && ctx.refusal.ownerOverride.hint.suggest) || "");
  const [status, setStatus] = React.useState(null);
  const [fresh, setFresh] = React.useState(!!(ctx.refusal.ownerOverride && ctx.refusal.ownerOverride.stepUpFresh));
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const ov = refusal.ownerOverride || {};
  const needAcct = [ov.rule].concat(rules).indexOf("deal.cash_balance_due") !== -1 || (Array.isArray(ov.needs) && ov.needs.indexOf("account") !== -1);   // RC23 (corr): + deal.held_account
  const heldAcctRule = ov.rule === "deal.held_account";
  React.useEffect(() => { (async () => { const r = await ownApi("/status"); if (r.ok) { setStatus(r.data); if (r.data.stepUp && r.data.stepUp.fresh) setFresh(true); } })(); }, []);
  const cancel = () => done({ ok: false, err: ctx.err });
  const go = async () => {
    if (busy) return;
    if (reason.trim().length < 5) { setErr("Type the reason (a few words) — it goes on the Owner overrides report."); return; }
    if (needAcct && !account.trim()) { setErr(heldAcctRule ? "Pick the liability account (from the chart of accounts) the customer's money is held in." : "Pick the receivable account from the chart of accounts."); return; }
    setBusy(true); setErr("");
    const all = rules.concat([ov.rule]).filter((x, i, a) => x && a.indexOf(x) === i);
    const hadKey = ctx.headers && ctx.headers["Idempotency-Key"];
    const newKey = hadKey ? (window.DMS && window.DMS._newIdemKey ? window.DMS._newIdemKey("ov") : "ov-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10)) : "";
    const t = await ownApi("/override-token", "POST", { method: "POST", path: "/api" + ctx.path, idemKey: newKey || undefined, body: ctx.reqBody, rules: all, reason: reason.trim(), params: needAcct ? { account: account.trim() } : undefined });
    if (!t.ok) { setBusy(false); if (t.code === "stepup_required" || t.code === "owner_enroll_required") setFresh(false); setErr(t.error); return; }
    const headers = Object.assign({}, ctx.headers || {}, { "X-K2B-Override": t.data.token });
    if (newKey) headers["Idempotency-Key"] = newKey;
    try {
      const res = await apiFetch(ctx.path, { method: "POST", body: ctx.reqBody, headers, noOwnerOverride: true });
      setBusy(false);
      ownToast("Owner override recorded — " + all.length + " rule" + (all.length > 1 ? "s" : "") + " set aside. It is on the Owner overrides report.", "ok");
      done({ ok: true, result: res });
    } catch (e) {
      setBusy(false);
      const b = e && e.body;
      if (b && b.ownerOverride && all.indexOf(b.ownerOverride.rule) === -1) {   // a second rule of the same command
        setRules(all); setRefusal(b); setErr(""); return;
      }
      done({ ok: false, err: e });
    }
  };
  return (
    <K2BModal title="Owner override" onClose={cancel} width={520}
              buttons={<><K2BButton onClick={cancel}>Cancel — keep the refusal</K2BButton><K2BButton primary onClick={go} disabled={busy || !fresh}>{busy ? "Working…" : "Override and send"}</K2BButton></>}>
      <div data-own="override-dialog" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
        <div style={{ background: "#FBE9EC", border: "1px solid #A02234", padding: "6px 10px", marginBottom: 8 }}>⚠ {refusal.error}</div>
        <div><b>Owner override:</b> {ov.label}{rules.length ? <> <i>(also: {rules.length} rule{rules.length > 1 ? "s" : ""} already chosen)</i></> : null}</div>
        <div style={{ color: "#555", margin: "4px 0 8px" }}>Only you (the owner) see this. The books still have to balance; the override, your reason and the amount go on the <b>Owner overrides</b> report the office and your accountant read, and into the audit log. The pass works once, for this exact request, for 5 minutes.</div>
        {!fresh && <div style={{ border: "1px dashed #B26A00", padding: 8, marginBottom: 8 }}><OwnStepUp me={status && status.me} compact onDone={() => setFresh(true)} /></div>}
        <div style={{ fontWeight: 700, marginTop: 4 }}>Reason (required)</div>
        <textarea data-own="override-reason" value={reason} onChange={(e) => setReason(e.target.value.slice(0, 500))} rows={3} style={{ ...OWN_INPUT, width: "100%", boxSizing: "border-box" }} placeholder="Why is this right? e.g. Customer pays the balance Friday — approved by me." />
        {needAcct && <div style={{ marginTop: 6 }}><b>{heldAcctRule ? "Liability account the customer's money is held in" : "Receivable account for the unpaid balance"}</b> (from the chart of accounts): <input data-own="override-account" value={account} onChange={(e) => setAccount(e.target.value.toUpperCase().slice(0, 20))} style={{ ...OWN_INPUT, width: 90 }} />
          {ov.hint && ov.hint.balanceDueCents ? <span style={{ color: "#555" }}> — balance {ownMoney(ov.hint.balanceDueCents)}</span> : null}</div>}
        {err && <div style={{ color: "#A02234", marginTop: 6 }} data-own="override-err">⚠ {err}</div>}
      </div>
    </K2BModal>
  );
};
let ownOvRoot = null;
window.k2bOwnerOverride = (ctx) => new Promise((resolve) => {
  try {
    let host = document.getElementById("k2b-owner-override-host");
    if (!host) { host = document.createElement("div"); host.id = "k2b-owner-override-host"; document.body.appendChild(host); }
    if (!ownOvRoot) ownOvRoot = ReactDOM.createRoot(host);
    const done = (r) => { try { ownOvRoot.render(null); } catch (e) {} resolve(r); };
    ownOvRoot.render(<OwnOverrideDialog ctx={ctx} done={done} key={Date.now()} />);
  } catch (e) { resolve({ ok: false, err: ctx.err }); }
});

/* ══════════════════════════ Owner panel ══════════════════════════ */
const OwnShowOnce = ({ title, lines, note, onClose }) => (
  <K2BModal title={title} onClose={onClose} width={460} buttons={<K2BButton primary onClick={onClose}>I wrote it down</K2BButton>}>
    <div data-own="show-once">
      <div style={{ fontFamily: "'Courier Prime', monospace", fontSize: 16, background: "#FFFDE7", border: "1px solid #E0D58A", padding: 10, lineHeight: 1.7 }}>
        {lines.map((l, i) => <div key={i} data-own-secret="1">{l}</div>)}
      </div>
      <div style={{ fontSize: 12, color: "#555", marginTop: 8 }}>{note} It is shown only now — it is not kept anywhere you can read it again.</div>
    </div>
  </K2BModal>
);

const OwnMyCodes = ({ st, reload, setShow }) => {
  const me = (st && st.me) || {};
  const [mode, setMode] = React.useState(null);            // "sms" | "totp"
  const [pw, setPw] = React.useState(""); const [phone, setPhone] = React.useState(""); const [code, setCode] = React.useState("");
  const [qr, setQr] = React.useState(null); const [sent, setSent] = React.useState(""); const [err, setErr] = React.useState("");
  const start = async () => {
    setErr("");
    const r = await ownApi("/enroll/start", "POST", { password: pw, method: mode, phone });
    if (!r.ok) { setErr(r.error); return; }
    if (mode === "sms") setSent("Code sent to " + r.data.sentTo + ".");
    else setQr({ png: r.data.qrPng, secret: r.data.secret });
  };
  const confirm = async () => {
    setErr("");
    const r = await ownApi("/enroll/confirm", "POST", { method: mode, code: code.trim() });
    if (!r.ok) { setErr(r.error); return; }
    setMode(null); setPw(""); setPhone(""); setCode(""); setQr(null); setSent("");
    if (r.data.backupCodes) setShow({ title: "Your 10 backup codes", lines: r.data.backupCodes, note: r.data.note || "Each works once, when your phone is not at hand." });
    ownToast("Sign-in codes set up.", "ok"); reload();
  };
  const newBackup = async () => {
    if (!window.confirm("Make 10 NEW backup codes? The old ones stop working.")) return;
    const r = await ownApi("/backup-codes/new", "POST", {});
    if (!r.ok) { setErr(r.error); return; }
    setShow({ title: "Your 10 new backup codes", lines: r.data.backupCodes, note: r.data.note || "" }); reload();
  };
  return (
    <OwnSection tag="mycodes" title="My sign-in codes" sub="Your own codes: a text message to your cell phone, and / or the authenticator app, plus 10 one-time backup codes for when the phone is not at hand. Lost everything? From the server's terminal: node scripts/owner-recover.js --mfa">
      <div style={{ fontSize: 12.5, marginBottom: 8 }} data-own="mycodes-status">
        Text message: <b>{me.sms ? "ON — " + (me.phoneFull || me.phone) : "off"}</b> · Authenticator app: <b>{me.totp ? "ON" : "off"}</b> · Backup codes left: <b>{me.backupLeft || 0}</b>
      </div>
      {!mode && <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        <button className="k2b-button small" data-own="enroll-sms" onClick={() => { setMode("sms"); setErr(""); }}>{me.sms ? "Change my phone" : "Set up text-message codes"}</button>
        <button className="k2b-button small" data-own="enroll-totp" onClick={() => { setMode("totp"); setErr(""); }}>{me.totp ? "Set up the authenticator again" : "Set up the authenticator app"}</button>
        {(me.sms || me.totp) && <button className="k2b-button small" data-own="backup-new" onClick={newBackup}>New backup codes</button>}
      </div>}
      {mode && <div style={{ display: "flex", flexDirection: "column", gap: 6, maxWidth: 420 }}>
        {!sent && !qr && <>
          <label style={{ fontSize: 12 }}>Your password (to prove it is you): <input type="password" data-own="enroll-pw" value={pw} onChange={(e) => setPw(e.target.value)} style={{ ...OWN_INPUT, width: 200 }} autoComplete="current-password" /></label>
          {mode === "sms" && <label style={{ fontSize: 12 }}>Your cell phone: <input data-own="enroll-phone" value={phone} onChange={(e) => setPhone(e.target.value.slice(0, 20))} placeholder="573-555-1234" style={{ ...OWN_INPUT, width: 160 }} /></label>}
          <div style={{ display: "flex", gap: 6 }}><button className="k2b-button small" data-own="enroll-start" onClick={start} style={{ fontWeight: 700 }}>{mode === "sms" ? "Send code" : "Show the QR code"}</button><button className="k2b-button small" onClick={() => setMode(null)}>Cancel</button></div>
        </>}
        {sent && <div style={{ fontSize: 12, color: "#1F6B3A" }}>{sent}</div>}
        {qr && <div style={{ textAlign: "center" }}>{qr.png && <img src={qr.png} alt="Authenticator set-up" style={{ width: 150, height: 150 }} />}<div style={{ fontSize: 10.5, color: "#666", wordBreak: "break-all" }}>or type the key: {qr.secret}</div></div>}
        {(sent || qr) && <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <input data-own="enroll-code" value={code} onChange={(e) => setCode(e.target.value.replace(/[^0-9]/g, "").slice(0, 6))} placeholder="6-digit code" style={{ ...OWN_INPUT, width: 120 }} />
          <button className="k2b-button small" data-own="enroll-confirm" onClick={confirm} style={{ fontWeight: 700 }}>Confirm</button><button className="k2b-button small" onClick={() => { setMode(null); setSent(""); setQr(null); }}>Cancel</button>
        </div>}
      </div>}
      {err && <div style={{ color: "#A02234", fontSize: 12, marginTop: 6 }}>⚠ {err}</div>}
    </OwnSection>
  );
};

const OwnPolicy = ({ st, users, reload }) => {
  const p = (st && st.policy) || { enabled: false, scope: "everyone", chosen: [], methods: ["sms", "totp"] };
  const [pol, setPol] = React.useState(p);
  const [msg, setMsg] = React.useState(null);
  React.useEffect(() => { setPol(p); }, [JSON.stringify(p)]);
  const toggle = (arr, v) => (arr.indexOf(v) === -1 ? arr.concat([v]) : arr.filter(x => x !== v));
  const save = async () => {
    const r = await ownApi("/policy", "POST", pol);
    if (!r.ok) { setMsg({ err: r.error }); return; }
    setMsg({ ok: r.data.note, noWay: r.data.noWayYet || [] }); ownToast("Sign-in code rules saved.", "ok"); reload();
  };
  return (
    <OwnSection tag="policy" title="Who must use sign-in codes" sub="Off until you turn it on. People already signed in stay signed in; they are asked at their next sign-in (or press Sign everyone out). Text messages cost Twilio's per-message price.">
      <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12.5 }}>
        <label><input type="checkbox" data-own="policy-on" checked={!!pol.enabled} onChange={(e) => setPol(Object.assign({}, pol, { enabled: e.target.checked }))} /> <b>Require sign-in codes</b></label>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          {[["everyone", "Everyone"], ["office", "Office + managers"], ["chosen", "Only the people I pick"]].map(([k, l]) => (
            <label key={k}><input type="radio" name="own-scope" data-own-scope={k} checked={pol.scope === k} onChange={() => setPol(Object.assign({}, pol, { scope: k }))} /> {l}</label>))}
        </div>
        {pol.scope === "chosen" && <div style={{ display: "flex", flexWrap: "wrap", gap: 10, padding: "4px 0" }}>
          {(users || []).filter(u => u.active && !u.owner).map(u => <label key={u.id} style={{ fontSize: 12 }}><input type="checkbox" data-own-chosen={u.id} checked={pol.chosen.indexOf(u.id) !== -1} onChange={() => setPol(Object.assign({}, pol, { chosen: toggle(pol.chosen, u.id) }))} /> {u.name || u.id}</label>)}
        </div>}
        <div style={{ display: "flex", gap: 14 }}>Ways allowed:
          <label><input type="checkbox" data-own-method="sms" checked={pol.methods.indexOf("sms") !== -1} onChange={() => setPol(Object.assign({}, pol, { methods: toggle(pol.methods, "sms") }))} /> Text message</label>
          <label><input type="checkbox" data-own-method="totp" checked={pol.methods.indexOf("totp") !== -1} onChange={() => setPol(Object.assign({}, pol, { methods: toggle(pol.methods, "totp") }))} /> Authenticator app</label>
        </div>
        <div><button className="k2b-button small" data-own="policy-save" onClick={save} style={{ fontWeight: 700 }}>Save</button></div>
        {msg && msg.err && <div style={{ color: "#A02234" }}>⚠ {msg.err}</div>}
        {msg && msg.ok && <div style={{ color: "#1F6B3A" }}>{msg.ok}</div>}
        {msg && msg.noWay && msg.noWay.length > 0 && <div style={{ color: "#8a4b00" }} data-own="policy-noway">⚠ These people will be asked for a code but have no phone yet: {msg.noWay.map(x => x.name || x.id).join(", ")}. Add their phone below, or they ask you for a one-time pass.</div>}
      </div>
    </OwnSection>
  );
};

const OwnUsers = ({ data, reload, setShow, fresh }) => {
  const [rights, setRights] = React.useState(null);        // the user whose extra / removed rights are open
  const [storesOf, setStoresOf] = React.useState(null);    // RC35 (brd): the user whose stores are open
  const [allStores, setAllStores] = React.useState([]);
  React.useEffect(() => { (async () => { const r = await ownApi("/stores"); if (r.ok) setAllStores(r.data.stores || []); })(); }, []);
  const [err, setErr] = React.useState("");
  const act = async (u, path, body, confirmText, onOk) => {
    if (confirmText && !window.confirm(confirmText)) return;
    setErr("");
    const r = await ownApi("/users/" + encodeURIComponent(u.id) + path, "POST", body || {});
    if (!r.ok) { setErr(u.id + ": " + r.error); return; }
    if (onOk) onOk(r.data); else ownToast("Done — " + u.id + ".", "ok");
    reload();
  };
  const grantable = (data && data.grantable) || [];
  const capLabel = (c) => { const g = grantable.find(x => x.cap === c); return g ? g.label : c; };
  return (
    <OwnSection tag="users" title="Users" sub={fresh ? "Full phone numbers are shown while you are confirmed." : "Confirm it is you to see full phone numbers and to make changes."}>
      {err && <div style={{ color: "#A02234", fontSize: 12, marginBottom: 6 }}>⚠ {err}</div>}
      <div style={{ overflowX: "auto" }}>
        <table style={{ borderCollapse: "collapse", width: "100%", minWidth: 860 }} data-own="users-table">
          <thead><tr><th style={OWN_TH}>Login</th><th style={OWN_TH}>Role</th><th style={OWN_TH}>Sign-in codes</th><th style={OWN_TH}>Extra / removed rights</th><th style={OWN_TH}>Stores</th><th style={OWN_TH}>Actions</th></tr></thead>
          <tbody>{((data && data.users) || []).map(u => (
            <tr key={u.id} data-own-user={u.id} style={{ opacity: u.active ? 1 : 0.55 }}>
              <td style={OWN_TD}><b>{u.name || u.id}</b><div style={{ fontSize: 11, color: "#777" }}>{u.id}{u.owner ? " · OWNER" : ""}{u.active ? "" : " · login OFF"}</div></td>
              <td style={OWN_TD}>{u.role || "—"}</td>
              <td style={OWN_TD} data-own-mfa={u.id}>{u.mfa.sms ? "📱 " + (u.mfa.phoneFull || u.mfa.phone) : "no phone"}{u.mfa.totp ? " · app" : ""}{u.mfaRequired ? <div style={{ fontSize: 11, color: "#1F3D7A" }}>asked at sign-in</div> : null}</td>
              <td style={OWN_TD} data-own-grants={u.id}>
                {u.grants.grant.map(c => <span key={"g" + c} style={{ display: "inline-block", fontSize: 11, background: "#E6F4EA", border: "1px solid #9CCFAA", padding: "0 5px", margin: 1 }} title={capLabel(c)}>+ {capLabel(c)}</span>)}
                {u.grants.revoke.map(c => <span key={"r" + c} style={{ display: "inline-block", fontSize: 11, background: "#FBE9EC", border: "1px solid #E3A1AC", padding: "0 5px", margin: 1 }} title={capLabel(c)}>− {capLabel(c)}</span>)}
                {!u.grants.grant.length && !u.grants.revoke.length && <span style={{ color: "#999", fontSize: 11 }}>as the role</span>}
              </td>
              <td style={OWN_TD}>{window.OwnUserStoreChips ? <window.OwnUserStoreChips user={u} /> : null}</td>
              <td style={OWN_TD}>{u.owner ? <span style={{ fontSize: 11, color: "#777" }}>your own login — see My sign-in codes</span> : <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                <button className="k2b-button small" data-own-act="phone" onClick={() => { const ph = window.prompt("Cell phone for " + (u.name || u.id) + "'s sign-in codes (like 573-555-1234):", ""); if (ph) act(u, "/phone", { phone: ph }); }}>Phone…</button>
                <button className="k2b-button small" data-own-act="reset" onClick={() => act(u, "/mfa-reset", {}, "Remove " + (u.name || u.id) + "'s sign-in codes (phone and authenticator)?")}>Reset codes</button>
                <button className="k2b-button small" data-own-act="pass" onClick={() => act(u, "/pass", { reason: "issued from the Owner panel" }, null, (d) => setShow({ title: "One-time sign-in pass for " + (u.name || u.id), lines: [d.pass], note: d.note || "" }))}>One-time pass</button>
                <button className="k2b-button small" data-own-act="signout" onClick={() => act(u, "/signout", {}, "Sign " + (u.name || u.id) + " out everywhere now?")}>Sign out everywhere</button>
                <button className="k2b-button small" data-own-act="password" onClick={() => act(u, "/password", {}, "Give " + (u.name || u.id) + " a new temporary password? They are signed out everywhere.", (d) => setShow({ title: "Temporary password for " + (u.name || u.id), lines: [d.temporaryPassword], note: d.note || "" }))}>Reset password</button>
                {u.active ? <button className="k2b-button small" data-own-act="disable" onClick={() => act(u, "/disable", { reason: "turned off from the Owner panel" }, "Turn " + (u.name || u.id) + "'s login OFF now?")}>Disable login now</button>
                  : <button className="k2b-button small" data-own-act="enable" onClick={() => act(u, "/enable", {})}>Turn login on</button>}
                <button className="k2b-button small" data-own-act="rights" onClick={() => setRights(u)}>Rights…</button>
                {fresh && window.OsUserStores ? <button className="k2b-button small" data-own-act="stores" onClick={() => setStoresOf(u)}>Stores…</button> : null}
              </div>}</td>
            </tr>))}</tbody>
        </table>
      </div>
      {storesOf && window.OsUserStores ? <window.OsUserStores user={storesOf} stores={allStores} onClose={() => setStoresOf(null)} onChanged={reload} /> : null}
      {rights && <K2BModal title={"Extra / removed rights — " + (rights.name || rights.id)} onClose={() => setRights(null)} width={560} buttons={<K2BButton onClick={() => setRights(null)}>Close</K2BButton>}>
        <div style={{ fontSize: 12, color: "#555", marginBottom: 8 }}>On top of the role ({rights.role || "no role"}). The server applies it everywhere (screens, reports, the AI connector). Every change is recorded.</div>
        <table style={{ borderCollapse: "collapse", width: "100%" }} data-own="rights-table"><tbody>
          {grantable.map(g => {
            const st = rights.grants.grant.indexOf(g.cap) !== -1 ? "grant" : rights.grants.revoke.indexOf(g.cap) !== -1 ? "revoke" : "role";
            const set = async (mode) => { await act(rights, "/grants", { cap: g.cap, mode, reason: "Owner panel" }, null, (d) => setRights(Object.assign({}, rights, { grants: d.grants }))); };
            return (<tr key={g.cap}><td style={OWN_TD}>{g.label}</td><td style={OWN_TD}>
              <select data-own-cap={g.cap} value={st} onChange={(e) => set(e.target.value === "role" ? "clear" : e.target.value)} style={OWN_INPUT}>
                <option value="role">As the role</option>{g.grant && <option value="grant">Give it</option>}{g.revoke && <option value="revoke">Take it away</option>}
              </select></td></tr>);
          })}
        </tbody></table>
      </K2BModal>}
    </OwnSection>
  );
};

/* RC24 (svcm): the service goodwill limit — the most the Service Manager / the office may approve as policy / goodwill (POST /api/fixedops/policy)
   without the owner; above it the approval is refused and the owner can override it. Stored on the server (fo_settings); owner + fresh code. */
const OwnSvcmLimit = () => {
  const [st, setSt] = React.useState(null);
  const [val, setVal] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const load = async () => {
    try { const d = await apiFetch("/fixedops/settings"); setSt(d); setVal(d.policyLimit != null ? String(d.policyLimit.toFixed(2)) : ""); }
    catch (e) { setSt({ ok: false, note: (e.body && e.body.error) || e.message }); }
  };
  React.useEffect(() => { load(); }, []);
  const save = async () => {
    setMsg("");
    try { const d = await apiFetch("/fixedops/settings", { method: "POST", body: { policyLimit: val.trim() === "" ? null : val.trim() }, noOwnerOverride: true }); ownToast(d.message, "ok"); setMsg(d.message); load(); }
    catch (e) { const m = (e.body && e.body.error) || e.message; ownToast(m, "error"); setMsg(m); }
  };
  return (
    <OwnSection tag="svcmlimit" title="Service goodwill limit" sub="The most the Service Manager or the office may approve as policy / goodwill on the Policy / Goodwill screen without you. Above it the approval is refused and you can override it (with a reason, on the Owner overrides report). Blank = no limit.">
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5 }}>Limit $</span>
        <input data-own="policy-limit" value={val} onChange={(e) => setVal(e.target.value.replace(/[^0-9.,]/g, ""))} placeholder="no limit" style={{ ...OWN_INPUT, width: 120, fontFamily: "var(--jb-mono)" }} />
        <button className="k2b-button small" data-own="policy-limit-save" onClick={save} style={{ fontWeight: 700 }}>Save</button>
        <span data-own="policy-limit-note" style={{ fontSize: 12, color: "#555" }}>{st ? st.note : "Loading…"}{st && st.setBy ? ` (set by ${st.setBy}${st.setAt ? " on " + ownFmt(st.setAt) : ""})` : ""}</span>
      </div>
      {msg && <div style={{ fontSize: 12, color: "#0E7A37", marginTop: 6 }}>{msg}</div>}
    </OwnSection>
  );
};

/* RC26 (inv): the parts count limit — the most a count adjustment may change a part's value (Physical Inventory › Post count, POST /api/parts/adjust)
   for a Parts / Service login; above it the office posts it (or you override it). Plus the bulk fluid account (247 the station's, or 244 GAS, OIL,
   GREASE - INV). Stored on the server (inv_settings); owner + fresh code. */
const OwnPartsLimit = () => {
  const [st, setSt] = React.useState(null);
  const [val, setVal] = React.useState("");
  const [bulk, setBulk] = React.useState("247");
  const [coreDep, setCoreDep] = React.useState("331");   // RC28 (fx, gate 2c): the core-deposit liability account
  const [msg, setMsg] = React.useState("");
  const load = async () => {
    try { const d = await apiFetch("/parts/settings"); setSt(d); setVal(d.adjustLimit != null ? String(Number(d.adjustLimit).toFixed(2)) : ""); setBulk(d.bulkAcct || "247"); setCoreDep(d.coreDepositAcct || "331"); }
    catch (e) { setSt({ ok: false, note: (e.body && e.body.error) || e.message }); }
  };
  React.useEffect(() => { load(); }, []);
  const save = async () => {
    setMsg("");
    try { const d = await apiFetch("/parts/settings", { method: "POST", body: { adjustLimit: val.trim() === "" ? null : val.trim(), bulkAcct: bulk, coreDepositAcct: (coreDep || "331").trim() }, noOwnerOverride: true }); ownToast(d.message, "ok"); setMsg(d.message); load(); }
    catch (e) { const m = (e.body && e.body.error) || e.message; ownToast(m, "error"); setMsg(m); }
  };
  return (
    <OwnSection tag="partslimit" title="Parts count limit" sub="The most a parts count may change a part's value (Physical Inventory › Post count) for a Parts, Service Advisor or Service login. Above it the office posts the count, or you override it (with a reason, on the Owner overrides report). Blank = no limit (how the station worked before).">
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5 }}>Limit $</span>
        <input data-own="parts-limit" value={val} onChange={(e) => setVal(e.target.value.replace(/[^0-9.,]/g, ""))} placeholder="no limit" style={{ ...OWN_INPUT, width: 120, fontFamily: "var(--jb-mono)" }} />
        <span style={{ fontSize: 12.5, marginLeft: 8 }}>Bulk oil deliveries to</span>
        <select data-own="bulk-acct" value={bulk} onChange={(e) => setBulk(e.target.value)} style={{ ...OWN_INPUT, width: "auto" }}>
          <option value="247">247 (the station's account — WORK IN PROCESS - LABOR in your chart)</option>
          <option value="244">244 GAS, OIL, GREASE - INV</option>
        </select>
        <span style={{ fontSize: 12.5, marginLeft: 8 }} title="A parts ticket collects the core deposit and holds it here until the core comes back (a liability account of your chart — ask your accountant)">Core deposits held in</span>
        <input data-own="core-deposit-acct" value={coreDep} onChange={(e) => setCoreDep(e.target.value.toUpperCase().replace(/[^0-9A-Z]/g, ""))} style={{ ...OWN_INPUT, width: 70, fontFamily: "var(--jb-mono)" }} />
        <button className="k2b-button small" data-own="parts-limit-save" onClick={save} style={{ fontWeight: 700 }}>Save</button>
        <span data-own="parts-limit-note" style={{ fontSize: 12, color: "#555" }}>{st ? st.note : "Loading…"}</span>
      </div>
      {msg && <div style={{ fontSize: 12, color: "#0E7A37", marginTop: 6 }}>{msg}</div>}
    </OwnSection>
  );
};

/* RC28 (fx, the reviewer's finding 3): the store's pay plan is ONE server-stored, versioned setting (Pay Plan page) — shown here so the owner
   checks it matches the real plan before the next deal posts */
const OwnPayPlan = ({ go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => { if (D && D.loadPayPlan) D.loadPayPlan().then(force); }, []);
  const cfg = D && D.payPlanConfig ? D.payPlanConfig() : null;
  return (
    <OwnSection tag="payplan" title="Pay plan" sub="The commission plan the desk, the posting, the product chargebacks and the payroll / commission screens all use — kept on the server, one version at a time, each with the day it takes effect. A deal already posted keeps the version it was posted with.">
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", fontSize: 12.5 }}>
        <span data-own="payplan-now">{cfg ? `In effect: version ${cfg.version || 0}${cfg.version ? " (from " + cfg.effectiveOn + ")" : " — the shipped default (20 % new / 25 % used, $150 minimum); check it matches your real plan"} · ${Math.round(cfg.newPct * 10000) / 100} % new · ${Math.round(cfg.usedPct * 10000) / 100} % used · minimum $${(+cfg.miniFloor || 0).toFixed(2)}` : "Loading…"}</span>
        <button className="k2b-button small" data-own="payplan-open" onClick={() => go && go("payplan")} style={{ fontWeight: 700 }}>Open the Pay Plan page</button>
      </div>
    </OwnSection>
  );
};

/* RC34 (hlp): the Jared helper's card — the daily limit for the AI answers (dollars per store day, enforced on the server), the model,
   AI answers on / off (per role), today's spend and the question log (who / when / role / screen / topics / tokens / cost — never the words
   typed, never a key). Reading needs the owner; Save needs a fresh code like every other owner setting. */
const OWN_HELPER_BLURB = { "claude-sonnet-5-5": "the default — fine for how-to answers, the lower price", "claude-opus-5-5": "more careful answers, about twice the price per question", "claude-fable-5-1": "the most capable, about 2.5 × Opus; needs 30-day data retention on your Anthropic account" };
const OWN_HELPER_WHY = { cap: "daily limit reached", no_key: "no AI key", off: "AI answers off", role_off: "AI off for the role", busy: "helper busy", injection: "asked for secrets / to change the rules", too_fast: "too many in a minute", too_long: "question too long", model_refused: "the AI declined", too_long_answer: "answer cut off", bad_answer: "answer unreadable", not_allowed: "not for this role", not_dms: "not about the DMS", unknown: "not covered", refused: "refused", aborted: "closed before the answer" };
const ownHelperWhy = (r) => { const s = String(r || ""); if (!s) return ""; if (/^upstream/.test(s)) return "AI not available (" + s.replace(/^upstream:/, "") + ")"; if (/^blocked/.test(s)) return "answer stopped by the check (" + s.replace(/^blocked:/, "") + ")"; return OWN_HELPER_WHY[s] || s; };
const ownMicros = (m) => { const n = Number(m || 0) / 1e6; return "$" + (n > 0 && n < 0.1 ? n.toFixed(4) : n.toFixed(2)); };
// fix round (r34-aud A8): a range, not the warm-only top number - each role's first question after 5 quiet minutes costs the cold price,
// and the last question of the day must fit its worst case (the hold) under the limit
const ownHelperRange = (capDollars, pq) => {
  const usable = Number(capDollars || 0) * 1e6 - Number(pq.hold || 0);
  if (!pq.warm || !pq.cold || usable <= 0) return "0";
  const lo = Math.floor(usable / pq.cold); const hi = Math.floor(usable / pq.warm);
  const r = (n) => (n >= 100 ? Math.round(n / 5) * 5 : n);
  return lo === hi ? String(r(lo)) : r(lo) + " to " + r(hi);
};
const OwnHelper = ({ fresh }) => {
  const [st, setSt] = React.useState(null);
  const [rows, setRows] = React.useState([]);
  const [cap, setCap] = React.useState("");
  const [model, setModel] = React.useState("");
  const [enabled, setEnabled] = React.useState(true);
  const [roles, setRoles] = React.useState({});
  const [msg, setMsg] = React.useState("");
  const load = async () => {
    try {
      const d = await apiFetch("/helper/settings"); setSt(d); setCap(d.capDollars); setModel(d.model); setEnabled(!!d.enabled); setRoles(d.aiRoles || {});
      const l = await apiFetch("/helper/log?limit=60"); setRows((l && l.rows) || []);
    } catch (e) { setSt({ ok: false, error: (e.body && e.body.error) || e.message }); }
  };
  React.useEffect(() => { load(); }, []);
  const save = async () => {
    setMsg("");
    try { const d = await apiFetch("/helper/settings", { method: "POST", body: { capDollars: cap, model, enabled, aiRoles: roles }, noOwnerOverride: true }); ownToast(d.message, "ok"); setMsg(d.message); load(); }
    catch (e) { const m = (e.body && e.body.error) || e.message; ownToast(m, "error"); setMsg(m); }
  };
  if (!st) return <OwnSection tag="helper" title="Helper (JB)"><div style={{ fontSize: 12.5 }}>Loading…</div></OwnSection>;
  if (st.ok === false) return <OwnSection tag="helper" title="Helper (JB)"><div style={{ fontSize: 12.5, color: "#A02234" }}>⚠ {st.error}</div></OwnSection>;
  const m = (st.models || []).find((x) => x.id === model) || {};
  const pq = m.perQuestionMicros || {};
  const t = st.today || {};
  return (
    <OwnSection tag="helper" title={"Helper (JB) — for " + (window.K2BStore ? window.K2BStore.branding().dba : "this store")} sub={"The helper in the top bar explains how the DMS works; its AI answers are paid from the store's Anthropic key (the same key as AI Import). Set the most they may cost per store day: when it is reached, the helper answers from its built-in answers (and says so) until the next day. The limit is enforced on the server, so no PC can go over it. " + st.keyNote}>
      <div data-own="helper-today" style={{ fontSize: 12.5, marginBottom: 8, padding: "6px 8px", background: t.capReached ? "#FFF2F0" : "#F5F8FF", border: "1px solid " + (t.capReached ? "#E5B7B0" : "#D4E0F5"), borderRadius: 6 }}>
        Today ({t.day}): <b>{t.spent} of ${st.capDollars}</b> used{t.capReached ? " — the limit is reached, built-in answers until tomorrow" : ""} · {t.questions || 0} question{t.questions === 1 ? "" : "s"} ({t.aiAnswers || 0} AI answer{t.aiAnswers === 1 ? "" : "s"}, {t.builtinAnswers || 0} built-in, {t.refused || 0} refused)
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5 }}>Daily limit $</span>
        <input data-own="helper-cap" value={cap} onChange={(e) => setCap(e.target.value.replace(/[^0-9.]/g, ""))} placeholder="5.00" style={{ ...OWN_INPUT, width: 90, fontFamily: "var(--jb-mono)" }} />
        <span style={{ fontSize: 12.5, marginLeft: 8 }}>Model</span>
        <select data-own="helper-model" value={model} onChange={(e) => setModel(e.target.value)} style={{ ...OWN_INPUT, width: "auto" }}>
          {(st.models || []).map((x) => <option key={x.id} value={x.id}>{x.label}{x.id === st.defaultModel ? " (default)" : ""} — {OWN_HELPER_BLURB[x.id] || x.blurb}</option>)}
        </select>
        <label style={{ fontSize: 12.5, marginLeft: 8, display: "inline-flex", alignItems: "center", gap: 4 }}><input type="checkbox" data-own="helper-enabled" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} /> AI answers on</label>
        <button className="k2b-button small" data-own="helper-save" onClick={save} disabled={!fresh} title={fresh ? "Save" : "Confirm it's you first (at the top of this page)"} style={{ fontWeight: 700 }}>Save</button>
        {!fresh && <span style={{ fontSize: 12, color: "#8A5A00" }}>Confirm it's you first (top of this page) to change these.</span>}
      </div>
      <div data-own="helper-cost" style={{ fontSize: 12, color: "#555", marginTop: 6 }}>
        A typical question on {m.label || model} costs about {ownMicros(pq.warm)} — about {ownMicros(pq.cold)} when nobody in that role asked for 5 minutes (the helper's guide is then read in again). ${st.capDollars} a day is roughly {ownHelperRange(st.capDollars, pq)} questions (the low number if every question comes after a quiet spell). While a question is being answered about {ownMicros(pq.hold)} is held back against the limit, then only its real cost counts.
      </div>
      <div data-own="helper-roles" style={{ display: "flex", flexWrap: "wrap", gap: "4px 12px", marginTop: 8, fontSize: 12.5 }}>
        <span style={{ fontWeight: 700 }}>AI answers for:</span>
        {(st.roles || []).map((r) => <label key={r} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><input type="checkbox" data-own-role={r} checked={roles[r] !== false} onChange={(e) => setRoles(Object.assign({}, roles, { [r]: e.target.checked }))} /> {r}</label>)}
        <span style={{ color: "#777" }}>(a role that is off still gets the built-in answers; nobody ever gets more than their role may see)</span>
      </div>
      {msg && <div style={{ fontSize: 12, color: "#0E7A37", marginTop: 6 }}>{msg}</div>}
      <div style={{ fontSize: 12.5, fontWeight: 700, marginTop: 10 }}>Question log <span style={{ fontWeight: 400, color: "#777" }}>(the last 60 — what each question was about, never the words typed)</span></div>
      <div data-own="helper-log" style={{ maxHeight: 260, overflow: "auto", marginTop: 4 }}>
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <thead><tr><th style={OWN_TH}>When</th><th style={OWN_TH}>Who</th><th style={OWN_TH}>Role</th><th style={OWN_TH}>Screen</th><th style={OWN_TH}>Answer</th><th style={OWN_TH}>About</th><th style={OWN_TH}>Tokens in / out</th><th style={OWN_TH}>Cost</th></tr></thead>
          <tbody>{rows.map((x) => (
            <tr key={x.id} data-own-helper-row={x.id}>
              <td style={{ ...OWN_TD, whiteSpace: "nowrap" }}>{ownFmt(x.at)}</td>
              <td style={OWN_TD}>{x.user_name || x.user_id}</td>
              <td style={OWN_TD}>{x.role}{x.is_owner ? " (owner)" : ""}</td>
              <td style={OWN_TD}>{(window.ROUTE_LABELS && window.ROUTE_LABELS[x.screen]) || x.screen}</td>
              <td style={OWN_TD}>{x.source === "ai" ? "AI answer" : x.source === "builtin" ? "Built-in" : "Refused"}{x.status === "pending" ? " (no answer yet)" : ""}{x.reason ? " — " + ownHelperWhy(x.reason) : ""}</td>
              <td style={OWN_TD}>{(x.topics || []).map((tp) => tp.q || tp.id).join(" · ")}</td>
              <td style={{ ...OWN_TD, fontFamily: "var(--jb-mono)", whiteSpace: "nowrap" }}>{x.input_tokens || 0} / {x.output_tokens || 0}</td>
              <td style={{ ...OWN_TD, fontFamily: "var(--jb-mono)", whiteSpace: "nowrap" }}>{ownMicros(x.status === "pending" ? x.est_micros : x.cost_micros)}</td>
            </tr>))}
            {!rows.length && <tr><td style={OWN_TD} colSpan={8}>No questions yet.</td></tr>}
          </tbody>
        </table>
      </div>
    </OwnSection>
  );
};

const OwnerPanel = ({ go }) => {
  const [st, setSt] = React.useState(null);
  const [users, setUsers] = React.useState(null);
  const [events, setEvents] = React.useState([]);
  const [show, setShow] = React.useState(null);
  const [err, setErr] = React.useState("");
  const load = async () => {
    const s = await ownApi("/status");
    if (!s.ok) { setErr(s.error); return; }
    setSt(s.data);
    if (!s.data.isOwner) return;
    const u = await ownApi("/users"); if (u.ok) setUsers(u.data);
    const e = await ownApi("/events?limit=40"); if (e.ok) setEvents(e.data.events || []);
  };
  React.useEffect(() => { load(); }, []);
  if (err) return <div style={{ padding: 20, color: "#A02234" }}>⚠ {err}</div>;
  if (!st) return <div style={{ padding: 20 }}>Loading…</div>;
  if (!st.isOwner) return <div style={{ padding: 20 }} data-own="not-owner">This screen is only for the dealership owner{st.owner ? " (" + st.owner.name + ")" : ""}.</div>;
  const fresh = !!(st.stepUp && st.stepUp.fresh);
  const signAll = async () => {
    if (!window.confirm("Sign EVERYONE else out now? They sign in again (with a code if it is required for them).")) return;
    const r = await ownApi("/signout-all", "POST", { reason: "Owner panel" });
    if (!r.ok) { ownToast(r.error, "error"); return; }
    ownToast(r.data.signedOut + " logins signed out.", "ok"); load();
  };
  return (
    <div data-own="panel" style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 1080, margin: "0 auto" }}>
      <div style={{ ...OWN_CARD, background: "#F5F8FF", borderColor: "#BBD0F2", fontSize: 12.5, lineHeight: 1.55 }}>
        <b>Owner panel — {st.owner && st.owner.name}.</b> Your extra powers are visible and recorded: each needs a fresh sign-in code; overrides need a reason and appear on the <a href="#" onClick={(e) => { e.preventDefault(); go && go("owneroverrides"); }}>Owner overrides</a> report your office and accountant can read. Text-message sign-in: <b>{st.sms && st.sms.configured ? "set up" : "NOT set up (run scripts/set-twilio-verify.sh on the server)"}</b>.
      </div>
      <OwnSection tag="confirm" title={fresh ? "✓ Confirmed — owner powers are on" : "Confirm it's you"} sub={fresh ? "Until " + ownFmt(st.stepUp.until) + ". After that you are asked for a new code." : null}
                  right={fresh ? <button className="k2b-button small" onClick={async () => { await ownApi("/stepup/end", "POST", {}); load(); }}>Lock now</button> : null}>
        {!fresh && <OwnStepUp me={st.me} onDone={() => load()} />}
      </OwnSection>
      {window.OwnStores ? <window.OwnStores fresh={fresh} ownerId={st.owner && st.owner.id} onUsersChanged={load} /> : null}
      {window.OwnSecurity ? <window.OwnSecurity fresh={fresh} /> : null}   {/* RC36 (sec36): the Security card (OwnerSecurity.jsx.txt) */}
      <OwnMyCodes st={st} reload={load} setShow={setShow} />
      <OwnPayPlan go={go} />
      <OwnHelper fresh={fresh} />
      {fresh && <OwnPolicy st={st} users={users && users.users} reload={load} />}
      {fresh && <OwnSvcmLimit />}
      {fresh && <OwnPartsLimit />}
      {users && <OwnUsers data={users} reload={load} setShow={setShow} fresh={fresh} />}
      {fresh && <OwnSection tag="signall" title="Sign everyone out" sub="Ends every other session, AI app connection and live screen now. You stay signed in.">
        <button className="k2b-button small" data-own="signout-all" onClick={signAll} style={{ fontWeight: 700 }}>Sign everyone out</button>
      </OwnSection>}
      <OwnSection tag="events" title={"Recent owner actions — for " + (window.K2BStore ? window.K2BStore.branding().dba : "this store")} sub="Append-only — nobody can change or delete these, not even the owner.">
        <table style={{ borderCollapse: "collapse", width: "100%" }}><tbody>{events.map(ev => (
          <tr key={ev.id}><td style={{ ...OWN_TD, whiteSpace: "nowrap" }}>{ownFmt(ev.at)}</td><td style={OWN_TD}>{ev.source === "console" ? "server console" : (ev.actor_name || ev.actor_id)}</td><td style={OWN_TD}>{ev.action}{ev.target_user ? " — " + ev.target_user : ""}</td></tr>))}</tbody></table>
      </OwnSection>
      {show && <OwnShowOnce title={show.title} lines={show.lines} note={show.note} onClose={() => setShow(null)} />}
    </div>
  );
};

/* ══════════════════════════ the Owner overrides report (owner + office) ══════════════════════════ */
const OwnerOverridesReport = () => {
  const [rows, setRows] = React.useState(null);
  const [from, setFrom] = React.useState(""); const [to, setTo] = React.useState("");
  const [err, setErr] = React.useState("");
  const load = async () => {
    const q = [from ? "from=" + encodeURIComponent(from) : "", to ? "to=" + encodeURIComponent(to) : ""].filter(Boolean).join("&");
    const r = await ownApi("/overrides" + (q ? "?" + q : ""));
    if (!r.ok) { setErr(r.error); setRows([]); return; }
    setErr(""); setRows(r.data.rows || []);
  };
  React.useEffect(() => { load(); }, []);
  const recordOf = (x) => (x.collection ? x.collection + " " : "") + (x.record_id || "");
  const csv = () => {
    const q = (v) => '"' + String(v === undefined || v === null ? "" : v).replace(/"/g, '""') + '"';
    const lines = ["Date,Owner,Rule,Record,Reason,Amount"].concat((rows || []).map(x => [new Date(x.at).toISOString(), x.actor_name || x.actor_id, x.rule_label || x.rule, recordOf(x), x.reason, x.amount_cents === null ? "" : (x.amount_cents / 100).toFixed(2)].map(q).join(",")));
    const blob = new Blob([lines.join("\r\n") + "\r\n"], { type: "text/csv" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "owner-overrides.csv"; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 500);
  };
  // RC35 (brd): printed through the framework - the store header, "for <store>"
  const print = () => {
    const esc = window.K2BPrint.esc;
    const html = window.K2BPrint.header() + "<style>table.oo{border-collapse:collapse;width:100%}table.oo td,table.oo th{border:1px solid #999;padding:4px 6px;text-align:left;font-size:9pt}</style><div class=\"doc-title\">OWNER OVERRIDES — for " + esc(window.K2BPrint.party.dba()) + "</div><div class=\"doc-sub\">Printed " + esc(new Date().toLocaleString()) + (from || to ? " · " + esc(from || "…") + " to " + esc(to || "…") : "") + "</div><table class=\"oo\"><tr><th>Date</th><th>By</th><th>Rule set aside</th><th>Record</th><th>Reason</th><th>Amount</th></tr>" +
      (rows || []).map(x => "<tr><td>" + esc(new Date(x.at).toLocaleString()) + "</td><td>" + esc(x.actor_name || x.actor_id) + "</td><td>" + esc(x.rule_label || x.rule) + "</td><td>" + esc(recordOf(x)) + "</td><td>" + esc(x.reason) + "</td><td>" + esc(ownMoney(x.amount_cents)) + "</td></tr>").join("") + "</table>";
    window.K2BPrint.doc(html, { title: "Owner overrides", formKey: "owner-overrides" });
  };
  return (
    <div data-own="overrides-report" style={{ maxWidth: 1080, margin: "0 auto" }}>
      <OwnSection title={"Owner overrides — for " + (window.K2BStore ? window.K2BStore.branding().dba : "this store")} sub="Every time the owner set a rule aside: when, which rule, which record, his reason and the amount. Nobody can change or delete these rows. The books still balance on every one."
                  right={<div style={{ display: "flex", gap: 6 }}><button className="k2b-button small" onClick={print} data-own="report-print">Print</button><button className="k2b-button small" onClick={csv} data-own="report-csv">Export CSV</button></div>}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12, marginBottom: 8 }}>
          From <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={OWN_INPUT} /> to <input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={OWN_INPUT} />
          <button className="k2b-button small" onClick={load}>Show</button>
        </div>
        {err && <div style={{ color: "#A02234", fontSize: 12 }}>⚠ {err}</div>}
        {rows && <div style={{ overflowX: "auto" }}><table style={{ borderCollapse: "collapse", width: "100%", minWidth: 720 }} data-own="report-table">
          <thead><tr><th style={OWN_TH}>Date</th><th style={OWN_TH}>By</th><th style={OWN_TH}>Rule set aside</th><th style={OWN_TH}>Record</th><th style={OWN_TH}>Reason</th><th style={{ ...OWN_TH, textAlign: "right" }}>Amount</th></tr></thead>
          <tbody>{rows.length ? rows.map(x => (
            <tr key={x.id} data-own-override={x.id}><td style={{ ...OWN_TD, whiteSpace: "nowrap" }}>{ownFmt(x.at)}</td><td style={OWN_TD}>{x.actor_name || x.actor_id}</td><td style={OWN_TD}>{x.rule_label || x.rule}</td><td style={OWN_TD}>{recordOf(x)}</td><td style={OWN_TD}>{x.reason}</td><td style={{ ...OWN_TD, textAlign: "right" }}>{ownMoney(x.amount_cents)}</td></tr>))
            : <tr><td style={OWN_TD} colSpan={6}>No owner overrides{from || to ? " in these dates" : " yet"}.</td></tr>}</tbody>
        </table></div>}
      </OwnSection>
    </div>
  );
};

// Sidebar routes "ownerpanel" (the owner only) and "owneroverrides" (the owner + the office books)
const OwnerPanelWindow = ({ onClose, go }) => (
  <div className="k2b-window" style={{ width: "100%", maxWidth: 1140, height: "calc(100vh - 110px)", margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
    <K2BTitlebar title="Owner Panel" icon="store" onClose={onClose} />
    <div style={{ flex: 1, overflow: "auto", padding: 18 }}><OwnerPanel go={go} /></div>
    <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6 }}><K2BButton small onClick={onClose}>ESC-Close</K2BButton></div>
  </div>
);
const OwnerOverridesWindow = ({ onClose }) => (
  <div className="k2b-window" style={{ width: "100%", maxWidth: 1140, height: "calc(100vh - 110px)", margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
    <K2BTitlebar title="Owner Overrides" icon="store" onClose={onClose} />
    <div style={{ flex: 1, overflow: "auto", padding: 18 }}><OwnerOverridesReport /></div>
    <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6 }}><K2BButton small onClick={onClose}>ESC-Close</K2BButton></div>
  </div>
);

Object.assign(window, { OwnerPanelWindow, OwnerOverridesWindow });