frontend/src/app/(dashboard)/appointments/page.tsx

@@ -0,0 +1,10 @@
+export default function AppointmentsPage() {
+  return (
+    <div className="space-y-3">
+      <h1 className="text-2xl font-semibold text-text-primary">Appointments</h1>
+      <p className="text-sm text-text-secondary">
+        Appointments module is coming soon.
+      </p>
+    </div>
+  );
+}

frontend/src/app/(dashboard)/lab/page.tsx

@@ -0,0 +1,10 @@
+export default function LabPage() {
+  return (
+    <div className="space-y-3">
+      <h1 className="text-2xl font-semibold text-text-primary">Lab Management</h1>
+      <p className="text-sm text-text-secondary">
+        Lab management module is coming soon.
+      </p>
+    </div>
+  );
+}

frontend/src/app/(dashboard)/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { memo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import Sidebar from '@/components/ui/Sidebar';
@@ -10,6 +10,9 @@ import { LogOut } from 'lucide-react';
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const { user, currentOrganization, isAuthReady, logout } = useAuth();
   const router = useRouter();
+  const handleLogout = useCallback(() => {
+    void logout();
+  }, [logout]);
 
   // ✅ AUTH GUARD (runs once per navigation group)
   useEffect(() => {
@@ -48,21 +51,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       <Sidebar />
 
       <div className="flex-1 flex flex-col">
-        <header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
+        <DashboardHeader
-          <h2 className="text-lg font-medium">{currentOrganization.name}</h2>
+          organizationName={currentOrganization.name}
-
+          userName={user.name}
-          <div className="flex items-center gap-4">
+          onLogout={handleLogout}
-            <ThemeToggle />
+        />
-            <span className="text-sm text-text-secondary">{user.name}</span>
-            <button
-              onClick={logout}
-              className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
-            >
-              <LogOut className="w-4 h-4 icon-flat" />
-              Logout
-            </button>
-          </div>
-        </header>
 
         <main className="p-6 flex-1 overflow-y-auto">
           <div className="surface-panel p-6 min-h-full">
@@ -73,3 +66,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     </div>
   );
 }
+
+const DashboardHeader = memo(function DashboardHeader({
+  organizationName,
+  userName,
+  onLogout,
+}: {
+  organizationName: string;
+  userName: string;
+  onLogout: () => void;
+}) {
+  return (
+    <header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
+      <h2 className="text-lg font-medium">{organizationName}</h2>
+
+      <div className="flex items-center gap-4">
+        <ThemeToggle />
+        <span className="text-sm text-text-secondary">{userName}</span>
+        <button
+          onClick={onLogout}
+          className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
+        >
+          <LogOut className="w-4 h-4 icon-flat" />
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+});

frontend/src/app/(dashboard)/reports/page.tsx

@@ -0,0 +1,10 @@
+export default function ReportsPage() {
+  return (
+    <div className="space-y-3">
+      <h1 className="text-2xl font-semibold text-text-primary">Reports</h1>
+      <p className="text-sm text-text-secondary">
+        Reports module is coming soon.
+      </p>
+    </div>
+  );
+}

frontend/src/app/(dashboard)/staff/page.tsx

@@ -0,0 +1,10 @@
+export default function StaffPage() {
+  return (
+    <div className="space-y-3">
+      <h1 className="text-2xl font-semibold text-text-primary">Staff Management</h1>
+      <p className="text-sm text-text-secondary">
+        Staff management module is coming soon.
+      </p>
+    </div>
+  );
+}

frontend/src/components/ui/Sidebar.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { memo } from 'react';
+import { usePathname } from 'next/navigation';
 import {
   LayoutDashboard,
   Users,
@@ -21,9 +23,8 @@ const menu = [
   { name: 'Reports', path: '/reports', icon: FileText },
 ];
 
-export default function Sidebar() {
+function Sidebar() {
   const pathname = usePathname();
-  const router = useRouter();
 
   return (
     <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col p-4">
@@ -37,9 +38,10 @@ export default function Sidebar() {
           const isActive = pathname === item.path;
 
           return (
-            <button
+            <Link
               key={item.name}
-              onClick={() => router.push(item.path)}
+              href={item.path}
+              prefetch
               className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
                 isActive
                   ? 'bg-primary-soft border-primary/60 text-text-primary'
@@ -48,10 +50,12 @@ export default function Sidebar() {
             >
               <Icon className="w-[18px] h-[18px] icon-flat" />
               <span className="text-sm">{item.name}</span>
-            </button>
+            </Link>
           );
         })}
       </nav>
     </aside>
   );
 }
+
+export default memo(Sidebar);

frontend/src/lib/hooks/useAuth.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { authApi } from '@/lib/api/auth';
 import { User, Organization } from '@/types';
@@ -37,11 +37,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
   const router = useRouter();
 
-  useEffect(() => {
+  const normalizeProfilePayload = useCallback((payload: any): { user: User | null; organizations: Organization[] } => {
-    checkAuth();
-  }, []);
-
-  const normalizeProfilePayload = (payload: any): { user: User | null; organizations: Organization[] } => {
     const organizations = payload?.organizations || [];
 
     if (payload?.user) {
@@ -60,9 +56,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     }
 
     return { user: null, organizations };
-  };
+  }, []);
 
-  const checkAuth = async () => {
+  const checkAuth = useCallback(async () => {
     try {
       setIsLoading(true);
 
@@ -103,10 +99,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       setIsLoading(false);
       setIsAuthReady(true);
     }
-  };
+  }, [normalizeProfilePayload]);
+
+  useEffect(() => {
+    void checkAuth();
+  }, [checkAuth]);
 
   // ✅ REGISTER
-  const registerTrial = async (
+  const registerTrial = useCallback(async (
     email: string,
     password: string,
     name: string,
@@ -147,10 +147,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [router]);
 
   // ✅ LOGIN
-  const login = async (email: string, password: string) => {
+  const login = useCallback(async (email: string, password: string) => {
     try {
       setIsLoading(true);
       setError(null);
@@ -178,17 +178,17 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [router]);
 
-  const logout = async () => {
+  const logout = useCallback(async () => {
     localStorage.clear();
     setUser(null);
     setOrganizations([]);
     setCurrentOrganization(null);
     router.push('/');
-  };
+  }, [router]);
 
-  const selectOrganization = async (orgId: string) => {
+  const selectOrganization = useCallback(async (orgId: string) => {
     try {
       setIsLoading(true);
 
@@ -208,26 +208,41 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [router]);
 
-  const clearError = () => setError(null);
+  const clearError = useCallback(() => setError(null), []);
 
-  return (
+  const contextValue = useMemo(
-    <AuthContext.Provider
+    () => ({
-      value={{
       user,
       organizations,
       currentOrganization,
       isLoading,
-        isAuthReady, // ✅ expose it
+      isAuthReady,
       error,
       registerTrial,
       login,
       logout,
       selectOrganization,
       clearError,
-      }}
+    }),
-    >
+    [
+      user,
+      organizations,
+      currentOrganization,
+      isLoading,
+      isAuthReady,
+      error,
+      registerTrial,
+      login,
+      logout,
+      selectOrganization,
+      clearError,
+    ],
+  );
+
+  return (
+    <AuthContext.Provider value={contextValue}>
       {children}
     </AuthContext.Provider>
   );