diff --git a/env.sh b/env.sh
index f8637a7..f14b723 100644
--- a/env.sh
+++ b/env.sh
@@ -1,4 +1,4 @@
-INT_DIR="../freeleaps-int/sites/freeleaps/deploy"
+INT_DIR="@/freeleaps-int/sites/freeleaps/deploy"
 DEPLOY_DIR="deploy"
 FE_ENV="$DEPLOY_DIR/.fe.env"
 if  [ -d "$INT_DIR" ];  then
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index b07df3d..e20f556 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -86,7 +86,7 @@
   </div>
 </template>
 <script>
-import { UserAuthApi } from '../utils/backend/index'
+import { UserAuthApi } from '@/utils/backend/index'
 
 export default {
   name: 'HeaderGuest',
diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 70a1035..cb3870d 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../types/index'
+import { userRoleEnum } from '@/types/index'
 export default {
   methods: {
     //public
diff --git a/frontend/src/mixins/userAuth.js b/frontend/src/mixins/userAuth.js
index bf4379d..32efc4a 100644
--- a/frontend/src/mixins/userAuth.js
+++ b/frontend/src/mixins/userAuth.js
@@ -1,4 +1,4 @@
-import { signinActionEnum } from '../types/index'
+import { signinActionEnum } from '@/types/index'
 export default {
   methods: {
     mnx_userSignedin(authResposne, keepMeSignedin) {
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index f9b3e2f..76b3493 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -36,8 +36,8 @@ import {
   UserAuthApi,
   applicantValidator
   // userProfileValidator,
-} from '../../utils/index'
-import { signinActionEnum } from '../../types/index'
+} from '@/utils/index'
+import { signinActionEnum } from '@/types/index'
 
 export default {
   name: 'FrontDoor',
diff --git a/frontend/src/pages/guest/NewUserSetFlid.vue b/frontend/src/pages/guest/NewUserSetFlid.vue
index 0a49d6f..d210b50 100644
--- a/frontend/src/pages/guest/NewUserSetFlid.vue
+++ b/frontend/src/pages/guest/NewUserSetFlid.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { UserAuthApi } from '../../utils/index'
-import { signinActionEnum } from '../../types/index'
+import { UserAuthApi } from '@/utils/index'
+import { signinActionEnum } from '@/types/index'
 export default {
   name: 'NewUserSetFlid',
   props: {
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 6c12765..2367876 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { UserAuthApi, passwordValidator } from '../../utils/index'
+import { UserAuthApi, passwordValidator } from '@/utils/index'
 export default {
   name: 'NewUserSetPassword',
   props: {},
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index 98573a5..3e19924 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
-import { UserAuthApi } from '../../utils/index'
+import { signinActionEnum } from '@/types'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 3bd2d74..8f35cd1 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
-import { UserAuthApi } from '../../utils/index'
+import { signinActionEnum } from '@/types'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {
diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
index 32994c7..02226c5 100644
--- a/frontend/src/pages/lab/translation/Home.vue
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import { LabApi } from '../../../utils/index'
+import { LabApi } from '@/utils/index'
 export default {
   name: 'TranslationHome',
   components: {},
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 6e1287a..4fbd734 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'About',
   components: {},
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index d226d4f..bbd108c 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Blogs',
   components: {},
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index f99041d..464e6ab 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Career',
   components: {},
diff --git a/frontend/src/pages/public/Contact.vue b/frontend/src/pages/public/Contact.vue
index 713e8b1..916892e 100644
--- a/frontend/src/pages/public/Contact.vue
+++ b/frontend/src/pages/public/Contact.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi } from '@/utils/index'
 export default {
   name: 'Contact',
   components: {},
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index e8300f1..7608a70 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -4,9 +4,6 @@
   </div>
 </template>
 <script>
-// import { pdfjsLib } from '../../plugins/index'
-// import { ContentApi } from '../../utils/index'
-// import { Buffer } from 'buffer'
 import { ContentApi } from '@/utils/index'
 import PDFReader from '@/components/PDFReader.vue'
 export default {
diff --git a/frontend/src/pages/user/account/UserFinance.vue b/frontend/src/pages/user/account/UserFinance.vue
index 3c711d7..517554f 100644
--- a/frontend/src/pages/user/account/UserFinance.vue
+++ b/frontend/src/pages/user/account/UserFinance.vue
@@ -8,7 +8,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'UserFinance',
   props: {},
diff --git a/frontend/src/pages/user/account/UserHistory.vue b/frontend/src/pages/user/account/UserHistory.vue
index bff79a8..35bd5d4 100644
--- a/frontend/src/pages/user/account/UserHistory.vue
+++ b/frontend/src/pages/user/account/UserHistory.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { HistoryApi } from '../../../utils/index'
+import { HistoryApi } from '@/utils/index'
 export default {
   name: 'UserHistory',
   props: {},
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 8df333b..463863a 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -710,14 +710,9 @@
 
 <script>
 import SvgIcon from '@/components/SvgIcon.vue'
-import { moneyCollectionTypeEnum } from '../../../types/index'
+import { moneyCollectionTypeEnum } from '@/types/index'
 
-import {
-  UserProfileApi,
-  elementHandler,
-  textAreaAujuster,
-  passwordValidator
-} from '../../../utils/index'
+import { UserProfileApi, elementHandler, textAreaAujuster, passwordValidator } from '@/utils/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 
 export default {
diff --git a/frontend/src/pages/user/account/UserSubscription.vue b/frontend/src/pages/user/account/UserSubscription.vue
index e02ad92..09fc662 100644
--- a/frontend/src/pages/user/account/UserSubscription.vue
+++ b/frontend/src/pages/user/account/UserSubscription.vue
@@ -8,7 +8,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'UserSubscription',
   props: {},
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index a322ece..da5764f 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -78,8 +78,8 @@
   </div>
 </template>
 <script>
-import SvgIcon from '../../../components/SvgIcon.vue'
-import { MessageHubApi, DateUtils } from '../../../utils/index'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { MessageHubApi, DateUtils } from '@/utils/index'
 export default {
   components: { SvgIcon },
   name: 'MessageHub',
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index d6d51c5..5bda75a 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -266,7 +266,7 @@
 import {
   ProviderHubApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ProviderHub',
   props: {},
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index b5b7a53..7a8fe78 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -75,12 +75,12 @@
                     Propose
                   </button>
                   <div class="request-description-content" v-html="request.content"></div>
-                  <div class="preview-btn-container" v-for="(file, index) in request.attached_files" :key="index">
-                    <button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#previewModal" :data-bs-file="file.file_name" :data-bs-rid="request.id" :data-bs-did="file.document_id">
-                      Preview {{ file.file_name }}
+                  <div v-for="(file, index) in request.attached_files" :key="index">
+                    <button @click="previewAttachedFile(request.id, file.document_id)">
+                      Preview{{ file.file_name }}
                     </button>
-                    <button class="btn btn-link" @click="downloadAttachedFile(request.id, file.document_id)">
-                      Download {{ file.file_name }}
+                    <button @click="downloadAttachedFile(request.id, file.document_id)">
+                      Download{{ file.file_name }}
                     </button>
                   </div>
                 </div>
@@ -177,56 +177,24 @@
       </div>
     </div>
   </div>
-  <div class="modal fade" id="previewModal" ref="previewModal" aria-labelledby="previewModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h1 class="modal-title fs-5" id="previewModalLabel">{{previewModal.filename}}</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <PDFReader :doc="previewModal.doc" />
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
-import { proposingModelEnum } from '../../../types/index'
-import PDFReader from '@/components/PDFReader.vue'
+import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '@/utils/index'
+import { proposingModelEnum } from '@/types/index'
 export default {
   name: 'RequestHub',
   props: {},
   mounted() {
     this.fetchRequests()
-    this.$refs.previewModal.addEventListener('shown.bs.modal', event => {
-      const relatedTarget = event.relatedTarget
-      const filename = relatedTarget.getAttribute('data-bs-file')
-      this.previewModal = { filename }
-      const requestId =  relatedTarget.getAttribute('data-bs-rid')
-      const documentId =  relatedTarget.getAttribute('data-bs-did')
-      WorksapceApi.fetchAttachedFileAsMediaData(requestId, documentId)
-        .then((response) => {
-          this.previewModal.doc = {url: response.data}
-        })
-        .catch((error) => {
-          this.mnx_backendErrorHandler(error)
-        })
-    })
-    this.$refs.previewModal.addEventListener('hidden.bs.modal', () => {
-      this.previewModal = {}
-    })
   },
   data() {
     return {
       requestGroups: [],
-      message: null,
-      previewModal: {}
+      message: null
     }
   },
-  components: { PDFReader },
+
   methods: {
     fetchRequests() {
       RequestHubApi.fetchRequestForHub()
@@ -244,6 +212,18 @@ export default {
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },
+    previewAttachedFile(request_id, document_id) {
+      // !!! SHOULD NOT use PdfContentViewer which is designed for unlogged in users.
+      // !!! Instead, should have a dedicated pdf viewer which should follow the figma design.
+      // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
+      //   .then((response) => {
+      //     let media_data = response.data
+      //     console.log(media_data)
+      //   })
+      //   .catch((error) => {
+      //     this.mnx_backendErrorHandler(error)
+      //   })
+    },
     downloadAttachedFile(request_id, document_id) {
       WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
         .then((response) => {
@@ -431,15 +411,4 @@ export default {
   @extend .text-start;
   font-weight: bold;
 }
-
-.preview-btn-container {
-  display: flex;
-  text-align: left;
-  
-  .btn-link {
-    font-weight: bold;
-    margin-right: 15px;
-    text-decoration: underline;
-  }
-}
 </style>
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index e5e5d31..af1aec9 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -15,7 +15,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ProposalSubmitted',
   props: {
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 4a68d53..cde47c5 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -291,14 +291,14 @@
 </template>
 
 <script>
-import { requestHubUtils, RequestHubApi } from '../../../utils/index'
+import { requestHubUtils, RequestHubApi } from '@/utils/index'
 import {
   proposingModelEnum,
   preparedProposal,
   preparedProposalStage,
   preparedProposalSummary,
   proposalUtils
-} from '../../../types/index'
+} from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 export default {
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 6c6de4b..0269c2c 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -571,7 +571,13 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils, requestIssueUtils, requestHubUtils } from '../../../utils/index'
+import {
+  WorksapceApi,
+  DateUtils,
+  requestIssueUtils,
+  requestHubUtils,
+  WsConnectionFactory
+} from '@/utils/index'
 import {
   projectStatusEnum,
   projectIssueStatusEnum,
@@ -582,12 +588,13 @@ import {
   milestoneStatusEnum,
   convertIntoToMilestoneStatus,
   convertIntoToProjectIssueStatus
-} from '../../../types/index'
+} from '@/types/index'
 export default {
   name: 'Workspace',
   props: {},
   mounted() {
     this.fetchView()
+    //this.connectWebSocket()
   },
   data() {
     return {
@@ -598,7 +605,9 @@ export default {
       qrCode: {
         imageUrl: null,
         index: null
-      }
+      },
+
+      downstream_web_socket: null
     }
   },
 
@@ -905,6 +914,27 @@ export default {
         default:
           return false
       }
+    },
+    /** web socket. we put them here for test purpose. they need to be moved to an appropriate place**/
+    websocketOnOpen(event) {
+      console.log(event)
+    },
+    websocketOnMessage(event) {
+      console.log(event.data)
+    },
+    websocketOnError(event) {
+      console.log(event)
+    },
+    websocketOnClose(event) {
+      console.log(event)
+    },
+    connectWebSocket() {
+      this.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
+        this.websocketOnOpen,
+        this.websocketOnMessage,
+        this.websocketOnError,
+        this.websocketOnClose
+      )
     }
   }
 }
diff --git a/frontend/src/pages/user/workspace/projectManage/Home.vue b/frontend/src/pages/user/workspace/projectManage/Home.vue
index 72a30eb..7ddf0b4 100644
--- a/frontend/src/pages/user/workspace/projectManage/Home.vue
+++ b/frontend/src/pages/user/workspace/projectManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProjects',
   props: {},
diff --git a/frontend/src/pages/user/workspace/proposalManage/Home.vue b/frontend/src/pages/user/workspace/proposalManage/Home.vue
index 3137e24..0d72712 100644
--- a/frontend/src/pages/user/workspace/proposalManage/Home.vue
+++ b/frontend/src/pages/user/workspace/proposalManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProposal',
   props: {},
diff --git a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
index 1263b9e..85b5f0d 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposit.vue
@@ -13,7 +13,7 @@
 import {
   UserProfileApi
   // requestHubUtils,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueDeposit',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Deposited.vue b/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
index b69f667..261d34b 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Deposited.vue
@@ -11,7 +11,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueDeposited',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 18731f2..4c48087 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -170,8 +170,8 @@
 </template>
 
 <script>
-import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '../../../../utils/index'
-import { requestIssuingModelEnum } from '../../../../types/index'
+import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '@/utils/index'
+import { requestIssuingModelEnum } from '@/types/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 import InputSelector from '@/components/InputSelector.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index 188507f..9bb3019 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -15,7 +15,7 @@
 import {
   UserProfileApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'RquestIssueSubmitted',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestManage/Home.vue b/frontend/src/pages/user/workspace/requestManage/Home.vue
index 24c80d8..bb1e3f4 100644
--- a/frontend/src/pages/user/workspace/requestManage/Home.vue
+++ b/frontend/src/pages/user/workspace/requestManage/Home.vue
@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceRequest',
   props: {},
diff --git a/frontend/src/pages/user/workspace/requestManage/Manage.vue b/frontend/src/pages/user/workspace/requestManage/Manage.vue
index 6871afb..230d926 100644
--- a/frontend/src/pages/user/workspace/requestManage/Manage.vue
+++ b/frontend/src/pages/user/workspace/requestManage/Manage.vue
@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import { WorksapceApi, requestIssueUtils, DateUtils } from '../../../../utils/index'
-import { requestStatusEnum, convertIntoToRequestStatus } from '../../../../types/index'
+import { WorksapceApi, requestIssueUtils, DateUtils } from '@/utils/index'
+import { requestStatusEnum, convertIntoToRequestStatus } from '@/types/index'
 export default {
   name: 'RequestManage',
   props: {
diff --git a/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue b/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
index ebe1224..9a54419 100644
--- a/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
+++ b/frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
@@ -65,7 +65,7 @@
 import {
   WorksapceApi
   // userProfileValidator,
-} from '../../../../utils/index'
+} from '@/utils/index'
 export default {
   name: 'ReviewProposalBeforeAccetance',
   props: {
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index c2ee0ba..53f19bc 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -2,70 +2,70 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { store, userRoleEnum } from '../store/index'
 
 //public
-import About from '../../pages/public/About.vue'
-import Blogs from '../../pages/public/Blogs.vue'
-import Career from '../../pages/public/Career.vue'
-import Contact from '../../pages/public/Contact.vue'
-import PdfContentViewer from '../../pages/public/PdfContentViewer.vue'
-import LinkContentViewer from '../../pages/public/LinkContentViewer.vue'
+import About from '@/pages/public/About.vue'
+import Blogs from '@/pages/public/Blogs.vue'
+import Career from '@/pages/public/Career.vue'
+import Contact from '@/pages/public/Contact.vue'
+import PdfContentViewer from '@/pages/public/PdfContentViewer.vue'
+import LinkContentViewer from '@/pages/public/LinkContentViewer.vue'
 
 //guest
-import FrontDoor from '../../pages/guest/FrontDoor.vue'
-import SigninWithEmailAndCode from '../../pages/guest/SigninWithEmailAndCode.vue'
-import NewUserSetPassword from '../../pages/guest/NewUserSetPassword.vue'
-import NewUserSetFlid from '../../pages/guest/NewUserSetFlid.vue'
-import SigninWithEmailAndPassword from '../../pages/guest/SigninWithEmailAndPassword.vue'
+import FrontDoor from '@/pages/guest/FrontDoor.vue'
+import SigninWithEmailAndCode from '@/pages/guest/SigninWithEmailAndCode.vue'
+import NewUserSetPassword from '@/pages/guest/NewUserSetPassword.vue'
+import NewUserSetFlid from '@/pages/guest/NewUserSetFlid.vue'
+import SigninWithEmailAndPassword from '@/pages/guest/SigninWithEmailAndPassword.vue'
 
 //Workspace projects
-import MyWorkspaceProjects from '../../pages/user/workspace/projectManage/Home.vue'
+import MyWorkspaceProjects from '@/pages/user/workspace/projectManage/Home.vue'
 
-import ProjectManage from '../../pages/user/workspace/projectManage/ProjectManage.vue'
-import ProjectManageCode from '../../pages/user/workspace/projectManage/Code.vue'
-import ProjectManageDeploy from '../../pages/user/workspace/projectManage/Deploy.vue'
-import ProjectManageGeneral from '../../pages/user/workspace/projectManage/General.vue'
-import ProjectManageIssues from '../../pages/user/workspace/projectManage/Issues.vue'
-import ProjectManageProduct from '../../pages/user/workspace/projectManage/Product.vue'
-import ProjectManageProgress from '../../pages/user/workspace/projectManage/Progress.vue'
+import ProjectManage from '@/pages/user/workspace/projectManage/ProjectManage.vue'
+import ProjectManageCode from '@/pages/user/workspace/projectManage/Code.vue'
+import ProjectManageDeploy from '@/pages/user/workspace/projectManage/Deploy.vue'
+import ProjectManageGeneral from '@/pages/user/workspace/projectManage/General.vue'
+import ProjectManageIssues from '@/pages/user/workspace/projectManage/Issues.vue'
+import ProjectManageProduct from '@/pages/user/workspace/projectManage/Product.vue'
+import ProjectManageProgress from '@/pages/user/workspace/projectManage/Progress.vue'
 
 //Workspace Requests
-import MyWorkspaceRequests from '../../pages/user/workspace/requestManage/Home.vue'
+import MyWorkspaceRequests from '@/pages/user/workspace/requestManage/Home.vue'
 
 /// Request Issue
-import IssueRequest from '../../pages/user/workspace/requestIssue/Issue.vue'
-import RequestSubmitted from '../../pages/user/workspace/requestIssue/Submitted.vue'
-import RequestDeposit from '../../pages/user/workspace/requestIssue/Deposit.vue'
-import RequestDeposited from '../../pages/user/workspace/requestIssue/Deposited.vue'
+import IssueRequest from '@/pages/user/workspace/requestIssue/Issue.vue'
+import RequestSubmitted from '@/pages/user/workspace/requestIssue/Submitted.vue'
+import RequestDeposit from '@/pages/user/workspace/requestIssue/Deposit.vue'
+import RequestDeposited from '@/pages/user/workspace/requestIssue/Deposited.vue'
 
 //Workspace Proposals
-import MyWorkspaceProposals from '../../pages/user/workspace/proposalManage/Home.vue'
+import MyWorkspaceProposals from '@/pages/user/workspace/proposalManage/Home.vue'
 
 //Message Hub
-import MessageHub from '../../pages/user/messages/Home.vue'
+import MessageHub from '@/pages/user/messages/Home.vue'
 
 //Provider Hub
-import ProviderHub from '../../pages/user/providers/Home.vue'
+import ProviderHub from '@/pages/user/providers/Home.vue'
 
 //Request Hub
-import RequestHub from '../../pages/user/requests/Home.vue'
-import MakeProposal from '../../pages/user/requests/Propose.vue'
-import ProposalSubmitted from '../../pages/user/requests/ProposalSubmitted.vue'
+import RequestHub from '@/pages/user/requests/Home.vue'
+import MakeProposal from '@/pages/user/requests/Propose.vue'
+import ProposalSubmitted from '@/pages/user/requests/ProposalSubmitted.vue'
 
-import RequestManage from '../../pages/user/workspace/requestManage/Manage.vue'
-import ReviewProposalBeforeAccetance from '../../pages/user/workspace/requestManage/ReviewProposal.vue'
-import UserProfile from '../../pages/user/account/UserProfile.vue'
-import UserFinance from '../../pages/user/account/UserFinance.vue'
-import UserHistory from '../../pages/user/account/UserHistory.vue'
-import Workspace from '../../pages/user/workspace/Home.vue'
+import RequestManage from '@/pages/user/workspace/requestManage/Manage.vue'
+import ReviewProposalBeforeAccetance from '@/pages/user/workspace/requestManage/ReviewProposal.vue'
+import UserProfile from '@/pages/user/account/UserProfile.vue'
+import UserFinance from '@/pages/user/account/UserFinance.vue'
+import UserHistory from '@/pages/user/account/UserHistory.vue'
+import Workspace from '@/pages/user/workspace/Home.vue'
 
-import FooterGuest from '../../footers/FooterGuest.vue'
-import FooterUser from '../../footers/FooterUser.vue'
+import FooterGuest from '@/footers/FooterGuest.vue'
+import FooterUser from '@/footers/FooterUser.vue'
 
-import HeaderGuest from '../../headers/HeaderGuest.vue'
-import HeaderUser from '../../headers/HeaderUser.vue'
+import HeaderGuest from '@/headers/HeaderGuest.vue'
+import HeaderUser from '@/headers/HeaderUser.vue'
 
 //Lab
-import LabHome from '../../pages/lab/Home.vue'
-import TranslationHome from '../../pages/lab/translation/Home.vue'
+import LabHome from '@/pages/lab/Home.vue'
+import TranslationHome from '@/pages/lab/translation/Home.vue'
 
 const router = createRouter({
   history: createWebHistory(),
diff --git a/frontend/src/plugins/store/userProfile.js b/frontend/src/plugins/store/userProfile.js
index 29e59ef..0c60cd6 100644
--- a/frontend/src/plugins/store/userProfile.js
+++ b/frontend/src/plugins/store/userProfile.js
@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../../types/index'
+import { userRoleEnum } from '@/types/index'
 
 const userProfileStore = {
   namespaced: true,
diff --git a/frontend/src/utils/backend/index.js b/frontend/src/utils/backend/index.js
index cf5baa1..f20674f 100644
--- a/frontend/src/utils/backend/index.js
+++ b/frontend/src/utils/backend/index.js
@@ -7,3 +7,4 @@ export { MessageHubApi } from './messageHub'
 export { HistoryApi } from './history'
 export { ContentApi } from './content'
 export { LabApi } from './lab'
+export { WsConnectionFactory } from './websocket'
diff --git a/frontend/src/utils/backend/websocket.js b/frontend/src/utils/backend/websocket.js
new file mode 100644
index 0000000..109ead5
--- /dev/null
+++ b/frontend/src/utils/backend/websocket.js
@@ -0,0 +1,14 @@
+import { userUtils } from '../store/index'
+
+class WsConnectionFactory {
+  static CreateWebSocket(onOpen, onMessage, onError, onClose) {
+    let jwt = userUtils.getJwtToken()
+    this.socket = new WebSocket(`/ws/downstream/online_platform_notification?token=${jwt}`)
+    this.socket.onopen = onOpen
+    this.socket.onmessage = onMessage
+    this.socket.onerror = onError
+    this.socket.onclose = onClose
+  }
+}
+
+export { WsConnectionFactory }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index a6c7d79..329e855 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -7,7 +7,8 @@ export {
   MessageHubApi,
   HistoryApi,
   ContentApi,
-  LabApi
+  LabApi,
+  WsConnectionFactory
 } from './backend/index'
 
 export { userUtils, userProfileUtils, requestIssueUtils, requestHubUtils } from './store/index'
diff --git a/frontend/src/utils/store/requestHubUtils.js b/frontend/src/utils/store/requestHubUtils.js
index 137db0b..7c3c22a 100644
--- a/frontend/src/utils/store/requestHubUtils.js
+++ b/frontend/src/utils/store/requestHubUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestHubUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/requestIssueUtils.js b/frontend/src/utils/store/requestIssueUtils.js
index 70ed8ce..e7a52ec 100644
--- a/frontend/src/utils/store/requestIssueUtils.js
+++ b/frontend/src/utils/store/requestIssueUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestIssueUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/userProfileUtils.js b/frontend/src/utils/store/userProfileUtils.js
index 2792085..03b5716 100644
--- a/frontend/src/utils/store/userProfileUtils.js
+++ b/frontend/src/utils/store/userProfileUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserProfileUtils {
   constructor(store) {
diff --git a/frontend/src/utils/store/userUtils.js b/frontend/src/utils/store/userUtils.js
index 9a6503f..aef930b 100644
--- a/frontend/src/utils/store/userUtils.js
+++ b/frontend/src/utils/store/userUtils.js
@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserUtils {
   constructor(store) {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 3012747..d8f3457 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -11,6 +11,7 @@ function resolve(dir) {
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
   let API_URL = 'http://127.0.0.1:8001'
+  let WEBSOCKET_URL = 'ws://127.0.0.1:8001'
   let PORT = '5173'
 
   if (command === 'serve') {
@@ -18,6 +19,7 @@ export default defineConfig(({ command, mode }) => {
     console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
     const env = loadEnv(mode, process.cwd());
     API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
+    WEBSOCKET_URL = `${env.VITE_WEBSOCKET_URL ?? 'ws://127.0.0.1:8001'}`;
     PORT = `${env.VITE_PORT ?? '5173'}`;
   } else {
     // command === 'build'
@@ -58,6 +60,11 @@ export default defineConfig(({ command, mode }) => {
           target: API_URL,
           ws: true,
           changeOrigin: true
+        },
+        '^/ws/': {
+          target: WEBSOCKET_URL,
+          ws: true,
+          changeOrigin: true
         }
       },
       port: PORT,