feat: add systemmessage component and page with all messages

7 months ago · ce0d7b0993
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -0,0 +1,5 @@
 <component name="ProjectCodeStyleConfiguration">
  <state>
    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
  </state>
 </component>
--- a/gca-admin-gurusoft-message-dashboard/index.html
+++ b/gca-admin-gurusoft-message-dashboard/index.html
@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
 <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 </head>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
 <body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/gca-admin-gurusoft-message-dashboard/package-lock.json
+++ b/gca-admin-gurusoft-message-dashboard/package-lock.json
@ -9,7 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "bootstrap": "^5.3.7",
        "vue": "^3.5.17"
        "vue": "^3.5.17",
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^6.0.0",
@ -1438,6 +1439,12 @@
        "@vue/shared": "3.5.17"
      }
    },
    "node_modules/@vue/devtools-api": {
      "version": "6.6.4",
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
      "license": "MIT"
    },
    "node_modules/@vue/devtools-core": {
      "version": "7.7.7",
      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.7.tgz",
@ -2877,6 +2884,21 @@
        }
      }
    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
      "license": "MIT",
      "dependencies": {
        "@vue/devtools-api": "^6.6.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/posva"
      },
      "peerDependencies": {
        "vue": "^3.2.0"
      }
    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/gca-admin-gurusoft-message-dashboard/package.json
+++ b/gca-admin-gurusoft-message-dashboard/package.json
@ -10,7 +10,8 @@
  },
  "dependencies": {
    "bootstrap": "^5.3.7",
    "vue": "^3.5.17"
    "vue": "^3.5.17",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.0",
--- a/gca-admin-gurusoft-message-dashboard/src/App.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/App.vue
@ -1,47 +1,10 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
 </script>

 <template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  <div class="app">
    <router-view/>

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
  </div>
 </template>

 <style scoped>
 header {
  line-height: 1.5;
 }

 .logo {
  display: block;
  margin: 0 auto 2rem;
 }

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }
 <script setup>

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
 }
 </style>
 </script>
--- a/gca-admin-gurusoft-message-dashboard/src/assets/main.css
+++ b/gca-admin-gurusoft-message-dashboard/src/assets/main.css
@ -1,35 +1,35 @@
@import './base.css';
 /*@import './base.css';*/

 #app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
 }
 /*#app {*/
 /*  max-width: 1280px;*/
 /*  margin: 0 auto;*/
 /*  padding: 2rem;*/
 /*  font-weight: normal;*/
 /*}*/

 a,
 .green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
 }
 /*a,*/
 /*.green {*/
 /*  text-decoration: none;*/
 /*  color: hsla(160, 100%, 37%, 1);*/
 /*  transition: 0.4s;*/
 /*  padding: 3px;*/
 /*}*/

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
 }
 /*@media (hover: hover) {*/
 /*  a:hover {*/
 /*    background-color: hsla(160, 100%, 37%, 0.2);*/
 /*  }*/
 /*}*/

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
 /*@media (min-width: 1024px) {*/
 /*  body {*/
 /*    display: flex;*/
 /*    place-items: center;*/
 /*  }*/

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
 }
 /*  #app {*/
 /*    display: grid;*/
 /*    grid-template-columns: 1fr 1fr;*/
 /*    padding: 0 2rem;*/
 /*  }*/
 /*}*/
