From 385631ee06c3ac04d7fc44997e91ce279e8928fe Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Sun, 9 Jun 2024 14:38:29 -0700
Subject: [PATCH 01/17] add WorksapceApi.fetchAttachedFileAsMediaData

---
 frontend/src/pages/user/requests/Home.vue | 135 +++++++---------------
 frontend/src/utils/backend/workspace.js   |  15 +++
 2 files changed, 54 insertions(+), 96 deletions(-)

diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 484b4cd..a1d730f 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -1,43 +1,22 @@
 <template>
   <div class="request-hub">
-    <div
-      v-for="(group, index) in requestGroups"
-      :key="index"
-      class="request-invitations"
-      :id="group.name"
-    >
+    <div v-for="(group, index) in requestGroups" :key="index" class="request-invitations" :id="group.name">
       <div v-if="group.data" class="accordion" id="request-invitation-container">
-        <div
-          v-for="(request, index) in group.data"
-          :key="index"
-          :id="request.id"
-          class="accordion-item my-3"
-        >
+        <div v-for="(request, index) in group.data" :key="index" :id="request.id" class="accordion-item my-3">
           <h2 class="accordion-header">
-            <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">
               <div class="request-content-container">
                 <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box"
-                    >Issuer</label
-                  >
+                  <label class="request-content-label" for="request-content-issuer-box">Issuer</label>
                   <div class="request-content-box" id="request-content-issuer-box">
                     <span class="request-content-issuer-text">
                       {{ request.issuer_profile.first_name }}
-                      {{ request.issuer_profile.last_name }}</span
-                    >
+                      {{ request.issuer_profile.last_name }}</span>
                   </div>
                 </div>
                 <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box"
-                    >Request</label
-                  >
+                  <label class="request-content-label" for="request-content-title-box">Request</label>
                   <div class="request-content-box" id="request-content-title-box">
                     <span class="request-content-title-text"> {{ request.title }}</span>
                   </div>
@@ -61,102 +40,59 @@
               </div>
             </button>
           </h2>
-          <div
-            :id="'collapse' + index"
-            class="accordion-collapse collapse"
-            data-bs-parent="#request-invitation-container"
-          >
+          <div :id="'collapse' + index" class="accordion-collapse collapse"
+            data-bs-parent="#request-invitation-container">
             <div class="accordion-body">
               <div class="request-description-container">
                 <button class="make-proposal-button" type="button" @click="Propose(request)">
                   Propose
                 </button>
                 <div class="request-description-content" v-html="request.content"></div>
-                <div v-for="(document_id, index) in request.document_ids" :key="document_id">
-                  <a :href="getDocumentDownloadLink(document_id)" download>file-{{ index }}</a>
+                <div v-for="(file, index) in request.attached_files" :key="index">
+                  <button @click="previewAttachedFile(request.id, file.document_id)">{{ file.file_name }}</button>
                 </div>
               </div>
               <div class="issuer-profile-container">
-                <label class="issuer-profile-label" for="issuer-achievement-container"
-                  >Issuer profile</label
-                >
+                <label class="issuer-profile-label" for="issuer-achievement-container">Issuer profile</label>
                 <div class="issuer-achievement-container" id="issuer-achievement-container">
                   <div class="issuer-achievement-isssuer-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-isssuer-content-div"
-                      >Name</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-isssuer-content-div"
-                    >
+                    <label class="issuer-achievement-label" for="issuer-achievement-isssuer-content-div">Name</label>
+                    <div class="issuer-achievement-content-container" id="issuer-achievement-isssuer-content-div">
                       <span class="issuer-achievement-issuer-text">
                         {{ request.issuer_profile.first_name }}
-                        {{ request.issuer_profile.last_name }}</span
-                      >
+                        {{ request.issuer_profile.last_name }}</span>
                     </div>
                   </div>
                   <div class="issuer-achievement-stay-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-stay-content-div"
-                      >Stay on Freeleaps</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
+                    <label class="issuer-achievement-label" for="issuer-achievement-stay-content-div">Stay on
+                      Freeleaps</label>
+                    <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
                       <span class="issuer-achievement-stay-content-text">
-                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
-                      >
+                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span>
                     </div>
                   </div>
                   <div class="issuer-achievement-paid-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-paid-content-div"
-                      >Total payment</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
+                    <label class="issuer-achievement-label" for="issuer-achievement-paid-content-div">Total
+                      payment</label>
+                    <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
                       <span class="issuer-achievement-paid-content-text">
                         {{ request.issuer_achievement.issuer.spending.total }}
-                        {{ request.issuer_achievement.issuer.spending.currency }}</span
-                      >
+                        {{ request.issuer_achievement.issuer.spending.currency }}</span>
                     </div>
                   </div>
                   <div class="issuer-achievement-deposit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-deposit-content-div"
-                      >Deposit</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-deposit-content-div"
-                    >
+                    <label class="issuer-achievement-label" for="issuer-achievement-deposit-content-div">Deposit</label>
+                    <div class="issuer-achievement-content-container" id="issuer-achievement-deposit-content-div">
                       <span class="issuer-achievement-deposit-content-text">
                         {{ request.issuer_achievement.issuer.deposit.available }}
-                        {{ request.issuer_achievement.issuer.deposit.currency }}</span
-                      >
+                        {{ request.issuer_achievement.issuer.deposit.currency }}</span>
                     </div>
                   </div>
                   <div class="issuer-achievement-credit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-credit-content-div"
-                      >Credit</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-credit-content-div"
-                    >
+                    <label class="issuer-achievement-label" for="issuer-achievement-credit-content-div">Credit</label>
+                    <div class="issuer-achievement-content-container" id="issuer-achievement-credit-content-div">
                       <span class="issuer-achievement-credit-content-text">
-                        {{ request.issuer_achievement.activeness.credit }}</span
-                      >
+                        {{ request.issuer_achievement.activeness.credit }}</span>
                     </div>
                   </div>
                 </div>
@@ -170,7 +106,7 @@
 </template>
 
 <script>
-import { RequestHubApi, DateUtils, requestHubUtils } from '../../../utils/index'
+import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
 import { proposingModelEnum } from '../../../types/index'
 export default {
   name: 'RequestHub',
@@ -202,8 +138,15 @@ export default {
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },
-    getDocumentDownloadLink(document_id) {
-      return '/api/v1/document/download/' + document_id
+    previewAttachedFile(request_id, document_id) {
+      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
+        let media_data = response.data
+        console.log(media_data)
+        //TODO: navigate to the preview page
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      }
+      )
     }
   }
 }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index c58d242..29af71e 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -319,6 +319,21 @@ class WorksapceApi {
     })
     return request
   }
+  static fetchAttachedFileAsMediaData(request_id, document_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/request/fetch-attached-file-as-media-data',
+      {
+        request_id: request_id,
+        document_id: document_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+
+  }
 }
 
 export { WorksapceApi }

From be9cc494ef8dfd80c3960eb6f1afc18853c88d81 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Sun, 9 Jun 2024 15:57:06 -0700
Subject: [PATCH 02/17] add example of download file

---
 frontend/src/pages/user/requests/Home.vue | 25 +++++++++++++++++-
 frontend/src/utils/backend/workspace.js   | 31 ++++++++++++++++++-----
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index a1d730f..ce1104c 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -49,7 +49,8 @@
                 </button>
                 <div class="request-description-content" v-html="request.content"></div>
                 <div v-for="(file, index) in request.attached_files" :key="index">
-                  <button @click="previewAttachedFile(request.id, file.document_id)">{{ file.file_name }}</button>
+                  <button @click="previewAttachedFile(request.id, file.document_id)">Preview{{ file.file_name }}</button>
+                  <button @click="downloadAttachedFile(request.id, file.document_id)">Download{{ file.file_name }}</button>
                 </div>
               </div>
               <div class="issuer-profile-container">
@@ -147,6 +148,28 @@ export default {
         this.mnx_backendErrorHandler(error)
       }
       )
