From ce6e5b3e610d17c85f1d67a0aa4bd690558cf7aa Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Tue, 16 Jul 2024 18:05:34 -0700
Subject: [PATCH] Fix english name for my work, job, workers, post a job

---
 frontend/src/headers/HeaderUser.vue        |  60 ++--
 frontend/src/lang/en.js                    |   8 +-
 frontend/src/lang/zh.js                    |   8 +-
 frontend/src/pages/user/workspace/Home.vue | 329 +++++++--------------
 4 files changed, 129 insertions(+), 276 deletions(-)

diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 7eae620..9e14ceb 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -1,60 +1,37 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div
-        class="information-bar"
-        @click="gotoMessages"
-        :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
-      >
+      <div class="information-bar" @click="gotoMessages"
+        :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }">
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button
-          class="navigation-item"
-          @click="gotoWorkspace"
-          :class="{'active': activePath == 'Workspace', 'badge': unreadWorkspace}"
-        >
+        <button class="navigation-item" @click="gotoWorkspace"
+          :class="{ 'active': activePath == 'Workspace', 'badge': unreadWorkspace }">
           <svg-icon icon="workspace" class-name="icon" />
-          {{ $t('Workspace') }}
+          {{ $t('My Work') }}
           <div v-if="unreadWorkspace" class="navigation-item-tip">
             {{ $t('Some update in your work') }}
           </div>
         </button>
-        <button
-          class="navigation-item"
-          @click="gotoRequests"
-          :class="{'active': activePath == 'Requests', 'badge': unreadRequest}"
-        >
+        <button class="navigation-item" @click="gotoRequests"
+          :class="{ 'active': activePath == 'Requests', 'badge': unreadRequest }">
           <svg-icon icon="requests" class-name="icon" />
-          {{ $t('Requests') }}
+          {{ $t('Jobs') }}
           <div v-if="unreadRequest" class="navigation-item-tip">
             {{ $t('Some update in your request') }}
           </div>
         </button>
-        <button
-          class="navigation-item"
-          @click="gotoProviders"
-          :class="activePath == 'Providers' ? 'active' : ''"
-        >
+        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
           <svg-icon icon="providers" class-name="icon" />
-          {{ $t('Providers') }}
+          {{ $t('Workers') }}
         </button>
-        <button
-          class="navigation-item"
-          @click="gotoIssueRequest"
-          :class="activePath == 'Post' ? 'active' : ''"
-        >
+        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
           <svg-icon icon="post" class-name="icon" />
-          {{ $t('Post') }}
+          {{ $t('Post a Job') }}
         </button>
         <div class="form-check form-switch header-switch-container">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            role="switch"
-            id="personal-earning-now-checkbox"
-            disabled
-          />
+          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled />
           <label class="form-check-label" for="personal-earning-now-checkbox">
             <span>{{ $t('Providing service') }}</span>
           </label>
@@ -65,13 +42,8 @@
         <laguage-switch class="laguage-switch" />
       </div>
       <div class="profile-container">
-        <img
-          alt="freeleaps logo"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-          id="accountButton"
-          src="@/assets/profile.png"
-        />
+        <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton"
+          src="@/assets/profile.png" />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
             <button class="account-menu-button" @click="gotoProfile">{{ $t('Profile') }}</button>
