Merge from origin main and resolve conflict

2024-07-31 21:10:06 -07:00 · 2024-07-31 21:10:06 -07:00 · 8c44d4856e
commit 8c44d4856e
parent 2f20a118a3 71f9423f3b
23 changed files with 471 additions and 464 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/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@ -1,106 +1,57 @@
 <template>
  <div class="making-proposal-container offcanvas-parent">
    <div class="making-proposal-content">
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-copy-existing"
-        aria-labelledby="offcanvas-copy-existing"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
+        aria-labelledby="offcanvas-copy-existing">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvas-copy-existing">
            {{ $t('Copy from existing proposals') }}
          </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <div class="accordion" id="existing-proposal-item-container">
-            <div
-              v-for="(existingProposal, index) in existingProposals"
-              :key="index"
-              :id="'existing-proposal' + index"
-              class="accordion-item"
-            >
+            <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
+              class="accordion-item">
              <h2 class="accordion-header" :id="'existing-heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
+                  :aria-controls="'collapse' + index">
                  <span class="dashed-container">{{ existingProposal.request.title }}</span>
                </button>
              </h2>
-              <div
-                :id="'existing-proposal-collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'existing-heading' + index"
-                data-bs-parent="#existing-proposal-item-container"
-              >
+              <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
                <div class="accordion-body">
                  <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                    {{ $t('Copy') }}
                  </button>
-                  <div
-                    class="existing-request-content-text"
-                    v-html="existingProposal.content"
-                  ></div>
+                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-template"
-        aria-labelledby="offcanvas-template"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+        aria-labelledby="offcanvas-template">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvas-template">
            {{ $t('Apply proposal template') }}
          </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <div class="accordion" id="template-item-container">
-            <div
-              v-for="(template, index) in templates"
-              :key="index"
-              :id="'template' + index"
-              class="accordion-item"
-            >
+            <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
              <h2 class="accordion-header" :id="'heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                  <span class="dashed-container">{{ template.title }}</span>
                </button>
              </h2>
-              <div
-                :id="'collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'heading' + index"
-                data-bs-parent="#template-item-container"
-              >
+              <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+                data-bs-parent="#template-item-container">
                <div class="accordion-body">
                  <button class="load-template-button" @click="applyTemplate(template)">
                    {{ $t('Apply') }}
@ -116,22 +67,14 @@
        <div class="accordion accordion-list" id="accordion-request-container">
          <div class="accordion-item">
            <h2 class="accordion-header">
-              <button
-                class="accordion-button"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-request-content"
-                aria-expanded="false"
-                aria-controls="collapse-request-content"
-              >
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-request-content" aria-expanded="false"
+                aria-controls="collapse-request-content">
                <span class="dashed-container">{{ request.title }}</span>
              </button>
            </h2>
-            <div
-              id="collapse-request-content"
-              class="accordion-collapse collapse"
-              data-bs-parent="#accordion-request-container"
-            >
+            <div id="collapse-request-content" class="accordion-collapse collapse"
+              data-bs-parent="#accordion-request-container">
              <div class="accordion-body">
                <div class="request-content" v-html="request.content"></div>
              </div>
@ -143,23 +86,13 @@
        <div class="proposal-header-container">
          <label class="proposal-label">{{ $t('Proposal') }}:</label>
          <div class="header-bar">
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-template"
-              aria-controls="offcanvas-template"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
+              aria-controls="offcanvas-template">
              <svg-icon icon="btn-templates" />
              {{ $t('Templates') }}
            </button>
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-copy-existing"
-              aria-controls="offcanvas-copy-existing"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
              <svg-icon icon="btn-history" />
              {{ $t('Copy') }}
            </button>
@ -175,12 +108,8 @@
              <div class="form-group">
                <div class="input-group-container">
                  <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-payment-content-${index}`"
-                      type="number"
-                      v-model="stage.payment"
-                    />
+                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
+                      v-model="stage.payment" />
                    <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
                  </div>
                  <span class="btn-start">{{ stage.currency }}</span>
@ -191,12 +120,8 @@
              <div class="form-group">
                <div class="input-group-container">
                  <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-duration-content-${index}`"
-                      type="number"
-                      v-model="stage.duration_in_days"
-                    />
+                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
+                      v-model="stage.duration_in_days" />
                    <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
                  </div>
                  <span class="btn-start">{{ $t('day(s)') }}</span>