+    },
+    downloadAttachedFile(request_id, document_id) {
+      WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id).then(response => {
+        // create file link in browser's memory
+        const href = URL.createObjectURL(response.data);
+
+        // create "a" HTML element with href to file & click
+        const link = document.createElement('a');
+        link.href = href;
+        link.setAttribute('download', 'file.pdf'); //or any other extension
+        document.body.appendChild(link);
+        link.click();
+
+        // clean up "a" element & remove ObjectURL
+        document.body.removeChild(link);
+        URL.revokeObjectURL(href);        //TODO: navigate to the preview page
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      }
+      )
+
+
     }
   }
 }
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 29af71e..69b3770 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -311,12 +311,15 @@ class WorksapceApi {
     formData.append('request_id', request_id)
     formData.append('file', file)
 
-    const request = backendAxios.post('/api/workspace/request/attach-file-for-request', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-        Authorization: `Bearer ${jwt}`
-      }
-    })
+    const request = backendAxios.post(
+      '/api/workspace/request/attach-file-for-request',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Bearer ${jwt}`
+        }
+      })
     return request
   }
   static fetchAttachedFileAsMediaData(request_id, document_id) {
@@ -334,6 +337,22 @@ class WorksapceApi {
     return request
 
   }
+  static fetchAttachedFileAsDownload(request_id, document_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.get(
+      '/api/workspace/request/fetch-attached-file-as-download',
+      {
+        params: {
+          request_id: request_id,
+          document_id: document_id,
+        },
+        responseType: 'blob',
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+
+  }
 }
 
 export { WorksapceApi }

From dd90d4d4de2488754aaa10ab27e15b0ed8293e79 Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Tue, 11 Jun 2024 03:48:17 +0800
Subject: [PATCH 03/17] update

---
 frontend/package.json                         |   4 +-
 frontend/src/assets/styles/main.scss          |  14 +
 frontend/src/components/FreeleapsEditor.vue   | 314 ++++++++++++++++++
 frontend/src/components/InputSelector.vue     |  70 ++++
 frontend/src/components/PDFReader.vue         | 116 +++----
 frontend/src/components/VueQuill.vue          |  70 ----
 frontend/src/headers/HeaderUser.vue           |  20 +-
 frontend/src/icons/delete.svg                 |   1 +
 frontend/src/icons/dropdown.svg               |   1 +
 frontend/src/icons/fe-alignjustify.svg        |   1 +
 frontend/src/icons/fe-bold.svg                |   1 +
 frontend/src/icons/fe-char.svg                |   1 +
 frontend/src/icons/fe-clear.svg               |   1 +
 frontend/src/icons/fe-italic.svg              |   1 +
 frontend/src/icons/fe-orderedlist.svg         |   1 +
 frontend/src/icons/fe-paragraph.svg           |   1 +
 frontend/src/icons/fe-strike.svg              |   1 +
 frontend/src/icons/fe-underline.svg           |   1 +
 frontend/src/icons/fe-unorderedlist.svg       |   1 +
 frontend/src/icons/msg-enter.svg              |   1 +
 frontend/src/pages/guest/FrontDoor.vue        |   9 +-
 .../src/pages/guest/NewUserSetPassword.vue    |   5 +-
 .../src/pages/public/PdfContentViewer.vue     |   7 +-
 frontend/src/pages/user/messages/Home.vue     | 263 ++++-----------
 frontend/src/pages/user/workspace/Home.vue    |  24 +-
 .../user/workspace/requestIssue/Issue.vue     |  61 ++--
 frontend/src/plugins/index.js                 |   1 -
 frontend/src/plugins/pdfjs/index.js           |   1 -
 frontend/src/plugins/pdfjs/pdfjs.js           |   7 -
 frontend/src/plugins/router/router.js         |  10 +-
 frontend/src/utils/index.js                   |   2 +-
 frontend/src/utils/validator/index.js         |   1 +
 frontend/vite.config.js                       |   2 +-
 33 files changed, 622 insertions(+), 392 deletions(-)
 create mode 100644 frontend/src/components/FreeleapsEditor.vue
 create mode 100644 frontend/src/components/InputSelector.vue
 delete mode 100644 frontend/src/components/VueQuill.vue
 create mode 100644 frontend/src/icons/delete.svg
 create mode 100644 frontend/src/icons/dropdown.svg
 create mode 100644 frontend/src/icons/fe-alignjustify.svg
 create mode 100644 frontend/src/icons/fe-bold.svg
 create mode 100644 frontend/src/icons/fe-char.svg
 create mode 100644 frontend/src/icons/fe-clear.svg
 create mode 100644 frontend/src/icons/fe-italic.svg
 create mode 100644 frontend/src/icons/fe-orderedlist.svg
 create mode 100644 frontend/src/icons/fe-paragraph.svg
 create mode 100644 frontend/src/icons/fe-strike.svg
 create mode 100644 frontend/src/icons/fe-underline.svg
 create mode 100644 frontend/src/icons/fe-unorderedlist.svg
 create mode 100644 frontend/src/icons/msg-enter.svg
 delete mode 100644 frontend/src/plugins/pdfjs/index.js
 delete mode 100644 frontend/src/plugins/pdfjs/pdfjs.js

diff --git a/frontend/package.json b/frontend/package.json
index fcfaa74..8c60d9e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,13 +11,11 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
     "buffer": "^6.0.3",
-    "pdfjs-dist": "^4.2.67",
+    "pdfjs-dist": "3.5.141",
     "pinia": "^2.1.6",
-    "quill": "^1.3.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vuex": "^4.1.0"
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 20818bb..9b5d1f5 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -104,3 +104,17 @@ p {
   height: 100%;
   margin: 0 auto;
 }
+.btn-link {text-decoration: none; color: $primary;}
+.dropdown-menu {border: none; box-shadow: 0px 0px 24px 0px #D4D3E380; padding: 0; overflow: hidden;
+  .btn-link {text-decoration: none; height: 33px; width: 100%; color: #0D1637; font-size: 14px; text-align: left; border-radius: 0;
+      &:hover {background-color: #F3F6FF;}
+      &.active {background-color: #1748F8; color: white;}
+  }
+  .dropdown-new {color: #1748F8;
+      &:hover {background-color: white;}
+  }
+  .dropdown-new-input-container {padding: 6px 12px; position: relative;
+      input {border: 1px solid #E7E8EB; box-shadow: none; border-radius: 3px; padding: 0 20px 0 5px; height: 22px; font-size: 14px;}
+      .dropdown-new-input-icon  {width: 16px; height: 16px; padding: 3px; color: #3D455F; background-color: #EEEFF1; border-radius: 3px; position: absolute; top: 10px; right: 15px}
+  }
+}
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
new file mode 100644
index 0000000..e7742cb
--- /dev/null
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="freeleaps-editor">
+    <div v-if="!disabled" class="editor-control">
+      <div v-for="(item, index) in iconList" :key="index" class="editor-item">
+        <button class="item-icon" :class="{'activity': item.choose}" :data-info="item.name" @click="iconClick($event, item.type)" :data-bs-toggle="item.drop ? 'dropdown' : ''" data-bs-auto-close="outside" aria-expanded="false">
+          <svg-icon :icon="item.icon" class-name="icon" />
+        </button>
+        <div class="dropmenu drop-style" v-if="item.type === 'style'">
+          <ul>
+            <li>
+              <a href="#" @click="iconClick($event, 'p', 'style')"><p>正文</p></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'blockquote', 'style')"><blockquote>引用</blockquote></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>标题一</h1></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>标题二</h2></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>标题三 </h3></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>标题四 </h4></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>标题五 </h5></a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>标题六</h6></a>
+            </li>
+          </ul>
+        </div>
+        <div class="dropmenu drop-style" v-if="item.type === 'alignjustify'">
+          <ul>
+            <li>
+              <a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
+                <i class="iconfont icon-aligncenter"></i>
+                <span>居中</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
+                <i class="iconfont icon-alignleft"></i>
+                <span>左对齐</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
+                <i class="iconfont icon-alignright"></i>
+                <span>右对齐</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
+                <i class="iconfont icon-alignjustify"></i>
+                <span>默认对齐</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="editor-body" :contenteditable="!disabled" spellcheck="false" ref="editor" v-html="content" @blur="updateAction" />
+  </div>
+</template>
+<script>
+import SvgIcon from '@/components/SvgIcon.vue'
+export default {
+  name: 'FreeleapsEditor',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:content'],
+  components: { SvgIcon },
+  data() {
+    return {
+      selectedRange: '',
+      iconList: [
+        // {
+        //   name: '标签', // hover名字
+        //   type: 'style', // 点击事件处理
+        //   icon: 'fe-paragraph', // 图标样式
+        //   drop: true, // 是否有下拉菜单
+        //   canChoose: true, // 是否被选中
+        //   choose: false
+        // },
+        {
+          name: '粗体',
+          type: 'bold',
+          icon: 'fe-bold',
+          drop: false,
+          canChoose: true,
+          choose: false
+        },
+        {
+          name: '斜体',
+          type: 'italic',
+          icon: 'fe-italic',
+          drop: false,
+          canChoose: true,
+          choose: false
+        },
+        {
+          name: '下划线',
+          type: 'underline',
+          icon: 'fe-underline',
+          drop: false,
+          canChoose: true,
+          choose: false
+        },
+        // {
+        //   name: '删除线',
+        //   type: 'strike',
+        //   icon: 'fe-strike',
+        //   drop: false,
+        //   canChoose: true,
+        //   choose: false
+        // },
+        // {
+        //   name: '清除样式',
+        //   type: 'clear',
+        //   icon: 'fe-clear',
+        //   drop: false,
+        //   canChoose: false,
+        //   choose: false
+        // },
+        // {
+        //   name: '字体颜色',
+        //   type: 'fontFamily',
+        //   icon: 'fe-char',
+        //   drop: false,
+        //   canChoose: true,
+        //   choose: false
+        // },
+        {
+          name: '无序列表',
+          type: 'unorderedlist',
+          icon: 'fe-unorderedlist',
+          drop: false,
+          canChoose: true,
+          choose: false
+        },
+        {
+          name: '有序列表',
+          type: 'orderedlist',
+          icon: 'fe-orderedlist',
+          drop: false,
+          canChoose: true,
+          choose: false
+        },
+        // {
+        //   name: '对齐方式',
+        //   type: 'alignjustify',
+        //   icon: 'fe-alignjustify',
+        //   drop: true,
+        //   canChoose: true,
+        //   choose: false
+        // }
+      ]
+    }
+  },
+  methods: {
+    iconClick (event, type, dropType) {
+      event.preventDefault()
+      this.$refs.editor.focus()
+      this.selectedRange = this.getSelect()
+      this.restoreSelection()
+      this.changeStyle(type)
+      this.$nextTick(() => {
+        if (dropType) {
+          type = dropType
+        }
+        let arr = []
+        arr = this.iconList.map((val) => {
+          if (type === val.type && val.canChoose) {
+            val.choose = val.choose ? false : true
+          }
+          return val
+        })
+
+        if (type === 'clear') {
+          arr = this.iconList.map((val) => {
+            val.choose = false
+            return val
+          })
+        }
+        this.iconList = arr
+      })
+    },
+    getSelect() {
+      if (window.getSelection) {
+        var sel = window.getSelection()
+        if (sel.rangeCount > 0) {
+          return sel.getRangeAt(0)
+        }
+      } else if (document.selection) {
+        return document.selection.createRange()
+      }
+      return null
+    },
+    // 改变选取的内容
+    changeStyle(type) {
+      switch (type) {
+        case 'bold':
+          document.execCommand('bold', false)
+          break
+        case 'underline':
+          document.execCommand('underline', false)
+          break
+        case 'strike':
+          document.execCommand('strikeThrough', false)
+          break
+        case 'italic':
+          document.execCommand('italic', false)
+          break
+        case 'clear':
+          document.execCommand('removeFormat', false)
+          break
+        case 'unorderedlist':
+          document.execCommand('insertUnorderedList', false)
+          break
+        case 'orderedlist':
+          document.execCommand('insertorderedList', false)
+          break
+        case 'h1':
+        case 'h2':
+        case 'h3':
+        case 'h4':
+        case 'h5':
+        case 'h6':
+        case 'p':
+        case 'pre':
+        case 'blockquote':
+          document.execCommand('formatBlock', false, type)
+          break
+        case 'justifyCenter':
+        case 'justifyFull':
+        case 'justifyLeft':
+        case 'justifyRight':
+          document.execCommand(type, false)
+          break
+        default:
+          console.log('none')
+      }
+    },
+    restoreSelection() {
+      var selection = window.getSelection()
+      if (this.selectedRange) {
+        try {
+          selection.removeAllRanges()
+        } catch (ex) {
+          document.body.createTextRange().select()
+          document.selection.empty()
+        }
+        selection.addRange(this.selectedRange)
+      }
+    },
+
+    updateAction($event) {
+      let html = $event.target.innerHTML || ''
+      this.$emit('update:content', html)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.freeleaps-editor {position: relative; background-color: #fff; border-radius: 4px; border: 1px solid #a9a9a9; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0; text-decoration: none; }
+  code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
+  .editor-control { display: flex; flex-flow: row wrap; min-height: 40px; color: #333; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #f5f5f5; border-color: #ddd; }
+  .dropmenu { display: none; position: absolute; top: 32px; left: 0; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
+    ul {padding: 10px; margin-bottom: 0;}
+    ul li { text-align: left; list-style: none; 
+      a { display: block; padding: 5px 10px; white-space: nowrap; }
+    }
+  }
+  .drop-align { min-width: 100px; }
+  .editor-body { height: 300px; padding: 10px; color: #000; background-color: #fff; overflow: auto; outline: none; text-align: left; border-radius: 4px;
+    p { font-size: 14px; color: #68747f; margin: 0 0 10px; }
+  }
+}
+
+.editor-item { position: relative; vertical-align: middle; border: 1px solid #ccc; cursor: pointer; line-height: 20px; border-radius: 3px; margin: 4px 0 4px 5px; background-color: white;
+  .item-icon { position: relative; display: inline-block; width: 100%; height: 100%; padding: 2px 10px; font-size: 18px; font-weight: normal; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-color: #fff; border: 1px solid white; outline: none; transition: all 0.1s ease-out; border-radius: 3px;
+    &::after { position: absolute; top: 0; content: attr(data-info); top: 40px; left: 20px; padding: 5px 8px; border-radius: 4px; white-space: nowrap; line-height: 1.5; font-size: 13px; color: #fff; background: rgba(0,0,0,.8); -webkit-transform: translateX(-50%); transform: translateX(-50%); visibility: hidden; opacity: .9; letter-spacing: 1px; z-index: 9999; }
+    &::before { position: absolute; content: ""; top: 35px; left: 20px; width: 0; height: 0; margin: 0 0 0 -6px; font-size: 0; color: rgba(0,0,0,.8); border-bottom: 6px solid currentColor; border-left: 6px solid transparent; border-right: 6px solid transparent; visibility: hidden; opacity: .9; z-index: 9999; }
+    &:hover, &.activity{ color: #333; background-color: #e6e6e6; border-color: #e6e6e6; }
+    &:hover:after, &:hover:before { visibility: visible; }
+    &.activity + .dropmenu { display: block; }
+  }
+}
+</style>
+<style>
+.freeleaps-editor blockquote { padding: 10px 20px; font-size: 17.5px; border-left: 5px solid #f86466; background: white; }
+.freeleaps-editor pre { display: block; padding: 9.5px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; }
+.editor-body blockquote { margin-bottom: 30px; }
+.editor-body pre { margin-bottom: 10px; }
+.editor-body ul { padding-left: 40px; list-style-type: disc; }
+.editor-body ol { padding-left: 40px; }
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/InputSelector.vue b/frontend/src/components/InputSelector.vue
new file mode 100644
index 0000000..157f815
--- /dev/null
+++ b/frontend/src/components/InputSelector.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="input-selector-container">
+    <div class="input-selector-btn" data-bs-toggle="dropdown" aria-expanded="false" id="input-selector-btn">
+        <span>{{selected || ''}}</span>
+        <svg-icon icon="dropdown" class-name="selector-dropdown-icon" />
+    </div>
+    <ul class="dropdown-menu" aria-labelledby="input-selector-btn">
+        <li>
+            <button v-if="!inputing" class="btn btn-link dropdown-new" @click="newAction">+ NEW</button>
+            <div v-if="inputing" class="dropdown-new-input-container">
+                <input type="text" v-model="newval" @keyup.enter="newItemAction">
+                <svg-icon v-if="newval" icon="msg-enter" class-name="dropdown-new-input-icon" />
+            </div>
+        </li>
+        <li v-for="item in selectList" :key="item">
+            <button class="btn btn-link" @click="selectItem(item)" :class="item==selected ? 'active' : ''">{{item}}</button>
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon.vue'
+export default {
+  name: 'InputSelector',
+  props: {
+    selectList: {
+        type: Array,
+        default: () => []
+    },
+    selected: {
+        type: String,
+        default: ''
+    }
+  },
+  data() {
+    return {
+        inputing: true,
+        newval: ''
+    }
+  },
+  mounted() { },
+  components: {SvgIcon},
+  methods: {
+    newAction($event) {
+        $event.stopPropagation()
+        this.newval = ''
+        this.inputing = true
+    },
+    selectItem(item) {
+        this.$emit('selectedChange', {selected: item, isNew: false})
+    },
+    newItemAction() {
+        if (!this.newval) return
+        this.$emit('selectedChange', {selected: this.newval, isNew: this.selectList.indexOf(this.newval) === -1})
+        this.newval = ''
+        this.inputing = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.input-selector-container {width: fit-content; height: fit-content; position: relative;
+    .input-selector-btn {width: 153px; height: 30px; display: flex; align-items: center; overflow: hidden; cursor: pointer; border: 1px solid #E7E8EB; border-radius: 3px; padding: 0 3px 0 5px;
+        >span {font-size: 18px; font-weight: 500; color: #242424; flex: 1; text-align: left;}
+        .selector-dropdown-icon {color: #242424; padding: 3px;}
+    }
+}
+</style>
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
index d212040..117e4c1 100644
--- a/frontend/src/components/PDFReader.vue
+++ b/frontend/src/components/PDFReader.vue
@@ -1,81 +1,81 @@
 <template>
-  <div class="pdf-reader">
-    <canvas ref="canvas"></canvas>
+  <div id="pdf-container" class="pdf-container">
+      <canvas id="theCanvas"></canvas>
+      <div class="oprate">
+          <button class="btn btn-link" @click="prev">prev</button>
+          <span> {{ currentPage }} / {{ numPages }} </span>
+          <button class="btn btn-link" @click="next">next</button>
+      </div>
   </div>
 </template>
 
 <script>
-// import { getDocument } from 'pdfjs-dist'
-import * as PDFJS from 'pdfjs-dist'
-// import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
-import { ContentApi } from '@/utils/index'
-// PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')
+import * as PDFJS from "pdfjs-dist/build/pdf"
+import { WorksapceApi } from '@/utils/index'
+PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker.entry')
 
 export default {
   name: 'PDFReader',
   props: {
     document: { type: String, default: '' }
   },
+  data() {
+    return {
+      loadingTask: null,
+      currentPage: 1,
+      numPages: 0,
+      selectedPage: 1
+    }
+  },
   mounted() {
     this.renderPDF()
   },
   methods: {
-    async renderPDF() {
-      // const response = await DocumentApi.download(this.document)
-      const response = await ContentApi.retrieve_blog_content(this.document)
-      console.log('response', response)
-
-      //   var fr = new FileReader();
-      //   fr.onload = async function(){
-      //     const doc = await getDocument({url: this.result}).promise
-      //   const page = await doc.getPage(1)
-      //   const canvas = this.$refs.canvas
-      //   const context = canvas.getContext('2d')
-      //   const viewport = page.getViewport({ scale: 1 })
-
-      //   canvas.width = viewport.width
-      //   canvas.height = viewport.height
-
-      //   await page.render({
-      //     canvasContext: context,
-      //     viewport
-      //   })
-      //   }
-      //   fr.readAsDataURL(response.data);
-
-      const doc = await PDFJS.getDocument({ data: response.data }).promise
-      const page = await doc.getPage(1)
-      const canvas = this.$refs.canvas
-      const context = canvas.getContext('2d')
-      const viewport = page.getViewport({ scale: 1 })
-
-      canvas.width = viewport.width
-      canvas.height = viewport.height
-
-      await page.render({
-        canvasContext: context,
-        viewport
-      })
+    renderPage (num) {
+      const canvas = document.getElementById("theCanvas");
+      const context = canvas.getContext("2d");
+      const scale = 1.5;
+      this.loadingTask.promise.then((pdf) => {
+          pdf.getPage(num).then((page) => {
+              const viewport = page.getViewport({ scale });
+              canvas.height = viewport.height;
+              canvas.width = viewport.width;
+              const renderContext = {
+                  canvasContext: context,
+                  viewport: viewport,
+              };
+              page.render(renderContext);
+          });
+      });
     },
-    base64StringToUint8Array(base64String) {
-      var padding = '='.repeat((4 - (base64String.length % 4)) % 4)
-      var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
-
-      var rawData = atob(base64)
-      var outputArray = new Uint8Array(rawData.length)
-
-      for (var i = 0; i < rawData.length; ++i) {
-        outputArray[i] = rawData.charCodeAt(i)
-      }
-      return outputArray
+    async renderPDF() {
+        const response = await WorksapceApi.fetchAttachedFileAsMediaData("66673218fa83335c3b1b11ec", "6667321afa83335c3b1b11ee")
+        this.loadingTask = PDFJS.getDocument({url: response.data});
+        this.loadingTask.promise.then((pdf) => {
+            this.numPages = pdf.numPages;
+            this.renderPage(1);
+        });
+    },
+    prev() {
+        if (this.currentPage > 1) {
+            this.currentPage--;
+            this.renderPage(this.currentPage);
+        }
+    },
+    next() {
+        if (this.currentPage < this.numPages) {
+            this.currentPage++;
+            this.renderPage(this.currentPage);
+        }
     }
+
+
   }
 }
 </script>
 
-<style scoped>
-.pdf-reader {
-  width: 100%;
-  height: 100%;
+<style lang="scss" scoped>
+.pdf-container{position: relative;
+  .operate{position: absolute; right: 0; top: 0; }
 }
 </style>
diff --git a/frontend/src/components/VueQuill.vue b/frontend/src/components/VueQuill.vue
deleted file mode 100644
index fdb3f0c..0000000
--- a/frontend/src/components/VueQuill.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="vue-quill-container">
-    <QuillEditor
-      ref="quillRef"
-      v-model:content="quillData"
-      :options="quillOptions"
-      content-type="html"
-      @text-change="quillChange()"
-    />
-  </div>
-</template>
-<script>
-const toolbarOptions = [
-  ['bold', 'italic', 'underline', 'strike'],
-  ['blockquote', 'code-block'],
-  [{ list: 'ordered' }, { list: 'bullet' }],
-  [{ script: 'sub' }, { script: 'super' }],
-  [{ indent: '-1' }, { indent: '+1' }],
-  [{ direction: 'rtl' }],
-  [{ size: ['small', false, 'large', 'huge'] }],
-  [{ header: [1, 2, 3, 4, 5, 6, false] }],
-  [{ color: [] }, { background: [] }],
-  [{ font: [] }],
-  [{ align: [] }],
-  ['clean']
-]
-import { QuillEditor } from '@vueup/vue-quill'
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
-export default {
-  name: 'VueQuill',
-  props: {
-    content: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:content'],
-  components: { QuillEditor },
-  data() {
-    return {
-      quillData: this.content,
-      quillOptions: {
-        theme: 'snow',
-        placeholder: '请输入',
-        modules: {
-          toolbar: {
-            container: toolbarOptions
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    quillChange() {
-      this.$emit('update:content', this.quillData)
-    }
-  }
-}
-</script>
-
-<style>
-.vue-quill-container {
-  width: 100%;
-  height: 100%;
-  min-height: 100px;
-}
-</style>
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 1211e25..73d5dec 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div class="information-bar" @click="gotoMessages">
+      <div class="information-bar" @click="gotoMessages" :class="activePath == 'message'?'active':''">
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button class="navigation-item active" @click="gotoWorkspace">
+        <button class="navigation-item" @click="gotoWorkspace" :class="activePath == 'Workspace'?'active':''">
           <svg-icon icon="workspace" class-name="icon" />
           Workspace
         </button>
-        <button class="navigation-item" @click="gotoRequests">
+        <button class="navigation-item" @click="gotoRequests" :class="activePath == 'Requests'?'active':''">
           <svg-icon icon="requests" class-name="icon" />
           Requests
         </button>
-        <button class="navigation-item" @click="gotoProviders">
+        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers'?'active':''">
           <svg-icon icon="providers" class-name="icon" />
           Providers
         </button>
-        <button class="navigation-item" @click="gotoIssueRequest">
+        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post'?'active':''">
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
@@ -61,10 +61,17 @@ export default {
     if (this.userIdentityNote.length > 8) {
       this.userIdentityNote = this.userIdentityNote.slice(0, 5) + '...'
     }
+    console.log('watch', this.$route.meta)
   },
   data() {
     return {
-      userIdentityNote: this.mnx_getUserIdentity()
+      userIdentityNote: this.mnx_getUserIdentity(),
+      activePath: this.$route.meta.activePath
+    }
+  },
+  watch: {
+    $route(to) {
+      this.activePath = to.meta.activePath
     }
   },
   methods: {
@@ -156,6 +163,7 @@ export default {
     top: 0;
     background-color: #f44837;
   }
+  &.active {border: 1px solid $primary;}
 }
 
 .profile-container {
diff --git a/frontend/src/icons/delete.svg b/frontend/src/icons/delete.svg
new file mode 100644
index 0000000..8bc9e3a
--- /dev/null
+++ b/frontend/src/icons/delete.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5138" width="64" height="64"><path d="M993.310029 179.7115H892.968039l-45.464399 813.855781c-0.938917 16.951554-14.971621 30.209501-31.940191 30.209501H209.743828c-16.970573 0-30.998272-13.247937-31.936188-30.17747l-46.19311-813.887812H32.346588c-17.689275 0-32.002252-14.322987-32.002252-31.996247 0-17.666252 14.312978-31.989239 32.002252-31.989239h120.931097c1.457423 0 2.888821 0.106104 4.294194 0.294287a32.138385 32.138385 0 0 1 4.266166-0.294287h167.931996V31.99024c0-17.666252 14.312978-31.989239 31.998248-31.989239h301.08603c17.685271 0 31.995245 14.322987 31.995245 31.989239v83.735774H862.722502c1.656618 0 3.301224 0.129126 4.919805 0.382373a32.19444 32.19444 0 0 1 4.953838-0.382373H993.310029c17.685271 0 31.999249 14.322987 31.99925 31.989239 0 17.673259-14.313978 31.996246-31.99925 31.996247zM630.852066 63.986487H393.767539v51.739527h237.084527V63.986487zM195.710123 179.7115l44.280243 780.079796H785.316911l43.558538-780.079796H195.710123zM701.535093 869.624242c-0.964942 17.024626-15.060708 30.178471-31.903156 30.178472-0.625611 0-1.21819-0.014014-1.840797-0.046045-17.659245-1.000978-31.126397-16.119742-30.12542-33.757967l33.652865-592.997099c1.00398-17.666252 16.37399-30.883159 33.750959-30.132426 17.655241 0.997975 31.122393 16.120743 30.124419 33.758968L701.535093 869.624242z m-189.207773 30.178472c-17.692278 0-31.998248-14.319984-31.998249-31.993244V274.816375c0-17.673259 14.305971-31.992242 31.998249-31.992242 17.683269 0 31.996246 14.318983 31.996246 31.992242v592.993095c0 17.673259-14.312978 31.993243-31.996246 31.993244z m-156.621951-0.046045a35.334506 35.334506 0 0 1-1.843801 0.046045c-16.843449 0-30.93521-13.153846-31.904156-30.178472L288.301544 276.628145c-1.000978-17.638225 12.469177-32.760993 30.122417-33.758968 17.220817-0.79878 32.749982 12.466174 33.753963 30.132426l33.64886 592.997099c1.001978 17.638225-12.465173 32.756989-30.121415 33.757967z" p-id="5139"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/dropdown.svg b/frontend/src/icons/dropdown.svg
new file mode 100644
index 0000000..1f4ab44
--- /dev/null
+++ b/frontend/src/icons/dropdown.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1331 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4137" 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" p-id="4138"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-alignjustify.svg b/frontend/src/icons/fe-alignjustify.svg
new file mode 100644
index 0000000..bd52e28
--- /dev/null
+++ b/frontend/src/icons/fe-alignjustify.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3055" width="64" height="64"><path d="M170.666667 298.666667h768a42.666667 42.666667 0 1 0 0-85.333334H170.666667a42.666667 42.666667 0 1 0 0 85.333334z m768 426.666666H170.666667a42.666667 42.666667 0 0 0 0 85.333334h768a42.666667 42.666667 0 1 0 0-85.333334z m0-170.666666H170.666667a42.666667 42.666667 0 0 0 0 85.333333h768a42.666667 42.666667 0 1 0 0-85.333333z m0-170.666667H170.666667a42.666667 42.666667 0 1 0 0 85.333333h768a42.666667 42.666667 0 0 0 0-85.333333z" p-id="3056"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-bold.svg b/frontend/src/icons/fe-bold.svg
new file mode 100644
index 0000000..2a269e9
--- /dev/null
+++ b/frontend/src/icons/fe-bold.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1304" width="64" height="64"><path d="M697.8 481.4c33.6-35 54.2-82.3 54.2-134.3v-10.2C752 229.3 663.9 142 555.3 142H259.4c-15.1 0-27.4 12.3-27.4 27.4v679.1c0 16.3 13.2 29.5 29.5 29.5h318.7c117 0 211.8-94.2 211.8-210.5v-11c0-73-37.4-137.3-94.2-175.1zM328 238h224.7c57.1 0 103.3 44.4 103.3 99.3v9.5c0 54.8-46.3 99.3-103.3 99.3H328V238z m366.6 429.4c0 62.9-51.7 113.9-115.5 113.9H328V542.7h251.1c63.8 0 115.5 51 115.5 113.9v10.8z" p-id="1305"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-char.svg b/frontend/src/icons/fe-char.svg
new file mode 100644
index 0000000..cad4d5f
--- /dev/null
+++ b/frontend/src/icons/fe-char.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2418" width="64" height="64"><path d="M792.864 922.112l103.584-2.176L572.576 110.24h-89.184L161.696 919.936H264l66.944-167.936h394.112l67.808 170.112zM369.216 656L528 257.632 686.784 656h-317.568z" p-id="2419"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-clear.svg b/frontend/src/icons/fe-clear.svg
new file mode 100644
index 0000000..56bd0f6
--- /dev/null
+++ b/frontend/src/icons/fe-clear.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2256" width="64" height="64"><path d="M311.769043 997.487304h653.668174v-66.782608H311.769043z" p-id="2257"></path><path d="M638.447304 760.186435l-152.665043-153.355131-152.665044-153.35513L650.245565 134.92313 955.575652 441.633391 638.425043 760.186435z m-173.723826 174.458435h-165.487304L70.77287 717.000348l215.129043-216.086261 18.031304 18.120348L591.187478 807.602087l-126.441739 127.042783z m540.91687-537.6L694.633739 84.658087c-23.752348-23.863652-65.113043-23.774609-88.776348 0L262.28313 429.768348 13.94087 679.201391c-21.147826 21.25913-17.986783 57.677913 7.791304 83.500522L262.906435 992.52313a33.391304 33.391304 0 0 0 22.995478 9.216h192.645565c8.859826 0 17.341217-3.539478 23.596522-9.839304l159.877565-160.567652 343.574261-345.110261A62.73113 62.73113 0 0 0 1024.005565 441.633391c0-16.851478-6.522435-32.678957-18.365217-44.588521z" p-id="2258"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-italic.svg b/frontend/src/icons/fe-italic.svg
new file mode 100644
index 0000000..af791d1
--- /dev/null
+++ b/frontend/src/icons/fe-italic.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1619" width="64" height="64"><path d="M798 160H366c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h181.2l-156 544H229c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8H474.4l156-544H798c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z" p-id="1620"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-orderedlist.svg b/frontend/src/icons/fe-orderedlist.svg
new file mode 100644
index 0000000..5033b80
--- /dev/null
+++ b/frontend/src/icons/fe-orderedlist.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2894" width="64" height="64"><path d="M920 760H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0-568H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 284H336c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM216 712H100c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h72.4v20.5h-35.7c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h35.7V838H100c-2.2 0-4 1.8-4 4v34c0 2.2 1.8 4 4 4h116c2.2 0 4-1.8 4-4V716c0-2.2-1.8-4-4-4zM100 188h38v120c0 2.2 1.8 4 4 4h40c2.2 0 4-1.8 4-4V152c0-4.4-3.6-8-8-8h-78c-2.2 0-4 1.8-4 4v36c0 2.2 1.8 4 4 4z m116 240H100c-2.2 0-4 1.8-4 4v36c0 2.2 1.8 4 4 4h68.4l-70.3 77.7c-1.3 1.5-2.1 3.4-2.1 5.4V592c0 2.2 1.8 4 4 4h116c2.2 0 4-1.8 4-4v-36c0-2.2-1.8-4-4-4h-68.4l70.3-77.7c1.3-1.5 2.1-3.4 2.1-5.4V432c0-2.2-1.8-4-4-4z" p-id="2895"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-paragraph.svg b/frontend/src/icons/fe-paragraph.svg
new file mode 100644
index 0000000..6a405fd
--- /dev/null
+++ b/frontend/src/icons/fe-paragraph.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1147" width="64" height="64"><path d="M149.333333 149.333333h448a42.666667 42.666667 0 1 1 0 85.333334H149.333333a42.666667 42.666667 0 1 1 0-85.333334z m0 640h448a42.666667 42.666667 0 1 1 0 85.333334H149.333333a42.666667 42.666667 0 1 1 0-85.333334z m0-320h725.333334a42.666667 42.666667 0 1 1 0 85.333334H149.333333a42.666667 42.666667 0 1 1 0-85.333334z" p-id="1148"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-strike.svg b/frontend/src/icons/fe-strike.svg
new file mode 100644
index 0000000..29acb54
--- /dev/null
+++ b/frontend/src/icons/fe-strike.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2095" width="64" height="64"><path d="M952 474H569.9c-10-2-20.5-4-31.6-6-15.9-2.9-22.2-4.1-30.8-5.8-51.3-10-82.2-20-106.8-34.2-35.1-20.5-52.2-48.3-52.2-85.1 0-37 15.2-67.7 44-89 28.4-21 68.8-32.1 116.8-32.1 54.8 0 97.1 14.4 125.8 42.8 14.6 14.4 25.3 32.1 31.8 52.6 1.3 4.1 2.8 10 4.3 17.8 0.9 4.8 5.2 8.2 9.9 8.2h72.8c5.6 0 10.1-4.6 10.1-10.1v-1c-0.7-6.8-1.3-12.1-2-16-7.3-43.5-28-81.7-59.7-110.3-44.4-40.5-109.7-61.8-188.7-61.8-72.3 0-137.4 18.1-183.3 50.9-25.6 18.4-45.4 41.2-58.6 67.7-13.5 27.1-20.3 58.4-20.3 92.9 0 29.5 5.7 54.5 17.3 76.5 8.3 15.7 19.6 29.5 34.1 42H72c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h433.2c2.1 0.4 3.9 0.8 5.9 1.2 30.9 6.2 49.5 10.4 66.6 15.2 23 6.5 40.6 13.3 55.2 21.5 35.8 20.2 53.3 49.2 53.3 89 0 35.3-15.5 66.8-43.6 88.8-30.5 23.9-75.6 36.4-130.5 36.4-43.7 0-80.7-8.5-110.2-25-29.1-16.3-49.1-39.8-59.7-69.5-0.8-2.2-1.7-5.2-2.7-9-1.2-4.4-5.3-7.5-9.7-7.5h-79.7c-5.6 0-10.1 4.6-10.1 10.1v1c0.2 2.3 0.4 4.2 0.6 5.7 6.5 48.8 30.3 88.8 70.7 118.8 47.1 34.8 113.4 53.2 191.8 53.2 84.2 0 154.8-19.8 204.2-57.3 25-18.9 44.2-42.2 57.1-69 13-27.1 19.7-57.9 19.7-91.5 0-31.8-5.8-58.4-17.8-81.4-5.8-11.2-13.1-21.5-21.8-30.8H952c4.4 0 8-3.6 8-8v-60c0-4.3-3.6-7.9-8-7.9z" p-id="2096"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-underline.svg b/frontend/src/icons/fe-underline.svg
new file mode 100644
index 0000000..3ccb304
--- /dev/null
+++ b/frontend/src/icons/fe-underline.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1934" width="64" height="64"><path d="M824 804H200c-4.4 0-8 3.4-8 7.6v60.8c0 4.2 3.6 7.6 8 7.6h624c4.4 0 8-3.4 8-7.6v-60.8c0-4.2-3.6-7.6-8-7.6zM512 728c69.4 0 134.6-27.1 183.8-76.2C745 602.7 772 537.4 772 468V156c0-6.6-5.4-12-12-12h-60c-6.6 0-12 5.4-12 12v312c0 97-79 176-176 176s-176-79-176-176V156c0-6.6-5.4-12-12-12h-60c-6.6 0-12 5.4-12 12v312c0 69.4 27.1 134.6 76.2 183.8C377.3 701 442.6 728 512 728z" p-id="1935"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/fe-unorderedlist.svg b/frontend/src/icons/fe-unorderedlist.svg
new file mode 100644
index 0000000..e3d505a
--- /dev/null
+++ b/frontend/src/icons/fe-unorderedlist.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2733" width="64" height="64"><path d="M192 277.333333H106.666667V192h85.333333v85.333333z m725.333333 0H277.333333V192h640v85.333333zM192 554.666667H106.666667v-85.333334h85.333333v85.333334z m725.333333 0H277.333333v-85.333334h640v85.333334zM192 832H106.666667v-85.333333h85.333333v85.333333z m725.333333 0H277.333333v-85.333333h640v85.333333z" p-id="2734"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/msg-enter.svg b/frontend/src/icons/msg-enter.svg
new file mode 100644
index 0000000..9caaa48
--- /dev/null
+++ b/frontend/src/icons/msg-enter.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3264" width="64" height="64"><path d="M789.333333 128a192 192 0 0 1 191.786667 182.954667L981.333333 320v213.333333a192 192 0 0 1-182.954666 191.786667L789.333333 725.333333H110.976l118.314667 135.253334a21.333333 21.333333 0 0 1 0.682666 27.349333l-2.688 2.773333a21.333333 21.333333 0 0 1-27.306666 0.682667l-2.773334-2.688-149.248-170.624a21.333333 21.333333 0 0 1-3.84-21.76l1.536-3.2 2.304-3.114667 149.333334-170.709333a21.333333 21.333333 0 0 1 34.346666 24.96l-2.261333 3.114667L111.018667 682.666667H789.333333a149.333333 149.333333 0 0 0 149.12-141.141334L938.666667 533.333333v-213.333333a149.333333 149.333333 0 0 0-141.141334-149.12L789.333333 170.666667H512a21.333333 21.333333 0 0 1-3.84-42.325334L512 128h277.333333z" p-id="3265"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 0f9d51c..dea182f 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -33,7 +33,8 @@
 
 <script>
 import {
-  UserAuthApi
+  UserAuthApi,
+  applicantValidator
   // userProfileValidator,
 } from '../../utils/index'
 import { signinActionEnum } from '../../types/index'
@@ -55,9 +56,9 @@ export default {
         return
       }
 
-      // this.message = userProfileValidator.emailValidator.validate(
-      //   this.email
-      // );
+      this.message = applicantValidator.emailValidator.validate(
+        this.email
+      );
 
       if (this.message != null) return
 
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 480ea08..63d343e 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { UserAuthApi, passwordValidator } from '../../utils/index'
+import { UserAuthApi, applicantValidator } from '../../utils/index'
 export default {
   name: 'NewUserSetPassword',
   props: {},
@@ -67,7 +67,8 @@ export default {
         this.message = 'The two passwords are not matched'
         return
       }
-      this.message = passwordValidator.validate(this.password)
+      this.message = applicantValidator.emailValidator.validate(this.password)
+      // console.log('EmailValidator', EmailValidator)
       if (this.message != null) return
 
       UserAuthApi.updatePassword(this.password, this.password2)
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index b1692f2..9a4555c 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="width: 100vw; height: 100vh">
-    <PDFReader document="6662431ee312d5389c612020" />
+  <div class="pdf-viewer">
+    <PDFReader />
   </div>
 </template>
 <script>
@@ -50,3 +50,6 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+// .pdf-viewer {height: $body-height;}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index ce9e1df..20a0da0 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -1,81 +1,52 @@
 <template>
-  <div class="message-hub-conainter">
-    <div class="conversation-list-container">
-      <div
-        v-for="(conversation, index) in conversations"
-        :key="index"
-        class="conversation-container"
-        @click="selectConversation(conversation)"
-      >
-        <div class="participant-portrait-container">
-          <img
-            class="participant-portrait"
-            alt="user portrait"
-            src="@/assets/images/default-user-portrait.png"
-          />
-        </div>
-        <div class="conversation-summary-container">
-          <div class="conversation-summary-header-container">
-            <span class="participant-fullname">
-              {{ conversation.summary.contact.first_name }}
-              {{ conversation.summary.contact.last_name }}
-            </span>
-            <span class="conversation-last-update-date">
-              {{ getDateFromFulltimeString(conversation.summary.last_message.create_time) }}</span
-            >
-          </div>
-          <div class="conversation-summary-highlight-container">
-            <span class="conversation-last-message-summary">{{
-              conversation.summary.last_message.message_body
-            }}</span>
+  <div class="message-container">
+    <div class="message-hub-conainter">
+      <div v-if="conversations && conversations.length>0" class="conversation-list-container">
+        <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" @click="selectConversation(conversation)">
+          <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
+          <div class="conversation-summary-container">
+            <div class="conversation-summary-header-container">
+              <span class="participant-fullname">
+                {{ conversation.summary.contact.first_name }}
+                {{ conversation.summary.contact.last_name }}
+              </span>
+              <span class="conversation-last-update-date">{{ getDateFromFulltimeString(conversation.summary.last_message.create_time) }}</span>
+            </div>
+            <div class="conversation-summary-highlight-container">{{ conversation.summary.last_message.message_body }}</div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="message-panel-container">
-      <div v-if="current_thread" class="message-thread-container">
-        <div
-          v-for="(item, index) in current_thread.conversation.messages"
-          :key="index"
-          class="message-item-container"
-        >
-          <div class="message-item-header-container">
-            <div class="message-item-sender-info">
-              <img
-                class="message-item-sender-portrait"
-                alt="user portrait"
-                src="@/assets/images/default-user-portrait.png"
-              />
+      <div v-if="!conversations || conversations.length==0" class="conversation-list-empty-container">
+        Empty conversation
+      </div>
+      <div class="message-panel-container">
+        <div v-if="current_thread" class="message-thread-container">
+          <div v-for="(item, index) in current_thread.conversation.messages" :key="index" class="message-item-container" :class="item.sender_profile.me ? 'me': ''">
+            <div class="message-item-header-container">
+              <img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
               <span class="message-item-sender-fullname">
                 {{ item.sender_profile.first_name }}
                 {{ item.sender_profile.last_name }}
               </span>
+              <span class="message-item-create-time"> {{ getDateFromFulltimeString(item.raw_data.create_time) }}</span>
             </div>
-            <div class="message-item-additional-info-container">
-              <span class="message-item-create-time">
-                {{ getDateFromFulltimeString(item.raw_data.create_time) }}</span
-              >
-            </div>
-          </div>
-          <div class="message-item-message-body-container">
-            <p class="message-item-message-body-span">{{ item.raw_data.message_body }}</p>
+            <div class="message-item-message-body">{{ item.raw_data.message_body }}</div>
           </div>
         </div>
-      </div>
-      <div class="message-writing-panel-container">
-        <input
-          class="writing-message-input"
-          type="text"
-          v-model="writtenMessage"
-          @keypress.enter="sendMessage(current_thread.conversation.information.conversation_id)"
-        />
+        <div v-if="!current_thread" class="message-thread-empty-container">Please choose conversation</div>
+        <div class="message-writing-panel-container">
+          <svg-icon icon="msg-enter" class-name="writing-message-enter" />
+          <input class="writing-message-input" type="text" v-model="writtenMessage" @keypress.enter="sendMessage(current_thread.conversation.information.conversation_id)" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import SvgIcon from '../../../components/SvgIcon.vue'
 import { MessageHubApi, DateUtils } from '../../../utils/index'
 export default {
+  components: { SvgIcon },
   name: 'MessageHub',
   props: {},
   mounted() {
@@ -130,139 +101,45 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.message-hub-conainter {
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-  @extend .border;
-  @extend .w-100;
-}
+.message-container { display: flex; align-items: center; width: 100%; height: $body-height; padding: 24px 24px 0 24px; justify-content: center;
+  .message-hub-conainter { display: flex; box-shadow: 0px 0px 24px 0px #D4D3E380; border-radius: 12px; width: 100%; max-width: $body-width; height: 100%; overflow: hidden;
+    .conversation-list-container {height: 100%; overflow: auto; width: 300px;
+      .conversation-container {background-color: #F3F3F5; display: flex; cursor: pointer; height: 98px; padding: 18px;
+        .participant-portrait {width: 36px; height: 36px; border-radius: 18px; margin-right: 16px;}
+        .conversation-summary-container {display: flex; flex-direction: column; flex: 1; overflow: hidden;
+          .conversation-summary-header-container {display: flex; align-items: center; height: 22px; color: #0D1637;
+            .participant-fullname {font-weight: 500; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
+            .conversation-last-update-date {white-space: nowrap; flex-shrink: 0;}
+          }
+          .conversation-summary-highlight-container {font-size: 14px; color: #6E7387; white-space: normal; overflow: hidden; flex: 1; text-align: left; word-break: break-word}
+        }
+        &:hover {opacity: .78;}
+        &.selected {background-color: transparent;}
+      }
+    }
+    .conversation-list-empty-container {height: 100%; overflow: auto; width: 300px; background-color: #F3F3F5; display: flex; align-items: center; justify-content: center;}
+    .message-panel-container {height: 100%; overflow: auto; flex: 1; padding-bottom: 98px; position: relative;
+      .message-thread-container {height: 100%; overflow: auto; padding: 20px 32px; display: flex; flex-direction: column;
+        .message-item-container {max-width: 70%; margin-bottom: 15px; width: fit-content; display: flex; flex-direction: column;
+          .message-item-header-container {display: flex; align-items: center; margin-bottom: 6px; width: 100%; overflow: hidden; font-size: 18px; width: fit-content; max-width: 100%;
+            .message-item-sender-portrait {width: 36px; height: 36px; border-radius: 18px; }
+            .message-item-sender-fullname {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #16181E; font-weight: 500; margin: 0 7px; }
+            .message-item-create-time {color: #737478; white-space: nowrap; flex-shrink: 0; font-size: 16px; }
+          }
+          .message-item-message-body {font-size: 14px; line-height: 17px; color: #0D1637; background-color: #F3F3F5; padding: 12px; border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%; text-align: left; word-break: break-word}
 
-.conversation-list-container {
-  @extend .flex-colum-container;
-  @extend .justify-content-start;
-  @extend .w-40;
-  @extend .m-1;
-  @extend .border;
-  min-height: 80vh;
-}
-
-.conversation-container {
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-  @extend .border;
-  @extend .w-100;
-  @extend .my-3;
-  @extend .focus-ring;
-  cursor: pointer;
-}
-
-.participant-portrait-container {
-  @extend .float-start;
-}
-
-.participant-portrait {
-  @extend .img-fluid;
-}
-
-.conversation-summary-container {
-  @extend .flex-colum-container;
-  @extend .w-90;
-}
-
-.conversation-summary-header-container {
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-  @extend .w-100;
-}
-
-.participant-fullname {
-  @extend .text-start;
-  @extend .label-text-light;
-}
-
-.conversation-last-update-date {
-  @extend .text-start;
-  @extend .label-text-light;
-}
-
-.conversation-summary-highlight-container {
-  @extend .container;
-}
-
-.conversation-last-message-summary {
-  @extend .d-inline-block;
-  @extend .text-truncate;
-  @extend .w-100;
-}
-
-.message-panel-container {
-  @extend .flex-colum-container;
-  @extend .w-60;
-  @extend .m-1;
-  @extend .border;
-  @extend .justify-content-between;
-  min-height: 80vh;
-}
-
-.message-thread-container {
-  @extend .flex-colum-container;
-  @extend .m-1;
-  @extend .border;
-  @extend .align-items-start;
-  @extend .flex-grow-1;
-}
-
-.message-item-container {
-  @extend .flex-colum-container;
-  @extend .m-1;
-}
-
-.message-item-header-container {
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-  @extend .w-100;
-}
-
-.message-item-sender-info {
-  @extend .m-1;
-}
-
-.message-item-additional-info-container {
-  @extend .m-1;
-}
-
-.message-item-sender-portrait {
-  @extend .img-fluid;
-  height: 2vh;
-}
-
-.message-item-sender-fullname {
-  @extend .label-text;
-  @extend .mx-1;
-}
-
-.message-item-create-time {
-  @extend .label-text;
-  @extend .mx-1;
-}
-
-.message-item-message-body-container {
-  @extend .container;
-}
-
-.message-item-message-body-span {
-  @extend .text-start;
-}
-
-.message-writing-panel-container {
-  @extend .flex-colum-container;
-  @extend .border;
-  min-height: 10vh;
-}
-
-.writing-message-input {
-  @extend .text-start;
-  @extend .w-100;
-  @extend .flex-grow-1;
+          &.me {align-self: flex-end;
+            .message-item-header-container {flex-direction: row-reverse; align-self: flex-end;}
+            .message-item-message-body {background-color: $primary; color: white; align-self: flex-end;}
+          }
+        }
+      }
+      .message-thread-empty-container {height: 100%; overflow: auto; padding: 20px 32px; display: flex; align-items: center; justify-content: center;}
+      .message-writing-panel-container {height: 98px; padding: 24px; background-color: white; position: absolute; bottom: 0; left: 0; width: 100%;
+        .writing-message-enter {position: absolute; height: 24px; width: 24px; background-color: #F3F3F5; padding: 7px; color: #9EA2AF; top: 37px; right: 37px; border-radius: 7px;}
+        .writing-message-input {height: 50px; border: 1px solid #E1E1E1; box-shadow: none; width: 100%; padding: 0 48px 0 12px; border-radius: 12px;}
+      }
+    }
+  }
 }
 </style>
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 0b87b9a..80f8637 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="workspace-container">
-    <div class="workspace-header"></div>
+    <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
       <div
         class="accordion"
@@ -911,34 +911,36 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.workspace-container {
-  @extend .flex-colum-container;
-}
+.workspace-container {width: 100%; display: flex; align-items: center; justify-content: center}
 
 .workspace-header {
   @extend .flex-row-container;
   @extend .justify-content-end;
 }
 
-.workspace-body {
-  @extend .container;
+.workspace-body {width: 100%; max-width: $body-width; padding: 24px 0;
+  .accordion {box-shadow: 0px 0px 24px 0px #D4D3E380; border: none; border-radius: 12px; margin-bottom: 16px;
+    .accordion-item {border: none;
+      .accordion-header {border: none;
+        .accordion-button {box-shadow: none; padding: 12px}
+      }
+    }
+  }
 }
 
-.workspace-item-bar {
-  @extend .flex-row-container;
-}
+.workspace-item-bar {display: flex; align-items: center; margin: 0 24px 0 0; border: 1px dashed #AEBFFD; border-radius: 3px; flex: 1}
 
 .workspace-item-bar-left {
   @extend .flex-row-container;
   @extend .flex-grow-1;
-  @extend .border;
+  // @extend .border;
   @extend .me-3;
 }
 
 .workspace-item-bar-right {
   @extend .flex-row-container;
   @extend .w-20;
-  @extend .border;
+  // @extend .border;
 }
 
 .project-item-title-container {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index e95672c..8fea9cc 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -105,22 +105,16 @@
       </div>
     </div>
     <div class="action-bar">
-      <div class="product-dropdown-container">
-        <label>Product Name:</label>
-        <select class="product-dropdown" v-model="selectedProduct">
-          <option value="new">New ...</option>
-          <option v-for="product in products" :value="product.name" :key="product">
-            {{ product.name }}
-          </option>
-        </select>
-        <input
-          v-if="selectedProduct === 'new'"
-          type="text"
-          class="product-input-box"
-          v-model="newProduct"
-          placeholder="Enter new product name"
-        />
+      <input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
+      <div class="upload-contianer">
+        <label class="btn btn-link">
+          <span v-if="!uploadFile">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" />
       </div>
+      <div class="flex-1" />
       <button
         class="action-button"
         type="button"
@@ -150,12 +144,12 @@
         @blur="descriptionDone($event)"
         contenteditable="true"
       /> -->
-      <VueQuill v-model:content="content" />
+      <freeleaps-editor v-model:content="content" />
     </div>
-    <div class="file-upload-container">
+    <!-- <div class="file-upload-container">
       <label for="file-upload" class="file-upload-label">Upload File:</label>
       <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" />
-    </div>
+    </div> -->
     <div class="action-footer">
       <button class="cancel-button" @click="back">Back</button>
       <button class="submit-button" @click="submit">Submit</button>
@@ -166,7 +160,9 @@
 <script>
 import { WorksapceApi, textAreaAujuster, requestIssueUtils } from '../../../../utils/index'
 import { requestIssuingModelEnum } from '../../../../types/index'
-import VueQuill from '@/components/VueQuill.vue'
+import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
+import InputSelector from '@/components/InputSelector.vue'
+import SvgIcon from '@/components/SvgIcon.vue'
 
 export default {
   name: 'IssueRequest',
@@ -180,7 +176,7 @@ export default {
       type: String
     }
   },
-  components: { VueQuill },
+  components: {FreeleapsEditor, InputSelector, SvgIcon },
   mounted() {
     this.initProducts()
     this.initiateFromInput()
@@ -194,26 +190,36 @@ export default {
       request_id: null,
       availableTemplates: null,
       existingRequests: null,
-      products: null,
+      products: [],
       selectedProduct: null,
-      newProduct: null,
       uploadFile: null
     }
   },
 
   methods: {
     handleFileUpload(event) {
-      this.uploadFile = event.target.files[0]
+      if (event.target.files[0]) {
+        this.uploadFile = event.target.files[0]
+      }
+    },
+    clearFile() {
+      this.uploadFile = null
     },
     initProducts() {
       WorksapceApi.fetchProducts()
         .then((response) => {
-          this.products = response.data
+          this.products = (response.data || []).map(p => p.name)
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
         })
     },
+    selectedChange(item) {
+      this.selectedProduct = item.selected
+      if (item.isNew) {
+        this.products.push(item.selected)
+      }
+    },
     fetchExisting() {
       WorksapceApi.fetchMyExistingRequests('')
         .then((response) => {
@@ -290,9 +296,6 @@ export default {
     },
     submit() {
       var product = this.selectedProduct
-      if (this.selectedProduct === 'new') {
-        product = this.newProduct.trim()
-      }
 
       if (!product) {
         alert('Please input a product name or select a product')
@@ -322,6 +325,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.upload-contianer {display: flex; align-items: center;}
+.delete-icon {color: $primary; cursor: pointer;
+  &:hover {opacity: .78;}
+}
 .request-issue-container {
   @extend .flex-colum-container;
 }
diff --git a/frontend/src/plugins/index.js b/frontend/src/plugins/index.js
index 90aeb25..2c5569d 100644
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -1,3 +1,2 @@
 export { store } from './store/index'
 export { router } from './router/index'
-export { pdfjsLib } from './pdfjs/index'
diff --git a/frontend/src/plugins/pdfjs/index.js b/frontend/src/plugins/pdfjs/index.js
deleted file mode 100644
index d019f85..0000000
--- a/frontend/src/plugins/pdfjs/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { pdfjsLib } from './pdfjs.js'
diff --git a/frontend/src/plugins/pdfjs/pdfjs.js b/frontend/src/plugins/pdfjs/pdfjs.js
deleted file mode 100644
index 062e5af..0000000
--- a/frontend/src/plugins/pdfjs/pdfjs.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as pdfjsLib from 'pdfjs-dist'
-//need to set worker before the pdfjs can be used.
-// pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(
-//     new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url)
-// )
-
-export { pdfjsLib }
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 78d42df..50d444e 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -235,7 +235,7 @@ const router = createRouter({
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
       components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
@@ -298,21 +298,21 @@ const router = createRouter({
     {
       name: 'message-hub',
       path: '/message-hub',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'message' },
       components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Providers' },
       components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Requests' },
       components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
     },
     {
@@ -370,7 +370,7 @@ const router = createRouter({
     {
       name: 'work-space',
       path: '/work-space',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL], active: 'workspace' },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
       components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
     }
   ],
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 3552bc2..b4eecd6 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -13,6 +13,6 @@ export { userUtils, userProfileUtils, requestIssueUtils, requestHubUtils } from
 
 export { ValueChecker, DateUtils, OIDUtils } from './common/index'
 
-export { passwordValidator } from './validator/index'
+export { passwordValidator, applicantValidator } from './validator/index'
 
 export { textAreaAujuster, tooltip, elementHandler, mediaDataHandler } from './html/index'
diff --git a/frontend/src/utils/validator/index.js b/frontend/src/utils/validator/index.js
index 0e86722..1c75d21 100644
--- a/frontend/src/utils/validator/index.js
+++ b/frontend/src/utils/validator/index.js
@@ -1 +1,2 @@
 export { passwordValidator } from './passwordValidator'
+export { applicantValidator } from './applicantValidator'
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 3cffbbb..dd7c5a5 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -38,7 +38,7 @@ export default defineConfig({
   server: {
     proxy: {
       '^/api/': {
-        target: 'http://localhost:8001/',
+        target: 'https://freeleaps-alpha.com',
         ws: true,
         changeOrigin: true
       }

From 91b0ebfea27f23d4ac04f1622a2fa3f3317425d1 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Mon, 10 Jun 2024 17:28:35 -0700
Subject: [PATCH 04/17] code stytling adjustment

---
 frontend/src/assets/styles/main.scss          |  61 +++-
 frontend/src/components/FreeleapsEditor.vue   | 258 ++++++++++++++---
 frontend/src/components/InputSelector.vue     | 101 ++++---
 frontend/src/components/PDFReader.vue         |  86 +++---
 frontend/src/headers/HeaderUser.vue           |  34 ++-
 frontend/src/pages/guest/FrontDoor.vue        |   4 +-
 .../src/pages/public/PdfContentViewer.vue     |   2 +-
 frontend/src/pages/user/messages/Home.vue     | 261 +++++++++++++++---
 frontend/src/pages/user/requests/Home.vue     | 178 ++++++++----
 frontend/src/pages/user/workspace/Home.vue    |  38 ++-
 .../user/workspace/requestIssue/Issue.vue     |  34 ++-
 frontend/src/utils/backend/workspace.js       |  36 +--
 12 files changed, 835 insertions(+), 258 deletions(-)

diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 9b5d1f5..6e326b4 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -104,17 +104,58 @@ p {
   height: 100%;
   margin: 0 auto;
 }
-.btn-link {text-decoration: none; color: $primary;}
-.dropdown-menu {border: none; box-shadow: 0px 0px 24px 0px #D4D3E380; padding: 0; overflow: hidden;
-  .btn-link {text-decoration: none; height: 33px; width: 100%; color: #0D1637; font-size: 14px; text-align: left; border-radius: 0;
-      &:hover {background-color: #F3F6FF;}
-      &.active {background-color: #1748F8; color: white;}
+.btn-link {
+  text-decoration: none;
+  color: $primary;
+}
+.dropdown-menu {
+  border: none;
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
+  padding: 0;
+  overflow: hidden;
+  .btn-link {
+    text-decoration: none;
+    height: 33px;
+    width: 100%;
+    color: #0d1637;
+    font-size: 14px;
+    text-align: left;
+    border-radius: 0;
+    &:hover {
+      background-color: #f3f6ff;
+    }
+    &.active {
+      background-color: #1748f8;
+      color: white;
+    }
   }
-  .dropdown-new {color: #1748F8;
-      &:hover {background-color: white;}
+  .dropdown-new {
+    color: #1748f8;
+    &:hover {
+      background-color: white;
+    }
   }
-  .dropdown-new-input-container {padding: 6px 12px; position: relative;
-      input {border: 1px solid #E7E8EB; box-shadow: none; border-radius: 3px; padding: 0 20px 0 5px; height: 22px; font-size: 14px;}
-      .dropdown-new-input-icon  {width: 16px; height: 16px; padding: 3px; color: #3D455F; background-color: #EEEFF1; border-radius: 3px; position: absolute; top: 10px; right: 15px}
+  .dropdown-new-input-container {
+    padding: 6px 12px;
+    position: relative;
+    input {
+      border: 1px solid #e7e8eb;
+      box-shadow: none;
+      border-radius: 3px;
+      padding: 0 20px 0 5px;
+      height: 22px;
+      font-size: 14px;
+    }
+    .dropdown-new-input-icon {
+      width: 16px;
+      height: 16px;
+      padding: 3px;
+      color: #3d455f;
+      background-color: #eeeff1;
+      border-radius: 3px;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+    }
   }
 }
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index e7742cb..861e44d 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -2,7 +2,15 @@
   <div class="freeleaps-editor">
     <div v-if="!disabled" class="editor-control">
       <div v-for="(item, index) in iconList" :key="index" class="editor-item">
-        <button class="item-icon" :class="{'activity': item.choose}" :data-info="item.name" @click="iconClick($event, item.type)" :data-bs-toggle="item.drop ? 'dropdown' : ''" data-bs-auto-close="outside" aria-expanded="false">
+        <button
+          class="item-icon"
+          :class="{ activity: item.choose }"
+          :data-info="item.name"
+          @click="iconClick($event, item.type)"
+          :data-bs-toggle="item.drop ? 'dropdown' : ''"
+          data-bs-auto-close="outside"
+          aria-expanded="false"
+        >
           <svg-icon :icon="item.icon" class-name="icon" />
         </button>
         <div class="dropmenu drop-style" v-if="item.type === 'style'">
@@ -14,7 +22,9 @@
               <a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'blockquote', 'style')"><blockquote>引用</blockquote></a>
+              <a href="#" @click="iconClick($event, 'blockquote', 'style')"
+                ><blockquote>引用</blockquote></a
+              >
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>标题一</h1></a>
@@ -23,13 +33,13 @@
               <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>标题二</h2></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>标题三 </h3></a>
+              <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>标题三</h3></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>标题四 </h4></a>
+              <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>标题四</h4></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>标题五 </h5></a>
+              <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>标题五</h5></a>
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>标题六</h6></a>
@@ -66,7 +76,14 @@
         </div>
       </div>
     </div>
-    <div class="editor-body" :contenteditable="!disabled" spellcheck="false" ref="editor" v-html="content" @blur="updateAction" />
+    <div
+      class="editor-body"
+      :contenteditable="!disabled"
+      spellcheck="false"
+      ref="editor"
+      v-html="content"
+      @blur="updateAction"
+    />
   </div>
 </template>
 <script>
@@ -160,7 +177,7 @@ export default {
           drop: false,
           canChoose: true,
           choose: false
-        },
+        }
         // {
         //   name: '对齐方式',
         //   type: 'alignjustify',
@@ -173,7 +190,7 @@ export default {
     }
   },
   methods: {
-    iconClick (event, type, dropType) {
+    iconClick(event, type, dropType) {
       event.preventDefault()
       this.$refs.editor.focus()
       this.selectedRange = this.getSelect()
@@ -278,37 +295,212 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.freeleaps-editor {position: relative; background-color: #fff; border-radius: 4px; border: 1px solid #a9a9a9; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0; text-decoration: none; }
-  code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
-  .editor-control { display: flex; flex-flow: row wrap; min-height: 40px; color: #333; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #f5f5f5; border-color: #ddd; }
-  .dropmenu { display: none; position: absolute; top: 32px; left: 0; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
-    ul {padding: 10px; margin-bottom: 0;}
-    ul li { text-align: left; list-style: none; 
-      a { display: block; padding: 5px 10px; white-space: nowrap; }
+.freeleaps-editor {
+  position: relative;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #a9a9a9;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  p,
+  a {
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit;
+    margin: 0;
+    text-decoration: none;
+  }
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+  .editor-control {
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 40px;
+    color: #333;
+    border-bottom: 1px solid transparent;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    background-color: #f5f5f5;
+    border-color: #ddd;
+  }
+  .dropmenu {
+    display: none;
+    position: absolute;
+    top: 32px;
+    left: 0;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    ul {
+      padding: 10px;
+      margin-bottom: 0;
+    }
+    ul li {
+      text-align: left;
+      list-style: none;
+      a {
+        display: block;
+        padding: 5px 10px;
+        white-space: nowrap;
+      }
     }
   }
-  .drop-align { min-width: 100px; }
-  .editor-body { height: 300px; padding: 10px; color: #000; background-color: #fff; overflow: auto; outline: none; text-align: left; border-radius: 4px;
-    p { font-size: 14px; color: #68747f; margin: 0 0 10px; }
+  .drop-align {
+    min-width: 100px;
+  }
+  .editor-body {
+    height: 300px;
+    padding: 10px;
+    color: #000;
+    background-color: #fff;
+    overflow: auto;
+    outline: none;
+    text-align: left;
+    border-radius: 4px;
+    p {
+      font-size: 14px;
+      color: #68747f;
+      margin: 0 0 10px;
+    }
   }
 }
 
-.editor-item { position: relative; vertical-align: middle; border: 1px solid #ccc; cursor: pointer; line-height: 20px; border-radius: 3px; margin: 4px 0 4px 5px; background-color: white;
-  .item-icon { position: relative; display: inline-block; width: 100%; height: 100%; padding: 2px 10px; font-size: 18px; font-weight: normal; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-color: #fff; border: 1px solid white; outline: none; transition: all 0.1s ease-out; border-radius: 3px;
-    &::after { position: absolute; top: 0; content: attr(data-info); top: 40px; left: 20px; padding: 5px 8px; border-radius: 4px; white-space: nowrap; line-height: 1.5; font-size: 13px; color: #fff; background: rgba(0,0,0,.8); -webkit-transform: translateX(-50%); transform: translateX(-50%); visibility: hidden; opacity: .9; letter-spacing: 1px; z-index: 9999; }
-    &::before { position: absolute; content: ""; top: 35px; left: 20px; width: 0; height: 0; margin: 0 0 0 -6px; font-size: 0; color: rgba(0,0,0,.8); border-bottom: 6px solid currentColor; border-left: 6px solid transparent; border-right: 6px solid transparent; visibility: hidden; opacity: .9; z-index: 9999; }
-    &:hover, &.activity{ color: #333; background-color: #e6e6e6; border-color: #e6e6e6; }
-    &:hover:after, &:hover:before { visibility: visible; }
-    &.activity + .dropmenu { display: block; }
+.editor-item {
+  position: relative;
+  vertical-align: middle;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  line-height: 20px;
+  border-radius: 3px;
+  margin: 4px 0 4px 5px;
+  background-color: white;
+  .item-icon {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    padding: 2px 10px;
+    font-size: 18px;
+    font-weight: normal;
+    white-space: nowrap;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    user-select: none;
+    background-color: #fff;
+    border: 1px solid white;
+    outline: none;
+    transition: all 0.1s ease-out;
+    border-radius: 3px;
+    &::after {
+      position: absolute;
+      top: 0;
+      content: attr(data-info);
+      top: 40px;
+      left: 20px;
+      padding: 5px 8px;
+      border-radius: 4px;
+      white-space: nowrap;
+      line-height: 1.5;
+      font-size: 13px;
+      color: #fff;
+      background: rgba(0, 0, 0, 0.8);
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      visibility: hidden;
+      opacity: 0.9;
+      letter-spacing: 1px;
+      z-index: 9999;
+    }
+    &::before {
+      position: absolute;
+      content: '';
+      top: 35px;
+      left: 20px;
+      width: 0;
+      height: 0;
+      margin: 0 0 0 -6px;
+      font-size: 0;
+      color: rgba(0, 0, 0, 0.8);
+      border-bottom: 6px solid currentColor;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      visibility: hidden;
+      opacity: 0.9;
+      z-index: 9999;
+    }
+    &:hover,
+    &.activity {
+      color: #333;
+      background-color: #e6e6e6;
+      border-color: #e6e6e6;
+    }
+    &:hover:after,
+    &:hover:before {
+      visibility: visible;
+    }
+    &.activity + .dropmenu {
+      display: block;
+    }
   }
 }
 </style>
 <style>
-.freeleaps-editor blockquote { padding: 10px 20px; font-size: 17.5px; border-left: 5px solid #f86466; background: white; }
-.freeleaps-editor pre { display: block; padding: 9.5px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; }
-.editor-body blockquote { margin-bottom: 30px; }
-.editor-body pre { margin-bottom: 10px; }
-.editor-body ul { padding-left: 40px; list-style-type: disc; }
-.editor-body ol { padding-left: 40px; }
-</style>
\ No newline at end of file
+.freeleaps-editor blockquote {
+  padding: 10px 20px;
+  font-size: 17.5px;
+  border-left: 5px solid #f86466;
+  background: white;
+}
+.freeleaps-editor pre {
+  display: block;
+  padding: 9.5px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.editor-body blockquote {
+  margin-bottom: 30px;
+}
+.editor-body pre {
+  margin-bottom: 10px;
+}
+.editor-body ul {
+  padding-left: 40px;
+  list-style-type: disc;
+}
+.editor-body ol {
+  padding-left: 40px;
+}
+</style>
diff --git a/frontend/src/components/InputSelector.vue b/frontend/src/components/InputSelector.vue
index 157f815..1ed6310 100644
--- a/frontend/src/components/InputSelector.vue
+++ b/frontend/src/components/InputSelector.vue
@@ -1,20 +1,31 @@
 <template>
   <div class="input-selector-container">
-    <div class="input-selector-btn" data-bs-toggle="dropdown" aria-expanded="false" id="input-selector-btn">
-        <span>{{selected || ''}}</span>
-        <svg-icon icon="dropdown" class-name="selector-dropdown-icon" />
+    <div
+      class="input-selector-btn"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      id="input-selector-btn"
+    >
+      <span>{{ selected || '' }}</span>
+      <svg-icon icon="dropdown" class-name="selector-dropdown-icon" />
     </div>
     <ul class="dropdown-menu" aria-labelledby="input-selector-btn">
-        <li>
-            <button v-if="!inputing" class="btn btn-link dropdown-new" @click="newAction">+ NEW</button>
-            <div v-if="inputing" class="dropdown-new-input-container">
-                <input type="text" v-model="newval" @keyup.enter="newItemAction">
-                <svg-icon v-if="newval" icon="msg-enter" class-name="dropdown-new-input-icon" />
-            </div>
-        </li>
-        <li v-for="item in selectList" :key="item">
-            <button class="btn btn-link" @click="selectItem(item)" :class="item==selected ? 'active' : ''">{{item}}</button>
-        </li>
+      <li>
+        <button v-if="!inputing" class="btn btn-link dropdown-new" @click="newAction">+ NEW</button>
+        <div v-if="inputing" class="dropdown-new-input-container">
+          <input type="text" v-model="newval" @keyup.enter="newItemAction" />
+          <svg-icon v-if="newval" icon="msg-enter" class-name="dropdown-new-input-icon" />
+        </div>
+      </li>
+      <li v-for="item in selectList" :key="item">
+        <button
+          class="btn btn-link"
+          @click="selectItem(item)"
+          :class="item == selected ? 'active' : ''"
+        >
+          {{ item }}
+        </button>
+      </li>
     </ul>
   </div>
 </template>
@@ -25,46 +36,70 @@ export default {
   name: 'InputSelector',
   props: {
     selectList: {
-        type: Array,
-        default: () => []
+      type: Array,
+      default: () => []
     },
     selected: {
-        type: String,
-        default: ''
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
-        inputing: true,
-        newval: ''
+      inputing: true,
+      newval: ''
     }
   },
-  mounted() { },
-  components: {SvgIcon},
+  mounted() {},
+  components: { SvgIcon },
   methods: {
     newAction($event) {
-        $event.stopPropagation()
-        this.newval = ''
-        this.inputing = true
+      $event.stopPropagation()
+      this.newval = ''
+      this.inputing = true
     },
     selectItem(item) {
-        this.$emit('selectedChange', {selected: item, isNew: false})
+      this.$emit('selectedChange', { selected: item, isNew: false })
     },
     newItemAction() {
-        if (!this.newval) return
-        this.$emit('selectedChange', {selected: this.newval, isNew: this.selectList.indexOf(this.newval) === -1})
-        this.newval = ''
-        this.inputing = false
+      if (!this.newval) return
+      this.$emit('selectedChange', {
+        selected: this.newval,
+        isNew: this.selectList.indexOf(this.newval) === -1
+      })
+      this.newval = ''
+      this.inputing = false
     }
   }
 }
 </script>
 
 <style lang="scss">
-.input-selector-container {width: fit-content; height: fit-content; position: relative;
-    .input-selector-btn {width: 153px; height: 30px; display: flex; align-items: center; overflow: hidden; cursor: pointer; border: 1px solid #E7E8EB; border-radius: 3px; padding: 0 3px 0 5px;
-        >span {font-size: 18px; font-weight: 500; color: #242424; flex: 1; text-align: left;}
-        .selector-dropdown-icon {color: #242424; padding: 3px;}
+.input-selector-container {
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  .input-selector-btn {
+    width: 153px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid #e7e8eb;
+    border-radius: 3px;
+    padding: 0 3px 0 5px;
+    > span {
+      font-size: 18px;
+      font-weight: 500;
+      color: #242424;
+      flex: 1;
+      text-align: left;
     }
+    .selector-dropdown-icon {
+      color: #242424;
+      padding: 3px;
+    }
+  }
 }
 </style>
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
index 117e4c1..95b640d 100644
--- a/frontend/src/components/PDFReader.vue
+++ b/frontend/src/components/PDFReader.vue
@@ -1,16 +1,16 @@
 <template>
   <div id="pdf-container" class="pdf-container">
-      <canvas id="theCanvas"></canvas>
-      <div class="oprate">
-          <button class="btn btn-link" @click="prev">prev</button>
-          <span> {{ currentPage }} / {{ numPages }} </span>
-          <button class="btn btn-link" @click="next">next</button>
-      </div>
+    <canvas id="theCanvas"></canvas>
+    <div class="oprate">
+      <button class="btn btn-link" @click="prev">prev</button>
+      <span> {{ currentPage }} / {{ numPages }} </span>
+      <button class="btn btn-link" @click="next">next</button>
+    </div>
   </div>
 </template>
 
 <script>
-import * as PDFJS from "pdfjs-dist/build/pdf"
+import * as PDFJS from 'pdfjs-dist/build/pdf'
 import { WorksapceApi } from '@/utils/index'
 PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker.entry')
 
@@ -31,51 +31,57 @@ export default {
     this.renderPDF()
   },
   methods: {
-    renderPage (num) {
-      const canvas = document.getElementById("theCanvas");
-      const context = canvas.getContext("2d");
-      const scale = 1.5;
+    renderPage(num) {
+      const canvas = document.getElementById('theCanvas')
+      const context = canvas.getContext('2d')
+      const scale = 1.5
       this.loadingTask.promise.then((pdf) => {
-          pdf.getPage(num).then((page) => {
-              const viewport = page.getViewport({ scale });
-              canvas.height = viewport.height;
-              canvas.width = viewport.width;
-              const renderContext = {
-                  canvasContext: context,
-                  viewport: viewport,
-              };
-              page.render(renderContext);
-          });
-      });
+        pdf.getPage(num).then((page) => {
+          const viewport = page.getViewport({ scale })
+          canvas.height = viewport.height
+          canvas.width = viewport.width
+          const renderContext = {
+            canvasContext: context,
+            viewport: viewport
+          }
+          page.render(renderContext)
+        })
+      })
     },
     async renderPDF() {
-        const response = await WorksapceApi.fetchAttachedFileAsMediaData("66673218fa83335c3b1b11ec", "6667321afa83335c3b1b11ee")
-        this.loadingTask = PDFJS.getDocument({url: response.data});
-        this.loadingTask.promise.then((pdf) => {
-            this.numPages = pdf.numPages;
-            this.renderPage(1);
-        });
+      const response = await WorksapceApi.fetchAttachedFileAsMediaData(
+        '66673218fa83335c3b1b11ec',
+        '6667321afa83335c3b1b11ee'
+      )
+      this.loadingTask = PDFJS.getDocument({ url: response.data })
+      this.loadingTask.promise.then((pdf) => {
+        this.numPages = pdf.numPages
+        this.renderPage(1)
+      })
     },
     prev() {
-        if (this.currentPage > 1) {
-            this.currentPage--;
-            this.renderPage(this.currentPage);
-        }
+      if (this.currentPage > 1) {
+        this.currentPage--
+        this.renderPage(this.currentPage)
+      }
     },
     next() {
-        if (this.currentPage < this.numPages) {
-            this.currentPage++;
-            this.renderPage(this.currentPage);
-        }
+      if (this.currentPage < this.numPages) {
+        this.currentPage++
+        this.renderPage(this.currentPage)
+      }
     }
-
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.pdf-container{position: relative;
-  .operate{position: absolute; right: 0; top: 0; }
+.pdf-container {
+  position: relative;
+  .operate {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
 </style>
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 73d5dec..898175b 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -1,23 +1,43 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div class="information-bar" @click="gotoMessages" :class="activePath == 'message'?'active':''">
+      <div
+        class="information-bar"
+        @click="gotoMessages"
+        :class="activePath == 'message' ? 'active' : ''"
+      >
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button class="navigation-item" @click="gotoWorkspace" :class="activePath == 'Workspace'?'active':''">
+        <button
+          class="navigation-item"
+          @click="gotoWorkspace"
+          :class="activePath == 'Workspace' ? 'active' : ''"
+        >
           <svg-icon icon="workspace" class-name="icon" />
           Workspace
         </button>
-        <button class="navigation-item" @click="gotoRequests" :class="activePath == 'Requests'?'active':''">
+        <button
+          class="navigation-item"
+          @click="gotoRequests"
+          :class="activePath == 'Requests' ? 'active' : ''"
+        >
           <svg-icon icon="requests" class-name="icon" />
           Requests
         </button>
-        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers'?'active':''">
+        <button
+          class="navigation-item"
+          @click="gotoProviders"
+          :class="activePath == 'Providers' ? 'active' : ''"
+        >
           <svg-icon icon="providers" class-name="icon" />
           Providers
         </button>
-        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post'?'active':''">
+        <button
+          class="navigation-item"
+          @click="gotoIssueRequest"
+          :class="activePath == 'Post' ? 'active' : ''"
+        >
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
@@ -163,7 +183,9 @@ export default {
     top: 0;
     background-color: #f44837;
   }
-  &.active {border: 1px solid $primary;}
+  &.active {
+    border: 1px solid $primary;
+  }
 }
 
 .profile-container {
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index dea182f..70bc5e2 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -56,9 +56,7 @@ export default {
         return
       }
 
-      this.message = applicantValidator.emailValidator.validate(
-        this.email
-      );
+      this.message = applicantValidator.emailValidator.validate(this.email)
 
       if (this.message != null) return
 
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index 9a4555c..34df154 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -52,4 +52,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 // .pdf-viewer {height: $body-height;}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 20a0da0..15b8c89 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="message-container">
     <div class="message-hub-conainter">
-      <div v-if="conversations && conversations.length>0" class="conversation-list-container">
-        <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" @click="selectConversation(conversation)">
+      <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
+        <div
+          v-for="(conversation, index) in conversations"
+          :key="index"
+          class="conversation-container"
+          @click="selectConversation(conversation)"
+        >
           <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
           <div class="conversation-summary-container">
             <div class="conversation-summary-header-container">
@@ -10,33 +15,58 @@
                 {{ conversation.summary.contact.first_name }}
                 {{ conversation.summary.contact.last_name }}
               </span>
-              <span class="conversation-last-update-date">{{ getDateFromFulltimeString(conversation.summary.last_message.create_time) }}</span>
+              <span class="conversation-last-update-date">{{
+                getDateFromFulltimeString(conversation.summary.last_message.create_time)
+              }}</span>
+            </div>
+            <div class="conversation-summary-highlight-container">
+              {{ conversation.summary.last_message.message_body }}
             </div>
-            <div class="conversation-summary-highlight-container">{{ conversation.summary.last_message.message_body }}</div>
           </div>
         </div>
       </div>
-      <div v-if="!conversations || conversations.length==0" class="conversation-list-empty-container">
+      <div
+        v-if="!conversations || conversations.length == 0"
+        class="conversation-list-empty-container"
+      >
         Empty conversation
       </div>
       <div class="message-panel-container">
         <div v-if="current_thread" class="message-thread-container">
-          <div v-for="(item, index) in current_thread.conversation.messages" :key="index" class="message-item-container" :class="item.sender_profile.me ? 'me': ''">
+          <div
+            v-for="(item, index) in current_thread.conversation.messages"
+            :key="index"
+            class="message-item-container"
+            :class="item.sender_profile.me ? 'me' : ''"
+          >
             <div class="message-item-header-container">
-              <img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
+              <img
+                class="message-item-sender-portrait"
+                alt="user portrait"
+                src="@/assets/profile.png"
+              />
               <span class="message-item-sender-fullname">
                 {{ item.sender_profile.first_name }}
                 {{ item.sender_profile.last_name }}
               </span>
-              <span class="message-item-create-time"> {{ getDateFromFulltimeString(item.raw_data.create_time) }}</span>
+              <span class="message-item-create-time">
+                {{ getDateFromFulltimeString(item.raw_data.create_time) }}</span
+              >
             </div>
             <div class="message-item-message-body">{{ item.raw_data.message_body }}</div>
           </div>
         </div>
-        <div v-if="!current_thread" class="message-thread-empty-container">Please choose conversation</div>
+        <div v-if="!current_thread" class="message-thread-empty-container">
+          Please choose conversation
+        </div>
         <div class="message-writing-panel-container">
           <svg-icon icon="msg-enter" class-name="writing-message-enter" />
-          <input class="writing-message-input" type="text" v-model="writtenMessage" @keypress.enter="sendMessage(current_thread.conversation.information.conversation_id)" />
+          <input
+            class="writing-message-input"
+            type="text"
+            v-model="writtenMessage"
+            @keypress.enter="sendMessage(current_thread.conversation.information.conversation_id)"
+          />
         </div>
       </div>
     </div>
@@ -101,43 +131,196 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.message-container { display: flex; align-items: center; width: 100%; height: $body-height; padding: 24px 24px 0 24px; justify-content: center;
-  .message-hub-conainter { display: flex; box-shadow: 0px 0px 24px 0px #D4D3E380; border-radius: 12px; width: 100%; max-width: $body-width; height: 100%; overflow: hidden;
-    .conversation-list-container {height: 100%; overflow: auto; width: 300px;
-      .conversation-container {background-color: #F3F3F5; display: flex; cursor: pointer; height: 98px; padding: 18px;
-        .participant-portrait {width: 36px; height: 36px; border-radius: 18px; margin-right: 16px;}
-        .conversation-summary-container {display: flex; flex-direction: column; flex: 1; overflow: hidden;
-          .conversation-summary-header-container {display: flex; align-items: center; height: 22px; color: #0D1637;
-            .participant-fullname {font-weight: 500; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
-            .conversation-last-update-date {white-space: nowrap; flex-shrink: 0;}
-          }
-          .conversation-summary-highlight-container {font-size: 14px; color: #6E7387; white-space: normal; overflow: hidden; flex: 1; text-align: left; word-break: break-word}
+.message-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $body-height;
+  padding: 24px 24px 0 24px;
+  justify-content: center;
+  .message-hub-conainter {
+    display: flex;
+    box-shadow: 0px 0px 24px 0px #d4d3e380;
+    border-radius: 12px;
+    width: 100%;
+    max-width: $body-width;
+    height: 100%;
+    overflow: hidden;
+    .conversation-list-container {
+      height: 100%;
+      overflow: auto;
+      width: 300px;
+      .conversation-container {
+        background-color: #f3f3f5;
+        display: flex;
+        cursor: pointer;
+        height: 98px;
+        padding: 18px;
+        .participant-portrait {
+          width: 36px;
+          height: 36px;
+          border-radius: 18px;
+          margin-right: 16px;
+        }
+        .conversation-summary-container {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow: hidden;
+          .conversation-summary-header-container {
+            display: flex;
+            align-items: center;
+            height: 22px;
+            color: #0d1637;
+            .participant-fullname {
+              font-weight: 500;
+              flex: 1;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .conversation-last-update-date {
+              white-space: nowrap;
+              flex-shrink: 0;
+            }
+          }
+          .conversation-summary-highlight-container {
+            font-size: 14px;
+            color: #6e7387;
+            white-space: normal;
+            overflow: hidden;
+            flex: 1;
+            text-align: left;
+            word-break: break-word;
+          }
+        }
+        &:hover {
+          opacity: 0.78;
+        }
+        &.selected {
+          background-color: transparent;
         }
-        &:hover {opacity: .78;}
-        &.selected {background-color: transparent;}
       }
     }
-    .conversation-list-empty-container {height: 100%; overflow: auto; width: 300px; background-color: #F3F3F5; display: flex; align-items: center; justify-content: center;}
-    .message-panel-container {height: 100%; overflow: auto; flex: 1; padding-bottom: 98px; position: relative;
-      .message-thread-container {height: 100%; overflow: auto; padding: 20px 32px; display: flex; flex-direction: column;
-        .message-item-container {max-width: 70%; margin-bottom: 15px; width: fit-content; display: flex; flex-direction: column;
-          .message-item-header-container {display: flex; align-items: center; margin-bottom: 6px; width: 100%; overflow: hidden; font-size: 18px; width: fit-content; max-width: 100%;
-            .message-item-sender-portrait {width: 36px; height: 36px; border-radius: 18px; }
-            .message-item-sender-fullname {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #16181E; font-weight: 500; margin: 0 7px; }
-            .message-item-create-time {color: #737478; white-space: nowrap; flex-shrink: 0; font-size: 16px; }
+    .conversation-list-empty-container {
+      height: 100%;
+      overflow: auto;
+      width: 300px;
+      background-color: #f3f3f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .message-panel-container {
+      height: 100%;
+      overflow: auto;
+      flex: 1;
+      padding-bottom: 98px;
+      position: relative;
+      .message-thread-container {
+        height: 100%;
+        overflow: auto;
+        padding: 20px 32px;
+        display: flex;
+        flex-direction: column;
+        .message-item-container {
+          max-width: 70%;
+          margin-bottom: 15px;
+          width: fit-content;
+          display: flex;
+          flex-direction: column;
+          .message-item-header-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 6px;
+            width: 100%;
+            overflow: hidden;
+            font-size: 18px;
+            width: fit-content;
+            max-width: 100%;
+            .message-item-sender-portrait {
+              width: 36px;
+              height: 36px;
+              border-radius: 18px;
+            }
+            .message-item-sender-fullname {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              color: #16181e;
+              font-weight: 500;
+              margin: 0 7px;
+            }
+            .message-item-create-time {
+              color: #737478;
+              white-space: nowrap;
+              flex-shrink: 0;
+              font-size: 16px;
+            }
+          }
+          .message-item-message-body {
+            font-size: 14px;
+            line-height: 17px;
+            color: #0d1637;
+            background-color: #f3f3f5;
+            padding: 12px;
+            border-radius: 12px;
+            overflow: hidden;
+            width: fit-content;
+            max-width: 100%;
+            text-align: left;
+            word-break: break-word;
           }
-          .message-item-message-body {font-size: 14px; line-height: 17px; color: #0D1637; background-color: #F3F3F5; padding: 12px; border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%; text-align: left; word-break: break-word}
 
-          &.me {align-self: flex-end;
-            .message-item-header-container {flex-direction: row-reverse; align-self: flex-end;}
-            .message-item-message-body {background-color: $primary; color: white; align-self: flex-end;}
+          &.me {
+            align-self: flex-end;
+            .message-item-header-container {
+              flex-direction: row-reverse;
+              align-self: flex-end;
+            }
+            .message-item-message-body {
+              background-color: $primary;
+              color: white;
+              align-self: flex-end;
+            }
           }
         }
       }
-      .message-thread-empty-container {height: 100%; overflow: auto; padding: 20px 32px; display: flex; align-items: center; justify-content: center;}
-      .message-writing-panel-container {height: 98px; padding: 24px; background-color: white; position: absolute; bottom: 0; left: 0; width: 100%;
-        .writing-message-enter {position: absolute; height: 24px; width: 24px; background-color: #F3F3F5; padding: 7px; color: #9EA2AF; top: 37px; right: 37px; border-radius: 7px;}
-        .writing-message-input {height: 50px; border: 1px solid #E1E1E1; box-shadow: none; width: 100%; padding: 0 48px 0 12px; border-radius: 12px;}
+      .message-thread-empty-container {
+        height: 100%;
+        overflow: auto;
+        padding: 20px 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .message-writing-panel-container {
+        height: 98px;
+        padding: 24px;
+        background-color: white;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        .writing-message-enter {
+          position: absolute;
+          height: 24px;
+          width: 24px;
+          background-color: #f3f3f5;
+          padding: 7px;
+          color: #9ea2af;
+          top: 37px;
+          right: 37px;
+          border-radius: 7px;
+        }
+        .writing-message-input {
+          height: 50px;
+          border: 1px solid #e1e1e1;
+          box-shadow: none;
+          width: 100%;
+          padding: 0 48px 0 12px;
+          border-radius: 12px;
+        }
       }
     }
   }
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index ce1104c..ac2d078 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -1,22 +1,43 @@
 <template>
   <div class="request-hub">
-    <div v-for="(group, index) in requestGroups" :key="index" class="request-invitations" :id="group.name">
+    <div
+      v-for="(group, index) in requestGroups"
+      :key="index"
+      class="request-invitations"
+      :id="group.name"
+    >
       <div v-if="group.data" class="accordion" id="request-invitation-container">
-        <div v-for="(request, index) in group.data" :key="index" :id="request.id" class="accordion-item my-3">
+        <div
+          v-for="(request, index) in group.data"
+          :key="index"
+          :id="request.id"
+          class="accordion-item my-3"
+        >
           <h2 class="accordion-header">
-            <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"
+            >
               <div class="request-content-container">
                 <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box">Issuer</label>
+                  <label class="request-content-label" for="request-content-issuer-box"
+                    >Issuer</label
+                  >
                   <div class="request-content-box" id="request-content-issuer-box">
                     <span class="request-content-issuer-text">
                       {{ request.issuer_profile.first_name }}
-                      {{ request.issuer_profile.last_name }}</span>
+                      {{ request.issuer_profile.last_name }}</span
+                    >
                   </div>
                 </div>
                 <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box">Request</label>
+                  <label class="request-content-label" for="request-content-title-box"
+                    >Request</label
+                  >
                   <div class="request-content-box" id="request-content-title-box">
                     <span class="request-content-title-text"> {{ request.title }}</span>
                   </div>
@@ -40,8 +61,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse' + index" class="accordion-collapse collapse"
-            data-bs-parent="#request-invitation-container">
+          <div
+            :id="'collapse' + index"
+            class="accordion-collapse collapse"
+            data-bs-parent="#request-invitation-container"
+          >
             <div class="accordion-body">
               <div class="request-description-container">
                 <button class="make-proposal-button" type="button" @click="Propose(request)">
@@ -49,51 +73,95 @@
                 </button>
                 <div class="request-description-content" v-html="request.content"></div>
                 <div v-for="(file, index) in request.attached_files" :key="index">
-                  <button @click="previewAttachedFile(request.id, file.document_id)">Preview{{ file.file_name }}</button>
-                  <button @click="downloadAttachedFile(request.id, file.document_id)">Download{{ file.file_name }}</button>
+                  <button @click="previewAttachedFile(request.id, file.document_id)">
+                    Preview{{ file.file_name }}
+                  </button>
+                  <button @click="downloadAttachedFile(request.id, file.document_id)">
+                    Download{{ file.file_name }}
+                  </button>
                 </div>
               </div>
               <div class="issuer-profile-container">
-                <label class="issuer-profile-label" for="issuer-achievement-container">Issuer profile</label>
+                <label class="issuer-profile-label" for="issuer-achievement-container"
+                  >Issuer profile</label
+                >
                 <div class="issuer-achievement-container" id="issuer-achievement-container">
                   <div class="issuer-achievement-isssuer-container">
-                    <label class="issuer-achievement-label" for="issuer-achievement-isssuer-content-div">Name</label>
-                    <div class="issuer-achievement-content-container" id="issuer-achievement-isssuer-content-div">
+                    <label
+                      class="issuer-achievement-label"
+                      for="issuer-achievement-isssuer-content-div"
+                      >Name</label
+                    >
+                    <div
+                      class="issuer-achievement-content-container"
+                      id="issuer-achievement-isssuer-content-div"
+                    >
                       <span class="issuer-achievement-issuer-text">
                         {{ request.issuer_profile.first_name }}
-                        {{ request.issuer_profile.last_name }}</span>
+                        {{ request.issuer_profile.last_name }}</span
+                      >
                     </div>
                   </div>
                   <div class="issuer-achievement-stay-container">
-                    <label class="issuer-achievement-label" for="issuer-achievement-stay-content-div">Stay on
-                      Freeleaps</label>
-                    <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
+                    <label
+                      class="issuer-achievement-label"
+                      for="issuer-achievement-stay-content-div"
+                      >Stay on Freeleaps</label
+                    >
+                    <div
+                      class="issuer-achievement-content-container"
+                      id="issuer-achievement-stay-content-div"
+                    >
                       <span class="issuer-achievement-stay-content-text">
-                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span>
+                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
+                      >
                     </div>
                   </div>
                   <div class="issuer-achievement-paid-container">
-                    <label class="issuer-achievement-label" for="issuer-achievement-paid-content-div">Total
-                      payment</label>
-                    <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
+                    <label
+                      class="issuer-achievement-label"
+                      for="issuer-achievement-paid-content-div"
+                      >Total payment</label
+                    >
+                    <div
+                      class="issuer-achievement-content-container"
+                      id="issuer-achievement-stay-content-div"
+                    >
                       <span class="issuer-achievement-paid-content-text">
                         {{ request.issuer_achievement.issuer.spending.total }}
-                        {{ request.issuer_achievement.issuer.spending.currency }}</span>
+                        {{ request.issuer_achievement.issuer.spending.currency }}</span
+                      >
                     </div>
                   </div>
                   <div class="issuer-achievement-deposit-container">
-                    <label class="issuer-achievement-label" for="issuer-achievement-deposit-content-div">Deposit</label>
-                    <div class="issuer-achievement-content-container" id="issuer-achievement-deposit-content-div">
+                    <label
+                      class="issuer-achievement-label"
+                      for="issuer-achievement-deposit-content-div"
+                      >Deposit</label
+                    >
+                    <div
+                      class="issuer-achievement-content-container"
+                      id="issuer-achievement-deposit-content-div"
+                    >
                       <span class="issuer-achievement-deposit-content-text">
                         {{ request.issuer_achievement.issuer.deposit.available }}
-                        {{ request.issuer_achievement.issuer.deposit.currency }}</span>
+                        {{ request.issuer_achievement.issuer.deposit.currency }}</span
+                      >
                     </div>
                   </div>
                   <div class="issuer-achievement-credit-container">
-                    <label class="issuer-achievement-label" for="issuer-achievement-credit-content-div">Credit</label>
-                    <div class="issuer-achievement-content-container" id="issuer-achievement-credit-content-div">
+                    <label
+                      class="issuer-achievement-label"
+                      for="issuer-achievement-credit-content-div"
+                      >Credit</label
+                    >
+                    <div
+                      class="issuer-achievement-content-container"
+                      id="issuer-achievement-credit-content-div"
+                    >
                       <span class="issuer-achievement-credit-content-text">
-                        {{ request.issuer_achievement.activeness.credit }}</span>
+                        {{ request.issuer_achievement.activeness.credit }}</span
+                      >
                     </div>
                   </div>
                 </div>
@@ -140,36 +208,36 @@ export default {
       return DateUtils.FromJsonToDateString(fulltime)
     },
     previewAttachedFile(request_id, document_id) {
-      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
-        let media_data = response.data
-        console.log(media_data)
-        //TODO: navigate to the preview page
-      }).catch((error) => {
-        this.mnx_backendErrorHandler(error)
-      }
-      )
+      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
+        .then((response) => {
+          let media_data = response.data
+          console.log(media_data)
+          //TODO: navigate to the preview page
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     },
     downloadAttachedFile(request_id, document_id) {
-      WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id).then(response => {
-        // create file link in browser's memory
-        const href = URL.createObjectURL(response.data);
-
-        // create "a" HTML element with href to file & click
-        const link = document.createElement('a');
-        link.href = href;
-        link.setAttribute('download', 'file.pdf'); //or any other extension
-        document.body.appendChild(link);
-        link.click();
-
-        // clean up "a" element & remove ObjectURL
-        document.body.removeChild(link);
-        URL.revokeObjectURL(href);        //TODO: navigate to the preview page
-      }).catch((error) => {
-        this.mnx_backendErrorHandler(error)
-      }
-      )
+      WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
+        .then((response) => {
+          // create file link in browser's memory
+          const href = URL.createObjectURL(response.data)
 
+          // create "a" HTML element with href to file & click
+          const link = document.createElement('a')
+          link.href = href
+          link.setAttribute('download', 'file.pdf') //or any other extension
+          document.body.appendChild(link)
+          link.click()
 
+          // clean up "a" element & remove ObjectURL
+          document.body.removeChild(link)
+          URL.revokeObjectURL(href) //TODO: navigate to the preview page
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     }
   }
 }
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 80f8637..bc7e1c5 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -911,24 +911,48 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.workspace-container {width: 100%; display: flex; align-items: center; justify-content: center}
+.workspace-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 .workspace-header {
   @extend .flex-row-container;
   @extend .justify-content-end;
 }
 
-.workspace-body {width: 100%; max-width: $body-width; padding: 24px 0;
-  .accordion {box-shadow: 0px 0px 24px 0px #D4D3E380; border: none; border-radius: 12px; margin-bottom: 16px;
-    .accordion-item {border: none;
-      .accordion-header {border: none;
-        .accordion-button {box-shadow: none; padding: 12px}
+.workspace-body {
+  width: 100%;
+  max-width: $body-width;
+  padding: 24px 0;
+  .accordion {
+    box-shadow: 0px 0px 24px 0px #d4d3e380;
+    border: none;
+    border-radius: 12px;
+    margin-bottom: 16px;
+    .accordion-item {
+      border: none;
+      .accordion-header {
+        border: none;
+        .accordion-button {
+          box-shadow: none;
+          padding: 12px;
+        }
       }
     }
   }
 }
 
-.workspace-item-bar {display: flex; align-items: center; margin: 0 24px 0 0; border: 1px dashed #AEBFFD; border-radius: 3px; flex: 1}
+.workspace-item-bar {
+  display: flex;
+  align-items: center;
+  margin: 0 24px 0 0;
+  border: 1px dashed #aebffd;
+  border-radius: 3px;
+  flex: 1;
+}
 
 .workspace-item-bar-left {
   @extend .flex-row-container;
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 8fea9cc..5dc582c 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -105,14 +105,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">Upload file</span>
-          <span v-if="uploadFile">{{uploadFile.name}}</span>
-          <input type="file" hidden @change="handleFileUpload"/>
+          <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
@@ -176,7 +185,7 @@ export default {
       type: String
     }
   },
-  components: {FreeleapsEditor, InputSelector, SvgIcon },
+  components: { FreeleapsEditor, InputSelector, SvgIcon },
   mounted() {
     this.initProducts()
     this.initiateFromInput()
@@ -208,7 +217,7 @@ export default {
     initProducts() {
       WorksapceApi.fetchProducts()
         .then((response) => {
-          this.products = (response.data || []).map(p => p.name)
+          this.products = (response.data || []).map((p) => p.name)
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -325,9 +334,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.upload-contianer {display: flex; align-items: center;}
-.delete-icon {color: $primary; cursor: pointer;
-  &:hover {opacity: .78;}
+.upload-contianer {
+  display: flex;
+  align-items: center;
+}
+.delete-icon {
+  color: $primary;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.78;
+  }
 }
 .request-issue-container {
   @extend .flex-colum-container;
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 69b3770..7b68374 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -311,15 +311,12 @@ class WorksapceApi {
     formData.append('request_id', request_id)
     formData.append('file', file)
 
-    const request = backendAxios.post(
-      '/api/workspace/request/attach-file-for-request',
-      formData,
-      {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          Authorization: `Bearer ${jwt}`
-        }
-      })
+    const request = backendAxios.post('/api/workspace/request/attach-file-for-request', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: `Bearer ${jwt}`
+      }
+    })
     return request
   }
   static fetchAttachedFileAsMediaData(request_id, document_id) {
@@ -335,23 +332,18 @@ class WorksapceApi {
       }
     )
     return request
-
   }
   static fetchAttachedFileAsDownload(request_id, document_id) {
     let jwt = userUtils.getJwtToken()
-    const request = backendAxios.get(
-      '/api/workspace/request/fetch-attached-file-as-download',
-      {
-        params: {
-          request_id: request_id,
-          document_id: document_id,
-        },
-        responseType: 'blob',
-        headers: { Authorization: `Bearer ${jwt}` }
-      }
-    )
+    const request = backendAxios.get('/api/workspace/request/fetch-attached-file-as-download', {
+      params: {
+        request_id: request_id,
+        document_id: document_id
+      },
+      responseType: 'blob',
+      headers: { Authorization: `Bearer ${jwt}` }
+    })
     return request
-
   }
 }
 

From ef7890f6af49ac7e9c3f636c6431c9c442f3eea7 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Mon, 10 Jun 2024 22:37:50 -0700
Subject: [PATCH 05/17] change the Chinese to English

---
 frontend/src/components/FreeleapsEditor.vue | 52 ++++++++++-----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index 861e44d..713e7f5 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -16,7 +16,7 @@
         <div class="dropmenu drop-style" v-if="item.type === 'style'">
           <ul>
             <li>
-              <a href="#" @click="iconClick($event, 'p', 'style')"><p>正文</p></a>
+              <a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a>
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
@@ -27,22 +27,22 @@
               >
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>标题一</h1></a>
+              <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>标题二</h2></a>
+              <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>Caption 2</h2></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>标题三</h3></a>
+              <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>Caption 3</h3></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>标题四</h4></a>
+              <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>Caption 4</h4></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>标题五</h5></a>
+              <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>Caption 5</h5></a>
             </li>
             <li>
-              <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>标题六</h6></a>
+              <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
             </li>
           </ul>
         </div>
@@ -51,25 +51,25 @@
             <li>
               <a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
                 <i class="iconfont icon-aligncenter"></i>
-                <span>居中</span>
+                <span>middle</span>
               </a>
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
                 <i class="iconfont icon-alignleft"></i>
-                <span>左对齐</span>
+                <span>left aligned</span>
               </a>
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
                 <i class="iconfont icon-alignright"></i>
-                <span>右对齐</span>
+                <span>right aligned</span>
               </a>
             </li>
             <li>
               <a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
                 <i class="iconfont icon-alignjustify"></i>
-                <span>默认对齐</span>
+                <span>default aligned</span>
               </a>
             </li>
           </ul>
@@ -107,15 +107,15 @@ export default {
       selectedRange: '',
       iconList: [
         // {
-        //   name: '标签', // hover名字
-        //   type: 'style', // 点击事件处理
-        //   icon: 'fe-paragraph', // 图标样式
-        //   drop: true, // 是否有下拉菜单
-        //   canChoose: true, // 是否被选中
+        //   name: 'lable', // hover name
+        //   type: 'style', // click event handler
+        //   icon: 'fe-paragraph', // icon style
+        //   drop: true, // If there is drop menu
+        //   canChoose: true, // chosen or not
         //   choose: false
         // },
         {
-          name: '粗体',
+          name: 'bold',
           type: 'bold',
           icon: 'fe-bold',
           drop: false,
@@ -123,7 +123,7 @@ export default {
           choose: false
         },
         {
-          name: '斜体',
+          name: 'italic',
           type: 'italic',
           icon: 'fe-italic',
           drop: false,
@@ -131,7 +131,7 @@ export default {
           choose: false
         },
         {
-          name: '下划线',
+          name: 'underline',
           type: 'underline',
           icon: 'fe-underline',
           drop: false,
@@ -139,7 +139,7 @@ export default {
           choose: false
         },
         // {
-        //   name: '删除线',
+        //   name: 'strike',
         //   type: 'strike',
         //   icon: 'fe-strike',
         //   drop: false,
@@ -147,7 +147,7 @@ export default {
         //   choose: false
         // },
         // {
-        //   name: '清除样式',
+        //   name: 'clear-format',
         //   type: 'clear',
         //   icon: 'fe-clear',
         //   drop: false,
@@ -155,7 +155,7 @@ export default {
         //   choose: false
         // },
         // {
-        //   name: '字体颜色',
+        //   name: 'font-color',
         //   type: 'fontFamily',
         //   icon: 'fe-char',
         //   drop: false,
@@ -163,7 +163,7 @@ export default {
         //   choose: false
         // },
         {
-          name: '无序列表',
+          name: 'unordered-list',
           type: 'unorderedlist',
           icon: 'fe-unorderedlist',
           drop: false,
@@ -171,7 +171,7 @@ export default {
           choose: false
         },
         {
-          name: '有序列表',
+          name: 'ordered list',
           type: 'orderedlist',
           icon: 'fe-orderedlist',
           drop: false,
@@ -179,7 +179,7 @@ export default {
           choose: false
         }
         // {
-        //   name: '对齐方式',
+        //   name: 'align-justify',
         //   type: 'alignjustify',
         //   icon: 'fe-alignjustify',
         //   drop: true,
@@ -228,7 +228,7 @@ export default {
       }
       return null
     },
-    // 改变选取的内容
+    // change the selection's style
     changeStyle(type) {
       switch (type) {
         case 'bold':

From 62c9ba04068b7a2066b69b806b3984c1eb2ae374 Mon Sep 17 00:00:00 2001
From: Jim Wang <jimwang@freeleaps.com>
Date: Tue, 11 Jun 2024 22:45:19 +0800
Subject: [PATCH 06/17] comment the code as it block the testing

---
 frontend/src/pages/guest/NewUserSetPassword.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 63d343e..bd00fff 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -67,7 +67,7 @@ export default {
         this.message = 'The two passwords are not matched'
         return
       }
-      this.message = applicantValidator.emailValidator.validate(this.password)
+      // this.message = applicantValidator.emailValidator.validate(this.password)
       // console.log('EmailValidator', EmailValidator)
       if (this.message != null) return
 

From 0140de1caab440e7da8f5f5de1b867cc4e9607e7 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Tue, 11 Jun 2024 13:36:08 -0700
Subject: [PATCH 07/17] use env variables to set the backend proxy API url and
 serve port

---
 frontend/vite.config.js | 116 +++++++++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 48 deletions(-)

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index dd7c5a5..3012747 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vue from '@vitejs/plugin-vue'
 
@@ -9,51 +9,71 @@ function resolve(dir) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    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'),
-    }
-  },
-  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';`
-      }
-    }
-  },
-  server: {
-    proxy: {
-      '^/api/': {
-        target: 'https://freeleaps-alpha.com',
-        ws: true,
-        changeOrigin: true
-      }
-    }
-  },
-  optimizeDeps: {
-    esbuildOptions: {
-      supported: {
-        "top-level-await": true
-      },
-    },
-  },
-  esbuild: {
-    supported: {
-      'top-level-await': true //browsers can handle top-level-await features
-    },
+export default defineConfig(({ command, mode }) => {
+  let API_URL = 'http://127.0.0.1:8001'
+  let PORT = '5173'
+
+  if (command === 'serve') {
+    // dev specific config
+    console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
+    const env = loadEnv(mode, process.cwd());
+    API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
+    PORT = `${env.VITE_PORT ?? '5173'}`;
+  } else {
+    // command === 'build'
+    // build specific config
   }
-})
+
+  console.log('backend api url: ' + API_URL)
+  console.log('server port: ' + PORT)
+  return {
+    plugins: [
+      vue(),
+      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'),
+      }
+    },
+    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';`
+        }
+      }
+    },
+    server: {
+      proxy: {
+        '^/api/': {
+          target: API_URL,
+          ws: true,
+          changeOrigin: true
+        }
+      },
+      port: PORT,
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        supported: {
+          "top-level-await": true
+        },
+      },
+    },
+    esbuild: {
+      supported: {
+        'top-level-await': true //browsers can handle top-level-await features
+      },
+    }
+  }
+}
+)

