)}
);
}
const SOON = {
employees: { icon: "ph-users-three", title: "Employees directory", body: "A roster of everyone at Northgate — current balances, leave history, and contact details in one place." },
io: { icon: "ph-arrows-down-up", title: "Import & export", body: "Bring leave records in from your existing spreadsheet, or export the current view to CSV or Excel for payroll." },
settings: { icon: "ph-gear-six", title: "Settings", body: "Configure leave types, follow-up reminders, locations, and who on your team can see each case." },
};
function ComingSoon({ view }) {
const s = SOON[view] || SOON.settings;
return (
{s.title}
{s.body}
In development
);
}
const HEADERS = {
dashboard: { title: "Dashboard", subtitle: "Who's out, who's back soon, and what needs a follow-up this week.", showDate: true },
cases: { title: "Leave Cases", subtitle: "Every active leave on record — search, sort, and open any case.", showDate: false },
attention: { title: "Needs Attention", subtitle: "Cases with a missing document, a passed return date, or a low remaining balance.", showDate: false },
employees: { title: "Employees", subtitle: "Your team directory and leave history.", showDate: false },
io: { title: "Import / Export", subtitle: "Move leave data in and out of LeaveTrackerLite.", showDate: false },
settings: { title: "Settings", subtitle: "Configure how LeaveTrackerLite works for your team.", showDate: false },
};
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [view, setView] = useState("dashboard");
const [query, setQuery] = useState("");
const [filter, setFilter] = useState("all");
const [sort, setSort] = useState({ key: "urgency", dir: "asc" });
const [open, setOpen] = useState(null);
const [kbd, setKbd] = useState(-1);
const [viz, setVizState] = useState(() => {
try { return localStorage.getItem("ltl-balance-display") || "bar"; } catch (e) { return "bar"; }
});
function setViz(v) {
setVizState(v);
try { localStorage.setItem("ltl-balance-display", v); } catch (e) {}
}
function nav(v) {
setView(v);
setOpen(null);
setQuery("");
if (v === "attention") setFilter("attention");
else if (v === "dashboard" || v === "cases") setFilter("all");
}
const isTable = view === "dashboard" || view === "cases" || view === "attention";
const effFilter = view === "attention" ? "attention" : filter;
let rows = window.CASES.filter(c => matchFilter(c, effFilter));
if (query.trim()) {
const q = query.toLowerCase();
rows = rows.filter(c => (c.name + " " + c.dept + " " + c.location + " " + c.type).toLowerCase().includes(q));
}
const col = COLS.find(x => x.key === sort.key);
if (col && col.sort) {
rows = [...rows].sort((a, b) => {
const va = col.sort(a), vb = col.sort(b);
const cmp = va < vb ? -1 : va > vb ? 1 : 0;
return sort.dir === "asc" ? cmp : -cmp;
});
} else {
rows = [...rows].sort(urgencySort);
}
const total = window.CASES.filter(c => matchFilter(c, effFilter)).length;
const head = HEADERS[view];
// Keyboard: ↑/↓ move row selection, Enter opens, Esc clears (search input excluded).
useEffect(() => { setKbd(-1); }, [view, filter, query]);
useEffect(() => {
function onKey(e) {
if (open || !isTable) return;
const t = e.target;
if (t && /^(INPUT|SELECT|TEXTAREA)$/.test(t.tagName)) return;
if (e.key === "ArrowDown") { e.preventDefault(); setKbd(k => Math.min(k + 1, rows.length - 1)); }
else if (e.key === "ArrowUp") { e.preventDefault(); setKbd(k => Math.max(k - 1, 0)); }
else if (e.key === "Enter" && kbd >= 0 && rows[kbd]) setOpen(rows[kbd]);
else if (e.key === "Escape") setKbd(-1);
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
});
useEffect(() => {
if (kbd < 0) return;
const el = document.querySelector('tr[data-kbd-selected="true"]');
if (!el) return;
const r = el.getBoundingClientRect();
if (r.bottom > window.innerHeight - 24) window.scrollBy({ top: r.bottom - window.innerHeight + 90, behavior: "smooth" });
else if (r.top < 90) window.scrollBy({ top: r.top - 140, behavior: "smooth" });
}, [kbd]);
return (