enhanced navigation and added coach reassignment

website/js/app.js

@@ -1,6 +1,7 @@
 import { addRoute, startRouter, navigate } from './router.js';
 import { loginPage }      from './pages/login.js';
-import { dashboardPage }  from './pages/dashboard.js';
+import { homeDashboardPage } from './pages/home.js';
+import { questionnairesPage } from './pages/questionnaires.js';
 import { editorPage }     from './pages/editor.js';
 import { resultsPage }    from './pages/results.js';
 import { exportPage }     from './pages/export.js';
@@ -44,6 +45,39 @@ function rejectCoachSession() {
     navigate('#/login');
 }
 
+/** Link to home dashboard (#/). */
+export const HOME_HREF = '#/';
+
+const HOME_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1V9.5z"/></svg>`;
+
+/** House icon button — returns to dashboard. */
+export function homeNavButton(title = 'Dashboard') {
+    return `<a href="${HOME_HREF}" class="btn btn-home" title="${title}" aria-label="${title}">${HOME_ICON_SVG}</a>`;
+}
+
+/**
+ * Standard page header with home button.
+ * @param {string} title HTML-safe title text
+ * @param {string} [actionsHTML] optional buttons inside .actions
+ * @param {{ subtitle?: string }} [opts]
+ */
+export function pageHeaderHTML(title, actionsHTML = '', opts = {}) {
+    const subtitle = opts.subtitle
+        ? `<p class="page-header-sub">${opts.subtitle}</p>`
+        : '';
+    return `
+        <div class="page-header">
+            <div class="page-header-start">
+                ${homeNavButton()}
+                <div class="page-header-titles">
+                    <h1>${title}</h1>
+                    ${subtitle}
+                </div>
+            </div>
+            ${actionsHTML ? `<div class="actions">${actionsHTML}</div>` : ''}
+        </div>`;
+}
+
 export function showToast(message, type = 'info') {
     const container = document.getElementById('toastContainer');
     const toast = document.createElement('div');
@@ -82,8 +116,15 @@ function updateNav() {
         // Highlight active nav link
         const hash = window.location.hash.slice(1) || '/';
         document.querySelectorAll('.sidebar-nav a').forEach(a => {
-            const href = a.getAttribute('href').slice(1); // strip leading #
-            a.classList.toggle('active', hash === href || (href !== '/' && hash.startsWith(href)));
+            const href = a.getAttribute('href').slice(1);
+            let active = hash === href;
+            if (!active && href === '/questionnaires' && hash.startsWith('/questionnaire')) {
+                active = true;
+            }
+            if (!active && href !== '/' && hash.startsWith(href)) {
+                active = true;
+            }
+            a.classList.toggle('active', active);
         });
     } else {
         nav.style.display = 'none';
@@ -101,8 +142,8 @@ function roleGuard(roles, handler) {
 
 // Routes
 addRoute('/login', loginPage);
-addRoute('/', authGuard(dashboardPage));
-addRoute('/dashboard', authGuard(dashboardPage));
+addRoute('/', roleGuard(['admin', 'supervisor'], homeDashboardPage));
+addRoute('/questionnaires', authGuard(questionnairesPage));
 addRoute('/questionnaire/new', authGuard(editorPage));
 addRoute('/questionnaire/:id/results', authGuard(resultsPage));
 addRoute('/questionnaire/:id', authGuard(editorPage));