From cf46520adab959c8142bd2aec43549a2afda3782 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Tue, 25 Jun 2024 08:51:50 -0700
Subject: [PATCH] merging

---
 frontend/src/App.vue                          |   4 +-
 frontend/src/assets/styles/main.scss          |   6 +-
 frontend/src/components/FreeleapsEditor.vue   |   2 +-
 frontend/src/components/LaguageSwitch.vue     | 109 ++++++-------
 frontend/src/headers/HeaderUser.vue           |   2 +-
 frontend/src/lang/en.js                       | 138 ++++++++---------
 frontend/src/lang/zh.js                       |   4 +-
 frontend/src/pages/guest/FrontDoor.vue        |   8 +-
 frontend/src/pages/guest/NewUserSetFlid.vue   |   4 +-
 .../src/pages/guest/NewUserSetPassword.vue    |   6 +-
 .../pages/guest/SigninWithEmailAndCode.vue    |   4 +-
 .../guest/SigninWithEmailAndPassword.vue      |   6 +-
 frontend/src/pages/public/About.vue           |   2 +-
 frontend/src/pages/public/Blogs.vue           |   5 +-
 frontend/src/pages/public/Career.vue          |   8 +-
 frontend/src/pages/public/Contact.vue         |   6 +-
 .../src/pages/user/account/UserHistory.vue    |  75 ++++++---
 frontend/src/pages/user/workspace/Home.vue    | 126 ++++++++-------
 .../user/workspace/requestIssue/Issue.vue     |   2 +-
 frontend/src/plugins/store/basic.js           | 143 +++++++++---------
 20 files changed, 360 insertions(+), 300 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8c19f19..9e1b5ac 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-body">
-    <img src="@/assets/images/home-bg-left.png" alt="freeleaps" class="app-bg-left">
-    <img src="@/assets/images/home-bg-right.png" alt="freeleaps" class="app-bg-right">
+    <img src="@/assets/images/home-bg-left.png" alt="freeleaps" class="app-bg-left" />
+    <img src="@/assets/images/home-bg-right.png" alt="freeleaps" class="app-bg-right" />
     <header class="body-header">
       <router-view name="header"></router-view>
     </header>
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index fdc8b0b..ce1d2ee 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -204,7 +204,7 @@ p {
     // border-bottom: 1px solid #dee2e6;
     &::before {
       left: 0;
-      width: 100%;;
+      width: 100%;
     }
     .dashed-container {
       background-color: #f3f6ff;
@@ -248,9 +248,9 @@ p {
 }
 
 input:-webkit-autofill {
-  box-shadow:0 0 0 1000px white inset !important;
+  box-shadow: 0 0 0 1000px white inset !important;
 }
 input:-internal-autofill-previewed,
 input:-internal-autofill-selected {
   transition: background-color 5000s ease-in-out 0s !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index 7847788..d29fa1e 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -309,7 +309,7 @@ export default {
       let html = $event.target.innerHTML || ''
       setTimeout(() => {
         this.$emit('update:content', html)
-      });
+      })
     }
   }
 }
diff --git a/frontend/src/components/LaguageSwitch.vue b/frontend/src/components/LaguageSwitch.vue
index ec41d44..9184662 100644
--- a/frontend/src/components/LaguageSwitch.vue
+++ b/frontend/src/components/LaguageSwitch.vue
@@ -1,66 +1,73 @@
 <template>
