feat: add dashboard grid for other components

gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import OverlayPopup from "./OverlayPopup.vue";
+import SystemMesssages from "./SystemMesssages.vue";
+</script>
+
+<style scoped>
+
+</style>
+
+<!--<template>-->
+<!--  <div class="list-group w-25 gap-3 p-3" style="margin: auto">-->
+<!--    <OverlayPopup></OverlayPopup>-->
+<!--    <router-link to="/systemmessage" class="btn btn-secondary">-->
+<!--      System messages-->
+<!--    </router-link>-->
+<!--    <router-link to="/systemmessagelist" class="btn btn-secondary">-->
+<!--      System messages-->
+<!--    </router-link>-->
+<!--  </div>-->
+<!--</template>-->
+
+<template>
+  <div class="container-fluid text-center border border-3 border-dark">
+    <div class="row border">
+      <div class="col">
+        1 of 1
+      </div>
+    </div>
+    <div class="row">
+      <div class="col border">
+        1 of 2
+      </div>
+      <div class="col border">
+        <div class="row">
+          <div class="col">
+            <SystemMesssages/>
+          </div>
+          <div class="col border border-warning">
+            2 of 2
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <OverlayPopup/>
+
+
+</template>

gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue

@@ -33,15 +33,12 @@
 import {ref, onMounted} from 'vue';
 import {initializeApi} from '@/utils/api';
 
-const overlayPopup = ref(null)
 const overlayInfo = ref({})
 const api = initializeApi();
 
 
 onMounted(async () => {
   overlayInfo.value = await api.getOverlayPopup();
-  const modalInstance = new bootstrap.Modal(overlayPopup.value)
-  modalInstance.show()
 });
 
 </script>

gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-sm py-4">
     <div class="mb-3">
-      <router-link to="/systemmessage" class="btn btn-sm btn-outline-primary">
+      <router-link to="/dashboard" class="btn btn-sm btn-outline-primary">
         ← Tilbake
       </router-link>
     </div>

gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="container">
-    <div class="card shadow-sm">
-      <div class="card-header">
-        <h4 class="mb-0">System meldinger</h4>
-      </div>
-      <div class="card-body">
+    <div class="card border-0">
+      <h4 class="d-flex justify-content-start m-3">System meldinger</h4>
+      <div class="card-body pt-0">
         <ul v-if="messages.length" class="list-group list-group-flush pad gap-3">
           <li
               v-for="msg in messages.slice(0, 3)"

gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import OverlayPopup from "./OverlayPopup.vue";
-</script>
-
-<style scoped>
-
-</style>
-
-<template>
-  <div class="list-group w-25 gap-3 p-3" style="margin: auto">
-    <OverlayPopup></OverlayPopup>
-    <router-link to="/systemmessage" class="btn btn-secondary">
-      System messages
-    </router-link>
-    <router-link to="/systemmessagelist" class="btn btn-secondary">
-      System messages
-    </router-link>
-  </div>
-
-
-</template>

gca-admin-gurusoft-message-dashboard/src/router/index.js

@@ -1,12 +1,12 @@
 import {createRouter, createWebHistory} from 'vue-router';
 import SystemMessagesPage from '../components/SystemMessagesPage.vue';
 import SystemMessages from '../components/SystemMesssages.vue';
-import TestPage from '../components/TestPage.vue';
+import Dashboard from '../components/Dashboard.vue';
 
 const routes = [
     {path: '/systemmessage', name: 'SystemMessage', component: SystemMessages},
     {path: '/systemmessagelist', name: 'SystemMessageList', component: SystemMessagesPage},
-    {path: '/', name: 'TestPage', component: TestPage}
+    {path: '/dashboard', name: 'Dashboard', component: Dashboard}
 ];
 
 const router = createRouter({