@ -207,12 +132,7 @@
              <div class="form-group">
                <div class="input-group-container">
                  <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-note-content-${index}`"
-                      type="text"
-                      v-model="stage.note"
-                    />
+                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
                    <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
                  </div>
                </div>
@ -247,12 +167,7 @@
              <span v-if="uploadFile">{{ uploadFile.name }}</span>
              <input type="file" hidden @change="handleFileUpload" />
            </label>
-            <svg-icon
-              v-if="uploadFile"
-              icon="delete"
-              class-name="delete-icon"
-              @click.stop="clearFile"
-            />
+            <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
          </div>
          <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
          <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
@ -279,6 +194,7 @@ import {
 } from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
+import { WorksapceApi } from '../../../utils';
 export default {
  name: 'MakeProposal',
  components: { SvgIcon, FreeleapsEditor },
@ -335,40 +251,33 @@ export default {
    coverLetterDone(event) {
      this.proposal.content = event.target.innerHTML
    },
-    submit() {
+    attachFile() {
      if (this.uploadFile) {
-        DocumentApi.upload(this.uploadFile)
+        WorksapceApi.attachFileToRequest(this.requestId, this.uploadFile)
          .then((response) => {
-            return RequestHubApi.makeProposalForRequest(
-              this.requestId,
-              this.proposal.content,
-              this.proposal.stages,
-              response.data.document_id
-            )
-          })
-          .then((response) => {
-            this.proposal_id = response.data.proposal_id
-            this.mnx_navToRequestSubmitted(this.proposal_id)
-          })
-          .catch((error) => {
-            this.mnx_backendErrorHandler(error)
-          })
-      } else {
-        RequestHubApi.makeProposalForRequest(
-          this.requestId,
-          this.proposal.content,
-          this.proposal.stages,
-          null
-        )
-          .then((response) => {
-            let proposal_id = response.data
-            this.mnx_navToProposalSubmitted(proposal_id)
+            this.mnx_navToProposalSubmitted(this.requestId)
          })
          .catch((error) => {
            this.mnx_backendErrorHandler(error)
          })
      }
    },
+    submit() {
+      RequestHubApi.makeProposalForRequest(
+        this.requestId,
+        this.proposal.content,
+        this.proposal.stages,
+        null
+      ).then((response) => {
+        if (this.uploadFile) {
+          this.attachFile()
+        } else {
+          this.mnx_navToRequestSubmitted(this.requestId)
+        }
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      })
+    },
    loadFrom() {
      switch (Number.parseInt(this.loadingMode, 10)) {
        case proposingModelEnum.NO_LOADING: {
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@ -2,22 +2,13 @@
  <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"
-              :data-bs-target="'#collapse-' + project_index"
-              aria-expanded="false"
-              :aria-controls="'collapse-' + project_index"
-            >
+            <button class="accordion-button collapsed" 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">
@ -44,11 +35,7 @@
              </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)">
@ -56,30 +43,17 @@
                </button>
              </div>
              <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <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"
-                  :id="proposal.id"
-                >
+                <div 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"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
-                        aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index"
-                      >
+                      <button class="accordion-button collapsed" 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">{{ $t('Quote') }}</label>
@ -112,23 +86,16 @@
                        </div>
                      </button>
                    </h2>
-                    <div
-                      :id="'collapse-request-proposal' + proposal_index"
-                      class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id"
-                    >
+                    <div :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)">
                            {{ $t('reject') }}
                          </button>
-                          <button
-                            class="request-proposal-action-accept"
-                            @click="acceptProposal(project, proposal_index)"
-                          >
+                          <button class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)">
                            {{ $t('accept') }}
                          </button>
                        </div>
@ -136,12 +103,9 @@
                          <div class="request-proposal-content" v-html="proposal.content" />
                        </div>
                        <div class="request-proposal-payment-plan">
-                          <div
-                            class="request-proposal-payment-plan-stage-container"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
-                            :key="stage_index"
-                            :id="'payment-stage-' + stage_index"
-                          >
+                          <div class="request-proposal-payment-plan-stage-container"
+                            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">{{ $t('Payment') }}</label>
                              <p class="project-item-text">
@ -176,12 +140,9 @@
                <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"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
-                  :key="stage_index"
-                  :id="'payment-stage-' + stage_index"
-                >
+                <div class="request-proposal-payment-plan-stage-container"
+                  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">{{ $t('Payment') }}</label>
                    <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@ -199,40 +160,24 @@
                </div>
              </div>
              <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                  contenteditable="false"></div>
              </div>
            </div>
            <div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
              <div class="project-invite-collaborator-containter">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapse-project-invite-collaborator"
-                  aria-expanded="false"
-                  aria-controls="collapse-project-invite-collaborator"
-                >
+                <button class="accordion-button collapsed" 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">+ {{ $t('Invite') }}</div>
                </button>
-                <div
-                  id="collapse-project-invite-collaborator"
-                  class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator"
-                >
+                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator">
                  <div class="project-invite-collaborator-form-container">
-                    <input
-                      type="text"
-                      v-model="newInviteCollaborator[project_index]"
-                      :placeholder="$t('Input E-mail to invite other')"
-                      @keydown.enter="
+                    <input type="text" v-model="newInviteCollaborator[project_index]"
+                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
                        inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                      "
-                    />
+                        " />
                    <svg-icon icon="msg-enter" class-name="project-invite-enter" />
                  </div>
                </div>
@ -240,14 +185,9 @@
              <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"
-                      data-bs-target="#collapse-project-milestone"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-milestone"
-                    >
+                    <button class="accordion-button collapsed" 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 dashed-container">
                        <div class="project-milestone-bar-progress">
                          <label class="project-item-label">{{ $t('Progress') }}</label>
@ -283,26 +223,20 @@
                      </div>
                    </button>
                  </h2>
-                  <div
-                    id="collapse-project-milestone"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone"
-                  >
+                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone">
                    <table class="project-milestones-table">
-                      <tbody
-                        v-for="milestone in project.project.progress.milestones"
-                        :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index"
-                      >
+                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index">
                        <tr>
                          <td>
                            <div class="project-milestones-table-content">
                              <span class="project-milestones-table-label">{{
                                $t('Milestone')
-                              }}</span>
+                                }}</span>
                              <span class="project-milestones-table-span">{{
                                milestone.index
-                              }}</span>
+                                }}</span>
                            </div>
                          </td>
                          <td>
@ -310,7 +244,7 @@
                              <span class="project-milestones-table-label">{{ $t('Goal') }}</span>
                              <span class="project-milestones-table-span">{{
                                milestone.description
-                              }}</span>
+                                }}</span>
                            </div>
                          </td>
                          <td>
@ -318,14 +252,14 @@
                              <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                              <span class="project-milestones-table-span">{{
                                fromIntToMilestoneStatus(milestone.status)
-                              }}</span>
+                                }}</span>
                            </div>
                          </td>
                          <td>
                            <div class="project-milestones-table-content">
                              <span class="project-milestones-table-label">{{
                                $t('Payment')
-                              }}</span>
+                                }}</span>
                              <span class="project-milestones-table-span">
                                {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                                {{ project.project.progress.payment_currency }}
@ -337,20 +271,15 @@
                              <span class="project-milestones-table-label">{{ $t('Update') }}</span>
                              <span class="project-milestones-table-span">{{
                                getDateFromFulltimeString(milestone.update_time)
-                              }}</span>
+                                }}</span>
                            </div>
                          </td>
                          <td>
                            <div class="project-milestones-table-content">
                              <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button
-                                class="project-milestones-table-btn"
-                                :disabled="
-                                  isMilestoneActionButtonDisabled(project.project, milestone)
-                                "
-                                :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                @click="handleMilestoneAction(project.project, milestone)"
-                              >
+                              <button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
+                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
+                                @click="handleMilestoneAction(project.project, milestone)">
                                {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                              </button>
                              <!-- <span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> -->
@ -361,10 +290,8 @@
                          <td colspan="6">
                            <div class="project-milestones-qrcode-content">
                              <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button
-                                class="project-milestones-qrcode-button"
-                                @click="handlePaymentAction(project.project, milestone)"
-                              >
+                              <button class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)">
                                {{ $t('Mark As Paid') }}
                              </button>
                            </div>
@ -376,14 +303,9 @@
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-code"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-code"
-                    >
+                    <button 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 dashed-container">
                        <div class="project-code-git-status">
                          <label class="project-item-label">{{ $t('Code Depot') }}</label>
@ -406,22 +328,13 @@
                      </div>
                    </button>
                  </h2>
-                  <div
-                    id="collapse-project-code"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-code"
-                  >
+                  <div 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"
-                          @click="copyCodeGit(project)"
-                          v-tooltip
-                          title="Copied"
-                          trigger="click"
-                          delay='{"show":"500", "hide":"100"}'
-                        >
+                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
+                          delay='{"show":"500", "hide":"100"}'>
                          {{ $t('copy git url') }}
                        </button>
                      </div>
@ -437,14 +350,9 @@
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-issue"
-                    >
+                    <button class="accordion-button collapsed" 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 dashed-container">
                        <div class="project-issue-open-issues">
                          <label class="project-item-label">{{ $t('Open issues') }}</label>
@ -467,11 +375,8 @@
                      </div>
                    </button>
                  </h2>
-                  <div
-                    id="collapse-project-issue"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-issue"
-                  >
+                  <div id="collapse-project-issue" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue">
                    <div class="project-code-git-url-container">
                      <button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
                        {{ $t('Issues management') }}
--- 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/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@ -1,48 +1,26 @@
 <template>
  <div class="request-issue-container offcanvas-parent">
-    <div
-      class="offcanvas offcanvas-end offcanvas-container"
-      tabindex="-1"
-      id="offcanvas-copy-existing"
-      aria-labelledby="offcanvas-copy-existing"
-    >
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
+      aria-labelledby="offcanvas-copy-existing">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvas-copy-existing">
          {{ $t('Copy from existing request') }}
        </h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="accordion" id="existing-request-item-container">
-          <div
-            v-for="(existingRequest, index) in existingRequests"
-            :key="index"
-            :id="'existing-request' + index"
-            class="accordion-item"
-          >
+          <div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + index"
+            class="accordion-item">
            <h2 class="accordion-header" :id="'existing-heading' + index">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'existing-request-collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'existing-request-collapse' + index" aria-expanded="false"
+                :aria-controls="'collapse' + index">
                <span class="dashed-container">{{ existingRequest.title }}</span>
              </button>
            </h2>
-            <div
-              :id="'existing-request-collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'existing-heading' + index"
-              data-bs-parent="#existing-request-item-container"
-            >
+            <div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
+              :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
              <div class="accordion-body">
                <button class="btn btn-link" @click="copyRequest(existingRequest)">
                  {{ $t('Copy') }}
@ -54,52 +32,26 @@
        </div>
      </div>
    </div>
-    <div
-      class="offcanvas offcanvas-end offcanvas-container"
-      tabindex="-1"
-      id="offcanvas-template"
-      aria-labelledby="offcanvas-template"
-    >
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+      aria-labelledby="offcanvas-template">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvas-template">{{ $t('Apply request template') }}</h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="accordion" id="template-item-container">
-          <div
-            v-for="(template, index) in availableTemplates"
-            :key="index"
-            :id="'template' + index"
-            class="accordion-item"
-          >
+          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
+            class="accordion-item">
            <h2 class="accordion-header" :id="'heading' + index">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                <span class="dashed-container">{{ template.title }}</span>
              </button>
            </h2>
-            <div
-              :id="'collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container"
-            >
+            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+              data-bs-parent="#template-item-container">
              <div class="accordion-body">
-                <button
-                  class="select-template-button btn btn-link"
-                  @click="selectTemplate(template)"
-                >
+                <button class="select-template-button btn btn-link" @click="selectTemplate(template)">
                  {{ $t('Apply') }}
                </button>
                <div class="template-content-textarea" v-html="template.content"></div>
@ -110,42 +62,23 @@
      </div>
    </div>
    <div class="action-bar">
-      <input-selector
-        :select-list="products"
-        :selected="selectedProduct"
-        @selectedChange="selectedChange"
-      />
+      <input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
      <div class="upload-contianer">
        <label class="btn btn-link">
          <span v-if="!uploadFile">{{ $t('Upload file') }}</span>
          <span v-if="uploadFile">{{ uploadFile.name }}</span>
          <input type="file" hidden @change="handleFileUpload" />
        </label>
-        <svg-icon
-          v-if="uploadFile"
-          icon="delete"
-          class-name="delete-icon"
-          @click.stop="clearFile"
-        />
+        <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
      </div>
      <div class="flex-1" />
-      <button
-        class="action-button btn btn-link"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-template"
-        aria-controls="offcanvas-template"
-      >
+      <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
+        data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
        <svg-icon icon="btn-templates" />
        {{ $t('Templates') }}
      </button>
-      <button
-        class="action-button btn btn-link"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-copy-existing"
-        aria-controls="offcanvas-copy-existing"
-      >
+      <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
+        data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
        <svg-icon icon="btn-history" />
        {{ $t('Copy') }}
      </button>
--- 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
@ -36,23 +36,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';`
        }
      }
    },
@ -89,7 +85,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>`