98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "../auth-context";
|
|
import { sharedStyles } from "../styles/shared";
|
|
import constants from "../../../shared/constants.json";
|
|
|
|
const { ADMIN, REGULAR } = constants.roles;
|
|
|
|
type PageId =
|
|
| "counter"
|
|
| "sum"
|
|
| "profile"
|
|
| "invites"
|
|
| "booking"
|
|
| "appointments"
|
|
| "audit"
|
|
| "admin-invites"
|
|
| "admin-availability"
|
|
| "admin-appointments"
|
|
| "admin-random-jobs"
|
|
| "admin-price-history";
|
|
|
|
interface HeaderProps {
|
|
currentPage: PageId;
|
|
}
|
|
|
|
interface NavItem {
|
|
id: PageId;
|
|
label: string;
|
|
href: string;
|
|
regularOnly?: boolean;
|
|
adminOnly?: boolean;
|
|
}
|
|
|
|
const REGULAR_NAV_ITEMS: NavItem[] = [
|
|
{ id: "counter", label: "Counter", href: "/" },
|
|
{ id: "sum", label: "Sum", href: "/sum" },
|
|
{ id: "booking", label: "Book", href: "/booking", regularOnly: true },
|
|
{ id: "appointments", label: "Appointments", href: "/appointments", regularOnly: true },
|
|
{ id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
|
|
{ id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
|
|
];
|
|
|
|
const ADMIN_NAV_ITEMS: NavItem[] = [
|
|
{ id: "audit", label: "Audit", href: "/audit", adminOnly: true },
|
|
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
|
{ id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
|
|
{ id: "admin-appointments", label: "Appointments", href: "/admin/appointments", adminOnly: true },
|
|
{ id: "admin-random-jobs", label: "Random Jobs", href: "/admin/random-jobs", adminOnly: true },
|
|
{ id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
|
|
];
|
|
|
|
export function Header({ currentPage }: HeaderProps) {
|
|
const { user, logout, hasRole } = useAuth();
|
|
const router = useRouter();
|
|
const isRegularUser = hasRole(REGULAR);
|
|
const isAdminUser = hasRole(ADMIN);
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
if (!user) return null;
|
|
|
|
// Build nav items based on user role
|
|
// Admin users see admin nav items, regular users see regular nav items
|
|
const navItems = isAdminUser ? ADMIN_NAV_ITEMS : REGULAR_NAV_ITEMS;
|
|
const visibleItems = navItems.filter(
|
|
(item) => (!item.regularOnly || isRegularUser) && (!item.adminOnly || isAdminUser)
|
|
);
|
|
|
|
return (
|
|
<div style={sharedStyles.header}>
|
|
<div style={sharedStyles.nav}>
|
|
{visibleItems.map((item, index) => (
|
|
<span key={item.id}>
|
|
{index > 0 && <span style={sharedStyles.navDivider}>•</span>}
|
|
{item.id === currentPage ? (
|
|
<span style={sharedStyles.navCurrent}>{item.label}</span>
|
|
) : (
|
|
<a href={item.href} style={sharedStyles.navLink}>
|
|
{item.label}
|
|
</a>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div style={sharedStyles.userInfo}>
|
|
<span style={sharedStyles.userEmail}>{user.email}</span>
|
|
<button onClick={handleLogout} style={sharedStyles.logoutBtn}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|