Merge branch 'main' of https://dev.azure.com/freeleaps/freeleaps2-frontend/_git/freeleaps2-frontend

frontend/src/assets/styles/_variables.scss

@@ -45,7 +45,7 @@ $footer-height: 110px;
 $body-height: calc(100vh - $header-height - $footer-height);
 $body-width: 1288px;
 
-$accordion-icon-width: 1rem;
+$accordion-icon-width: 12px;
 $accordion-button-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 $accordion-button-active-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 // $default-font: "Lato", Verdana, Arial, sans-serif;

frontend/src/assets/styles/inputs.scss

@@ -6,6 +6,14 @@
   @extend .form-control;
 }
 
+.form-input-back { display: flex; align-items: center; height: 32px; overflow: hidden; cursor: pointer; margin-bottom: 5px; color: $primary;
+  .input-back-icon {font-size: 32px;}
+  p {margin: 0; font-weight: 500;}
+  &:hover {
+    .input-back-icon {font-size: 35px;}
+  }
+}
+
 .input-container {
   width: 460px;
   height: 62px;
@@ -30,8 +38,9 @@
     @extend .ms-1;
     margin: 8px !important;
     border-radius: 12px !important;
-    font-weight: 500;
+    font-weight: 600;
-    font-size: 16px;
+    font-size: 14px;
+    padding: 4px 12px;
     color: #f8f8f9;
   }
   .error-msg {
@@ -40,5 +49,6 @@
     color: #9ea2af;
     font-size: 18px;
     margin: 0;
+    white-space: nowrap;
   }
 }

