/* ============================================================ Balance utilities + Employee/CEO dashboard ============================================================ */ const { useState, useEffect, useRef } = React; const round2 = (n) => Math.round(n * 100) / 100; // Vacation entitlement for a given year, pro-rated by start date. // Rule: 1/12 of the annual allowance per employed month in `year`. // Mid-month rule (15th cut-off): joining on or before the 15th counts that // month as full; joining on the 16th or later, the start month doesn't count. function proratedAllowance(person, year = VP_DATA.YEAR) { const base = (person && person.allowance != null) ? person.allowance : VP_DATA.ALLOWANCE; if (!person || !person.startDate) return base; const [sy, sm, sd] = person.startDate.split("-").map(Number); if (sy < year) return base; // started before this year → full entitlement if (sy > year) return 0; // starts in a future year → none yet this year // After the 15th, entitlement starts counting from the next month. const firstCountedMonth = (sd > 15) ? sm + 1 : sm; const monthsEmployed = Math.max(0, 12 - firstCountedMonth + 1); return round2((base * monthsEmployed) / 12); } // Balance-counting vacation days (approved/pending) inside a date window. function vacationDaysInWindow(personId, requests, status, loISO, hiISO) { return requests .filter((r) => r.person === personId && r.status === status && VP_DATA.leaveTypes[r.type] && VP_DATA.leaveTypes[r.type].countsToBalance) .reduce((s, r) => s + workingDaysInWindow(r, loISO, hiISO), 0); } // Year-aware balance with carryover. // Company rule: unused days from the previous year carry into this year and // stay usable until 31 March; after that they expire. Leave taken in Q1 draws // from the carryover first, then from the new entitlement. function balanceFor(personId, requests, year = VP_DATA.YEAR) { const person = VP_DATA.byId[personId]; const ent = proratedAllowance(person, year); const jan1 = `${year}-01-01`, mar31 = `${year}-03-31`, dec31 = `${year}-12-31`; // Carryover from last year — only for years the tool actually tracked. let carryIn = 0; if ((year - 1) >= VP_DATA.TRACKING_SINCE) { const prevEnt = proratedAllowance(person, year - 1); const prevUsed = vacationDaysInWindow(personId, requests, "approved", `${year - 1}-01-01`, `${year - 1}-12-31`); carryIn = Math.max(0, round2(prevEnt - prevUsed)); } const usedY = vacationDaysInWindow(personId, requests, "approved", jan1, dec31); const usedQ1 = vacationDaysInWindow(personId, requests, "approved", jan1, mar31); const pending = vacationDaysInWindow(personId, requests, "pending", jan1, dec31); const carryoverSpent = Math.min(carryIn, usedQ1); const entitlementRemaining = ent - (usedY - carryoverSpent); const carryoverActive = TODAY <= mar31; const carryoverRemaining = carryoverActive ? round2(carryIn - carryoverSpent) : 0; const remaining = round2(entitlementRemaining + carryoverRemaining); const total = round2(usedY + remaining); // live pool: entitlement + still-valid carryover return { used: usedY, pending, remaining, allowance: ent, total, carryIn, carryoverRemaining, carryoverActive, carryoverDeadline: mar31, }; } /* Ring gauge */ function BalanceRing({ used, pending, allowance, remaining, size = 168 }) { const r = size / 2 - 13; const C = 2 * Math.PI * r; const usedFrac = allowance > 0 ? Math.min(used / allowance, 1) : 0; const pendFrac = allowance > 0 ? Math.min((used + pending) / allowance, 1) : 0; const left = remaining != null ? remaining : (allowance - used); return (
{/* pending (lighter) */} {/* used */}
{left}
days left
); } function StatChip({ value, label, color }) { return (
{value}
{label}
); } /* A single request row */ function RequestRow({ req, showPerson, onClick, right }) { const [hover, setHover] = useState(false); const person = VP_DATA.byId[req.person]; const rep = req.replacement ? VP_DATA.byId[req.replacement] : null; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 14px", background: hover && onClick ? "var(--surface-2)" : "transparent", borderRadius: "var(--r-md)", cursor: onClick ? "pointer" : "default", transition: "background 0.14s ease", }}> {showPerson && }
{showPerson ? `${person.first} ${person.last}` : VP_DATA.leaveTypes[req.type].label} {showPerson && }
{fmtRange(req.from, req.to)} · {workingDays(req)}{workingDays(req) === 1 ? " day" : " days"} {rep && {rep.first} {rep.last} }
{right || }
); } function SectionTitle({ children, count, action }) { return (

{children} {count != null && {count}}

{action}
); } /* Who's out within a window */ function whoIsOut(requests, fromISO_, toISO_) { const winA = parseISO(fromISO_), winB = parseISO(toISO_); return requests.filter((r) => r.status === "approved") .filter((r) => parseISO(r.from) <= winB && parseISO(r.to) >= winA); } function Dashboard({ user, requests, onNewRequest, onOpenRequest, onGoto }) { const isCeo = user.role === "ceo"; const narrow = useIsNarrow(820); const coCeo = VP_DATA.ceos.find((c) => c.id !== user.id); const bal = balanceFor(user.id, requests); const mine = requests.filter((r) => r.person === user.id) .sort((a, b) => (a.status === "pending" ? -1 : 1) - (b.status === "pending" ? -1 : 1) || parseISO(b.from) - parseISO(a.from)); const myUpcoming = requests.filter((r) => r.person === user.id && r.status === "approved" && parseISO(r.to) >= parseISO(TODAY)) .sort((a, b) => parseISO(a.from) - parseISO(b.from)); const pending = requests.filter((r) => r.status === "pending"); // this week window const weekEnd = toISO(addDays(parseISO(TODAY), 7)); const outThisWeek = whoIsOut(requests, TODAY, weekEnd).filter((r) => r.person !== user.id); return (
{/* Greeting */}

Hi {user.first}

{isCeo ? (pending.length ? `${pending.length} request${pending.length === 1 ? "" : "s"} to review.` : "No requests to review.") : `${bal.remaining} of ${bal.total} days left this year.`}

{(() => { const balanceCard = ( {isCeo ? "Your balance" : "Vacation balance"}
{bal.carryIn > 0 && }
{bal.carryoverRemaining > 0 && bal.carryoverActive && (
{bal.carryoverRemaining} day{bal.carryoverRemaining === 1 ? "" : "s"} carried over from {VP_DATA.YEAR - 1} — use by 31 March {VP_DATA.YEAR}, then they expire.
)} ); const secondaryCard = isCeo ? ( onGoto("approvals")}>Open inbox }>Awaiting approval
{pending.slice(0, 4).map((r) => ( onOpenRequest(r)} /> ))} {pending.length === 0 && Nothing awaiting approval.}
) : ( Your upcoming time off
{myUpcoming.slice(0, 3).map((r) => ( onOpenRequest(r)} /> ))} {myUpcoming.length === 0 && No upcoming time off.}
); // CEO: lead with the approval queue (their job), balance demoted to the side. // Employee: balance leads, upcoming alongside. return (
{isCeo ? <>{secondaryCard}{balanceCard} : <>{balanceCard}{secondaryCard}}
); })()} {/* Bottom row */}
{/* My requests */} onGoto("calendar")}>Team calendar }>{isCeo ? "Your requests" : "My requests"}
{mine.map((r) => onOpenRequest(r)} />)} {mine.length === 0 && No requests yet.}
{/* Who's out this week */} Out this week
{outThisWeek.slice(0, 6).map((r) => { const p = VP_DATA.byId[r.person]; return (
{p.first} {p.last}
{fmtRange(r.from, r.to)}
); })} {outThisWeek.length === 0 && Everyone's in this week.}
); } function Empty({ children }) { return
{children}
; } Object.assign(window, { Dashboard, BalanceRing, balanceFor, proratedAllowance, RequestRow, SectionTitle, Empty, whoIsOut, StatChip });