--- a/gca-admin-gurusoft-message-dashboard/src/components/HelloWorld.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/HelloWorld.vue
@ -1,44 +0,0 @@
 <script setup>
 defineProps({
  msg: {
    type: String,
    required: true,
  },
 })
 </script>

 <template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
 </template>

 <style scoped>
 h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
 }

 h3 {
  font-size: 1.2rem;
 }

 .greetings h1,
 .greetings h3 {
  text-align: center;
 }

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
 }
 </style>
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemMessagesPage.vue
@ -0,0 +1,88 @@
 <template>
  <div class="container-sm py-4">
    <div class="mb-3">
      <router-link to="/" class="btn btn-sm btn-outline-primary">
        ← Tilbake
      </router-link>
    </div>

    <h2 class="h3 fw-bold mb-3 pt-1">System meldinger</h2>

    <ul v-if="messages.length" class="list-unstyled">
      <li
          v-for="msg in messages"
          :key="msg.id"
          class="border rounded p-3 mb-3"
      >
        <div class="d-flex justify-content-between align-items-start mb-2">
          <h5 class="fw-semibold">{{ msg.title }}</h5>
          <span
              class="badge text-dark text-uppercase"
              :class="typeClass(msg.type)"
          >
            {{ msg.type }}
          </span>
        </div>

        <p class="mb-1 small"><strong>Melding:</strong> {{ msg.message }}</p>
        <p class="mb-1 small"><strong>Beskrivelse:</strong> {{ msg.description }}</p>
        <p class="mb-1 text-muted small">{{ formatDate(msg.date) }}</p>

        <div v-if="msg.url" class="mt-1">
          <a
              :href="msg.url"
              target="_blank"
              rel="noopener noreferrer"
              class="link-primary small"
          >
            Les mer
          </a>
        </div>
      </li>
    </ul>

    <p v-else class="text-muted small">Ingen meldinger tilgjengelig.</p>
  </div>
 </template>


 <script setup>
 import {onMounted, ref} from 'vue';
 import {initializeApi} from '../utils/api.js';

 const api = initializeApi(true);
 const messages = ref([]);

 const useMockedData = import.meta.env.VITE_USE_MOCK === "true";

 if (useMockedData) {
  import('bootstrap/dist/css/bootstrap.min.css')
      .then(() => console.log('Bootstrap CSS loaded!'))
      .catch(err => console.error('Error loading Bootstrap CSS:', err));
 }

 onMounted(async () => {
  messages.value = await api.getAllMessages();
 });

 function formatDate(date) {
  const d = new Date(date);
  const day = String(d.getDate()).padStart(2, '0');
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const year = String(d.getFullYear()).slice(2); // get last 2 digits
  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  return `${day}.${month}.${year} ${hours}:${minutes}`;
 }

 const typeClass = (type) => {
  const typeMap = {
    info: 'bg-success bg-opacity-50',
    warning: 'bg-warning bg-opacity-75',
    new: 'bg-primary bg-opacity-25',
  };
  return typeMap[type] || 'bg-secondary bg-opacity-50';
 };


 </script>
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemMesssages.vue
@ -0,0 +1,86 @@
 <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">
        <ul v-if="messages.length" class="list-group list-group-flush pad gap-3">
          <li
              v-for="msg in messages.slice(0, 5)"
              :key="msg.id"
              class="list-group-item d-flex flex-column border border-1 border-dark"
              :class="typeClass(msg.type)">
            <div class="d-flex justify-content-between align-items-center w-100">
              <span class="text-dark fw-bold fs-6">{{ msg.title }}</span>
              <small class="text-black fw-bold fs-6">{{ formatDate(msg.date) }}</small>
            </div>

            <p class="mb-0">{{ msg.message }}</p>
          </li>
        </ul>
        <p v-else class="text-muted">Loading messages...</p>
        <!-- Indicator for more messages -->
        <div v-if="messages.length > 5" class="text-center text-muted fst-italic small mt-2">
          ...
        </div>
        <div class="text-center pt-1">
          <router-link to="/systemmessagelist" class="text-primary text-decoration-underline">
            Flere meldinger
          </router-link>
        </div>

      </div>
    </div>
  </div>
 </template>


 <script setup>
 import {ref, onMounted} from 'vue';
 import {initializeApi} from '../utils/api.js';

 const api = initializeApi(true);
 const messages = ref([]);

 const useMockedData = import.meta.env.VITE_USE_MOCK === "true";

 if (useMockedData) {
  import('bootstrap/dist/css/bootstrap.min.css')
      .then(() => console.log('Bootstrap CSS loaded!'))
      .catch(err => console.error('Error loading Bootstrap CSS:', err));
 }

 onMounted(async () => {
  messages.value = await api.getAllMessages();
 });

 function formatDate(date) {
  const d = new Date(date);
  const day = String(d.getDate()).padStart(2, '0');
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const year = String(d.getFullYear()).slice(2); // get last 2 digits
  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  return `${day}.${month}.${year} ${hours}:${minutes}`;
 }

 const typeClass = (type) => {
  const typeMap = {
    info: 'bg-success bg-opacity-50',
    warning: 'bg-warning bg-opacity-75',
    new: 'bg-primary bg-opacity-25',
  };
  return typeMap[type] || 'bg-secondary bg-opacity-50';
 };


 </script>

 <style>
@media (min-width: 1400px) {
  .container {
    max-width: 600px;
  }
 }
 </style>