From b38f62799ac68c41b3a1164929449828d9f28142 Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Fri, 14 Jun 2024 04:22:48 +0800
Subject: [PATCH 08/17] update

---
 frontend/package.json                         |   4 +-
 frontend/src/assets/images/submited.png       | Bin 0 -> 4410 bytes
 frontend/src/assets/styles/buttons.scss       |  16 +-
 frontend/src/assets/styles/main.scss          |  38 ++
 frontend/src/components/FreeleapsEditor.vue   | 139 ++---
 frontend/src/components/PDFReader.vue         |  26 +-
 frontend/src/headers/HeaderUser.vue           |   1 -
 frontend/src/icons/btn-history.svg            |   1 +
 frontend/src/icons/btn-templates.svg          |   1 +
 frontend/src/mixins/navigator.js              |   4 +-
 .../src/pages/guest/NewUserSetPassword.vue    |   7 +-
 .../src/pages/public/PdfContentViewer.vue     |  44 +-
 frontend/src/pages/user/messages/Home.vue     |   8 +-
 frontend/src/pages/user/providers/Home.vue    | 541 +++++++++---------
 frontend/src/pages/user/requests/Home.vue     |  67 ++-
 frontend/src/pages/user/workspace/Home.vue    |  46 +-
 .../user/workspace/requestIssue/Issue.vue     |  39 +-
 .../user/workspace/requestIssue/Submitted.vue |  43 +-
 frontend/src/plugins/router/router.js         |   4 +-
 frontend/src/utils/common/dateUtils.js        |   9 +
 20 files changed, 565 insertions(+), 473 deletions(-)
 create mode 100644 frontend/src/assets/images/submited.png
 create mode 100644 frontend/src/icons/btn-history.svg
 create mode 100644 frontend/src/icons/btn-templates.svg

