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

2024-07-30 22:16:01 -07:00 · 2024-07-30 22:16:01 -07:00 · 71f9423f3b
commit 71f9423f3b
parent 235e8378b9 219a5a7d89
21 changed files with 326 additions and 67 deletions
--- a/frontend/src/assets/styles/_variables.scss
+++ b/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;
--- a/frontend/src/assets/styles/inputs.scss
+++ b/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-size: 16px;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 4px 12px;
    color: #f8f8f9;
  }
  .error-msg {
@ -40,5 +49,6 @@
    color: #9ea2af;
    font-size: 18px;
    margin: 0;
+    white-space: nowrap;
  }
 }
--- a/frontend/src/components/EmptyContent.vue
+++ b/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>
--- a/frontend/src/components/SvgIcon.vue
+++ b/frontend/src/components/SvgIcon.vue
@ -34,10 +34,11 @@ export default {

 <style scoped>
 .svg-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
+  font-size: 16px;
 }
 </style>
--- a/frontend/src/footers/FooterGuest.vue
+++ b/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>
--- a/frontend/src/footers/FooterUser.vue
+++ b/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>
--- a/frontend/src/headers/HeaderGuest.vue
+++ b/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;
  }
 }
--- a/frontend/src/headers/HeaderUser.vue
+++ b/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 {
--- a/frontend/src/icons/back.svg
+++ b/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>
--- a/frontend/src/lang/en.js
+++ b/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'
 }
--- a/frontend/src/lang/index.js
+++ b/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'
--- a/frontend/src/lang/zh.js
+++ b/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': '重新发送'
 }
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/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') }}
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/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 {
-//   @extend .input-control-item;
-//   @extend .me-1;
-// }
-
-// .btn-start {
-//   @extend .proceed-button;
-//   @extend .ms-1;
-// }
+.resend-btn {
+  font-weight: 500;
+  padding: 0;
+  font-size: 18px;
+  &:disabled {
+    color: $primary;
+    opacity: .78;
+  }
+}
+.countdown {
+  color: $primary;
+}
 </style>
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/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>
--- a/frontend/src/pages/public/About.vue
+++ b/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>
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/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"
-        :id="project.id">
+      <div 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"
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/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 {
--- a/frontend/src/plugins/router/router.js
+++ b/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 }
    }
  ],

--- a/frontend/src/utils/backend/workspace.js
+++ b/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(
--- a/frontend/vite.config.js
+++ b/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'),
-        '~quill': resolve('node_modules/quill'),
+        '~bootstrap': resolve('node_modules/bootstrap')
      }
    },
    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`;
+    //       },
+    //     }
+    //   }
+    // }
  }
 }
 )
				`@ -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>`