From da42f8cf11411a5bd6104d270686c83113beece5 Mon Sep 17 00:00:00 2001
From: ken <ken.vnguyen1@gmail.com>
Date: Fri, 27 Jun 2025 14:35:10 +0200
Subject: [PATCH] feat: add dashboard grid for other components

---
 .../src/components/Dashboard.vue              | 48 +++++++++++++++++++
 .../src/components/OverlayPopup.vue           |  3 --
 .../src/components/SystemMessagesPage.vue     |  2 +-
 .../src/components/SystemMesssages.vue        |  8 ++--
 .../src/components/TestPage.vue               | 21 --------
 .../src/router/index.js                       |  4 +-
 6 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue
 delete mode 100644 gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue

diff --git a/gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue b/gca-admin-gurusoft-message-dashboard/src/components/Dashboard.vue
new file mode 100644
index 0000000..7bf7aa9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue b/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue
index b67ed79..69ba1d0 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/OverlayPopup.vue
+++ b/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>
\ No newline at end of file
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
index 0e211a8..0cb66e7 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
+++ b/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>
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
index d1b5a6d..922e594 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
+++ b/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)"
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue b/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue
deleted file mode 100644
index b0d6838..0000000
--- a/gca-admin-gurusoft-message-dashboard/src/components/TestPage.vue
+++ /dev/null
@@ -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>
diff --git a/gca-admin-gurusoft-message-dashboard/src/router/index.js b/gca-admin-gurusoft-message-dashboard/src/router/index.js
index 2e303de..31cf1d2 100644
--- a/gca-admin-gurusoft-message-dashboard/src/router/index.js
+++ b/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({