--- a/gca-admin-gurusoft-message-dashboard/src/components/TheWelcome.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/TheWelcome.vue
@ -1,94 +0,0 @@
 <script setup>
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
 import SupportIcon from './icons/IconSupport.vue'

 const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
 </script>

 <template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>

    This project is served and bundled with
    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
    recommended IDE setup is
    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
    +
    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
    you need to test your components and web pages, check out
    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
    and
    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
    /
    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.

    <br />

    More instructions are available in
    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
    >.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <EcosystemIcon />
    </template>
    <template #heading>Ecosystem</template>

    Get official tools and libraries for your project:
    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
    you need more resources, we suggest paying
    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
    a visit.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <CommunityIcon />
    </template>
    <template #heading>Community</template>

    Got stuck? Ask your question on
    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
    (our official Discord server), or
    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
      >StackOverflow</a
    >. You should also follow the official
    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
    Bluesky account or the
    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
    X account for latest news in the Vue world.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <SupportIcon />
    </template>
    <template #heading>Support Vue</template>

    As an independent project, Vue relies on community backing for its sustainability. You can help
    us by
    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
  </WelcomeItem>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/components/WelcomeItem.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/WelcomeItem.vue
@ -1,87 +0,0 @@
 <template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
 </template>

 <style scoped>
 .item {
  margin-top: 2rem;
  display: flex;
  position: relative;
 }

 .details {
  flex: 1;
  margin-left: 1rem;
 }

 i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;

  color: var(--color-text);
 }

 h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
 }

@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
 }
 </style>
--- a/gca-admin-gurusoft-message-dashboard/src/components/icons/IconCommunity.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/icons/IconCommunity.vue
@ -1,7 +0,0 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
    <path
      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
    />
  </svg>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/components/icons/IconDocumentation.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/icons/IconDocumentation.vue
@ -1,7 +0,0 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
    <path
      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
    />
  </svg>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/components/icons/IconEcosystem.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/icons/IconEcosystem.vue
@ -1,7 +0,0 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
    <path
      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
    />
  </svg>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/components/icons/IconSupport.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/icons/IconSupport.vue
@ -1,7 +0,0 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
    <path
      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
    />
  </svg>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/components/icons/IconTooling.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/icons/IconTooling.vue
@ -1,19 +0,0 @@
 <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 <template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    aria-hidden="true"
    role="img"
    class="iconify iconify--mdi"
    width="24"
    height="24"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 24 24"
  >
    <path
      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
      fill="currentColor"
    ></path>
  </svg>
 </template>
--- a/gca-admin-gurusoft-message-dashboard/src/main.js
+++ b/gca-admin-gurusoft-message-dashboard/src/main.js
@ -1,6 +1,9 @@
 import './assets/main.css'

 import { createApp } from 'vue'
 import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router';

 createApp(App).mount('#app')
 createApp(App)
    .use(router)
    .mount('#app');
