apps/web/src/App.tsx

@@ -10,14 +10,14 @@ import { GroupBookingPage } from "./pages/GroupBooking.js";
 import { CustomerPortal } from "./portal/CustomerPortal.js";
 
 const NAV_LINKS = [
-  { to: "/", label: "Appointments" },
-  { to: "/clients", label: "Clients" },
-  { to: "/services", label: "Services" },
-  { to: "/staff", label: "Staff" },
-  { to: "/invoices", label: "Invoices" },
-  { to: "/group-bookings", label: "Group Bookings" },
-  { to: "/reports", label: "Reports" },
-  { to: "/portal", label: "Customer Portal" },
+  { to: "/admin", label: "Appointments" },
+  { to: "/admin/clients", label: "Clients" },
+  { to: "/admin/services", label: "Services" },
+  { to: "/admin/staff", label: "Staff" },
+  { to: "/admin/invoices", label: "Invoices" },
+  { to: "/admin/group-bookings", label: "Group Bookings" },
+  { to: "/admin/reports", label: "Reports" },
+  { to: "/", label: "Customer Portal" },
 ];
 
 function AdminLayout() {
@@ -36,7 +36,7 @@ function AdminLayout() {
       >
         <strong style={{ marginRight: "1rem", fontSize: 16 }}>Groom Book</strong>
         <Link
-          to="/book"
+          to="/admin/book"
           style={{
             padding: "0.35rem 0.75rem",
             borderRadius: 4,
@@ -52,7 +52,9 @@ function AdminLayout() {
         </Link>
         {NAV_LINKS.map(({ to, label }) => {
           const active =
-            to === "/" ? location.pathname === "/" : location.pathname.startsWith(to);
+            to === "/admin"
+              ? location.pathname === "/admin"
+              : location.pathname.startsWith(to);
           return (
             <Link
               key={to}
@@ -91,9 +93,13 @@ function AdminLayout() {
 export function App() {
   const location = useLocation();
 
-  if (location.pathname.startsWith("/portal")) {
-    return <CustomerPortal />;
+  if (location.pathname.startsWith("/admin")) {
+    return (
+      <Routes>
+        <Route path="/admin/*" element={<AdminLayout />} />
+      </Routes>
+    );
   }
 
-  return <AdminLayout />;
+  return <CustomerPortal />;
 }

apps/web/src/__tests__/App.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, within, act } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { App } from "../App.js";
 
@@ -11,30 +11,28 @@ beforeEach(() => {
   } as unknown as Response);
 });
 
-async function renderApp(route = "/") {
-  await act(async () => {
-    render(
-      <MemoryRouter initialEntries={[route]}>
-        <App />
-      </MemoryRouter>
-    );
-  });
+function renderApp(route = "/admin") {
+  render(
+    <MemoryRouter initialEntries={[route]}>
+      <App />
+    </MemoryRouter>
+  );
   return screen.getByRole("navigation");
 }
 
 describe("App navigation", () => {
-  it("renders the Groom Book brand", async () => {
-    const nav = await renderApp();
+  it("renders the Groom Book brand", () => {
+    const nav = renderApp();
     expect(within(nav).getByText("Groom Book")).toBeInTheDocument();
   });
 
-  it("renders the Book CTA button", async () => {
-    const nav = await renderApp();
+  it("renders the Book CTA button", () => {
+    const nav = renderApp();
     expect(within(nav).getByText("Book")).toBeInTheDocument();
   });
 
-  it("renders all primary nav links", async () => {
-    const nav = await renderApp();
+  it("renders all primary nav links", () => {
+    const nav = renderApp();
     const expectedLinks = [
       "Appointments",
       "Clients",
@@ -49,10 +47,20 @@ describe("App navigation", () => {
     });
   });
 
-  it("highlights the active route link", async () => {
-    const nav = await renderApp("/clients");
+  it("highlights the active route link", () => {
+    const nav = renderApp("/admin/clients");
     const clientsLink = within(nav).getByText("Clients");
     // Active links use fontWeight 600
     expect(clientsLink).toHaveStyle({ fontWeight: "600" });
   });
+
+  it("renders customer portal at root", () => {
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>
+    );
+    // Customer portal should render at root - no admin nav present
+    expect(screen.queryByText("Groom Book")).not.toBeInTheDocument();
+  });
 });