diff --git a/frontend/package.json b/frontend/package.json
index 8c60d9e..6911fa9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
     "buffer": "^6.0.3",
-    "pdfjs-dist": "3.5.141",
+    "pdfjs-dist": "^4.3.136",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
@@ -26,12 +26,12 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
+    "fast-glob": "^3.3.2",
     "prettier": "^3.0.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "vite": "^4.4.6",
     "vite-plugin-svg-icons": "^2.0.1",
-    "fast-glob": "^3.3.2",
     "webpack": "^5.88.2"
   }
 }
diff --git a/frontend/src/assets/images/submited.png b/frontend/src/assets/images/submited.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c098a93972ff400418db3b8443c6d0df908c013
GIT binary patch
literal 4410
zcmV-A5ykF_P)<h;3K|Lk000e1NJLTq006B30068A1^@s63G*!G00009a7bBm000XU
z000XU0RWnu7ytke>`6pHRCt{2onLHIcb3P$ziXRu96~OcER|XjyP^`2b_q$PR@&{P
z3K}7rmMY|Fw`y0tv=6f?TG75RD*FID46F8~pdD7-hYlABH2aoh%iwl+AZjL~l`0XJ
z=}I7#9Vcua%4WlLLu{AC_w0jXa1!76`uh6*J)akdeSLjE-<<nB=l4&5F-1JBq)IyE
zZ4&wkNC_b&%kNN%fK=r=QT6wA2xvsm1fT)X2tpG;mPpTmkkJLSco7+GRMlGlukkm+
z?Et)nJf_IY+mMPzFeE|R4^Te@QXt5V1R$V+kO4$ShdxV$OmSG9bmY5zLg+;+k1297
zj{b;{M%Dz{@0dUvV-gUV66q6R&&Z(^Z9J`{guoFAVg$gD+woXrQU^^CVZ1o3X59|P
zNkSvq*zcA87)c`_QVe~kf5`%3yhQr>FbFu%qLs%K`NuXWKF_F)k^#~A5-=H50S8jF
z@w74|Nz!ov8uF+=bqJxBNWT=cLM~9EZBHu-gm@d_$*N|_fav`4u&TNph#mM|wDOoD
zKT1f)1L{@nCJUl7eiyH=McelKcaKY?pANSLu!OJ0>r2sgTvLveB=HGn)~4~Lczq?>
zcv=~X2yqJRS?wlUB0AugZi6pGD~~DiN<umXqW9g7CD;hHMEV)8i`Vm_ZBHu-B=HIR
zR>$zXW$>(M<7p)o5#l1)3b=%Kv#uva+i^`fqDRC<&aSTG$*k)s(Xw~-C_<cz<@GaO
znOWu;(Z<tCN)qA*x3N5nXF3d$+W`PT`<L&&9g)Ng3)a)5B9fSCPb-Ssfw(T(#Fy`!
z0_iIIS06x-A;iVRm+zc%GYr@4fjp+jD{ayz04Z+8z*vVM#<vypqi*<IS46wk&Kd*I
z@5c8tw&9A;bzHPua0L#>h3lwjS+Ie{QQ<l!S{7{JaZI?5h?WH#8XOUB%SFqA4IM2P
zZc9bWf(<P#6>iH!%YqF(Efa1_M#SVXMP|W<o>WALF?md}eWbG`qJ5N*F0x=50R81r
zPkXUlw23d@IVFgW*nMBduaIK*Tm@S_?b>D;7wx<!6A%QH<wF-Q*>fwKh^LiQL=rPR
zTZ^fQfL79Jz>dPq7JE=ByjZY|Ap|)h#0@(NGh0Nvl8{bu;l-FBwUUsU_P0&j1NN~@
zqewc9F1@ObTm5`fqU8Yu#u82X+otS6M6fMjEKv5hmY>d+MO$9r#!F=w%M4jvBx%VW
zuq|M0K|qV;>DfltnOVxTYzr7$Ajnp_2@Pl3wMB`4ZuD~uV}u|&@UVe%AsWuKk`Ol<
z{S3ow1(o+4HcdmKZBHwFt^v~uhB~e(rYBi7B-%!QBN)akx+F|bVKgmT&azC4Nws~U
znA$DVv}ifYGOb1u;*^;QHKs(%S(b4Gg8V3sy4lv0XgSL=P9e%CZf;3k(Q=k`j=`P1
zNWX9b4-fqY|Ml|6c<bqx+z!bNQuT&+>t|Xaj@uOtV@$HG8|fEMV6dzA@z0;`dl$!&
z2VIWL1?ptmEkzqoD?{MzI33}`JtH+=e=m%p1%|elwO5lZMH>-PU4OyYL$d9sHD8xw
z35O%`2D*?8pYVpFji;3qPd#*wp0>ZJ`MS1}cQ_JnAOsB=wZ9BS8{tFennI2ykc@Ym
zzTPO)&J`By3dvs(<R9Ch)Ossw_#rO9Eb~$C8;=X9*}?*@%unO&-3i0%JEO)HAh%ku
zJwCr6L5u)6xB2xNl&t|5U{*M}XJlQ)pKR;K$>&BacL8R@nrX`n#eS!3(qT=}MnwHl
z38pr0K2y85`cdy280^|x^S#_^9#f0AYrc1DY0kFT{76i~rrBRLMN8$h%vfNnYX9E{
z{t?Nx+CKM}w|~3Izh0QVjw|!i#@`i9;N+eW{LjySjfaPRgHQkJ9mD(km0BZYn^rFH
z%7o@fzwl&$pcb=*1^ne#Cu+Xe)7Fi_uDwXcyD|0PHl`Nu)VxlPCh%VJAl^$IguKBI
z&lVQ&H-9{h+-h*T4yBlsD*pVl*~-t6jTglJzF!d#uQ(f4aF}{<2e0oMK&L^*m17B9
z{ofgU|6^{`d%4v-{<L%tQxEQ7uJC^~Ki}8UgKICI!0S&vkGK@8dH?&5a`-y;-_89)
zyo9dLu3pakXXVFD_CR85&=hlp1^nI2zigT5I-_lt?wxGw#<dqu)U^OxbtC-9Moq30
z?OHQ;$jN|$$gQP&_~q^2)_iZSuweMuugBqC1DotX&F_C0xZ-WyK*KuG7USIJvWv^}
z)0>2wTg~HdXMSz@o@O%W)Z%Si{eH&scX*Z6Ds8SCT!@Ix?FGg<7iO>H^ZPUC>)4IX
zSOQnSpJ}Q<ntE^>KyCMyTg~Ib>~);|&Ug^R&k*4VfJtD}h?v;#d^o{ouCQR+Q0&y=
z9h|*8fs<7;!YX3Dki8zLj=?6RC)!-s@@oI$C^;Vu(<p~`4WO^12ij^LSMSe+V}3%_
z7D|sr8&4}k5#ES{@i31{G_dlTnt5D^3Bg4e<87jma%bzYr<Fpy4or?F@Y=2cyxg@H
zJ!?JCTTAzFWqvyJWB*=40`>#z3bAk&VaJjO@!@kLoBE%FUA;J#Jc!Hlf51QA{g1HE
zw(<r-^aIs>+7Q}<lY2(+QSTdDHtgSe=4ZI}Lj6%F#t~A$TK7O6Q{<I4@xaw^9OkX3
zU&5#R-Zg!F5GSJeky1=bMS=22*ru5?0q4W#8k=H~Z0p9c<iRahAhe2Pyc>s~8bDvi
z?scB~UuUm}&bE|_rJYd#h!JGn)&obq&EZ`GmLB(mU3-DMEeL1>)rH~Dx_WEITJhW$
zX0IF0a|j~aB=koCpd`>ABF*CPuIDX%Zm_EtozaBt7D0|Cu&<*Bho2h2VAo#sb@Z72
z?6KrQ^mXjU@Yf&P8k1KcpllC>2+#4LozVo|GFTF0207Mdi)aUT_M&gcZXDh<fPFi9
zOwHahyjNE*PVO0T#kx3+5J*M=fFLCW!ZCvT`mO<2zPH+!zV_7fO^LJ?$5Lgh5Qajr
zoM}O!$+Sib56v=bu%cii6<^x7qsOv`ZiLQg0)0DnTb`@yA4IA$xDX1_CfmBVT)))}
z)xNZ^V|UBGXDgENZcHKQqFwW}1ju11#0GcPUczmbjgQ{Gjvfql?X|_1GUj<wh=st?
zHfs&El|0^j`X#*FwYMd{v{`10;po|x?EwYf9@t?Gl5O4iw+2ShoTQnxXFem<)G6eC
z;?02Xs{N}Fw7V*VN3=~^120o=Cz_yPylY~B7~ENVDAe!dR`WRf-2^VoUUxebM+t>!
zgOp_}o7H`_cn4SJr$aHAu#r%R)@ZjvKag9^<JJ#z`27A1{<Jg~mSSs5Dt+2)P>)^m
zqcym-CeEw(Z{pSu_d=OX4H3`+pK1Gc>~=eZy5v^#xcdD~eD&Z?(;IpO9tweIy}B7&
zZZ(fzeK&#M-M?viJ_7?lK$FUUBI|M}p`$aJz?J!F7Hp%?nrMk=w%)aV#mkS{!JqoK
zKy(Wt$_0LK!OQy=^ldl4LV+nG2-%8gvu*~`N~RX?csAP_ogKy)Lt*i>w|?+uw%xZQ
z>2?VIL&Dl#UOF-^htg86-uLDv!<=awN7C0aZApUWb}+5vbB~JFtL->16D_V~+TyU9
zg$S;2=L!q#YlDD*rj4rFlkNcp+t+>`z;g&f2bFE?W6=`PH||B#dW??oWPF5P*60(_
z3NFSNZ=*|PH}F`rQmK4$NKnbG<~=>oz|<$Q(H_JeA<)Gb08h?E<+%suc{r?20#%~b
zMpdn1bc4#(`#0SVVI8-Y?ztU;pO~!tWy9QqU>9Sze(;t^ax2Sjhu|OdC)!*mT0t0h
zJ{sq!tgrG4UbHJ-MTjTbTqoLSG1&G1@Rm@@$A&UysMh8>(Q2cr1_Zl{;1!{SXh#@3
zm|W8)fEt^1=%7GvRpOPYieIr{O|wyxn?y?i_qBjGM#sXiYqwo&)Z`}77Kha=1$=(3
z+mGeT^V8utgxMal#bGsD{X*^KHbj@4h{i44oT@liSl}$%2>NEbT2r(_54J^^D=fG+
z67`F3KjSRh040HQ8(*s_+U3{O3<BOoaAS1r?A;01t%<J?$ZWI*z!qD52EB{mv}n)X
zoxs`e0{vfVKRTVS^|GO8e^P)N<OwuWi+3D(Oy^ef_=j&lW5HUWWbm{%6s<O@YD84?
zLqXve-+tE8`%f+2#$W&OG%kl|!(;m(wU#vi>g)tA5o)IApfI&~rzMsA)Z%RnfBg}L
zzy6quE{h0)VF#=3Nlfiu9K8Wx$j*Sg#+%Q)gn!yI^7w>rE96%5xI90NtM_kmvDGXB
zndL(l4Ug8WziT4VB?vKOXG~t>%KS90%unO+t^o{o^`ft1H#%bpbVd`K_O{Kf=Ao_R
zF;`f?Twwv<EZyVHj_t;v0IOi?%)7)FNB<nuO_v$ZkzIb};<H;_U~U7tfRB(d9)jph
zy-Q4qc3TnWg53UMJVSPQSXJv?WJ<K!sH&k<|2KePn!-eu1x$L{3hZr}7E;&CR%mEb
z<%munSc`{Y>R>X<0u5$bARK*L#&Jw%S-`^CxT1mI2!=63iReHh*EcNMhr{Zmz}C%Q
zhB1%v90MaP9TXBR;54_u7#qlz2n|2EEs0heRW)!?#xx7jnMSiLV4)DJhKn-BI;1YY
zq8_#K$)?T`D-j)Ko4{DWk}asvlxT~?YE~+drQa4N#8|Wi6`DS=ap_fcoVy8(S%gmK
z&CD;@3R{jDjTUe^=o@@6wvdhfh||s9q^Uxzns{1CMI<o;f^644nE)Z6m2?_t#uikt
z?Lg<^u$tvI7-NV|AJ`#Sz(&ym!1A!F@-Q#65kYjOSs%OZes<lcn)dWj6#{R!;@*tE
zAVK5#L+YrV_p~+BR)`hpeIWR|iZgY|Zp*{=mS{^dEl@7ZBq46_r18*_EfF2C%g0vJ
zGSLDo+z`_;!2&H7Ex^JJAuSaw;DBfW7H)`WxnKc@L<_KRLx3ZK1soJDz`_kMjtLfU
zShN5OH-I=QSfE9H+N~%Kt681s08g+91R19V3%DR!pe)>N1sWhB0(~G!pdq>xD>yG$
zzy*7-k?m>aGzoFa?Kl|o2%<9&ht<=reZN~@TupmgQ6Py=cv_>!5zwI12X;<=u@;6$
z-~!F_I9_lW;fklNMaAdx(jD(1bUGg^*fW9K4m^`-t7%Uw3JGzFv#!esXi|xeF1@OH
zs$lk{Xo0omJHTlO!Siz6VX{PY)GOJw8qbQh0%u)^@kp_?6`t|5Ml27js!nu(&wXe;
zLZ|bwJU#1W!2&+WwAFBjp=C_2^<F344#W(;5^V*x47QP#bo#(+g;qU$DcTAwUW*85
zAUd=Bih9oNP^{o<(N<vbnkFlVE=7wtr;Vz<-8e81qOH)LRul+v96-O@v3QJ05MA<m
zfn}CJiMGP_v@%4166zkWfJP)HCDPCPrNA;vAVphYZGd7ZWZ8F82TlB>0M*YHU@HPG
z+G^ryB^4pOPm&l3n)f9jD-m5H9plTdse#`lB{ZU~CZ1MOLg0u5F#`W?zdxyiCWtWZ
z#i7<#5=zllBabQaY8?GUI08xRhZjXGpn;HqPTvTD@n{j5pg#J|5PH$pVtZN{Dhc#U
zI#Q6tehBnCHbK2C&@3P_I`nTO36rs9WWy}djj(7<Qpw1IAeTh>Pl`xMK_ml^36O<=
zY$WdLg`5J&0wN0lMEa}%vWOs4DnSd|quvVt59SZOjW$f-R{#J207*qoM6N<$g6sKm
A>;M1&

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/styles/buttons.scss b/frontend/src/assets/styles/buttons.scss
index 5125b29..5c2c2cd 100644
--- a/frontend/src/assets/styles/buttons.scss
+++ b/frontend/src/assets/styles/buttons.scss
@@ -1,40 +1,48 @@
 .stop-button {
   @extend .btn;
-  @extend .btn-secondary;
+  @extend .btn-outline-secondary;
+  @extend .btn-sm;
 }
 
 .back-button {
   @extend .btn;
-  @extend .btn-secondary;
+  @extend .btn-outline-secondary;
+  @extend .btn-sm;
 }
 
 .proceed-button {
   @extend .btn;
   @extend .btn-primary;
+  @extend .btn-sm;
 }
 
 .initiate-button {
   @extend .btn;
   @extend .btn-primary;
+  @extend .btn-sm;
 }
 
 .proceed-button {
   @extend .btn;
   @extend .btn-primary;
+  @extend .btn-sm;
 }
 
 .option-button {
   @extend .btn;
   @extend .btn-primary;
+  @extend .btn-sm;
 }
 
 .close-button {
   @extend .btn-close;
+  @extend .btn-sm;
 }
 
 .light-button {
   @extend .btn;
   @extend .btn-light;
+  @extend .btn-sm;
 }
 
 .inplace-proceed-button {
@@ -44,3 +52,7 @@
 .inplace-back-button {
   @extend .light-button;
 }
+
+.min-btn {
+  min-width: 115px;
+}
\ No newline at end of file
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 6e326b4..27bbfa5 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -159,3 +159,41 @@ p {
     }
   }
 }
+
+.container {
+  @media (min-width: 1200px) {
+    max-width: $body-width;
+  }
+}
+
+.accordion-list {
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
+  border: none;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  .accordion-item {
+    border: none;
+  }
+}
+.accordion-button {
+  padding: 12px 28px 12px 12px;
+  outline: none;
+  box-shadow: none !important;
+  .dashed-container {
+    flex: 1;
+    margin-right: 28px;
+    padding: 8px 12px;
+    font-weight: bold;
+    border: 1px dashed #AEBFFD;
+    border-radius: 3px;
+  }
+  &:not(.collapsed) {
+    color: black;
+    background-color: transparent;
+    box-shadow: none;
+    border-bottom: 1px solid #dee2e6;
+    .dashed-container {
+      background-color: #F3F6FF;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index 713e7f5..b5c944a 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -1,10 +1,19 @@
 <template>
   <div class="freeleaps-editor">
-    <div v-if="!disabled" class="editor-control">
+    <div
+      class="editor-body"
+      :contenteditable="!disabled"
+      spellcheck="false"
+      ref="editor"
+      v-html="content"
+      @blur="updateAction"
+      @mouseup.stop="selectionChange"
+    />
+    <div v-if="!disabled" class="editor-control" :style="editorCtrlStyle">
       <div v-for="(item, index) in iconList" :key="index" class="editor-item">
         <button
           class="item-icon"
-          :class="{ activity: item.choose }"
+          :class="{ activity: commandStates.indexOf(item.type) !== -1, last: index === iconList.length - 1 }"
           :data-info="item.name"
           @click="iconClick($event, item.type)"
           :data-bs-toggle="item.drop ? 'dropdown' : ''"
@@ -76,14 +85,6 @@
         </div>
       </div>
     </div>
-    <div
-      class="editor-body"
-      :contenteditable="!disabled"
-      spellcheck="false"
-      ref="editor"
-      v-html="content"
-      @blur="updateAction"
-    />
   </div>
 </template>
 <script>
@@ -105,6 +106,8 @@ export default {
   data() {
     return {
       selectedRange: '',
+      editorCtrlStyle: {},
+      commandStates: [],
       iconList: [
         // {
         //   name: 'lable', // hover name
@@ -112,7 +115,6 @@ export default {
         //   icon: 'fe-paragraph', // icon style
         //   drop: true, // If there is drop menu
         //   canChoose: true, // chosen or not
-        //   choose: false
         // },
         {
           name: 'bold',
@@ -120,7 +122,6 @@ export default {
           icon: 'fe-bold',
           drop: false,
           canChoose: true,
-          choose: false
         },
         {
           name: 'italic',
@@ -128,7 +129,6 @@ export default {
           icon: 'fe-italic',
           drop: false,
           canChoose: true,
-          choose: false
         },
         {
           name: 'underline',
@@ -136,7 +136,6 @@ export default {
           icon: 'fe-underline',
           drop: false,
           canChoose: true,
-          choose: false
         },
         // {
         //   name: 'strike',
@@ -144,7 +143,6 @@ export default {
         //   icon: 'fe-strike',
         //   drop: false,
         //   canChoose: true,
-        //   choose: false
         // },
         // {
         //   name: 'clear-format',
@@ -152,7 +150,6 @@ export default {
         //   icon: 'fe-clear',
         //   drop: false,
         //   canChoose: false,
-        //   choose: false
         // },
         // {
         //   name: 'font-color',
@@ -160,7 +157,6 @@ export default {
         //   icon: 'fe-char',
         //   drop: false,
         //   canChoose: true,
-        //   choose: false
         // },
         {
           name: 'unordered-list',
@@ -168,7 +164,6 @@ export default {
           icon: 'fe-unorderedlist',
           drop: false,
           canChoose: true,
-          choose: false
         },
         {
           name: 'ordered list',
@@ -176,7 +171,6 @@ export default {
           icon: 'fe-orderedlist',
           drop: false,
           canChoose: true,
-          choose: false
         }
         // {
         //   name: 'align-justify',
@@ -184,12 +178,41 @@ export default {
         //   icon: 'fe-alignjustify',
         //   drop: true,
         //   canChoose: true,
-        //   choose: false
         // }
       ]
     }
   },
   methods: {
+    selectionChange(e) {
+      const sel = window.getSelection()
+      if (sel && sel.type === 'Range') {
+        // this.selectedRange = sel.getRangeAt(0)
+        // this.restoreSelection()
+        // console.log('window.getSelection',this.selectedRange)
+        // console.log('is bold ? ', this.queryCommandState(sel.getRangeAt(0), 'bold'))
+        // this.iconClick(null, 'bold')
+        this.editorCtrlStyle = { display: 'flex', top: `${e.layerY}px`, left: `${e.layerX}px` }
+      } else {
+        this.selectedRange = null
+        this.editorCtrlStyle = { display: 'none' }
+        // this.commandStates = []
+      }
+    },
+    queryCommandState(range, command) {
+      const container = document.createElement('span')
+      container.style.display = 'none';
+      
+      container.appendChild(range.cloneContents())
+      console.log('queryCommandState', container)
+      // range
+      document.body.appendChild(container);
+      const state = document.queryCommandState(command);
+        console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
+        console.log('queryCommandState ', document.queryCommandState('bold'))
+      // range.collapse(true);
+      container.remove();
+      return state;
+    },
     iconClick(event, type, dropType) {
       event.preventDefault()
       this.$refs.editor.focus()
@@ -200,26 +223,18 @@ export default {
         if (dropType) {
           type = dropType
         }
-        let arr = []
-        arr = this.iconList.map((val) => {
-          if (type === val.type && val.canChoose) {
-            val.choose = val.choose ? false : true
-          }
-          return val
-        })
-
-        if (type === 'clear') {
-          arr = this.iconList.map((val) => {
-            val.choose = false
-            return val
-          })
+        const i = this.commandStates.indexOf(type)
+        if (i === -1) {
+          this.commandStates.push(type)
+        } else {
+          this.commandStates.splice(i,1)
         }
-        this.iconList = arr
       })
     },
     getSelect() {
       if (window.getSelection) {
-        var sel = window.getSelection()
+        let sel = window.getSelection()
+        console.log('this.selectedRange',sel)
         if (sel.rangeCount > 0) {
           return sel.getRangeAt(0)
         }
@@ -272,9 +287,10 @@ export default {
         default:
           console.log('none')
       }
+      // window.getSelection().removeAllRanges()
     },
     restoreSelection() {
-      var selection = window.getSelection()
+      let selection = window.getSelection()
       if (this.selectedRange) {
         try {
           selection.removeAllRanges()
@@ -297,9 +313,8 @@ export default {
 <style lang="scss" scoped>
 .freeleaps-editor {
   position: relative;
+  min-width: 100px;
   background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #a9a9a9;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   h1,
@@ -330,15 +345,11 @@ export default {
     font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
   }
   .editor-control {
-    display: flex;
-    flex-flow: row wrap;
-    min-height: 40px;
-    color: #333;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    background-color: #f5f5f5;
-    border-color: #ddd;
+    display: none;
+    width: fit-content;
+    height: 26px;
+    background-color: #F8F8F9;
+    position: absolute;
   }
   .dropmenu {
     display: none;
@@ -383,6 +394,7 @@ export default {
     outline: none;
     text-align: left;
     border-radius: 4px;
+    position: relative;
     p {
       font-size: 14px;
       color: #68747f;
@@ -393,31 +405,32 @@ export default {
 
 .editor-item {
   position: relative;
-  vertical-align: middle;
-  border: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
   cursor: pointer;
-  line-height: 20px;
-  border-radius: 3px;
-  margin: 4px 0 4px 5px;
-  background-color: white;
   .item-icon {
     position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    padding: 2px 10px;
-    font-size: 18px;
+    width: 50px;
+    height: 16px;
+    font-size: 16px;
+    color: #9EA2AF;
     font-weight: normal;
     white-space: nowrap;
     vertical-align: middle;
     touch-action: manipulation;
     cursor: pointer;
     user-select: none;
-    background-color: #fff;
-    border: 1px solid white;
     outline: none;
     transition: all 0.1s ease-out;
-    border-radius: 3px;
+    border: none;
+    line-height: 16px;
+    background: transparent;
+    border-right: 1px solid #E7E8EB;
+    &.last {
+      border-right: 0;
+    }
     &::after {
       position: absolute;
       top: 0;
@@ -457,9 +470,7 @@ export default {
     }
     &:hover,
     &.activity {
-      color: #333;
-      background-color: #e6e6e6;
-      border-color: #e6e6e6;
+      color: black;
     }
     &:hover:after,
     &:hover:before {
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
index 95b640d..4d720c9 100644
--- a/frontend/src/components/PDFReader.vue
+++ b/frontend/src/components/PDFReader.vue
@@ -11,13 +11,17 @@
 
 <script>
 import * as PDFJS from 'pdfjs-dist/build/pdf'
-import { WorksapceApi } from '@/utils/index'
-PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker.entry')
+PDFJS.GlobalWorkerOptions.workerPort = new Worker(
+    new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url),
+    { type: "module" }
+  )
+  
+// import * as PDFJS from 'pdfjs-dist/webpack.mjs'
 
 export default {
   name: 'PDFReader',
   props: {
-    document: { type: String, default: '' }
+    doc: { type: Object, default: () => {} }
   },
   data() {
     return {
@@ -27,8 +31,12 @@ export default {
       selectedPage: 1
     }
   },
-  mounted() {
-    this.renderPDF()
+  watch: {
+    doc() {
+      if (this.doc.url || this.doc.data) {
+        this.renderPDF()
+      }
+    } 
   },
   methods: {
     renderPage(num) {
@@ -48,12 +56,8 @@ export default {
         })
       })
     },
-    async renderPDF() {
-      const response = await WorksapceApi.fetchAttachedFileAsMediaData(
-        '66673218fa83335c3b1b11ec',
-        '6667321afa83335c3b1b11ee'
-      )
-      this.loadingTask = PDFJS.getDocument({ url: response.data })
+    renderPDF() {
+      this.loadingTask = PDFJS.getDocument(this.doc)
       this.loadingTask.promise.then((pdf) => {
         this.numPages = pdf.numPages
         this.renderPage(1)
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 898175b..24e8b73 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -81,7 +81,6 @@ export default {
     if (this.userIdentityNote.length > 8) {
       this.userIdentityNote = this.userIdentityNote.slice(0, 5) + '...'
     }
-    console.log('watch', this.$route.meta)
   },
   data() {
     return {
diff --git a/frontend/src/icons/btn-history.svg b/frontend/src/icons/btn-history.svg
new file mode 100644
index 0000000..48c4fd9
--- /dev/null
+++ b/frontend/src/icons/btn-history.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1362" width="64" height="64"><path d="M512 81.465C274.223 81.465 81.465 274.222 81.465 512S274.221 942.535 512 942.535c237.776 0 430.535-192.756 430.535-430.535S749.777 81.465 512 81.465z m0 804.279c-206.413 0-373.743-167.331-373.743-373.743S305.588 138.257 512 138.257s373.743 167.331 373.743 373.744S718.412 885.744 512 885.744z m58.193-364.989c4.018-8.407 6.272-17.821 6.272-27.76 0-24.174-13.313-45.226-33-56.26V248.949c0-6.781-5.498-12.28-12.28-12.28h-38.372c-6.781 0-12.28 5.498-12.28 12.28v187.785c-19.686 11.034-33 32.088-33 56.26 0 35.603 28.862 64.465 64.465 64.465a64.251 64.251 0 0 0 24.82-4.959l177.381 177.382c4.797 4.797 12.571 4.797 17.367 0l15.194-15.194c4.797-4.795 4.797-12.569 0-17.367L570.192 520.755z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/btn-templates.svg b/frontend/src/icons/btn-templates.svg
new file mode 100644
index 0000000..e156229
--- /dev/null
+++ b/frontend/src/icons/btn-templates.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1523" width="64" height="64"><path d="M758.94993735 933.875H265.05006265c-76.72843323 0-144.04975104-72.15625991-144.04975103-154.40283381V223.87422138C121.00031161 147.61877182 182.9085958 90.125 265.05006265 90.125H581.37091262l5.78090947 4.88749603c92.07411987 78.67292102 153.14154456 140.68631304 230.39551537 219.25412622 24.43748016 24.75280288 50.3990192 51.18732477 79.4612266 80.249533l5.99112432 6.04367824v378.91233271c-0.05255393 82.24657388-67.32131699 154.40283381-144.04975103 154.4028338zM265.05006265 131.2745639c-59.64847366 0-102.90018713 38.94230732-102.90018714 92.59965748v555.59794482c0 59.28059783 49.0326221 113.20071597 102.90018714 113.20071598h493.8998747c53.81501111 0 102.90018713-53.92011814 102.90018714-113.20071598V417.58723914c-26.80239771-26.74984461-50.87200286-51.29243262-73.62776404-74.46862354-74.9416072-76.15034253-134.53752695-136.74478354-222.14458055-211.89660562H265.05006265z" fill="#4D4D4D" p-id="1524"></path><path d="M861.85012449 460.52362989h-174.95133921c-82.19402078 0-154.35027988-67.32131699-154.35027988-144.04975105V131.2745639a20.6010585 20.6010585 0 0 1 41.14956391 1e-8v185.19931493c0 53.81501111 53.97267205 102.90018713 113.20071597 102.90018715h174.95133921a20.6010585 20.6010585 0 1 1 0 41.1495639z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 872c448..b6d372f 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -14,8 +14,8 @@ export default {
     mnx_navToContact() {
       this.$router.push('/contact')
     },
-    mnx_navToPdfContentViewer(content_id) {
-      this.$router.push('/pdf-content-viewer/' + content_id)
+    mnx_navToPdfContentViewer(request_id, document_id) {
+      this.$router.push(`/pdf-content-viewer?request_id=${request_id}&document_id=${document_id}`)
     },
     mnx_navToLinkContentViewer(content_link_based64) {
       this.$router.push('/link-content-viewer/' + content_link_based64)
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index bd00fff..6c12765 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -31,14 +31,14 @@
           </div>
           <button type="submit" class="btn-start">SIGN UP</button>
         </div>
-        <p class="errorInput" v-if="message != null">{{ message }}</p>
+        <p class="error-msg" v-if="message != null">{{ message }}</p>
       </div>
     </form>
   </div>
 </template>
 
 <script>
-import { UserAuthApi, applicantValidator } from '../../utils/index'
+import { UserAuthApi, passwordValidator } from '../../utils/index'
 export default {
   name: 'NewUserSetPassword',
   props: {},
@@ -67,8 +67,7 @@ export default {
         this.message = 'The two passwords are not matched'
         return
       }
-      // this.message = applicantValidator.emailValidator.validate(this.password)
-      // console.log('EmailValidator', EmailValidator)
+      this.message = passwordValidator.validate(this.password)
       if (this.message != null) return
 
       UserAuthApi.updatePassword(this.password, this.password2)
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index 34df154..3409c4e 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -1,47 +1,35 @@
 <template>
   <div class="pdf-viewer">
-    <PDFReader />
+    <PDFReader :doc="content_media_data" />
   </div>
 </template>
 <script>
 // import { pdfjsLib } from '../../plugins/index'
 // import { ContentApi } from '../../utils/index'
 // import { Buffer } from 'buffer'
+import { WorksapceApi } from '@/utils/index'
 import PDFReader from '@/components/PDFReader.vue'
 export default {
   name: 'PdfContentViewer',
-  props: {
-    content_id: {
-      required: true,
-      type: String
-    }
-  },
+  // props: {
+  //   content_id: {
+  //     required: true,
+  //     type: String
+  //   }
+  // },
   components: { PDFReader },
   computed: {},
   mounted() {
-    // this.retrieve_blog_content()
+    if (this.$route.query?.request_id && this.$route.query?.document_id) {
+      this.retrieve_blog_content(this.$route.query.request_id, this.$route.query.document_id)
+    }
   },
   methods: {
-    // retrieve_blog_content() {
-    //   ContentApi.retrieve_blog_content(this.content_id)
-    //     .then((response) => {
-    //       this.content_media_data = response.data
-    //       var loadingTask = pdfjsLib.getDocument({
-    //         data: Buffer.from(this.content_media_data, 'base64')
-    //       })
-    //       loadingTask.promise.then(function (pdf) {
-    //         //
-    //         // Fetch the first page
-    //         //
-    //         pdf.getPage(1).then(function (page) {
-    //           //rendering
-    //         })
-    //       })
-    //     })
-    //     .catch((error) => {
-    //       this.mnx_backendErrorHandler(error)
-    //     })
-    // }
+    retrieve_blog_content(request_id, document_id) {
+      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
+        this.content_media_data = {url: response.data}
+      })
+    }
   },
   data() {
     return {
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 15b8c89..4ccdf55 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -6,6 +6,7 @@
           v-for="(conversation, index) in conversations"
           :key="index"
           class="conversation-container"
+          :class="{selected: current_thread?.conversation?.information?.conversation_id === conversation.summary.last_message.conversation_id}"
           @click="selectConversation(conversation)"
         >
           <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
@@ -37,7 +38,7 @@
             v-for="(item, index) in current_thread.conversation.messages"
             :key="index"
             class="message-item-container"
-            :class="item.sender_profile.me ? 'me' : ''"
+            :class="item.raw_data.sender_id == userIdentityNote ? 'me' : ''"
           >
             <div class="message-item-header-container">
               <img
@@ -84,7 +85,7 @@ export default {
   },
   watch: {
     conversations: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         if (val && val.length > 0) {
           this.current_thread = val[0]
         }
@@ -94,6 +95,7 @@ export default {
   },
   data() {
     return {
+      userIdentityNote: this.mnx_getUserIdentity(),
       conversations: [],
       current_thread: null,
       writtenMessage: null
@@ -125,7 +127,7 @@ export default {
         })
     },
     getDateFromFulltimeString(fulltime) {
-      return DateUtils.FromJsonToDatetimeString(fulltime)
+      return DateUtils.FromJsonToHMDateString(fulltime)
     }
   }
 }
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index 2a37154..188431e 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -1,267 +1,265 @@
 <template>
-  <div class="provider-hub-container">
-    <div v-if="recommendedProviders" class="accordion" id="provider-accordion-container">
-      <div
-        v-for="(provider, index) in recommendedProviders"
-        :key="index"
-        class="accordion-item my-3"
-      >
-        <h2 class="accordion-header">
-          <button
-            class="accordion-button collapsed"
-            type="button"
-            data-bs-toggle="collapse"
-            :data-bs-target="'#collapse' + index"
-            aria-expanded="false"
-            :aria-controls="'collapse' + index"
+  <div class="provider-hub-container" id="provider-accordion-container">
+    <template v-if="recommendedProviders">
+      <div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index">
+        <div class="accordion-item my-3" >
+          <h2 class="accordion-header">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse' + index"
+              aria-expanded="false"
+              :aria-controls="'collapse' + index"
+            >
+              <div class="provider-summary-containter dashed-container">
+                <div class="provider-portrait-containter">
+                  <img
+                    class="provider-portrait"
+                    alt="user portrait"
+                    src="@/assets/profile.png"
+                  />
+                </div>
+                <div class="provider-name-container">
+                  <label class="provider-name-label" for="provider-name">Name</label>
+                  <span class="provider-name-span" id="provider-name">
+                    {{ provider.user_profile.first_name }} {{ provider.user_profile.last_name }}</span
+                  >
+                </div>
+                <div class="provider-stay-on-freeleaps-container">
+                  <label class="provider-stay-on-freeleaps-label" for="provider-stay-on-freeleaps"
+                    >Stay on Freeleaps</label
+                  >
+                  <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
+                    {{ provider.activeness_achievement.days_of_staying_on }} day(s)</span
+                  >
+                </div>
+                <div class="provider-delivered-projects-container">
+                  <label class="provider-delivered-projects-label" for="provider-delivered-projects"
+                    >Delivered projects</label
+                  >
+                  <span class="provider-delivered-projects-span" id="provider-delivered-projects">
+                    {{ provider.provider_achievement.delivered_projects }}
+                  </span>
+                </div>
+                <div class="provider-responding-time-container">
+                  <label class="provider-responding-time-label" for="provider-responding-time"
+                    >Responding time</label
+                  >
+                  <span class="provider-responding-time-span" id="provider-responding-time">
+                    {{ provider.provider_achievement.responding_time_in_minutes }} min(s)
+                  </span>
+                </div>
+                <div class="provider-credit-score-container">
+                  <label class="provider-credit-score-label" for="provider-credit-score"
+                    >Credit score</label
+                  >
+                  <span class="provider-credit-score-span" id="provider-credit-score">
+                    {{ provider.provider_achievement.credit }}</span
+                  >
+                </div>
+              </div>
+            </button>
+          </h2>
+          <div
+            :id="'collapse' + index"
+            class="accordion-collapse collapse"
+            data-bs-parent="#provider-accordion-container"
           >
-            <div class="provider-summary-containter">
-              <div class="provider-portrait-containter">
-                <img
-                  class="provider-portrait"
-                  alt="user portrait"
-                  src="@/assets/images/default-user-portrait.png"
-                />
+            <div class="accordion-body">
+              <div class="self-intro-container">
+                <label class="self-intro-content-label" for="self-intro-content">Self intro</label>
+                <div
+                  class="self-intro-content-container"
+                  id="self-intro-content"
+                  v-html="provider.user_profile.self_intro.content_html"
+                ></div>
               </div>
-              <div class="provider-name-container">
-                <label class="provider-name-label" for="provider-name">Name</label>
-                <span class="provider-name-span" id="provider-name">
-                  {{ provider.user_profile.first_name }} {{ provider.user_profile.last_name }}</span
-                >
-              </div>
-              <div class="provider-stay-on-freeleaps-container">
-                <label class="provider-stay-on-freeleaps-label" for="provider-stay-on-freeleaps"
-                  >Stay on Freeleaps</label
-                >
-                <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
-                  {{ provider.activeness_achievement.days_of_staying_on }} day(s)</span
-                >
-              </div>
-              <div class="provider-delivered-projects-container">
-                <label class="provider-delivered-projects-label" for="provider-delivered-projects"
-                  >Delivered projects</label
-                >
-                <span class="provider-delivered-projects-span" id="provider-delivered-projects">
-                  {{ provider.provider_achievement.delivered_projects }}
-                </span>
-              </div>
-              <div class="provider-responding-time-container">
-                <label class="provider-responding-time-label" for="provider-responding-time"
-                  >Responding time</label
-                >
-                <span class="provider-responding-time-span" id="provider-responding-time">
-                  {{ provider.provider_achievement.responding_time_in_minutes }} min(s)
-                </span>
-              </div>
-              <div class="provider-credit-score-container">
-                <label class="provider-credit-score-label" for="provider-credit-score"
-                  >Credit score</label
-                >
-                <span class="provider-credit-score-span" id="provider-credit-score">
-                  {{ provider.provider_achievement.credit }}</span
-                >
-              </div>
-            </div>
-          </button>
-        </h2>
-        <div
-          :id="'collapse' + index"
-          class="accordion-collapse collapse"
-          data-bs-parent="#provider-accordion-container"
-        >
-          <div class="accordion-body">
-            <div class="self-intro-container">
-              <label class="self-intro-content-label" for="self-intro-content">Self intro</label>
-              <div
-                class="self-intro-content-container"
-                id="self-intro-content"
-                v-html="provider.user_profile.self_intro.content_html"
-              ></div>
-            </div>
-            <div class="statistics-container">
-              <label class="statistics-content-label" for="statistics-content">Profile</label>
-              <div class="statistics-content-container" id="statistics-content">
-                <div class="delivery-container">
-                  <div class="delivery-delivered-project-container">
-                    <label
-                      class="delivery-delivered-projects-label"
-                      for="delivery-delivered-projects"
-                      >Delivered projects</label
-                    >
-                    <span class="delivery-delivered-projects-span" id="delivery-delivered-projects">
-                      {{ provider.provider_achievement.delivered_projects }}
-                    </span>
-                  </div>
-                  <div class="delivery-time-per-project-container">
-                    <label class="delivery-time-per-project-label" for="delivery-time-per-project"
-                      >Project delivering time</label
-                    >
-                    <span class="delivery-time-per-project-span" id="delivery-time-per-project">
-                      {{ provider.provider_deliveries.delivering_time_per_project_in_day }} day(s)
-                    </span>
-                  </div>
-                  <div class="delivery-top-programming-language-container">
-                    <label
-                      class="delivery-top-programming-language-label"
-                      for="delivery-top-programming-language"
-                      >Top programming languages</label
-                    >
-                    <div
-                      class="delivery-top-programming-language-content-container"
-                      id="delivery-top-programming-language"
-                    >
-                      <span
-                        v-for="(lang, index) in provider.provider_deliveries
-                          .top_programming_languages"
-                        :key="index"
-                        class="delivery-top-programming-language-span"
+              <div class="statistics-container">
+                <label class="self-intro-content-label" for="statistics-content">Profile</label>
+                <div class="statistics-content-container" id="statistics-content">
+                  <div class="delivery-container">
+                    <div class="dd-project-container">
+                      <label
+                        class="dd-project-label"
+                        for="delivery-delivered-projects"
+                        >Delivered projects</label
                       >
-                        #{{ lang }}
+                      <span class="dd-project-span" id="delivery-delivered-projects">
+                        {{ provider.provider_achievement.delivered_projects }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="delivery-time-per-project"
+                        >Project delivering time</label
+                      >
+                      <span class="dd-project-span" id="delivery-time-per-project">
+                        {{ provider.provider_deliveries.delivering_time_per_project_in_day }} day(s)
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label
+                        class="dd-project-label"
+                        for="delivery-top-programming-language"
+                        >Top programming languages</label
+                      >
+                      <div
+                        class="delivery-top-programming-language-content-container"
+                        id="delivery-top-programming-language"
+                      >
+                        <span
+                          v-for="(lang, index) in provider.provider_deliveries
+                            .top_programming_languages"
+                          :key="index"
+                          class="dd-project-span"
+                        >
+                          #{{ lang }}
+                        </span>
+                      </div>
+                    </div>
+                    <div class="dd-project-container">
+                      <label
+                        class="dd-project-label"
+                        for="delivery-weekly-produced-code"
+                        >Weekly produced code</label
+                      >
+                      <span
+                        class="dd-project-span"
+                        id="delivery-weekly-produced-code"
+                      >
+                        {{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
                       </span>
                     </div>
                   </div>
-                  <div class="delivery-weekly-produced-code-container">
-                    <label
-                      class="delivery-weekly-produced-code-label"
-                      for="delivery-weekly-produced-code"
-                      >Weekly produced code</label
-                    >
-                    <span
-                      class="delivery-weekly-produced-code-span"
-                      id="delivery-weekly-produced-code"
-                    >
-                      {{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
-                    </span>
+                  <div class="delivery-container">
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="activity-ongoing-projects"
+                        >Ongoing projects</label
+                      >
+                      <span class="dd-project-span" id="activity-ongoing-projects">
+                        {{ provider.provider_activities.ongoing_projects }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label
+                        class="dd-project-label"
+                        for="activity-invitation-to-requests"
+                        >Invitations to requests</label
+                      >
+                      <span
+                        class="dd-project-span"
+                        id="activity-invitation-to-requests"
+                      >
+                        {{ provider.provider_activities.invitations_to_open_requests }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="activity-active-proposals"
+                        >Active proposals</label
+                      >
+                      <span class="dd-project-span" id="activity-active-proposals">
+                        {{ provider.provider_activities.active_proposals }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="activity-hourly-rate"
+                        >Expected hourly rate</label
+                      >
+                      <span class="dd-project-span" id="activity-hourly-rate">
+                        {{ provider.provider_profile.expected_salary.hourly }}
+                        {{ provider.provider_profile.expected_salary.currency }}
+                      </span>
+                    </div>
                   </div>
-                </div>
-                <div class="activity-container">
-                  <div class="activity-ongoing-projects-container">
-                    <label class="activity-ongoing-projects-label" for="activity-ongoing-projects"
-                      >Ongoing projects</label
-                    >
-                    <span class="activity-ongoing-projects-span" id="activity-ongoing-projects">
-                      {{ provider.provider_activities.ongoing_projects }}
-                    </span>
-                  </div>
-                  <div class="activity-invitation-to-requests-container">
-                    <label
-                      class="activity-invitation-to-requests-label"
-                      for="activity-invitation-to-requests"
-                      >Invitations to requests</label
-                    >
-                    <span
-                      class="activity-invitation-to-requests-span"
-                      id="activity-invitation-to-requests"
-                    >
-                      {{ provider.provider_activities.invitations_to_open_requests }}
-                    </span>
-                  </div>
-                  <div class="activity-active-proposals-container">
-                    <label class="activity-active-proposals-label" for="activity-active-proposals"
-                      >Active proposals</label
-                    >
-                    <span class="activity-active-proposals-span" id="activity-active-proposals">
-                      {{ provider.provider_activities.active_proposals }}
-                    </span>
-                  </div>
-                  <div class="delivery-hourly-rate-container">
-                    <label class="delivery-hourly-rate-label" for="activity-hourly-rate"
-                      >Expected hourly rate</label
-                    >
-                    <span class="delivery-hourly-rate-span" id="activity-hourly-rate">
-                      {{ provider.provider_profile.expected_salary.hourly }}
-                      {{ provider.provider_profile.expected_salary.currency }}
-                    </span>
-                  </div>
-                </div>
-                <div class="work-quality-container">
-                  <div class="quality-code-issue-rate-container">
-                    <label class="quality-code-issue-rate-label" for="quality-issue-rate"
-                      >Code issue rate</label
-                    >
-                    <span class="quality-code-issue-rate-span" id="quality-issue-rate">
-                      {{ provider.provider_work_quality.issues_per_thousand_lines_of_codes }}
-                    </span>
-                  </div>
-                  <div class="quality-online-issue-rate-container">
-                    <label class="quality-online-issue-rate-label" for="quality-online-issue-rate"
-                      >Online issue rate</label
-                    >
-                    <span class="quality-online-issue-rate-span" id="quality-online-issue-rate">
-                      {{ provider.provider_work_quality.issues_after_delivery_per_project }}
-                    </span>
-                  </div>
-                  <div class="quality-issue-fixing-rate-container">
-                    <label class="quality-issue-fixing-rate-label" for="quality-issue-fixing-rate"
-                      >Issue fixing rate</label
-                    >
-                    <span class="quality-issue-fixing-rate-span" id="quality-issue-fixing-rate">
-                      {{ provider.provider_work_quality.issue_fixing_rate_pencentage }}%
-                    </span>
-                  </div>
-                  <div class="quality-issue-fixing-time-container">
-                    <label class="quality-issue-fixing-time-label" for="quality-issue-fixing-time"
-                      >Issue fixing time</label
-                    >
-                    <span class="quality-issue-fixing-time-span" id="quality-issue-fixing-time">
-                      {{ provider.provider_work_quality.issue_fixing_time_minutes }} min(s)
-                    </span>
+                  <div class="delivery-container">
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="quality-issue-rate"
+                        >Code issue rate</label
+                      >
+                      <span class="dd-project-span" id="quality-issue-rate">
+                        {{ provider.provider_work_quality.issues_per_thousand_lines_of_codes }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="quality-online-issue-rate"
+                        >Online issue rate</label
+                      >
+                      <span class="dd-project-span" id="quality-online-issue-rate">
+                        {{ provider.provider_work_quality.issues_after_delivery_per_project }}
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="quality-issue-fixing-rate"
+                        >Issue fixing rate</label
+                      >
+                      <span class="dd-project-span" id="quality-issue-fixing-rate">
+                        {{ provider.provider_work_quality.issue_fixing_rate_pencentage }}%
+                      </span>
+                    </div>
+                    <div class="dd-project-container">
+                      <label class="dd-project-label" for="quality-issue-fixing-time"
+                        >Issue fixing time</label
+                      >
+                      <span class="dd-project-span" id="quality-issue-fixing-time">
+                        {{ provider.provider_work_quality.issue_fixing_time_minutes }} min(s)
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div v-if="requests" class="accordion" id="accordion-action-panel">
-              <div class="accordion-item">
-                <h2 class="accordion-header">
-                  <button
-                    class="accordion-button"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#collapse-action-panel"
-                    aria-expanded="false"
-                    aria-controls="collapse-action-panel"
+              <div v-if="requests" class="accordion" id="accordion-action-panel">
+                <div class="accordion-item">
+                  <h2 class="accordion-header">
+                    <button
+                      class="accordion-button"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-action-panel"
+                      aria-expanded="false"
+                      aria-controls="collapse-action-panel"
+                    >
+                      Action panel
+                    </button>
+                  </h2>
+                  <div
+                    id="collapse-action-panel"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#accordion-action-panel"
                   >
-                    Action panel
-                  </button>
-                </h2>
-                <div
-                  id="collapse-action-panel"
-                  class="accordion-collapse collapse"
-                  data-bs-parent="#accordion-action-panel"
-                >
-                  <div class="accordion-body">
-                    <div class="invite-to-request-container">
-                      <label class="invite-to-request-content-label" for="invite-to-request-content"
-                        >Invite
-                        <span class="invite-to-request-name-span"
-                          >{{ provider.user_profile.first_name }}
-                          {{ provider.user_profile.last_name }}</span
+                    <div class="accordion-body">
+                      <div class="invite-to-request-container">
+                        <label class="invite-to-request-content-label" for="invite-to-request-content"
+                          >Invite
+                          <span class="invite-to-request-name-span"
+                            >{{ provider.user_profile.first_name }}
+                            {{ provider.user_profile.last_name }}</span
+                          >
+                          to my open requests</label
                         >
-                        to my open requests</label
-                      >
-                      <div
-                        class="invite-to-request-content-container"
-                        id="invite-to-request-content"
-                      >
-                        <div class="form-check" v-for="(request, index) in requests" :key="index">
-                          <input
-                            class="form-check-input"
-                            type="checkbox"
-                            :value="request.id"
-                            :id="'check' + request.id"
-                            v-model="checkedRequests"
-                            @change="
-                              checkRequest($event, request.id, provider.user_profile.user_id)
-                            "
-                          />
-                          <label class="form-check-label" :for="'check' + request.id">{{
-                            request.title
-                          }}</label>
+                        <div
+                          class="invite-to-request-content-container"
+                          id="invite-to-request-content"
+                        >
+                          <div class="form-check" v-for="(request, index) in requests" :key="index">
+                            <input
+                              class="form-check-input"
+                              type="checkbox"
+                              :value="request.id"
+                              :id="'check' + request.id"
+                              v-model="checkedRequests"
+                              @change="
+                                checkRequest($event, request.id, provider.user_profile.user_id)
+                              "
+                            />
+                            <label class="form-check-label" :for="'check' + request.id">{{
+                              request.title
+                            }}</label>
+                          </div>
+                          <span class="invite-to-request-note-text"
+                            >*Once the request is selected, the provider will be invited to see the
+                            request.</span
+                          >
                         </div>
-                        <span class="invite-to-request-note-text"
-                          >*Once the request is selected, the provider will be invited to see the
-                          request.</span
-                        >
                       </div>
                     </div>
                   </div>
@@ -271,7 +269,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -422,13 +420,16 @@ export default {
 
 .self-intro-container {
   @extend .flex-colum-container;
-  @extend .m-1;
-  @extend .border;
+  margin-bottom: 20px
+  // @extend .m-1;
+  // @extend .border;
 }
 
 .self-intro-content-label {
   @extend .label-text-light;
   @extend .w-100;
+  font-size: 14px;
+  font-weight: bold !important
 }
 
 .self-intro-content-container {
@@ -439,43 +440,45 @@ export default {
 
 .statistics-container {
   @extend .flex-colum-container;
-  @extend .m-1;
-  @extend .border;
+  margin-bottom: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #dee2e6;
 }
 
-.statistics-content-label {
-  @extend .label-text-light;
-  @extend .w-100;
-}
+// .statistics-content-label {
+//   @extend .label-text-light;
+//   @extend .w-100;
+// }
 
 .statistics-content-container {
   @extend .flex-colum-container;
-  @extend .m-1;
+  padding: 0;
+  margin-top: 12px;
 }
 
 .delivery-container {
   @extend .flex-row-container;
   @extend .justify-content-around;
-  @extend .m-1;
-  @extend .border;
   @extend .w-100;
+  background-color: rgba(32,90,239,.03);
+  margin-bottom: 12px;
+  padding: 12px 0;
 }
 
-.delivery-delivered-project-container {
+.dd-project-container {
   @extend .flex-colum-container;
   @extend .w-20;
-  @extend .m-1;
 }
 
-.delivery-delivered-projects-label {
+.dd-project-label {
   @extend .label-text-light;
   @extend .w-100;
 }
 
-.delivery-delivered-projects-span {
+.dd-project-span {
   @extend .text-start;
-  @extend .w-90;
-  @extend .m-1;
+  @extend .w-100;
+  font-weight: bold;
 }
 
 .delivery-time-per-project-container {
@@ -526,7 +529,7 @@ export default {
 .delivery-top-programming-language-content-container {
   @extend .flex-row-container;
   @extend .justify-content-start;
-  @extend .m-1;
+  padding: 0;
   @extend .w-100;
 }
 
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index ac2d078..883bf90 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -6,13 +6,9 @@
       class="request-invitations"
       :id="group.name"
     >
-      <div v-if="group.data" class="accordion" id="request-invitation-container">
-        <div
-          v-for="(request, index) in group.data"
-          :key="index"
-          :id="request.id"
-          class="accordion-item my-3"
-        >
+    <div v-if="group.data" id="request-invitation-container">
+      <div class="accordion accordion-list" v-for="(request, index) in group.data" :key="index" :id="request.id">
+        <div class="accordion-item my-3">
           <h2 class="accordion-header">
             <button
               class="accordion-button collapsed"
@@ -22,11 +18,9 @@
               aria-expanded="false"
               :aria-controls="'collapse' + index"
             >
-              <div class="request-content-container">
+              <div class="dashed-container request-content-container">
                 <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box"
-                    >Issuer</label
-                  >
+                  <label class="request-content-label" for="request-content-issuer-box">Issuer</label>
                   <div class="request-content-box" id="request-content-issuer-box">
                     <span class="request-content-issuer-text">
                       {{ request.issuer_profile.first_name }}
@@ -35,9 +29,7 @@
                   </div>
                 </div>
                 <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box"
-                    >Request</label
-                  >
+                  <label class="request-content-label" for="request-content-title-box">Request</label>
                   <div class="request-content-box" id="request-content-title-box">
                     <span class="request-content-title-text"> {{ request.title }}</span>
                   </div>
@@ -82,9 +74,9 @@
                 </div>
               </div>
               <div class="issuer-profile-container">
-                <label class="issuer-profile-label" for="issuer-achievement-container"
+                <!-- <label class="issuer-profile-label" for="issuer-achievement-container"
                   >Issuer profile</label
-                >
+                > -->
                 <div class="issuer-achievement-container" id="issuer-achievement-container">
                   <div class="issuer-achievement-isssuer-container">
                     <label
@@ -171,6 +163,8 @@
         </div>
       </div>
     </div>
+      
+    </div>
   </div>
 </template>
 
@@ -208,15 +202,15 @@ export default {
       return DateUtils.FromJsonToDateString(fulltime)
     },
     previewAttachedFile(request_id, document_id) {
-      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
-        .then((response) => {
-          let media_data = response.data
-          console.log(media_data)
-          //TODO: navigate to the preview page
-        })
-        .catch((error) => {
-          this.mnx_backendErrorHandler(error)
-        })
+      this.mnx_navToPdfContentViewer(request_id, document_id)
+      // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
+      //   .then((response) => {
+      //     let media_data = response.data
+      //     console.log(media_data)
+      //   })
+      //   .catch((error) => {
+      //     this.mnx_backendErrorHandler(error)
+      //   })
     },
     downloadAttachedFile(request_id, document_id) {
       WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
@@ -245,7 +239,6 @@ export default {
 <style lang="scss" scoped>
 .request-hub {
   @extend .container;
-  @extend .my-1;
 }
 
 .request-invitations-header-text {
@@ -254,8 +247,6 @@ export default {
 
 .request-invitations {
   @extend .container;
-  @extend .border;
-  @extend .my-1;
 }
 
 .request-content-container {
@@ -313,13 +304,12 @@ export default {
 }
 
 .request-description-container {
-  @extend .container;
-  @extend .border;
-  min-height: 4vh;
+  margin-bottom: 20px
 }
 
 .make-proposal-button {
-  @extend .initiate-button;
+  @extend .btn;
+  @extend .btn-link;
   @extend .float-end;
 }
 
@@ -328,8 +318,8 @@ export default {
 }
 
 .issuer-profile-container {
-  @extend .container;
-  @extend .border;
+  border-top: 1px solid #dee2e6;
+  padding-top: 15px
 }
 
 .issuer-profile-label {
@@ -355,26 +345,31 @@ export default {
   @extend .flex-colum-container-aligned-start;
   @extend .w-10;
   @extend .my-1;
+  @extend .text-start;
 }
 
 .issuer-achievement-issuer-text {
   @extend .text-start;
+  font-weight: bold
 }
 
 .issuer-achievement-stay-container {
   @extend .flex-colum-container-aligned-start;
   @extend .w-10;
   @extend .my-1;
+  @extend .text-start;
 }
 
 .issuer-achievement-stay-content-text {
   @extend .text-start;
+  font-weight: bold
 }
 
 .issuer-achievement-paid-container {
   @extend .flex-colum-container-aligned-start;
   @extend .w-10;
   @extend .my-1;
+  @extend .text-start;
 }
 
 .issuer-achievement-deposit-container {
@@ -385,19 +380,23 @@ export default {
 
 .issuer-achievement-deposit-content-text {
   @extend .text-start;
+  font-weight: bold
 }
 
 .issuer-achievement-paid-content-text {
   @extend .text-start;
+  font-weight: bold
 }
 
 .issuer-achievement-credit-container {
   @extend .flex-colum-container-aligned-start;
   @extend .w-10;
   @extend .my-1;
+  @extend .text-start;
 }
 
 .issuer-achievement-credit-content-text {
   @extend .text-start;
+  font-weight: bold
 }
 </style>
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index bc7e1c5..8754bdd 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -3,7 +3,7 @@
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
       <div
-        class="accordion"
+        class="accordion accordion-list"
         v-for="(project, project_index) in projects"
         :key="project_index"
         :id="project.id"
@@ -18,7 +18,7 @@
               aria-expanded="false"
               :aria-controls="'collapse-' + project_index"
             >
-              <div class="workspace-item-bar">
+              <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
                     <label class="project-item-label">Summary</label>
@@ -927,38 +927,23 @@ export default {
   width: 100%;
   max-width: $body-width;
   padding: 24px 0;
-  .accordion {
-    box-shadow: 0px 0px 24px 0px #d4d3e380;
-    border: none;
-    border-radius: 12px;
-    margin-bottom: 16px;
-    .accordion-item {
-      border: none;
-      .accordion-header {
-        border: none;
-        .accordion-button {
-          box-shadow: none;
-          padding: 12px;
-        }
-      }
-    }
-  }
 }
 
 .workspace-item-bar {
   display: flex;
   align-items: center;
-  margin: 0 24px 0 0;
-  border: 1px dashed #aebffd;
-  border-radius: 3px;
-  flex: 1;
+  // margin: 0 24px 0 0;
+  // border: 1px dashed #aebffd;
+  // border-radius: 3px;
+  // flex: 1;
 }
 
 .workspace-item-bar-left {
   @extend .flex-row-container;
   @extend .flex-grow-1;
+  padding: 0
   // @extend .border;
-  @extend .me-3;
+  // @extend .me-3;
 }
 
 .workspace-item-bar-right {
@@ -994,11 +979,11 @@ export default {
 .project-item-text {
   @extend .text-start;
   @extend .mx-1;
+  margin-bottom: 0
 }
 
 .project-request-container {
-  @extend .container;
-  @extend .border;
+  // padding: 32px;
 }
 
 .float-action-container {
@@ -1006,7 +991,9 @@ export default {
 }
 
 .request-action-withdraw {
-  @extend .initiate-button;
+  @extend .btn;
+  @extend .btn-link;
+  padding: 0
 }
 
 .project-request-content {
@@ -1014,8 +1001,8 @@ export default {
 }
 
 .project-request-proposals-container {
-  @extend .container;
-  @extend .border;
+  // @extend .container;
+  // @extend .border;
 }
 
 .project-request-proposal-bar-container {
@@ -1097,7 +1084,8 @@ export default {
 }
 
 .proposal-action-withdraw {
-  @extend .initiate-button;
+  @extend .btn;
+  @extend .btn-link;
 }
 
 .project-milestone-bar-container {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 5dc582c..665a538 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -42,7 +42,7 @@
               data-bs-parent="#existing-request-item-container"
             >
               <div class="accordion-body">
-                <button class="copy-existing-button" @click="copyRequest(existingRequest)">
+                <button class="btn btn-link" @click="copyRequest(existingRequest)">
                   Copy
                 </button>
                 <div class="existing-request-content-text" v-html="existingRequest.content"></div>
@@ -84,7 +84,7 @@
                 aria-expanded="false"
                 :aria-controls="'collapse' + index"
               >
-                {{ template.title }}
+                <span class="dashed-container">{{ template.title }}</span>
               </button>
             </h2>
             <div
@@ -94,7 +94,7 @@
               data-bs-parent="#template-item-container"
             >
               <div class="accordion-body">
-                <button class="select-template-button" @click="selectTemplate(template)">
+                <button class="select-template-button btn btn-link" @click="selectTemplate(template)">
                   Apply
                 </button>
                 <div class="template-content-textarea" v-html="template.content"></div>
@@ -125,22 +125,24 @@
       </div>
       <div class="flex-1" />
       <button
-        class="action-button"
+        class="action-button btn btn-link"
         type="button"
         data-bs-toggle="offcanvas"
         data-bs-target="#offcanvas-template"
         aria-controls="offcanvas-template"
       >
-        Templates...
+      <svg-icon icon="btn-templates" />
+        Templates
       </button>
       <button
-        class="action-button"
+        class="action-button btn btn-link"
         type="button"
         data-bs-toggle="offcanvas"
         data-bs-target="#offcanvas-copy-existing"
         aria-controls="offcanvas-copy-existing"
       >
-        Copy...
+      <svg-icon icon="btn-history" />
+        Copy
       </button>
     </div>
     <div class="description-container">
@@ -160,8 +162,8 @@
       <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" />
     </div> -->
     <div class="action-footer">
-      <button class="cancel-button" @click="back">Back</button>
-      <button class="submit-button" @click="submit">Submit</button>
+      <button class="cancel-button" @click="back">Cancel</button>
+      <button class="submit-button" @click="submit">(Re)Submit</button>
     </div>
   </div>
 </template>
@@ -186,7 +188,7 @@ export default {
     }
   },
   components: { FreeleapsEditor, InputSelector, SvgIcon },
-  mounted() {
+  mounted () {
     this.initProducts()
     this.initiateFromInput()
     this.fetchTemplates()
@@ -347,17 +349,23 @@ export default {
 }
 .request-issue-container {
   @extend .flex-colum-container;
+  box-shadow: 0px 0px 24px 0px rgba(212,211,227,0.5);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  overflow: hidden
 }
 
 .action-bar {
   @extend .flex-row-container;
   @extend .justify-content-end;
+  border-bottom: 1px solid #E7E8EB;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .action-button {
-  @extend .initiate-button;
-  @extend .mx-3;
-  @extend .my-1;
+  margin-left: 16px;
+  // .action-btn-icon {color: $primary}
 }
 
 .title-container {
@@ -373,6 +381,7 @@ export default {
 .description-container {
   @extend .w-100;
   @extend .my-3;
+  flex: 1
 }
 
 .input-description {
@@ -508,11 +517,13 @@ export default {
 .cancel-button {
   @extend .stop-button;
   @extend .mx-3;
+  @extend .min-btn
 }
 
 .submit-button {
   @extend .proceed-button;
   @extend .mx-3;
+  @extend .min-btn
 }
 
 .offcanvas-parent {
@@ -530,7 +541,7 @@ export default {
 }
 
 .select-template-button {
-  @extend .initiate-button;
+  // @extend .initiate-button;
   @extend .float-end;
 }
 
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index b27208e..d0cfccf 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="submission-result-container">
-    <p class="submission-result-text">The request has been submitted!</p>
-    <p class="submission-result-text">
-      You can find it in
-      <button class="workspace-button" @click="gotoWorkspace()">workspace</button>
-    </p>
+    <div class="submission-result-card">
+      <img src="@/assets/images/submited.png" alt="freeleaps">
+      <span>The request has been submitted!</span>
+      <span>
+        You can find it in
+        <button class="btn btn-link" @click="gotoWorkspace()">My work.</button>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -38,9 +41,33 @@ export default {
 </script>
 <style lang="scss" scoped>
 .submission-result-container {
-  @extend .m-3;
-  @extend .p-3;
-  @extend .container;
+  @extend .flex-row-container;
+  align-items: center;
+  justify-content: center;
+  min-height: $body-height;
+}
+
+.submission-result-card {
+  width: fit-content;
+  min-width: 641px;
+  padding: 45px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  line-height: 36px;
+  box-shadow: 0px 0px 24px 0px #D4D3E380;
+
+  img {
+    width: 86px;
+    margin-bottom: 20px
+  }
+  .btn-link {
+    text-decoration: underline;
+    padding: 0;
+    font-size: inherit
+  }
 }
 
 .submission-result-text {
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 50d444e..88b620e 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -111,7 +111,7 @@ const router = createRouter({
 
     {
       name: 'pdf-content-viewer',
-      path: '/pdf-content-viewer/:content_id',
+      path: '/pdf-content-viewer',
       meta: { requiredRoles: [userRoleEnum.NONE] },
       components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
       props: true
@@ -269,7 +269,7 @@ const router = createRouter({
     {
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
       components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
diff --git a/frontend/src/utils/common/dateUtils.js b/frontend/src/utils/common/dateUtils.js
index 5478b8e..80b019c 100644
--- a/frontend/src/utils/common/dateUtils.js
+++ b/frontend/src/utils/common/dateUtils.js
@@ -38,6 +38,15 @@ class DateUtils {
     }
   }
 
+  static FromJsonToHMDateString(o) {
+    let date = DateUtils.FromJson(o)
+    if (date) {
+      return `${date.getUTCHours().toString().padStart(2, '0')}:${date.getUTCMinutes().toString().padStart(2, '0')}`
+    } else {
+      return null
+    }
+  }
+
   static GetDeltaInDays(o) {
     let date = o instanceof Date ? o : DateUtils.FromJson(o)
     return Math.abs(Math.floor((date - Date.now()) / (1000 * 60 * 60 * 24)))

From 04554ab6694ee66712a459ea0a598fdf4cdac8e1 Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Fri, 14 Jun 2024 06:07:51 +0800
Subject: [PATCH 09/17] update

---
 frontend/src/assets/styles/main.scss          |  35 ++
 .../pages/user/requests/ProposalSubmitted.vue |  24 +-
 frontend/src/pages/user/requests/Propose.vue  | 532 +++++++++++-------
 .../user/workspace/requestIssue/Issue.vue     |   4 -
 .../user/workspace/requestIssue/Submitted.vue |  41 +-
 frontend/src/types/proposalUtils.js           |   4 +-
 6 files changed, 375 insertions(+), 265 deletions(-)

diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 27bbfa5..bffabc1 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -196,4 +196,39 @@ p {
       background-color: #F3F6FF;
     }
   }
+}
+
+.submission-result-container {
+  @extend .flex-row-container;
+  align-items: center;
+  justify-content: center;
+  min-height: $body-height;
+}
+
+.submission-result-card {
+  width: fit-content;
+  min-width: 641px;
+  padding: 45px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  line-height: 36px;
+  box-shadow: 0px 0px 24px 0px #D4D3E380;
+
+  img {
+    width: 86px;
+    margin-bottom: 20px
+  }
+  .btn-link {
+    text-decoration: underline;
+    padding: 0;
+    font-size: inherit
+  }
+}
+
+.upload-contianer {
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index 1b7b96f..65f01d9 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -1,10 +1,13 @@
 <template>
-  <div>
-    <p class="result-text">Your proposal has been submitted!</p>
-    <p class="result-text">
-      You can check the status of proposals in
-      <button class="goto-workspace-button" @click="gotoWorkspace">workspace</button>
-    </p>
+  <div class="submission-result-container">
+    <div class="submission-result-card">
+      <img src="@/assets/images/submited.png" alt="freeleaps"/>
+      <span>Your proposal has been submitted!</span>
+      <span>
+        You can check the status of proposals in
+        <button class="btn btn-link" @click="gotoWorkspace()">My work.</button>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -36,12 +39,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.result-text {
-  @extend .fs-2;
-}
-
-.goto-workspace-button {
-  @extend .proceed-button;
-}
-</style>
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index c255432..bc640a5 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -1,111 +1,110 @@
 <template>
   <div class="making-proposal-container offcanvas-parent">
-    <div
+    <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-header">
-        <h5 class="offcanvas-title" id="offcanvas-copy-existing">Copy from existing proposals</h5>
-        <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"
-          >
-            <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"
-              >
-                {{ existingProposal.request.title }}
-              </button>
-            </h2>
+      >
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="offcanvas-copy-existing">Copy from existing proposals</h5>
+          <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
-              :id="'existing-proposal-collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'existing-heading' + index"
-              data-bs-parent="#existing-proposal-item-container"
+              v-for="(existingProposal, index) in existingProposals"
+              :key="index"
+              :id="'existing-proposal' + index"
+              class="accordion-item"
             >
-              <div class="accordion-body">
-                <button class="copy-existing-button" @click="copyProposal(existingProposal)">
-                  Copy
+              <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"
+                >
+                  {{ existingProposal.request.title }}
                 </button>
-                <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-header">
-        <h5 class="offcanvas-title" id="offcanvas-template">Apply proposal template</h5>
-        <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"
-          >
-            <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"
+              </h2>
+              <div
+                :id="'existing-proposal-collapse' + index"
+                class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index"
+                data-bs-parent="#existing-proposal-item-container"
               >
-                {{ template.title }}
-              </button>
-            </h2>
-            <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)">Apply</button>
-                <div class="template-content-text" v-html="template.proposal.content"></div>
+                <div class="accordion-body">
+                  <button class="copy-existing-button" @click="copyProposal(existingProposal)">
+                    Copy
+                  </button>
+                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-if="request" class="request-container">
-      <label class="request-label" for="request-content-container">For request:</label>
-      <div class="request-content-container" id="request-content-container">
-        <div class="accordion" id="accordion-request-container">
+      <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">Apply proposal template</h5>
+          <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"
+            >
+              <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"
+                >
+                  {{ template.title }}
+                </button>
+              </h2>
+              <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)">Apply</button>
+                  <div class="template-content-text" v-html="template.proposal.content"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="request" class="request-container" id="request-content-container">
+        <div class="accordion accordion-list" id="accordion-request-container">
           <div class="accordion-item">
             <h2 class="accordion-header">
               <button
@@ -116,7 +115,7 @@
                 aria-expanded="false"
                 aria-controls="collapse-request-content"
               >
-                {{ request.title }}
+                <span class="dashed-container">{{ request.title }}</span>
               </button>
             </h2>
             <div
@@ -131,95 +130,143 @@
           </div>
         </div>
       </div>
-    </div>
-    <div v-if="proposal" class="proposal-container">
-      <label class="proposal-label">Proposal:</label>
-      <div class="header-bar">
-        <button
-          class="load-templates-button"
-          type="button"
-          data-bs-toggle="offcanvas"
-          data-bs-target="#offcanvas-template"
-          aria-controls="offcanvas-template"
-        >
-          Templates...
-        </button>
-        <button
-          class="copy-proposal-button"
-          type="button"
-          data-bs-toggle="offcanvas"
-          data-bs-target="#offcanvas-copy-existing"
-          aria-controls="offcanvas-copy-existing"
-        >
-          Copy...
-        </button>
-      </div>
-      <div
-        class="cover-letter-content-container"
-        id="cover-letter-content"
-        contenteditable="true"
-        v-html="proposal.content"
-        @blur="coverLetterDone($event)"
-      ></div>
-      <label class="summary-content-label" for="stage-content"> Milestones</label>
-      <div class="stage-content-container" id="stage-content">
-        <div v-for="(stage, index) in proposal.stages" :key="index" class="stage-item-container">
-          <div class="stage-item-content-container" id="stage-item-content">
-            <div class="stage-payment-container">
-              <label class="stage-content-label" for="stage-payment-content">Payment</label>
-              <div class="stage-payment-content-container" id="stage-payment-content">
-                <input
-                  type="text"
-                  class="stage-payment-content-text"
-                  id="stage-payment-content-text"
-                  v-model="stage.payment"
-                />
-                <span class="stage-payment-content-span"> {{ stage.currency }}</span>
-              </div>
-            </div>
-            <div class="stage-duration-container">
-              <label class="stage-content-label" for="stage-duration-content">Duration</label>
-              <div class="stage-duration-content-container" id="stage-duration-content">
-                <input
-                  type="text"
-                  class="stage-duration-content-text"
-                  v-model="stage.duration_in_days"
-                />
-                <span class="stage-duration-content-span"> day(s)</span>
-              </div>
-            </div>
-            <div class="stage-note-container">
-              <label class="stage-content-label" for="stage-note-content">Notes</label>
-              <input class="stage-note-content-text" id="stage-note-content" v-model="stage.note" />
-            </div>
-            <button class="stage-item-delete-button" @click="removeStage(index)"></button>
+      <div v-if="proposal" class="proposal-container">
+        <div class="proposal-header-container">
+          <label class="proposal-label">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"
+            >
+            <svg-icon icon="btn-templates" />
+            Templates
+            </button>
+            <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" />
+            Copy
+            </button>
           </div>
         </div>
-        <div class="stage-more-action-container">
-          <button class="stage-add-more-button" @click="addStage()">+ Add Milestones</button>
+        <div class="cover-letter-content-container" id="cover-letter-content">
+          <freeleaps-editor v-model:content="proposal.content" />
         </div>
-        <div class="summary-content-container" id="summary-content">
-          <span class="summary-total-stages-content-span" id="summary-total-stages-content">
-            Total milestones:
-            {{ summary.total_stages }}
-          </span>
-          <span class="summary-total-payment-content-span" id="summary-total-payment-content">
-            Total payment:{{ summary.total_payment }} {{ summary.currency }}
-          </span>
-          <span class="summary-total-duration-content-span" id="summary-total-duration-content">
-            Total duration:{{ summary.total_duration_in_days }} day(s)
-          </span>
+        <label class="summary-content-label" for="stage-content"> Milestones</label>
+        <div class="stage-content-container" id="stage-content">
+          <div v-for="(stage, index) in proposal.stages" :key="index" class="stage-item-container">
+            <div class="input-container milestone-input-container">
+              <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" />
+                    <label :for="`stage-payment-content-${index}`">Payment</label>
+                  </div>
+                  <span class="btn-start">{{ stage.currency }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="input-container milestone-input-container">
+              <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" />
+                    <label :for="`stage-duration-content-${index}`">Duration</label>
+                  </div>
+                  <span class="btn-start">day(s)</span>
+                </div>
+              </div>
+            </div>
+            <div class="input-container milestone-input-container">
+              <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" />
+                    <label :for="`stage-note-content-${index}`">Notes</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button class="stage-item-delete-button">
+              <svg-icon v-if="index != 0" icon="delete" @click="removeStage(index)" />
+            </button>
+            <!-- <div class="stage-item-content-container" id="stage-item-content">
+              <div class="stage-payment-container">
+                <label class="stage-content-label" for="stage-payment-content">Payment</label>
+                <div class="stage-payment-content-container" id="stage-payment-content">
+                  <input
+                    type="text"
+                    class="stage-payment-content-text"
+                    id="stage-payment-content-text"
+                    v-model="stage.payment"
+                  />
+                  <span class="stage-payment-content-span"> {{ stage.currency }}</span>
+                </div>
+              </div>
+              <div class="stage-duration-container">
+                <label class="stage-content-label" for="stage-duration-content">Duration</label>
+                <div class="stage-duration-content-container" id="stage-duration-content">
+                  <input
+                    type="text"
+                    class="stage-duration-content-text"
+                    v-model="stage.duration_in_days"
+                  />
+                  <span class="stage-duration-content-span"> day(s)</span>
+                </div>
+              </div>
+              <div class="stage-note-container">
+                <label class="stage-content-label" for="stage-note-content">Notes</label>
+                <input class="stage-note-content-text" id="stage-note-content" v-model="stage.note" />
+              </div>
+              
+            </div> -->
+          </div>
+          <div class="stage-more-action-container">
+            <button class="stage-add-more-button" @click="addStage()">+ Add Milestones</button>
+          </div>
+          <div class="summary-content-container" id="summary-content">
+            <span id="summary-total-stages-content">
+              Total milestones:
+              {{ summary.total_stages }}
+            </span>
+            <span id="summary-total-payment-content">
+              Total payment:{{ summary.total_payment }} {{ summary.currency }}
+            </span>
+            <span id="summary-total-duration-content">
+              Total duration:{{ summary.total_duration_in_days }} day(s)
+            </span>
+          </div>
+        </div>
+        <div class="file-upload-container">
+          <div class="upload-contianer">
+            <label class="btn btn-link">
+              <span v-if="!uploadFile">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"
+            />
+          </div>
+          <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
+          <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
         </div>
       </div>
-      <div class="file-upload-container">
-        <label for="file-upload" class="file-upload-label">Upload File:</label>
-        <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" />
+      <div class="action-footer">
+        <button class="cancel-button" @click="back">Back</button>
+        <button class="submit-button" @click="submit">Submit</button>
       </div>
     </div>
-    <div class="action-footer">
-      <button class="cancel-button" @click="back">Back</button>
-      <button class="submit-button" @click="submit">Submit</button>
-    </div>
   </div>
 </template>
 
@@ -232,8 +279,11 @@ import {
   preparedProposalSummary,
   proposalUtils
 } from '../../../types/index'
+import SvgIcon from '@/components/SvgIcon.vue'
+import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 export default {
   name: 'MakeProposal',
+  components: { SvgIcon, FreeleapsEditor },
   props: {
     requestId: {
       required: true,
@@ -252,7 +302,7 @@ export default {
   },
   watch: {
     'proposal.stages': {
-      handler(val, oldVal) {
+      handler() {
         this.caculateSummary()
       },
       deep: true
@@ -281,6 +331,9 @@ export default {
     handleFileUpload(event) {
       this.uploadFile = event.target.files[0]
     },
+    clearFile() {
+      this.uploadFile = null
+    },
     back() {
       this.mnx_goBack()
     },
@@ -357,7 +410,7 @@ export default {
       }
     },
     addStage() {
-      this.proposal.stages.push(this.emptyStage)
+      this.proposal.stages.push({...this.emptyStage})
     },
 
     removeStage(index) {
@@ -399,6 +452,13 @@ export default {
 <style lang="scss" scoped>
 .making-proposal-container {
   @extend .container;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.making-proposal-content {
+  border-radius: 12px;
+  box-shadow: 0px 0px 24px 0px #D4D3E380
 }
 
 .request-label {
@@ -408,8 +468,11 @@ export default {
 
 .request-container {
   @extend .container;
-  @extend .my-3;
-  @extend .border;
+  padding: 0;
+  .accordion-list {
+    margin: 0;
+    box-shadow: none
+  }
 }
 
 .request-content-container {
@@ -423,17 +486,32 @@ export default {
 
 .proposal-container {
   @extend .flex-colum-container;
-  @extend .border;
+}
+
+.proposal-header-container {
+  display: flex;
+  padding: 15px 24px;
+  align-items: center;
+  @extend .w-100;
+  justify-content: space-between;
+  border-bottom: 1px solid #E7E8EB;
 }
 
 .header-bar {
   @extend .flex-row-container;
   @extend .justify-content-end;
+  align-items: center;
+  .btn {
+    white-space: nowrap;
+    padding: 0;
+    margin-left: 15px;
+  }
 }
 
 .proposal-label {
-  @extend .label-text;
-  @extend .w-100;
+  font-size: 18px;
+  font-weight: bold;
+  color: #0D1637;
 }
 
 .load-templates-button {
@@ -459,9 +537,8 @@ export default {
 .cover-letter-content-container {
   @extend .container;
   min-height: 40vh;
-  overflow: hidden;
-  @extend .text-start;
-  @extend .border;
+  padding: 0;
+  margin-bottom: 20px;
 }
 
 .stage-content-label {
@@ -471,13 +548,17 @@ export default {
 
 .stage-content-container {
   @extend .container;
-  min-height: 10vh;
-  @extend .border;
+  padding: 0;
 }
 
 .stage-item-container {
-  @extend .flex-colum-container;
-  @extend .m-1;
+  // @extend .flex-colum-container;
+  // @extend .m-1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #E7E8EB;
 }
 
 .stage-item-content-label {
@@ -554,18 +635,20 @@ export default {
 }
 
 .stage-more-action-container {
-  @extend .flex-row-container;
-  @extend .justify-content-around;
-  @extend .my-1;
+  padding: 12px 0;
+  border-bottom: 1px solid #E7E8EB;
 }
 
 .stage-item-delete-button {
-  @extend .close-button;
+  width: 42px;
+  @extend .btn;
+  @extend .btn-link;
 }
 
 .stage-add-more-button {
-  @extend .proceed-button;
-  @extend .w-70;
+  @extend .btn;
+  @extend .btn-outline-primary;
+  @extend .w-100;
 }
 
 .summary-container {
@@ -575,14 +658,26 @@ export default {
 }
 
 .summary-content-label {
-  @extend .label-text;
+  @extend .proposal-label;
   @extend .w-100;
+  @extend .text-start;
+  padding: 12px 0;
+  border-bottom: 1px solid #E7E8EB;
 }
 
 .summary-content-container {
   @extend .flex-row-container;
-  @extend .justify-content-around;
-  @extend .my-1;
+  padding: 12px 0;
+  border-bottom: 1px solid #E7E8EB;
+
+  span {
+    @extend .text-start;
+    display: block;
+    flex: 1;
+    font-size: 12px;
+    font-weight: 600;
+    color: #0D1637
+  }
 }
 
 .summary-total-stages-content-span {
@@ -601,16 +696,20 @@ export default {
 }
 
 .action-footer {
-  @extend .flex-row-container;
-  @extend .justify-content-around;
+  padding: 12px 0;
+  text-align: left;
 }
 
 .cancel-button {
   @extend .stop-button;
+  @extend .mx-3;
+  @extend .min-btn
 }
 
 .submit-button {
   @extend .proceed-button;
+  @extend .mx-3;
+  @extend .min-btn
 }
 
 .offcanvas-parent {
@@ -643,9 +742,13 @@ export default {
 }
 
 .file-upload-container {
-  @extend .flex-row-container;
-  @extend .justify-content-start;
-  @extend .my-3;
+  padding: 12px 0;
+  width: 100%;
+  text-align: left;
+  border-bottom: 1px solid #E7E8EB;
+  .btn-link {
+    padding: 0;
+  }
 }
 
 .file-upload-label {
@@ -659,4 +762,25 @@ export default {
   @extend .form-control;
   @extend .w-30;
 }
+
+.milestone-input-container {
+  width: calc(33.3% - 30px);
+  border: 2px dashed #9CB0F6;
+  .btn-start {
+    background: transparent;
+    color: #0D1637;
+    border: none;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+}
+
+.delete-icon {
+  color: $primary;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.78;
+  }
+}
 </style>
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 665a538..700b82a 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -336,10 +336,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.upload-contianer {
-  display: flex;
-  align-items: center;
-}
 .delete-icon {
   color: $primary;
   cursor: pointer;
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index d0cfccf..f3b895f 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="submission-result-container">
     <div class="submission-result-card">
-      <img src="@/assets/images/submited.png" alt="freeleaps">
+      <img src="@/assets/images/submited.png" alt="freeleaps"/>
       <span>The request has been submitted!</span>
       <span>
         You can find it in
@@ -39,42 +39,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.submission-result-container {
-  @extend .flex-row-container;
-  align-items: center;
-  justify-content: center;
-  min-height: $body-height;
-}
-
-.submission-result-card {
-  width: fit-content;
-  min-width: 641px;
-  padding: 45px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 26px;
-  line-height: 36px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380;
-
-  img {
-    width: 86px;
-    margin-bottom: 20px
-  }
-  .btn-link {
-    text-decoration: underline;
-    padding: 0;
-    font-size: inherit
-  }
-}
-
-.submission-result-text {
-  @extend .fs-2;
-}
-
-.workspace-button {
-  @extend .inplace-proceed-button;
-}
-</style>
diff --git a/frontend/src/types/proposalUtils.js b/frontend/src/types/proposalUtils.js
index 80cf49a..ee5cbad 100644
--- a/frontend/src/types/proposalUtils.js
+++ b/frontend/src/types/proposalUtils.js
@@ -35,8 +35,8 @@ class ProposalUtils {
     if (stages)
       stages.forEach((element) => {
         summary.total_stages++
-        summary.total_payment += element.payment
-        summary.total_duration_in_days += element.duration_in_days
+        summary.total_payment += Number(element.payment)
+        summary.total_duration_in_days += Number(element.duration_in_days)
         summary.currency = element.currency
       })
   }

From 9d359e9af53f6a3c44e9a52b1ff7e16361f83210 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Thu, 13 Jun 2024 19:17:50 -0700
Subject: [PATCH 10/17] fixed pdf-content-viewr issue and improve the code
 styling

---
 frontend/src/assets/styles/buttons.scss       |   2 +-
 frontend/src/assets/styles/main.scss          |  12 +-
 frontend/src/components/FreeleapsEditor.vue   |  41 +--
 frontend/src/components/PDFReader.vue         |  10 +-
 frontend/src/mixins/navigator.js              |   4 +-
 .../src/pages/public/PdfContentViewer.vue     |  22 +-
 frontend/src/pages/user/messages/Home.vue     |   6 +-
 frontend/src/pages/user/providers/Home.vue    |  53 ++--
 frontend/src/pages/user/requests/Home.vue     | 298 +++++++++---------
 .../pages/user/requests/ProposalSubmitted.vue |   2 +-
 frontend/src/pages/user/requests/Propose.vue  |  76 +++--
 frontend/src/pages/user/workspace/Home.vue    |   6 +-
 .../user/workspace/requestIssue/Issue.vue     |  27 +-
 .../user/workspace/requestIssue/Submitted.vue |   2 +-
 frontend/src/plugins/router/router.js         |   2 +-
 15 files changed, 295 insertions(+), 268 deletions(-)

diff --git a/frontend/src/assets/styles/buttons.scss b/frontend/src/assets/styles/buttons.scss
index 5c2c2cd..b5ba364 100644
--- a/frontend/src/assets/styles/buttons.scss
+++ b/frontend/src/assets/styles/buttons.scss
@@ -55,4 +55,4 @@
 
 .min-btn {
   min-width: 115px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index bffabc1..ce3e697 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -184,7 +184,7 @@ p {
     margin-right: 28px;
     padding: 8px 12px;
     font-weight: bold;
-    border: 1px dashed #AEBFFD;
+    border: 1px dashed #aebffd;
     border-radius: 3px;
   }
   &:not(.collapsed) {
@@ -193,7 +193,7 @@ p {
     box-shadow: none;
     border-bottom: 1px solid #dee2e6;
     .dashed-container {
-      background-color: #F3F6FF;
+      background-color: #f3f6ff;
     }
   }
 }
@@ -215,20 +215,20 @@ p {
   justify-content: center;
   font-size: 26px;
   line-height: 36px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
 
   img {
     width: 86px;
-    margin-bottom: 20px
+    margin-bottom: 20px;
   }
   .btn-link {
     text-decoration: underline;
     padding: 0;
-    font-size: inherit
+    font-size: inherit;
   }
 }
 
 .upload-contianer {
   display: flex;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index b5c944a..0aa6c35 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -13,7 +13,10 @@
       <div v-for="(item, index) in iconList" :key="index" class="editor-item">
         <button
           class="item-icon"
-          :class="{ activity: commandStates.indexOf(item.type) !== -1, last: index === iconList.length - 1 }"
+          :class="{
+            activity: commandStates.indexOf(item.type) !== -1,
+            last: index === iconList.length - 1
+          }"
           :data-info="item.name"
           @click="iconClick($event, item.type)"
           :data-bs-toggle="item.drop ? 'dropdown' : ''"
@@ -121,21 +124,21 @@ export default {
           type: 'bold',
           icon: 'fe-bold',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'italic',
           type: 'italic',
           icon: 'fe-italic',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'underline',
           type: 'underline',
           icon: 'fe-underline',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         // {
         //   name: 'strike',
@@ -163,14 +166,14 @@ export default {
           type: 'unorderedlist',
           icon: 'fe-unorderedlist',
           drop: false,
-          canChoose: true,
+          canChoose: true
         },
         {
           name: 'ordered list',
           type: 'orderedlist',
           icon: 'fe-orderedlist',
           drop: false,
-          canChoose: true,
+          canChoose: true
         }
         // {
         //   name: 'align-justify',
@@ -200,18 +203,18 @@ export default {
     },
     queryCommandState(range, command) {
       const container = document.createElement('span')
-      container.style.display = 'none';
-      
+      container.style.display = 'none'
+
       container.appendChild(range.cloneContents())
       console.log('queryCommandState', container)
       // range
-      document.body.appendChild(container);
-      const state = document.queryCommandState(command);
-        console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
-        console.log('queryCommandState ', document.queryCommandState('bold'))
+      document.body.appendChild(container)
+      const state = document.queryCommandState(command)
+      console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
+      console.log('queryCommandState ', document.queryCommandState('bold'))
       // range.collapse(true);
-      container.remove();
-      return state;
+      container.remove()
+      return state
     },
     iconClick(event, type, dropType) {
       event.preventDefault()
@@ -227,14 +230,14 @@ export default {
         if (i === -1) {
           this.commandStates.push(type)
         } else {
-          this.commandStates.splice(i,1)
+          this.commandStates.splice(i, 1)
         }
       })
     },
     getSelect() {
       if (window.getSelection) {
         let sel = window.getSelection()
-        console.log('this.selectedRange',sel)
+        console.log('this.selectedRange', sel)
         if (sel.rangeCount > 0) {
           return sel.getRangeAt(0)
         }
@@ -348,7 +351,7 @@ export default {
     display: none;
     width: fit-content;
     height: 26px;
-    background-color: #F8F8F9;
+    background-color: #f8f8f9;
     position: absolute;
   }
   .dropmenu {
@@ -415,7 +418,7 @@ export default {
     width: 50px;
     height: 16px;
     font-size: 16px;
-    color: #9EA2AF;
+    color: #9ea2af;
     font-weight: normal;
     white-space: nowrap;
     vertical-align: middle;
@@ -427,7 +430,7 @@ export default {
     border: none;
     line-height: 16px;
     background: transparent;
-    border-right: 1px solid #E7E8EB;
+    border-right: 1px solid #e7e8eb;
     &.last {
       border-right: 0;
     }
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
index 4d720c9..34502ae 100644
--- a/frontend/src/components/PDFReader.vue
+++ b/frontend/src/components/PDFReader.vue
@@ -12,10 +12,10 @@
 <script>
 import * as PDFJS from 'pdfjs-dist/build/pdf'
 PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-    new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url),
-    { type: "module" }
-  )
-  
+  new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url),
+  { type: 'module' }
+)
+
 // import * as PDFJS from 'pdfjs-dist/webpack.mjs'
 
 export default {
@@ -36,7 +36,7 @@ export default {
       if (this.doc.url || this.doc.data) {
         this.renderPDF()
       }
-    } 
+    }
   },
   methods: {
     renderPage(num) {
diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index b6d372f..9a879e4 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -14,8 +14,8 @@ export default {
     mnx_navToContact() {
       this.$router.push('/contact')
     },
-    mnx_navToPdfContentViewer(request_id, document_id) {
-      this.$router.push(`/pdf-content-viewer?request_id=${request_id}&document_id=${document_id}`)
+    mnx_navToPdfContentViewer(document_id) {
+      this.$router.push('/pdf-content-viewer/' + document_id)
     },
     mnx_navToLinkContentViewer(content_link_based64) {
       this.$router.push('/link-content-viewer/' + content_link_based64)
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index 3409c4e..ff6af39 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -7,27 +7,25 @@
 // import { pdfjsLib } from '../../plugins/index'
 // import { ContentApi } from '../../utils/index'
 // import { Buffer } from 'buffer'
-import { WorksapceApi } from '@/utils/index'
+import { ContentApi } from '@/utils/index'
 import PDFReader from '@/components/PDFReader.vue'
 export default {
   name: 'PdfContentViewer',
-  // props: {
-  //   content_id: {
-  //     required: true,
-  //     type: String
-  //   }
-  // },
+  props: {
+    content_id: {
+      required: true,
+      type: String
+    }
+  },
   components: { PDFReader },
   computed: {},
   mounted() {
-    if (this.$route.query?.request_id && this.$route.query?.document_id) {
-      this.retrieve_blog_content(this.$route.query.request_id, this.$route.query.document_id)
-    }
+    this.retrieve_blog_content(this.content_id)
   },
   methods: {
     retrieve_blog_content(request_id, document_id) {
-      WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
-        this.content_media_data = {url: response.data}
+      ContentApi.retrieve_blog_content(request_id, document_id).then((response) => {
+        this.content_media_data = { url: response.data }
       })
     }
   },
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 4ccdf55..23cee8f 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -6,7 +6,11 @@
           v-for="(conversation, index) in conversations"
           :key="index"
           class="conversation-container"
-          :class="{selected: current_thread?.conversation?.information?.conversation_id === conversation.summary.last_message.conversation_id}"
+          :class="{
+            selected:
+              current_thread?.conversation?.information?.conversation_id ===
+              conversation.summary.last_message.conversation_id
+          }"
           @click="selectConversation(conversation)"
         >
           <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index 188431e..d6d51c5 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="provider-hub-container" id="provider-accordion-container">
     <template v-if="recommendedProviders">
-      <div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index">
-        <div class="accordion-item my-3" >
+      <div
+        class="accordion accordion-list"
+        v-for="(provider, index) in recommendedProviders"
+        :key="index"
+      >
+        <div class="accordion-item my-3">
           <h2 class="accordion-header">
             <button
               class="accordion-button collapsed"
@@ -14,16 +18,13 @@
             >
               <div class="provider-summary-containter dashed-container">
                 <div class="provider-portrait-containter">
-                  <img
-                    class="provider-portrait"
-                    alt="user portrait"
-                    src="@/assets/profile.png"
-                  />
+                  <img class="provider-portrait" alt="user portrait" src="@/assets/profile.png" />
                 </div>
                 <div class="provider-name-container">
                   <label class="provider-name-label" for="provider-name">Name</label>
                   <span class="provider-name-span" id="provider-name">
-                    {{ provider.user_profile.first_name }} {{ provider.user_profile.last_name }}</span
+                    {{ provider.user_profile.first_name }}
+                    {{ provider.user_profile.last_name }}</span
                   >
                 </div>
                 <div class="provider-stay-on-freeleaps-container">
@@ -80,9 +81,7 @@
                 <div class="statistics-content-container" id="statistics-content">
                   <div class="delivery-container">
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-delivered-projects"
+                      <label class="dd-project-label" for="delivery-delivered-projects"
                         >Delivered projects</label
                       >
                       <span class="dd-project-span" id="delivery-delivered-projects">
@@ -98,9 +97,7 @@
                       </span>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-top-programming-language"
+                      <label class="dd-project-label" for="delivery-top-programming-language"
                         >Top programming languages</label
                       >
                       <div
@@ -118,15 +115,10 @@
                       </div>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="delivery-weekly-produced-code"
+                      <label class="dd-project-label" for="delivery-weekly-produced-code"
                         >Weekly produced code</label
                       >
-                      <span
-                        class="dd-project-span"
-                        id="delivery-weekly-produced-code"
-                      >
+                      <span class="dd-project-span" id="delivery-weekly-produced-code">
                         {{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
                       </span>
                     </div>
@@ -141,15 +133,10 @@
                       </span>
                     </div>
                     <div class="dd-project-container">
-                      <label
-                        class="dd-project-label"
-                        for="activity-invitation-to-requests"
+                      <label class="dd-project-label" for="activity-invitation-to-requests"
                         >Invitations to requests</label
                       >
-                      <span
-                        class="dd-project-span"
-                        id="activity-invitation-to-requests"
-                      >
+                      <span class="dd-project-span" id="activity-invitation-to-requests">
                         {{ provider.provider_activities.invitations_to_open_requests }}
                       </span>
                     </div>
@@ -228,7 +215,9 @@
                   >
                     <div class="accordion-body">
                       <div class="invite-to-request-container">
-                        <label class="invite-to-request-content-label" for="invite-to-request-content"
+                        <label
+                          class="invite-to-request-content-label"
+                          for="invite-to-request-content"
                           >Invite
                           <span class="invite-to-request-name-span"
                             >{{ provider.user_profile.first_name }}
@@ -420,7 +409,7 @@ export default {
 
 .self-intro-container {
   @extend .flex-colum-container;
-  margin-bottom: 20px
+  margin-bottom: 20px;
   // @extend .m-1;
   // @extend .border;
 }
@@ -429,7 +418,7 @@ export default {
   @extend .label-text-light;
   @extend .w-100;
   font-size: 14px;
-  font-weight: bold !important
+  font-weight: bold !important;
 }
 
 .self-intro-content-container {
@@ -460,7 +449,7 @@ export default {
   @extend .flex-row-container;
   @extend .justify-content-around;
   @extend .w-100;
-  background-color: rgba(32,90,239,.03);
+  background-color: rgba(32, 90, 239, 0.03);
   margin-bottom: 12px;
   padding: 12px 0;
 }
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 883bf90..99b14d3 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -6,154 +6,167 @@
       class="request-invitations"
       :id="group.name"
     >
-    <div v-if="group.data" id="request-invitation-container">
-      <div class="accordion accordion-list" v-for="(request, index) in group.data" :key="index" :id="request.id">
-        <div class="accordion-item my-3">
-          <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse' + index"
-              aria-expanded="false"
-              :aria-controls="'collapse' + index"
-            >
-              <div class="dashed-container request-content-container">
-                <div class="request-content-issuer-container">
-                  <label class="request-content-label" for="request-content-issuer-box">Issuer</label>
-                  <div class="request-content-box" id="request-content-issuer-box">
-                    <span class="request-content-issuer-text">
-                      {{ request.issuer_profile.first_name }}
-                      {{ request.issuer_profile.last_name }}</span
+      <div v-if="group.data" id="request-invitation-container">
+        <div
+          class="accordion accordion-list"
+          v-for="(request, index) in group.data"
+          :key="index"
+          :id="request.id"
+        >
+          <div class="accordion-item my-3">
+            <h2 class="accordion-header">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                :data-bs-target="'#collapse' + index"
+                aria-expanded="false"
+                :aria-controls="'collapse' + index"
+              >
+                <div class="dashed-container request-content-container">
+                  <div class="request-content-issuer-container">
+                    <label class="request-content-label" for="request-content-issuer-box"
+                      >Issuer</label
                     >
-                  </div>
-                </div>
-                <div class="request-content-title-container">
-                  <label class="request-content-label" for="request-content-title-box">Request</label>
-                  <div class="request-content-box" id="request-content-title-box">
-                    <span class="request-content-title-text"> {{ request.title }}</span>
-                  </div>
-                </div>
-                <div class="request-content-date-container">
-                  <label class="request-content-label" for="request-content-date-box">Date</label>
-                  <div class="request-content-box" id="request-content-date-box">
-                    <span class="request-content-date-text">
-                      {{ getDateFromFulltimeString(request.update_time) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="request-content-score-container">
-                  <label class="request-content-label" for="request-content-score-box">Score</label>
-                  <div class="request-content-box" id="request-content-score-box">
-                    <span class="request-content-score-text">
-                      {{ request.score }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </button>
-          </h2>
-          <div
-            :id="'collapse' + index"
-            class="accordion-collapse collapse"
-            data-bs-parent="#request-invitation-container"
-          >
-            <div class="accordion-body">
-              <div class="request-description-container">
-                <button class="make-proposal-button" type="button" @click="Propose(request)">
-                  Propose
-                </button>
-                <div class="request-description-content" v-html="request.content"></div>
-                <div v-for="(file, index) in request.attached_files" :key="index">
-                  <button @click="previewAttachedFile(request.id, file.document_id)">
-                    Preview{{ file.file_name }}
-                  </button>
-                  <button @click="downloadAttachedFile(request.id, file.document_id)">
-                    Download{{ file.file_name }}
-                  </button>
-                </div>
-              </div>
-              <div class="issuer-profile-container">
-                <!-- <label class="issuer-profile-label" for="issuer-achievement-container"
-                  >Issuer profile</label
-                > -->
-                <div class="issuer-achievement-container" id="issuer-achievement-container">
-                  <div class="issuer-achievement-isssuer-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-isssuer-content-div"
-                      >Name</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-isssuer-content-div"
-                    >
-                      <span class="issuer-achievement-issuer-text">
+                    <div class="request-content-box" id="request-content-issuer-box">
+                      <span class="request-content-issuer-text">
                         {{ request.issuer_profile.first_name }}
                         {{ request.issuer_profile.last_name }}</span
                       >
                     </div>
                   </div>
-                  <div class="issuer-achievement-stay-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-stay-content-div"
-                      >Stay on Freeleaps</label
+                  <div class="request-content-title-container">
+                    <label class="request-content-label" for="request-content-title-box"
+                      >Request</label
                     >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
-                      <span class="issuer-achievement-stay-content-text">
-                        {{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
-                      >
+                    <div class="request-content-box" id="request-content-title-box">
+                      <span class="request-content-title-text"> {{ request.title }}</span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-paid-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-paid-content-div"
-                      >Total payment</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-stay-content-div"
-                    >
-                      <span class="issuer-achievement-paid-content-text">
-                        {{ request.issuer_achievement.issuer.spending.total }}
-                        {{ request.issuer_achievement.issuer.spending.currency }}</span
-                      >
+                  <div class="request-content-date-container">
+                    <label class="request-content-label" for="request-content-date-box">Date</label>
+                    <div class="request-content-box" id="request-content-date-box">
+                      <span class="request-content-date-text">
+                        {{ getDateFromFulltimeString(request.update_time) }}
+                      </span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-deposit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-deposit-content-div"
-                      >Deposit</label
+                  <div class="request-content-score-container">
+                    <label class="request-content-label" for="request-content-score-box"
+                      >Score</label
                     >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-deposit-content-div"
-                    >
-                      <span class="issuer-achievement-deposit-content-text">
-                        {{ request.issuer_achievement.issuer.deposit.available }}
-                        {{ request.issuer_achievement.issuer.deposit.currency }}</span
-                      >
+                    <div class="request-content-box" id="request-content-score-box">
+                      <span class="request-content-score-text">
+                        {{ request.score }}
+                      </span>
                     </div>
                   </div>
-                  <div class="issuer-achievement-credit-container">
-                    <label
-                      class="issuer-achievement-label"
-                      for="issuer-achievement-credit-content-div"
-                      >Credit</label
-                    >
-                    <div
-                      class="issuer-achievement-content-container"
-                      id="issuer-achievement-credit-content-div"
-                    >
-                      <span class="issuer-achievement-credit-content-text">
-                        {{ request.issuer_achievement.activeness.credit }}</span
+                </div>
+              </button>
+            </h2>
+            <div
+              :id="'collapse' + index"
+              class="accordion-collapse collapse"
+              data-bs-parent="#request-invitation-container"
+            >
+              <div class="accordion-body">
+                <div class="request-description-container">
+                  <button class="make-proposal-button" type="button" @click="Propose(request)">
+                    Propose
+                  </button>
+                  <div class="request-description-content" v-html="request.content"></div>
+                  <div v-for="(file, index) in request.attached_files" :key="index">
+                    <button @click="previewAttachedFile(request.id, file.document_id)">
+                      Preview{{ file.file_name }}
+                    </button>
+                    <button @click="downloadAttachedFile(request.id, file.document_id)">
+                      Download{{ file.file_name }}
+                    </button>
+                  </div>
+                </div>
+                <div class="issuer-profile-container">
+                  <!-- <label class="issuer-profile-label" for="issuer-achievement-container"
+                  >Issuer profile</label
+                > -->
+                  <div class="issuer-achievement-container" id="issuer-achievement-container">
+                    <div class="issuer-achievement-isssuer-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-isssuer-content-div"
+                        >Name</label
                       >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-isssuer-content-div"
+                      >
+                        <span class="issuer-achievement-issuer-text">
+                          {{ request.issuer_profile.first_name }}
+                          {{ request.issuer_profile.last_name }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-stay-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-stay-content-div"
+                        >Stay on Freeleaps</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-stay-content-div"
+                      >
+                        <span class="issuer-achievement-stay-content-text">
+                          {{ request.issuer_achievement.activeness.days_of_staying_on }}
+                          day(s)</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-paid-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-paid-content-div"
+                        >Total payment</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-stay-content-div"
+                      >
+                        <span class="issuer-achievement-paid-content-text">
+                          {{ request.issuer_achievement.issuer.spending.total }}
+                          {{ request.issuer_achievement.issuer.spending.currency }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-deposit-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-deposit-content-div"
+                        >Deposit</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-deposit-content-div"
+                      >
+                        <span class="issuer-achievement-deposit-content-text">
+                          {{ request.issuer_achievement.issuer.deposit.available }}
+                          {{ request.issuer_achievement.issuer.deposit.currency }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="issuer-achievement-credit-container">
+                      <label
+                        class="issuer-achievement-label"
+                        for="issuer-achievement-credit-content-div"
+                        >Credit</label
+                      >
+                      <div
+                        class="issuer-achievement-content-container"
+                        id="issuer-achievement-credit-content-div"
+                      >
+                        <span class="issuer-achievement-credit-content-text">
+                          {{ request.issuer_achievement.activeness.credit }}</span
+                        >
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -163,8 +176,6 @@
         </div>
       </div>
     </div>
-      
-    </div>
   </div>
 </template>
 
@@ -202,7 +213,8 @@ export default {
       return DateUtils.FromJsonToDateString(fulltime)
     },
     previewAttachedFile(request_id, document_id) {
-      this.mnx_navToPdfContentViewer(request_id, document_id)
+      // !!! SHOULD NOT use PdfContentViewer which is designed for unlogged in users.
+      // !!! Instead, should have a dedicated pdf viewer which should follow the figma design.
       // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
       //   .then((response) => {
       //     let media_data = response.data
@@ -304,7 +316,7 @@ export default {
 }
 
 .request-description-container {
-  margin-bottom: 20px
+  margin-bottom: 20px;
 }
 
 .make-proposal-button {
@@ -319,7 +331,7 @@ export default {
 
 .issuer-profile-container {
   border-top: 1px solid #dee2e6;
-  padding-top: 15px
+  padding-top: 15px;
 }
 
 .issuer-profile-label {
@@ -350,7 +362,7 @@ export default {
 
 .issuer-achievement-issuer-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-stay-container {
@@ -362,7 +374,7 @@ export default {
 
 .issuer-achievement-stay-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-paid-container {
@@ -380,12 +392,12 @@ export default {
 
 .issuer-achievement-deposit-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-paid-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .issuer-achievement-credit-container {
@@ -397,6 +409,6 @@ export default {
 
 .issuer-achievement-credit-content-text {
   @extend .text-start;
-  font-weight: bold
+  font-weight: bold;
 }
 </style>
diff --git a/frontend/src/pages/user/requests/ProposalSubmitted.vue b/frontend/src/pages/user/requests/ProposalSubmitted.vue
index 65f01d9..e5e5d31 100644
--- a/frontend/src/pages/user/requests/ProposalSubmitted.vue
+++ b/frontend/src/pages/user/requests/ProposalSubmitted.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="submission-result-container">
     <div class="submission-result-card">
-      <img src="@/assets/images/submited.png" alt="freeleaps"/>
+      <img src="@/assets/images/submited.png" alt="freeleaps" />
       <span>Your proposal has been submitted!</span>
       <span>
         You can check the status of proposals in
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index bc640a5..30cf826 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -2,10 +2,10 @@
   <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"
+        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">Copy from existing proposals</h5>
@@ -46,7 +46,10 @@
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     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>
@@ -95,7 +98,9 @@
                 data-bs-parent="#template-item-container"
               >
                 <div class="accordion-body">
-                  <button class="load-template-button" @click="applyTemplate(template)">Apply</button>
+                  <button class="load-template-button" @click="applyTemplate(template)">
+                    Apply
+                  </button>
                   <div class="template-content-text" v-html="template.proposal.content"></div>
                 </div>
               </div>
@@ -141,8 +146,8 @@
               data-bs-target="#offcanvas-template"
               aria-controls="offcanvas-template"
             >
-            <svg-icon icon="btn-templates" />
-            Templates
+              <svg-icon icon="btn-templates" />
+              Templates
             </button>
             <button
               class="btn btn-link"
@@ -151,8 +156,8 @@
               data-bs-target="#offcanvas-copy-existing"
               aria-controls="offcanvas-copy-existing"
             >
-            <svg-icon icon="btn-history" />
-            Copy
+              <svg-icon icon="btn-history" />
+              Copy
             </button>
           </div>
         </div>
@@ -166,7 +171,12 @@
               <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}`">Payment</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -177,7 +187,12 @@
               <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}`">Duration</label>
                   </div>
                   <span class="btn-start">day(s)</span>
@@ -188,7 +203,12 @@
               <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}`">Notes</label>
                   </div>
                 </div>
@@ -410,7 +430,7 @@ export default {
       }
     },
     addStage() {
-      this.proposal.stages.push({...this.emptyStage})
+      this.proposal.stages.push({ ...this.emptyStage })
     },
 
     removeStage(index) {
@@ -458,7 +478,7 @@ export default {
 
 .making-proposal-content {
   border-radius: 12px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
 }
 
 .request-label {
@@ -471,7 +491,7 @@ export default {
   padding: 0;
   .accordion-list {
     margin: 0;
-    box-shadow: none
+    box-shadow: none;
   }
 }
 
@@ -494,7 +514,7 @@ export default {
   align-items: center;
   @extend .w-100;
   justify-content: space-between;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .header-bar {
@@ -511,7 +531,7 @@ export default {
 .proposal-label {
   font-size: 18px;
   font-weight: bold;
-  color: #0D1637;
+  color: #0d1637;
 }
 
 .load-templates-button {
@@ -558,7 +578,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .stage-item-content-label {
@@ -636,7 +656,7 @@ export default {
 
 .stage-more-action-container {
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .stage-item-delete-button {
@@ -662,13 +682,13 @@ export default {
   @extend .w-100;
   @extend .text-start;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 }
 
 .summary-content-container {
   @extend .flex-row-container;
   padding: 12px 0;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
 
   span {
     @extend .text-start;
@@ -676,7 +696,7 @@ export default {
     flex: 1;
     font-size: 12px;
     font-weight: 600;
-    color: #0D1637
+    color: #0d1637;
   }
 }
 
@@ -703,13 +723,13 @@ export default {
 .cancel-button {
   @extend .stop-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .submit-button {
   @extend .proceed-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .offcanvas-parent {
@@ -745,7 +765,7 @@ export default {
   padding: 12px 0;
   width: 100%;
   text-align: left;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
   .btn-link {
     padding: 0;
   }
@@ -765,10 +785,10 @@ export default {
 
 .milestone-input-container {
   width: calc(33.3% - 30px);
-  border: 2px dashed #9CB0F6;
+  border: 2px dashed #9cb0f6;
   .btn-start {
     background: transparent;
-    color: #0D1637;
+    color: #0d1637;
     border: none;
     display: flex;
     align-items: center;
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 8754bdd..6c6de4b 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -941,7 +941,7 @@ export default {
 .workspace-item-bar-left {
   @extend .flex-row-container;
   @extend .flex-grow-1;
-  padding: 0
+  padding: 0;
   // @extend .border;
   // @extend .me-3;
 }
@@ -979,7 +979,7 @@ export default {
 .project-item-text {
   @extend .text-start;
   @extend .mx-1;
-  margin-bottom: 0
+  margin-bottom: 0;
 }
 
 .project-request-container {
@@ -993,7 +993,7 @@ export default {
 .request-action-withdraw {
   @extend .btn;
   @extend .btn-link;
-  padding: 0
+  padding: 0;
 }
 
 .project-request-content {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 700b82a..1ec4c19 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -42,9 +42,7 @@
               data-bs-parent="#existing-request-item-container"
             >
               <div class="accordion-body">
-                <button class="btn btn-link" @click="copyRequest(existingRequest)">
-                  Copy
-                </button>
+                <button class="btn btn-link" @click="copyRequest(existingRequest)">Copy</button>
                 <div class="existing-request-content-text" v-html="existingRequest.content"></div>
               </div>
             </div>
@@ -94,7 +92,10 @@
               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)"
+                >
                   Apply
                 </button>
                 <div class="template-content-textarea" v-html="template.content"></div>
@@ -131,7 +132,7 @@
         data-bs-target="#offcanvas-template"
         aria-controls="offcanvas-template"
       >
-      <svg-icon icon="btn-templates" />
+        <svg-icon icon="btn-templates" />
         Templates
       </button>
       <button
@@ -141,7 +142,7 @@
         data-bs-target="#offcanvas-copy-existing"
         aria-controls="offcanvas-copy-existing"
       >
-      <svg-icon icon="btn-history" />
+        <svg-icon icon="btn-history" />
         Copy
       </button>
     </div>
@@ -188,7 +189,7 @@ export default {
     }
   },
   components: { FreeleapsEditor, InputSelector, SvgIcon },
-  mounted () {
+  mounted() {
     this.initProducts()
     this.initiateFromInput()
     this.fetchTemplates()
@@ -345,16 +346,16 @@ export default {
 }
 .request-issue-container {
   @extend .flex-colum-container;
-  box-shadow: 0px 0px 24px 0px rgba(212,211,227,0.5);
+  box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5);
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  overflow: hidden
+  overflow: hidden;
 }
 
 .action-bar {
   @extend .flex-row-container;
   @extend .justify-content-end;
-  border-bottom: 1px solid #E7E8EB;
+  border-bottom: 1px solid #e7e8eb;
   padding-top: 6px;
   padding-bottom: 6px;
 }
@@ -377,7 +378,7 @@ export default {
 .description-container {
   @extend .w-100;
   @extend .my-3;
-  flex: 1
+  flex: 1;
 }
 
 .input-description {
@@ -513,13 +514,13 @@ export default {
 .cancel-button {
   @extend .stop-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .submit-button {
   @extend .proceed-button;
   @extend .mx-3;
-  @extend .min-btn
+  @extend .min-btn;
 }
 
 .offcanvas-parent {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
index f3b895f..188507f 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Submitted.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="submission-result-container">
     <div class="submission-result-card">
-      <img src="@/assets/images/submited.png" alt="freeleaps"/>
+      <img src="@/assets/images/submited.png" alt="freeleaps" />
       <span>The request has been submitted!</span>
       <span>
         You can find it in
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 88b620e..5a2f43c 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -111,7 +111,7 @@ const router = createRouter({
 
     {
       name: 'pdf-content-viewer',
-      path: '/pdf-content-viewer',
+      path: '/pdf-content-viewer/:content_id',
       meta: { requiredRoles: [userRoleEnum.NONE] },
       components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
       props: true

From b12b3d78ace58d085d4fc9fcd006047f963c88a7 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Thu, 13 Jun 2024 19:37:20 -0700
Subject: [PATCH 11/17] remove redundate parameter request_id from
 retrieve_blog_content in pdf content viewer

---
 frontend/src/pages/public/PdfContentViewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index ff6af39..e8300f1 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -23,8 +23,8 @@ export default {
     this.retrieve_blog_content(this.content_id)
   },
   methods: {
-    retrieve_blog_content(request_id, document_id) {
-      ContentApi.retrieve_blog_content(request_id, document_id).then((response) => {
+    retrieve_blog_content(document_id) {
+      ContentApi.retrieve_blog_content(document_id).then((response) => {
         this.content_media_data = { url: response.data }
       })
     }

From 3f878b4737f269c27833a578c7d208acdfd2326a Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Fri, 14 Jun 2024 12:34:22 -0700
Subject: [PATCH 12/17] add port for lab and machine translation

---
 frontend/src/mixins/navigator.js            |  3 ++
 frontend/src/pages/lab/Home.vue             | 53 +++++++++++++++++++++
 frontend/src/pages/lab/translation/Home.vue | 31 ++++++++++++
 frontend/src/plugins/router/router.js       | 19 +++++++-
 4 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/lab/Home.vue
 create mode 100644 frontend/src/pages/lab/translation/Home.vue

diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 9a879e4..70a1035 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -122,6 +122,9 @@ export default {
     },
 
     //common
+    mnx_navToLink(path) {
+      this.$router.push('/' + path.replace(/^(\/)+/, ''))
+    },
     mnx_navAfterSignedin() {
       if (this.mnx_isUserAuthenticated()) {
         switch (this.mnx_getUserRole()) {
diff --git a/frontend/src/pages/lab/Home.vue b/frontend/src/pages/lab/Home.vue
new file mode 100644
index 0000000..b89cebe
--- /dev/null
+++ b/frontend/src/pages/lab/Home.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="directories_containter">
+        <div class="directory_container" v-for="(directory, index) in directories" :key="index"
+            @click="view_link(directory)">
+            <p>{{ directory.title_text }}</p>
+            <img class="directory_cover_image" :src="directory.cover_picture" />
+            <p>{{ directory.summary_text }}</p>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'LabHome',
+    components: {},
+    computed: {},
+    mounted() {
+    },
+    methods: {
+        view_link(directory) {
+            this.mnx_navToLink(directory.path)
+        }
+    },
+    data() {
+        return {
+            directories: [
+                {
+                    "path":"machine-translation",
+                    "title_text": "Machine Translation",
+                    "summary_text": "Translate lanuages leverage AI power",
+                    "icon_picture":"",
+                    "cover_picture":""
+                }
+            ]
+        }
+    }
+}
+</script>
+  
+<style scoped lang="scss">
+.directories_containter {
+    @extend .container;
+}
+
+.directory_container {
+    @extend .container;
+    cursor: pointer;
+}
+
+.directory_cover_image {
+    height: 20vh;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
new file mode 100644
index 0000000..a8248e1
--- /dev/null
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="input_containter">
+        <input type="text" v-model="input_text">
+    </div>
+</template>
+<script>
+export default {
+    name: 'TranslationHome',
+    components: {},
+    computed: {},
+    mounted() {
+    },
+    methods: {
+        translate(text) {
+            this.mnx_navToLink((directory.path))
+        }
+    },
+    data() {
+        return {
+            input_text: null
+        }
+    }
+}
+</script>
+  
+<style scoped lang="scss">
+.input_containter {
+    @extend .container;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 5a2f43c..bea3f9b 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -62,6 +62,10 @@ import FooterGuest from '../../footers/FooterGuest.vue'
 import HeaderGuest from '../../headers/HeaderGuest.vue'
 import HeaderUser from '../../headers/HeaderUser.vue'
 
+//Lab
+import LabHome from '../../pages/lab/Home.vue'
+import TranslationHome from '../../pages/lab/translation/Home.vue'
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -372,8 +376,21 @@ const router = createRouter({
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
       components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
+    },
+    {
+      name: 'lab-home',
+      path: '/lab-home',
+      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
     }
-  ],
+    ,
+    {
+      name: 'machine-translation',
+      path: '/machine-translation',
+      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
+    }
+    ],
 
   linkActiveClass: 'active'
   /*    scrollBehavior(_, _2, savedPosition) {

From 749d0fe47f3e97dff0e76aacd7390facc0943ffb Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Fri, 14 Jun 2024 12:37:08 -0700
Subject: [PATCH 13/17] user FooterUser for all logged in pages

---
 frontend/src/plugins/router/router.js | 45 ++++++++++++++-------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index bea3f9b..135b2e9 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -58,6 +58,7 @@ 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'
@@ -180,7 +181,7 @@ const router = createRouter({
       name: 'my-workspace-projects',
       path: '/my-workspace-projects',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProjects, footer: FooterGuest, header: HeaderUser },
+      components: { default: MyWorkspaceProjects, footer: FooterUser, header: HeaderUser },
       props: false
     },
 
@@ -188,7 +189,7 @@ const router = createRouter({
       name: 'project-manage',
       path: '/project-manage/:projectId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProjectManage, footer: FooterGuest, header: HeaderUser },
+      components: { default: ProjectManage, footer: FooterUser, header: HeaderUser },
       props: true,
       children: [
         {
@@ -233,14 +234,14 @@ const router = createRouter({
       name: 'my-workspace-requests',
       path: '/my-workspace-requests',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceRequests, footer: FooterGuest, header: HeaderUser },
+      components: { default: MyWorkspaceRequests, footer: FooterUser, header: HeaderUser },
       props: false
     },
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -257,7 +258,7 @@ const router = createRouter({
       name: 'request-issue2',
       path: '/request-issue/:loadFrom/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -274,28 +275,28 @@ const router = createRouter({
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
+      components: { default: RequestSubmitted, footer: FooterUser, header: HeaderUser },
       props: true
     },
     {
       name: 'request-deposit',
       path: '/request-deposit/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestDeposit, footer: FooterGuest, header: HeaderUser },
+      components: { default: RequestDeposit, footer: FooterUser, header: HeaderUser },
       props: true
     },
     {
       name: 'request-deposited',
       path: '/request-deposited/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestDeposited, footer: FooterGuest, header: HeaderUser },
+      components: { default: RequestDeposited, footer: FooterUser, header: HeaderUser },
       props: true
     },
     {
       name: 'my-workspace-proposals',
       path: '/my-workspace-proposals',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProposals, footer: FooterGuest, header: HeaderUser },
+      components: { default: MyWorkspaceProposals, footer: FooterUser, header: HeaderUser },
       props: false
     },
     //message hub
@@ -303,34 +304,34 @@ const router = createRouter({
       name: 'message-hub',
       path: '/message-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'message' },
-      components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
+      components: { default: MessageHub, footer: FooterUser, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Providers' },
-      components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
+      components: { default: ProviderHub, footer: FooterUser, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Requests' },
-      components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
+      components: { default: RequestHub, footer: FooterUser, header: HeaderUser }
     },
     {
       name: 'make-proposal',
       path: '/make-proposal/:requestId/:loadingMode',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MakeProposal, footer: FooterGuest, header: HeaderUser },
+      components: { default: MakeProposal, footer: FooterUser, header: HeaderUser },
       props: true
     },
     {
       name: 'proposal-submitted',
       path: '/proposal-submitted/:proposalId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProposalSubmitted, footer: FooterGuest, header: HeaderUser },
+      components: { default: ProposalSubmitted, footer: FooterUser, header: HeaderUser },
       props: true
     },
 
@@ -338,7 +339,7 @@ const router = createRouter({
       name: 'request-manage',
       path: '/request-manage/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestManage, footer: FooterGuest, header: HeaderUser },
+      components: { default: RequestManage, footer: FooterUser, header: HeaderUser },
       props: true
     },
     {
@@ -347,7 +348,7 @@ const router = createRouter({
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: {
         default: ReviewProposalBeforeAccetance,
-        footer: FooterGuest,
+        footer: FooterUser,
         header: HeaderUser
       },
       props: true
@@ -357,38 +358,38 @@ const router = createRouter({
       name: 'user-profile',
       path: '/user-profile',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserProfile, footer: FooterGuest, header: HeaderUser }
+      components: { default: UserProfile, footer: FooterUser, header: HeaderUser }
     },
     {
       name: 'user-finance',
       path: '/user-finance',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserFinance, footer: FooterGuest, header: HeaderUser }
+      components: { default: UserFinance, footer: FooterUser, header: HeaderUser }
     },
     {
       name: 'user-history',
       path: '/user-history',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserHistory, footer: FooterGuest, header: HeaderUser }
+      components: { default: UserHistory, footer: FooterUser, header: HeaderUser }
     },
     {
       name: 'work-space',
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
-      components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
+      components: { default: Workspace, footer: FooterUser, header: HeaderUser }
     },
     {
       name: 'lab-home',
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
+      components: { default: LabHome, footer: FooterUser, header: HeaderUser }
     }
     ,
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
+      components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
     }
     ],
 

From cc194be0d62ac5caece500277d10621a84cb52ca Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Fri, 14 Jun 2024 13:22:15 -0700
Subject: [PATCH 14/17] add the supporting to machine translation

---
 frontend/src/pages/lab/translation/Home.vue | 27 ++++++++++++++-------
 frontend/src/utils/backend/index.js         |  1 +
 frontend/src/utils/backend/lab.js           | 16 ++++++++++++
 frontend/src/utils/index.js                 |  3 ++-
 4 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/utils/backend/lab.js

diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
index a8248e1..39129f8 100644
--- a/frontend/src/pages/lab/translation/Home.vue
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -1,9 +1,11 @@
 <template>
     <div class="input_containter">
-        <input type="text" v-model="input_text">
+        <input type="text" v-model="input_text" @keyup.enter="translate($event)">
+        <p>{{ translated_text }}</p>
     </div>
 </template>
 <script>
+import { LabApi } from '../../../utils/index'
 export default {
     name: 'TranslationHome',
     components: {},
@@ -11,16 +13,23 @@ export default {
     mounted() {
     },
     methods: {
-        translate(text) {
-            this.mnx_navToLink((directory.path))
-        }
-    },
-    data() {
-        return {
-            input_text: null
+        translate($event) {
+            LabApi.translate_text(this.input_text)
+                .then((response) => {
+                    this.translated_text = response.data
+                })
+                .catch((error) => {
+                    this.mnx_backendErrorHandler(error)
+                })
+            }
+        },
+        data() {
+            return {
+                input_text: null,
+                translated_text: null
+            }
         }
     }
-}
 </script>
   
 <style scoped lang="scss">
diff --git a/frontend/src/utils/backend/index.js b/frontend/src/utils/backend/index.js
index 496acf5..2cbf39b 100644
--- a/frontend/src/utils/backend/index.js
+++ b/frontend/src/utils/backend/index.js
@@ -6,3 +6,4 @@ export { ProviderHubApi } from './providerHub'
 export { MessageHubApi } from './messageHub'
 export { HistoryApi } from './history'
 export { ContentApi } from './content'
+export { LabApi } from './lab'
\ No newline at end of file
diff --git a/frontend/src/utils/backend/lab.js b/frontend/src/utils/backend/lab.js
new file mode 100644
index 0000000..bcdb720
--- /dev/null
+++ b/frontend/src/utils/backend/lab.js
@@ -0,0 +1,16 @@
+import { backendAxios } from './axios'
+import { userUtils } from '../store/index'
+class LabApi {
+    static translate_text(input_text) {
+        let jwt = userUtils.getJwtToken()
+        const request = backendAxios.post('/api/lab/translate_text',
+            {
+                input_text: input_text
+            },
+            {
+                headers: { Authorization: `Bearer ${jwt}` }
+            })
+        return request
+    }
+}
+export { LabApi }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index b4eecd6..a6c7d79 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -6,7 +6,8 @@ export {
   ProviderHubApi,
   MessageHubApi,
   HistoryApi,
-  ContentApi
+  ContentApi,
+  LabApi
 } from './backend/index'
 
 export { userUtils, userProfileUtils, requestIssueUtils, requestHubUtils } from './store/index'

From 6d898a3b49e67cdecc9ebfe0407af2a0c4401717 Mon Sep 17 00:00:00 2001
From: Mike Liao <mikel@freeleaps.com>
Date: Fri, 14 Jun 2024 21:59:35 +0000
Subject: [PATCH 15/17] Added lab-translation.png to
 /frontend/src/assets/images

---
 frontend/src/assets/images/lab-translation.png | Bin 0 -> 3578 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 frontend/src/assets/images/lab-translation.png

diff --git a/frontend/src/assets/images/lab-translation.png b/frontend/src/assets/images/lab-translation.png
new file mode 100644
index 0000000000000000000000000000000000000000..1acc16895835f21fba8544da9a9311c9aee3e3b2
GIT binary patch
literal 3578
zcmaKvcQhN0yT*eO9b(m}Z(1o@p+>EWJ!_PrR#8-J4H|n^?I=oZwOX|)f?7pIW6vs)
zP%8+ntyUVr?f2eu&$;K^bAIn1@AI7Vp7Z?m{_%NU85w9ZUE;X}005YDbu^6u02<(5
zk71<yyOnp$MgPjak-q8u^Ye4H=;M2yV^dR8KY#u-@d%<)seg~t)6--!SuB)%LLv8k
zTa}HV6jYCn3=a_I)*2fd`}+F!_V(1{&LPUriA17G#BZ3-bZjl<kbGX;Nx|Z&kCKi9
zi~o3gd2akZTirUV?53DnJpMZTEjH_YNaY_c*=Md{@c{|x4I?LI^(_yaefUMi%$|qX
z`bVUsq{u%sn<kyMboID<c$lS<qoSg8|IVx9guLS1++0aXNfs8CqN1X=Wi@r}U0JOZ
z*Ie?@9QDftRZ8d4eJe*pxLa^^{I%PHo&{vMvxlCAyN#XgIG)tlIiYK4bK}O1=u(;A
z0Kk>6x|(XHfq7f`h>#CDJh6UVY<W%%4`e5vN#}G)U$6qd(t4=qEZOmEWPA1eJcm@h
zbVazDVc2L4^<@T<QJGtLY+538b@XBXsUTiG&WZcphOMJmboRm^NkM2M%u(#9(*2k4
zhNq+0Dh+IQ-}0CrA#t1?mF=e@$!QP7z;Cb4IzS%fC@Bt?wAWtlZumZ@I(Xs>V4==g
z51;r#RiQy<BcGYq3f*CO3lH?)(M75rbyG-$lL)MC@NcR5up;u9)I@S?cD)EF#<R}b
znIc~!k=kF@Y{yEi>3kf&R$}-rf^Mknr$RN7lqI!-G;4c9kQTfUQVOn=NqQ)iX&*Eg
z;r$*A1^x#?@sSqeydfXJaZn)NV8qXfwKfgdd;X@*?~8XUqozjnXgb{u{k_OX9aawc
z9!jrtePdZ9^j;|)SeRV`N6T+NF+o3lyemHc$={p2{HN{q4=nzmV4yBU5NM^GH5uc4
z!<SF409)+j_KEbWQ48tUx15M{y&z{NlGP?hJ)=@TzF{q_sM*kZ-um2lH^)}^*XOVK
ziBU$pk>-2Y&(Vn7tmBnk4jA|Cx3sBN^}R0rC(eqiM(ab{2#K(i_ptYS;GC9-4Km!1
zXjLZKZL4%0r6Lo;T@PofE#7)jOr?cEw-GgER_pZiD#rGi7K$jdUhqf1y_0}}Bd)uO
z9nA}-@g{*qeF=}k^%4(Oz&vk#$Ubf-58Fkq$juxw0^7qB?+ifqxRqIe2%FF>caZnO
zI>lEdmiF@UR0lp0K8<e?+Vg^io*h{?E<@YbPwIG0)Vuc3cG{*32#-SgPXg?kj~#~B
z-g=Yq0fGhT@Au=oTkW~EnjCZVL|ZHf?}Oql$(B?NwE&hC<w8$ayK()|Z#~K%sK&w%
z^n!)@Bj`X1kwDO<wi_$2bG{I20SqFLJyMp>H`~=?=~qNE(5#rFrp{Tm%!0Co16co)
zP~PF)7%2v9IE==*Ln7b6E8Pz2434e#Tr1v(+xIM|>0t8nu-%@R<?!9b^tdaX365Pw
zgaS3Zhal_kPnrAZuqLHL*fn4w&Q^)3ZI0-)@9YZz79Q4rp0i+b_k6rH1_CNx|G><u
zz>2-Dq2f7C7Nw_MtGc5giDvg=u{wOc_BwVXW#<_i=<CXA1@UklNDL3WrJSCAr4wPN
z7raoPcXwxCl140k0T)?^!`WOUxWO0^=g{!z9dBCDSIRx)`E_FW32#H`I9o3XWNMvL
zKdhQrGI*uM>@I!f0>pk{XcL3v0jY;@dp3tG+b)dV^j0BaqOka~@n3+6;;TuqBF+?A
z=7KGHI^kisVXXHhkb2ujVwlt>?A&hwofQ@E(m{s@y@vhjvSTqCg0Yi1aB>we&n#i*
zjj+*xuo=cg-K~GOx-}z7PCH}|lJN!i*@8w-vHq78wL&ytaksgfD^3YcLl>Y&v*umF
zu^JxP{40{cbDQXz4i(hEEzgP{^|=*<<YOzHUbs3&#+>6fsL=Ra7J0V|*LtsjW<uwN
z<O#Uhx?OfT^1j{Y;x4t8E+)VD`3tSTFov-kn&9YrUwG#NJ6IrL<;1dWdHTHjX+h#u
zm2A4*)#WpAIs-{po8)D*TW=-nQh2L0t^Yn}vimIoqS4K&r5XH1ur`iUN#po|c3{0i
z6#FeXMd2ZvpFEZtgdw!f!TK2uD2}U0$KQ)^D=P}!Tl<`jDN%m6p-h(zv~pIca;0%u
z*L*w3kmH}u>o{&)zL*YHjk68?eY?cXN|{6aDlS@p<GZOx<$cMWB01CDb<a<9Os4k&
z-8U|P`)7qFPn#9IWb8Z6wuzX3Jfk7%=n5;#CU%EoulDJk<GGeLu7RecRU-kta*k)=
z7*;mqPfXRed{R_ra|rD26vS*vop2-jlCcLNwJ^URYM0H$IEIT_8cYj9gzgDp_5dKB
z7M8Zr+QpwszF@KE_PC2kh!90M-S0JW*^$ms5a`ly2icrVw<f~G3-sb)1femlgfB7t
zt>wiBH#Y#pXlxM8t-N>3NYU;Jw%yz&1YtJTbXTi67u)!JwHs-4D5SCO0|J^)9O~2n
zm>0ZCU={VQ1NA54+CBNAnYDIua`LrFuX%;DQf@2R7#{gxx_O?+aidLKC@@HSz66t!
z(F9V;qab@Ad|oAquK=FldF%t(F7;`MiHd73cjN`uZ)?D>#yYrUe_#{EhXFuYXH$G&
zq*e@;c1+o|M91Q_xUeJeY8FC+BWn`Y{W4AU_aF3YI(J-3e0(2`%bXhirh}}Vh=oG@
zr5(G{p2Cm`o*t;0qT3IY#|EvW!N`w!{;0k*%|m9r$p<ZpZWhxVv-ONU2|~!Ykb=U0
z{JmY5JiCABb_X6pUsA)59U?ht@xqIN7(QpqVoU^C$y6m9TSG3q8*|pc3IaD36t<34
zz(SMez=jbTFZ#^2X+b^XM}es*?~m-)|H$ns;X^6i;#*4Z`ZJ{0nfVnfZOZbGR=8SP
z3Dih@C<&)({d(&It1eFoy|ScnPVAitAtZ8;8RcF6=9?6fVPF-bhThcFrva^$Ye)-!
z3ZU_Gy5^Y9fa36UVGsM^nu<2iGfwf;Kcy*+A`b5XfYvR{z}NI^jI09e6RLkCGbjRX
zt{kqK+<x~)ZAT*xp$6vE6xF*6-MEVWQHHaMj;=DYc&YI_fr8paW||A=u>4$2@FsX}
zM_vNx%u{a2Ah&3xM^3-eYh<<P;M3(**6<RZHCOwj*!0fTCj!?DO_S?2jYrkfX2q`x
z-YI{K*tKJ7-Y=v?S*}+(e`8#%w(fYmC=;3r{q!z_7L^5ZLlE3+MH?Sq&@U=*Rlb@a
zs-S(XW@clYQeto<9<22g-=VG%7xjrT-*NGwwZDlbOlO+;R`D++bjpJzrWXm@oN4^1
z<&*kGW6$a5{LYpO&e6m~3Bk3*qHH2YjIrms{r6+RzAD#2J-MF6#9raOuuOWs^v0Q!
z-1e0ui^;_6esbfcx?x0j+L;KM=Yx3yURDI#b}rNs<=*6W?`3G}W<YXI#9GK&l_8(c
zXA6BZ{#3`{)R2`6(X1B*%3?oM5<+{oxOPaY))-FE^_D3{C-XF}m+)s6$2-n=T}0d1
zk7TOCxeC?K3dV(a2Z|>_s{ALvJ=NmVpHeb+EUQ-ODTM8njIcH~S?7JKB{EV-eoE5a
zNCeqQA2RQ$+;uu~Bw$fn@Y&&&l9t=ifZa*Tv=IcAI)IxK^fvtS=dv2+DJN7wS*>a7
z%xG?2putxBuqly7d-}nq>a7z(dfnFhSp_8Qt@4W(hd$wSUtiqcx?k2I6*oU+qVmB$
z=4Pz?+;K(B{t62<kEhK-<Y5q=%Svxu+J8V*M8ZadbjmyahY|ekjM+x_Nq$!*b5W=!
z$Sv+aaM8_wKu^#7jbF&+&<*9Aj`Pg}i4X}v9EyZ72Bp)HROQ@ByJ<Jz_>(lBehU|N
z6-SZ3+~f|U2EQ>TAy;_c>h}_d)E=bK*_ZIA@A{0O{v?>n?P}kj*;$tr`WMCe=}}La
zy|^kUBfiug?KoaCf4X$oze$G9|0Y2}s26o7ZBx9UM(#c&%NW`=pB|-|ap!*^4rT2F
zE9~sIkWS+JUuOG1`1b#7IF_CS06*i}&SEO-BYqR#4HSPtQT%U=ROCIAs_YIk@$;uB
zI)As}Z116|J3sAv`|IVhRkgoYO7UbMUtM{)=JwL?fqYAONyTLY&D{VA!hUL?tl^2Q
zeOl<OW%ooC((GZI;jgzJihsi#=h8Nvy!u;>B5Frmj%yp_qCkp+yIgN%c4y{J9j3o8
zpJoq8pt>}saT+qskX};ws^zgD`%P&mD%~)|5}UBJbv8m*N7~pw`_5Kvwg>ydGs*DS
z0oViEFmQT*86mF-VrYoCg~Gl732J5}hT0Z%eBM|R4dA5Rlal;>O$zmDFE|++r?wqh
z=BhBF1_w<<zGJ6LF#**!t}o|Z%j#?BLWs#hSZfnzl#&EGaf1zNVtD$csxN?b)Pa1h
za(KRe-Gd-b_0W;5C)SC5%QN{-w_Do1ppajKJ;*VO^I?W$l2?80KWBF?zA_6?Z-?L6
zGYWI??vKdoO)gYKjIMfGVxr&F&_Zqijn7Ky^cgcRPr{w$tT`ZnM;-ib$3ITZGKQ8b
z0hSPfQh9XfYM@a}{`^OU^bEV_50|)CBZ&g$!+V?z>bqPS0|rmRgu?4*o}H+$IpW}H
U0sO9i`x-#^zJX?qx?SXd0n?)V?*IS*

literal 0
HcmV?d00001


From d011e6c286c7b4d44d7b5fe03d02a2980ce36485 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Fri, 14 Jun 2024 15:35:42 -0700
Subject: [PATCH 16/17] add some styling to lab home

---
 frontend/src/pages/lab/Home.vue             | 72 +++++++++++----------
 frontend/src/pages/lab/translation/Home.vue | 63 +++++++++---------
 frontend/src/plugins/router/router.js       |  5 +-
 frontend/src/utils/backend/index.js         |  2 +-
 frontend/src/utils/backend/lab.js           | 24 +++----
 5 files changed, 87 insertions(+), 79 deletions(-)

diff --git a/frontend/src/pages/lab/Home.vue b/frontend/src/pages/lab/Home.vue
index b89cebe..a725a7b 100644
--- a/frontend/src/pages/lab/Home.vue
+++ b/frontend/src/pages/lab/Home.vue
@@ -1,53 +1,55 @@
 <template>
-    <div class="directories_containter">
-        <div class="directory_container" v-for="(directory, index) in directories" :key="index"
-            @click="view_link(directory)">
-            <p>{{ directory.title_text }}</p>
-            <img class="directory_cover_image" :src="directory.cover_picture" />
-            <p>{{ directory.summary_text }}</p>
-        </div>
+  <div class="directories_containter">
+    <div
+      class="directory_container"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
+      <p>{{ directory.title_text }}</p>
+      <img class="directory_cover_image" :src="directory.cover_picture" />
+      <p>{{ directory.summary_text }}</p>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    name: 'LabHome',
-    components: {},
-    computed: {},
-    mounted() {
-    },
-    methods: {
-        view_link(directory) {
-            this.mnx_navToLink(directory.path)
-        }
-    },
-    data() {
-        return {
-            directories: [
-                {
-                    "path":"machine-translation",
-                    "title_text": "Machine Translation",
-                    "summary_text": "Translate lanuages leverage AI power",
-                    "icon_picture":"",
-                    "cover_picture":""
-                }
-            ]
-        }
+  name: 'LabHome',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    view_link(directory) {
+      this.mnx_navToLink(directory.path)
     }
+  },
+  data() {
+    return {
+      directories: [
+        {
+          path: 'machine-translation',
+          title_text: 'Machine Translation',
+          summary_text: 'Translate lanuages leverage AI power',
+          icon_picture: '',
+          cover_picture: 'src/assets/images/lab-translation.png'
+        }
+      ]
+    }
+  }
 }
 </script>
-  
+
 <style scoped lang="scss">
 .directories_containter {
-    @extend .container;
+  @extend .container;
 }
 
 .directory_container {
-    @extend .container;
-    cursor: pointer;
+  @extend .container;
+  cursor: pointer;
 }
 
 .directory_cover_image {
-    height: 20vh;
+  height: 20vh;
 }
 </style>
-  
\ No newline at end of file
diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
index 39129f8..32994c7 100644
--- a/frontend/src/pages/lab/translation/Home.vue
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -1,40 +1,45 @@
 <template>
-    <div class="input_containter">
-        <input type="text" v-model="input_text" @keyup.enter="translate($event)">
-        <p>{{ translated_text }}</p>
-    </div>
+  <div class="input_containter">
+    <input class="input_text" type="text" v-model="input_text" @keyup.enter="translate($event)" />
+    <p class="translated_text">{{ translated_text }}</p>
+  </div>
 </template>
 <script>
 import { LabApi } from '../../../utils/index'
 export default {
-    name: 'TranslationHome',
-    components: {},
-    computed: {},
-    mounted() {
-    },
-    methods: {
-        translate($event) {
-            LabApi.translate_text(this.input_text)
-                .then((response) => {
-                    this.translated_text = response.data
-                })
-                .catch((error) => {
-                    this.mnx_backendErrorHandler(error)
-                })
-            }
-        },
-        data() {
-            return {
-                input_text: null,
-                translated_text: null
-            }
-        }
+  name: 'TranslationHome',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    translate($event) {
+      LabApi.translate_text(this.input_text)
+        .then((response) => {
+          this.translated_text = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     }
+  },
+  data() {
+    return {
+      input_text: null,
+      translated_text: null
+    }
+  }
+}
 </script>
-  
+
 <style scoped lang="scss">
 .input_containter {
-    @extend .container;
+  @extend .container;
+  @extend .m-3;
+}
+.input_text {
+  @extend .w-100;
+}
+.translated_text {
+  @extend .w-100;
 }
 </style>
-  
\ No newline at end of file
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 135b2e9..c2ee0ba 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -383,15 +383,14 @@ const router = createRouter({
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: LabHome, footer: FooterUser, header: HeaderUser }
-    }
-    ,
+    },
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
     }
-    ],
+  ],
 
   linkActiveClass: 'active'
   /*    scrollBehavior(_, _2, savedPosition) {
diff --git a/frontend/src/utils/backend/index.js b/frontend/src/utils/backend/index.js
index 2cbf39b..cf5baa1 100644
--- a/frontend/src/utils/backend/index.js
+++ b/frontend/src/utils/backend/index.js
@@ -6,4 +6,4 @@ export { ProviderHubApi } from './providerHub'
 export { MessageHubApi } from './messageHub'
 export { HistoryApi } from './history'
 export { ContentApi } from './content'
-export { LabApi } from './lab'
\ No newline at end of file
+export { LabApi } from './lab'
diff --git a/frontend/src/utils/backend/lab.js b/frontend/src/utils/backend/lab.js
index bcdb720..eb493f3 100644
--- a/frontend/src/utils/backend/lab.js
+++ b/frontend/src/utils/backend/lab.js
@@ -1,16 +1,18 @@
 import { backendAxios } from './axios'
 import { userUtils } from '../store/index'
 class LabApi {
-    static translate_text(input_text) {
-        let jwt = userUtils.getJwtToken()
-        const request = backendAxios.post('/api/lab/translate_text',
-            {
-                input_text: input_text
-            },
-            {
-                headers: { Authorization: `Bearer ${jwt}` }
-            })
-        return request
-    }
+  static translate_text(input_text) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/lab/translate_text',
+      {
+        input_text: input_text
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
 }
 export { LabApi }

From 557ce8446849aa3ea254112f35faf390a21cb10c Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Sun, 16 Jun 2024 04:37:48 +0800
Subject: [PATCH 17/17] update

---
 frontend/src/assets/images/qr-code.png        |  Bin 0 -> 2073 bytes
 frontend/src/headers/HeaderUser.vue           |   22 +
 .../src/pages/user/account/UserProfile.vue    | 1094 +++++++++--------
 3 files changed, 627 insertions(+), 489 deletions(-)
 create mode 100644 frontend/src/assets/images/qr-code.png

diff --git a/frontend/src/assets/images/qr-code.png b/frontend/src/assets/images/qr-code.png
new file mode 100644
index 0000000000000000000000000000000000000000..b00312bc57b33f61f330e17c02ec16cff027e25e
GIT binary patch
literal 2073
zcmZvdSv(tv7RG}xDM8d$YKh(GA`(kYTB-<Y-zT~<5j2Wg6Rj<+sJ*sYQ=zJ6n8dX!
zD!o(%wYCkTv{cEE6b-4RiK{Pn?!$dJ=X*O3-~V^MFWt?>PEuT18~^}FI@sHI94h9=
zfW!`W#A1=xp&W^@M@Inw60$!=2vAmW3;_6P*uloi3tzz@J4eo<6kZ+B{w|^SdyDv@
zwVTDGMRtKC1x8CxI$qdQuQ5S*La#AOm|?aNdeRH4u>*W3c@LeM?`cwEpa(G4=|)5H
z9U$655K5WPL2Pi3fFi&ob$>|&7%OL^9{(;@^!mDa=!^Re)w~qkUf`OWk|QbB|I;8y
zIF|_jta!9W&$_&GTey%dq(4tFN>pi8FTPoFV+#|EU_p{S;q_xsS193}!NzB~Veqqq
z`&VHsaACI%!3aPPE8nDCuz1p;EV1A<ctaLXr!?neNk3FFl&jJDWDS}33GSEc@1E$D
z0#LNky9fw=I&X6!pxitfbLad=e^auOkc_xl4t*U(HTN9VolMwcUTWNVVxxdGE81B7
zK0U~<UJ=jd6$h1KD(U;~n2NAHe4|S|Tm{AgDBS{elg(<EV$nxz+GyM(-N;C1*G%`E
zJe-;gUNPCSbkxa^%Z?J&Xe=O{HntvLLPR<r9`Q`S_nsP#f(-BGrjCr^mdfn5P1eJX
z+D`n;eKU=_BsJEsf(06ZwQx(!_iadrkLM~%!KF!kADUwwnHpu=)uQg;Q}+Xct>mmF
zs*m|WUXBy>2YO<Bu#9nmR773badrB1)E(RCy);~WOzT=6SXJl@c&9R)Ak(d2rN$T!
z$yN;=9ZHp{5~ZBbs<g6G4BOu}c=;sfjqG)H2!}DQ{#HL0t-Rj!3)~_&+p^I!YQi)n
z?TQk4dnmLX+cDH~A_f2aMxT#A>cN|I)|@s>fNtF&+%_=z4Z+eLGptbtCz@@t4g@Iz
zaw~(=<S|xL@BnoBJ#XKjD7TAv+32iTQiBIJ!<nL2qL#*vMOpyIuT{Mt=!|&n?@F>j
zT)I_Z>GN4UUvM!JA*XW=vaww%16oW}<wv=aOl5n7ep}bgYh)HwMV0fDWF8Vmk1JVE
zTFjMF(|K!qLD`q5EG<p<O4xovu&JwwIj^f^teQl00PBk#e#~}|aPO#g;mo>EJ_^X7
zB79U3%ZH|i=rTr|XSGe^pQz!bdpr63R_YrwAz|e3sEbj4uJfO)R%r7yQ0*ifI!^gr
zo{x${w>x<Bt_US701q;&zm-lwQz0j)Q_Htjx*F)Wk8NRgj_Ew#^j%!t;->wSD9h>O
z5&_$I-POg>IP@P?|A!q)YYh@0b>4W>DVrS^&X4XC(Uz6>?V1ZT51lhJR9(h|Ak%H2
zXUuP|3VR}m5b{?Hk+SlzukRVHFa0(n%E_m{Von`BgkQI`5bCSdWb#U1XcPaee9lf3
zFz-%opL(2k8n@gAX^#2OamO=A_0rgLcCt~7Yi_M;jGX4&T#I91KwI708<?&R87tv+
zf5753y(!RH))0%G2PS*xuz!WOAmJ7eMvrT$<*qk%zE!SE<6Vj28a!iuKD@ja;vb|r
z6PDuQhsvU6`RJ2_Jg_{b1U%B2rq{;@E;2Ncn(SmkP@c1@v9A59E$8VgV@~a=P*~Uz
zb??`e%U4QzwfZztloe|xLc-%!@x>>$IJVbObQ^xSjt8)j6f-zz!k1vGT$bp|D#Ggi
zjd>xWM?3wA7c2WJGpwMMlUB1oHvepO)@$qH6{8kt#(y0a*M!R+ofsGIjrN-Ca&jfz
z1umwa|LSgMKN<WZlA0e3V9`IkfQE2d0JK#>)XIwGw_opHC`a39)~yD&sI)ytRQGuQ
z<)@epg3Es^)`z;N74s=`PbbRR3LN;P+wuM3Q@xV~Rb*I#CQ%f?T!<Jhbl1y136{Mc
z!KH^974=d_7&c0x=veO0xhLqI3L<W>7L+Wk_=B~c-^~vgPj_CTy-F&7pR{=tVtKl$
z{%gIPQlO{<?W}b1OiZA0aJLc82B|3j&zGaVP{PbZTW1%b8se)U4J(SCs*;rA4Co`P
z&6h#nxff7yvxjFf!WCZ<pEO-`O>PuT&H-~W-%3}T10xlbU=x{-z>YK)E{za0bHr9m
zDjt5ar@EJCG2Q`|riZ=5)(&61n>)iC1Nw~(70nE#H$OR9bOGmtqKj0hKiV8ouFo^l
z?mD<!=+k=V8W%Q%RD9`el6yYic+nvk<A3ImIG0<Q0CL}nXsTm{WIt{UKQ=I5P0!EV
z`M&TX#FaGbDQMRL(UAw7+qBRtwk4aq<?gE2mT}n}U4vd+bYL_oec}B5HnOCA{nMU*
zK>lycWkKELob4__n@ktHA;*d5b|He)1FR$#=+N%MF9%|WVbudPk)*XyM#KY$uiOjS
zOL6Ezr=I>)tF-#=m&??tf~r#kv^&pItgb$~DOl?&oyX>fijkM<8qmp~8@KIAE>|~z
zDcWXV``;I29-?-HEsJJtO0;Ke2)<9_y{E7GPx_vb%=in@S9bPZoU<|^prklx!F@6Z
zoVz+Ly|DC0(&p^9;|VX497!U11e}{Z=zG{w*<C`?wKE)NEm*^r-!A}&sI*gkR$ati
zq}adfZ36(J?=-ZSDo63iY~MxSU{YE*lxVH;%C3&Ln*dAH+2HN|D^ImNNIzk3E^->4
xRkzXp`Q5icT<u6GA|s3PML+&WzfO#NI^Y?v5lspW$%kDJaIkf;p<cL7{0~tf;}-w`

literal 0
HcmV?d00001

diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 24e8b73..ff3a804 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -41,6 +41,13 @@
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
+        <div class="form-check form-switch header-switch-container">
+          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled>
+          <label class="form-check-label" for="personal-earning-now-checkbox">
+            <span>Providing service</span>
+          </label>
+          <div class="header-switch-desc">Please go to profile page to add money receiving method</div>
+        </div>
       </div>
       <div class="profile-container">
         <img
@@ -214,6 +221,21 @@ export default {
   }
 }
 
+.header-switch-container {
+  position: relative;
+
+  .header-switch-desc {
+    position: absolute;
+    background-color: white;
+    left: 0;
+    bottom: -20px;
+    font-size: 12px;
+    color: #3D455F;
+    white-space: nowrap;
+    padding: 2px 5px;
+  }
+}
+
 .company-logo {
   max-width: 100%;
   max-height: 100%;
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index bfcbbb1..b93c4c6 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="userProfile" class="user-profile-container offcanvas-parent">
-    <div class="account-panel-container" id="account-panel">
-      <div class="account-summary-bar-container">
-        <div class="account-summary-header-container">
-          <label class="account-summary-header-label" for="account-summary">Login</label>
-          <span v-if="accountNeedAttention" class="account-summary-header-attention-span">!</span>
+    <div class="panel-container" id="account-panel">
+      <div>
+        <div class="panel-header-container">
+          <label for="account-summary">Login</label>
+          <span v-if="accountNeedAttention">!</span>
         </div>
-        <div class="account-summary-content-container" id="account-summary">
+        <div class="panel-content-container" id="account-summary">
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-id"
             aria-expanded="false"
@@ -22,7 +22,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button-1"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-password"
             aria-expanded="false"
@@ -34,7 +34,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button-4"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-email"
             aria-expanded="false"
@@ -48,7 +48,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-mobile"
             aria-expanded="false"
@@ -64,223 +64,178 @@
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-user-id"
         aria-labelledby="account-summary"
         data-bs-parent="#account-panel"
       >
-        <div class="user-id-password-operation-pannel-container">
-          <div class="user-id-password-operation-container">
-            <div class="user-id-operation-content-container">
-              <label class="profile-item-label" for="user-id-operation-input">User ID(FILD)</label>
-              <input
-                class="user-id-operation-input"
-                type="text"
-                v-model="userProfile.account.basic.FLID.identity"
-                readonly="true"
-                v-tooltip
-                title="Generated automatically"
-                delay='{"show":"500", "hide":"100"}'
-              />
-            </div>
+        <div class="collapse-item-container">
+          <div class="collapse-item-input">
+            <input
+              type="text"
+              v-model="userProfile.account.basic.FLID.identity"
+              readonly="true"
+              v-tooltip
+              title="Generated automatically"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-password"
         aria-labelledby="account-summary"
         data-bs-parent="#account-panel"
       >
-        <div class="user-id-password-operation-pannel-container">
-          <div class="user-id-password-operation-container">
-            <div class="user-password-operation-content-container">
-              <label class="profile-item-label" for="user-password-operation-input">Password</label>
-              <input
-                class="user-password-operation-input"
-                type="password"
-                v-model="passwordOperation.password"
-                :placeholder="passwordOperation.placeholder"
-                readonly="true"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingPassword($event)"
-                @blur="stopEdittingPassword($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div class="user-password-operation-content-container">
-              <label class="profile-item-label" for="user-id-operation-input"
-                >Repeat password</label
-              >
-              <input
-                class="user-password-operation-input"
-                type="password"
-                v-model="passwordOperation.password2"
-                :placeholder="passwordOperation.placeholder2"
-                readonly=" true"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingPassword2($event)"
-                @blur="stopEdittingPassword2($event)"
-                @keyup.enter="blurInput($event)"
-                ref="password2Input"
-              />
-            </div>
+        <div class="collapse-item-container">
+          <div class="collapse-item-input">
+            <input
+              type="password"
+              v-model="passwordOperation.password"
+              :placeholder="passwordOperation.placeholder"
+              readonly="true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword($event)"
+              @blur="stopEdittingPassword($event)"
+              @keyup.enter="blurInput($event)"
+            />
+            <svg-icon icon="msg-enter" class-name="enter-icon" />
+          </div>
+          <div class="collapse-item-input">
+            <input
+              type="password"
+              v-model="passwordOperation.password2"
+              :placeholder="passwordOperation.placeholder2"
+              readonly=" true"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword2($event)"
+              @blur="stopEdittingPassword2($event)"
+              @keyup.enter="blurInput($event)"
+              ref="password2Input"
+            />
+            <svg-icon icon="msg-enter" class-name="enter-icon" />
+            <p v-if="passwordOperation.message" class="error-message">
+              {{ passwordOperation.message }}
+            </p>
           </div>
-          <p v-if="passwordOperation.message" class="error-input">
-            {{ passwordOperation.message }}
-          </p>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-user-email"
         aria-labelledby="account-summary"
         data-bs-parent="#account-panel"
       >
-        <div class="user-email-operation-container">
-          <div class="user-email-operation-content-container">
-            <div class="user-email-operation-content-email-container">
-              <label class="profile-item-label" for="user-email-operation-input">Email</label>
-              <input
-                class="user-email-operation-input"
-                type="text"
-                v-model="emailOperation.email.address"
-                readonly="true"
-                v-tooltip
-                title="Click to update"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingEmail($event)"
-                @blur="stopEdittingEmail($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div
-              v-if="emailOperation.verifyingMode"
-              class="user-email-operation-content-code-container"
-            >
-              <label class="profile-item-label" for="user-email-verification-code-operation-input"
-                >Code</label
-              >
-              <input
-                class="user-email-operation-input"
-                type="text"
-                v-model="emailOperation.verificationCode"
-                placeholder="verification code"
-                v-tooltip
-                title="Put the verification code received in the email"
-                delay='{"show":"500", "hide":"100"}'
-                @blur="stopEdittingEmailVerificationCode($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div
-              v-if="!emailOperation.verifyingMode"
-              class="user-email-operation-content-verify-container"
-            >
-              <label class="profile-item-label" for="user-email-operation-input"
-                >Verification</label
-              >
-              <button
-                class="user-email-operation-verified-button"
-                :disabled="emailOperation.email.verified"
-                @click="startVerifyingEmail()"
-                v-tooltip
-                :title="
-                  emailOperation.email.verified
-                    ? 'The email has been verified'
-                    : 'The email needs to be verify'
-                "
-                delay='{"show":"500", "hide":"100"}'
-              >
-                {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
-              </button>
-            </div>
+        <div class="collapse-item-container">
+          <div class="collapse-item-input">
+            <input
+              type="text"
+              v-model="emailOperation.email.address"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              delay='{"show":"500", "hide":"100"}'
+              @click="edittingEmail($event)"
+              @blur="stopEdittingEmail($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
-          <p v-if="emailOperation.message" class="error-input">{{ emailOperation.message }}</p>
+          <div v-if="emailOperation.verifyingMode" class="collapse-item-input">
+            <input
+              type="text"
+              v-model="emailOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the email"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingEmailVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
+            <svg-icon icon="msg-enter" class-name="enter-icon" />
+            <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
+          </div>
+
+          <button
+            v-if="!emailOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="emailOperation.email.verified"
+            @click="startVerifyingEmail()"
+            v-tooltip
+            :title="
+              emailOperation.email.verified
+                ? 'The email has been verified'
+                : 'The email needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
+            {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
+          </button>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-user-mobile"
         aria-labelledby="account-summary"
         data-bs-parent="#account-panel"
       >
-        <div class="user-mobile-operation-pannel-container">
-          <div class="user-mobile-operation-content-container">
-            <div class="user-mobile-operation-content-number-container">
-              <label class="profile-item-label" for="user-email-operation-number-input"
-                >Mobile</label
-              >
-              <input
-                class="user-mobile-operation-number-input"
-                type="text"
-                v-model="mobileOperation.mobile.number"
-                readonly="true"
-                v-tooltip
-                title="Click to update"
-                @click="edittingMobile($event)"
-                @blur="stopEdittingMobile($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div
-              v-if="mobileOperation.verifyingMode"
-              class="user-mobile-operation-content-code-container"
-            >
-              <label class="profile-item-label" for="user-mobile-verification-code-operation-input"
-                >Code</label
-              >
-              <input
-                class="user-mobile-operation-code-input"
-                type="text"
-                v-model="mobileOperation.verificationCode"
-                placeholder="verification code"
-                v-tooltip
-                title="Put the verification code received in the mobile number"
-                delay='{"show":"500", "hide":"100"}'
-                @blur="stopEdittingMobileVerificationCode($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div
-              v-if="!mobileOperation.verifyingMode"
-              class="user-mobile-operation-content-verify-container"
-            >
-              <label class="profile-item-label" for="user-mobile-operation-input"
-                >Verification</label
-              >
-              <button
-                class="user-mobile-operation-verified-button"
-                :disabled="mobileOperation.mobile.verified"
-                @click="startVerifyingMobile()"
-                v-tooltip
-                :title="
-                  mobileOperation.mobile.verified
-                    ? 'The mobile number has been verified'
-                    : 'The mobile number needs to be verify'
-                "
-                delay='{"show":"500", "hide":"100"}'
-              >
-                {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
-              </button>
-            </div>
+        <div class="collapse-item-container">
+          <div class="collapse-item-input">
+            <input
+              type="text"
+              v-model="mobileOperation.mobile.number"
+              readonly="true"
+              v-tooltip
+              title="Click to update"
+              @click="edittingMobile($event)"
+              @blur="stopEdittingMobile($event)"
+              @keyup.enter="blurInput($event)"
+            />
           </div>
-          <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
+          <div v-if="mobileOperation.verifyingMode" class="collapse-item-input">
+            <input
+              type="text"
+              v-model="mobileOperation.verificationCode"
+              placeholder="verification code"
+              v-tooltip
+              title="Put the verification code received in the mobile number"
+              delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingMobileVerificationCode($event)"
+              @keyup.enter="blurInput($event)"
+            />
+            <svg-icon icon="msg-enter" class-name="enter-icon" />
+            <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
+          </div>
+          <button
+            v-if="!mobileOperation.verifyingMode"
+            class="btn btn-link"
+            :disabled="mobileOperation.mobile.verified"
+            @click="startVerifyingMobile()"
+            v-tooltip
+            :title="
+              mobileOperation.mobile.verified
+                ? 'The mobile number has been verified'
+                : 'The mobile number needs to be verify'
+            "
+            delay='{"show":"500", "hide":"100"}'
+          >
+            {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
+          </button>
         </div>
       </div>
     </div>
-    <div class="personal-panel-container" id="personal-panel">
-      <div class="personal-panel-summary-bar-container">
-        <div class="personal-summary-header-container">
-          <label class="personal-summary-header-label" for="personal-summary">Personal</label>
+    <div class="panel-container" id="personal-panel">
+      <div>
+        <div class="panel-header-container">
+          <label for="personal-summary">Personal</label>
         </div>
-        <div class="personal-summary-content-container" id="personal-summary">
+        <div class="panel-content-container" id="personal-summary">
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-user-identity"
             aria-expanded="false"
@@ -296,26 +251,25 @@
               </span>
             </div>
           </button>
-
           <button
-            class="profile-item-container-button-1"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-personal-user-photo"
             aria-expanded="false"
             aria-controls="collapse-personal-user-photo"
           >
-            <div class="profile-item-container">
-              <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
+            <div class="profile-item-container profile-photo-container">
               <img
-                class="personal-summary-user-portrait-img"
+                class="profile-photo"
                 alt="user portrait"
                 id="personal-photo-operation-image"
-                src="@/assets/images/default-user-portrait.png"
+                src="@/assets/profile.png"
               />
+              <label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
             </div>
           </button>
           <button
-            class="profile-item-container-button-4"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-personal-user-intro"
             aria-expanded="false"
@@ -329,7 +283,7 @@
             </div>
           </button>
           <button
-            class="profile-item-container-button"
+            class="panel-item-container"
             data-bs-toggle="collapse"
             data-bs-target="#collapse-personal-earning-now"
             aria-expanded="false"
@@ -347,362 +301,309 @@
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-user-identity"
         aria-labelledby="personal-summary"
         data-bs-parent="#personal-panel"
       >
-        <div class="user-identity-operation-container">
-          <div class="user-identity-operation-content-container">
-            <div class="user-first-name-operation-container">
-              <label class="profile-item-label" for="user-first-name-operation-input"
-                >First name</label
-              >
-              <input
-                class="user-first-name-operation-input"
-                type="text"
-                v-model="identityOperation.first_name"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                readonly="true"
-                @click="edittingFirstname($event)"
-                @blur="stopEdittingFirstname($event)"
-                @keyup.enter="blurInput($event)"
-              />
-            </div>
-            <div class="user-last-name-operation-container">
-              <label class="profile-item-label" for="user-last-name-operation-input"
-                >Last name</label
-              >
-              <input
-                class="user-last-name-operation-input"
-                type="text"
-                v-model="identityOperation.last_name"
-                readonly="true"
-                @click="edittingLastname($event)"
-                @blur="stopEdittingLastname($event)"
-                @keyup.enter="blurInput($event)"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-              />
-            </div>
+        <div class="collapse-item-container">
+          <div class="collapse-item-input">
+            <input
+              type="text"
+              v-model="identityOperation.first_name"
+              placeholder="First Name"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingFirstname($event)"
+              @blur="stopEdittingFirstname($event)"
+              @keyup.enter="blurInput($event)"
+            />
+          </div>
+          <div class="collapse-item-input">
+            <input
+              type="text"
+              v-model="identityOperation.last_name"
+              placeholder="Last Name"
+              readonly="true"
+              @click="edittingLastname($event)"
+              @blur="stopEdittingLastname($event)"
+              @keyup.enter="blurInput($event)"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+            />
           </div>
         </div>
       </div>
 
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-personal-user-photo"
         aria-labelledby="personal-summary"
         data-bs-parent="#personal-panel"
       >
-        <div class="personal-photo-operation-container">
-          <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
-          <img
-            class="personal-operation-user-portrait-img"
-            id="personal-photo-operation-image"
-            alt="user portrait"
-            src="@/assets/images/default-user-portrait.png"
-            v-tooltip
-            title="Click to update"
-            @click="selectUserPhoto()"
-          />
+        <div class="collapse-item-container">
+          <label class="btn btn-link" for="personal-photo-operation-image">
+            <img
+              class="user-portrait-img"
+              id="personal-photo-operation-image"
+              alt="user portrait"
+              src="@/assets/profile.png"
+              v-tooltip
+              title="Click to update"
+              @click="selectUserPhoto()"
+            />
+          </label>
           <input
             ref="uploadUserPhotoInput"
             type="file"
             :accept="identityOperation.photo.acceptableType"
-            style="display: none"
+            hidden
             @change="onUserPhotoChange($event)"
           />
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-personal-user-intro"
         aria-labelledby="personal-summary"
         data-bs-parent="#personal-panel"
       >
-        <div class="personal-self-intro-operation-container">
-          <div class="personal-self-intro-operation-header-container">
-            <label class="personal-self-intro-content-label" for="personal-self-intro-editor"
-              >Self-intro</label
-            >
-            <div
-              v-if="personalOperation.self_intro.is_editing"
-              class="self-intro-in-header-editing-action-container"
-            >
+        <div class="collapse-item-container">
+          <div class="collapse-item-editor">
+            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html" :disabled="!personalOperation.self_intro.is_editing" />
+            <div class="btn-group-container">
+              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
               <button
-                class="personal-self-intro-template-button"
+                v-if="personalOperation.self_intro.is_editing"
+                class="btn btn-link"
                 type="button"
                 data-bs-toggle="offcanvas"
                 data-bs-target="#offcanvas-template"
                 aria-controls="offcanvas-template"
               >
-                templates
+                Templates
+              </button>
+              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
+              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
+                Cancel
               </button>
             </div>
           </div>
-          <div
-            v-if="personalOperation.self_intro.is_editing"
-            class="self-intro-in-content-editing-action-container"
-          >
-            <button @click="updateSelfIntro()" class="in-context-foward-button">Update</button>
-            <button @click="stopEdittingSelfintro($event)" class="in-context-back-button">
-              Cancel
-            </button>
-          </div>
-          <div
-            class="personal-self-intro-content-editor"
-            id="personal-self-intro-editor"
-            ref="personal_self_intro_editor_div"
-            v-html="personalOperation.self_intro.content_html"
-            contenteditable="false"
-            v-tooltip
-            title="Click to edit"
-            delay='{"show":"500", "hide":"100"}'
-            @click="edittingSelfintro($event)"
-            @keyup="keyUpOnSelfIntroEditor($event)"
-          ></div>
         </div>
       </div>
       <div
-        class="collapse"
+        class="collapse collapse-content-container"
         id="collapse-personal-earning-now"
         aria-labelledby="personal-summary"
         data-bs-parent="#personal-panel"
       >
-        <div class="personal-earning-now-operation-container">
-          <div class="personal-earning-now-content-container">
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                type="checkbox"
-                id="personal-earning-now-checkbox"
-                v-model="personalOperation.accepting_request"
-                @click="updateAcceptingRequest($event)"
-                :disabled="!paymentOperation.ready_to_receive_money"
-              />
-              <label class="form-check-label" for="personal-earning-now-checkbox"
-                >I want to be a service provider and earn money</label
-              >
-              <br />
-              <label v-if="personalOperation.show_stripe_status" style="color: red">
-                * Stripe account onboarding is not completed.</label
-              >
-            </div>
-            <div class="personal-expected-salary-content-container">
-              <label class="profile-item-label" for="personal-expected-salary"
-                >Expected hourly salary</label
-              >
-              <div class="input-group">
-                <input
-                  class="personal-expected-salary-input"
-                  id="personal-expected-salary"
-                  v-tooltip
-                  title="Click to edit"
-                  delay='{"show":"500", "hide":"100"}'
-                  readonly="true"
-                  @click="edittingExpectedSalary($event)"
-                  @blur="stopedittingExpectedSalary($event)"
-                  @keyup.enter="blurInput($event)"
-                  v-model="personalOperation.expected_salary.hourly"
-                />
-                <span class="input-group-text">{{
-                  userProfile.account.provider.expected_salary.currency
-                }}</span>
-              </div>
-            </div>
+        <div class="collapse-checkbox-container">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)" :disabled="!paymentOperation.ready_to_receive_money">
+            <label class="form-check-label" for="personal-earning-now-checkbox">
+              <span>I want to be a service provider and earn money</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
+            </label>
           </div>
-          <div class="personal-payment-container">
-            <img
-              v-if="Is_Wechat_QR_Code_Payment()"
-              class="personal-payment-wechat-qr-code-image"
-              :src="paymentOperation.wechat_qr_code_img.data"
-              @click="selectWechatQRCodePhoto()"
-            />
+          <div class="flex-1" />
+          <div class="collapse-item-input">
             <input
-              v-if="Is_Wechat_QR_Code_Payment()"
-              ref="uploadWechatQRCodePhotoInput"
-              type="file"
-              :accept="paymentOperation.wechat_qr_code_img.acceptableType"
-              style="display: none"
-              @change="onUploadWechatQRCodePhoto($event)"
+              id="personal-expected-salary"
+              v-tooltip
+              title="Click to edit"
+              delay='{"show":"500", "hide":"100"}'
+              readonly="true"
+              @click="edittingExpectedSalary($event)"
+              @blur="stopedittingExpectedSalary($event)"
+              @keyup.enter="blurInput($event)"
+              v-model="personalOperation.expected_salary.hourly"
             />
-
-            <span>Have you linked your strip account?</span
-            ><button v-if="Is_Stripe_Payment()" @click="visitStripe()">Visit Stripe</button>
+            <span class="collapse-item-currency">{{
+              userProfile.account.provider.expected_salary.currency
+            }}</span>
           </div>
-          <span v-if="personalOperation.accepting_request" class="operation-note-text"
-            >You are a service provider now. Please review your self-intro to reflect your skills to
-            deliver projects.</span
-          >
+        </div>
+        <div class="collapse-item-container">
+          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
+            <img
+              v-if="paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-show"
+              :src="paymentOperation.wechat_qr_code_img.data"
+            />
+            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn" src="@/assets/images/qr-code.png" />
+            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</span>
+          </label>
+          <input
+            v-if="Is_Wechat_QR_Code_Payment()"
+            ref="uploadWechatQRCodePhotoInput"
+            type="file"
+            id="qr-uploader"
+            :accept="paymentOperation.wechat_qr_code_img.acceptableType"
+            hidden
+            @change="onUploadWechatQRCodePhoto($event)"
+          />
+        </div>
+        <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
+          <span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
+        </div>
+        <div v-if="personalOperation.accepting_request" class="collapse-item-container">
+          <span>You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.</span>
         </div>
       </div>
     </div>
-    <div class="accordion" id="accordion-achievement-panel">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button
-            class="accordion-button"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-achievement"
-            aria-expanded="true"
-            aria-controls="collapse-achievement"
-          >
-            <div class="achievement-bar-container">
-              <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-stay-on-operation"
-                  >On Freeleaps</label
-                >
-                <span class="profile-item-span" id="achievement-stay-on-operation">
+    <div class="panel-container" id="accordion-achievement-panel">
+      <div class="panel-header-container">
+        <label for="account-summary">Achievement</label>
+      </div>
+      <table class="panel-table-container">
+        <tbody>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">On Freeleaps</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.activeness.days_of_staying_on }} day(s)
                 </span>
               </div>
-              <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content"
-                  >Connections</label
-                >
-                <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.connections }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Connections</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.activeness.connections }}
+                </span>
               </div>
-              <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content"
-                  >Messages</label
-                >
-                <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.messages }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Messages</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.activeness.messages }}
+                </span>
               </div>
-              <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-credit-content">Credit</label>
-                <span class="profile-item-span" id="achievement-credit-content">
-                  {{ userProfile.achievemnt.activeness.credit }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Credit</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.activeness.credit }}
+                </span>
               </div>
-            </div>
-          </button>
-        </h2>
-        <div
-          id="collapse-achievement"
-          class="accordion-collapse collapse show"
-          data-bs-parent="#collapse-achievement"
-        >
-          <div class="accordion-body">
-            <div class="achievement-panel-container">
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation"
-                  >Total spending</label
-                >
-                <span class="achievement-summary-spending-span" id="achievement-spending-operation">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Total spending</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.issuer.spending.total }}
                   {{ userProfile.achievemnt.issuer.spending.currency }}
                 </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
-                  >12-month spending</label
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-spending-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">12-month spending</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.issuer.spending.twelve_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.spending.currency }}
+                </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
-                  >3-month spending</label
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-spending-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">3-month spending</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.issuer.spending.three_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.spending.currency }}
+                </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-deposit-content">Deposit</label>
-                <span class="profile-item-span" id="achievement-deposit-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Deposit</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.issuer.deposit.available }}
-                  {{ userProfile.achievemnt.issuer.deposit.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.deposit.currency }}
+                </span>
               </div>
-            </div>
-            <div class="achievement-panel-container">
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation"
-                  >Posted</label
-                >
-                <span class="profile-item-span" id="achievement-spending-operation">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Posted</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.issuer.request.issued }}
                 </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
-                  >Accomplished</label
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Accomplished</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.issuer.request.accomplished }}
+                </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
-                  >Active</label
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.active }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Active</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.issuer.request.active }}
+                </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-deposit-content">Ongoing</label>
-                <span class="profile-item-span" id="achievement-deposit-content">
-                  {{ userProfile.achievemnt.issuer.request.ongoing }}</span
-                >
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Ongoing</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.issuer.request.ongoing }}
+                </span>
               </div>
-            </div>
-
-            <div class="achievement-panel-container">
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-total-earning-content"
-                  >Total earning</label
-                >
-                <span class="profile-item-span" id="achievement-total-earning-content">
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Total earning</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.provider.earnings.total }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-earning-content"
-                  >12-month earning</label
-                >
-                <span class="profile-item-span" id="achievement-twelve-month-earning-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">12-month earning</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.provider.earnings.twelve_month }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-earning-content"
-                  >Delivered</label
-                >
-                <span class="profile-item-span" id="achievement-thirty-day-earning-content">
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Delivered</span>
+                <span class="panel-table-span">
                   {{ userProfile.achievemnt.provider.deliveries.delivered_projects }}
                 </span>
               </div>
-              <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-delivering-time"
-                  >Delivering time</label
-                >
-                <span class="profile-item-span" id="achievement-delivering-time">
-                  {{
-                    userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
-                  }}
-                  days
+            </td>
+            <td>
+              <div class="panel-table-content">
+                <span class="panel-table-label">Delivering time</span>
+                <span class="panel-table-span">
+                  {{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
                 </span>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <div
       class="offcanvas offcanvas-end offcanvas-container"
@@ -760,6 +661,7 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { moneyCollectionTypeEnum } from '../../../types/index'
 
 import {
@@ -768,8 +670,10 @@ import {
   textAreaAujuster,
   passwordValidator
 } from '../../../utils/index'
+import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
 
 export default {
+  components: { SvgIcon, FreeleapsEditor },
   name: 'UserProfile',
   props: {},
   mounted() {
@@ -863,8 +767,8 @@ export default {
         ready_to_receive_money: false,
         preferred_collector: moneyCollectionTypeEnum.WECHAT_QR_CODE,
         wechat_qr_code_img: {
-          data: 'src/assets/images/wechat_qr_code_upload.png',
-          filename: 'wechat_qr_code_upload.png',
+          data: '',
+          filename: '',
           acceptableType: '.png, .jpg',
           filesizeLimit: 1000000
         }
@@ -1318,6 +1222,218 @@ export default {
 <style lang="scss" scoped>
 .user-profile-container {
   @extend .container;
+  padding: 24px 12px;
+}
+
+.panel-container {
+  padding: 12px;
+  // overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  background-color: white;
+  margin-bottom: 20px;
+
+  .panel-header-container {
+    font-size: 16px;
+    font-weight: bold;
+    color: #242424;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+  .panel-content-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .panel-item-container {
+      width: calc(25% - 9px);
+      border: 1px dashed #1748F8;
+      background-color: white;
+      padding: 0 12px;
+      height: 46px;
+      border-radius: 3px;
+      align-items: center;
+      text-align: left;
+      box-shadow: none;
+      outline: none;
+
+      &:hover {
+        background-color: #F3F6FF;
+      }
+      // &.active {
+      //   background-color: #F3F6FF;
+      // }
+      &[aria-expanded=true] {
+        background-color: #F3F6FF;
+      }
+
+      .profile-item-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &.profile-photo-container {
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          .profile-photo {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            margin-right: 8px;
+          }
+        }
+
+        .profile-item-label {
+          margin-bottom: 3px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+        .profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
+      }
+    }
+  }
+  .collapse-content-container {
+    margin: 12px -12px -12px -12px;
+    border-top: 1px solid #E7E8EB;
+
+    .collapse-item-container {
+      padding: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .user-portrait-img {
+        width: 150px;
+        height: 150px;
+      }
+
+      .collapse-item-editor {
+        width: 100%;
+        position: relative;
+
+        .btn-group-container{
+          position: absolute;
+          right: 32px;
+          top: 10px;
+        }
+      }
+    }
+
+    .collapse-item-input {
+        height: 37px;
+        width: 350px;
+        border: 1px solid #E1E1E1;
+        border-radius: 3px;
+        margin: 0 8px;
+        box-shadow: none;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        
+        &:focus-within {
+          border: 1px solid #1748F8;
+        }
+
+        input {
+          flex: 1;
+          height: 100%;
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }
+
+        .error-message {
+          color: #916AD4;
+          font-size: 16px;
+          position: absolute;
+          left: 0;
+          bottom: -26px;
+          margin: 0;
+        }
+
+        .enter-icon {
+          width: 13px;
+          height: 13px;
+          margin-left: 12px;
+          background-color: #E7E9ED;
+          border-radius: 3px;
+          padding: 2px;
+        }
+
+        .collapse-item-currency {
+          font-size: 14px;
+          font-weight: bold;
+          color: #0D1637;
+          margin-left: 12px;
+        }
+      }
+
+    .collapse-item-uploader {
+      width: 150px;
+      height: 150px;
+      border-radius: 8px;
+      border: 1px dashed $primary;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      &:hover {opacity: .78;}
+
+      .uploader-img-btn {
+        width: 50px;
+        height: 50px;
+        margin-bottom: 12px;
+      }
+      .upload-text-btn {
+        font-size: 14px;
+        color: $primary;
+        margin: 0 12px;
+      }
+      .uploader-img-show {
+        width: 150px;
+        height: 150px;
+        object-fit: contain;
+      }
+    }
+
+    .collapse-checkbox-container {
+      padding: 12px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #E7E8EB
+    }
+  }
+
+  .panel-table-container {
+    border: 0;
+	  border-collapse: collapse;
+    width: 100%;
+
+    .panel-table-content {
+      padding: 12px 0;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+
+      .panel-table-label {
+        font-size: 12px;
+        color: #666666;
+        line-height: 1;
+        margin-bottom: 3px;
+      }
+      .panel-table-span {
+        font-size: 14px;
+        font-weight: bold;
+        color: #242424;
+        line-height: 1;
+      }
+    }
+  }
 }
 
 .account-panel-container {
@@ -1903,22 +2019,22 @@ export default {
   @extend .w-40;
 }
 
-.profile-item-container {
-  @extend .flex-colum-container;
-  width: fit-content;
-  @extend .float-start;
-}
+// .profile-item-container {
+//   @extend .flex-colum-container;
+//   width: fit-content;
+//   @extend .float-start;
+// }
 
-.profile-item-label {
-  @extend .label-text-light;
-  @extend .w-100;
-}
+// .profile-item-label {
+//   @extend .label-text-light;
+//   @extend .w-100;
+// }
 
-.profile-item-span {
-  @extend .text-start;
-  @extend .px-1;
-  @extend .w-100;
-}
+// .profile-item-span {
+//   @extend .text-start;
+//   @extend .px-1;
+//   @extend .w-100;
+// }
 
 .operation-note-text {
   @extend .note-text-light;