From 08232e368d2e424df126d88605800000a2cc2fcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9verin=20Beauvais?=
 <severinbeauvais@users.noreply.github.com>
Date: Wed, 21 Sep 2022 11:48:46 -0700
Subject: [PATCH] 6168 Refactor Todo List (#388)

* - app version = 5.6.0

* - added "protected" to lifecycle methods
- removed conflicting Getters, States, Actions

* - moved Details List to FilingHistoryList folder
- fixed button colours
- removed obsolete Add Comment Dialog from Todo List
- cleaned up expansion panel header blocks
- deleted draft correction duplicate View Details button
- deleted obsolete Details button from alteration in good standing
- deleted obsolete comments and commentsLink item properties
- deleted unneeded togglePanel()
-  removed todo task references from Details List
- added CorrectionComment component and plumbing
- misc cleanup

* - more cleanup
---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/App.vue                                   |  11 +-
 src/assets/styles/base.scss                   |  18 -
 .../Dashboard/FilingHistoryList.vue           |  38 +-
 .../FilingHistoryList}/DetailsList.vue        |  14 +-
 src/components/Dashboard/StaffNotation.vue    |  22 +-
 src/components/Dashboard/TodoList.vue         | 434 ++++++++----------
 .../{ => TodoList}/ActionRequired.vue         |   4 +-
 .../Dashboard/TodoList/CorrectionComment.vue  |  22 +
 src/components/EntityInfo.vue                 |   5 +-
 src/components/common/Certify.vue             |   2 +-
 src/components/common/DetailComment.vue       |   2 +-
 src/components/common/NameRequestInfo.vue     |   2 +-
 src/components/common/OfficeAddresses.vue     |   2 +-
 src/components/common/index.ts                |   2 -
 src/components/dialogs/AddCommentDialog.vue   |  16 +-
 .../dialogs/AddStaffNotationDialog.vue        |   2 +-
 ...ution.vue => ConfirmDissolutionDialog.vue} |  10 +-
 src/components/dialogs/index.ts               |   4 +-
 src/interfaces/todo-item-interface.ts         |   6 +-
 src/views/AnnualReport.vue                    |   5 +-
 src/views/Correction.vue                      |  14 +-
 src/views/StandaloneDirectorsFiling.vue       |  18 +-
 src/views/StandaloneOfficeAddressFiling.vue   |  18 +-
 src/views/auth/Signin.vue                     |   3 +-
 tests/unit/ActionRequired.spec.ts             |   2 +-
 ...ec.ts => ConfirmDissolutionDialog.spec.ts} |  10 +-
 tests/unit/CorrectionComment.spec.ts          |  36 ++
 tests/unit/DetailsList.spec.ts                |  38 +-
 tests/unit/FilingHistoryList1.spec.ts         |   2 +-
 tests/unit/TodoList1.spec.ts                  |  28 +-
 tests/unit/TodoList2.spec.ts                  |   2 +-
 33 files changed, 379 insertions(+), 419 deletions(-)
 rename src/components/{common => Dashboard/FilingHistoryList}/DetailsList.vue (79%)
 rename src/components/Dashboard/{ => TodoList}/ActionRequired.vue (88%)
 create mode 100644 src/components/Dashboard/TodoList/CorrectionComment.vue
 rename src/components/dialogs/{ConfirmDissolution.vue => ConfirmDissolutionDialog.vue} (94%)
 rename tests/unit/{ConfirmDissolution.spec.ts => ConfirmDissolutionDialog.spec.ts} (92%)
 create mode 100644 tests/unit/CorrectionComment.spec.ts