frontend/src/components/EmptyContent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="empty-content-container" :class="{autoFit : 'auto-fit'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmptyContent',
+  props: {
+    autoFit: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-content-container {
+  height: calc(100vh - 88px - 110px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.auto-fit {
+    width: 100%; 
+    height: 100%;
+  }
+}
+</style>

frontend/src/components/SvgIcon.vue

@@ -34,10 +34,11 @@ export default {
 
 <style scoped>
 .svg-icon {
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  font-size: 16px;
 }
 </style>

frontend/src/footers/FooterGuest.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container bottom-container">
     <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" />
-    <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+    <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
   </div>
 </template>
 <script>

frontend/src/footers/FooterUser.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container">
     <div class="bottom-div">
-      <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+      <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
     </div>
   </div>
 </template>

frontend/src/headers/HeaderGuest.vue

@@ -112,6 +112,7 @@ export default {
     @extend .btn-link;
     color: black;
     font-size: 16px;
+    margin-right: 15px;
     text-decoration: none;
   }
 }

frontend/src/headers/HeaderUser.vue

@@ -7,7 +7,7 @@
         @click="gotoMessages"
         :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
       >
-        <img alt="freeleaps logo" src="@/assets/message.png" />
+        <img alt="freeleaps message" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
         <button
@@ -271,6 +271,7 @@ export default {
     color: #6e7387;
     text-decoration: none;
     margin: 0 30px;
+    white-space: nowrap;
     position: relative;
 
     &.badge::after {

frontend/src/icons/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="64" height="64"><path d="M442.4 256L192 512l250.4 256 53.12-54.304-161.856-165.504H832v-72.416H333.664l161.888-165.44L442.4 256z"></path></svg>

frontend/src/lang/en.js

@@ -48,7 +48,7 @@ export default {
   fd_3: 'One stop platform',
   fd_4: 'for hiring the best',
   fd_5: 'freelance software development talent',
-  'Email address': 'Email address',
+  'Enter email address to start': 'Enter email address to start',
   'GET STARTED': 'GET STARTED',
   'Please type in your email': 'Please type in your email',
   'Your Freeleaps User ID': 'Your Freeleaps User ID',
@@ -212,5 +212,8 @@ export default {
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
   Goal: 'Goal',
-  Message: 'Message'
+  Message: 'Message',
+  'Upload attachment': 'Upload attachment',
+  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  'send again': 'send again'
 }

frontend/src/lang/index.js

@@ -8,6 +8,12 @@ const getDefaultLocale = () => {
   if (defaultLanguage) {
     return defaultLanguage
   }
+  const host = window.location.host
+  if (host.endsWith('.com')) {
+    return 'en'
+  } else if (host.endsWith('.cn')) {
+    return 'zh'
+  }
   const lan = (navigator.browserLanguage || navigator.language).toLowerCase()
   if (lan.indexOf('zh') > -1) {
     defaultLanguage = 'zh'

frontend/src/lang/zh.js

@@ -48,7 +48,7 @@ export default {
   fd_3: '一站式服务',
   fd_4: '只为追求更好',
   fd_5: '软件开发人才',
-  'Email address': '电子邮箱',
+  'Enter email address to start': '电子邮箱',
   'GET STARTED': '开始',
   'Please type in your email': '请填写你的邮箱地址',
   'Your Freeleaps User ID': '设置你的用户ID',
@@ -205,5 +205,8 @@ export default {
   'Issued request': '项目请求总数',
   'Open requests': '待处理的项目请求',
   'Lines of code per week': '每周代码产量',
-  Message: '消息'
+  Message: '消息',
+  'Upload attachment': '上传附件',
+  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  'send again': '重新发送'
 }

frontend/src/pages/guest/FrontDoor.vue

@@ -15,7 +15,7 @@
               placeholder="name@example.com"
               v-model="email"
             />
-            <label for="inputEmail">{{ $t('Email address') }}</label>
+            <label for="inputEmail">{{ $t('Enter email address to start') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
             {{ $t('GET STARTED') }}

frontend/src/pages/guest/SigninWithEmailAndCode.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithCode">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -11,6 +15,7 @@
                 type="text"
                 :placeholder="'Code sent to your email'"
                 v-model="code"
+                @focus="inputFocus"
               />
               <label for="inputCode">{{ $t('Authenticaion Code Sent To Your Email') }}</label>
             </div>
@@ -18,16 +23,23 @@
           </div>
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
+        <p class="error-msg" v-if="!message">
+          <span>{{$t('Didn\'t get the email? Check junk folder or')}}</span>
+          <button class="btn btn-link resend-btn" :disabled="countdown !== 0" type="button" @click="trySigninWithEmail">send again</button>
+          <span v-if="countdown !== 0" class="countdown">({{countdown}})</span>
+        </p>
       </div>
     </form>
   </div>
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
+  components: { SvgIcon },
   props: {
     email: {
       required: true,
@@ -39,19 +51,51 @@ export default {
     return {
       code: null,
       message: null,
-      preferred_region: null
+      preferred_region: null,
+      countdown: 0,
+      timer: null
     }
   },
 
-  components: {},
-
   created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
     }
+    this.startCountdown()
+  },
+  unmounted() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
+    inputFocus() {
+      this.message = null
+    },
+    startCountdown() {
+      this.countdown = 60
+      this.timer = setInterval(() => {
+        if (this.countdown <= 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          return
+        }
+        this.countdown = this.countdown - 1
+      }, 1000)
+    },
+    trySigninWithEmail() {
+      UserAuthApi.trySigninWithEmail(this.email, window.location.host)
+        .then(() => {
+          this.startCountdown()
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
     signinWithCode() {
       this.message = null
       if (this.code === null || this.code.length < 1) {
@@ -97,13 +141,16 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-// .input-code {
+.resend-btn {
-//   @extend .input-control-item;
+  font-weight: 500;
-//   @extend .me-1;
+  padding: 0;
-// }
+  font-size: 18px;
-
+  &:disabled {
-// .btn-start {
+    color: $primary;
-//   @extend .proceed-button;
+    opacity: .78;
-//   @extend .ms-1;
+  }
-// }
+}
+.countdown {
+  color: $primary;
+}
 </style>

frontend/src/pages/guest/SigninWithEmailAndPassword.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithPassword">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -30,6 +34,7 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
@@ -48,7 +53,7 @@ export default {
     }
   },
 
-  components: {},
+  components: { SvgIcon },
 
   created() {},
   mounted() {
@@ -57,6 +62,9 @@ export default {
     }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
     signinWithPassword() {
       this.message = null
       if (this.password === null || this.password.length < 1) {
@@ -124,6 +132,7 @@ export default {
   @extend .btn-link;
   padding: 0;
   font-size: 16px;
+  font-weight: 500;
   margin-left: 15px;
 }
 </style>

frontend/src/pages/public/About.vue

@@ -4,7 +4,6 @@
       class="directory_container"
       v-for="(directory, index) in directories"
       :key="index"
-      @click="view_link(directory)"
     >
       <div
         class="directory_cover_image"
@@ -12,7 +11,7 @@
       />
       <p class="directory-title">{{ directory.title_text }}</p>
       <p class="directory-subtitle">{{ directory.summary_text }}</p>
-      <button class="btn btn-link">{{ $t('Read More') }}</button>
+      <button class="btn btn-link directory-btn" @click="view_link(directory)">{{ $t('Read More') }}</button>
     </div>
   </div>
 </template>
@@ -56,7 +55,6 @@ export default {
 .directory_container {
   @extend .container;
   padding: 0;
-  cursor: pointer;
   text-align: left;
 
   .btn-link {
@@ -78,13 +76,17 @@ export default {
 
 .directory-title {
   font-size: 48px;
-  // font-weight: bold;
+  font-weight: 600;
   color: #18181a;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 
 .directory-subtitle {
   font-size: 14px;
   color: #666666;
+  margin-bottom: 5px;
+}
+.directory-btn {
+  font-weight: 600;
 }
 </style>

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

@@ -2,8 +2,7 @@
   <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 class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index" :id="project.id">
-        :id="project.id">
         <div class="accordion-item">
           <h2 class="accordion-header">
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"

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

@@ -123,8 +123,15 @@
                     :data-bs-parent="'#collapse-project-issue-details' + issue_index"
                   >
                     <div class="project-issue-description-container">
-                      <div class="project-issue-description">
+                      <div v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-issue-description">
                         <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Edit')"
+                          class="project-issue-description-btn"
+                          @click="editIssue(issue)"
+                        >
+                          {{ $t('Edit') }}
+                        </button>
                         <button
                           :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
                           class="project-issue-description-btn"
@@ -147,7 +154,44 @@
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p class="project-item-text">{{ issue.description }}</p>
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{ issue.description }}</p>
+                      <div v-if="updatingIssue && updatingIssue.issue_id === issue.id" class="project-issue-description-container">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue title') }}</label>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssueCancel"
+                          >
+                            {{ $t('Cancel') }}
+                          </button>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssue"
+                          >
+                            {{ $t('Update') }}
+                          </button>
+                        </div>
+                        <input type="text" v-model="updatingIssue.issue_title">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        </div>
+                        <textarea type="text" v-model="updatingIssue.issue_description" />
+                        <div class="file-upload-container">
+                          <div class="upload-contianer">
+                            <label class="btn btn-link">
+                              <span v-if="!updatingIssue.issue_attachment">{{ $t('Upload attachment') }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name }}</span>
+                              <input type="file" hidden @change="handleFileUpload" />
+                            </label>
+                            <svg-icon
+                              v-if="updatingIssue.issue_attachment"
+                              icon="delete"
+                              class-name="delete-icon"
+                              @click.stop="clearFile"
+                            />
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -177,7 +221,9 @@ export default {
   data() {
     return {
       project: {},
-      newIssueDescriptions: ''
+      newIssueDescriptions: '',
+      updatingIssue: null,
+      uploadFile: null
     }
   },
   mounted() {
@@ -232,15 +278,47 @@ export default {
           this.mnx_backendErrorHandler(error)
         })
     },
+    editIssue(issue) {
+      console.log('edit issue', issue)
+      this.updatingIssue = {
+        issue_id: issue.id,
+        issue_title: issue.title,
+        issue_description: issue.description,
+        issue_attachment: issue.attachment
+      }
+    },
+    updateIssue() {
+      // console.log('updateIssue', this.updatingIssue)
+      WorksapceApi.updateIssueForProduct(this.updatingIssue)
+        .then(() => {
+          // this.$refs.issueBtn.blur()
+          // this.$refs.issueAddBtn.click()
+          this.fetchView()
+          this.updatingIssue = null
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    updateIssueCancel() {
+      this.updatingIssue = null
+    },
+    handleFileUpload(event) {
+      this.updatingIssue.issue_attachment = event.target.files[0]
+    },
+    clearFile() {
+      this.updatingIssue.issue_attachment = null
+    },
     showIssueActionButton(project, issue, button_text) {
+      if (button_text === 'Edit') return true
       switch (issue.status) {
         case projectIssueStatusEnum.OPEN:
-          if (button_text === 'Resolve') {
+          if (button_text === 'Resolve' || button_text === 'Edit') {
             return project.providers.includes(project.current_user_id)
           }
           break
         case 1:
-          if (button_text === 'Reopen' || button_text === 'Confirm') {
+          if (button_text === 'Reopen' || button_text === 'Confirm' || button_text === 'Edit') {
             return project.issuers.includes(project.current_user_id)
           }
           break
@@ -399,6 +477,7 @@ export default {
 
 .project-issue-description-container {
   padding: 12px;
+  text-align: left;
 
   textarea {
     padding: 12px;
@@ -410,6 +489,16 @@ export default {
     width: 100%;
     margin-bottom: 12px;
   }
+
+  input {
+    padding: 5px 12px;
+    border-radius: 12px;
+    border: 1px solid #e1e1e1;
+    box-shadow: none;
+    outline: none;
+    width: 280px;
+    margin-bottom: 12px;
+  }
 }
 
 .project-issue-description {

frontend/src/plugins/router/router.js

@@ -46,7 +46,6 @@ 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 HeaderGuest from '@/headers/HeaderGuest.vue'
 import HeaderUser from '@/headers/HeaderUser.vue'
@@ -152,14 +151,14 @@ const router = createRouter({
       name: 'my-workspace-requests',
       path: '/my-workspace-requests',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceRequests, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceRequests, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -176,14 +175,14 @@ const router = createRouter({
       name: 'project-issue',
       path: '/project-issue/:project_id',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProjectIssue, footer: FooterUser, header: HeaderUser },
+      components: { default: ProjectIssue, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'request-issue2',
       path: '/request-issue/:loadFrom/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -200,14 +199,14 @@ const router = createRouter({
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: RequestSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'my-workspace-proposals',
       path: '/my-workspace-proposals',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProposals, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceProposals, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     //message hub
@@ -215,34 +214,34 @@ const router = createRouter({
       name: 'message-hub',
       path: '/message-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'message' },
-      components: { default: MessageHub, footer: FooterUser, header: HeaderUser }
+      components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Providers' },
-      components: { default: ProviderHub, footer: FooterUser, header: HeaderUser }
+      components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Requests' },
-      components: { default: RequestHub, footer: FooterUser, header: HeaderUser }
+      components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'make-proposal',
       path: '/make-proposal/:requestId/:loadingMode',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MakeProposal, footer: FooterUser, header: HeaderUser },
+      components: { default: MakeProposal, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'proposal-submitted',
       path: '/proposal-submitted/:proposalId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProposalSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: ProposalSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
 
@@ -250,7 +249,7 @@ const router = createRouter({
       name: 'request-manage',
       path: '/request-manage/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestManage, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestManage, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
@@ -259,7 +258,7 @@ const router = createRouter({
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: {
         default: ReviewProposalBeforeAccetance,
-        footer: FooterUser,
+        footer: FooterGuest,
         header: HeaderUser
       },
       props: true
@@ -269,49 +268,49 @@ const router = createRouter({
       name: 'user-profile',
       path: '/user-profile',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserProfile, footer: FooterUser, header: HeaderUser }
+      components: { default: UserProfile, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'user-history',
       path: '/user-history',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserHistory, footer: FooterUser, header: HeaderUser }
+      components: { default: UserHistory, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'work-space',
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
-      components: { default: Workspace, footer: FooterUser, header: HeaderUser }
+      components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'lab-home',
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: LabHome, footer: FooterUser, header: HeaderUser }
+      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
+      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'task-completion',
       path: '/task-completion',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TaskCompletion, footer: FooterUser, header: HeaderUser }
+      components: { default: TaskCompletion, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'multiturn-chat',
       path: '/multiturn-chat',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MultiturnChat, footer: FooterUser, header: HeaderUser }
+      components: { default: MultiturnChat, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'image-generation',
       path: '/image-generation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ImageGeneration, footer: FooterUser, header: HeaderUser }
+      components: { default: ImageGeneration, footer: FooterGuest, header: HeaderUser }
     }
   ],
 

frontend/src/utils/backend/workspace.js

@@ -126,6 +126,46 @@ class WorksapceApi {
     return request
   }
 
+  static updateIssueForProduct(data) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/update-issue-for-product',
+      data,
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductIssues(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-issues',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductCodeDepot(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-code-depot',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
   static setProductIssueStatus(issue_id, status) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(

frontend/vite.config.js

@@ -34,23 +34,19 @@ export default defineConfig(({ command, mode }) => {
       createSvgIconsPlugin({
         iconDirs: [resolve('src/icons')],
         symbolId: 'icon-[name]'
-      }),
+      })
     ],
     resolve: {
       root: resolve('src'),
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
-        '~bootstrap': resolve('node_modules/bootstrap'),
+        '~bootstrap': resolve('node_modules/bootstrap')
-        '~quill': resolve('node_modules/quill'),
       }
     },
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/assets/styles/main.scss";`
-        },
-        styl: {
-          additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
         }
       }
     },
@@ -80,7 +76,31 @@ export default defineConfig(({ command, mode }) => {
       supported: {
         'top-level-await': true //browsers can handle top-level-await features
       },
-    }
+    },
+    // build: {
+    //   chunkSizeWarningLimit: 1500,
+    //   rollupOptions: {
+    //     output: {
+    //       manualChunks(id) {
+    //         if (id.includes("node_modules")) {
+    //           return id.toString().split("node_modules/")[1].split("/")[0].toString()
+    //         }
+    //       },
+    //       entryFileNames: 'js/[name].[hash].js',
+    //       assetFileNames: (assetInfo) => {
+    //         if (assetInfo.name.endsWith(".css")) {
+    //           return "css/[name]-[hash].css";
+    //         }
+    //         return "assets/[name]-[hash].[ext]";
+    //       },
+    //       chunkFileNames: (chunkInfo) => {
+    //         const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
+    //         const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
+    //         return `js/${fileName}/[name].[hash].js`;
+    //       },
+    //     }
+    //   }
+    // }
   }
 }
 )