From 2f73d454bb280e778dff7d90af91f122907a4488 Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Fri, 6 Sep 2024 08:21:12 -0700
Subject: [PATCH] Test passed for local zoom call making

---
 Dockerfile                                    |   9 +
 frontend/frontend                             |   1 +
 frontend/src/components/EmptyContent.vue      |   8 +-
 frontend/src/headers/HeaderUser.vue           |   4 +-
 frontend/src/lang/en.js                       |   4 +-
 frontend/src/lang/zh.js                       |   2 +-
 .../pages/guest/SigninWithEmailAndCode.vue    |  24 +-
 frontend/src/pages/public/About.vue           |  12 +-
 frontend/src/pages/public/Blogs.vue           |  13 +-
 frontend/src/pages/public/Career.vue          |   6 +-
 frontend/src/pages/user/messages/Home.vue     |  20 +-
 frontend/src/pages/user/providers/Home.vue    |  12 +-
 frontend/src/pages/user/requests/Home.vue     | 147 +++--------
 frontend/src/pages/user/workspace/Home.vue    | 240 +++++++++++++-----
 frontend/src/types/projectUtils.js            |   4 +-
 frontend/src/utils/backend/workspace.js       |  27 ++
 16 files changed, 299 insertions(+), 234 deletions(-)
 create mode 120000 frontend/frontend

diff --git a/Dockerfile b/Dockerfile
index 31fdab5..3aad092 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,6 +2,10 @@
 FROM node:lts-alpine as build-stage
 ARG CONTAINER_APP_ROOT="/app"
 ARG FRONTEND_PORT=8080
+# TODO: further testing before turning on
+# ARG ZOOM_CLIENT_ID
+# ARG ZOOM_REDIRECT_URI
+# ARG ZOOM_SCOPE
 RUN npm update npm -g
 RUN npm config set "@fortawesome:registry" https://npm.fontawesome.com/
 RUN npm config set "//npm.fontawesome.com/:_authToken" 58624E90-2685-43C6-BF0F-0BFECCE11CD2
