// people-employee.jsx — employee "My time" shell
//
// Tabs:
// My day · live hero + today bar + recent timeline + balances + team-out
// My timeline · 14-day past timeline grouped by week
// My leave · leave hero + balances rings + my requests + holidays
// Team calendar · read-only team calendar
//
// Class names match public/styles/people-employee.css verbatim
// (the prototype handoff bundle). Wiring is live to /api/people/*.
// ── Shared CSS injection (run once at file load) ─────────────
// The .pp-ts-* rules are the same visual language as the admin
// Timesheets card; we use them in both PpEmpTimelineFull (full
// page) and PpEmpRecentTimeline (My day widget). They were
// previously inside PpEmpTimelineFull's
);
}
function PpEmpAttStat({ label, value, tone }) {
return (
{label}
{value}
);
}
function PpEmpRingMini({ pct, size = 56, stroke = 6, color = "#0ea15c" }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const p = Math.max(0, Math.min(100, Number(pct) || 0));
const dash = (p / 100) * c;
return (
);
}
// ── Hero: compact blue panel — live clock + status + punch ───
function PpEmpHero({ me, onReload }) {
const [now, setNow] = React.useState(new Date());
const [punching, setPunching] = React.useState(false);
React.useEffect(() => {
const id = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(id);
}, []);
const today = (me && me.today) || {};
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");
// 12-hour display for the hero clock.
const h12 = ((now.getHours() + 11) % 12) + 1;
const ampm = now.getHours() < 12 ? "AM" : "PM";
// Derive state from server's segments / status + lastPunchKind so
// holiday / leave days don't hide the check-out + break buttons when
// the employee actually has an open punch.
const live = (today.segments || []).find(s => s.live);
const isOnBreak = (live && live.kind === "break") || today.lastPunchKind === "break_start";
const isClockedIn = today.status === "in" || today.status === "remote" || today.status === "late"
|| (!!today.in && (today.lastPunchKind === "in" || today.lastPunchKind === "break_end"));
const state = isOnBreak ? "break" : (isClockedIn ? "in" : "out");
const chip =
state === "in" ? { tone: "ok", label: "Clocked in", meta: today.in ? `since ${today.in}` : "live" } :
state === "break" ? { tone: "warn", label: "On break", meta: "paused" } :
{ tone: "off", label: today.status === "leave" ? "On leave"
: today.status === "holiday" ? "Holiday"
: "Not clocked in",
meta: today.status === "holiday" ? (today.holiday || "")
: today.status === "leave" ? (today.leaveType || "")
: "punch in to start" };
async function punch(kind) {
if (punching) return; // guard against double-tap → duplicate punches
setPunching(true);
try {
await window.api.people.punch({ kind });
onReload && onReload();
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) {
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 yet — apply migration 044 on the server, then try again."
: /timeout|network/i.test(String(errCode))
? "Punch didn’t save — check your connection and tap again."
: msg;
if (window.fbToast) window.fbToast(human, 5000);
else alert(human);
console.error("[people.punch]", e);
} finally {
setPunching(false);
}
}
const greet = now.getHours() < 12 ? "Good morning"
: now.getHours() < 17 ? "Good afternoon" : "Good evening";
const name = ppFirstName();
const segs = today.segments || [];
const showLive = state === "in" || state === "break";
// Running worked-hours total. Live from segments while clocked in;
// falls back to the server's hoursLogged if segments aren't present.
const { mins: liveWorkedMins, nowPct } = ppLiveWorked(today, now);
const workedMins = segs.length ? liveWorkedMins : (Number(today.hoursLogged) || 0) * 60;
return (
CURRENT TIME
{h12}:{mm}:{ss} {ampm}
{greet}{name ? ", " + name : ""}.
Hours today{ppFmtDuration(workedMins)}
{today.in && since {today.in}}
{/* Live today timeline — dashed baseline + work/break line + dots.
Override the timeline's --border / --bg-card tokens so the
dashed line and dot rings read on the blue panel. */}
);
}
// For days with punches the server returns hoursLogged but not the
// segment detail — we approximate a bar from in/out times when
// present. For days where we only have aggregate, show a single
// continuous work segment proportional to hours logged.
const total = Number(day.hoursLogged) || 0;
return (
);
}
function PpEmpLeaveHero({ me, onApply }) {
const balances = (me && me.balances) || [];
const remaining = balances.reduce((s, b) => s + Math.max(0, (b.total || 0) - (b.used || 0)), 0);
const total = balances.reduce((s, b) => s + (b.total || 0), 0);
const used = total - remaining;
const pctUsed = total > 0 ? (used / total) * 100 : 0;
return (
LEAVE · {new Date().getFullYear()}{used} USED · {remaining} REMAINING OF {total}
{remaining}days
available across {balances.length} categor{balances.length === 1 ? "y" : "ies"}
{used} used · {remaining} remaining of {total} annual
);
}
function PpEmpMyRequests({ items, onReload }) {
async function cancel(id, isApproved) {
const prompt = isApproved
? "Cancel this approved leave? Your balance will be refunded."
: "Cancel this leave request?";
if (!window.confirm(prompt)) return;
try { await window.api.people.cancelLeaveRequest(id); onReload(); } catch {}
}
// Employees can self-cancel:
// • pending requests, always
// • approved requests ONLY before the leave starts (today < from_date).
// Once an approved leave has started or ended, only an admin can undo it
// — silent self-cancellation of past or in-progress leave isn't allowed.
function canCancel(r) {
const today = new Date().toISOString().slice(0, 10);
if (r.status === "pending") return true;
if (r.status === "approved" && r.from_date > today) return true;
return false;
}
return (