Staff / Owner

Merged staff and owner settings

src/components/navigation/bottom-nav.tsx

@@ -2,9 +2,10 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { CalendarCheck, CalendarDays, ChartLine, Gift, House, Scissors, Settings, User, Users } from "lucide-react";
+import { Briefcase, CalendarCheck, CalendarDays, ChartLine, Gift, House, Scissors, Settings, User, Users } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils/cn";
+import { resolveActiveHref } from "@/lib/navigation/nav-config";
 
 /**
  * Icons are looked up by name, not passed as component references. A
@@ -25,6 +26,7 @@ export const NAV_ICON_MAP = {
   users: Users,
   settings: Settings,
   "chart-line": ChartLine,
+  briefcase: Briefcase,
 } satisfies Record<string, LucideIcon>;
 
 export type BottomNavIconName = keyof typeof NAV_ICON_MAP;
@@ -55,6 +57,7 @@ export interface BottomNavProps {
 export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
   const pathname = usePathname();
   const isStaff = variant === "staff";
+  const activeHref = resolveActiveHref(pathname, items);
 
   return (
     <nav
@@ -76,7 +79,7 @@ export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
       <div className="mx-auto flex w-full max-w-2xl items-center justify-between">
         {items.map(({ href, label, icon }) => {
           const Icon = NAV_ICON_MAP[icon];
-          const active = pathname === href || pathname.startsWith(`${href}/`);
+          const active = href === activeHref;
           return (
             <Link
               key={href}

src/components/navigation/staff-shell.tsx

@@ -3,14 +3,14 @@ import { getBranding } from "@/lib/business/branding";
 import { BottomNav } from "./bottom-nav";
 import { StaffSidebarNav } from "./staff-sidebar-nav";
 import type { BottomNavItem } from "./bottom-nav";
-import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+import { getNavItems } from "@/lib/navigation/nav-config";
 
 /**
- * Shared by (staff) and (owner) — see docs/implementation-plan.md §3: owner
- * is a permission on a staff account, not a separate shell. `items`
- * defaults to the staff nav; (owner) passes OWNER_NAV_ITEMS instead (see
- * staff-nav-items.ts) — same shell, same sidebar/bottom-nav components,
- * different item set, per the Phase 6 brief's own nav requirement.
+ * Shared by (staff) and (owner) — owner and super-admin are permissions on
+ * top of the same app, not separate shells. `items` is the merged,
+ * role-aware nav list from lib/navigation/nav-config.ts (defaults to the
+ * barber nav) — same shell, same sidebar/bottom-nav components, one
+ * centralized nav configuration rather than parallel staff/owner ones.
  *
  * Reads business branding itself (async Server Component) rather than
  * requiring every (staff)/(owner) layout to fetch and thread it through —
@@ -18,21 +18,19 @@ import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
  */
 export async function StaffShell({
   children,
-  items = STAFF_NAV_ITEMS,
-  footerLink,
+  items = getNavItems("staff"),
   notificationsHref = "/staff/notifications",
   unreadNotificationCount = 0,
 }: {
   children: React.ReactNode;
   items?: BottomNavItem[];
-  footerLink?: { href: string; label: string };
   notificationsHref?: string;
   unreadNotificationCount?: number;
 }) {
   const branding = await getBranding();
   return (
     <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
-      <StaffSidebarNav items={items} footerLink={footerLink} businessName={branding.name} logoUrl={branding.logoUrl} />
+      <StaffSidebarNav items={items} businessName={branding.name} logoUrl={branding.logoUrl} />
       <NotificationBell href={notificationsHref} unreadCount={unreadNotificationCount} />
       <div id="main-content">{children}</div>
       <BottomNav items={items} variant="staff" />

src/components/navigation/staff-sidebar-nav.tsx

@@ -2,32 +2,32 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ArrowLeftRight, Scissors } from "lucide-react";
+import { Scissors } from "lucide-react";
 import { cn } from "@/lib/utils/cn";
 import { NAV_ICON_MAP } from "./bottom-nav";
 import type { BottomNavItem } from "./bottom-nav";
+import { resolveActiveHref } from "@/lib/navigation/nav-config";
 
 /**
  * The desktop counterpart to BottomNav's staff variant — a persistent left
  * rail instead of a bottom bar, shown only at lg+ (BottomNav hides itself
  * there in turn, see bottom-nav.tsx). Same dark palette, same nav items,
  * same active-route logic; just a different shape for a screen with room
- * to spare, per the brief's explicit call-out that staff desktop needs
- * more than the mobile bar simply centered.
+ * to spare. One role-aware `items` list (see lib/navigation/nav-config.ts)
+ * covers barber, owner and super-admin — there is no separate owner
+ * sidebar or "switch tools" control here.
  */
 export function StaffSidebarNav({
   items,
-  footerLink,
   businessName,
   logoUrl,
 }: {
   items: BottomNavItem[];
-  /** Owner sidebar's explicit "back to barber tools" — see the brief's "clear access back to barber tools". Omitted on the staff sidebar itself. */
-  footerLink?: { href: string; label: string };
   businessName: string;
   logoUrl: string | null;
 }) {
   const pathname = usePathname();
+  const activeHref = resolveActiveHref(pathname, items);
 
   return (
     <nav
@@ -46,7 +46,7 @@ export function StaffSidebarNav({
       <div className="flex flex-1 flex-col gap-1">
         {items.map(({ href, label, icon }) => {
           const Icon = NAV_ICON_MAP[icon];
-          const active = pathname === href || pathname.startsWith(`${href}/`);
+          const active = href === activeHref;
           return (
             <Link
               key={href}
@@ -63,15 +63,6 @@ export function StaffSidebarNav({
           );
         })}
       </div>
-      {footerLink && (
-        <Link
-          href={footerLink.href}
-          className="mt-4 flex items-center gap-3 rounded-xl border-t border-white/5 px-3 pt-4 text-sm font-bold text-gray-400 transition-colors hover:text-white"
-        >
-          <ArrowLeftRight className="h-4 w-4" aria-hidden="true" />
-          {footerLink.label}
-        </Link>
-      )}
     </nav>
   );
 }