@@ -17,6 +21,11 @@ COPY frontend/*.html ./
 COPY frontend/src ./src
 COPY frontend/public ./public
 
+# TODO: further testing before turning on
+# RUN echo "VUE_APP_ZOOM_CLIENT_ID=${ZOOM_CLIENT_ID}" >> .env
+# RUN echo "VUE_APP_ZOOM_REDIRECT_URI=${ZOOM_REDIRECT_URI}" >> .env
+# RUN echo "VUE_APP_ZOOM_SCOPE=${ZOOM_SCOPE}" >> .env
+
 RUN npm run build
 
 # production stage
diff --git a/frontend/frontend b/frontend/frontend
new file mode 120000
index 0000000..39fc200
--- /dev/null
+++ b/frontend/frontend
@@ -0,0 +1 @@
+../freeleaps2-frontend/frontend
\ No newline at end of file
diff --git a/frontend/src/components/EmptyContent.vue b/frontend/src/components/EmptyContent.vue
index c80b5e5..52b49ac 100644
--- a/frontend/src/components/EmptyContent.vue
+++ b/frontend/src/components/EmptyContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <div v-if="loading || empty" class="empty-content-container" :class="{autoFit : 'auto-fit'}">
-    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="">
-    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="">
+  <div v-if="loading || empty" class="empty-content-container" :class="{ autoFit: 'auto-fit' }">
+    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="" />
+    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="" />
     <span v-if="empty && !loading" class="empty-text">{{ $t('No content yet') }}</span>
   </div>
 </template>
@@ -34,11 +34,13 @@ export default {
     width: 188px;
     height: 188px;
   }
+
   .empty-img {
     width: 188px;
     height: 188px;
     margin-bottom: 15px;
   }
+
   .empty-text {
     font-size: 26px;
     color: #6e7387;
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index f8b67ae..e7f8230 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -45,8 +45,8 @@
       </div>
       <div class="profile-container">
         <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" :src="userProfile?.account?.basic?.photo?.base64
-          ? userProfile?.account?.basic?.photo?.base64
-          : profileUrl
+            ? userProfile?.account?.basic?.photo?.base64
+            : profileUrl
           " />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index eaf6e9c..d359bbe 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -215,7 +215,7 @@ export default {
   Goal: 'Goal',
   Message: 'Message',
   'Upload attachment': 'Upload attachment',
-  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  "Didn't get the email? Check junk folder or": "Didn't get the email? Check junk folder or ",
   'send again': 'send again',
-  'No content yet': 'No content yet',
+  'No content yet': 'No content yet'
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4e78ffc..1acde64 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -213,7 +213,7 @@ export default {
   'Lines of code per week': '每周代码产量',
   Message: '消息',
   'Upload attachment': '上传附件',
-  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  "Didn't get the email? Check junk folder or": '没收到邮件？检查垃圾文件夹或',
   'send again': '重新发送',
   'No content yet': '暂无内容',
   OUTSTANDING: '进行中',
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index b65fd6e..616a2c4 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -9,8 +9,14 @@
         <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
-              <input class="input-email" id="inputCode" type="text" :placeholder="'Code sent to your email'"
-                v-model="code" @focus="inputFocus" />
+              <input
+                class="input-email"
+                id="inputCode"
+                type="text"
+                :placeholder="'Code sent to your email'"
+                v-model="code"
+                @focus="inputFocus"
+              />
               <label for="inputCode">{{ $t('Authenticaion Code Sent To Your Email') }}</label>
             </div>
             <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
@@ -18,9 +24,15 @@
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
         <p class="error-msg msg-center" v-if="!message">
-          <span>{{ $t('Didn\'t get the email? Check junk folder or') }}</span>
-          <button class="btn btn-link resend-btn" :disabled="countdown !== 0" type="button"
-            @click="trySigninWithEmail">{{ $t('send again') }}</button>
+          <span>{{ $t("Didn't get the email? Check junk folder or") }}</span>
+          <button
+            class="btn btn-link resend-btn"
+            :disabled="countdown !== 0"
+            type="button"
+            @click="trySigninWithEmail"
+          >
+            {{ $t('send again') }}
+          </button>
           <span v-if="countdown !== 0" class="countdown">({{ countdown }})</span>
         </p>
       </div>
@@ -52,7 +64,7 @@ export default {
     }
   },
 
-  created() { },
+  created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index d18dfe1..0ad1cd2 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="directories_containter">
     <div class="directory_container" v-for="(directory, index) in directories" :key="index">
-      <div
-        class="directory_cover_image"
-        :style="{ 'background-image': `url(${directory.cover_picture})` }"
-      />
+      <div class="directory_cover_image" :style="{ 'background-image': `url(${directory.cover_picture})` }" />
       <p class="directory-title">{{ directory.title_text }}</p>
       <p class="directory-subtitle">{{ directory.summary_text }}</p>
       <button class="btn btn-link directory-btn" @click="view_link(directory)">
@@ -33,10 +30,8 @@ export default {
         })
     },
     view_link(directory) {
-      if (directory.content_id)
-        this.mnx_navToPdfContentViewer(directory.content_id)
-      else if (directory.content_link)
-        this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+      if (directory.content_id) this.mnx_navToPdfContentViewer(directory.content_id)
+      else if (directory.content_link) this.mnx_navToLinkContentViewer(btoa(directory.content_link))
     }
   },
   data() {
@@ -87,6 +82,7 @@ export default {
   color: #666666;
   margin-bottom: 5px;
 }
+
 .directory-btn {
   font-weight: 600;
 }
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 7ca82ce..42ab90a 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -1,11 +1,6 @@
 <template>
   <div v-if="blogs" class="blogs_containter">
-    <div
-      class="blog_containter"
-      v-for="(blog, index) in blogs"
-      :key="index"
-      @click="view_blog(blog)"
-    >
+    <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
       <h2>{{ blog.blog_name }}</h2>
       <div class="blog_cover_image" :style="{ 'background-image': `url(${blog.cover_picture})` }" />
       <p v-text="retrieve_summary(blog)"></p>
@@ -32,10 +27,8 @@ export default {
         })
     },
     view_blog(blog) {
-      if (blog.content_id)
-        this.mnx_navToPdfContentViewer(blog.content_id)
-      else if (blog.content_link)
-        this.mnx_navToLinkContentViewer(btoa(blog.content_link))
+      if (blog.content_id) this.mnx_navToPdfContentViewer(blog.content_id)
+      else if (blog.content_link) this.mnx_navToLinkContentViewer(btoa(blog.content_link))
     },
     retrieve_summary(blog) {
       return blog.summary_text
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index fb415bc..735a173 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -28,10 +28,8 @@ export default {
         })
     },
     view_link(directory) {
-      if (directory.content_id)
-        this.mnx_navToPdfContentViewer(directory.content_id)
-      else if (directory.content_link)
-        this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+      if (directory.content_id) this.mnx_navToPdfContentViewer(directory.content_id)
+      else if (directory.content_link) this.mnx_navToLinkContentViewer(btoa(directory.content_link))
     }
   },
   data() {
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 304ab37..154de9c 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -6,7 +6,8 @@
           <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
             selected: selConversation?.id === conversation?.id
           }" @click="selectConversation(conversation)">
-            <img class="participant-portrait" alt="user portrait" :src="conversation?.photo?.base64?conversation.photo.base64:profileUrl" />
+            <img class="participant-portrait" alt="user portrait"
+              :src="conversation?.photo?.base64 ? conversation.photo.base64 : profileUrl" />
             <div class="conversation-summary-container">
               <div class="conversation-summary-header-container">
                 <span class="participant-fullname">
@@ -32,7 +33,8 @@
           <div v-for="(item, index) in messages" :key="index" class="message-item-container"
             :class="item.sender_id == userIdentityNote ? 'me' : ''">
             <div class="message-item-header-container">
-              <img class="message-item-sender-portrait" alt="user portrait" :src="conversation?.sender_photo?.base64?conversation.sender_photo.base64:profileUrl" />
+              <img class="message-item-sender-portrait" alt="user portrait" :src="conversation?.sender_photo?.base64 ? conversation.sender_photo.base64 : profileUrl
+                " />
               <span class="message-item-sender-fullname">
                 {{ item.sender_firstname }}
                 {{ item.sender_lastname }}
@@ -130,7 +132,7 @@ export default {
         .then((response) => {
           this.messages = response?.data || []
           console.log('Received message for conversation:', conversation_id)
-          this.scrollToNewestMessageThread();
+          this.scrollToNewestMessageThread()
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -171,8 +173,8 @@ export default {
             this.writtenMessage = null
 
             // Scroll to the newest message
-            this.scrollToNewestMessage();
-            this.scrollToNewestMessageThread();
+            this.scrollToNewestMessage()
+            this.scrollToNewestMessageThread()
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
@@ -194,17 +196,17 @@ export default {
     },
     scrollToNewestMessage() {
       this.$nextTick(() => {
-        const messagesContainer = this.$refs.messagesContainer;
+        const messagesContainer = this.$refs.messagesContainer
         messagesContainer.scrollTop = messagesContainer.scrollHeight
-      });
+      })
     },
     scrollToNewestMessageThread() {
       this.$nextTick(() => {
-        const messageThreadContainer = this.$refs.messageThreadContainer;
+        const messageThreadContainer = this.$refs.messageThreadContainer
         if (messageThreadContainer != null) {
           messageThreadContainer.scrollTop = messageThreadContainer.scrollHeight
         }
-      });
+      })
     }
   }
 }
diff --git a/frontend/src/pages/user/providers/Home.vue b/frontend/src/pages/user/providers/Home.vue
index f3b2bcc..0f7311f 100644
--- a/frontend/src/pages/user/providers/Home.vue
+++ b/frontend/src/pages/user/providers/Home.vue
@@ -185,17 +185,15 @@
                   $t('Action panel')
                   }}</label>
                 <div class="invite-to-request-container">
-                  <label class="invite-to-request-content-label" for="invite-to-request-content">{{ $t('Invite')
-                    }}
+                  <label class="invite-to-request-content-label" for="invite-to-request-content">{{ $t('Invite') }}
                     <span class="invite-to-request-name-span">{{ provider.user_profile.first_name }}
                       {{ provider.user_profile.last_name }}</span>
                     {{ $t('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)
-                          " />
+                      <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>
@@ -418,7 +416,7 @@ export default {
 }
 
 .marb-10 {
-  margin-bottom: 10px !important
+  margin-bottom: 10px !important;
 }
 
 .self-intro-content-container {
diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 0bf0484..7c6cbc1 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -1,39 +1,20 @@
 <template>
   <empty-content :loading="loading" :empty="requestGroups?.length === 0" />
   <div class="request-hub">
-    <div
-      v-for="(group, index) in requestGroups"
-      :key="index"
-      class="request-invitations"
-      :id="group.name"
-    >
+    <div v-for="(group, index) in requestGroups" :key="index" class="request-invitations" :id="group.name">
       <div v-if="group.data" id="request-invitation-container">
-        <div
-          class="accordion accordion-list"
-          v-for="(request, index) in group.data"
-          :key="index"
-          :id="request.id"
-        >
+        <div class="accordion accordion-list" v-for="(request, index) in group.data" :key="index" :id="request.id">
           <div class="accordion-item my-3">
             <h2 class="accordion-header">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                 <div class="dashed-container request-content-container">
                   <div class="request-content-issuer-container">
-                    <label class="request-content-label" for="request-content-issuer-box">{{
-                      $t('Issuer')
-                    }}</label>
+                    <label class="request-content-label" for="request-content-issuer-box">{{ $t('Issuer') }}</label>
                     <div class="request-content-box" id="request-content-issuer-box">
                       <span class="request-content-issuer-text">
                         {{ request.issuer_profile.first_name }}
-                        {{ request.issuer_profile.last_name }}</span
-                      >
+                        {{ request.issuer_profile.last_name }}</span>
                     </div>
                   </div>
                   <div class="request-content-title-container">
@@ -67,11 +48,8 @@
                 </div>
               </button>
             </h2>
-            <div
-              :id="'collapse' + index"
-              class="accordion-collapse collapse"
-              data-bs-parent="#request-invitation-container"
-            >
+            <div :id="'collapse' + index" class="accordion-collapse collapse"
+              data-bs-parent="#request-invitation-container">
               <div class="accordion-body">
                 <div class="request-description-container">
                   <button class="make-proposal-button" type="button" @click="Propose(request)">
@@ -81,23 +59,13 @@
                     {{ $t('Message') }}
                   </button>
                   <div class="request-description-content" v-html="request.content"></div>
-                  <div
-                    class="pdf-actions"
-                    v-for="(file, index) in request.attached_files"
-                    :key="index"
-                  >
-                    <button
-                      class="btn btn-link"
-                      data-bs-toggle="modal"
-                      data-bs-target="#pdf-viewer"
-                      @click="previewAttachedFile(request.id, file.document_id, file.file_name)"
-                    >
+                  <div class="pdf-actions" v-for="(file, index) in request.attached_files" :key="index">
+                    <button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#pdf-viewer"
+                      @click="previewAttachedFile(request.id, file.document_id, file.file_name)">
                       {{ $t('Preview') }}{{ file.file_name }}
                     </button>
-                    <button
-                      class="btn btn-link"
-                      @click="downloadAttachedFile(request.id, file.document_id, file.file_name)"
-                    >
+                    <button class="btn btn-link"
+                      @click="downloadAttachedFile(request.id, file.document_id, file.file_name)">
                       {{ $t('Download') }}{{ file.file_name }}
                     </button>
                   </div>
@@ -108,82 +76,45 @@
                 > -->
                   <div class="issuer-achievement-container" id="issuer-achievement-container">
                     <div class="issuer-achievement-isssuer-container">
-                      <label
-                        class="issuer-achievement-label"
-                        for="issuer-achievement-isssuer-content-div"
-                        >{{ $t('Name') }}</label
-                      >
-                      <div
-                        class="issuer-achievement-content-container"
-                        id="issuer-achievement-isssuer-content-div"
-                      >
+                      <label class="issuer-achievement-label" for="issuer-achievement-isssuer-content-div">{{ $t('Name')
+                        }}</label>
+                      <div class="issuer-achievement-content-container" id="issuer-achievement-isssuer-content-div">
                         <span class="issuer-achievement-issuer-text">
                           {{ request.issuer_profile.first_name }}
-                          {{ request.issuer_profile.last_name }}</span
-                        >
+                          {{ request.issuer_profile.last_name }}</span>
                       </div>
                     </div>
                     <div class="issuer-achievement-stay-container">
-                      <label
-                        class="issuer-achievement-label"
-                        for="issuer-achievement-stay-content-div"
-                        >{{ $t('Stay on Freeleaps') }}</label
-                      >
-                      <div
-                        class="issuer-achievement-content-container"
-                        id="issuer-achievement-stay-content-div"
-                      >
+                      <label class="issuer-achievement-label" for="issuer-achievement-stay-content-div">{{ $t('Stay on Freeleaps') }} </label>
+                      <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
                         <span class="issuer-achievement-stay-content-text">
                           {{ request.issuer_achievement.activeness.days_of_staying_on }}
-                          {{ $t('day(s)') }}</span
-                        >
+                          {{ $t('day(s)') }}</span>
                       </div>
                     </div>
                     <div class="issuer-achievement-paid-container">
-                      <label
-                        class="issuer-achievement-label"
-                        for="issuer-achievement-paid-content-div"
-                        >{{ $t('Total payment') }}</label
-                      >
-                      <div
-                        class="issuer-achievement-content-container"
-                        id="issuer-achievement-stay-content-div"
-                      >
+                      <label class="issuer-achievement-label" for="issuer-achievement-paid-content-div">{{ $t('Total payment') }}</label>
+                      <div class="issuer-achievement-content-container" id="issuer-achievement-stay-content-div">
                         <span class="issuer-achievement-paid-content-text">
                           {{ request.issuer_achievement.issuer.spending.total }}
-                          {{ request.issuer_achievement.issuer.spending.currency }}</span
-                        >
+                          {{ request.issuer_achievement.issuer.spending.currency }}</span>
                       </div>
                     </div>
                     <div class="issuer-achievement-deposit-container">
-                      <label
-                        class="issuer-achievement-label"
-                        for="issuer-achievement-deposit-content-div"
-                        >{{ $t('Deposit') }}</label
-                      >
-                      <div
-                        class="issuer-achievement-content-container"
-                        id="issuer-achievement-deposit-content-div"
-                      >
+                      <label class="issuer-achievement-label" for="issuer-achievement-deposit-content-div">{{
+                        $t('Deposit') }}</label>
+                      <div class="issuer-achievement-content-container" id="issuer-achievement-deposit-content-div">
                         <span class="issuer-achievement-deposit-content-text">
                           {{ request.issuer_achievement.issuer.deposit.available }}
-                          {{ request.issuer_achievement.issuer.deposit.currency }}</span
-                        >
+                          {{ request.issuer_achievement.issuer.deposit.currency }}</span>
                       </div>
                     </div>
                     <div class="issuer-achievement-credit-container">
-                      <label
-                        class="issuer-achievement-label"
-                        for="issuer-achievement-credit-content-div"
-                        >{{ $t('Credit') }}</label
-                      >
-                      <div
-                        class="issuer-achievement-content-container"
-                        id="issuer-achievement-credit-content-div"
-                      >
+                      <label class="issuer-achievement-label" for="issuer-achievement-credit-content-div">{{
+                        $t('Credit') }}</label>
+                      <div class="issuer-achievement-content-container" id="issuer-achievement-credit-content-div">
                         <span class="issuer-achievement-credit-content-text">
-                          {{ request.issuer_achievement.activeness.credit }}</span
-                        >
+                          {{ request.issuer_achievement.activeness.credit }}</span>
                       </div>
                     </div>
                   </div>
@@ -195,23 +126,12 @@
       </div>
     </div>
   </div>
-  <div
-    class="modal fade"
-    id="pdf-viewer"
-    tabindex="-1"
-    aria-labelledby="pdf-viewer-label"
-    aria-hidden="true"
-  >
+  <div class="modal fade" id="pdf-viewer" tabindex="-1" aria-labelledby="pdf-viewer-label" aria-hidden="true">
     <div class="modal-dialog modal-xl">
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="pdf-viewer-label">{{ pdfDocument.title }}</h1>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <PDFReader :doc="pdfDocument.doc" />
@@ -279,7 +199,6 @@ export default {
         })
     },
     downloadAttachedFile(request_id, document_id, file_name) {
-
       // window.open(`http://${window.location.host}/api/workspace/request/fetch-attached-file-as-download?request_id=${request_id}&document_id=${document_id}`)
 
       // const link = document.createElement('a')
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index cd13ec3..9faf007 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,13 +2,22 @@
   <empty-content :loading="loading" :empty="projects?.length === 0" />
   <div v-if="projects && projects.length > 0" class="workspace-container">
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
-        :id="project.id">
+      <div
+        class="accordion accordion-list"
+        v-for="(project, project_index) in projects"
+        :key="project_index"
+        :id="project.id"
+      >
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
-              :aria-controls="'collapse-' + project_index">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index"
+              aria-expanded="false"
+              :aria-controls="'collapse-' + project_index"
+            >
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -17,7 +26,9 @@
                   </div>
                   <div class="project-item-status-container">
                     <label class="project-item-label">{{ $t('Status') }}</label>
-                    <p class="project-item-text">{{ $t(fromIntToProjectStatus(project.status)) }}</p>
+                    <p class="project-item-text">
+                      {{ $t(fromIntToProjectStatus(project.status)) }}
+                    </p>
                   </div>
                   <div class="project-item-date-container">
                     <label class="project-item-label">{{ $t('Update') }}</label>
@@ -29,8 +40,9 @@
                 <div class="workspace-item-bar-right">
                   <div class="project-item-inform-container">
                     <label class="project-item-label">{{ $t('Issuer') }}</label>
-                    <p class="project-item-text">{{ project?.issuer?.first_name }}
-                      {{ project?.issuer?.last_name }}</p>
+                    <p class="project-item-text">
+                      {{ project?.issuer?.first_name }} {{ project?.issuer?.last_name }}
+                    </p>
                   </div>
                 </div>
                 <!-- <div class="workspace-item-bar-right">
@@ -42,7 +54,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
+          <div
+            :id="'collapse-' + project_index"
+            class="accordion-collapse collapse"
+            :data-bs-parent="'#' + project.id"
+          >
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -50,17 +66,30 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  contenteditable="false"></div>
+                <div
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
-                  :id="proposal.id">
+                <div
+                  class="accordion"
+                  v-for="(proposal, proposal_index) in project.proposals"
+                  :key="proposal_index"
+                  :id="proposal.id"
+                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index">
+                      <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
+                        aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index"
+                      >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">{{ $t('Quote') }}</label>
@@ -95,16 +124,23 @@
                         </div>
                       </button>
                     </h2>
-                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id">
+                    <div
+                      :id="'collapse-request-proposal' + proposal_index"
+                      class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id"
+                    >
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button class="request-proposal-action-reject"
-                            @click="rejectProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)"
+                          >
                             {{ $t('reject') }}
                           </button>
-                          <button class="request-proposal-action-accept"
-                            @click="acceptProposal(project, proposal_index)">
+                          <button
+                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)"
+                          >
                             {{ $t('accept') }}
                           </button>
                         </div>
@@ -112,9 +148,12 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div class="request-proposal-payment-plan-stage-container"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
-                            :id="'payment-stage-' + stage_index">
+                          <div
+                            class="request-proposal-payment-plan-stage-container"
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
+                            :key="stage_index"
+                            :id="'payment-stage-' + stage_index"
+                          >
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">{{ $t('Payment') }}</label>
                               <p class="project-item-text">
@@ -149,9 +188,12 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div class="request-proposal-payment-plan-stage-container"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
-                  :id="'payment-stage-' + stage_index">
+                <div
+                  class="request-proposal-payment-plan-stage-container"
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
+                  :key="stage_index"
+                  :id="'payment-stage-' + stage_index"
+                >
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">{{ $t('Payment') }}</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -169,24 +211,40 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  contenteditable="false"></div>
+                <div
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
             </div>
             <div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
-                  aria-controls="collapse-project-invite-collaborator">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator"
+                  aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
                 </button>
-                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator">
+                <div
+                  id="collapse-project-invite-collaborator"
+                  class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator-form-container">
-                    <input type="text" v-model="newInviteCollaborator[project_index]"
-                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
+                    <input
+                      type="text"
+                      v-model="newInviteCollaborator[project_index]"
+                      :placeholder="$t('Input E-mail to invite other')"
+                      @keydown.enter="
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                        " />
+                      "
+                    />
                     <svg-icon icon="msg-enter" class-name="project-invite-enter" />
                   </div>
                 </div>
@@ -194,9 +252,14 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
-                      aria-controls="collapse-project-milestone">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-milestone"
+                    >
                       <div class="project-milestone-bar-container dashed-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">{{ $t('Progress') }}</label>
@@ -210,9 +273,7 @@
                         <div class="project-milestone-bar-status">
                           <label class="project-item-label">{{ $t('Status') }}</label>
                           <p class="project-item-text">
-                            {{
-                              $t(fromIntToMilestoneStatus(project.status))
-                            }}
+                            {{ $t(fromIntToMilestoneStatus(project.status)) }}
                           </p>
                         </div>
                         <div class="project-milestone-bar-paid">
@@ -232,11 +293,17 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone">
+                  <div
+                    id="collapse-project-milestone"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone"
+                  >
                     <table class="project-milestones-table">
-                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index">
+                      <tbody
+                        v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index"
+                      >
                         <tr>
                           <td>
                             <div class="project-milestones-table-content">
@@ -291,9 +358,14 @@
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
-                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                @click="handleMilestoneAction(project.project, milestone)">
+                              <button
+                                class="project-milestones-table-btn"
+                                :disabled="
+                                  isMilestoneActionButtonDisabled(project.project, milestone)
+                                "
+                                :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
+                                @click="handleMilestoneAction(project.project, milestone)"
+                              >
                                 {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                               </button>
                               <!-- <span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> -->
@@ -304,8 +376,10 @@
                           <td colspan="6">
                             <div class="project-milestones-qrcode-content">
                               <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button class="project-milestones-qrcode-button"
-                                @click="handlePaymentAction(project.project, milestone)">
+                              <button
+                                class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)"
+                              >
                                 {{ $t('Mark As Paid') }}
                               </button>
                             </div>
@@ -317,9 +391,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-code" aria-expanded="false"
-                      aria-controls="collapse-project-code">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-code"
+                    >
                       <div class="project-code-bar-container dashed-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">{{ $t('Code Depot') }}</label>
@@ -342,13 +421,22 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-code" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-code">
+                  <div
+                    id="collapse-project-code"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code"
+                  >
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
-                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
-                          delay='{"show":"500", "hide":"100"}'>
+                        <button
+                          v-if="project.project.code?.git_url"
+                          class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)"
+                          v-tooltip
+                          title="Copied"
+                          trigger="click"
+                          delay='{"show":"500", "hide":"100"}'
+                        >
                           {{ $t('copy git url') }}
                         </button>
                       </div>
@@ -364,9 +452,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue" aria-expanded="false"
-                      aria-controls="collapse-project-issue">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue"
+                    >
                       <div class="project-issue-bar-container dashed-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">{{ $t('Open issues') }}</label>
@@ -389,8 +482,11 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-issue" class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-issue">
+                  <div
+                    id="collapse-project-issue"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue"
+                  >
                     <div class="project-code-git-url-container">
                       <button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
                         {{ $t('Issues management') }}
@@ -571,6 +667,16 @@ export default {
   },
 
   methods: {
+    // To be called with initiating zoom call
+    redirectToZoomOAuth() {
+      const clientId = "YwetcrCFTzS_fHELZjkhPw"
+      const redirectUri = "http://localhost:5173/api/messages/oauth/zoom/callback"
+      const zoomOAuthUrl = `https://zoom.us/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=meeting:write:meeting`
+      
+      // Redirect the user to Zoom's OAuth 2.0 consent page
+      window.location.href = zoomOAuthUrl
+    },
+    // You can use this function on a button click to start the OAuth process,
     fetchView() {
       WorksapceApi.fetchWorkspaceView()
         .then((response) => {
@@ -988,7 +1094,7 @@ export default {
   // padding: 32px;
   padding-top: 12px;
   margin-top: -12px;
-  border-top: 1px solid #e1e1e1
+  border-top: 1px solid #e1e1e1;
 }
 
 .float-action-container {
diff --git a/frontend/src/types/projectUtils.js b/frontend/src/types/projectUtils.js
index 235fb34..bc57d05 100644
--- a/frontend/src/types/projectUtils.js
+++ b/frontend/src/types/projectUtils.js
@@ -56,7 +56,9 @@ const convertIntoToMilestoneStatus = function (i) {
       return p
     }
   }
-  return Object.keys(milestoneStatusEnum).find(key => milestoneStatusEnum[key] === milestoneStatusEnum.DONE)
+  return Object.keys(milestoneStatusEnum).find(
+    (key) => milestoneStatusEnum[key] === milestoneStatusEnum.DONE
+  )
 }
 
 const convertIntoToProjectIssueStatus = function (i) {
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 0d9db3d..16067ef 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -81,6 +81,33 @@ class WorksapceApi {
     return request
   }
 
+  static createZoomCall(zoom_access_token) {
+    let jwt = userUtils.getJwtToken() // Assuming you have a method to fetch the JWT token
+
+    // Make the POST request using backendAxios, with the Authorization header
+    try {
+      // Make the POST request using backendAxios, with the Authorization header
+      const response = backendAxios.post(
+        '/api/messages/trigger-video-call', // Your backend API for creating Zoom calls
+        {
+          token: zoom_access_token,
+          participants: ['freeleaps@gmail.com'] // Sending participants as an array of email addresses
+        },
+        {
+          headers: { Authorization: `Bearer ${jwt}` }
+        }
+      )
+
+      // Handle the response and update the meeting link
+      const result = response.data // Axios puts the response data in 'data'
+      document.getElementById('meeting-link').textContent =
+        `Join Zoom meeting: ${result.meeting_url}`
+    } catch (error) {
+      console.error('Failed to create Zoom call:', error)
+      document.getElementById('meeting-link').textContent = 'Failed to create Zoom meeting.'
+    }
+  }
+
   static fetchProject(project_id) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(