feature: Degraded Operations Visibility

vigilcare-dashboard/src/components/layout/MobileNav.vue

@@ -1,13 +1,10 @@
 <script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useRoleAccess } from '@/composables/roleAccess'
 
 const route = useRoute()
-
-const links = [
-  { to: '/ward', label: 'Ward', icon: 'ward' },
-  { to: '/alerts', label: 'Alerts', icon: 'alerts' },
-]
+const { mobileNavLinks } = useRoleAccess()
 
 const activePath = computed(() => route.path)
 </script>
@@ -18,7 +15,7 @@ const activePath = computed(() => route.path)
     aria-label="Mobile navigation"
   >
     <ul class="flex h-16 items-stretch">
-      <li v-for="link in links" :key="link.to" class="flex-1">
+      <li v-for="link in mobileNavLinks" :key="link.to" class="flex-1">
         <RouterLink
           :to="link.to"
           class="flex h-full flex-col items-center justify-center gap-2 px-4 py-2 text-xs font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
@@ -41,6 +38,36 @@ const activePath = computed(() => route.path)
               d="M4 6h16M4 10h16M4 14h16M4 18h16"
             />
           </svg>
+          <svg
+            v-else-if="link.icon === 'sepsis'"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <svg
+            v-else-if="link.icon === 'reconciliation'"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+            />
+          </svg>
           <svg
             v-else
             class="h-6 w-6"