improvement: sidebar refactored. COMMING SOON page added for all non-developed tabs.

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">
-          <h2 className="text-lg font-medium">{currentOrganization.name}</h2>
-
-          <div className="flex items-center gap-4">
-            <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>
+        <DashboardHeader
+          organizationName={currentOrganization.name}
+          userName={user.name}
+          onLogout={handleLogout}
+        />
 
         <main className="p-6 flex-1 overflow-y-auto">
           <div className="surface-panel p-6 min-h-full">
@@ -72,4 +65,32 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       </div>
     </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>
+  );
+}