// punch-fab.jsx — globally-floating quick check-in / check-out widget
//
// Lives at bottom-right of the viewport, just above the chat bubble.
// One-click access to:
// * current state (in / on break / out) with a coloured pill
// * live counter of hours worked today (ticks every second)
// * action buttons: Punch in / Start break / End break / Punch out
//
// Self-mounts on DOMContentLoaded so it's available everywhere —
// inside the People module, on the project board, in CRM, etc.
// Pulls state from /api/people/me on mount + polls every 30s, plus
// re-fetches after every successful punch. Hides itself entirely
// when:
// * not logged in (no /api/people/me response)
// * migration 044 hasn't applied (the endpoint returns null today)
// * the user explicitly minimises it via the × on the popover
// (preference persists in localStorage)
(function () {
if (typeof window === "undefined") return;
// ── helpers ────────────────────────────────────────────────
function pad(n) { return String(n).padStart(2, "0"); }
function fmtDuration(mins) {
if (!isFinite(mins) || mins < 0) return "0m";
const h = Math.floor(mins / 60);
const m = Math.round(mins % 60);
if (h && m) return `${h}h ${m}m`;
if (h) return `${h}h`;
return `${m}m`;
}
function parseHHMM(s) {
if (!s) return null;
const m = /^(\d{1,2}):(\d{2})$/.exec(String(s));
return m ? Number(m[1]) * 60 + Number(m[2]) : null;
}
// ── React component ────────────────────────────────────────
function PunchFab() {
const [today, setToday] = React.useState(null);
const [open, setOpen] = React.useState(false);
const [now, setNow] = React.useState(new Date());
const [pending, setPending] = React.useState(false);
// Whether the signed-in user is a tracked employee (migration 048).
// null = unknown until the first me() resolves. The server is the
// authoritative source: non-tracked people (incl. managers/owners
// who aren't marked as employees) get isEmployee:false and we hide
// the whole FAB. Defaults to "show" for older backends that don't
// send the flag yet.
const [isEmp, setIsEmp] = React.useState(null);
// Track the signed-in user so the FAB resets state when someone
// else logs in on this browser. Without this, user A's `today`
// sticks around for user B (and the "Hide widget" preference
// user A set would silently hide it for user B too).
const currentUserId = React.useMemo(() => {
try {
const u = window.api && window.api.getUser && window.api.getUser();
return (u && u.id) || null;
} catch { return null; }
}, []);
const [signedInId, setSignedInId] = React.useState(currentUserId);
// Per-user hide preference. The toggle that controls this lives
// on the My Day page now (used to be a button inside the popover
// but that left users stranded with no way to bring it back).
// We listen for `flowboard:punchFab:visibility` so the My Day
// toggle can flip it without a reload.
const hiddenKey = signedInId ? `fb.punchFab.hidden:${signedInId}` : "fb.punchFab.hidden";
const [hidden, setHidden] = React.useState(() => {
try { return localStorage.getItem(hiddenKey) === "1"; } catch { return false; }
});
React.useEffect(() => {
try { setHidden(localStorage.getItem(hiddenKey) === "1"); } catch { setHidden(false); }
}, [hiddenKey]);
React.useEffect(() => {
function onVis(ev) {
const v = ev && ev.detail && ev.detail.hidden;
setHidden(!!v);
}
window.addEventListener("flowboard:punchFab:visibility", onVis);
return () => window.removeEventListener("flowboard:punchFab:visibility", onVis);
}, []);
// Live tick.
React.useEffect(() => {
const id = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(id);
}, []);
// Re-evaluate the signed-in user every 5 s. If the cached user
// id changes (login / logout / impersonate), we wipe the FAB
// state and re-fetch so the widget shows the right person's data.
React.useEffect(() => {
const id = setInterval(() => {
try {
const u = window.api && window.api.getUser && window.api.getUser();
const nextId = (u && u.id) || null;
if (nextId !== signedInId) {
setSignedInId(nextId);
setToday(null);
setBootstrapped(false);
}
} catch {}
}, 5_000);
return () => clearInterval(id);
}, [signedInId]);
// Fetch state on mount + poll every 30s.
//
// Reliability rules:
// - A SUCCESSFUL me() response is always authoritative — if the
// server says today is null (e.g. user has no workspace or no
// schedule today), we hide. We DO NOT fall back to cached
// optimistic state. Otherwise the FAB diverges from the main
// My day hero, which is the bug screenshot the user reported
// where the popover said "Currently working / FIRST IN 05:12"
// while the hero said "Not clocked in".
// - A FAILED me() (network glitch, 401, 503) only nulls the
// state on the very first attempt — once we've shown the
// widget for this user, transient errors keep the prior
// view alive.
const [bootstrapped, setBootstrapped] = React.useState(false);
const reload = React.useCallback(async () => {
if (!window.api || !window.api.people || !window.api.people.me) return;
try {
const r = await window.api.people.me();
// Trust the server: if today is null, show nothing; if it's an
// object, render it. No optimistic carry-over from prior state.
setToday(r && r.today ? r.today : null);
// Authoritative employee flag. undefined (old backend) → show.
setIsEmp(r ? (r.isEmployee !== false) : true);
setBootstrapped(true);
} catch (e) {
// Migration pending or auth failure. If we've never loaded
// successfully, stay hidden. Otherwise keep the prior state.
if (!bootstrapped) setToday(null);
}
}, [bootstrapped]);
React.useEffect(() => { reload(); }, [reload, signedInId]);
React.useEffect(() => {
const id = setInterval(() => {
if (document.visibilityState === "visible") reload();
}, 30_000);
return () => clearInterval(id);
}, [reload]);
// Re-fetch immediately when the tab regains focus — bridges the
// gap between a punch on another tab/device and the next poll.
React.useEffect(() => {
function onVis() { if (document.visibilityState === "visible") reload(); }
document.addEventListener("visibilitychange", onVis);
window.addEventListener("focus", onVis);
// Cross-tab nudge: any tab that punches dispatches this event.
window.addEventListener("flowboard:punched", reload);
return () => {
document.removeEventListener("visibilitychange", onVis);
window.removeEventListener("focus", onVis);
window.removeEventListener("flowboard:punched", reload);
};
}, [reload]);
// ── Lunch-break voice reminder ────────────────────────────
// At 13:00 and 13:10 (local time), if the employee is checked in
// (not on break, not checked out), speak a reminder using the Web
// Speech API. Each time fires at most once per day per device,
// tracked in localStorage. Skipped if SpeechSynthesis isn't
// available (some browsers / muted audio context).
React.useEffect(() => {
if (!today) return;
if (isEmp === false) return;
// External collaborators don't get the internal lunch reminder.
try {
const u = window.api && window.api.getUser && window.api.getUser();
if (u && u.wsRole === "guest") return;
} catch {}
// Re-derive "currently in" the same way the JSX does below so
// this stays consistent with the FAB's idea of state.
const liveSeg = (today.segments || []).find(s => s.live);
const onBreak = !!today.onBreak
|| (liveSeg && liveSeg.kind === "break")
|| today.lastPunchKind === "break_start";
const inByStat = today.status === "in" || today.status === "remote" || today.status === "late";
const inByPun = !!today.in
&& (today.lastPunchKind === "in" || today.lastPunchKind === "break_end");
const stateNow = onBreak ? "break" : ((inByStat || inByPun) ? "in" : "out");
if (stateNow !== "in") return;
if (typeof window === "undefined" || !window.speechSynthesis) return;
const ymd = new Date().toISOString().slice(0, 10);
const userId = (() => {
try { return (window.api.getUser() || {}).id || ""; } catch { return ""; }
})();
// Two prompts: 13:00 (first nudge) and 13:10 (gentle follow-up).
const slots = [
{ hh: 13, mm: 0, key: "lunch1", line: "It's one o'clock. Time for your lunch break." },
{ hh: 13, mm: 10, key: "lunch2", line: "Friendly reminder — please take a break for lunch now." },
];
const timers = [];
const today00 = new Date(); today00.setHours(0, 0, 0, 0);
for (const s of slots) {
const storageKey = `fb.lunchVoice:${userId}:${ymd}:${s.key}`;
let alreadyFired = false;
try { alreadyFired = window.localStorage.getItem(storageKey) === "1"; } catch {}
if (alreadyFired) continue;
const fireAt = new Date(today00); fireAt.setHours(s.hh, s.mm, 0, 0);
const delay = fireAt.getTime() - Date.now();
if (delay < -60_000) continue; // missed by > 1 min, skip
const wait = Math.max(0, delay);
const tid = setTimeout(() => {
try {
const u = new window.SpeechSynthesisUtterance(s.line);
u.rate = 0.95; u.pitch = 1.0; u.volume = 1.0;
window.speechSynthesis.speak(u);
window.localStorage.setItem(storageKey, "1");
} catch {}
}, wait);
timers.push(tid);
}
return () => { for (const t of timers) clearTimeout(t); };
}, [today, isEmp]);
// Hide while signed out / no data yet / user dismissed it.
if (hidden) return null;
// Non-tracked users (is_employee = 0, migration 048) don't punch —
// hide the whole widget for them, including managers/owners who
// aren't themselves marked as employees.
if (isEmp === false) return null;
if (!today) return null;
if (!window.api || !window.api.people || !window.api.people.punch) return null;
// Per-user module-access flag — if an admin turned People OFF for
// this user via Admin → Module access, hide the FAB too. Owners
// always have access. Reads the user object via window.api.getUser
// since the FAB is mounted outside the React tree that holds _me.
try {
const u = window.api.getUser && window.api.getUser();
const ma = u && u.moduleAccess;
const role = u && u.wsRole;
if (role !== "owner" && ma && ma.people === false) return null;
} catch {}
// Derive state from today + live now.
// IMPORTANT: status alone isn't enough — on a HOLIDAY or LEAVE day
// an employee can still be clocked in (the resolver gives holiday/
// leave precedence over 'in' in the status field). Honor
// lastPunchKind / today.in so check-out + break stay reachable.
const live = (today.segments || []).find(s => s.live);
const isOnBreak = !!today.onBreak
|| (live && live.kind === "break")
|| today.lastPunchKind === "break_start";
const isClockedInByStatus = today.status === "in" || today.status === "remote" || today.status === "late";
const isClockedInByPunch = !!today.in
&& (today.lastPunchKind === "in" || today.lastPunchKind === "break_end");
const isClockedIn = isClockedInByStatus || isClockedInByPunch;
const state = isOnBreak ? "break" : (isClockedIn ? "in" : "out");
// Live worked-minutes — the server's hoursLogged ticks once per
// poll, but we want a smooth counter that updates each second.
// Compute the open work segment locally from the user's local
// wall clock + the server's reported firstIn.
let workedMins = (today.hoursLogged || 0) * 60;
if (state === "in" && today.in) {
// Add the in-progress chunk since the latest break_end (or
// first in if no break this session). The server's hoursLogged
// captured up to the last poll, so we extrapolate.
const lastWorkStart = (() => {
const segs = today.segments || [];
// Find the last 'work' segment marked live; fall back to first in.
const liveSeg = segs.find(s => s.live && s.kind === "work");
if (liveSeg) return liveSeg.from;
return parseHHMM(today.in);
})();
if (lastWorkStart != null) {
const nowMins = now.getHours() * 60 + now.getMinutes();
const delta = Math.max(0, nowMins - lastWorkStart);
// hoursLogged from server already includes everything up to
// the live segment's start (closed segments), so just add
// the live delta. To avoid double-counting we re-derive from
// closed segments only.
const closedWork = segs => segs
.filter(s => s.kind === "work" && !s.live)
.reduce((a, s) => a + (s.to - s.from), 0);
workedMins = closedWork(today.segments || []) + delta;
}
}
const breakMins = (today.breakMins || 0);
async function punch(kind) {
if (pending) return;
setPending(true);
// Optimistic local state flip — flip immediately so the
// popover's button row updates without waiting for the server
// round-trip. If the punch fails, the reload re-syncs from
// the server. This is what makes the FAB feel "instant" when
// you tap Start break and care more about not losing the
// popover than about waiting 200ms for the server answer.
const optimistic = (() => {
if (!today) return null;
const t = { ...today };
if (kind === 'in') { t.status = 'in'; t.onBreak = false; t.lastPunchKind = 'in'; }
else if (kind === 'out') { t.status = 'out'; t.onBreak = false; t.lastPunchKind = 'out'; }
else if (kind === 'break_start') { t.onBreak = true; t.lastPunchKind = 'break_start'; }
else if (kind === 'break_end') { t.onBreak = false; t.lastPunchKind = 'break_end'; }
return t;
})();
if (optimistic) setToday(optimistic);
try {
await window.api.people.punch({ kind });
await reload();
// Tell the rest of the app — main page hero etc. — to refresh.
try { window.dispatchEvent(new CustomEvent("flowboard:punched", { detail: { kind } })); } catch {}
if (window.fbToast) {
window.fbToast(({ in: "Punched in", out: "Punched out",
break_start: "Break started",
break_end: "Break ended" })[kind] || "Punch saved", 2200);
}
} catch (e) {
// Roll back to the pre-click state and surface the error.
if (today) setToday(today);
const body = e && e.body;
const errCode = body && body.error;
const msg = (body && (body.message || body.error)) || (e && e.message) || "Punch failed";
const human = /migration_pending/i.test(String(errCode))
? "Punch storage isn't ready — apply migration 044 on the server."
: msg;
if (window.fbToast) window.fbToast(human, 4500);
} finally {
setPending(false);
}
}
// ── pill (collapsed) ────────────────────────────────────
const pillMeta =
state === "in" ? { label: "Working", bg: "linear-gradient(180deg, #0ea15c, #066039)", fg: "#fff", dot: "#5fe6a5" } :
state === "break" ? { label: "On break", bg: "linear-gradient(180deg, #f7a82a, #b86b00)", fg: "#fff", dot: "#ffd86b" } :
{ label: "Punch in", bg: "linear-gradient(180deg, #353b4d, #1c2033)", fg: "#fff", dot: "#9aa0ae" };
return (
<>
{!open && (
)}
{open && (