feat: add employee management, backend health check, and UI improvements

web/src/router/index.js

@@ -1,8 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
+import { checkBackendHealth } from '../composables/useBackendHealth.js'
 import { appViews } from '../composables/useNavigation.js'
 import { useSystemState } from '../composables/useSystemState.js'
 import AppShellRouteView from '../views/AppShellRouteView.vue'
+import BackendUnavailableRouteView from '../views/BackendUnavailableRouteView.vue'
 import LoginRouteView from '../views/LoginRouteView.vue'
 import SetupRouteView from '../views/SetupRouteView.vue'
 
@@ -39,6 +41,11 @@ const router = createRouter({
       name: 'login',
       component: LoginRouteView
     },
+    {
+      path: '/backend-unavailable',
+      name: 'backend-unavailable',
+      component: BackendUnavailableRouteView
+    },
     {
       path: '/app',
       redirect: { name: 'app-overview' }
@@ -73,7 +80,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to) => {
-  const { isInitialized, loggedIn, resolveEntryRoute } = useSystemState()
+  const { isInitialized, loggedIn, resolveEntryRoute, syncAuthSession } = useSystemState()
+  const authActive = syncAuthSession({ notify: Boolean(to.meta.requiresAuth) })
 
   if (!isInitialized.value) {
     if (to.name !== 'setup') {
@@ -87,7 +95,21 @@ router.beforeEach((to) => {
     return resolveEntryRoute()
   }
 
-  if (!loggedIn.value && to.meta.requiresAuth) {
+  if (authActive && to.meta.requiresAuth) {
+    return checkBackendHealth().then((ok) => {
+      if (!ok && to.name !== 'backend-unavailable') {
+        return { name: 'backend-unavailable' }
+      }
+
+      if (ok && to.name === 'backend-unavailable') {
+        return resolveEntryRoute()
+      }
+
+      return true
+    })
+  }
+
+  if (!authActive && to.meta.requiresAuth) {
     return {
       name: 'login',
       query: {
@@ -96,7 +118,7 @@ router.beforeEach((to) => {
     }
   }
 
-  if (loggedIn.value && to.name === 'login') {
+  if (authActive && to.name === 'login') {
     return resolveEntryRoute()
   }