"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ACCENT, GROUND, INK, MONO, MUTED } from "./m";
import { useStaff } from "@/lib/staffclient";
import { teamTabs } from "@/lib/staffreq";
/* The tab bar: four items for a wearer, five for anybody with a team screen to open.
*
* The fifth is drawn when teamTabs() — the one function that decides what is behind /my/team —
* has something to show. Asking it, rather than re-stating the test here, is the point: a manager,
* a ward desk WITH a ward recorded, and anybody a request is addressed to. That last case is not a
* nicety: the linen room can re-address a request to somebody who manages nobody, and a manager's
* last report can move away while their request is still waiting. Gating on "is a manager" would
* take the tab, the badge and the Home banner away at once, and leave a colleague blocked behind a
* screen nobody could reach. The ward matters for the opposite reason: a clerk with the desk flag
* and no ward has no round, /my/round refuses them, and a tab drawn from one fact in front of a
* route fenced on another is a tab that 404s on every screen in the app.
*
* Every item is a link, Messages included. It used to be a button that pushed /my/orders — a
* control among links, missing from anything that lists a page's navigation, and a tab that lied
* about where it went.
*/
const ic = (d: React.ReactNode) => (
);
const ICONS = {
home: ic(),
kit: ic(),
orders: ic(<>),
messages: ic(),
team: ic(<>),
};
/** Which item owns a path. The team item owns every screen inside the Team shell, so an approval
* opened from an email keeps the bar where opening it from the tab would. */
function activeItem(path: string): string {
if (path === "/my") return "/my";
if (/^\/my\/(team|approvals|ward|raise|round)(\/|$)/.test(path)) return "/my/team";
if (path.startsWith("/my/kit")) return "/my/kit";
if (path.startsWith("/my/orders")) return "/my/orders";
if (path.startsWith("/my/messages")) return "/my/messages";
return "";
}
function Badge({ n }: { n: number }) {
return (
{n > 99 ? "99+" : n}
);
}
export default function StaffNav() {
const path = usePathname();
const { me, counts } = useStaff();
const active = activeItem(path);
const items: { href: string; label: string; icon: React.ReactNode; count?: number }[] = [
{ href: "/my", label: "Home", icon: ICONS.home },
{ href: "/my/kit", label: "My kit", icon: ICONS.kit },
{ href: "/my/orders", label: "Orders", icon: ICONS.orders, count: counts.orders },
{ href: "/my/messages", label: "Messages", icon: ICONS.messages },
];
if (teamTabs(me, counts).length > 0) {
// "Ward" for somebody who is only on the desk: what they open is the round, not a team.
const label = me.isManager || counts.approvals > 0 ? "Team" : "Ward";
items.push({ href: "/my/team", label, icon: ICONS.team, count: counts.team });
}
return (
);
}