-    <div class="laguage-switch-container">
-        <button class="btn btn-link btn-link-switch" data-bs-toggle="dropdown" aria-expanded="false" id="language-switch-button">
-            <img :src="languageMapper[currentLanguage]" alt="freeleap language">
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="language-switch-button">
-          <template v-for="item in languageList" :key="item">
-            <li v-if="item != currentLanguage">
-                <button class="btn btn-link btn-link-switch" @click="changeLanguage(item)">
-                    <img :src="languageMapper[item]" alt="freeleap zh">
-                </button>
-            </li>
-          </template>
-        </ul>
-    </div>
+  <div class="laguage-switch-container">
+    <button
+      class="btn btn-link btn-link-switch"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      id="language-switch-button"
+    >
+      <img :src="languageMapper[currentLanguage]" alt="freeleap language" />
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="language-switch-button">
+      <template v-for="item in languageList" :key="item">
+        <li v-if="item != currentLanguage">
+          <button class="btn btn-link btn-link-switch" @click="changeLanguage(item)">
+            <img :src="languageMapper[item]" alt="freeleap zh" />
+          </button>
+        </li>
+      </template>
+    </ul>
+  </div>
 </template>
 <script>
 import zh_icon from '@/assets/lang/zh.png'
 import en_icon from '@/assets/lang/us.png'
 export default {
-    name: 'LaguageSwitch',
-    data() {
-        return {
-            languageList: ["zh", "en"],
-            languageMapper: {
-                "zh": zh_icon,
-                "en": en_icon
-            }
-        }
-    },
-    computed: {
-        currentLanguage() {
-            return this.$store.getters['basic/language']
-        }
-    },
-    methods: {
-        changeLanguage(l) {
-            this.$store.dispatch('basic/setLanguage', l)
-        }
+  name: 'LaguageSwitch',
+  data() {
+    return {
+      languageList: ['zh', 'en'],
+      languageMapper: {
+        zh: zh_icon,
+        en: en_icon
+      }
     }
+  },
+  computed: {
+    currentLanguage() {
+      return this.$store.getters['basic/language']
+    }
+  },
+  methods: {
+    changeLanguage(l) {
+      this.$store.dispatch('basic/setLanguage', l)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .laguage-switch-container {
-    display: inline;
-    position: relative;
+  display: inline;
+  position: relative;
+
+  .btn-link-switch {
+    padding: 0;
+    width: 35px;
+    line-height: 1;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .dropdown-menu {
+    min-width: auto;
+    margin-left: -5px !important;
 
     .btn-link-switch {
-        padding: 0;
-        width: 35px;
-        line-height: 1;
-
-        img {width: 100%;}
-    }
-
-    .dropdown-menu {
-        min-width: auto;
-        margin-left: -5px !important;
-
-        .btn-link-switch {
-            padding: 0 5px;
-            width: 45px;
-        }
+      padding: 0 5px;
+      width: 45px;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 1d360d4..337ab3d 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -4,7 +4,7 @@
       <div
         class="information-bar"
         @click="gotoMessages"
-        :class="{'active' : activePath == 'message', 'unread' : unreadCount > 0}"
+        :class="{ active: activePath == 'message', unread: unreadCount > 0 }"
       >
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 657f833..6dc94c1 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1,70 +1,70 @@
 export default {
-    "About": "About",
-    "Blogs": "Blogs",
-    "Career": "Career",
-    "Contact": "Contact",
-    "Summary": "Summary",
-    "Status": "Status",
-    "Date": "Date",
-    "withdraw": "withdraw",
-    "edit": "edit",
-    "Quote": "Quote",
-    "Payment": "Payment",
-    "Duration": "Duration",
-    "days": "days",
-    "Update": "Update",
-    "From": "From",
-    "reject": "reject",
-    "accept": "accept",
-    "Note": "Note",
-    "Invite": "Invite",
-    "Input E-mail to invite other": "Input E-mail to invite other",
-    "Submit": "Submit",
-    "Progress": "Progress",
-    "milestones": "milestones",
-    "Paid": "Paid",
-    "Milestone": "Milestone",
-    "Description": "Description",
-    "Mark As Paid": "Mark As Paid",
-    "Code Depot": "Code Depot",
-    "Commits": "Commits",
-    "Last committer": "Last committer",
-    "copy git url": "copy git url",
-    "Manage": "Manage",
-    "TO BE IMPLEMENTED.": "TO BE IMPLEMENTED.",
-    "Open issues": "Open issues",
-    "Resolved issues": "Resolved issues",
-    "Closed issues": "Closed issues",
-    "Add Issue": "Add Issue",
-    "New issue description": "New issue description",
-    "Issue title": "Issue title",
-    "Last updated": "Last updated",
-    "Issue description": "Issue description",
-    "Resolve": "Resolve",
-    "Confirm": "Confirm",
-    "Reopen": "Reopen",
-    "fd_1": "A platform where our users can find a trustworthy partner,",
-    "fd_2": "simplify software development, and secure return.",
-    "fd_3": "One stop platform",
-    "fd_4": "for hiring the best",
-    "fd_5": "freelance software development talent",
-    "Email address": "Email address",
-    "GET STARTED": "GET STARTED",
-    "Please type in your email": "Please type in your email",
-    "Your Freeleaps User ID": "Your Freeleaps User ID",
-    "SUBMIT": "SUBMIT",
-    "Please type in your Freeleaps user ID": "Please type in your Freeleaps user ID",
-    "Your password": "Your password",
-    "Repeat password": "Repeat password",
-    "SIGN UP": "SIGN UP",
-    "Please type in your password": "Please type in your password",
-    "The two passwords are not matched": "The two passwords are not matched",
-    "Authenticaion Code Sent To Your Email": "Authenticaion Code Sent To Your Email",
-    "SIGN IN": "SIGN IN",
-    "Please type in the code sent to your email": "Please type in the code sent to your email",
-    "Invalid auth code": "Invalid auth code",
-    "invalid code": "invalid code",
-    "Password": "Password",
-    "Forget password": "Forget password",
-    "Invalid password": "Invalid password",
-}
\ No newline at end of file
+  About: 'About',
+  Blogs: 'Blogs',
+  Career: 'Career',
+  Contact: 'Contact',
+  Summary: 'Summary',
+  Status: 'Status',
+  Date: 'Date',
+  withdraw: 'withdraw',
+  edit: 'edit',
+  Quote: 'Quote',
+  Payment: 'Payment',
+  Duration: 'Duration',
+  days: 'days',
+  Update: 'Update',
+  From: 'From',
+  reject: 'reject',
+  accept: 'accept',
+  Note: 'Note',
+  Invite: 'Invite',
+  'Input E-mail to invite other': 'Input E-mail to invite other',
+  Submit: 'Submit',
+  Progress: 'Progress',
+  milestones: 'milestones',
+  Paid: 'Paid',
+  Milestone: 'Milestone',
+  Description: 'Description',
+  'Mark As Paid': 'Mark As Paid',
+  'Code Depot': 'Code Depot',
+  Commits: 'Commits',
+  'Last committer': 'Last committer',
+  'copy git url': 'copy git url',
+  Manage: 'Manage',
+  'TO BE IMPLEMENTED.': 'TO BE IMPLEMENTED.',
+  'Open issues': 'Open issues',
+  'Resolved issues': 'Resolved issues',
+  'Closed issues': 'Closed issues',
+  'Add Issue': 'Add Issue',
+  'New issue description': 'New issue description',
+  'Issue title': 'Issue title',
+  'Last updated': 'Last updated',
+  'Issue description': 'Issue description',
+  Resolve: 'Resolve',
+  Confirm: 'Confirm',
+  Reopen: 'Reopen',
+  fd_1: 'A platform where our users can find a trustworthy partner,',
+  fd_2: 'simplify software development, and secure return.',
+  fd_3: 'One stop platform',
+  fd_4: 'for hiring the best',
+  fd_5: 'freelance software development talent',
+  'Email address': 'Email address',
+  'GET STARTED': 'GET STARTED',
+  'Please type in your email': 'Please type in your email',
+  'Your Freeleaps User ID': 'Your Freeleaps User ID',
+  SUBMIT: 'SUBMIT',
+  'Please type in your Freeleaps user ID': 'Please type in your Freeleaps user ID',
+  'Your password': 'Your password',
+  'Repeat password': 'Repeat password',
+  'SIGN UP': 'SIGN UP',
+  'Please type in your password': 'Please type in your password',
+  'The two passwords are not matched': 'The two passwords are not matched',
+  'Authenticaion Code Sent To Your Email': 'Authenticaion Code Sent To Your Email',
+  'SIGN IN': 'SIGN IN',
+  'Please type in the code sent to your email': 'Please type in the code sent to your email',
+  'Invalid auth code': 'Invalid auth code',
+  'invalid code': 'invalid code',
+  Password: 'Password',
+  'Forget password': 'Forget password',
+  'Invalid password': 'Invalid password'
+}
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 7d78ddf..4312670 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1,3 +1,3 @@
 export default {
-    "Contact": "联系我们"
-}
\ No newline at end of file
+  Contact: '联系我们'
+}
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 0f7f687..bf7f3cf 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex-colum-container front-container">
-    <div class="slogen">{{$t('fd_1')}}<br />{{$t('fd_2')}}</div>
+    <div class="slogen">{{ $t('fd_1') }}<br />{{ $t('fd_2') }}</div>
     <div class="poster">
-      <span class="blue">{{$t('fd_3')}}</span> {{$t('fd_4')}} <br />{{$t('fd_5')}}
+      <span class="blue">{{ $t('fd_3') }}</span> {{ $t('fd_4') }} <br />{{ $t('fd_5') }}
     </div>
     <div class="input-container">
       <div class="form-group">
@@ -15,10 +15,10 @@
               placeholder="name@example.com"
               v-model="email"
             />
-            <label for="inputEmail">{{$t('Email address')}}</label>
+            <label for="inputEmail">{{ $t('Email address') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
-            {{$t('GET STARTED')}}
+            {{ $t('GET STARTED') }}
           </button>
         </div>
       </div>
diff --git a/frontend/src/pages/guest/NewUserSetFlid.vue b/frontend/src/pages/guest/NewUserSetFlid.vue
index bc00f2f..92e9b97 100644
--- a/frontend/src/pages/guest/NewUserSetFlid.vue
+++ b/frontend/src/pages/guest/NewUserSetFlid.vue
@@ -12,9 +12,9 @@
                 :placeholder="'set your Freeleaps user id'"
                 v-model="flid"
               />
-              <label for="inputCode">{{$t('Your Freeleaps User ID')}}</label>
+              <label for="inputCode">{{ $t('Your Freeleaps User ID') }}</label>
             </div>
-            <button type="submit" class="btn-start">{{$t('SUBMIT')}}</button>
+            <button type="submit" class="btn-start">{{ $t('SUBMIT') }}</button>
           </div>
         </div>
         <p class="errorInput" v-if="message != null">{{ message }}</p>
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 70332aa..f29ee6e 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -12,7 +12,7 @@
                 :placeholder="'Type your password'"
                 v-model="password"
               />
-              <label for="inputCode">{{$t('Your password')}}</label>
+              <label for="inputCode">{{ $t('Your password') }}</label>
             </div>
           </div>
         </div>
@@ -27,9 +27,9 @@
               :placeholder="'Repeat your password'"
               v-model="password2"
             />
-            <label for="inputCode">{{$t('Repeat password')}}</label>
+            <label for="inputCode">{{ $t('Repeat password') }}</label>
           </div>
-          <button type="submit" class="btn-start">{{$t('SIGN UP')}}</button>
+          <button type="submit" class="btn-start">{{ $t('SIGN UP') }}</button>
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
       </div>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index 384bb6a..db4d0ec 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -12,9 +12,9 @@
                 :placeholder="'Code sent to your email'"
                 v-model="code"
               />
-              <label for="inputCode">{{$t('Authenticaion Code Sent To Your Email')}}</label>
+              <label for="inputCode">{{ $t('Authenticaion Code Sent To Your Email') }}</label>
             </div>
-            <button type="submit" class="btn-start">{{$t('SIGN IN')}}</button>
+            <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
           </div>
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 873c8f5..0fe0ac0 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -12,16 +12,16 @@
                 :placeholder="'Type in your password'"
                 v-model="password"
               />
-              <label for="inputCode">{{$t('Password')}}</label>
+              <label for="inputCode">{{ $t('Password') }}</label>
             </div>
-            <button type="submit" class="btn-start">{{$t('SIGN IN')}}</button>
+            <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
           </div>
         </div>
         <div class="error-msg flex-row-container">
           <p class="error-p" v-if="message != null">{{ message }}</p>
           <div class="flex-1" />
           <button type="button" class="btn-forget-password" @click="forgetPassword()">
-            {{$t('Forget password')}}
+            {{ $t('Forget password') }}
           </button>
         </div>
       </div>
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 408415c..2f11eae 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -70,7 +70,7 @@ export default {
 .directory-title {
   font-size: 48px;
   // font-weight: bold;
-  color: #18181A;
+  color: #18181a;
   margin-bottom: 5px;
 }
 .directory-subtitle {
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 1aba5c6..d16296a 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -55,8 +55,9 @@ export default {
   @extend .container;
   cursor: pointer;
   padding: 0;
-  
-  h2, p {
+
+  h2,
+  p {
     text-align: left;
   }
 }
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index f9062ff..3b72088 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -50,15 +50,17 @@ export default {
 
   .career-item {
     cursor: pointer;
-    box-shadow: 0px 0px 24px 0px #D4D3E380;
+    box-shadow: 0px 0px 24px 0px #d4d3e380;
     padding: 32px;
-    color: #18181A;
+    color: #18181a;
     font-size: 14px;
     background-color: white;
     margin-bottom: 32px;
     text-align: left;
 
-    p {margin: 0;}
+    p {
+      margin: 0;
+    }
     .career-title {
       font-size: 32px;
       margin-bottom: 10px;
diff --git a/frontend/src/pages/public/Contact.vue b/frontend/src/pages/public/Contact.vue
index 8dad955..0f21013 100644
--- a/frontend/src/pages/public/Contact.vue
+++ b/frontend/src/pages/public/Contact.vue
@@ -51,7 +51,7 @@ export default {
     display: flex;
     flex-direction: row;
     margin-bottom: 62px;
-    
+
     .contact-left {
       border-radius: 12px;
       background-color: $primary;
@@ -84,10 +84,10 @@ export default {
     }
     .contact-right {
       margin-left: 24px;
-      box-shadow: 0px 0px 24px 0px #D4D3E380;
+      box-shadow: 0px 0px 24px 0px #d4d3e380;
       background: white;
       padding: 32px;
-      color: #18181A;
+      color: #18181a;
       border-radius: 12px;
       width: 368px;
       text-align: left;
diff --git a/frontend/src/pages/user/account/UserHistory.vue b/frontend/src/pages/user/account/UserHistory.vue
index d75b76f..a7a3873 100644
--- a/frontend/src/pages/user/account/UserHistory.vue
+++ b/frontend/src/pages/user/account/UserHistory.vue
@@ -4,7 +4,14 @@
       <div class="accordion accordion-list" id="accordion-history-total">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="collapse-history-total" aria-expanded="false" aria-controls="collapse-history-total">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="collapse-history-total"
+              aria-expanded="false"
+              aria-controls="collapse-history-total"
+            >
               <div class="history-bar dashed-container">
                 <div class="history-bar-container">
                   <div class="history-bar-item">
@@ -31,10 +38,12 @@
               </div>
             </button>
           </h2>
-          <div id="collapse-history-total" class="accordion-collapse collapse" data-bs-parent="#accordion-history-total">
-            <div class="accordion-body">
-
-            </div>
+          <div
+            id="collapse-history-total"
+            class="accordion-collapse collapse"
+            data-bs-parent="#accordion-history-total"
+          >
+            <div class="accordion-body"></div>
           </div>
         </div>
       </div>
@@ -42,7 +51,14 @@
       <div class="accordion accordion-list" id="accordion-history-total">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="collapse-history-total" aria-expanded="false" aria-controls="collapse-history-total">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="collapse-history-total"
+              aria-expanded="false"
+              aria-controls="collapse-history-total"
+            >
               <div class="history-bar dashed-container">
                 <div class="history-bar-container">
                   <div class="history-bar-item">
@@ -61,16 +77,25 @@
               </div>
             </button>
           </h2>
-          <div id="collapse-history-total" class="accordion-collapse collapse" data-bs-parent="#accordion-history-total">
-            <div class="accordion-body">
-
-            </div>
+          <div
+            id="collapse-history-total"
+            class="accordion-collapse collapse"
+            data-bs-parent="#accordion-history-total"
+          >
+            <div class="accordion-body"></div>
           </div>
         </div>
 
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="collapse-history-total" aria-expanded="false" aria-controls="collapse-history-total">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="collapse-history-total"
+              aria-expanded="false"
+              aria-controls="collapse-history-total"
+            >
               <div class="history-bar dashed-container">
                 <div class="history-bar-container">
                   <div class="history-bar-item">
@@ -89,19 +114,27 @@
               </div>
             </button>
           </h2>
-          <div id="collapse-history-total" class="accordion-collapse collapse" data-bs-parent="#accordion-history-total">
-            <div class="accordion-body">
-
-            </div>
+          <div
+            id="collapse-history-total"
+            class="accordion-collapse collapse"
+            data-bs-parent="#accordion-history-total"
+          >
+            <div class="accordion-body"></div>
           </div>
         </div>
       </div>
 
-
       <div class="accordion accordion-list" id="accordion-history-earning">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-history-earning" aria-expanded="false" aria-controls="collapse-history-earning">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapse-history-earning"
+              aria-expanded="false"
+              aria-controls="collapse-history-earning"
+            >
               <div class="history-bar dashed-container">
                 <div class="history-bar-container">
                   <div class="history-bar-item">
@@ -120,7 +153,11 @@
               </div>
             </button>
           </h2>
-          <div id="collapse-history-earning" class="accordion-collapse collapse" data-bs-parent="#accordion-history-earning">
+          <div
+            id="collapse-history-earning"
+            class="accordion-collapse collapse"
+            data-bs-parent="#accordion-history-earning"
+          >
             <div class="accordion-body">
               <div class="history-bar dashed-container">
                 <div class="history-bar-container">
@@ -211,4 +248,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 0167b66..77676df 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -21,15 +21,15 @@
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
-                    <label class="project-item-label">{{$t('Summary')}}</label>
+                    <label class="project-item-label">{{ $t('Summary') }}</label>
                     <p class="project-item-text">{{ project.title }}</p>
                   </div>
                   <div class="project-item-status-container">
-                    <label class="project-item-label">{{$t('Status')}}</label>
+                    <label class="project-item-label">{{ $t('Status') }}</label>
                     <p class="project-item-text">{{ fromIntToProjectStatus(project.status) }}</p>
                   </div>
                   <div class="project-item-date-container">
-                    <label class="project-item-label">{{$t('Date')}}</label>
+                    <label class="project-item-label">{{ $t('Date') }}</label>
                     <p class="project-item-text">
                       {{ getDateFromFulltimeString(project.update_time) }}
                     </p>
@@ -52,7 +52,7 @@
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
-                  {{$t('withdraw')}}&{{$t('edit')}}
+                  {{ $t('withdraw') }}&{{ $t('edit') }}
                 </button>
               </div>
               <div class="project-request-container">
@@ -82,27 +82,29 @@
                       >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
-                            <label class="project-item-label">{{$t('Quote')}}</label>
+                            <label class="project-item-label">{{ $t('Quote') }}</label>
                             <p class="project-item-text">{{ proposal.price_in_usd }} USD</p>
                           </div>
                           <div class="project-request-proposal-payment-type-container">
-                            <label class="project-item-label">{{$t('Payment')}}</label>
+                            <label class="project-item-label">{{ $t('Payment') }}</label>
                             <p class="project-item-text">
                               {{ fromIntToPaymentType(proposal.payment_plan.type) }}
                             </p>
                           </div>
                           <div class="project-request-proposal-duration-container">
-                            <label class="project-item-label">{{$t('Duration')}}</label>
-                            <p class="project-item-text">{{ proposal.duration_in_day }}&nbsp;{{$t('days')}}</p>
+                            <label class="project-item-label">{{ $t('Duration') }}</label>
+                            <p class="project-item-text">
+                              {{ proposal.duration_in_day }}&nbsp;{{ $t('days') }}
+                            </p>
                           </div>
                           <div class="project-request-proposal-date-container">
-                            <label class="project-item-label">{{$t('Update')}}</label>
+                            <label class="project-item-label">{{ $t('Update') }}</label>
                             <p class="project-item-text">
                               {{ getDateFromFulltimeString(proposal.update_time) }}
                             </p>
                           </div>
                           <div class="project-request-proposal-from-container">
-                            <label class="project-item-label">{{$t('From')}}</label>
+                            <label class="project-item-label">{{ $t('From') }}</label>
                             <p class="project-item-text">
                               {{ proposal.proposer.first_name }} {{ proposal.proposer.last_name }}
                             </p>
@@ -121,13 +123,13 @@
                             class="request-proposal-action-reject"
                             @click="rejectProposal(project, proposal_index)"
                           >
-                            {{$t('reject')}}
+                            {{ $t('reject') }}
                           </button>
                           <button
                             class="request-proposal-action-accept"
                             @click="acceptProposal(project, proposal_index)"
                           >
-                            {{$t('accept')}}
+                            {{ $t('accept') }}
                           </button>
                         </div>
                         <div class="request-proposal-content-container">
@@ -141,17 +143,19 @@
                             :id="'payment-stage-' + stage_index"
                           >
                             <div class="project-request-proposal-stage-payment-container">
-                              <label class="project-item-label">{{$t('Payment')}}</label>
+                              <label class="project-item-label">{{ $t('Payment') }}</label>
                               <p class="project-item-text">
                                 {{ stage.amount }} {{ stage.currency }}
                               </p>
                             </div>
                             <div class="project-request-proposal-stage-duration-container">
-                              <label class="project-item-label">{{$t('Duration')}}</label>
-                              <p class="project-item-text">{{ stage.duration_in_day }}&nbsp;{{$t('days')}}</p>
+                              <label class="project-item-label">{{ $t('Duration') }}</label>
+                              <p class="project-item-text">
+                                {{ stage.duration_in_day }}&nbsp;{{ $t('days') }}
+                              </p>
                             </div>
                             <div class="project-request-proposal-stage-note-container">
-                              <label class="project-item-label">{{$t('Note')}}</label>
+                              <label class="project-item-label">{{ $t('Note') }}</label>
                               <p class="project-item-text">{{ stage.note }}</p>
                             </div>
                           </div>
@@ -165,7 +169,7 @@
             <div class="accordion-body" v-if="isPendingProposal(project)">
               <div class="float-action-container">
                 <button class="proposal-action-withdraw" @click="withdrawAndEditProposal(project)">
-                  {{$t('withdraw')}}&{{$t('edit')}}
+                  {{ $t('withdraw') }}&{{ $t('edit') }}
                 </button>
               </div>
               <div class="request-proposal-content-container">
@@ -179,15 +183,17 @@
                   :id="'payment-stage-' + stage_index"
                 >
                   <div class="project-request-proposal-stage-payment-container">
-                    <label class="project-item-label">{{$t('Payment')}}</label>
+                    <label class="project-item-label">{{ $t('Payment') }}</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
                   </div>
                   <div class="project-request-proposal-stage-duration-container">
-                    <label class="project-item-label">{{$t('Duration')}}</label>
-                    <p class="project-item-text">{{ stage.duration_in_day }}&nbsp;{{$t('days')}}</p>
+                    <label class="project-item-label">{{ $t('Duration') }}</label>
+                    <p class="project-item-text">
+                      {{ stage.duration_in_day }}&nbsp;{{ $t('days') }}
+                    </p>
                   </div>
                   <div class="project-request-proposal-stage-note-container">
-                    <label class="project-item-label">{{$t('Note')}}</label>
+                    <label class="project-item-label">{{ $t('Note') }}</label>
                     <p class="project-item-text">{{ stage.note }}</p>
                   </div>
                 </div>
@@ -211,7 +217,7 @@
                   aria-expanded="false"
                   aria-controls="collapse-project-invite-collaborator"
                 >
-                  <div class="project-invite-collaborator">+ {{$t('Invite')}}</div>
+                  <div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
                 </button>
                 <div
                   id="collapse-project-invite-collaborator"
@@ -220,7 +226,9 @@
                 >
                   <div class="project-invite-collaborator-form-container">
                     <div class="project-invite-collaborator-form">
-                      <label class="project-item-label">{{$t('Input E-mail to invite other')}}</label>
+                      <label class="project-item-label">{{
+                        $t('Input E-mail to invite other')
+                      }}</label>
                       <input
                         class="project-invite-collaborator-input"
                         v-model="newInviteCollaborator[project_index]"
@@ -232,7 +240,7 @@
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
                       "
                     >
-                      {{$t('Submit')}}
+                      {{ $t('Submit') }}
                     </button>
                   </div>
                 </div>
@@ -250,14 +258,16 @@
                     >
                       <div class="project-milestone-bar-container">
                         <div class="project-milestone-bar-progress">
-                          <label class="project-item-label">{{$t('Progress')}}</label>
+                          <label class="project-item-label">{{ $t('Progress') }}</label>
                           <p class="project-item-text">
                             {{ project.project.progress.current_milestone }} /
-                            {{ project.project.progress.milestones.length }}&nbsp;{{$t('milestones')}}
+                            {{ project.project.progress.milestones.length }}&nbsp;{{
+                              $t('milestones')
+                            }}
                           </p>
                         </div>
                         <div class="project-milestone-bar-status">
-                          <label class="project-item-label">{{$t('Status')}}</label>
+                          <label class="project-item-label">{{ $t('Status') }}</label>
                           <p class="project-item-text">
                             {{
                               fromIntToMilestoneStatus(project.project.progress.milestone_status)
@@ -265,7 +275,7 @@
                           </p>
                         </div>
                         <div class="project-milestone-bar-paid">
-                          <label class="project-item-label">{{$t('Paid')}}</label>
+                          <label class="project-item-label">{{ $t('Paid') }}</label>
                           <p class="project-item-text">
                             {{ project.project.progress.actual_paid }} /
                             {{ project.project.progress.expected_payment }}
@@ -273,7 +283,7 @@
                           </p>
                         </div>
                         <div class="project-milestone-bar-update">
-                          <label class="project-item-label">{{$t('Update')}}</label>
+                          <label class="project-item-label">{{ $t('Update') }}</label>
                           <p class="project-item-text">
                             {{ getDateFromFulltimeString(project.project.progress.last_update) }}
                           </p>
@@ -294,32 +304,32 @@
                         :id="'project-milestone-' + milestone.index"
                       >
                         <div class="project-milestone-index">
-                          <label class="project-item-label">{{$t('Milestone')}}</label>
+                          <label class="project-item-label">{{ $t('Milestone') }}</label>
                           <p class="project-item-text">
                             {{ milestone.index }}
                           </p>
                         </div>
                         <div class="project-milestone-description">
-                          <label class="project-item-label">{{$t('Description')}}</label>
+                          <label class="project-item-label">{{ $t('Description') }}</label>
                           <p class="project-item-text">
                             {{ milestone.description }}
                           </p>
                         </div>
                         <div class="project-milestone-status">
-                          <label class="project-item-label">{{$t('Status')}}</label>
+                          <label class="project-item-label">{{ $t('Status') }}</label>
                           <p class="project-item-text">
                             {{ fromIntToMilestoneStatus(milestone.status) }}
                           </p>
                         </div>
                         <div class="project-milestone-payment">
-                          <label class="project-item-label">{{$t('Payment')}}</label>
+                          <label class="project-item-label">{{ $t('Payment') }}</label>
                           <p class="project-item-text">
                             {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                             {{ project.project.progress.payment_currency }}
                           </p>
                         </div>
                         <div class="project-milestone-update">
-                          <label class="project-item-label">{{$t('Update')}}</label>
+                          <label class="project-item-label">{{ $t('Update') }}</label>
                           <p class="project-item-text">
                             {{ getDateFromFulltimeString(milestone.update_time) }}
                           </p>
@@ -340,7 +350,7 @@
                             class="project-milestone-payment-confirm-button"
                             @click="handlePaymentAction(project.project, milestone)"
                           >
-                            {{$t('Mark As Paid')}}
+                            {{ $t('Mark As Paid') }}
                           </button>
                         </div>
                       </div>
@@ -359,19 +369,19 @@
                     >
                       <div class="project-code-bar-container">
                         <div class="project-code-git-status">
-                          <label class="project-item-label">{{$t('Code Depot')}}</label>
+                          <label class="project-item-label">{{ $t('Code Depot') }}</label>
                           <p class="project-item-text">{{ getGitStatus(project) }}</p>
                         </div>
                         <div class="project-code-commits">
-                          <label class="project-item-label">{{$t('Commits')}}</label>
+                          <label class="project-item-label">{{ $t('Commits') }}</label>
                           <p class="project-item-text">{{ project.project.code.total_commits }}</p>
                         </div>
                         <div class="project-code-last-committer">
-                          <label class="project-item-label">{{$t('Last committer')}}</label>
+                          <label class="project-item-label">{{ $t('Last committer') }}</label>
                           <p class="project-item-text">{{ project.project.code.last_commiter }}</p>
                         </div>
                         <div class="project-code-last-update">
-                          <label class="project-item-label">{{$t('Update')}}</label>
+                          <label class="project-item-label">{{ $t('Update') }}</label>
                           <p class="project-item-text">
                             {{ getDateFromFulltimeString(project.project.code.last_update) }}
                           </p>
@@ -395,12 +405,12 @@
                           trigger="click"
                           delay='{"show":"500", "hide":"100"}'
                         >
-                          {{$t('copy git url')}}
+                          {{ $t('copy git url') }}
                         </button>
                       </div>
                       <div class="project-code-statistics-container">
-                        <button class="project-code-manage-button">{{$t('Manage')}}</button>
-                        {{$t('TO BE IMPLEMENTED.')}}
+                        <button class="project-code-manage-button">{{ $t('Manage') }}</button>
+                        {{ $t('TO BE IMPLEMENTED.') }}
                       </div>
                     </div>
                   </div>
@@ -417,19 +427,19 @@
                     >
                       <div class="project-issue-bar-container">
                         <div class="project-issue-open-issues">
-                          <label class="project-item-label">{{$t('Open issues')}}</label>
+                          <label class="project-item-label">{{ $t('Open issues') }}</label>
                           <p class="project-item-text">
                             {{ project.project.issue.number_of_open_issues }}
                           </p>
                         </div>
                         <div class="project-issue-resolved-issues">
-                          <label class="project-item-label">{{$t('Resolved issues')}}</label>
+                          <label class="project-item-label">{{ $t('Resolved issues') }}</label>
                           <p class="project-item-text">
                             {{ project.project.issue.number_of_resolved_issues }}
                           </p>
                         </div>
                         <div class="project-issue-closed-issues">
-                          <label class="project-item-label">{{$t('Closed issues')}}</label>
+                          <label class="project-item-label">{{ $t('Closed issues') }}</label>
                           <p class="project-item-text">
                             {{ project.project.issue.number_of_closed_issues }}
                           </p>
@@ -455,7 +465,7 @@
                         aria-expanded="false"
                         aria-controls="collapse-project-issue"
                       >
-                        <div class="project-add-new-issue">+ {{$t('Add Issue')}}</div>
+                        <div class="project-add-new-issue">+ {{ $t('Add Issue') }}</div>
                       </button>
                       <div
                         id="collapse-project-new-issue"
@@ -464,7 +474,9 @@
                       >
                         <div class="project-issue-description-container">
                           <div class="project-issue-description">
-                            <label class="project-item-label">{{$t('New issue description')}}</label>
+                            <label class="project-item-label">{{
+                              $t('New issue description')
+                            }}</label>
                             <textarea
                               class="project-new-issue-textarea"
                               type="text"
@@ -482,7 +494,7 @@
                                 )
                               "
                             >
-                              {{$t('Submit')}}
+                              {{ $t('Submit') }}
                             </button>
                           </div>
                         </div>
@@ -506,17 +518,17 @@
                               aria-controls="collapse-project-issue-details"
                             >
                               <div class="project-issue-title">
-                                <label class="project-item-label">{{$t('Issue title')}}</label>
+                                <label class="project-item-label">{{ $t('Issue title') }}</label>
                                 <p class="project-item-text">{{ issue.title }}</p>
                               </div>
                               <div class="project-issue-status">
-                                <label class="project-item-label">{{$t('Status')}}</label>
+                                <label class="project-item-label">{{ $t('Status') }}</label>
                                 <p class="project-item-text">
                                   {{ fromIntToProjectIssueStatus(issue.status) }}
                                 </p>
                               </div>
                               <div class="project-issue-update">
-                                <label class="project-item-label">{{$t('Last updated')}}</label>
+                                <label class="project-item-label">{{ $t('Last updated') }}</label>
                                 <p class="project-item-text">
                                   {{ getDateFromFulltimeString(issue.update_time) }}
                                 </p>
@@ -529,7 +541,9 @@
                             :data-bs-parent="'#collapse-project-issue-details' + issue_index"
                           >
                             <div class="project-issue-description-container">
-                              <label class="project-item-label">{{$t('Issue description')}}</label>
+                              <label class="project-item-label">{{
+                                $t('Issue description')
+                              }}</label>
                               <p class="project-item-text">{{ issue.description }}</p>
                             </div>
                             <div class="project-issue-action-container">
@@ -538,21 +552,21 @@
                                 class="project-issue-action-button"
                                 @click="setProjectIssueStatus(issue.id, 1)"
                               >
-                                {{$t('Resolve')}}
+                                {{ $t('Resolve') }}
                               </button>
                               <button
                                 :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
                                 class="project-issue-action-button"
                                 @click="setProjectIssueStatus(issue.id, 2)"
                               >
-                                {{$t('Confirm')}}
+                                {{ $t('Confirm') }}
                               </button>
                               <button
                                 :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
                                 class="project-issue-action-button"
                                 @click="setProjectIssueStatus(issue.id, 0)"
                               >
-                                {{$t('Reopen')}}
+                                {{ $t('Reopen') }}
                               </button>
                             </div>
                           </div>
@@ -1075,7 +1089,7 @@ export default {
 
 .request-proposal-payment-plan {
   @extend .container;
-  border: 1px dashed #9CB0F6;
+  border: 1px dashed #9cb0f6;
   border-radius: 3px;
   padding: 24px;
   margin: 32px 0;
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 88ff130..7d9e1eb 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -336,7 +336,7 @@ export default {
   box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5);
   border-radius: 12px;
   overflow: hidden;
-  background: white
+  background: white;
 }
 
 .action-bar {
diff --git a/frontend/src/plugins/store/basic.js b/frontend/src/plugins/store/basic.js
index 5a7bbd5..68a5a2d 100644
--- a/frontend/src/plugins/store/basic.js
+++ b/frontend/src/plugins/store/basic.js
@@ -3,82 +3,81 @@ import { i18n } from '@/lang'
 import { WsConnectionFactory } from '@/utils/backend/websocket'
 
 const basicStore = {
-    namespaced: true,
-    state() {
-      return {
-        language: 'zh',
-        unreadCountMapper: [],
-        downstream_web_socket: null,
-      }
+  namespaced: true,
+  state() {
+    return {
+      language: 'zh',
+      unreadCountMapper: [],
+      downstream_web_socket: null
+    }
+  },
+  mutations: {
+    setLanguage(state, language) {
+      state.language = language
+      i18n.global.locale.value = language
+      localStorage.setItem('language', language)
     },
-    mutations: {
-        setLanguage(state, language) {
-            state.language = language
-            i18n.global.locale.value = language
-            localStorage.setItem('language', language)
+    initWebsocket(state, token) {
+      state.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
+        token,
+        () => {
+          // keep
+          setInterval(() => {
+            state.downstream_web_socket.send(1)
+          }, 1000 * 60)
+          console.log('downstream_web_socket open')
         },
-        initWebsocket(state, token) {
-          state.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
-            token,
-            () => {
-              // keep
-              setInterval(() => {
-                state.downstream_web_socket.send(1)
-              }, 1000 * 60)
-              console.log('downstream_web_socket open')
-            },
-            (e) => {
-              const data = JSON.parse(e.data)
-              let unread = state.unreadCountMapper[data.sender_id]
-              if (unread) {
-                unread ++
-              } else {
-                unread = 1
-              }
-              state.unreadCountMapper[data.sender_id] = unread
-              console.log('downstream_web_socket onmessage: ', data, state.unreadCountMapper)
-            },
-            () => {
-              console.log('downstream_web_socket error')
-            },
-            () => {
-              console.log('downstream_web_socket closed')
-            }
-          )
-        },
-        readMessageBy(state, sender) {
-          delete state.unreadCountMapper?.[sender]
-        }
-    },
-    actions: {
-      setLanguage(context, language) {
-        context.commit('setLanguage', language)
-      },
-      initWebsocket(context, token) {
-        context.commit('initWebsocket', token)
-      },
-      readMessageBy(context, sender) {
-        context.commit('readMessageBy', sender)
-      }
-    },
-    getters: {
-        language(state) {
-          return state.language
-        },
-        unreadCount(state) {
-          let count = 0
-          for (let key in state.unreadCountMapper) {
-            if (state.unreadCountMapper.hasOwnProperty(key)) {
-              count += state.unreadCountMapper[key]
-            }
+        (e) => {
+          const data = JSON.parse(e.data)
+          let unread = state.unreadCountMapper[data.sender_id]
+          if (unread) {
+            unread++
+          } else {
+            unread = 1
           }
-          return count
+          state.unreadCountMapper[data.sender_id] = unread
+          console.log('downstream_web_socket onmessage: ', data, state.unreadCountMapper)
         },
-        unreadCountMapper(state) {
-          return state.unreadCountMapper
+        () => {
+          console.log('downstream_web_socket error')
+        },
+        () => {
+          console.log('downstream_web_socket closed')
         }
+      )
+    },
+    readMessageBy(state, sender) {
+      delete state.unreadCountMapper?.[sender]
+    }
+  },
+  actions: {
+    setLanguage(context, language) {
+      context.commit('setLanguage', language)
+    },
+    initWebsocket(context, token) {
+      context.commit('initWebsocket', token)
+    },
+    readMessageBy(context, sender) {
+      context.commit('readMessageBy', sender)
+    }
+  },
+  getters: {
+    language(state) {
+      return state.language
+    },
+    unreadCount(state) {
+      let count = 0
+      for (let key in state.unreadCountMapper) {
+        if (state.unreadCountMapper.hasOwnProperty(key)) {
+          count += state.unreadCountMapper[key]
+        }
+      }
+      return count
+    },
+    unreadCountMapper(state) {
+      return state.unreadCountMapper
     }
   }
-  
-  export { basicStore }
-  
\ No newline at end of file
+}
+
+export { basicStore }