/* ============================================================ App — shell, routing, state, tweaks ============================================================ */ const { useState, useEffect, useRef } = React; const ACCENTS = { royal: { a: "#5A58E7", ink: "#4340C4", soft: "#E7E7FB" }, sky: { a: "#3490EB", ink: "#1F6FD0", soft: "#DEEBFE" }, amethyst: { a: "#7D50CA", ink: "#5E37A0", soft: "#ECE1F8" }, slate: { a: "#5C6680", ink: "#434C63", soft: "#E4E8F1" }, }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "royal", "displayFont": "Montserrat", "density": "regular", "showAvatarsInCal": true }/*EDITMODE-END*/; function applyTokens(t) { const root = document.documentElement; const ac = ACCENTS[t.accent] || ACCENTS.royal; root.style.setProperty("--accent", ac.a); root.style.setProperty("--accent-ink", ac.ink); root.style.setProperty("--accent-soft", ac.soft); root.style.setProperty("--t-vacation", ac.a); root.style.setProperty("--t-vacation-soft", ac.soft); root.style.setProperty("--font-display", `"${t.displayFont}", system-ui, sans-serif`); const dens = { compact: ["14px", "16px"], regular: ["20px", "22px"], comfy: ["26px", "28px"] }[t.density] || ["20px", "22px"]; root.style.setProperty("--gap", dens[0]); root.style.setProperty("--pad-card", dens[1]); } /* ---- Toast ---- */ function Toast({ toast }) { if (!toast) return null; const tone = toast.tone || "default"; const colors = { default: { bg: "var(--ink)", fg: "#fff" }, approved: { bg: "var(--st-approved)", fg: "#fff" }, declined: { bg: "var(--st-declined)", fg: "#fff" }, }[tone]; return (
{toast.msg}
); } /* ---- Account switcher ---- */ function AccountMenu({ user, onSwitch, onLogout }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); return (
{open && (
Switch account (demo)
{VP_DATA.people.map((p) => ( ))}
)}
); } /* ---- Sidebar ---- */ function Sidebar({ user, view, onGoto, pendingCount, narrow }) { const items = [ { id: "dashboard", label: "Home", icon: "home" }, ...(user.role === "ceo" ? [{ id: "approvals", label: "Approvals", icon: "inbox", badge: pendingCount }] : []), { id: "calendar", label: "Team calendar", icon: "calendar" }, ...(user.role === "ceo" ? [{ id: "team", label: "Team & admin", icon: "users" }] : []), ]; return ( ); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { applyTokens(t); }, [t]); const [user, setUser] = useState(null); const [view, setView] = useState("dashboard"); const [requests, setRequests] = useState(() => VP_DATA.requests.map((r) => ({ ...r }))); const [peopleVersion, setPeopleVersion] = useState(0); const [modal, setModal] = useState(null); // {mode:'new'|'view'|'person'|'editPerson', req|person} const [toast, setToast] = useState(null); const toastTimer = useRef(null); function flash(msg, opts = {}) { setToast({ msg, ...opts }); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 2600); } function addRequest(req) { setRequests((rs) => [req, ...rs]); setModal(null); flash("Request submitted."); } function decide(id, status, by, reason) { setRequests((rs) => rs.map((r) => r.id === id ? { ...r, status, decidedBy: by, decidedOn: TODAY, reason: reason || r.reason } : r)); setModal(null); flash(status === "approved" ? "Request approved." : "Request declined.", { tone: status, icon: status === "approved" ? "check" : "x" }); } function goto(v) { setView(v); } function savePerson(p, isNew) { if (isNew) { VP_DATA.people.push(p); } else { const i = VP_DATA.people.findIndex((x) => x.id === p.id); if (i >= 0) VP_DATA.people[i] = p; } VP_DATA.byId[p.id] = p; VP_DATA.ceos = VP_DATA.people.filter((x) => x.role === "ceo"); setPeopleVersion((v) => v + 1); setModal(null); flash(isNew ? `${p.first} ${p.last} added.` : "Changes saved."); } function archivePerson(p) { // keep historical records (byId) intact; remove from the active directory VP_DATA.people = VP_DATA.people.filter((x) => x.id !== p.id); VP_DATA.ceos = VP_DATA.people.filter((x) => x.role === "ceo"); setPeopleVersion((v) => v + 1); setModal(null); flash(`${p.first} ${p.last}'s access was removed.`, { tone: "declined", icon: "x" }); } const pendingCount = requests.filter((r) => r.status === "pending").length; const narrow = useIsNarrow(820); if (!user) return (<> { setUser(p); setView(p.role === "ceo" ? "dashboard" : "dashboard"); }} />); return (
{/* top bar */}
{ setUser(p); setView("dashboard"); }} onLogout={() => setUser(null)} />
{/* main */}
{view === "dashboard" && setModal({ mode: "new" })} onOpenRequest={(r) => setModal({ mode: "view", req: r })} onGoto={goto} />} {view === "approvals" && setModal({ mode: "view", req: r })} onDecide={decide} onNewRequest={() => setModal({ mode: "new" })} />} {view === "calendar" && setModal({ mode: "view", req: r })} onNewRequest={() => setModal({ mode: "new" })} />} {view === "team" && user.role === "ceo" && setModal({ mode: "person" })} onEditPerson={(p) => setModal({ mode: "editPerson", person: p })} />}
{/* Modals */} {modal?.mode === "new" && setModal(null)}> setModal(null)} />} {modal?.mode === "view" && setModal(null)} width={540}> r.id === modal.req.id) || modal.req} user={user} requests={requests} onDecide={decide} onClose={() => setModal(null)} />} {modal?.mode === "person" && setModal(null)} width={600}> setModal(null)} />} {modal?.mode === "editPerson" && setModal(null)} width={600}> setModal(null)} />}
); } function TweaksHost({ t, setTweak }) { return ( { const m = { "#5A58E7": "royal", "#3490EB": "sky", "#7D50CA": "amethyst", "#5C6680": "slate" }; setTweak("accent", m[hex] || "royal"); }} /> setTweak("displayFont", v)} /> setTweak("density", v)} /> ); } /* ---- Access gate ---- Shared team password. Stored only as a SHA-256 hash below — never in clear text. This is an access barrier for an internal tool, NOT full authentication: the static files remain fetchable by someone technical. For stronger protection use Vercel Password Protection (Pro) or real auth. To change the password: run printf '%s' 'NEW_PASSWORD' | shasum -a 256 and paste the resulting hash into GATE_HASH. */ const GATE_HASH = "7bce0333ed2c4cd995357d26ac83fda9cd69bb05934ebef92a8f7bbd38186d60"; const GATE_KEY = "mesper_gate_v1"; async function sha256Hex(str) { const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)); return Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join(""); } function Gate({ children }) { const [ok, setOk] = useState(() => { try { return localStorage.getItem(GATE_KEY) === GATE_HASH; } catch (e) { return false; } }); const [pw, setPw] = useState(""); const [err, setErr] = useState(false); const [busy, setBusy] = useState(false); if (ok) return children; async function submit(e) { e.preventDefault(); if (busy || !pw) return; setBusy(true); setErr(false); const h = await sha256Hex(pw); setBusy(false); if (h === GATE_HASH) { try { localStorage.setItem(GATE_KEY, GATE_HASH); } catch (e2) {} setOk(true); } else { setErr(true); setPw(""); } } return (

Restricted

Enter the team password to continue.

{ setPw(e.target.value); setErr(false); }} style={{ width: "100%", boxSizing: "border-box", padding: "11px 13px", fontSize: 14.5, fontFamily: "var(--font-body)", color: "var(--ink)", background: "var(--surface)", border: `1px solid ${err ? "var(--st-declined)" : "var(--line-2)"}`, borderRadius: "var(--r-md)", outline: "none", }} /> {err &&
That password didn't match. Try again.
}
); } ReactDOM.createRoot(document.getElementById("root")).render();