diff --git a/package-lock.json b/package-lock.json
index eb1c070f9..f3bc2a6c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-filings-ui",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "business-filings-ui",
-      "version": "5.5.2",
+      "version": "5.6.0",
       "dependencies": {
         "@babel/compat-data": "^7.11.0",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/package.json b/package.json
index 933c098da..16c4735f0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",
diff --git a/src/App.vue b/src/App.vue
index 6be4e54f8..53aac9fd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,7 @@
       attach="#app"
     />
 
-    <ConfirmDissolution
+    <ConfirmDissolutionDialog
       :dialog="confirmDissolutionDialog"
       @close="confirmDissolutionDialog = false"
       @proceed="dissolveCompany()"
@@ -107,7 +107,7 @@ import EntityInfo from '@/components/EntityInfo.vue'
 // Dialogs
 import {
   BusinessAuthErrorDialog,
-  ConfirmDissolution,
+  ConfirmDissolutionDialog,
   DashboardUnavailableDialog,
   DownloadErrorDialog,
   NameRequestAuthErrorDialog,
@@ -197,7 +197,7 @@ export default {
 
   components: {
     BreadCrumb,
-    ConfirmDissolution,
+    ConfirmDissolutionDialog,
     DashboardUnavailableDialog,
     DownloadErrorDialog,
     BusinessAuthErrorDialog,
@@ -228,7 +228,7 @@ export default {
       return sessionStorage.getItem('CREATE_URL')
     },
 
-    /** The Incorporation Application's Temporary Registration Number string. */
+    /** The Temporary Registration Number string. */
     tempRegNumber (): string {
       return sessionStorage.getItem('TEMP_REG_NUMBER')
     },
@@ -308,7 +308,8 @@ export default {
     await this.fetchData()
   },
 
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  beforeDestroy (): void {
     // stop listening for reload data events
     this.$root.$off('reloadData')
 
diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
index afa064762..701459466 100644
--- a/src/assets/styles/base.scss
+++ b/src/assets/styles/base.scss
@@ -310,24 +310,6 @@ ul.list {
   border-left: 3px solid $app-red;
 }
 
-.filing-item__actions {
-  display: inline-block;
-
-  .expand-btn {
-    letter-spacing: -0.01rem;
-    @extend .font-14;
-    font-weight: 700;
-  }
-
-  // make menu button slightly smaller
-  .menu-btn {
-    height: unset !important;
-    min-width: unset !important;
-    padding: 0.25rem !important;
-    color: $app-blue
-  }
-}
-
 // vertical pipe for separating strings
 .vert-pipe {
   margin-top: 0.1rem;
diff --git a/src/components/Dashboard/FilingHistoryList.vue b/src/components/Dashboard/FilingHistoryList.vue
index 05fef0446..72a8ca563 100644
--- a/src/components/Dashboard/FilingHistoryList.vue
+++ b/src/components/Dashboard/FilingHistoryList.vue
@@ -37,7 +37,7 @@
     </v-fade-transition>
 
     <div class="scrollable-container">
-      <v-expansion-panels v-if="historyItems.length > 0" v-model="panel">
+      <v-expansion-panels v-if="showHistoryPanel" v-model="panel">
         <v-expansion-panel
           class="align-items-top filing-history-item px-6 py-5"
           v-for="(filing, index) in historyItems"
@@ -83,11 +83,11 @@
                   <v-btn
                     class="details-btn"
                     outlined
-                    color="blue darken-2"
+                    color="primary"
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-information-outline</v-icon>
+                    <v-icon>mdi-information-outline</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -108,7 +108,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-alert</v-icon>
+                    <v-icon>mdi-alert</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -127,11 +127,11 @@
                   <v-btn
                     class="details-btn"
                     outlined
-                    color="blue darken-2"
+                    color="primary"
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-information-outline</v-icon>
+                    <v-icon>mdi-information-outline</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -148,7 +148,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-alert</v-icon>
+                    <v-icon>mdi-alert</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -168,7 +168,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon small left style="padding-top: 2px">mdi-message-reply</v-icon>
+                    <v-icon small style="padding-top: 2px">mdi-message-reply</v-icon>
                     <span>Detail{{filing.commentsCount > 1 ? "s" : ""}} ({{filing.commentsCount}})</span>
                   </v-btn>
                 </div>
@@ -205,7 +205,7 @@
                     <v-list-item-group color="primary">
                       <v-list-item :disabled="disableCorrection(filing)">
                         <v-list-item-icon>
-                          <v-icon class="app-blue">mdi-file-document-edit-outline</v-icon>
+                          <v-icon color="primary">mdi-file-document-edit-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-title
                           class="file-correction-item"
@@ -217,7 +217,7 @@
 
                       <v-list-item :disabled="!isAllowed(AllowableActions.ADD_DETAIL_COMMENT)">
                         <v-list-item-icon>
-                          <v-icon class="app-blue">mdi-comment-plus</v-icon>
+                          <v-icon color="primary">mdi-comment-plus</v-icon>
                         </v-list-item-icon>
                         <v-list-item-title
                           class="add-detail-comment-item"
@@ -317,7 +317,6 @@
               <v-divider class="my-6" />
               <DetailsList
                 :filing=filing
-                :isTask="false"
                 @showCommentDialog="showCommentDialog($event)"
               />
             </template>
@@ -328,7 +327,7 @@
     </div>
 
     <!-- No Results Message -->
-    <v-card class="no-results" flat v-if="!historyItems.length">
+    <v-card class="no-results" flat v-if="!showHistoryPanel">
       <v-card-text>
         <template v-if="!!tempRegNumber">
           <div class="no-results__subtitle">Complete your filing to display</div>
@@ -354,6 +353,7 @@ import CompletedAlteration from './FilingHistoryList/CompletedAlteration.vue'
 import CompletedDissolution from './FilingHistoryList/CompletedDissolution.vue'
 import CompletedIa from './FilingHistoryList/CompletedIa.vue'
 import CompletedRegistration from './FilingHistoryList/CompletedRegistration.vue'
+import DetailsList from './FilingHistoryList/DetailsList.vue'
 import DocumentsList from './FilingHistoryList/DocumentsList.vue'
 import FiledLabel from './FilingHistoryList/FiledLabel.vue'
 import FutureEffective from './FilingHistoryList/FutureEffective.vue'
@@ -361,7 +361,6 @@ import FutureEffectivePending from './FilingHistoryList/FutureEffectivePending.v
 import PaperFiling from './FilingHistoryList/PaperFiling.vue'
 import PendingFiling from './FilingHistoryList/PendingFiling.vue'
 import StaffFiling from './FilingHistoryList/StaffFiling.vue'
-import { DetailsList } from '@/components/common'
 import { AddCommentDialog, DownloadErrorDialog, FileCorrectionDialog, LoadCorrectionDialog } from '@/components/dialogs'
 
 // Enums, interfaces and mixins
@@ -377,6 +376,7 @@ import { AllowableActionsMixin, DateMixin, EnumMixin, FilingMixin, LegalApiMixin
     CompletedDissolution,
     CompletedIa,
     CompletedRegistration,
+    DetailsList,
     DocumentsList,
     FiledLabel,
     FutureEffective,
@@ -384,8 +384,6 @@ import { AllowableActionsMixin, DateMixin, EnumMixin, FilingMixin, LegalApiMixin
     PaperFiling,
     PendingFiling,
     StaffFiling,
-    // common
-    DetailsList,
     // dialogs
     AddCommentDialog,
     DownloadErrorDialog,
@@ -425,7 +423,7 @@ export default class FilingHistoryList extends Mixins(
     return sessionStorage.getItem('EDIT_URL')
   }
 
-  /** The IA's Temporary Registration Number string. */
+  /** The Temporary Registration Number string. */
   get tempRegNumber (): string {
     return sessionStorage.getItem('TEMP_REG_NUMBER')
   }
@@ -435,11 +433,17 @@ export default class FilingHistoryList extends Mixins(
     return sessionStorage.getItem('BUSINESS_ID')
   }
 
+  /** Whether to show the history panel. */
+  get showHistoryPanel () {
+    return (this.historyItems.length > 0)
+  }
+
   /** Returns whether the action button is visible or not. */
   protected displayAction (filing): string {
     return filing.availableOnPaperOnly || filing.isTypeStaff || filing.documentsLink
   }
 
+  /** Loads list of filings from the API into History Items array. */
   private loadData (): void {
     this.historyItems = []
 
@@ -481,7 +485,7 @@ export default class FilingHistoryList extends Mixins(
     if (this.highlightId) this.highlightFiling(this.highlightId)
   }
 
-  /** Loads a filing into the historyItems list. */
+  /** Loads a filing into the History Items array. */
   private loadFiling (filing: ApiFilingIF): void {
     try {
       // NB: these `new Date()` are safe because the date strings are in GMT (ie, UTC)
diff --git a/src/components/common/DetailsList.vue b/src/components/Dashboard/FilingHistoryList/DetailsList.vue
similarity index 79%
rename from src/components/common/DetailsList.vue
rename to src/components/Dashboard/FilingHistoryList/DetailsList.vue
index 1db66d3d0..c7e3b3593 100644
--- a/src/components/common/DetailsList.vue
+++ b/src/components/Dashboard/FilingHistoryList/DetailsList.vue
@@ -3,12 +3,12 @@
     <div class="title-bar">
       <h4>
         <v-icon small>mdi-message-reply</v-icon>
-        Detail{{filing.comments.length > 1 ? "s" : ""}} ({{filing.comments.length}})
+        <span class="ml-1">Detail{{filing.comments.length > 1 ? "s" : ""}} ({{filing.comments.length}})</span>
       </h4>
       <v-btn
         class="add-detail-btn"
         color="primary"
-        v-if="isRoleStaff && !isTask"
+        v-if="isRoleStaff"
         :disabled ="!filing.filingId"
         @click.stop="showCommentDialog(filing)"
       >
@@ -38,7 +38,7 @@
 import { Component, Mixins, Prop, Emit } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import { DateMixin } from '@/mixins'
-import { HistoryItemIF, TodoItemIF } from '@/interfaces'
+import { HistoryItemIF } from '@/interfaces'
 
 @Component({})
 export default class DetailsList extends Mixins(DateMixin) {
@@ -49,18 +49,14 @@ export default class DetailsList extends Mixins(DateMixin) {
       filingId: null
     })
   })
-  readonly filing: HistoryItemIF | TodoItemIF
-
-  /** Whether this filing is a task (and therefore whether to disallow new detail comments). */
-  @Prop({ default: false })
-  readonly isTask: boolean
+  readonly filing: HistoryItemIF
 
   /** Whether current user has staff role. */
   @Getter isRoleStaff!: boolean
 
   /** Emits an event to trigger the comment dialog. */
   @Emit('showCommentDialog')
-  private showCommentDialog (filing: HistoryItemIF | TodoItemIF): void { }
+  protected showCommentDialog (filing: HistoryItemIF): void { }
 }
 </script>
 
diff --git a/src/components/Dashboard/StaffNotation.vue b/src/components/Dashboard/StaffNotation.vue
index 0858467e7..41efce0c1 100644
--- a/src/components/Dashboard/StaffNotation.vue
+++ b/src/components/Dashboard/StaffNotation.vue
@@ -42,7 +42,7 @@
       :dissolutionType="DissolutionTypes.ADMINISTRATIVE"
     />
 
-    <div class="filing-item__actions">
+    <div class="staff-notation-container">
       <v-menu offset-y left transition="slide-y-transition" v-model="expand">
         <template v-slot:activator="{ on }">
           <span><!-- This span is needed to fix a positioning issue with the menu -->
@@ -211,6 +211,24 @@ export default class StaffNotation extends Vue {
 <style lang="scss" scoped>
 @import "@/assets/styles/theme.scss";
 
+.staff-notation-container {
+  display: inline-block;
+
+  .expand-btn {
+    letter-spacing: -0.01rem;
+    font-size: $px-14;
+    font-weight: 700;
+  }
+
+  // make menu button slightly smaller
+  .menu-btn {
+    height: unset !important;
+    min-width: unset !important;
+    padding: 0.25rem !important;
+    color: $app-blue
+  }
+}
+
 #add-staff-filing-label {
   padding-right: 0.725rem;
   font-size: $px-14;
@@ -234,7 +252,7 @@ export default class StaffNotation extends Vue {
 }
 
 // Fix the transparent added by .add-scrollbar-offset (Firefox only).
-::v-deep .add-notation-dialog {
+::v-deep .add-staff-notation-dialog {
   scrollbar-color: auto;
 }
 
diff --git a/src/components/Dashboard/TodoList.vue b/src/components/Dashboard/TodoList.vue
index 6efc39346..789d6d8a3 100644
--- a/src/components/Dashboard/TodoList.vue
+++ b/src/components/Dashboard/TodoList.vue
@@ -1,12 +1,5 @@
 <template>
   <div id="todo-list">
-    <AddCommentDialog
-      :dialog="addCommentDialog"
-      :filing="currentFiling"
-      @close="hideCommentDialog($event)"
-      attach="#todo-list"
-    />
-
     <ConfirmDialog
       ref="confirm"
       attach="#todo-list"
@@ -26,7 +19,9 @@
       @okay="resetCancelPaymentErrors()"
       attach="#todo-list"
     />
+
     <ActionRequired v-if="isActionRequired"/>
+
     <v-expansion-panels v-if="showTodoPanel" accordion  v-model="panel">
       <v-expansion-panel
         class="align-items-top todo-item px-6 py-5"
@@ -44,21 +39,11 @@
           <div class="list-item">
             <div class="todo-label">
               <!-- title -->
-              <h3 class="list-item__title">{{item.title}}
-                <v-btn v-if="isStatusDraft(item) && isTypeCorrection(item)"
-                  class="expand-btn ml-0"
-                  outlined
-                  color="red"
-                  :ripple=false
-                >
-                  <v-icon left>mdi-information-outline</v-icon>
-                  <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
-                </v-btn>
-              </h3>
+              <h3 class="list-item__title">{{ item.title }}</h3>
 
               <!-- BCOMP AR special case -->
               <div v-if="businessId && isBComp && item.enabled && isTypeAnnualReport(item) && isStatusNew(item)"
-                class="bcorps-ar-subtitle"
+                class="list-item__subtitle pt-4"
               >
                 <p>Verify your Office Address and Current Directors before filing your Annual Report.</p>
                 <v-checkbox
@@ -102,70 +87,55 @@
                 <div v-else-if="isTypeAlteration(item) && item.goodStanding && !isBComp && !isCoop"
                   class="todo-subtitle my-4"
                 >
-                  <span>
-                    Your business is ready to alter from a {{ item.legalType }} to a BC
-                    Benefit Company. Select "Alter Now" to begin your alteration. You will not be able to make
-                    any other changes to your business until the alteration is complete.
-                  </span>
-                  <v-btn
-                    v-if="item.comments.length > 0"
-                    class="expand-btn"
-                    outlined
-                    color="primary"
-                    :ripple=false
-                  >
-                    <v-icon small left style="padding-top: 2px">mdi-message-reply</v-icon>
-                    <span>{{item.comments.length > 1 ? "Details" : "Detail"}} ({{item.comments.length}})</span>
-                  </v-btn>
+                  <span>Your business is ready to alter from a {{ item.legalType }} to a BC
+                  Benefit Company. Select "Alter Now" to begin your alteration. You will not be able to make
+                  any other changes to your business until the alteration is complete.</span>
                 </div>
 
                 <!-- draft correction or alteration -->
                 <div v-else-if="isStatusDraft(item) && (isTypeCorrection(item) || isTypeAlteration(item))"
                   class="todo-subtitle"
                 >
-                  <div>DRAFT</div>
-                  <v-btn
-                    v-if="item.comments.length > 0"
+                  <span>DRAFT</span>
+                  <v-btn v-if="isTypeCorrection(item)"
                     class="expand-btn"
                     outlined
-                    color="primary"
+                    color="error"
                     :ripple=false
                   >
-                    <v-icon small left style="padding-top: 2px">mdi-message-reply</v-icon>
-                    <span>{{item.comments.length > 1 ? "Details" : "Detail"}} ({{item.comments.length}})</span>
+                    <v-icon>mdi-information-outline</v-icon>
+                    <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
                   </v-btn>
                 </div>
 
                 <!-- draft with pay error -->
                 <div v-else-if="isStatusDraft(item) && isPayError(item)" class="todo-subtitle">
-                  <div>PAYMENT INCOMPLETE</div>
+                  <span>PAYMENT INCOMPLETE</span>
                   <v-btn
                     class="expand-btn"
                     outlined
-                    color="red darken-4"
+                    color="error"
                     :ripple=false
-                    @click.stop="togglePanel(index)"
                   >
                     <v-icon>mdi-information-outline</v-icon>
                     <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
                   </v-btn>
                 </div>
 
-                <!-- draft incorporation -->
+                <!-- draft incorporation or registration -->
                 <div v-else-if="isStatusDraft(item) &&
                   (isTypeIncorporationApplication(item) || isTypeRegistration(item))"
                   class="todo-subtitle"
                 >
-                  <div>{{ item.subtitle }}</div>
+                  <span>{{ item.subtitle }}</span>
                   <div v-if="item.nameRequest" class="payment-status">
                     <v-btn
                       class="expand-btn"
                       outlined
-                      color="blue darken-2"
+                      color="primary"
                       :ripple=false
-                      @click.stop="togglePanel(index)"
                     >
-                      <v-icon left>mdi-information-outline</v-icon>
+                      <v-icon>mdi-information-outline</v-icon>
                       <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
                     </v-btn>
                   </div>
@@ -173,90 +143,78 @@
 
                 <!-- draft other -->
                 <div v-else-if="isStatusDraft(item)" class="todo-subtitle">
-                  <div>DRAFT</div>
+                  <span>DRAFT</span>
                 </div>
 
                 <!-- pending filing - correction or alteration, or payment incomplete -->
                 <div v-else-if="isStatusPending(item)" class="todo-subtitle">
                   <template v-if="isTypeCorrection(item) || isTypeAlteration(item)">
-                    <div>FILING PENDING</div>
-                    <v-btn
-                      v-if="item.comments.length > 0"
-                      class="expand-btn"
-                      outlined
-                      color="primary"
-                      :ripple=false
-                    >
-                      <v-icon small left style="padding-top: 2px">mdi-message-reply</v-icon>
-                      <span>{{item.comments.length > 1 ? "Details" : "Detail"}} ({{item.comments.length}})</span>
-                    </v-btn>
+                    <span>FILING PENDING</span>
                   </template>
 
                   <template v-else>
-                    <div>FILING PENDING</div>
-                    <div class="vert-pipe"></div>
-                    <div class="payment-status" v-if="inProcessFiling === item.filingId">
+                    <span>FILING PENDING</span>
+                    <span class="vert-pipe"></span>
+                    <span class="payment-status" v-if="inProcessFiling === item.filingId">
                       PROCESSING...
-                    </div>
-                    <div class="payment-status" v-else>
+                    </span>
+                    <span class="payment-status" v-else>
                       <span v-if="isPayMethodOnlineBanking(item)">ONLINE BANKING PAYMENT PENDING</span>
                       <span v-else>PAYMENT INCOMPLETE</span>
-                      <v-btn
-                        class="expand-btn"
-                        outlined
-                        color="blue darken-2"
-                        :ripple=false
-                        @click.stop="togglePanel(index)"
-                      >
-                        <v-icon left>mdi-information-outline</v-icon>
-                        <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
-                      </v-btn>
-                    </div>
+                    </span>
                   </template>
+
+                  <v-btn
+                    class="expand-btn"
+                    outlined
+                    color="primary"
+                    :ripple=false
+                  >
+                    <v-icon>mdi-information-outline</v-icon>
+                    <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
+                  </v-btn>
                 </div>
 
                 <!-- pending filing - payment unsuccessful -->
                 <div v-else-if="isStatusError(item)" class="todo-subtitle">
-                  <div>FILING PENDING</div>
-                  <div class="vert-pipe"></div>
-                  <div class="payment-status" v-if="inProcessFiling === item.filingId">
+                  <span>FILING PENDING</span>
+                  <span class="vert-pipe"></span>
+                  <span class="payment-status" v-if="inProcessFiling === item.filingId">
                     PROCESSING...
-                  </div>
-                  <div class="payment-status" v-else>
+                  </span>
+                  <span class="payment-status" v-else>
                     <span>PAYMENT UNSUCCESSFUL</span>
                     <v-btn
                       class="expand-btn"
                       outlined
-                      color="red darken-4"
+                      color="error"
                       :ripple=false
-                      @click.stop="togglePanel(index)"
                     >
-                      <v-icon left>mdi-information-outline</v-icon>
+                      <v-icon>mdi-information-outline</v-icon>
                       <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
                     </v-btn>
-                  </div>
+                  </span>
                 </div>
 
                 <!-- pending filing - paid -->
                 <div v-else-if="isStatusPaid(item)" class="todo-subtitle">
-                  <div>FILING PENDING</div>
-                  <div class="vert-pipe"></div>
-                  <div class="payment-status" v-if="inProcessFiling === item.filingId">
+                  <span>FILING PENDING</span>
+                  <span class="vert-pipe"></span>
+                  <span class="payment-status" v-if="inProcessFiling === item.filingId">
                     PROCESSING...
-                  </div>
-                  <div class="payment-status" v-else>
+                  </span>
+                  <span class="payment-status" v-else>
                     <span>PAID</span>
                     <v-btn
                       class="expand-btn"
                       outlined
-                      color="red darken-4"
+                      color="error"
                       :ripple=false
-                      @click.stop="togglePanel(index)"
                     >
-                      <v-icon left>mdi-information-outline</v-icon>
+                      <v-icon>mdi-information-outline</v-icon>
                       <span>{{ (panel === index) ? "Hide Details" : "View Details" }}</span>
                     </v-btn>
-                  </div>
+                  </span>
                 </div>
               </div> <!-- end of other subtitles -->
             </div> <!-- end of todo label -->
@@ -312,26 +270,31 @@
 
                 <!-- Alteration Actions -->
                 <template v-else-if="isTypeAlteration(item) && isStatusDraft(item)">
-                  <v-btn class="btn-alt-draft-resume"
-                         color="primary"
-                         :disabled="!item.enabled"
-                         @click.native.stop="doResumeFiling(item)"
+                  <v-btn
+                    class="btn-alt-draft-resume"
+                    color="primary"
+                    :disabled="!item.enabled"
+                    @click.native.stop="doResumeFiling(item)"
                   >
                     <span>{{alterationBtnLabel}}</span>
                   </v-btn>
                   <v-menu v-if="!requiresAlteration" offset-y left>
                     <template v-slot:activator="{ on }">
-                      <v-btn color="primary" class="actions__more-actions__btn px-0"
-                             v-on="on" id="menu-activator-alt" :disabled="!item.enabled"
+                      <v-btn
+                        id="menu-activator-alt"
+                        class="actions__more-actions__btn px-0"
+                        color="primary"
+                        v-on="on"
+                        :disabled="!item.enabled"
                       >
                         <v-icon>mdi-menu-down</v-icon>
                       </v-btn>
                     </template>
                     <v-list class="actions__more-actions">
                       <v-list-item
-                              v-if="businessId"
-                              id="btn-delete-draft-alt"
-                              @click="confirmDeleteDraft(item)"
+                        v-if="businessId"
+                        id="btn-delete-draft-alt"
+                        @click="confirmDeleteDraft(item)"
                       >
                         <v-icon class="pr-1" color="primary" size="18px">mdi-delete-forever</v-icon>
                         <v-list-item-title>Delete changes to company information</v-list-item-title>
@@ -341,7 +304,8 @@
                 </template>
 
                 <template v-else-if="isStatusDraft(item)">
-                  <v-btn class="btn-draft-resume"
+                  <v-btn
+                    class="btn-draft-resume"
                     color="primary"
                     :disabled="!item.enabled"
                     @click.native.stop="doResumeFiling(item)"
@@ -358,8 +322,12 @@
                   <!-- dropdown menu -->
                   <v-menu offset-y left>
                     <template v-slot:activator="{ on }">
-                      <v-btn color="primary" class="actions__more-actions__btn px-0"
-                        v-on="on" id="menu-activator" :disabled="!item.enabled"
+                      <v-btn
+                        id="menu-activator"
+                        class="actions__more-actions__btn px-0"
+                        color="primary"
+                        v-on="on"
+                        :disabled="!item.enabled"
                       >
                         <v-icon>mdi-menu-down</v-icon>
                       </v-btn>
@@ -373,7 +341,7 @@
                       >
                         <v-icon class="pr-1" color="primary" size="18px">mdi-delete-forever</v-icon>
                         <template v-if="isTypeDissolution(item)">
-                          <v-list-item-title>Delete {{ toDoListTitle }}</v-list-item-title>
+                          <v-list-item-title>Delete {{ todoListTitle }}</v-list-item-title>
                         </template>
                         <template v-else-if="isTypeSpecialResolution(item)">
                           <v-list-item-title>Delete Special Resolution</v-list-item-title>
@@ -413,10 +381,12 @@
                   <!-- dropdown menu -->
                   <v-menu offset-y left>
                     <template v-slot:activator="{ on }">
-                      <v-btn color="primary"
-                        v-on="on" id="pending-item-menu-activator"
-                        :disabled="!item.enabled"
+                      <v-btn
+                        id="pending-item-menu-activator"
                         class="actions__more-actions__btn px-0"
+                        color="primary"
+                        v-on="on"
+                        :disabled="!item.enabled"
                         data-test-id="btn-pending-filing-menu"
                         @click.native.stop
                       >
@@ -435,7 +405,8 @@
                 </template>
 
                 <template v-else-if="isStatusError(item)">
-                  <v-btn class="btn-retry-payment"
+                  <v-btn
+                    class="btn-retry-payment"
                     color="primary"
                     :disabled="!item.enabled"
                     @click.native.stop="doResumePayment(item)"
@@ -449,7 +420,8 @@
                 </template>
 
                 <template v-else-if="isStatusNew(item) && isTypeAnnualReport(item)">
-                  <v-btn class="btn-file-now"
+                  <v-btn
+                    class="btn-file-now"
                     color="primary"
                     :disabled="isFileAnnualReportDisabled(item, index)"
                     @click.native.stop="doFileNow(item)"
@@ -465,55 +437,57 @@
         <v-expansion-panel-content>
           <!-- NB: blocks below are mutually exclusive, and order is important -->
 
-          <template v-if="isStatusDraft(item) && isPayError(item)">
-            <PaymentIncomplete :filing=item />
-          </template>
-
-          <template v-else-if="isTypeCorrection(item)">
-            <div v-if="isStatusDraft(item)" data-test-class="correction-draft" class="todo-list-detail body-2">
+          <!-- is this a correction in draft status? -->
+          <template v-if="isTypeCorrection(item) && isStatusDraft(item)">
+            <div data-test-class="correction-draft" class="todo-list-detail body-2">
               <p class="list-item__subtitle">This filing is in review and has been saved as a draft.<br />
                 Normal processing times are 2 to 5 business days. Priority processing times are 1 to 2 business days.
               </p>
               <v-divider class="my-6"></v-divider>
-              <!-- the detail comments section -->
-              <DetailsList
-                :filing=item
-                :isTask="true"
-                @showCommentDialog="showCommentDialog($event)"
-              />
+              <!-- the correction comment -->
+              <CorrectionComment :comment="item.comment" />
             </div>
+          </template>
 
-            <div v-else data-test-class="correction-pending" class="todo-list-detail body-2">
+          <!-- is this a correction in any other status? -->
+          <template v-else-if="isTypeCorrection(item)">
+            <div data-test-class="correction-pending" class="todo-list-detail body-2">
               <p class="list-item__subtitle">This filing is pending review by Registry Staff.<br />
                 Normal processing times are 2 to 5 business days. Priority processing times are 1 to 2 business days.
               </p>
               <v-divider class="my-6"></v-divider>
-              <!-- the detail comments section -->
-              <DetailsList
-                :filing=item
-                :isTask="true"
-                @showCommentDialog="showCommentDialog($event)"
-              />
+              <!-- the correction comment -->
+              <CorrectionComment :comment="item.comment" />
             </div>
           </template>
 
+          <!-- does this item have an incomplete payment? -->
+          <template v-else-if="isStatusDraft(item) && isPayError(item)">
+            <PaymentIncomplete :filing=item />
+          </template>
+
+          <!-- is this a draft IA or Registration? -->
+          <template v-else-if="isStatusDraft(item) &&
+            (isTypeIncorporationApplication(item) || isTypeRegistration(item))"
+          >
+            <NameRequestInfo :nameRequest="item.nameRequest" />
+          </template>
+
+          <!-- does this item have a pending payment? -->
           <template v-else-if="isStatusPending(item)">
             <PaymentPendingOnlineBanking v-if="isPayMethodOnlineBanking(item)" :filing=item class="mb-6" />
             <PaymentPending v-else />
           </template>
 
+          <!-- does this item have an unsuccessful payment? -->
           <template v-else-if="isStatusError(item)">
             <PaymentUnsuccessful />
           </template>
 
+          <!-- does this item have a paid payment? -->
           <template v-else-if="isStatusPaid(item)">
             <PaymentPaid />
           </template>
-
-          <template v-else-if="isStatusDraft(item) &&
-            (isTypeIncorporationApplication(item) || isTypeRegistration(item))">
-            <NameRequestInfo :nameRequest="item.nameRequest" />
-          </template>
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -537,37 +511,37 @@ import Vue2Filters from 'vue2-filters' // needed for orderBy
 import { navigate } from '@/utils'
 
 // Dialogs and Components
-import { AddCommentDialog, CancelPaymentErrorDialog, ConfirmDialog, DeleteErrorDialog } from '@/components/dialogs'
-import { DetailsList, NameRequestInfo, ContactInfo } from '@/components/common'
+import { CancelPaymentErrorDialog, ConfirmDialog, DeleteErrorDialog } from '@/components/dialogs'
+import { NameRequestInfo, ContactInfo } from '@/components/common'
+import ActionRequired from './TodoList/ActionRequired.vue'
+import CorrectionComment from './TodoList/CorrectionComment.vue'
 import PaymentIncomplete from './TodoList/PaymentIncomplete.vue'
 import PaymentPaid from './TodoList/PaymentPaid.vue'
 import PaymentPending from './TodoList/PaymentPending.vue'
 import PaymentPendingOnlineBanking from './TodoList/PaymentPendingOnlineBanking.vue'
 import PaymentUnsuccessful from './TodoList/PaymentUnsuccessful.vue'
-import ActionRequired from '@/components/Dashboard/ActionRequired.vue'
 
 // Mixins, Enums and Interfaces
 import { AllowableActionsMixin, DateMixin, EnumMixin, FilingMixin, LegalApiMixin, PayApiMixin } from '@/mixins'
-import { AllowableActions, CorpTypeCd, FilingNames, FilingStatus, FilingTypes, Routes } from '@/enums'
+import { AllowableActions, FilingNames, FilingStatus, FilingTypes, Routes } from '@/enums'
 import { ActionBindingIF, ApiTaskIF, BusinessIF, ConfirmDialogType, TodoItemIF, TodoListResourceIF } from '@/interfaces'
 
 @Component({
   components: {
     // dialogs
-    AddCommentDialog,
     CancelPaymentErrorDialog,
     ConfirmDialog,
     DeleteErrorDialog,
     // components
-    DetailsList,
+    ActionRequired,
+    CorrectionComment,
     NameRequestInfo,
     ContactInfo,
     PaymentIncomplete,
     PaymentPaid,
     PaymentPending,
     PaymentPendingOnlineBanking,
-    PaymentUnsuccessful,
-    ActionRequired
+    PaymentUnsuccessful
   },
   mixins: [
     Vue2Filters.mixin
@@ -582,7 +556,6 @@ export default class TodoList extends Mixins(
   }
 
   // local properties
-  protected addCommentDialog = false
   protected todoItems: Array<TodoItemIF> = []
   protected deleteErrors: Array<any> = []
   protected deleteWarnings: Array<any> = []
@@ -591,7 +564,6 @@ export default class TodoList extends Mixins(
   protected cancelPaymentErrorDialog = false
   protected enableCheckbox: Array<any> = []
   protected confirmEnabled = false
-  protected currentFiling: TodoItemIF = null
   protected panel: number = null // currently expanded panel
   protected checkTimer: number = null
   protected inProcessFiling: number = null
@@ -672,8 +644,15 @@ export default class TodoList extends Mixins(
   get isActionRequired (): boolean {
     return this.isFirm && this.isNotInCompliance
   }
+
+  /** Whether to show the todo panel. */
   get showTodoPanel () {
-    return this.todoItems && this.todoItems.length > 0
+    return (this.todoItems.length > 0)
+  }
+
+  /** The Todo List title. */
+  get todoListTitle (): string {
+    return this.getTodoListResource?.title
   }
 
   /** Whether the File Annual Report button should be disabled. */
@@ -685,6 +664,7 @@ export default class TodoList extends Mixins(
     )
   }
 
+  /** Loads list of tasks from the API into Todo Items array. */
   private async loadData (): Promise<void> {
     this.todoItems = []
 
@@ -702,16 +682,21 @@ export default class TodoList extends Mixins(
 
     // Add todo items count +1 when SP/GP with compliance warning
     const todoLength = this.isActionRequired ? this.todoItems.length + 1 : this.todoItems.length
+
     // report number of items back to parent (dashboard)
     this.$emit('todo-count', todoLength)
 
     // Check if there is a draft/pending/error/paid/correction/alteration task.
     // This is a blocker because it needs to be completed first.
-    const blockerTask = this.todoItems.find(task => {
-      return (this.isStatusDraft(task) || this.isStatusPending(task) || this.isStatusError(task) ||
-        this.isStatusPaid(task) || this.isTypeCorrection(task) || this.isTypeAlteration(task))
-    })
-    this.setHasBlockerTask(!!blockerTask)
+    const hasBlockerTask = this.todoItems.some(task => (
+      this.isStatusDraft(task) ||
+      this.isStatusPending(task) ||
+      this.isStatusError(task) ||
+      this.isStatusPaid(task) ||
+      this.isTypeCorrection(task) ||
+      this.isTypeAlteration(task)
+    ))
+    this.setHasBlockerTask(hasBlockerTask)
 
     // if needed, highlight a specific task
     if (this.highlightId) this.highlightTask(this.highlightId)
@@ -759,8 +744,9 @@ export default class TodoList extends Mixins(
     })
   }
 
+  /** Loads a todo item into the Todo Items array. */
   private loadTodoItem (task: ApiTaskIF): void {
-    const todo = task.task.todo
+    const todo = task.task.todo // already checked for not falsey in loadData()
     const header = todo.header
 
     if (header) {
@@ -769,6 +755,7 @@ export default class TodoList extends Mixins(
           this.loadAnnualReportTodo(task)
           break
         case FilingTypes.CONVERSION:
+          // see https://app.zenhub.com/workspace/o/bcgov/entity/issues/13565
           break
         default:
           // eslint-disable-next-line no-console
@@ -781,21 +768,6 @@ export default class TodoList extends Mixins(
     }
   }
 
-  private expiresText (nameRequest: any): string {
-    const date = this.apiToDate(nameRequest.expirationDate)
-    const expireDays = this.daysFromToday(date)
-    // NB: 0 means NR expires today
-    if (isNaN(expireDays) || expireDays < 0) {
-      return 'Expired'
-    } else if (expireDays < 1) {
-      return 'Expires today'
-    } else if (expireDays < 2) {
-      return 'Expires tomorrow'
-    } else {
-      return `Expires in ${expireDays} days`
-    }
-  }
-
   /** Loads a NEW Annual Report todo. */
   private loadAnnualReportTodo (task: ApiTaskIF): void {
     const todo = task.task.todo
@@ -821,8 +793,7 @@ export default class TodoList extends Mixins(
         enabled: task.enabled,
         order: task.order,
         nextArDate: this.apiToYyyyMmDd(business.nextAnnualReport), // BCOMP only
-        arDueDate: this.formatYyyyMmDd(header.arMaxDate),
-        commentsLink: null // cannot add comments to Todo item
+        arDueDate: this.formatYyyyMmDd(header.arMaxDate)
       }
       this.todoItems.push(item)
     } else {
@@ -831,8 +802,9 @@ export default class TodoList extends Mixins(
     }
   }
 
+  /** Loads a filing item into the Todo Items array. */
   private async loadFilingItem (task: ApiTaskIF): Promise<void> {
-    const filing = task.task.filing
+    const filing = task.task.filing // already checked for not falsey in loadData()
     const header = filing.header
 
     if (header) {
@@ -909,9 +881,7 @@ export default class TodoList extends Mixins(
         goodStanding: this.isGoodStanding,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        comments: this.flattenAndSortComments(header.comments),
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -948,10 +918,7 @@ export default class TodoList extends Mixins(
         goodStanding: this.isGoodStanding,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        comments: this.flattenAndSortComments(header.comments),
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
-
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -988,8 +955,7 @@ export default class TodoList extends Mixins(
         order: task.order,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -1019,8 +985,7 @@ export default class TodoList extends Mixins(
         order: task.order,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -1049,8 +1014,7 @@ export default class TodoList extends Mixins(
         order: task.order,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -1085,8 +1049,7 @@ export default class TodoList extends Mixins(
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
         payErrorObj,
-        comments: this.flattenAndSortComments(header.comments),
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        comment: correction.comment
       }
       this.todoItems.push(item)
     } else {
@@ -1133,8 +1096,7 @@ export default class TodoList extends Mixins(
         paymentToken: header.paymentToken || null,
         payErrorObj,
         isEmptyFiling: !haveData,
-        nameRequest: this.nameRequest,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        nameRequest: this.nameRequest
       }
       this.todoItems.push(item)
     } else {
@@ -1184,8 +1146,7 @@ export default class TodoList extends Mixins(
         paymentToken: header.paymentToken || null,
         payErrorObj,
         isEmptyFiling: !haveData,
-        nameRequest: this.nameRequest,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        nameRequest: this.nameRequest
       }
       this.todoItems.push(item)
     } else {
@@ -1232,8 +1193,7 @@ export default class TodoList extends Mixins(
         paymentToken: header.paymentToken || null,
         payErrorObj,
         isEmptyFiling: !haveData,
-        nameRequest: this.nameRequest,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        nameRequest: this.nameRequest
       }
       this.todoItems.push(item)
     } else {
@@ -1267,8 +1227,7 @@ export default class TodoList extends Mixins(
         paymentToken: header.paymentToken || null,
         payErrorObj,
         isEmptyFiling: !haveData,
-        nameRequest: this.nameRequest,
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        nameRequest: this.nameRequest
       }
       this.todoItems.push(item)
     } else {
@@ -1305,9 +1264,7 @@ export default class TodoList extends Mixins(
         goodStanding: this.isGoodStanding,
         paymentMethod: header.paymentMethod || null,
         paymentToken: header.paymentToken || null,
-        payErrorObj,
-        comments: this.flattenAndSortComments(header.comments),
-        commentsLink: `businesses/${this.getIdentifier}/filings/${header.filingId}/comments`
+        payErrorObj
       }
       this.todoItems.push(item)
     } else {
@@ -1316,6 +1273,21 @@ export default class TodoList extends Mixins(
     }
   }
 
+  private expiresText (nameRequest: any): string {
+    const date = this.apiToDate(nameRequest.expirationDate)
+    const expireDays = this.daysFromToday(date)
+    // NB: 0 means NR expires today
+    if (isNaN(expireDays) || expireDays < 0) {
+      return 'Expired'
+    } else if (expireDays < 1) {
+      return 'Expires today'
+    } else if (expireDays < 2) {
+      return 'Expires tomorrow'
+    } else {
+      return `Expires in ${expireDays} days`
+    }
+  }
+
   /** Files a new filing (todo item). */
   protected doFileNow (item: TodoItemIF): void {
     switch (item.name) {
@@ -1378,48 +1350,55 @@ export default class TodoList extends Mixins(
         }
         break
 
-      case FilingTypes.INCORPORATION_APPLICATION:
+      case FilingTypes.INCORPORATION_APPLICATION: {
         // navigate to Create UI to resume this Incorporation Application
         const incorpAppUrl = `${this.createUrl}?id=${this.tempRegNumber}`
         navigate(incorpAppUrl)
         break
+      }
 
-      case FilingTypes.REGISTRATION:
-        // navigate to Create UI to resume this registration
+      case FilingTypes.REGISTRATION: {
+        // navigate to Create UI to resume this Registration
         const registrationAppUrl = `${this.createUrl}define-registration?id=${this.tempRegNumber}`
         navigate(registrationAppUrl)
         break
+      }
 
-      case FilingTypes.ALTERATION:
-        // navigate to Edit UI to resume this alteration
+      case FilingTypes.ALTERATION: {
+        // navigate to Edit UI to resume this Alteration
         const alterationUrl = `${this.editUrl}${this.getIdentifier}/alteration/?alteration-id=${item.filingId}`
         navigate(alterationUrl)
         break
+      }
 
-      case FilingTypes.DISSOLUTION:
-        // navigate to Create UI to resume this dissolution
+      case FilingTypes.DISSOLUTION: {
+        // navigate to Create UI to resume this Dissolution
         const dissolutionUrl = `${this.createUrl}define-dissolution?id=${this.getIdentifier}`
         navigate(dissolutionUrl)
         break
+      }
 
-      case FilingTypes.CHANGE_OF_REGISTRATION:
-        // navigate to Edit UI to resume this change of registration
+      case FilingTypes.CHANGE_OF_REGISTRATION: {
+        // navigate to Edit UI to resume this Change of Registration
         const changeUrl = `${this.editUrl}${this.getIdentifier}/change/?change-id=${item.filingId}`
         navigate(changeUrl)
         break
+      }
 
-      case FilingTypes.CONVERSION:
-        // navigate to Edit UI to resume this conversion
+      case FilingTypes.CONVERSION: {
+        // navigate to Edit UI to resume this Conversion
         const conversionUrl = `${this.editUrl}${this.getIdentifier}/conversion/?conversion-id=${item.filingId}`
         navigate(conversionUrl)
         break
+      }
 
-      case FilingTypes.SPECIAL_RESOLUTION:
-        // navigate to Edit UI to resume this special resolution
-        let specialResolutionUrl = `${this.editUrl}${this.getIdentifier}/special-resolution/`
-        specialResolutionUrl += `?special-resolution-id=${item.filingId}`
+      case FilingTypes.SPECIAL_RESOLUTION: {
+        // navigate to Edit UI to resume this Special Resolution
+        const specialResolutionUrl =
+          `${this.editUrl}${this.getIdentifier}/special-resolution/?special-resolution-id=${item.filingId}`
         navigate(specialResolutionUrl)
         break
+      }
 
       default:
         // eslint-disable-next-line no-console
@@ -1585,19 +1564,6 @@ export default class TodoList extends Mixins(
     })
   }
 
-  protected showCommentDialog (filing: TodoItemIF): void {
-    this.currentFiling = filing
-    this.addCommentDialog = true
-  }
-
-  protected hideCommentDialog (needReload: boolean): void {
-    this.addCommentDialog = false
-    if (needReload) {
-      // emit event to reload all data
-      this.$root.$emit('reloadData')
-    }
-  }
-
   protected isPayError (item: TodoItemIF): boolean {
     return !!item.payErrorObj
   }
@@ -1625,24 +1591,14 @@ export default class TodoList extends Mixins(
     return title
   }
 
-  /** Closes current panel or opens new panel. */
-  protected togglePanel (index: number): void {
-    this.panel = (this.panel === index) ? null : index
-  }
-
-  /** The toDoList title to display. */
-  private get toDoListTitle (): string {
-    return this.getTodoListResource?.title
-  }
-
   @Watch('getTasks', { immediate: true })
   private async onTasksChanged (): Promise<void> {
     // load data initially and when tasks list changes
     await this.loadData()
   }
 
-  /** Called when this component is destroyed */
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  protected beforeDestroy (): void {
     // cancel the check timer if it is running
     clearTimeout(this.checkTimer)
   }
@@ -1686,10 +1642,6 @@ export default class TodoList extends Mixins(
   padding: 0;
   justify-content: space-evenly;
   align-items: flex-start;
-
-  .bcorps-ar-subtitle {
-    padding: 1rem 0 .5rem 0;
-  }
 }
 
 .todo-item .list-item .list-item__actions {
diff --git a/src/components/Dashboard/ActionRequired.vue b/src/components/Dashboard/TodoList/ActionRequired.vue
similarity index 88%
rename from src/components/Dashboard/ActionRequired.vue
rename to src/components/Dashboard/TodoList/ActionRequired.vue
index d08b78099..b202087c4 100644
--- a/src/components/Dashboard/ActionRequired.vue
+++ b/src/components/Dashboard/TodoList/ActionRequired.vue
@@ -7,8 +7,8 @@
           BC Registries is missing information about your business (e.g., business start date, nature of business,
           business address etc.). Please contact BC Registries to input any missing business information. Missing
           information must be entered before you can file changes or dissolve this business.
-          <v-btn class="details-btn pl-1" outlined color="primary"  :ripple="false" @click.stop="togglePanel">
-            <v-icon left color="primary" class="mr-0">mdi-information-outline</v-icon>
+          <v-btn class="details-btn" outlined color="primary" :ripple="false" @click.stop="togglePanel()">
+            <v-icon color="primary">mdi-information-outline</v-icon>
             <span color="primary">{{ panel === 0 ? "Hide Details" : "View Details" }}</span>
           </v-btn>
         </p>
diff --git a/src/components/Dashboard/TodoList/CorrectionComment.vue b/src/components/Dashboard/TodoList/CorrectionComment.vue
new file mode 100644
index 000000000..4cc21930b
--- /dev/null
+++ b/src/components/Dashboard/TodoList/CorrectionComment.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="correction-comment" v-if="comment">
+    <h4>
+      <v-icon small>mdi-message-reply</v-icon>
+      <span class="ml-1">Detail</span>
+    </h4>
+
+    <p class="body-2 detail-body pre-line pt-4 mb-0">
+      {{ comment }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class CorrectionComment extends Vue {
+  /** The correction detail comment. */
+  @Prop({ default: null }) readonly comment: string
+}
+</script>
diff --git a/src/components/EntityInfo.vue b/src/components/EntityInfo.vue
index 1f37d5ad8..d4f101c9c 100644
--- a/src/components/EntityInfo.vue
+++ b/src/components/EntityInfo.vue
@@ -223,12 +223,9 @@ export default class EntityInfo extends Mixins(AllowableActionsMixin, CommonMixi
   @Getter getBusinessNumber!: string
   @Getter getIdentifier!: number
   @Getter getEntityName!: string
-  @Getter isCoop!: boolean
   @Getter getNrNumber!: string
-  @Getter isGoodStanding!: boolean
   @Getter isPendingDissolution!: boolean
   @Getter isNotInCompliance!: boolean
-  @Getter isFirm!: boolean
   @Getter getEntityFoundingDate!: Date
 
   // enums for template
@@ -253,7 +250,7 @@ export default class EntityInfo extends Mixins(AllowableActionsMixin, CommonMixi
     return sessionStorage.getItem('AUTH_WEB_URL') + 'businessprofile'
   }
 
-  /** The Incorporation Application's Temporary Registration Number string. */
+  /** The Temporary Registration Number string. */
   get tempRegNumber (): string {
     return sessionStorage.getItem('TEMP_REG_NUMBER')
   }
diff --git a/src/components/common/Certify.vue b/src/components/common/Certify.vue
index b4c58cad8..d51751e22 100644
--- a/src/components/common/Certify.vue
+++ b/src/components/common/Certify.vue
@@ -58,7 +58,7 @@ export default class Certify extends Vue {
   readonly entityDisplay: string
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // inform parent of initial validity
     this.emitValid(!!this.trimmedCertifiedBy && this.isCertified)
   }
diff --git a/src/components/common/DetailComment.vue b/src/components/common/DetailComment.vue
index 3c89c9d6c..4e56a2b14 100644
--- a/src/components/common/DetailComment.vue
+++ b/src/components/common/DetailComment.vue
@@ -53,7 +53,7 @@ export default class DetailComment extends Vue {
   readonly autofocus: boolean
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // inform parent of initial validity
     this.emitValid(this.value)
   }
diff --git a/src/components/common/NameRequestInfo.vue b/src/components/common/NameRequestInfo.vue
index 00319cb8e..fa93104e6 100644
--- a/src/components/common/NameRequestInfo.vue
+++ b/src/components/common/NameRequestInfo.vue
@@ -96,7 +96,7 @@ export default class NameRequestInfo extends Mixins(DateMixin, EnumMixin, NameRe
   private nameRequestApplicant: NameRequestApplicantIF
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     if (!this.nameRequest) return // safety check
 
     this.parsedNameRequest = this.parseNameRequest(this.nameRequest, null)
diff --git a/src/components/common/OfficeAddresses.vue b/src/components/common/OfficeAddresses.vue
index 728fbf8be..c520cb0d2 100644
--- a/src/components/common/OfficeAddresses.vue
+++ b/src/components/common/OfficeAddresses.vue
@@ -43,7 +43,7 @@
                   <br />
                   <v-btn
                     class="reset-btn"
-                    color="red"
+                    color="error"
                     id="reg-off-addr-reset-btn"
                     outlined
                     small
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 4fe74826f..163ada2cb 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,7 +3,6 @@ import Certify from './Certify.vue'
 import ContactInfo from './ContactInfo.vue'
 import DateTooltip from './DateTooltip.vue'
 import DetailComment from './DetailComment.vue'
-import DetailsList from './DetailsList.vue'
 import ImportantMessage from './ImportantMessage.vue'
 import NameRequestInfo from './NameRequestInfo.vue'
 import OfficeAddresses from './OfficeAddresses.vue'
@@ -22,7 +21,6 @@ export {
   ContactInfo,
   DateTooltip,
   DetailComment,
-  DetailsList,
   ImportantMessage,
   NameRequestInfo,
   OfficeAddresses,
diff --git a/src/components/dialogs/AddCommentDialog.vue b/src/components/dialogs/AddCommentDialog.vue
index 07ad40bfc..ea1440533 100644
--- a/src/components/dialogs/AddCommentDialog.vue
+++ b/src/components/dialogs/AddCommentDialog.vue
@@ -4,7 +4,7 @@
       <v-card-title id="dialog-title">Add Detail</v-card-title>
 
       <v-card-text>
-        <detail-comment
+        <DetailComment
           ref="detailComment"
           v-model="comment"
           autofocus
@@ -38,7 +38,7 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator'
 import axios from '@/axios-auth'
 import { DetailComment } from '@/components/common'
-import { HistoryItemIF, TodoItemIF } from '@/interfaces'
+import { HistoryItemIF } from '@/interfaces'
 
 @Component({
   components: {
@@ -54,16 +54,16 @@ export default class AddCommentDialog extends Vue {
 
   /** The filing to add a comment to. */
   @Prop({ default: null })
-  readonly filing: HistoryItemIF | TodoItemIF
+  readonly filing: HistoryItemIF
 
   /** The comment text. */
-  private comment: string = ''
+  protected comment = ''
 
   /** Whether the detail component is valid. */
-  private detailCommentValid: boolean = false
+  protected detailCommentValid = false
 
   /** Whether this component is currently saving. */
-  private saving: boolean = false
+  protected saving = false
 
   /** Called when prop changes (ie, dialog is shown/hidden). */
   @Watch('dialog')
@@ -83,10 +83,10 @@ export default class AddCommentDialog extends Vue {
    * @param needReload Whether the dashboard needs to be reloaded.
    */
   @Emit('close')
-  private emitClose (needReload: boolean): void { }
+  protected emitClose (needReload: boolean): void { }
 
   /** Saves the current comment. */
-  private async save (): Promise<void> {
+  protected async save (): Promise<void> {
     // prevent double saving
     if (this.saving) return
 
diff --git a/src/components/dialogs/AddStaffNotationDialog.vue b/src/components/dialogs/AddStaffNotationDialog.vue
index 2cc82b06e..9705ad950 100644
--- a/src/components/dialogs/AddStaffNotationDialog.vue
+++ b/src/components/dialogs/AddStaffNotationDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="add-notation-dialog">
+  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="add-staff-notation-dialog">
     <v-card>
       <v-card-title id="dialog-title">
         <span v-if="administrativeDissolution" id="dialog-title"><strong>{{displayName}}</strong></span>
diff --git a/src/components/dialogs/ConfirmDissolution.vue b/src/components/dialogs/ConfirmDissolutionDialog.vue
similarity index 94%
rename from src/components/dialogs/ConfirmDissolution.vue
rename to src/components/dialogs/ConfirmDissolutionDialog.vue
index 79200459c..b6b5e5a86 100644
--- a/src/components/dialogs/ConfirmDissolution.vue
+++ b/src/components/dialogs/ConfirmDissolutionDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach">
+  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="confirm-dissolution-dialog">
     <v-card class="pa-5">
       <v-card-subtitle class="pt-5" align="center">
         <v-icon color="error" large>mdi-information-outline</v-icon>
@@ -10,7 +10,7 @@
 
       <v-card-text>
         <p class="warning-title" id="dialog-title">
-        {{getModalTitle}}
+          {{getModalTitle}}
         </p>
         <p class="warning-text" id="dialog-text">
           You are about to {{ dissolutionType }} <strong>{{ getEntityName }}</strong>;
@@ -32,7 +32,7 @@
             outlined
             @click="close()"
           >
-            Cancel
+            <span>Cancel</span>
           </v-btn>
           <v-btn
             id="dialog-proceed-button"
@@ -40,7 +40,7 @@
             color="primary"
             @click="proceed()"
           >
-            {{getConfirmButtonText}}
+            <span>{{getConfirmButtonText}}</span>
             <v-icon>mdi-chevron-right</v-icon>
           </v-btn>
         </v-row>
@@ -56,7 +56,7 @@ import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 
 @Component({})
-export default class ConfirmDissolution extends Vue {
+export default class ConfirmDissolutionDialog extends Vue {
   /** Prop to display the dialog. */
   @Prop({ default: false }) readonly dialog: boolean
 
diff --git a/src/components/dialogs/index.ts b/src/components/dialogs/index.ts
index ae795a41e..b7c38efab 100644
--- a/src/components/dialogs/index.ts
+++ b/src/components/dialogs/index.ts
@@ -4,7 +4,7 @@ import BusinessAuthErrorDialog from './BusinessAuthErrorDialog.vue'
 import CancelPaymentErrorDialog from './CancelPaymentErrorDialog.vue'
 import CoaWarningDialog from './CoaWarningDialog.vue'
 import { ConfirmDialog } from '@bcrs-shared-components/confirm-dialog'
-import ConfirmDissolution from './ConfirmDissolution.vue'
+import ConfirmDissolutionDialog from './ConfirmDissolutionDialog.vue'
 import DashboardUnavailableDialog from './DashboardUnavailableDialog.vue'
 import DeleteErrorDialog from './DeleteErrorDialog.vue'
 import DownloadErrorDialog from './DownloadErrorDialog.vue'
@@ -26,7 +26,7 @@ export {
   CancelPaymentErrorDialog,
   CoaWarningDialog,
   ConfirmDialog,
-  ConfirmDissolution,
+  ConfirmDissolutionDialog,
   DashboardUnavailableDialog,
   DeleteErrorDialog,
   DownloadErrorDialog,
diff --git a/src/interfaces/todo-item-interface.ts b/src/interfaces/todo-item-interface.ts
index 96b4b45cf..688f491d3 100644
--- a/src/interfaces/todo-item-interface.ts
+++ b/src/interfaces/todo-item-interface.ts
@@ -13,7 +13,7 @@ export interface TodoItemIF {
   order: number
   status: string
   title: string
-  commentsLink: string
+  comments?: Array<any> // always [] and never used
 
   // Todo ARs and Draft IAs only
   subtitle?: string
@@ -23,9 +23,6 @@ export interface TodoItemIF {
   paymentToken?: number
   payErrorObj?: PaymentErrorIF
 
-  // alterations and corrections only
-  comments?: Array<any>
-
   // ARs only
   ARFilingYear?: number // YYYY
 
@@ -38,6 +35,7 @@ export interface TodoItemIF {
   arDueDate?: string // eg, "Apr 9, 2021"
 
   // corrections only
+  comment?: string
   correctedFilingId?: number
   correctedFilingType?: string
 
diff --git a/src/views/AnnualReport.vue b/src/views/AnnualReport.vue
index 894d8fb8f..180a4d656 100644
--- a/src/views/AnnualReport.vue
+++ b/src/views/AnnualReport.vue
@@ -517,7 +517,7 @@ export default class AnnualReport extends Mixins(
   }
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // init
     this.setFilingData([])
 
@@ -596,7 +596,8 @@ export default class AnnualReport extends Mixins(
     }
   }
 
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  protected beforeDestroy (): void {
     // stop listening for custom events
     this.$root.$off('fetch-error-event')
   }
diff --git a/src/views/Correction.vue b/src/views/Correction.vue
index f7db8f2d3..1d3ab7dc8 100644
--- a/src/views/Correction.vue
+++ b/src/views/Correction.vue
@@ -179,7 +179,7 @@
 <script lang="ts">
 // Libraries
 import { Component, Mixins, Watch } from 'vue-property-decorator'
-import { Action, Getter, State } from 'vuex-class'
+import { Getter, State } from 'vuex-class'
 import { PAYMENT_REQUIRED } from 'http-status-codes'
 import { navigate } from '@/utils'
 
@@ -191,9 +191,9 @@ import { ConfirmDialog, LoadCorrectionDialog, PaymentErrorDialog, ResumeErrorDia
 
 // Mixins, enums and interfaces
 import { CommonMixin, DateMixin, EnumMixin, FilingMixin, LegalApiMixin, ResourceLookupMixin } from '@/mixins'
-import { CorpTypeCd, FilingCodes, FilingStatus, FilingTypes, Routes, SaveErrorReasons,
+import { FilingCodes, FilingStatus, FilingTypes, Routes, SaveErrorReasons,
   StaffPaymentOptions } from '@/enums'
-import { ActionBindingIF, ConfirmDialogType, FilingDataIF, StaffPaymentIF } from '@/interfaces'
+import { ConfirmDialogType, StaffPaymentIF } from '@/interfaces'
 
 @Component({
   components: {
@@ -217,15 +217,9 @@ export default class Correction extends Mixins(
   }
 
   @State entityFoundingDate!: Date
-  @State filingData!: Array<FilingDataIF>
 
   @Getter isRoleStaff!: boolean
-  @Getter getCurrentDate!: string
-  @Getter getEntityType!: CorpTypeCd
   @Getter getEntityName!: string
-  @Getter getIdentifier!: string
-
-  @Action setFilingData!: ActionBindingIF
 
   // enum for template
   readonly FilingCodes = FilingCodes
@@ -342,7 +336,7 @@ export default class Correction extends Mixins(
   }
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // init
     this.setFilingData([])
 
diff --git a/src/views/StandaloneDirectorsFiling.vue b/src/views/StandaloneDirectorsFiling.vue
index 21b4d28ba..5c30c3152 100644
--- a/src/views/StandaloneDirectorsFiling.vue
+++ b/src/views/StandaloneDirectorsFiling.vue
@@ -298,7 +298,7 @@
 <script lang="ts">
 // Libraries
 import { Component, Mixins, Watch } from 'vue-property-decorator'
-import { Action, Getter, State } from 'vuex-class'
+import { Getter, State } from 'vuex-class'
 import { PAYMENT_REQUIRED } from 'http-status-codes'
 import { isEmpty } from 'lodash'
 import { navigate } from '@/utils'
@@ -313,8 +313,8 @@ import { ConfirmDialog, FetchErrorDialog, PaymentErrorDialog, ResumeErrorDialog,
 
 // Mixins, enums and interfaces
 import { CommonMixin, DateMixin, FilingMixin, LegalApiMixin, ResourceLookupMixin } from '@/mixins'
-import { CorpTypeCd, FilingCodes, FilingTypes, Routes, SaveErrorReasons, StaffPaymentOptions } from '@/enums'
-import { ActionBindingIF, ConfirmDialogType, FilingDataIF, StaffPaymentIF } from '@/interfaces'
+import { FilingCodes, FilingTypes, Routes, SaveErrorReasons, StaffPaymentOptions } from '@/enums'
+import { ConfirmDialogType, StaffPaymentIF } from '@/interfaces'
 
 @Component({
   components: {
@@ -341,16 +341,9 @@ export default class StandaloneDirectorsFiling extends Mixins(
   }
 
   @State entityFoundingDate!: Date
-  @State filingData!: Array<FilingDataIF>
 
-  @Getter isBComp!: boolean
   @Getter isRoleStaff!: boolean
-  @Getter getCurrentDate!: string
-  @Getter getEntityType!: CorpTypeCd
   @Getter getEntityName!: string
-  @Getter getIdentifier!: string
-
-  @Action setFilingData!: ActionBindingIF
 
   // variables
   private updatedDirectors = []
@@ -443,7 +436,7 @@ export default class StandaloneDirectorsFiling extends Mixins(
   }
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // init
     this.setFilingData([])
 
@@ -502,7 +495,8 @@ export default class StandaloneDirectorsFiling extends Mixins(
     this.dataLoaded = true
   }
 
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  protected beforeDestroy (): void {
     // stop listening for custom events
     this.$root.$off('fetch-error-event')
   }
diff --git a/src/views/StandaloneOfficeAddressFiling.vue b/src/views/StandaloneOfficeAddressFiling.vue
index 268758e4c..dfb0d0fe9 100644
--- a/src/views/StandaloneOfficeAddressFiling.vue
+++ b/src/views/StandaloneOfficeAddressFiling.vue
@@ -193,7 +193,7 @@
 <script lang="ts">
 // Libraries
 import { Component, Mixins, Watch } from 'vue-property-decorator'
-import { Action, Getter, State } from 'vuex-class'
+import { Getter, State } from 'vuex-class'
 import { PAYMENT_REQUIRED } from 'http-status-codes'
 import { isEmpty } from 'lodash'
 import { navigate } from '@/utils'
@@ -206,8 +206,8 @@ import { ConfirmDialog, FetchErrorDialog, PaymentErrorDialog, ResumeErrorDialog,
 
 // Mixins, enums and interfaces
 import { CommonMixin, DateMixin, FilingMixin, LegalApiMixin, ResourceLookupMixin } from '@/mixins'
-import { CorpTypeCd, FilingCodes, FilingTypes, Routes, SaveErrorReasons, StaffPaymentOptions } from '@/enums'
-import { ActionBindingIF, ConfirmDialogType, FilingDataIF, StaffPaymentIF } from '@/interfaces'
+import { FilingCodes, FilingTypes, Routes, SaveErrorReasons, StaffPaymentOptions } from '@/enums'
+import { ConfirmDialogType, StaffPaymentIF } from '@/interfaces'
 
 @Component({
   components: {
@@ -232,17 +232,10 @@ export default class StandaloneOfficeAddressFiling extends Mixins(
   }
 
   @State entityFoundingDate!: Date
-  @State filingData!: Array<FilingDataIF>
 
-  @Getter isBComp!: boolean
   @Getter isCoop!: boolean
   @Getter isRoleStaff!: boolean
-  @Getter getCurrentDate!: string
-  @Getter getEntityType!: CorpTypeCd
   @Getter getEntityName!: string
-  @Getter getIdentifier!: string
-
-  @Action setFilingData!: ActionBindingIF
 
   // variables
   private updatedAddresses: any = { registeredOffice: {}, recordsOffice: {} }
@@ -322,7 +315,7 @@ export default class StandaloneOfficeAddressFiling extends Mixins(
   }
 
   /** Called when component is created. */
-  created (): void {
+  protected created (): void {
     // init
     this.setFilingData([])
 
@@ -383,7 +376,8 @@ export default class StandaloneOfficeAddressFiling extends Mixins(
     this.dataLoaded = true
   }
 
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  protected beforeDestroy (): void {
     // stop listening for custom events
     this.$root.$off('fetch-error-event')
   }
diff --git a/src/views/auth/Signin.vue b/src/views/auth/Signin.vue
index bf77740d2..952ef642b 100644
--- a/src/views/auth/Signin.vue
+++ b/src/views/auth/Signin.vue
@@ -8,7 +8,8 @@ import { navigate } from '@/utils'
 
 @Component({})
 export default class Signin extends Vue {
-  created () {
+  /** Called when component is created. */
+  protected created () {
     // navigate to BC Registry login page then return to this app
     const loginUrl = sessionStorage.getItem('REGISTRY_HOME_URL') + 'login'
     const returnUrl = encodeURIComponent(sessionStorage.getItem('BASE_URL'))
diff --git a/tests/unit/ActionRequired.spec.ts b/tests/unit/ActionRequired.spec.ts
index b2163b67c..5d53d53c1 100644
--- a/tests/unit/ActionRequired.spec.ts
+++ b/tests/unit/ActionRequired.spec.ts
@@ -2,7 +2,7 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import { mount } from '@vue/test-utils'
-import ActionRequired from '@/components/Dashboard/ActionRequired.vue'
+import ActionRequired from '@/components/Dashboard/TodoList/ActionRequired.vue'
 import { ContactInfo } from '@/components/common'
 
 Vue.use(Vuetify)
diff --git a/tests/unit/ConfirmDissolution.spec.ts b/tests/unit/ConfirmDissolutionDialog.spec.ts
similarity index 92%
rename from tests/unit/ConfirmDissolution.spec.ts
rename to tests/unit/ConfirmDissolutionDialog.spec.ts
index 332d764e6..a4cc29874 100644
--- a/tests/unit/ConfirmDissolution.spec.ts
+++ b/tests/unit/ConfirmDissolutionDialog.spec.ts
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import { shallowMount } from '@vue/test-utils'
 import { getVuexStore } from '@/store'
-import { ConfirmDissolution } from '@/components/dialogs'
+import { ConfirmDissolutionDialog } from '@/components/dialogs'
 import { ConfigJson } from '@/resources'
 
 Vue.use(Vuetify)
@@ -10,12 +10,12 @@ Vue.use(Vuetify)
 const vuetify = new Vuetify({})
 const store = getVuexStore() as any // remove typings for unit tests
 
-describe('ConfirmDissolution - Displays Confirmation messages', () => {
+describe('Confirm Dissolution Dialog - Displays Confirmation messages', () => {
   it('displays confirmation modal to users for Sole Proprietorship', () => {
     store.state.entityType = 'SP'
     store.state.configObject = ConfigJson.find(x => x.entityType === store.state.entityType)
 
-    const wrapper = shallowMount(ConfirmDissolution,
+    const wrapper = shallowMount(ConfirmDissolutionDialog,
       {
         propsData: {
           dialog: true
@@ -44,7 +44,7 @@ describe('ConfirmDissolution - Displays Confirmation messages', () => {
     store.state.entityType = 'GP'
     store.state.configObject = ConfigJson.find(x => x.entityType === store.state.entityType)
 
-    const wrapper = shallowMount(ConfirmDissolution,
+    const wrapper = shallowMount(ConfirmDissolutionDialog,
       {
         propsData: {
           dialog: true
@@ -73,7 +73,7 @@ describe('ConfirmDissolution - Displays Confirmation messages', () => {
     store.state.entityType = 'BEN'
     store.state.configObject = ConfigJson.find(x => x.entityType === store.state.entityType)
 
-    const wrapper = shallowMount(ConfirmDissolution,
+    const wrapper = shallowMount(ConfirmDissolutionDialog,
       {
         propsData: {
           dialog: true
diff --git a/tests/unit/CorrectionComment.spec.ts b/tests/unit/CorrectionComment.spec.ts
new file mode 100644
index 000000000..add16cddf
--- /dev/null
+++ b/tests/unit/CorrectionComment.spec.ts
@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { mount } from '@vue/test-utils'
+import CorrectionComment from '@/components/Dashboard/TodoList/CorrectionComment.vue'
+
+Vue.use(Vuetify)
+const vuetify = new Vuetify({})
+
+describe('DetailComment', () => {
+  it('initializes correctly with no comment prop', () => {
+    const wrapper = mount(CorrectionComment, {
+      propsData: {},
+      vuetify
+    })
+    const vm: any = wrapper.vm
+
+    expect(wrapper.find(CorrectionComment).exists()).toBe(true)
+    expect(wrapper.find('.correction-comment').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('initializes correctly with comment prop', () => {
+    const wrapper = mount(CorrectionComment, {
+      propsData: { comment: 'A test comment' },
+      vuetify
+    })
+    const vm: any = wrapper.vm
+
+    expect(wrapper.find(CorrectionComment).exists()).toBe(true)
+    expect(wrapper.find('h4 span').text()).toBe('Detail')
+    expect(wrapper.find('p').text()).toBe('A test comment')
+
+    wrapper.destroy()
+  })
+})
diff --git a/tests/unit/DetailsList.spec.ts b/tests/unit/DetailsList.spec.ts
index 0e3a4d84d..46b2237d0 100644
--- a/tests/unit/DetailsList.spec.ts
+++ b/tests/unit/DetailsList.spec.ts
@@ -3,7 +3,7 @@ import Vuetify from 'vuetify'
 import Vuelidate from 'vuelidate'
 import { getVuexStore } from '@/store'
 import { shallowMount } from '@vue/test-utils'
-import { DetailsList } from '@/components/common'
+import DetailsList from '@/components/Dashboard/FilingHistoryList/DetailsList.vue'
 
 Vue.use(Vuetify)
 Vue.use(Vuelidate)
@@ -128,26 +128,7 @@ describe('Details List', () => {
 
     const wrapper = shallowMount(DetailsList, {
       store,
-      propsData: {
-        filing: mockFilingOneComment,
-        isTask: false
-      }
-    })
-
-    expect(wrapper.find('.title-bar').text()).not.toContain('Add Detail')
-
-    wrapper.destroy()
-  })
-
-  it('Does NOT display the add detail btn when the item is a task', () => {
-    store.state.keycloakRoles = ['staff']
-
-    const wrapper = shallowMount(DetailsList, {
-      store,
-      propsData: {
-        filing: mockFilingOneComment,
-        isTask: true
-      }
+      propsData: { filing: mockFilingOneComment }
     })
 
     expect(wrapper.find('.title-bar').text()).not.toContain('Add Detail')
@@ -160,10 +141,7 @@ describe('Details List', () => {
 
     const wrapper = shallowMount(DetailsList, {
       store,
-      propsData: {
-        filing: mockFilingOneComment,
-        isTask: false
-      }
+      propsData: { filing: mockFilingOneComment }
     })
 
     expect(wrapper.find('.title-bar').text()).toContain('Add Detail')
@@ -176,10 +154,7 @@ describe('Details List', () => {
 
     const wrapper = shallowMount(DetailsList, {
       store,
-      propsData: {
-        filing: mockFilingOneComment,
-        isTask: false
-      }
+      propsData: { filing: mockFilingOneComment }
     })
 
     expect(wrapper.find('.title-bar').text()).toContain('Detail (1)')
@@ -197,10 +172,7 @@ describe('Details List', () => {
     const wrapper = shallowMount(DetailsList, {
       store,
       vuetify,
-      propsData: {
-        filing: mockFilingManyComments,
-        isTask: false
-      }
+      propsData: { filing: mockFilingManyComments }
     })
     await Vue.nextTick()
 
diff --git a/tests/unit/FilingHistoryList1.spec.ts b/tests/unit/FilingHistoryList1.spec.ts
index ef2f2c21f..9cbcde918 100644
--- a/tests/unit/FilingHistoryList1.spec.ts
+++ b/tests/unit/FilingHistoryList1.spec.ts
@@ -11,13 +11,13 @@ import sinon from 'sinon'
 import FilingHistoryList from '@/components/Dashboard/FilingHistoryList.vue'
 import CompletedAlteration from '@/components/Dashboard/FilingHistoryList/CompletedAlteration.vue'
 import CompletedIa from '@/components/Dashboard/FilingHistoryList/CompletedIa.vue'
+import DetailsList from '@/components/Dashboard/FilingHistoryList/DetailsList.vue'
 import DocumentsList from '@/components/Dashboard/FilingHistoryList/DocumentsList.vue'
 import FutureEffective from '@/components/Dashboard/FilingHistoryList/FutureEffective.vue'
 import FutureEffectivePending from '@/components/Dashboard/FilingHistoryList/FutureEffectivePending.vue'
 import PaperFiling from '@/components/Dashboard/FilingHistoryList/PaperFiling.vue'
 import PendingFiling from '@/components/Dashboard/FilingHistoryList/PendingFiling.vue'
 import StaffFiling from '@/components/Dashboard/FilingHistoryList/StaffFiling.vue'
-import { DetailsList } from '@/components/common'
 
 Vue.use(Vuetify)
 Vue.use(Vuelidate)
diff --git a/tests/unit/TodoList1.spec.ts b/tests/unit/TodoList1.spec.ts
index 52cb109c7..6a1a9f27a 100644
--- a/tests/unit/TodoList1.spec.ts
+++ b/tests/unit/TodoList1.spec.ts
@@ -11,12 +11,12 @@ import { getVuexStore } from '@/store'
 import flushPromises from 'flush-promises'
 
 // Components
-import { DetailsList } from '@/components/common'
 import TodoList from '@/components/Dashboard/TodoList.vue'
-import PaymentPending from '@/components/Dashboard/TodoList/PaymentPending.vue'
-import PaymentPendingOnlineBanking from '@/components/Dashboard/TodoList/PaymentPendingOnlineBanking.vue'
+import CorrectionComment from '@/components/Dashboard/TodoList/CorrectionComment.vue'
 import PaymentIncomplete from '@/components/Dashboard/TodoList/PaymentIncomplete.vue'
 import PaymentPaid from '@/components/Dashboard/TodoList/PaymentPaid.vue'
+import PaymentPending from '@/components/Dashboard/TodoList/PaymentPending.vue'
+import PaymentPendingOnlineBanking from '@/components/Dashboard/TodoList/PaymentPendingOnlineBanking.vue'
 import PaymentUnsuccessful from '@/components/Dashboard/TodoList/PaymentUnsuccessful.vue'
 
 // suppress "Avoid mutating a prop directly" warnings
@@ -512,10 +512,10 @@ describe('TodoList - UI', () => {
     expect(item.querySelector('.list-item__subtitle').textContent).toContain('DRAFT')
 
     expect(item.querySelector('.list-item__subtitle .todo-subtitle').textContent)
-      .toContain('Detail (1)')
+      .toContain('View Details')
 
     // Validate the child component does NOT exist on the parent before opening the dropdown
-    expect(wrapper.find(DetailsList).exists()).toBe(false)
+    expect(wrapper.find(CorrectionComment).exists()).toBe(false)
 
     // click the View Details button
     await wrapper.find('.list-item__subtitle .todo-subtitle .expand-btn').trigger('click')
@@ -527,7 +527,7 @@ describe('TodoList - UI', () => {
     expect(item.querySelector('.list-item__actions .v-btn')).toBeNull()
 
     // Validate the child component exists on the parent after opening the dropdown
-    expect(wrapper.find(DetailsList).exists()).toBe(true)
+    expect(wrapper.find(CorrectionComment).exists()).toBe(true)
 
     wrapper.destroy()
   })
@@ -628,10 +628,10 @@ describe('TodoList - UI', () => {
     expect(item.querySelector('.list-item__subtitle').textContent).toContain('FILING PENDING')
 
     expect(item.querySelector('.list-item__subtitle .todo-subtitle').textContent)
-      .toContain('Detail (1)')
+      .toContain('View Details')
 
     // Validate the child component does NOT exist on the parent before opening the dropdown
-    expect(wrapper.find(DetailsList).exists()).toBe(false)
+    expect(wrapper.find(CorrectionComment).exists()).toBe(false)
 
     // click the View Details button
     await wrapper.find('.list-item__subtitle .todo-subtitle .expand-btn').trigger('click')
@@ -643,7 +643,7 @@ describe('TodoList - UI', () => {
     expect(item.querySelector('.list-item__actions .v-btn')).toBeNull()
 
     // Validate the child component exists on the parent after opening the dropdown
-    expect(wrapper.find(DetailsList).exists()).toBe(true)
+    expect(wrapper.find(CorrectionComment).exists()).toBe(true)
 
     wrapper.destroy()
   })
@@ -1087,7 +1087,7 @@ describe('TodoList - UI - BCOMPs', () => {
 
     const item = vm.$el.querySelector('.list-item')
     expect(item.querySelector('.list-item__title').textContent).toContain('File 2019 Annual Report')
-    expect(item.querySelector('.bcorps-ar-subtitle').textContent)
+    expect(item.querySelector('.list-item__subtitle').textContent)
       .toContain('Verify your Office Address and Current Directors before filing your Annual Report.')
 
     // Simulate Checkbox being selected to enable File Now Button
@@ -1134,7 +1134,7 @@ describe('TodoList - UI - BCOMPs', () => {
 
     const item = vm.$el.querySelector('.list-item')
     expect(item.querySelector('.list-item__title').textContent).toContain('File 2019 Annual Report')
-    expect(item.querySelector('.bcorps-ar-subtitle').textContent)
+    expect(item.querySelector('.list-item__subtitle').textContent)
       .toContain('Verify your Office Address and Current Directors before filing your Annual Report.')
 
     // Verify checkbox is disabled
@@ -1185,7 +1185,7 @@ describe('TodoList - UI - BCOMPs', () => {
 
     const item = vm.$el.querySelector('.list-item')
     expect(item.querySelector('.list-item__title').textContent).toContain('File 2019 Annual Report')
-    expect(item.querySelector('.bcorps-ar-subtitle').textContent)
+    expect(item.querySelector('.list-item__subtitle').textContent)
       .toContain('Verify your Office Address and Current Directors before filing your Annual Report.')
 
     const button = item.querySelector('.list-item__actions .v-btn')
@@ -2007,7 +2007,7 @@ describe('TodoList - Click Tests - BCOMPs', () => {
 
     // verify checkbox content
     const firstTodoItem = vm.$el.querySelectorAll('.todo-item')[0]
-    const htmlDivElement = firstTodoItem.querySelector('.bcorps-ar-subtitle .todo-list-checkbox')
+    const htmlDivElement = firstTodoItem.querySelector('.list-item__subtitle .todo-list-checkbox')
     expect(htmlDivElement.textContent)
       .toContain('All information about the Office Addresses and Current Directors is correct.')
 
@@ -2356,7 +2356,7 @@ describe('TodoList - Click Tests - IA Corrections', () => {
     await Vue.nextTick()
 
     expect(vm.todoItems.length).toEqual(1)
-    expect(wrapper.find('.todo-subtitle').text()).toBe('DRAFT')
+    expect(wrapper.find('.todo-subtitle span').text()).toBe('DRAFT')
 
     await wrapper.find('.btn-corr-draft-resume').trigger('click')
 
diff --git a/tests/unit/TodoList2.spec.ts b/tests/unit/TodoList2.spec.ts
index ea3a4210b..acd34a165 100644
--- a/tests/unit/TodoList2.spec.ts
+++ b/tests/unit/TodoList2.spec.ts
@@ -207,7 +207,7 @@ xdescribe('TodoList - tests specific to Benefit Companies', () => {
 
   it('displays new AR header/checkbox', async () => {
     // verify title
-    // verify bcorps-ar-subtitle
+    // verify bcomp ar subtitle
     // verify no subtitle
     // verify enable-checkbox
     // verify no details expand-btn