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