--- a/gca-admin-gurusoft-message-dashboard/src/mocks/system_message.json
+++ b/gca-admin-gurusoft-message-dashboard/src/mocks/system_message.json
@ -0,0 +1,142 @@
 [
  {
    "id": 1,
    "type": "info",
    "title": "System Maintenance Notification",
    "message": "Scheduled maintenance will occur this weekend.",
    "description": "The system will be down for maintenance from 10 PM to 2 AM on Saturday.",
    "url": "https://status.example.com/maintenance",
    "tags": [
      "maintenance",
      "downtime",
      "system"
    ],
    "date": "2025-06-28T22:00:00Z"
  },
  {
    "id": 2,
    "type": "warning",
    "title": "High Memory Usage Detected",
    "message": "One of the servers is experiencing high memory usage.",
    "description": "Our monitoring tools have detected abnormal memory usage on node-03. Investigation is ongoing.",
    "url": "https://status.example.com/memory-warning",
    "tags": [
      "performance",
      "alert",
      "memory"
    ],
    "date": "2025-06-26T08:45:00Z"
  },
  {
    "id": 3,
    "type": "new",
    "title": "Database Connection Failure",
    "message": "The application failed to connect to the database.",
    "description": "An issue with the DB connection pool is preventing new sessions. Engineers are working on a fix.",
    "url": "https://status.example.com/db-error",
    "tags": [
      "database",
      "error",
      "critical"
    ],
    "date": "2025-06-25T14:10:00Z"
  },
  {
    "id": 4,
    "type": "new",
    "title": "New Feature Release",
    "message": "We’ve launched a new dashboard experience.",
    "description": "The new dashboard includes improved analytics and faster loading times. Available to all users.",
    "url": "https://docs.example.com/new-dashboard",
    "tags": [
      "release",
      "feature",
      "dashboard"
    ],
    "date": "2025-06-24T10:00:00Z"
  },
  {
    "id": 5,
    "type": "random",
    "title": "API Rate Limit Notice",
    "message": "Your application is approaching the rate limit.",
    "description": "Please optimize your API usage to avoid temporary blocks. Visit our docs for best practices.",
    "url": "https://api.example.com/docs/rate-limiting",
    "tags": [
      "api",
      "rate-limit",
      "usage"
    ],
    "date": "2025-06-23T17:30:00Z"
  },
  {
    "id": 6,
    "type": "info",
    "title": "System Maintenance Notification",
    "message": "Scheduled maintenance will occur this weekend.",
    "description": "The system will be down for maintenance from 10 PM to 2 AM on Saturday.",
    "url": "https://status.example.com/maintenance",
    "tags": [
      "maintenance",
      "downtime",
      "system"
    ],
    "date": "2025-06-28T22:00:00Z"
  },
  {
    "id": 7,
    "type": "warning",
    "title": "High Memory Usage Detected",
    "message": "One of the servers is experiencing high memory usage.",
    "description": "Our monitoring tools have detected abnormal memory usage on node-03. Investigation is ongoing.",
    "url": "https://status.example.com/memory-warning",
    "tags": [
      "performance",
      "alert",
      "memory"
    ],
    "date": "2025-06-26T08:45:00Z"
  },
  {
    "id": 8,
    "type": "new",
    "title": "Database Connection Failure",
    "message": "The application failed to connect to the database.",
    "description": "An issue with the DB connection pool is preventing new sessions. Engineers are working on a fix.",
    "url": "https://status.example.com/db-error",
    "tags": [
      "database",
      "error",
      "critical"
    ],
    "date": "2025-06-25T14:10:00Z"
  },
  {
    "id": 9,
    "type": "new",
    "title": "New Feature Release",
    "message": "We’ve launched a new dashboard experience.",
    "description": "The new dashboard includes improved analytics and faster loading times. Available to all users.",
    "url": "https://docs.example.com/new-dashboard",
    "tags": [
      "release",
      "feature",
      "dashboard"
    ],
    "date": "2025-06-24T10:00:00Z"
  },
  {
    "id": 10,
    "type": "random",
    "title": "API Rate Limit Notice",
    "message": "Your application is approaching the rate limit.",
    "description": "Please optimize your API usage to avoid temporary blocks. Visit our docs for best practices.",
    "url": "https://api.example.com/docs/rate-limiting",
    "tags": [
      "api",
      "rate-limit",
      "usage"
    ],
    "date": "2025-06-23T17:30:00Z"
  }
 ]
--- a/gca-admin-gurusoft-message-dashboard/src/router/index.js
+++ b/gca-admin-gurusoft-message-dashboard/src/router/index.js
@ -0,0 +1,16 @@
 import {createRouter, createWebHistory} from 'vue-router';
 import SystemMessagesPage from '../components/SystemMessagesPage.vue';
 import SystemMessages from '../components/SystemMesssages.vue';


 const routes = [
    {path: '/', name: 'Home', component: SystemMessages},
    {path: '/systemmessagelist', name: 'MessagesPage', component: SystemMessagesPage}
 ];

 const router = createRouter({
    history: createWebHistory(),
    routes
 });

 export default router;
--- a/gca-admin-gurusoft-message-dashboard/src/utils/api.js
+++ b/gca-admin-gurusoft-message-dashboard/src/utils/api.js
@ -0,0 +1,27 @@
 import mockSystemMessages from '../mocks/system_message.json';

 const createMockApi = () => {
    return {
        // Get all messages
        getAllMessages: async () => {
            await new Promise(resolve => setTimeout(resolve, 300));
            return mockSystemMessages;
        },

        // Get a single message by ID
        getMessageById: async (id) => {
            await new Promise(resolve => setTimeout(resolve, 200));
            return mockSystemMessages.find(msg => msg.id === id) || null;
        },

        // Get messages filtered by type (e.g. INFO, ERROR)
        getMessagesByType: async (type) => {
            await new Promise(resolve => setTimeout(resolve, 200));
            return mockSystemMessages.filter(msg => msg.type === type);
        }
    };
 };

 export const initializeApi = (useMockedData = true) => {
    return createMockApi();
 };