@@ -176,6 +148,7 @@ export default {
 .laguage-switch {
   margin-left: 30px;
 }
+
 .header-container {
   width: 100%;
   height: 100%;
@@ -275,6 +248,7 @@ export default {
 
     &:hover {
       color: $primary;
+
       .navigation-item-tip {
         display: block;
       }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index b98ecfb..cf0406a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -182,10 +182,10 @@ export default {
     'Execution plan proposed by the service provider',
   'Proceed to workspace': 'Proceed to workspace',
 
-  Workspace: 'Workspace',
-  Requests: 'Requests',
-  Providers: 'Providers',
-  Post: 'Post',
+  'My Work': 'My Work',
+  Jobs: 'Jobs',
+  Workers: 'Workers',
+  'Post a Job': 'Post a Job',
   'Providing service': 'Providing service',
   'Please go to profile page to add money receiving method':
     'Please go to profile page to add money receiving method',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index d7adb39..343a659 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -177,10 +177,10 @@ export default {
   'Payment plan proposed by the service provider': '服务提供方提议的付款方案',
   'Execution plan proposed by the service provider': '服务提供方提议的项目执行方案',
   'Proceed to workspace': '进入到我的工作',
-  Workspace: '推进中',
-  Requests: '找活干',
-  Providers: '招人工',
-  Post: '发需求',
+  'My Work': '推进中',
+  Jobs: '找活干',
+  Workers: '招人工',
+  'Post a Job': '发需求',
   History: '历史记录',
   'Providing service': '提供服务中',
   'Please go to profile page to add money receiving method': '请于个人资料页添加收款方式',
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index e0debee..a691827 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,22 +2,13 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div
-        class="accordion accordion-list"
-        v-for="(project, project_index) in projects"
-        :key="project_index"
-        :id="project.id"
-      >
+      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
+        :id="project.id">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index"
-              aria-expanded="false"
-              :aria-controls="'collapse-' + project_index"
-            >
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
+              :aria-controls="'collapse-' + project_index">
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -44,11 +35,7 @@
               </div>
             </button>
           </h2>
-          <div
-            :id="'collapse-' + project_index"
-            class="accordion-collapse collapse"
-            :data-bs-parent="'#' + project.id"
-          >
+          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -56,30 +43,17 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                  contenteditable="false"></div>
               </div>
               <div class="project-request-proposals-container">
-                <div
-                  class="accordion"
-                  v-for="(proposal, proposal_index) in project.proposals"
-                  :key="proposal_index"
-                  :id="proposal.id"
-                >
+                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
+                  :id="proposal.id">
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
-                        aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index"
-                      >
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index">
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">{{ $t('Quote') }}</label>
@@ -112,23 +86,16 @@
                         </div>
                       </button>
                     </h2>
-                    <div
-                      :id="'collapse-request-proposal' + proposal_index"
-                      class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id"
-                    >
+                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id">
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button
-                            class="request-proposal-action-reject"
-                            @click="rejectProposal(project, proposal_index)"
-                          >
+                          <button class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)">
                             {{ $t('reject') }}
                           </button>
-                          <button
-                            class="request-proposal-action-accept"
-                            @click="acceptProposal(project, proposal_index)"
-                          >
+                          <button class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)">
                             {{ $t('accept') }}
                           </button>
                         </div>
@@ -136,12 +103,9 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div
-                            class="request-proposal-payment-plan-stage-container"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
-                            :key="stage_index"
-                            :id="'payment-stage-' + stage_index"
-                          >
+                          <div class="request-proposal-payment-plan-stage-container"
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
+                            :id="'payment-stage-' + stage_index">
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">{{ $t('Payment') }}</label>
                               <p class="project-item-text">
@@ -176,12 +140,9 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div
-                  class="request-proposal-payment-plan-stage-container"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
-                  :key="stage_index"
-                  :id="'payment-stage-' + stage_index"
-                >
+                <div class="request-proposal-payment-plan-stage-container"
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
+                  :id="'payment-stage-' + stage_index">
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">{{ $t('Payment') }}</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -199,40 +160,24 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                  contenteditable="false"></div>
               </div>
             </div>
             <div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapse-project-invite-collaborator"
-                  aria-expanded="false"
-                  aria-controls="collapse-project-invite-collaborator"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator">
                   <div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
                 </button>
-                <div
-                  id="collapse-project-invite-collaborator"
-                  class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator"
-                >
+                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator">
                   <div class="project-invite-collaborator-form-container">
-                    <input
-                      type="text"
-                      v-model="newInviteCollaborator[project_index]"
-                      :placeholder="$t('Input E-mail to invite other')"
-                      @keydown.enter="
+                    <input type="text" v-model="newInviteCollaborator[project_index]"
+                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                      "
-                    />
+                        " />
                     <svg-icon icon="msg-enter" class-name="project-invite-enter" />
                   </div>
                 </div>
@@ -240,14 +185,9 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-milestone"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-milestone"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
+                      aria-controls="collapse-project-milestone">
                       <div class="project-milestone-bar-container dashed-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">{{ $t('Progress') }}</label>
@@ -283,36 +223,30 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-milestone"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone"
-                  >
+                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone">
                     <table class="project-milestones-table">
-                      <tbody
-                        v-for="milestone in project.project.progress.milestones"
-                        :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index"
-                      >
+                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index">
                         <tr>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Milestone')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.index
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Description')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.description
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
@@ -320,14 +254,14 @@
                               <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                               <span class="project-milestones-table-span">{{
                                 fromIntToMilestoneStatus(milestone.status)
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Payment')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">
                                 {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
@@ -339,20 +273,15 @@
                               <span class="project-milestones-table-label">{{ $t('Update') }}</span>
                               <span class="project-milestones-table-span">{{
                                 getDateFromFulltimeString(milestone.update_time)
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button
-                                class="btn btn-link"
-                                :disabled="
-                                  isMilestoneActionButtonDisabled(project.project, milestone)
-                                "
-                                :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                @click="handleMilestoneAction(project.project, milestone)"
-                              >
+                              <button class="btn btn-link" :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> -->
@@ -363,10 +292,8 @@
                           <td colspan="6">
                             <div class="project-milestones-qrcode-content">
                               <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button
-                                class="project-milestones-qrcode-button"
-                                @click="handlePaymentAction(project.project, milestone)"
-                              >
+                              <button class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)">
                                 {{ $t('Mark As Paid') }}
                               </button>
                             </div>
@@ -378,14 +305,9 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-code"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-code"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code" aria-expanded="false"
+                      aria-controls="collapse-project-code">
                       <div class="project-code-bar-container dashed-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">{{ $t('Code Depot') }}</label>
@@ -408,22 +330,13 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-code"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-code"
-                  >
+                  <div id="collapse-project-code" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code">
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button
-                          v-if="project.project.code?.git_url"
-                          class="project-code-copy-git-url"
-                          @click="copyCodeGit(project)"
-                          v-tooltip
-                          title="Copied"
-                          trigger="click"
-                          delay='{"show":"500", "hide":"100"}'
-                        >
+                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
+                          delay='{"show":"500", "hide":"100"}'>
                           {{ $t('copy git url') }}
                         </button>
                       </div>
@@ -439,14 +352,9 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-issue"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue" aria-expanded="false"
+                      aria-controls="collapse-project-issue">
                       <div class="project-issue-bar-container dashed-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">{{ $t('Open issues') }}</label>
@@ -469,42 +377,28 @@
                       </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-invite-collaborator-containter">
-                      <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#collapse-project-new-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-new-issue" aria-expanded="false"
+                        aria-controls="collapse-project-issue">
                         <div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
                       </button>
-                      <div
-                        id="collapse-project-new-issue"
-                        class="accordion-collapse collapse"
-                        data-bs-parent="#collapse-project-new-issue"
-                      >
+                      <div id="collapse-project-new-issue" class="accordion-collapse collapse"
+                        data-bs-parent="#collapse-project-new-issue">
                         <div class="project-issue-description-container">
                           <div class="project-issue-description">
                             <label class="project-item-label">{{
                               $t('New issue description')
-                            }}</label>
-                            <button
-                              class="project-issue-description-btn"
-                              @click="
-                                postNewIssue(
-                                  project.request.product_id,
-                                  project.project_id,
-                                  newIssueDescriptions[project_index]
-                                )
-                              "
-                            >
+                              }}</label>
+                            <button class="project-issue-description-btn" @click="
+                              postNewIssue(
+                                project.request.product_id,
+                                project.project_id,
+                                newIssueDescriptions[project_index]
+                              )
+                              ">
                               {{ $t('Submit') }}
                             </button>
                           </div>
@@ -516,22 +410,14 @@
                       </div>
                     </div>
                     <div>
-                      <div
-                        class="project-issue-container"
-                        v-for="(issue, issue_index) in project.project.issue.open_issues"
-                        :key="issue_index"
-                        :id="'project-issue-' + issue_index"
-                      >
+                      <div class="project-issue-container"
+                        v-for="(issue, issue_index) in project.project.issue.open_issues" :key="issue_index"
+                        :id="'project-issue-' + issue_index">
                         <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-details' + issue_index"
-                              aria-expanded="false"
-                              aria-controls="collapse-project-issue-details"
-                            >
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                              :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
+                              aria-controls="collapse-project-issue-details">
                               <div class="project-issue-header dashed-container">
                                 <div class="project-issue-title">
                                   <label class="project-item-label">{{ $t('Issue title') }}</label>
@@ -552,39 +438,23 @@
                               </div>
                             </button>
                           </h2>
-                          <div
-                            :id="'collapse-project-issue-details' + issue_index"
-                            class="accordion-collapse collapse"
-                            :data-bs-parent="'#collapse-project-issue-details' + issue_index"
-                          >
+                          <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
+                            :data-bs-parent="'#collapse-project-issue-details' + issue_index">
                             <div class="project-issue-description-container">
                               <div class="project-issue-description">
                                 <label class="project-item-label">{{
                                   $t('Issue description')
-                                }}</label>
-                                <button
-                                  :hidden="
-                                    !showIssueActionButton(project.project, issue, 'Resolve')
-                                  "
-                                  class="project-issue-description-btn"
-                                  @click="setProjectIssueStatus(issue.id, 1)"
-                                >
+                                  }}</label>
+                                <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')
+                                  " class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 1)">
                                   {{ $t('Resolve') }}
                                 </button>
-                                <button
-                                  :hidden="
-                                    !showIssueActionButton(project.project, issue, 'Confirm')
-                                  "
-                                  class="project-issue-description-btn"
-                                  @click="setProjectIssueStatus(issue.id, 2)"
-                                >
+                                <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')
+                                  " class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 2)">
                                   {{ $t('Confirm') }}
                                 </button>
-                                <button
-                                  :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                                  class="project-issue-description-btn"
-                                  @click="setProjectIssueStatus(issue.id, 0)"
-                                >
+                                <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                                  class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 0)">
                                   {{ $t('Reopen') }}
                                 </button>
                               </div>
@@ -1290,12 +1160,14 @@ export default {
       line-height: 1;
       margin-bottom: 3px;
     }
+
     .project-milestones-table-span {
       font-size: 14px;
       font-weight: bold;
       color: #242424;
       line-height: 1;
     }
+
     .btn-link {
       padding: 0;
       width: fit-content;
@@ -1335,6 +1207,7 @@ export default {
         padding-left: 24px;
       }
     }
+
     td:last-child {
       .project-milestones-table-content {
         padding-right: 24px;
@@ -1442,10 +1315,12 @@ export default {
     margin-bottom: 12px;
   }
 }
+
 .project-issue-description {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
+
   label {
     flex: 1;
   }
@@ -1519,6 +1394,7 @@ export default {
     // color: $primary;
     // background-color: #F3F6FF;
     padding: 12px !important;
+
     &::after {
       display: none;
     }
@@ -1541,6 +1417,7 @@ export default {
   border-radius: 3px;
   align-items: center;
   border: 1px solid #e7e8eb;
+
   &:focus-within {
     border: 1px solid #1748f8;
   }
@@ -1552,6 +1429,7 @@ export default {
     outline: none;
     box-shadow: none;
   }
+
   .project-invite-enter {
     width: 16px;
     height: 16px;
@@ -1574,6 +1452,7 @@ export default {
   @extend .initiate-button;
   @extend .float-end;
 }
+
 .chart-container {
   width: 100%;
   height: 357px;