use '@' for all import

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

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',

frontend/src/mixins/navigator.js

@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../types/index'
+import { userRoleEnum } from '@/types/index'
 export default {
   methods: {
     //public

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) {

frontend/src/pages/guest/FrontDoor.vue

@@ -36,8 +36,8 @@ import {
   UserAuthApi,
   applicantValidator
   // userProfileValidator,
-} from '../../utils/index'
+} from '@/utils/index'
-import { signinActionEnum } from '../../types/index'
+import { signinActionEnum } from '@/types/index'
 
 export default {
   name: 'FrontDoor',

frontend/src/pages/guest/NewUserSetFlid.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { UserAuthApi } from '../../utils/index'
+import { UserAuthApi } from '@/utils/index'
-import { signinActionEnum } from '../../types/index'
+import { signinActionEnum } from '@/types/index'
 export default {
   name: 'NewUserSetFlid',
   props: {

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: {},

frontend/src/pages/guest/SigninWithEmailAndCode.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
+import { signinActionEnum } from '@/types'
-import { UserAuthApi } from '../../utils/index'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {

frontend/src/pages/guest/SigninWithEmailAndPassword.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import { signinActionEnum } from '../../types'
+import { signinActionEnum } from '@/types'
-import { UserAuthApi } from '../../utils/index'
+import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
   props: {

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: {},

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: {},

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: {},

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: {},

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: {},

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 {

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: {},

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: {},

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 {
+import { UserProfileApi, elementHandler, textAreaAujuster, passwordValidator } from '@/utils/index'
-  UserProfileApi,
-  elementHandler,
-  textAreaAujuster,
-  passwordValidator
-} from '../../../utils/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 
 export default {

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: {},

frontend/src/pages/user/messages/Home.vue

@@ -78,8 +78,8 @@
   </div>
 </template>
 <script>
-import SvgIcon from '../../../components/SvgIcon.vue'
+import SvgIcon from '@/components/SvgIcon.vue'
-import { MessageHubApi, DateUtils } from '../../../utils/index'
+import { MessageHubApi, DateUtils } from '@/utils/index'
 export default {
   components: { SvgIcon },
   name: 'MessageHub',

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: {},

frontend/src/pages/user/requests/Home.vue

@@ -180,8 +180,8 @@
 </template>
 
 <script>
-import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
+import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '@/utils/index'
-import { proposingModelEnum } from '../../../types/index'
+import { proposingModelEnum } from '@/types/index'
 export default {
   name: 'RequestHub',
   props: {},

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: {

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 {

frontend/src/pages/user/workspace/Home.vue

@@ -2,13 +2,22 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
+      <div
-        :id="project.id">
+        class="accordion accordion-list"
+        v-for="(project, project_index) in projects"
+        :key="project_index"
+        :id="project.id"
+      >
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            <button
-              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
+              class="accordion-button collapsed"
-              :aria-controls="'collapse-' + project_index">
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index"
+              aria-expanded="false"
+              :aria-controls="'collapse-' + project_index"
+            >
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -35,7 +44,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
+          <div
+            :id="'collapse-' + project_index"
+            class="accordion-collapse collapse"
+            :data-bs-parent="'#' + project.id"
+          >
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -43,17 +56,30 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                <div
-                  contenteditable="false"></div>
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
+                <div
-                  :id="proposal.id">
+                  class="accordion"
+                  v-for="(proposal, proposal_index) in project.proposals"
+                  :key="proposal_index"
+                  :id="proposal.id"
+                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      <button
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
+                        class="accordion-button collapsed"
-                        :aria-controls="'collapse-request-proposal' + proposal_index">
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
+                        aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index"
+                      >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">Quote</label>
@@ -84,14 +110,23 @@
                         </div>
                       </button>
                     </h2>
-                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
+                    <div
-                      :data-bs-parent="'#' + proposal.id">
+                      :id="'collapse-request-proposal' + proposal_index"
+                      class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id"
+                    >
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button class="request-proposal-action-reject" @click="rejectProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)"
+                          >
                             reject
                           </button>
-                          <button class="request-proposal-action-accept" @click="acceptProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)"
+                          >
                             accept
                           </button>
                         </div>
@@ -99,9 +134,12 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div class="request-proposal-payment-plan-stage-container"
+                          <div
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
+                            class="request-proposal-payment-plan-stage-container"
-                            :id="'payment-stage-' + stage_index">
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
+                            :key="stage_index"
+                            :id="'payment-stage-' + stage_index"
+                          >
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">Payment</label>
                               <p class="project-item-text">
@@ -134,9 +172,12 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div class="request-proposal-payment-plan-stage-container"
+                <div
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
+                  class="request-proposal-payment-plan-stage-container"
-                  :id="'payment-stage-' + stage_index">
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
+                  :key="stage_index"
+                  :id="'payment-stage-' + stage_index"
+                >
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">Payment</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -152,27 +193,45 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                <div
-                  contenteditable="false"></div>
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
             </div>
             <div class="accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                <button
-                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
+                  class="accordion-button collapsed"
-                  aria-controls="collapse-project-invite-collaborator">
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator"
+                  aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator">+ Invite</div>
                 </button>
-                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
+                <div
-                  data-bs-parent="#collapse-project-invite-collaborator">
+                  id="collapse-project-invite-collaborator"
+                  class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator-form-container">
                     <div class="project-invite-collaborator-form">
                       <label class="project-item-label">Input E-mail to invite other</label>
-                      <input class="project-invite-collaborator-input" v-model="newInviteCollaborator[project_index]" />
+                      <input
+                        class="project-invite-collaborator-input"
+                        v-model="newInviteCollaborator[project_index]"
+                      />
                     </div>
-                    <button class="project-invite-collaborator-action-button" @click="
+                    <button
+                      class="project-invite-collaborator-action-button"
+                      @click="
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                      ">
+                      "
+                    >
                       Submit
                     </button>
                   </div>
@@ -181,9 +240,14 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
+                      class="accordion-button collapsed"
-                      aria-controls="collapse-project-milestone">
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-milestone"
+                    >
                       <div class="project-milestone-bar-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">Progress</label>
@@ -217,11 +281,18 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-milestone">
+                    id="collapse-project-milestone"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone"
+                  >
                     <div class="project-milestones-containter">
-                      <div class="project-milestone-container" v-for="milestone in project.project.progress.milestones"
+                      <div
-                        :key="milestone.index" :id="'project-milestone-' + milestone.index">
+                        class="project-milestone-container"
+                        v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index"
+                      >
                         <div class="project-milestone-index">
                           <label class="project-item-label">Milestone</label>
                           <p class="project-item-text">
@@ -254,17 +325,21 @@
                           </p>
                         </div>
                         <div class="project-milestone-action-button-container">
-                          <button class="project-milestone-action-button"
+                          <button
+                            class="project-milestone-action-button"
                             :disabled="isMilestoneActionButtonDisabled(project.project, milestone)"
                             :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                            @click="handleMilestoneAction(project.project, milestone)">
+                            @click="handleMilestoneAction(project.project, milestone)"
+                          >
                             {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                           </button>
                         </div>
                         <div v-if="this.qrCode.index === milestone.index">
                           <img width="100" height="100" :src="this.qrCode.imageUrl" />
-                          <button class="project-milestone-payment-confirm-button"
+                          <button
-                            @click="handlePaymentAction(project.project, milestone)">
+                            class="project-milestone-payment-confirm-button"
+                            @click="handlePaymentAction(project.project, milestone)"
+                          >
                             Mark As Paid
                           </button>
                         </div>
@@ -274,8 +349,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-code" aria-expanded="false" aria-controls="collapse-project-code">
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-code"
+                    >
                       <div class="project-code-bar-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">Code Depot</label>
@@ -298,13 +379,22 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-code" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-code">
+                    id="collapse-project-code"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code"
+                  >
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button v-if="project.project.code.git_url" class="project-code-copy-git-url"
+                        <button
-                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
+                          v-if="project.project.code.git_url"
-                          delay='{"show":"500", "hide":"100"}'>
+                          class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)"
+                          v-tooltip
+                          title="Copied"
+                          trigger="click"
+                          delay='{"show":"500", "hide":"100"}'
+                        >
                           copy git url
                         </button>
                       </div>
@@ -317,9 +407,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-issue" aria-expanded="false"
+                      class="accordion-button collapsed"
-                      aria-controls="collapse-project-issue">
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue"
+                    >
                       <div class="project-issue-bar-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">Open issues</label>
@@ -342,34 +437,51 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-issue" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-issue">
+                    id="collapse-project-issue"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue"
+                  >
                     <!-- <div class="project-issue-statistics-container">
                       <button class="project-issue-manage-button">Manage</button>
                       TO BE IMPLEMENTED.
                     </div> -->
                     <div class="project-new-issue-containter">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      <button
-                        data-bs-target="#collapse-project-new-issue" aria-expanded="false"
+                        class="accordion-button collapsed"
-                        aria-controls="collapse-project-issue">
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapse-project-new-issue"
+                        aria-expanded="false"
+                        aria-controls="collapse-project-issue"
+                      >
                         <div class="project-add-new-issue">+ Add Issue</div>
                       </button>
-                      <div id="collapse-project-new-issue" class="accordion-collapse collapse"
+                      <div
-                        data-bs-parent="#collapse-project-new-issue">
+                        id="collapse-project-new-issue"
+                        class="accordion-collapse collapse"
+                        data-bs-parent="#collapse-project-new-issue"
+                      >
                         <div class="project-issue-description-container">
                           <div class="project-issue-description">
                             <label class="project-item-label">New issue description</label>
-                            <textarea class="project-new-issue-textarea" type="text"
+                            <textarea
-                              v-model="newIssueDescriptions[project_index]" />
+                              class="project-new-issue-textarea"
+                              type="text"
+                              v-model="newIssueDescriptions[project_index]"
+                            />
                           </div>
                           <div class="project-new-issue-action-container">
-                            <button class="project-new-issue-action-button" @click="
+                            <button
+                              class="project-new-issue-action-button"
+                              @click="
                                 postNewIssue(
                                   project.request.product_id,
                                   project.project_id,
                                   newIssueDescriptions[project_index]
                                 )
-                              ">
+                              "
+                            >
                               Submit
                             </button>
                           </div>
@@ -377,14 +489,22 @@
                       </div>
                     </div>
                     <div class="project-issues-containter">
-                      <div class="project-issue-container"
+                      <div
-                        v-for="(issue, issue_index) in project.project.issue.open_issues" :key="issue_index"
+                        class="project-issue-container"
-                        :id="'project-issue-' + issue_index">
+                        v-for="(issue, issue_index) in project.project.issue.open_issues"
+                        :key="issue_index"
+                        :id="'project-issue-' + issue_index"
+                      >
                         <div class="accordion-item">
                           <h2 class="accordion-header">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                            <button
-                              :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
+                              class="accordion-button collapsed"
-                              aria-controls="collapse-project-issue-details">
+                              type="button"
+                              data-bs-toggle="collapse"
+                              :data-bs-target="'#collapse-project-issue-details' + issue_index"
+                              aria-expanded="false"
+                              aria-controls="collapse-project-issue-details"
+                            >
                               <div class="project-issue-title">
                                 <label class="project-item-label">Issue title</label>
                                 <p class="project-item-text">{{ issue.title }}</p>
@@ -403,23 +523,35 @@
                               </div>
                             </button>
                           </h2>
-                          <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
+                          <div
-                            :data-bs-parent="'#collapse-project-issue-details' + issue_index">
+                            :id="'collapse-project-issue-details' + issue_index"
+                            class="accordion-collapse collapse"
+                            :data-bs-parent="'#collapse-project-issue-details' + issue_index"
+                          >
                             <div class="project-issue-description-container">
                               <label class="project-item-label">Issue description</label>
                               <p class="project-item-text">{{ issue.description }}</p>
                             </div>
                             <div class="project-issue-action-container">
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                              <button
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 1)">
+                                :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 1)"
+                              >
                                 Resolve
                               </button>
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                              <button
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 2)">
+                                :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 2)"
+                              >
                                 Confirm
                               </button>
-                              <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                              <button
-                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 0)">
+                                :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                                class="project-issue-action-button"
+                                @click="setProjectIssueStatus(issue.id, 0)"
+                              >
                                 Reopen
                               </button>
                             </div>
@@ -475,7 +607,7 @@ export default {
         index: null
       },
 
-      downstream_web_socket: null,
+      downstream_web_socket: null
     }
   },
 
@@ -785,19 +917,16 @@ export default {
     },
     /** web socket. we put them here for test purpose. they need to be moved to an appropriate place**/
     websocketOnOpen(event) {
-      console.log(event);
+      console.log(event)
     },
     websocketOnMessage(event) {
-      console.log(event.data);
+      console.log(event.data)
-
     },
     websocketOnError(event) {
-      console.log(event);
+      console.log(event)
-
     },
     websocketOnClose(event) {
-      console.log(event);
+      console.log(event)
-
     },
     connectWebSocket() {
       this.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
@@ -807,7 +936,6 @@ export default {
         this.websocketOnClose
       )
     }
-
   }
 }
 </script>

frontend/src/pages/user/workspace/projectManage/Home.vue

@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProjects',
   props: {},

frontend/src/pages/user/workspace/proposalManage/Home.vue

@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceProposal',
   props: {},

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: {

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: {

frontend/src/pages/user/workspace/requestIssue/Issue.vue

@@ -170,8 +170,8 @@
 </template>
 
 <script>
-import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '../../../../utils/index'
+import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '@/utils/index'
-import { requestIssuingModelEnum } from '../../../../types/index'
+import { requestIssuingModelEnum } from '@/types/index'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 import InputSelector from '@/components/InputSelector.vue'
 import SvgIcon from '@/components/SvgIcon.vue'

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: {

frontend/src/pages/user/workspace/requestManage/Home.vue

@@ -44,8 +44,8 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils } from '../../../../utils/index'
+import { WorksapceApi, DateUtils } from '@/utils/index'
-import { projectStatusEnum, convertIntoToProjectStatus } from '../../../../types/index'
+import { projectStatusEnum, convertIntoToProjectStatus } from '@/types/index'
 export default {
   name: 'MyWorkspaceRequest',
   props: {},

frontend/src/pages/user/workspace/requestManage/Manage.vue

@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import { WorksapceApi, requestIssueUtils, DateUtils } from '../../../../utils/index'
+import { WorksapceApi, requestIssueUtils, DateUtils } from '@/utils/index'
-import { requestStatusEnum, convertIntoToRequestStatus } from '../../../../types/index'
+import { requestStatusEnum, convertIntoToRequestStatus } from '@/types/index'
 export default {
   name: 'RequestManage',
   props: {

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: {

frontend/src/plugins/router/router.js

@@ -1,71 +1,71 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { store, userRoleEnum } from '../store/index'
+import { store, userRoleEnum } from '@/store/index'
 
 //public
-import About from '../../pages/public/About.vue'
+import About from '@/pages/public/About.vue'
-import Blogs from '../../pages/public/Blogs.vue'
+import Blogs from '@/pages/public/Blogs.vue'
-import Career from '../../pages/public/Career.vue'
+import Career from '@/pages/public/Career.vue'
-import Contact from '../../pages/public/Contact.vue'
+import Contact from '@/pages/public/Contact.vue'
-import PdfContentViewer from '../../pages/public/PdfContentViewer.vue'
+import PdfContentViewer from '@/pages/public/PdfContentViewer.vue'
-import LinkContentViewer from '../../pages/public/LinkContentViewer.vue'
+import LinkContentViewer from '@/pages/public/LinkContentViewer.vue'
 
 //guest
-import FrontDoor from '../../pages/guest/FrontDoor.vue'
+import FrontDoor from '@/pages/guest/FrontDoor.vue'
-import SigninWithEmailAndCode from '../../pages/guest/SigninWithEmailAndCode.vue'
+import SigninWithEmailAndCode from '@/pages/guest/SigninWithEmailAndCode.vue'
-import NewUserSetPassword from '../../pages/guest/NewUserSetPassword.vue'
+import NewUserSetPassword from '@/pages/guest/NewUserSetPassword.vue'
-import NewUserSetFlid from '../../pages/guest/NewUserSetFlid.vue'
+import NewUserSetFlid from '@/pages/guest/NewUserSetFlid.vue'
-import SigninWithEmailAndPassword from '../../pages/guest/SigninWithEmailAndPassword.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 ProjectManage from '@/pages/user/workspace/projectManage/ProjectManage.vue'
-import ProjectManageCode from '../../pages/user/workspace/projectManage/Code.vue'
+import ProjectManageCode from '@/pages/user/workspace/projectManage/Code.vue'
-import ProjectManageDeploy from '../../pages/user/workspace/projectManage/Deploy.vue'
+import ProjectManageDeploy from '@/pages/user/workspace/projectManage/Deploy.vue'
-import ProjectManageGeneral from '../../pages/user/workspace/projectManage/General.vue'
+import ProjectManageGeneral from '@/pages/user/workspace/projectManage/General.vue'
-import ProjectManageIssues from '../../pages/user/workspace/projectManage/Issues.vue'
+import ProjectManageIssues from '@/pages/user/workspace/projectManage/Issues.vue'
-import ProjectManageProduct from '../../pages/user/workspace/projectManage/Product.vue'
+import ProjectManageProduct from '@/pages/user/workspace/projectManage/Product.vue'
-import ProjectManageProgress from '../../pages/user/workspace/projectManage/Progress.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 IssueRequest from '@/pages/user/workspace/requestIssue/Issue.vue'
-import RequestSubmitted from '../../pages/user/workspace/requestIssue/Submitted.vue'
+import RequestSubmitted from '@/pages/user/workspace/requestIssue/Submitted.vue'
-import RequestDeposit from '../../pages/user/workspace/requestIssue/Deposit.vue'
+import RequestDeposit from '@/pages/user/workspace/requestIssue/Deposit.vue'
-import RequestDeposited from '../../pages/user/workspace/requestIssue/Deposited.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 RequestHub from '@/pages/user/requests/Home.vue'
-import MakeProposal from '../../pages/user/requests/Propose.vue'
+import MakeProposal from '@/pages/user/requests/Propose.vue'
-import ProposalSubmitted from '../../pages/user/requests/ProposalSubmitted.vue'
+import ProposalSubmitted from '@/pages/user/requests/ProposalSubmitted.vue'
 
-import RequestManage from '../../pages/user/workspace/requestManage/Manage.vue'
+import RequestManage from '@/pages/user/workspace/requestManage/Manage.vue'
-import ReviewProposalBeforeAccetance from '../../pages/user/workspace/requestManage/ReviewProposal.vue'
+import ReviewProposalBeforeAccetance from '@/pages/user/workspace/requestManage/ReviewProposal.vue'
-import UserProfile from '../../pages/user/account/UserProfile.vue'
+import UserProfile from '@/pages/user/account/UserProfile.vue'
-import UserFinance from '../../pages/user/account/UserFinance.vue'
+import UserFinance from '@/pages/user/account/UserFinance.vue'
-import UserHistory from '../../pages/user/account/UserHistory.vue'
+import UserHistory from '@/pages/user/account/UserHistory.vue'
-import Workspace from '../../pages/user/workspace/Home.vue'
+import Workspace from '@/pages/user/workspace/Home.vue'
 
-import FooterGuest from '../../footers/FooterGuest.vue'
+import FooterGuest from '@/footers/FooterGuest.vue'
-import FooterUser from '../../footers/FooterUser.vue'
+import FooterUser from '@/footers/FooterUser.vue'
 
-import HeaderGuest from '../../headers/HeaderGuest.vue'
+import HeaderGuest from '@/headers/HeaderGuest.vue'
-import HeaderUser from '../../headers/HeaderUser.vue'
+import HeaderUser from '@/headers/HeaderUser.vue'
 
 //Lab
-import LabHome from '../../pages/lab/Home.vue'
+import LabHome from '@/pages/lab/Home.vue'
-import TranslationHome from '../../pages/lab/translation/Home.vue'
+import TranslationHome from '@/pages/lab/translation/Home.vue'
 
 const router = createRouter({
   history: createWebHistory(),

frontend/src/plugins/store/userProfile.js

@@ -1,4 +1,4 @@
-import { userRoleEnum } from '../../types/index'
+import { userRoleEnum } from '@/types/index'
 
 const userProfileStore = {
   namespaced: true,

frontend/src/utils/backend/history.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class HistoryApi {
   static fetchClosedWorkspackeProjects() {

frontend/src/utils/backend/lab.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 class LabApi {
   static translate_text(input_text) {
     let jwt = userUtils.getJwtToken()

frontend/src/utils/backend/messageHub.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class MessageHubApi {
   static fetchMessageThreads() {

frontend/src/utils/backend/providerHub.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class ProviderHubApi {
   static fetchProvidersForHub() {

frontend/src/utils/backend/requestHub.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class RequestHubApi {
   static fetchRequestForHub() {

frontend/src/utils/backend/userProfile.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class UserProfileApi {
   static fetchUserProfile() {

frontend/src/utils/backend/websocket.js

@@ -1,4 +1,4 @@
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class WsConnectionFactory {
   static CreateWebSocket(onOpen, onMessage, onError, onClose) {

frontend/src/utils/backend/workspace.js

@@ -1,5 +1,5 @@
 import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
+import { userUtils } from '@/store/index'
 
 class WorksapceApi {
   static createMilestoneCheckoutSession(project_id, milestone_index) {

frontend/src/utils/store/requestHubUtils.js

@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestHubUtils {
   constructor(store) {

frontend/src/utils/store/requestIssueUtils.js

@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class RequestIssueUtils {
   constructor(store) {

frontend/src/utils/store/userProfileUtils.js

@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserProfileUtils {
   constructor(store) {

frontend/src/utils/store/userUtils.js

@@ -1,4 +1,4 @@
-import { store } from '../../plugins/index'
+import { store } from '@/plugins/index'
 
 class UserUtils {
   constructor(store) {