feat: add systemlink and marked pop-up component

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,21 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="router-link" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="file://$PROJECT_DIR$" libraries="{bootstrap}" />
+  </component>
+</project>

.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import OverlayPopup from "./OverlayPopup.vue";
 import SystemMesssages from "./SystemMesssages.vue";
+import SystemLinks from "@/components/SystemLinks.vue";
+import MarkedPopUp from "@/components/MarkedPopUp.vue";
 </script>
 
 <style scoped>
@@ -36,13 +38,14 @@ import SystemMesssages from "./SystemMesssages.vue";
             <SystemMesssages/>
           </div>
           <div class="col border border-warning">
-            2 of 2
+            <SystemLinks/>
           </div>
         </div>
       </div>
     </div>
   </div>
   <OverlayPopup/>
+  <MarkedPopUp/>
 
 
 </template>

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

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import MarkedPopUp from "@/components/MarkedPopUp.vue";
-
-// Define button styles with different colors
-const buttons = [
-  {text: 'Google Search', url: 'https://www.google.com', class: 'btn-primary'},
-  {text: 'Google Maps', url: 'https://maps.google.com', class: 'btn-success'},
-  {text: 'Google Drive', url: 'https://drive.google.com', class: 'btn-warning'},
-  {text: 'Gmail', url: 'https://mail.google.com', class: 'btn-danger'}
-];
-
-// Lorem ipsum text for demonstration
-const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ".repeat(100);
-</script>
-
-<template>
-  <MarkedPopUp element-id="fake-page-popup" :use-mocked-data="true"/>
-  <div class="container p-2">
-    <h1 class="mb-4">Fake Page Example</h1>
-
-    <!-- Buttons section - now full width and above text -->
-    <div class="p-1">
-      <div class="card-header p-2">Google Services</div>
-      <div class="card-body p-2">
-        <div class="row">
-          <div v-for="(button, index) in buttons" :key="index" class="col-md-3 mb-2">
-            <a :href="button.url" class="btn w-100" :class="button.class" target="_blank">
-              {{ button.text }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Text section - now without scrollable container -->
-    <div class="p-3 ">
-      <div class="card-header">Text Content</div>
-      <div class="card-body">
-        <p>{{ loremText }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-
-.card-header {
-  font-weight: bold;
-  background-color: #f8f9fa;
-}
-</style>

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

@@ -4,13 +4,9 @@ import popupData from '@/mocks/marketPopUpMockData.json';
 
 
 const props = defineProps({
-  elementId: {
-    type: String,
-    required: true
-  },
   useMockedData: {
     type: Boolean,
-    default: false
+    default: true
   }
 });
 

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

@@ -2,11 +2,14 @@ import {createRouter, createWebHistory} from 'vue-router';
 import SystemMessagesPage from '../components/SystemMessagesPage.vue';
 import SystemMessages from '../components/SystemMesssages.vue';
 import Dashboard from '../components/Dashboard.vue';
-import FakePage from '../components/FakePage.vue'
 import SystemLinks from '../components/SystemLinks.vue'
-import MarkedPopUp from '../components/MarkedPopUp.vue'
-
 
+const routes = [
+    {path: '/systemmessage', name: 'SystemMessage', component: SystemMessages},
+    {path: '/systemmessagelist', name: 'SystemMessageList', component: SystemMessagesPage},
+    {path: '/systemlinks', name: 'SystemLinks', component: SystemLinks},
+    {path: '/', name: 'Dashboard', component: Dashboard}
+];
 
 const router = createRouter({
     history: createWebHistory(),

gca-admin-gurusoft-message-dashboard/src/utils/api.js

@@ -1,5 +1,5 @@
-import mockSystemMessages from '../mocks/system_message.json';
-import mockOverlay from '../mocks/overlay_popup.json';
+import mockSystemMessages from '../mocks/systemMessage.json';
+import mockOverlay from '../mocks/overlayPopup.json';
 
 const createMockApi = () => {
     return {

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "sommer2025",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}